From cc2b7e718fe6f8ddc19d8bd5af407b766bb05512 Mon Sep 17 00:00:00 2001
From: nano <df@proconsis.ch>
Date: Wed, 28 May 2025 15:19:33 +0200
Subject: [PATCH 01/27] added new reservation form

---
 OrariAperti/frontend/src/components/Main.tsx  | 145 ++++++++++++++++--
 .../frontend/src/components/ui/label.tsx      |   2 +-
 OrariAperti/frontend/src/index.css            |  89 +++++------
 OrariAperti/frontend/vite.config.ts           |  10 +-
 4 files changed, 191 insertions(+), 55 deletions(-)

diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index 9ffd6f9..1b3aa3a 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -1,10 +1,137 @@
-export default function Main() {
-    return (
-        <>
-            <main className="container mx-auto px-2 sm:px-6 pt-6 min-h-screen flex flex-col items-center w-full">
-                
-            </main>
-        </>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { CalendarIcon } from "lucide-react";
+
+export default function MainUIOnly() {
+  return (
+      <main className="container mx-auto px-2 sm:px-6 pt-6 min-h-screen flex flex-col items-center w-full">
+        <h1 className="text-3xl font-bold mb-6">Create a Reservation</h1>
+
+        <Card className="w-full max-w-2xl">
+          <CardHeader>
+            <CardTitle>New Reservation</CardTitle>
+            <CardDescription>
+              Fill out the form below to create a new reservation.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {/* Date Field */}
+                <div className="flex flex-col">
+                  <Label>Date</Label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button variant="outline" className="w-full pl-3 text-left font-normal">
+                        <span>Pick a date</span>
+                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar mode="single" initialFocus />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+
+                {/* Room Field */}
+                <div>
+                  <Label>Room</Label>
+                  <Select>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a room" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="101">Room 101</SelectItem>
+                      <SelectItem value="102">Room 102</SelectItem>
+                      <SelectItem value="103">Room 103</SelectItem>
+                      <SelectItem value="201">Room 201</SelectItem>
+                      <SelectItem value="202">Room 202</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Start Time Field */}
+                <div>
+                  <Label>Start Time</Label>
+                  <Select>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select start time" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="08:00">08:00</SelectItem>
+                      <SelectItem value="08:30">08:30</SelectItem>
+                      <SelectItem value="09:00">09:00</SelectItem>
+                      {/* Add more time options as needed */}
+                    </SelectContent>
+                  </Select>
+                </div>
 
+                {/* End Time Field */}
+                <div>
+                  <Label>End Time</Label>
+                  <Select>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select end time" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="09:30">09:30</SelectItem>
+                      <SelectItem value="10:00">10:00</SelectItem>
+                      <SelectItem value="10:30">10:30</SelectItem>
+                      {/* Add more time options as needed */}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {/* Description Field */}
+              <div>
+                <Label>Description</Label>
+                <Textarea
+                    placeholder="Enter a description for your reservation"
+                    className="resize-none"
+                />
+                <p className="text-sm text-muted-foreground">
+                  Briefly describe the purpose of your reservation.
+                </p>
+              </div>
+
+              {/* Participants Field */}
+              <div>
+                <Label>Participants</Label>
+                <Input placeholder="John,Jane,Alex" />
+                <p className="text-sm text-muted-foreground">
+                  Enter participant names separated by commas (letters only).
+                </p>
+              </div>
+
+              <Button type="submit" className="w-full">
+                Create Reservation
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </main>
+  );
+}
diff --git a/OrariAperti/frontend/src/components/ui/label.tsx b/OrariAperti/frontend/src/components/ui/label.tsx
index fb5fbc3..2f53a73 100644
--- a/OrariAperti/frontend/src/components/ui/label.tsx
+++ b/OrariAperti/frontend/src/components/ui/label.tsx
@@ -13,7 +13,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center pb-2 gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/OrariAperti/frontend/src/index.css b/OrariAperti/frontend/src/index.css
index 24147a2..8226754 100644
--- a/OrariAperti/frontend/src/index.css
+++ b/OrariAperti/frontend/src/index.css
@@ -42,74 +42,75 @@
 }
 
 :root {
-  --radius: 0.625rem;
+  --radius: 0.5rem;
   --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
+  --ring: oklch(0.552 0.016 285.938);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
diff --git a/OrariAperti/frontend/vite.config.ts b/OrariAperti/frontend/vite.config.ts
index 021b2ae..7df74ca 100644
--- a/OrariAperti/frontend/vite.config.ts
+++ b/OrariAperti/frontend/vite.config.ts
@@ -11,5 +11,13 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
-
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        secure: false,
+      }
+    }
+  }
 })

From 2d98c4c7262dceb5f9a0739de8cb49d0f46a53f1 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Wed, 28 May 2025 15:30:46 +0200
Subject: [PATCH 02/27] Refactor component imports and add OpenAPI
 specification for reservation API

---
 .../src/main/resources/backend-api.yaml       | 178 ++++++++++++++++++
 OrariAperti/frontend/src/App.tsx              |   2 +-
 .../frontend/src/components/Header.tsx        |   2 +-
 OrariAperti/frontend/src/components/Main.tsx  |  28 ++-
 .../frontend/src/components/ui/button.tsx     |   2 +-
 .../src/components/{ => ui}/mode-toggle.tsx   |   6 +-
 .../frontend/src/components/ui/select.tsx     |   6 +-
 .../components/{ => ui}/theme-provider.tsx    |   0
 8 files changed, 207 insertions(+), 17 deletions(-)
 create mode 100644 OrariAperti/backend/src/main/resources/backend-api.yaml
 rename OrariAperti/frontend/src/components/{ => ui}/mode-toggle.tsx (90%)
 rename OrariAperti/frontend/src/components/{ => ui}/theme-provider.tsx (100%)

diff --git a/OrariAperti/backend/src/main/resources/backend-api.yaml b/OrariAperti/backend/src/main/resources/backend-api.yaml
new file mode 100644
index 0000000..7caf3f5
--- /dev/null
+++ b/OrariAperti/backend/src/main/resources/backend-api.yaml
@@ -0,0 +1,178 @@
+openapi: 3.0.3
+info:
+  title: OrariAperti Reservation API
+  version: 1.0.0
+servers:
+  - url: /api/reservation
+paths:
+  /reservation:
+    get:
+      summary: Get reservation by public or private key
+      parameters:
+        - in: header
+          name: publicKey
+          schema:
+            type: string
+            format: uuid
+          required: false
+        - in: header
+          name: privateKey
+          schema:
+            type: string
+            format: uuid
+          required: false
+      responses:
+        '200':
+          description: Reservation found
+          content:
+            application/json:
+              schema:
+                oneOf:
+                  - $ref: '#/components/schemas/ReservationWithKeys'
+                  - $ref: '#/components/schemas/ReservationWithPublicKey'
+        '400':
+          description: Bad request
+        '404':
+          description: Not found
+    post:
+      summary: Create a new reservation
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ReservationDTO'
+      responses:
+        '200':
+          description: Reservation created
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ReservationWithKeys'
+        '400':
+          description: Bad request
+  /reservation/{id}:
+    delete:
+      summary: Delete a reservation by ID
+      parameters:
+        - in: path
+          name: id
+          required: true
+          schema:
+            type: string
+            format: uuid
+        - in: header
+          name: privateKey
+          required: true
+          schema:
+            type: string
+            format: uuid
+      responses:
+        '200':
+          description: Reservation deleted
+        '401':
+          description: Unauthorized
+        '404':
+          description: Not found
+    put:
+      summary: Update a reservation by ID
+      parameters:
+        - in: path
+          name: id
+          required: true
+          schema:
+            type: string
+            format: uuid
+        - in: header
+          name: privateKey
+          required: true
+          schema:
+            type: string
+            format: uuid
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ReservationDTO'
+      responses:
+        '200':
+          description: Reservation updated
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Reservation'
+        '400':
+          description: Bad request
+        '401':
+          description: Unauthorized
+        '404':
+          description: Not found
+
+components:
+  schemas:
+    ReservationDTO:
+      type: object
+      properties:
+        date:
+          type: string
+          format: date
+        startTime:
+          type: string
+          format: time
+        endTime:
+          type: string
+          format: time
+        room:
+          type: integer
+        description:
+          type: string
+        participants:
+          type: string
+      required: [date, startTime, endTime, room, description, participants]
+    Reservation:
+      type: object
+      properties:
+        id:
+          type: string
+          format: uuid
+        date:
+          type: string
+          format: date
+        startTime:
+          type: string
+          format: time
+        endTime:
+          type: string
+          format: time
+        room:
+          type: integer
+        description:
+          type: string
+        participants:
+          type: string
+        privateKey:
+          type: string
+          format: uuid
+        publicKey:
+          type: string
+          format: uuid
+    ReservationWithKeys:
+      type: object
+      properties:
+        reservation:
+          $ref: '#/components/schemas/Reservation'
+        privateKey:
+          type: string
+          format: uuid
+        publicKey:
+          type: string
+          format: uuid
+    ReservationWithPublicKey:
+      type: object
+      properties:
+        reservation:
+          $ref: '#/components/schemas/Reservation'
+        publicKey:
+          type: string
+          format: uuid
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/App.tsx b/OrariAperti/frontend/src/App.tsx
index 7349878..05d6d7a 100644
--- a/OrariAperti/frontend/src/App.tsx
+++ b/OrariAperti/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import {ThemeProvider} from "@/components/theme-provider.tsx";
+import {ThemeProvider} from "@/components/ui/theme-provider.tsx";
 import Header from "@/components/Header.tsx";
 import Main from "@/components/Main.tsx";
 import Footer from "@/components/Footer.tsx";
diff --git a/OrariAperti/frontend/src/components/Header.tsx b/OrariAperti/frontend/src/components/Header.tsx
index 7155aef..018207e 100644
--- a/OrariAperti/frontend/src/components/Header.tsx
+++ b/OrariAperti/frontend/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import {ModeToggle} from "@/components/mode-toggle.tsx";
+import {ModeToggle} from "@/components/ui/mode-toggle.tsx";
 import logo_dark from "/logo-oa-dark.svg";
 import logo_light from "/logo-oa-light.svg";
 
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index 1b3aa3a..989668b 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -80,10 +80,16 @@ export default function MainUIOnly() {
                       <SelectValue placeholder="Select start time" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="08:00">08:00</SelectItem>
-                      <SelectItem value="08:30">08:30</SelectItem>
-                      <SelectItem value="09:00">09:00</SelectItem>
-                      {/* Add more time options as needed */}
+                      {Array.from({ length: 31 }, (_, i) => {
+                        const hour = 6 + Math.floor(i / 2);
+                        const minute = i % 2 === 0 ? "00" : "30";
+                        const time = `${hour.toString().padStart(2, "0")}:${minute}`;
+                        return (
+                            <SelectItem key={time} value={time}>
+                              {time}
+                            </SelectItem>
+                        );
+                      })}
                     </SelectContent>
                   </Select>
                 </div>
@@ -96,10 +102,16 @@ export default function MainUIOnly() {
                       <SelectValue placeholder="Select end time" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="09:30">09:30</SelectItem>
-                      <SelectItem value="10:00">10:00</SelectItem>
-                      <SelectItem value="10:30">10:30</SelectItem>
-                      {/* Add more time options as needed */}
+                      {Array.from({ length: 31 }, (_, i) => {
+                        const hour = 6 + Math.floor(i / 2);
+                        const minute = i % 2 === 0 ? "00" : "30";
+                        const time = `${hour.toString().padStart(2, "0")}:${minute}`;
+                        return (
+                            <SelectItem key={time} value={time}>
+                              {time}
+                            </SelectItem>
+                        );
+                      })}
                     </SelectContent>
                   </Select>
                 </div>
diff --git a/OrariAperti/frontend/src/components/ui/button.tsx b/OrariAperti/frontend/src/components/ui/button.tsx
index a2df8dc..c7a7d5a 100644
--- a/OrariAperti/frontend/src/components/ui/button.tsx
+++ b/OrariAperti/frontend/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "hover:cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
diff --git a/OrariAperti/frontend/src/components/mode-toggle.tsx b/OrariAperti/frontend/src/components/ui/mode-toggle.tsx
similarity index 90%
rename from OrariAperti/frontend/src/components/mode-toggle.tsx
rename to OrariAperti/frontend/src/components/ui/mode-toggle.tsx
index 85f5c75..560075b 100644
--- a/OrariAperti/frontend/src/components/mode-toggle.tsx
+++ b/OrariAperti/frontend/src/components/ui/mode-toggle.tsx
@@ -1,13 +1,13 @@
 import { Moon, Sun } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button.tsx"
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { useTheme } from "@/components/theme-provider"
+} from "@/components/ui/dropdown-menu.tsx"
+import { useTheme } from "@/components/ui/theme-provider.tsx"
 
 export function ModeToggle() {
     const { setTheme } = useTheme()
diff --git a/OrariAperti/frontend/src/components/ui/select.tsx b/OrariAperti/frontend/src/components/ui/select.tsx
index 51f466e..a274d4c 100644
--- a/OrariAperti/frontend/src/components/ui/select.tsx
+++ b/OrariAperti/frontend/src/components/ui/select.tsx
@@ -35,7 +35,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input hover:cursor-pointer w-full data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -59,7 +59,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "bg-popover hover:cursor-pointer text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -105,7 +105,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent hover:cursor-pointer focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
diff --git a/OrariAperti/frontend/src/components/theme-provider.tsx b/OrariAperti/frontend/src/components/ui/theme-provider.tsx
similarity index 100%
rename from OrariAperti/frontend/src/components/theme-provider.tsx
rename to OrariAperti/frontend/src/components/ui/theme-provider.tsx

From 98db4e57b8dd970f18ed956dbe0b1399cf216bd2 Mon Sep 17 00:00:00 2001
From: nano <df@proconsis.ch>
Date: Wed, 11 Jun 2025 14:27:28 +0200
Subject: [PATCH 03/27] working api

---
 .../ims/orariaperti/config/WebConfig.java     |  16 +-
 .../src/main/resources/backend-api.yaml       |   2 +-
 OrariAperti/frontend/package-lock.json        | 280 ++++++++++++++++++
 OrariAperti/frontend/package.json             |   1 +
 OrariAperti/frontend/src/components/Form.tsx  |  38 +++
 OrariAperti/frontend/src/components/Main.tsx  |  34 ++-
 OrariAperti/frontend/src/types/types.ts       |  14 +
 7 files changed, 371 insertions(+), 14 deletions(-)
 create mode 100644 OrariAperti/frontend/src/components/Form.tsx
 create mode 100644 OrariAperti/frontend/src/types/types.ts

diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java b/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
index c4d8266..f74d54b 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
@@ -1,25 +1,29 @@
 package ims.orariaperti.config;
 
 import org.springframework.context.annotation.Configuration;
-import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
-import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
-import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+import org.springframework.web.servlet.config.annotation.*;
 
 @Configuration
 public class WebConfig implements WebMvcConfigurer {
 
+    @Override
+    public void addCorsMappings(CorsRegistry registry) {
+        registry.addMapping("/**") // Allow all routes
+                .allowedOrigins("http://localhost:5173") // Your React dev server
+                .allowedMethods("*") // GET, POST, PUT, DELETE, etc.
+                .allowedHeaders("*");
+    }
+
     @Override
     public void addResourceHandlers(ResourceHandlerRegistry registry) {
-        // Serve static resources from the react-app directory
         registry.addResourceHandler("/**")
                 .addResourceLocations("classpath:/static/react-app/");
     }
 
     @Override
     public void addViewControllers(ViewControllerRegistry registry) {
-        // Forward requests to the index.html for client-side routing
         registry.addViewController("/").setViewName("forward:/index.html");
         registry.addViewController("/{x:[\\w\\-]+}").setViewName("forward:/index.html");
         registry.addViewController("/{x:^(?!api$).*$}/**").setViewName("forward:/index.html");
     }
-}
\ No newline at end of file
+}
diff --git a/OrariAperti/backend/src/main/resources/backend-api.yaml b/OrariAperti/backend/src/main/resources/backend-api.yaml
index 7caf3f5..502e91c 100644
--- a/OrariAperti/backend/src/main/resources/backend-api.yaml
+++ b/OrariAperti/backend/src/main/resources/backend-api.yaml
@@ -3,7 +3,7 @@ info:
   title: OrariAperti Reservation API
   version: 1.0.0
 servers:
-  - url: /api/reservation
+  - url: localhost:8080/api
 paths:
   /reservation:
     get:
diff --git a/OrariAperti/frontend/package-lock.json b/OrariAperti/frontend/package-lock.json
index 70aa3fa..85c117b 100644
--- a/OrariAperti/frontend/package-lock.json
+++ b/OrariAperti/frontend/package-lock.json
@@ -36,6 +36,7 @@
         "@radix-ui/react-toggle-group": "^1.1.10",
         "@radix-ui/react-tooltip": "^1.2.7",
         "@tailwindcss/vite": "^4.1.7",
+        "axios": "^1.9.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
@@ -3467,6 +3468,23 @@
         "node": ">=10"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3531,6 +3549,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -3645,6 +3676,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3842,6 +3885,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -3867,6 +3919,20 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.155",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.155.tgz",
@@ -3915,6 +3981,51 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.4",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.4.tgz",
@@ -4296,6 +4407,42 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
+      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4310,6 +4457,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -4320,6 +4476,30 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-nonce": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
@@ -4329,6 +4509,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -4355,6 +4548,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -4378,6 +4583,45 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4870,6 +5114,15 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4894,6 +5147,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5158,6 +5432,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/OrariAperti/frontend/package.json b/OrariAperti/frontend/package.json
index 2670963..d88ed29 100644
--- a/OrariAperti/frontend/package.json
+++ b/OrariAperti/frontend/package.json
@@ -38,6 +38,7 @@
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.1.7",
+    "axios": "^1.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
diff --git a/OrariAperti/frontend/src/components/Form.tsx b/OrariAperti/frontend/src/components/Form.tsx
new file mode 100644
index 0000000..4124c1d
--- /dev/null
+++ b/OrariAperti/frontend/src/components/Form.tsx
@@ -0,0 +1,38 @@
+import { useForm } from "react-hook-form";
+import type {ReservationDTO} from "@/types/types.ts";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import axios from "axios";
+
+export default function ReservationForm() {
+    const { register, handleSubmit, reset } = useForm<ReservationDTO>();
+
+    const onSubmit = async (data: ReservationDTO) => {
+        try {
+            const response = await axios.post("http://localhost:8080/api/reservation", data);
+            alert("Reservation created! Keys in response.");
+            console.log(response.data);
+            reset();
+        } catch (error) {
+            alert("Failed to create reservation");
+            console.error(error);
+        }
+    };
+
+    return (
+        <Card className="max-w-md mx-auto mt-10 p-6">
+            <CardContent>
+                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+                    <Input placeholder="Date (YYYY-MM-DD)" {...register("date")} />
+                    <Input placeholder="Start Time (HH:mm)" {...register("startTime")} />
+                    <Input placeholder="End Time (HH:mm)" {...register("endTime")} />
+                    <Input placeholder="Room Number" type="number" {...register("room")} />
+                    <Input placeholder="Description" {...register("description")} />
+                    <Input placeholder="Participants (comma separated)" {...register("participants")} />
+                    <Button type="submit" className="w-full">Create Reservation</Button>
+                </form>
+            </CardContent>
+        </Card>
+    );
+}
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index 989668b..c8f2878 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import Form from "@/components/Form";
 import {
   Popover,
   PopoverContent,
@@ -23,12 +24,31 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { CalendarIcon } from "lucide-react";
+import {useForm} from "react-hook-form";
+import type {ReservationDTO} from "@/types/types.ts";
+import axios from "axios";
 
 export default function MainUIOnly() {
+  const { register, handleSubmit, reset } = useForm<ReservationDTO>();
+
+  const onSubmit = async (data: ReservationDTO) => {
+    try {
+      const response = await axios.post("http://localhost:8080/api/reservation", data);
+      alert("Reservation created! Keys in response.");
+      console.log(response.data);
+      reset();
+    } catch (error) {
+      alert("Failed to create reservation");
+      console.error(error);
+    }
+  };
+
   return (
       <main className="container mx-auto px-2 sm:px-6 pt-6 min-h-screen flex flex-col items-center w-full">
         <h1 className="text-3xl font-bold mb-6">Create a Reservation</h1>
 
+        <Form></Form>
+
         <Card className="w-full max-w-2xl">
           <CardHeader>
             <CardTitle>New Reservation</CardTitle>
@@ -37,7 +57,7 @@ export default function MainUIOnly() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <form className="space-y-6">
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 {/* Date Field */}
                 <div className="flex flex-col">
@@ -50,7 +70,7 @@ export default function MainUIOnly() {
                       </Button>
                     </PopoverTrigger>
                     <PopoverContent className="w-auto p-0" align="start">
-                      <Calendar mode="single" initialFocus />
+                      <Calendar mode="single" initialFocus {...register("date")}/>
                     </PopoverContent>
                   </Popover>
                 </div>
@@ -59,7 +79,7 @@ export default function MainUIOnly() {
                 <div>
                   <Label>Room</Label>
                   <Select>
-                    <SelectTrigger>
+                    <SelectTrigger {...register("room")}>
                       <SelectValue placeholder="Select a room" />
                     </SelectTrigger>
                     <SelectContent>
@@ -76,7 +96,7 @@ export default function MainUIOnly() {
                 <div>
                   <Label>Start Time</Label>
                   <Select>
-                    <SelectTrigger>
+                    <SelectTrigger {...register("startTime")}>
                       <SelectValue placeholder="Select start time" />
                     </SelectTrigger>
                     <SelectContent>
@@ -98,7 +118,7 @@ export default function MainUIOnly() {
                 <div>
                   <Label>End Time</Label>
                   <Select>
-                    <SelectTrigger>
+                    <SelectTrigger {...register("endTime")}>
                       <SelectValue placeholder="Select end time" />
                     </SelectTrigger>
                     <SelectContent>
@@ -120,7 +140,7 @@ export default function MainUIOnly() {
               {/* Description Field */}
               <div>
                 <Label>Description</Label>
-                <Textarea
+                <Textarea {...register("description")}
                     placeholder="Enter a description for your reservation"
                     className="resize-none"
                 />
@@ -132,7 +152,7 @@ export default function MainUIOnly() {
               {/* Participants Field */}
               <div>
                 <Label>Participants</Label>
-                <Input placeholder="John,Jane,Alex" />
+                <Input placeholder="John,Jane,Alex" {...register("participants")}/>
                 <p className="text-sm text-muted-foreground">
                   Enter participant names separated by commas (letters only).
                 </p>
diff --git a/OrariAperti/frontend/src/types/types.ts b/OrariAperti/frontend/src/types/types.ts
new file mode 100644
index 0000000..919f2ba
--- /dev/null
+++ b/OrariAperti/frontend/src/types/types.ts
@@ -0,0 +1,14 @@
+export interface Reservation extends ReservationDTO {
+    id: string;
+    publicKey: string;
+    privateKey: string;
+}
+
+export interface ReservationDTO {
+    date: string; // format: "YYYY-MM-DD"
+    startTime: string; // format: "HH:mm"
+    endTime: string; // format: "HH:mm"
+    room: number;
+    description: string;
+    participants: string;
+}
\ No newline at end of file

From 146f6173be926b1d0d8825cd99581a84e3048f41 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Wed, 11 Jun 2025 14:27:50 +0200
Subject: [PATCH 04/27] Update document title to reflect application name

---
 OrariAperti/frontend/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/OrariAperti/frontend/index.html b/OrariAperti/frontend/index.html
index 36011ac..c543fc6 100644
--- a/OrariAperti/frontend/index.html
+++ b/OrariAperti/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo-oa-dark.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>OrariAperti</title>
   </head>
   <body>
     <div id="root"></div>

From df04e19bd0c0379c2ba429807fa244699a53057c Mon Sep 17 00:00:00 2001
From: nano <df@proconsis.ch>
Date: Wed, 11 Jun 2025 15:32:59 +0200
Subject: [PATCH 05/27] added the functional api to the new form, BUT it needs
 major improvement (spits 400)

---
 OrariAperti/frontend/src/components/Form.tsx |  4 ++++
 OrariAperti/frontend/src/components/Main.tsx | 16 ++++++++++++----
 OrariAperti/frontend/src/types/types.ts      | 14 +++++++-------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/OrariAperti/frontend/src/components/Form.tsx b/OrariAperti/frontend/src/components/Form.tsx
index 4124c1d..58544d7 100644
--- a/OrariAperti/frontend/src/components/Form.tsx
+++ b/OrariAperti/frontend/src/components/Form.tsx
@@ -5,6 +5,10 @@ import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
 import axios from "axios";
 
+// THIS IS A TEST!!!!!!!!!!!!!!!!!!!!!!!!!!!
+// THIS IS A TEST!!!!!!!!!!!!!!!!!!!!!!!!!!!
+// THIS IS A TEST!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
 export default function ReservationForm() {
     const { register, handleSubmit, reset } = useForm<ReservationDTO>();
 
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index c8f2878..f1eb835 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -29,8 +29,7 @@ import type {ReservationDTO} from "@/types/types.ts";
 import axios from "axios";
 
 export default function MainUIOnly() {
-  const { register, handleSubmit, reset } = useForm<ReservationDTO>();
-
+  const { register, handleSubmit, reset, watch, setValue } = useForm<ReservationDTO>();
   const onSubmit = async (data: ReservationDTO) => {
     try {
       const response = await axios.post("http://localhost:8080/api/reservation", data);
@@ -65,12 +64,21 @@ export default function MainUIOnly() {
                   <Popover>
                     <PopoverTrigger asChild>
                       <Button variant="outline" className="w-full pl-3 text-left font-normal">
-                        <span>Pick a date</span>
+                        <span>{watch("date") || "Pick a date"}</span>
                         <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                       </Button>
                     </PopoverTrigger>
                     <PopoverContent className="w-auto p-0" align="start">
-                      <Calendar mode="single" initialFocus {...register("date")}/>
+                      <Calendar
+                          mode="single"
+                          initialFocus
+                          selected={watch("date") ? new Date(watch("date")) : undefined}
+                          onSelect={(date) => {
+                            if (date) {
+                              setValue("date", date.toISOString().split("T")[0]); // Convert Date to YYYY-MM-DD string
+                            }
+                          }}
+                      />
                     </PopoverContent>
                   </Popover>
                 </div>
diff --git a/OrariAperti/frontend/src/types/types.ts b/OrariAperti/frontend/src/types/types.ts
index 919f2ba..42d1282 100644
--- a/OrariAperti/frontend/src/types/types.ts
+++ b/OrariAperti/frontend/src/types/types.ts
@@ -1,14 +1,14 @@
-export interface Reservation extends ReservationDTO {
-    id: string;
-    publicKey: string;
-    privateKey: string;
-}
-
 export interface ReservationDTO {
     date: string; // format: "YYYY-MM-DD"
     startTime: string; // format: "HH:mm"
     endTime: string; // format: "HH:mm"
     room: number;
     description: string;
-    participants: string;
+    participants: string; // comma-separated participant names
+}
+
+export interface Reservation extends ReservationDTO {
+    id: string; // UUID
+    privateKey: string; // UUID
+    publicKey: string; // UUID
 }
\ No newline at end of file

From 633ae5dbe46438171e2eb7dfb80c91bbd27adf94 Mon Sep 17 00:00:00 2001
From: nano <df@proconsis.ch>
Date: Wed, 11 Jun 2025 15:51:58 +0200
Subject: [PATCH 06/27] changed frontend port

---
 .../main/java/ims/orariaperti/config/WebConfig.java    |  2 +-
 OrariAperti/frontend/index.html                        |  2 +-
 OrariAperti/frontend/src/components/Main.tsx           |  3 ---
 OrariAperti/frontend/vite.config.ts                    | 10 +++-------
 4 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java b/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
index f74d54b..829689a 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
@@ -9,7 +9,7 @@ public class WebConfig implements WebMvcConfigurer {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**") // Allow all routes
-                .allowedOrigins("http://localhost:5173") // Your React dev server
+                .allowedOrigins("http://localhost:3000") // Your React dev server
                 .allowedMethods("*") // GET, POST, PUT, DELETE, etc.
                 .allowedHeaders("*");
     }
diff --git a/OrariAperti/frontend/index.html b/OrariAperti/frontend/index.html
index c543fc6..36011ac 100644
--- a/OrariAperti/frontend/index.html
+++ b/OrariAperti/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo-oa-dark.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OrariAperti</title>
+    <title>Vite + React + TS</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index f1eb835..0eb3cee 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -2,7 +2,6 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import Form from "@/components/Form";
 import {
   Popover,
   PopoverContent,
@@ -46,8 +45,6 @@ export default function MainUIOnly() {
       <main className="container mx-auto px-2 sm:px-6 pt-6 min-h-screen flex flex-col items-center w-full">
         <h1 className="text-3xl font-bold mb-6">Create a Reservation</h1>
 
-        <Form></Form>
-
         <Card className="w-full max-w-2xl">
           <CardHeader>
             <CardTitle>New Reservation</CardTitle>
diff --git a/OrariAperti/frontend/vite.config.ts b/OrariAperti/frontend/vite.config.ts
index 7df74ca..c74627c 100644
--- a/OrariAperti/frontend/vite.config.ts
+++ b/OrariAperti/frontend/vite.config.ts
@@ -12,12 +12,8 @@ export default defineConfig({
     },
   },
   server: {
-    proxy: {
-      '/api': {
-        target: 'http://localhost:8080',
-        changeOrigin: true,
-        secure: false,
-      }
-    }
+    host: "localhost",  // Change the host to localhost or 127.0.0.1
+    port: 3000,         // Or any other port if 5173 is conflicting
+    strictPort: true,   // Ensure Vite doesn't pick another port if 5173 is taken
   }
 })

From 014f62afd7515f892ff07f23bbba051e63b9de17 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Wed, 11 Jun 2025 20:21:06 +0200
Subject: [PATCH 07/27] NEEDS .ENV NOW!!! Add AccessKeys and CurrentReservation
 components; update .gitignore

---
 .gitignore                                    |   2 +
 .../.run/OrariApertiApplication.run.xml       |  10 +
 OrariAperti/backend/pom.xml                   |  41 +--
 .../ims/orariaperti/DTO/ReservationDTO.java   |   1 -
 OrariAperti/frontend/.env.example             |   1 +
 OrariAperti/frontend/.gitignore               |   1 +
 .../frontend/.run}/dev.run.xml                |   0
 OrariAperti/frontend/package-lock.json        |   1 -
 .../frontend/src/components/AccessKeys.tsx    |  51 ++++
 .../src/components/CurrentReservation.tsx     |  58 ++++
 OrariAperti/frontend/src/components/Form.tsx  |  42 ---
 .../frontend/src/components/Header.tsx        |   8 +-
 OrariAperti/frontend/src/components/Main.tsx  | 177 +-----------
 .../dialogs/NewReservationDialog.tsx          | 265 ++++++++++++++++++
 .../frontend/src/components/ui/dialog.tsx     |   4 +-
 15 files changed, 402 insertions(+), 260 deletions(-)
 create mode 100644 OrariAperti/backend/.run/OrariApertiApplication.run.xml
 create mode 100644 OrariAperti/frontend/.env.example
 rename {.run => OrariAperti/frontend/.run}/dev.run.xml (100%)
 create mode 100644 OrariAperti/frontend/src/components/AccessKeys.tsx
 create mode 100644 OrariAperti/frontend/src/components/CurrentReservation.tsx
 delete mode 100644 OrariAperti/frontend/src/components/Form.tsx
 create mode 100644 OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx

diff --git a/.gitignore b/.gitignore
index 395db21..d0175a1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,5 @@
 # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
 hs_err_pid*
 replay_pid*
+.env
+*.env
\ No newline at end of file
diff --git a/OrariAperti/backend/.run/OrariApertiApplication.run.xml b/OrariAperti/backend/.run/OrariApertiApplication.run.xml
new file mode 100644
index 0000000..5591567
--- /dev/null
+++ b/OrariAperti/backend/.run/OrariApertiApplication.run.xml
@@ -0,0 +1,10 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="OrariApertiApplication" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot" nameIsGenerated="true">
+    <option name="FRAME_DEACTIVATION_UPDATE_POLICY" value="UpdateClassesAndResources" />
+    <module name="OrariAperti" />
+    <option name="SPRING_BOOT_MAIN_CLASS" value="ims.orariaperti.OrariApertiApplication" />
+    <method v="2">
+      <option name="Make" enabled="true" />
+    </method>
+  </configuration>
+</component>
\ No newline at end of file
diff --git a/OrariAperti/backend/pom.xml b/OrariAperti/backend/pom.xml
index 687c170..0dfb637 100644
--- a/OrariAperti/backend/pom.xml
+++ b/OrariAperti/backend/pom.xml
@@ -27,7 +27,7 @@
         <url/>
     </scm>
     <properties>
-        <java.version>21</java.version>
+        <java.version>17</java.version>
     </properties>
     <dependencies>
         <dependency>
@@ -72,45 +72,6 @@
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
             </plugin>
-            <plugin>
-                <groupId>com.github.eirslett</groupId>
-                <artifactId>frontend-maven-plugin</artifactId>
-                <version>1.12.1</version>
-                <configuration>
-                    <workingDirectory>frontend</workingDirectory>
-                    <installDirectory>target</installDirectory>
-                </configuration>
-                <executions>
-                    <execution>
-                        <id>install node and npm</id>
-                        <goals>
-                            <goal>install-node-and-npm</goal>
-                        </goals>
-                        <configuration>
-                            <nodeVersion>v18.16.0</nodeVersion>
-                            <npmVersion>9.5.1</npmVersion>
-                        </configuration>
-                    </execution>
-                    <execution>
-                        <id>npm install</id>
-                        <goals>
-                            <goal>npm</goal>
-                        </goals>
-                        <configuration>
-                            <arguments>install</arguments>
-                        </configuration>
-                    </execution>
-                    <execution>
-                        <id>npm run build</id>
-                        <goals>
-                            <goal>npm</goal>
-                        </goals>
-                        <configuration>
-                            <arguments>run build</arguments>
-                        </configuration>
-                    </execution>
-                </executions>
-            </plugin>
         </plugins>
     </build>
 
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/DTO/ReservationDTO.java b/OrariAperti/backend/src/main/java/ims/orariaperti/DTO/ReservationDTO.java
index e191a33..a8c0287 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/DTO/ReservationDTO.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/DTO/ReservationDTO.java
@@ -2,7 +2,6 @@
 
 import java.time.LocalDate;
 import java.time.LocalTime;
-import java.util.UUID;
 
 public class ReservationDTO {
     private LocalDate date;
diff --git a/OrariAperti/frontend/.env.example b/OrariAperti/frontend/.env.example
new file mode 100644
index 0000000..6a2c6d9
--- /dev/null
+++ b/OrariAperti/frontend/.env.example
@@ -0,0 +1 @@
+VITE_APP_BACKEND_URL=http://localhost:8080 # Might change depending on your backend configuration
\ No newline at end of file
diff --git a/OrariAperti/frontend/.gitignore b/OrariAperti/frontend/.gitignore
index a547bf3..d730797 100644
--- a/OrariAperti/frontend/.gitignore
+++ b/OrariAperti/frontend/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+*.env
diff --git a/.run/dev.run.xml b/OrariAperti/frontend/.run/dev.run.xml
similarity index 100%
rename from .run/dev.run.xml
rename to OrariAperti/frontend/.run/dev.run.xml
diff --git a/OrariAperti/frontend/package-lock.json b/OrariAperti/frontend/package-lock.json
index 85c117b..4ad52d0 100644
--- a/OrariAperti/frontend/package-lock.json
+++ b/OrariAperti/frontend/package-lock.json
@@ -5482,7 +5482,6 @@
       "version": "8.10.1",
       "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
       "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
-      "license": "MIT",
       "funding": {
         "type": "individual",
         "url": "https://github.com/sponsors/gpbl"
diff --git a/OrariAperti/frontend/src/components/AccessKeys.tsx b/OrariAperti/frontend/src/components/AccessKeys.tsx
new file mode 100644
index 0000000..485bd37
--- /dev/null
+++ b/OrariAperti/frontend/src/components/AccessKeys.tsx
@@ -0,0 +1,51 @@
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle
+} from "@/components/ui/card.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Label} from "@/components/ui/label.tsx";
+import {Button} from "@/components/ui/button.tsx";
+
+export default function AccessKeys() {
+    return (
+        <>
+            <Card className={"h-[96%] w-[30%]"}>
+                <CardHeader>
+                    <CardTitle>Access Keys</CardTitle>
+                    <CardDescription>Enter your Access Keys to view or edit your reservations.</CardDescription>
+                </CardHeader>
+                <form className="flex flex-col flex-1">
+                    <CardContent className="flex-1">
+                        <div className="grid gap-4">
+                            <div className="grid gap-2">
+                                <Label htmlFor="privateKey">Private Key</Label>
+                                <Input
+                                    type="text"
+                                    id="privateKey"
+                                    name="privateKey"
+                                    placeholder="Enter your private key"
+                                />
+                            </div>
+                            <div className="grid gap-2">
+                                <Label htmlFor="publicKey">Public Key</Label>
+                                <Input
+                                    type="text"
+                                    id="publicKey"
+                                    name="publicKey"
+                                    placeholder="Enter your public key"
+                                />
+                            </div>
+                        </div>
+                    </CardContent>
+                    <CardFooter className={"flex-col gap-2"}>
+                        <Button type={"submit"} variant={"default"} className={"w-full"}>Load Reservations</Button>
+                    </CardFooter>
+                </form>
+            </Card>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
new file mode 100644
index 0000000..e1701bf
--- /dev/null
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -0,0 +1,58 @@
+import {Card, CardHeader, CardTitle, CardContent, CardDescription} from "@/components/ui/card";
+import type {Reservation} from "@/types/types";
+
+export default function CurrentReservation({reservation}: { reservation?: Reservation }) {
+    if (!reservation) {
+        return (
+            <>
+                <Card className="h-[96%] w-full ml-8">
+                    <CardHeader>
+                        <CardTitle>No Current Reservation</CardTitle>
+                        <CardDescription>
+                            Please load your reservations to view the current reservation details.
+                        </CardDescription>
+                    </CardHeader>
+                </Card>
+            </>
+        );
+    } else if (Object.keys(reservation).length === 0) {
+
+        return (
+            <Card className="h-[96%] w-full ml-8">
+                <CardHeader>
+                    <CardTitle>Current Reservation</CardTitle>
+                    <CardDescription>
+                        Reservation details and access keys.
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                    <div>
+                        <span className="font-semibold">Date:</span> {reservation.date}
+                    </div>
+                    <div>
+                        <span className="font-semibold">Time:</span> {reservation.startTime} - {reservation.endTime}
+                    </div>
+                    <div>
+                        <span className="font-semibold">Room:</span> {reservation.room}
+                    </div>
+                    <div>
+                        <span className="font-semibold">Description:</span> {reservation.description}
+                    </div>
+                    <div>
+                        <span className="font-semibold">Participants:</span> {reservation.participants}
+                    </div>
+                    <div>
+                        <span className="font-semibold">Reservation ID:</span> {reservation.id}
+                    </div>
+                    <div>
+                        <span className="font-semibold">Private Key:</span> {reservation.privateKey}
+                    </div>
+                    <div>
+                        <span className="font-semibold">Public Key:</span> {reservation.publicKey}
+                    </div>
+                </CardContent>
+            </Card>
+        )
+            ;
+    }
+}
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/Form.tsx b/OrariAperti/frontend/src/components/Form.tsx
deleted file mode 100644
index 58544d7..0000000
--- a/OrariAperti/frontend/src/components/Form.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useForm } from "react-hook-form";
-import type {ReservationDTO} from "@/types/types.ts";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Card, CardContent } from "@/components/ui/card";
-import axios from "axios";
-
-// THIS IS A TEST!!!!!!!!!!!!!!!!!!!!!!!!!!!
-// THIS IS A TEST!!!!!!!!!!!!!!!!!!!!!!!!!!!
-// THIS IS A TEST!!!!!!!!!!!!!!!!!!!!!!!!!!!
-
-export default function ReservationForm() {
-    const { register, handleSubmit, reset } = useForm<ReservationDTO>();
-
-    const onSubmit = async (data: ReservationDTO) => {
-        try {
-            const response = await axios.post("http://localhost:8080/api/reservation", data);
-            alert("Reservation created! Keys in response.");
-            console.log(response.data);
-            reset();
-        } catch (error) {
-            alert("Failed to create reservation");
-            console.error(error);
-        }
-    };
-
-    return (
-        <Card className="max-w-md mx-auto mt-10 p-6">
-            <CardContent>
-                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-                    <Input placeholder="Date (YYYY-MM-DD)" {...register("date")} />
-                    <Input placeholder="Start Time (HH:mm)" {...register("startTime")} />
-                    <Input placeholder="End Time (HH:mm)" {...register("endTime")} />
-                    <Input placeholder="Room Number" type="number" {...register("room")} />
-                    <Input placeholder="Description" {...register("description")} />
-                    <Input placeholder="Participants (comma separated)" {...register("participants")} />
-                    <Button type="submit" className="w-full">Create Reservation</Button>
-                </form>
-            </CardContent>
-        </Card>
-    );
-}
diff --git a/OrariAperti/frontend/src/components/Header.tsx b/OrariAperti/frontend/src/components/Header.tsx
index 018207e..d7343b3 100644
--- a/OrariAperti/frontend/src/components/Header.tsx
+++ b/OrariAperti/frontend/src/components/Header.tsx
@@ -1,6 +1,7 @@
 import {ModeToggle} from "@/components/ui/mode-toggle.tsx";
 import logo_dark from "/logo-oa-dark.svg";
 import logo_light from "/logo-oa-light.svg";
+import NewReservationDialog from "@/components/dialogs/NewReservationDialog.tsx";
 
 export default function Header() {
   return (
@@ -11,20 +12,21 @@ export default function Header() {
                     className="hover:cursor-pointer hidden dark:block"
                     src={logo_dark}
                     alt="OrariAperti Logo"
-                    style={{ width: '100px', height: '50px' }}
+                    style={{ width: '80px', height: '40px' }}
                 />
                 <img
                     className="hover:cursor-pointer dark:hidden"
                     src={logo_light}
                     alt="OrariAperti Logo"
-                    style={{ width: '100px', height: '50px' }}
+                    style={{ width: '80px', height: '40px' }}
                 />
                 <div className={"flex flex-col"}>
-                    <span className={"text-4xl font-bold"}>OrariAperti</span>
+                    <span className={"text-3xl font-bold"}>OrariAperti</span>
                 </div>
               </div>
 
               <div className={"flex items-center gap-4 "}>
+                    <NewReservationDialog/>
                   <ModeToggle/>
               </div>
           </header>
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index f1eb835..f6607b5 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -1,177 +1,12 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import Form from "@/components/Form";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { CalendarIcon } from "lucide-react";
-import {useForm} from "react-hook-form";
-import type {ReservationDTO} from "@/types/types.ts";
-import axios from "axios";
+import AccessKeys from "@/components/AccessKeys.tsx";
+import CurrentReservation from "@/components/CurrentReservation.tsx";
 
 export default function MainUIOnly() {
-  const { register, handleSubmit, reset, watch, setValue } = useForm<ReservationDTO>();
-  const onSubmit = async (data: ReservationDTO) => {
-    try {
-      const response = await axios.post("http://localhost:8080/api/reservation", data);
-      alert("Reservation created! Keys in response.");
-      console.log(response.data);
-      reset();
-    } catch (error) {
-      alert("Failed to create reservation");
-      console.error(error);
-    }
-  };
-
+  
   return (
-      <main className="container mx-auto px-2 sm:px-6 pt-6 min-h-screen flex flex-col items-center w-full">
-        <h1 className="text-3xl font-bold mb-6">Create a Reservation</h1>
-
-        <Form></Form>
-
-        <Card className="w-full max-w-2xl">
-          <CardHeader>
-            <CardTitle>New Reservation</CardTitle>
-            <CardDescription>
-              Fill out the form below to create a new reservation.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {/* Date Field */}
-                <div className="flex flex-col">
-                  <Label>Date</Label>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button variant="outline" className="w-full pl-3 text-left font-normal">
-                        <span>{watch("date") || "Pick a date"}</span>
-                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0" align="start">
-                      <Calendar
-                          mode="single"
-                          initialFocus
-                          selected={watch("date") ? new Date(watch("date")) : undefined}
-                          onSelect={(date) => {
-                            if (date) {
-                              setValue("date", date.toISOString().split("T")[0]); // Convert Date to YYYY-MM-DD string
-                            }
-                          }}
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-
-                {/* Room Field */}
-                <div>
-                  <Label>Room</Label>
-                  <Select>
-                    <SelectTrigger {...register("room")}>
-                      <SelectValue placeholder="Select a room" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="101">Room 101</SelectItem>
-                      <SelectItem value="102">Room 102</SelectItem>
-                      <SelectItem value="103">Room 103</SelectItem>
-                      <SelectItem value="201">Room 201</SelectItem>
-                      <SelectItem value="202">Room 202</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                {/* Start Time Field */}
-                <div>
-                  <Label>Start Time</Label>
-                  <Select>
-                    <SelectTrigger {...register("startTime")}>
-                      <SelectValue placeholder="Select start time" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {Array.from({ length: 31 }, (_, i) => {
-                        const hour = 6 + Math.floor(i / 2);
-                        const minute = i % 2 === 0 ? "00" : "30";
-                        const time = `${hour.toString().padStart(2, "0")}:${minute}`;
-                        return (
-                            <SelectItem key={time} value={time}>
-                              {time}
-                            </SelectItem>
-                        );
-                      })}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                {/* End Time Field */}
-                <div>
-                  <Label>End Time</Label>
-                  <Select>
-                    <SelectTrigger {...register("endTime")}>
-                      <SelectValue placeholder="Select end time" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {Array.from({ length: 31 }, (_, i) => {
-                        const hour = 6 + Math.floor(i / 2);
-                        const minute = i % 2 === 0 ? "00" : "30";
-                        const time = `${hour.toString().padStart(2, "0")}:${minute}`;
-                        return (
-                            <SelectItem key={time} value={time}>
-                              {time}
-                            </SelectItem>
-                        );
-                      })}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              {/* Description Field */}
-              <div>
-                <Label>Description</Label>
-                <Textarea {...register("description")}
-                    placeholder="Enter a description for your reservation"
-                    className="resize-none"
-                />
-                <p className="text-sm text-muted-foreground">
-                  Briefly describe the purpose of your reservation.
-                </p>
-              </div>
-
-              {/* Participants Field */}
-              <div>
-                <Label>Participants</Label>
-                <Input placeholder="John,Jane,Alex" {...register("participants")}/>
-                <p className="text-sm text-muted-foreground">
-                  Enter participant names separated by commas (letters only).
-                </p>
-              </div>
-
-              <Button type="submit" className="w-full">
-                Create Reservation
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
+      <main className="container mx-auto px-2 sm:px-6 pt-6 h-screen min-h-screen flex flex-row items-center w-full">
+          <AccessKeys/>
+          <CurrentReservation reservation={undefined}/>
       </main>
   );
 }
diff --git a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
new file mode 100644
index 0000000..3c4d19f
--- /dev/null
+++ b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
@@ -0,0 +1,265 @@
+import {Label} from "@/components/ui/label.tsx";
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {CalendarIcon, LucideEdit} from "lucide-react";
+import {Calendar} from "@/components/ui/calendar.tsx";
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
+import {Textarea} from "@/components/ui/textarea.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {useForm} from "react-hook-form";
+import type {ReservationDTO} from "@/types/types.ts";
+import axios from "axios";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTrigger,
+    DialogTitle,
+    DialogFooter, 
+    DialogClose
+} from "@/components/ui/dialog";
+import {format} from "date-fns";
+
+export default function NewReservationDialog() {
+    const { register, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm<ReservationDTO>({
+        mode: "onBlur",
+        reValidateMode: "onChange",
+    });
+
+    const onSubmit = async (data: ReservationDTO) => {
+        // Validate startTime < endTime
+        if (data.startTime && data.endTime) {
+            const start = data.startTime;
+            const end = data.endTime;
+            if (start >= end) {
+                alert("Start time must be before end time.");
+                return;
+            }
+        }
+
+        // Prepare payload for backend
+        const payload = {
+            ...data,
+            room: parseInt(data.room as any, 10),
+            date: data.date, // already YYYY-MM-DD
+            startTime: data.startTime, // already HH:mm
+            endTime: data.endTime, // already HH:mm
+            description: data.description,
+            participants: data.participants,
+        };
+
+        try {
+            const response = await axios.post(import.meta.env.VITE_APP_BACKEND_URL+ "/api/reservation", payload);
+            alert("Reservation created! Keys in response.");
+            console.log(response.data);
+            reset();
+        } catch (error) {
+            alert("Failed to create reservation");
+            console.error(error);
+        }
+    };
+
+    return (
+        <>
+            <Dialog>
+                <DialogTrigger asChild>
+                    <Button>
+                        <LucideEdit />
+                        <span className="hidden sm:inline pl-2">Create Reservation</span>
+                    </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-2xl">
+                    <DialogHeader>
+                        <DialogTitle>Create a new Reservation</DialogTitle>
+                        <DialogDescription>
+                            Fill out the form below to create a new reservation. Ensure all fields are filled out correctly.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                        <NewReservation
+                            register={register}
+                            watch={watch}
+                            setValue={setValue}
+                            errors={errors}
+                        />
+                        <DialogFooter>
+                            <DialogClose asChild>
+                                <Button variant={"secondary"}>Cancel</Button>
+                            </DialogClose>
+                            <Button type="submit" className="w-full sm:w-auto">Create</Button>
+                        </DialogFooter>
+                    </form>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}
+
+function NewReservation({
+    register,
+    watch,
+    setValue,
+    errors,
+}: {
+    register: ReturnType<typeof useForm<ReservationDTO>>["register"],
+    watch: ReturnType<typeof useForm<ReservationDTO>>["watch"],
+    setValue: ReturnType<typeof useForm<ReservationDTO>>["setValue"],
+    errors: any,
+}) {
+    return (
+        <>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {/* Date Field */}
+                <div className="flex flex-col">
+                    <Label>Date</Label>
+                    <Popover>
+                        <PopoverTrigger asChild>
+                            <Button
+                                variant="outline"
+                                data-empty={!watch("date")}
+                                className="data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal"
+                            >
+                                <CalendarIcon />
+                                {watch("date")
+                                    ? format(new Date(watch("date")), "PPP")
+                                    : <span>Pick a date</span>}
+                            </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0">
+                            <Calendar
+                                mode="single"
+                                selected={watch("date") ? new Date(watch("date")) : undefined}
+                                onSelect={date => {
+                                    if (date) {
+                                        setValue("date", formatDateString(date), { shouldValidate: true });
+                                    }
+                                }}
+                            />
+                        </PopoverContent>
+                    </Popover>
+                    {errors.date && <span className="text-red-500 text-xs">{errors.date.message}</span>}
+                </div>
+                {/* Room Field */}
+                <div>
+                    <Label>Room</Label>
+                    <Select onValueChange={val => setValue("room", parseInt(val, 10), { shouldValidate: true })}>
+                        <SelectTrigger {...register("room", {
+                            required: "Room is required",
+                            validate: value => ["101", "102", "103", "201", "202"].includes(value.toString()) || "Invalid room"
+                        })}>
+                            <SelectValue placeholder="Select a room"/>
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="101">Room 101</SelectItem>
+                            <SelectItem value="102">Room 102</SelectItem>
+                            <SelectItem value="103">Room 103</SelectItem>
+                            <SelectItem value="201">Room 201</SelectItem>
+                            <SelectItem value="202">Room 202</SelectItem>
+                        </SelectContent>
+                    </Select>
+                    {errors.room && <span className="text-red-500 text-xs">{errors.room.message}</span>}
+                </div>
+                {/* Start Time Field */}
+                <div>
+                    <Label>Start Time</Label>
+                    <Select onValueChange={val => setValue("startTime", val, { shouldValidate: true })}>
+                        <SelectTrigger {...register("startTime", {
+                            required: "Start time is required",
+                            pattern: {
+                                value: /^([01]\d|2[0-3]):[0-5]\d$/,
+                                message: "Invalid time format"
+                            }
+                        })}>
+                            <SelectValue placeholder="Select start time"/>
+                        </SelectTrigger>
+                        <SelectContent>
+                            {Array.from({length: 31}, (_, i) => {
+                                const hour = 6 + Math.floor(i / 2);
+                                const minute = i % 2 === 0 ? "00" : "30";
+                                const time = `${hour.toString().padStart(2, "0")}:${minute}`;
+                                return (
+                                    <SelectItem key={time} value={time}>
+                                        {time}
+                                    </SelectItem>
+                                );
+                            })}
+                        </SelectContent>
+                    </Select>
+                    {errors.startTime && <span className="text-red-500 text-xs">{errors.startTime.message}</span>}
+                </div>
+                {/* End Time Field */}
+                <div>
+                    <Label>End Time</Label>
+                    <Select onValueChange={val => setValue("endTime", val, { shouldValidate: true })}>
+                        <SelectTrigger {...register("endTime", {
+                            required: "End time is required",
+                            pattern: {
+                                value: /^([01]\d|2[0-3]):[0-5]\d$/,
+                                message: "Invalid time format"
+                            }
+                        })}>
+                            <SelectValue placeholder="Select end time"/>
+                        </SelectTrigger>
+                        <SelectContent>
+                            {Array.from({length: 31}, (_, i) => {
+                                const hour = 6 + Math.floor(i / 2);
+                                const minute = i % 2 === 0 ? "00" : "30";
+                                const time = `${hour.toString().padStart(2, "0")}:${minute}`;
+                                return (
+                                    <SelectItem key={time} value={time}>
+                                        {time}
+                                    </SelectItem>
+                                );
+                            })}
+                        </SelectContent>
+                    </Select>
+                    {errors.endTime && <span className="text-red-500 text-xs">{errors.endTime.message}</span>}
+                </div>
+            </div>
+            {/* Description Field */}
+            <div>
+                <Label>Description</Label>
+                <Textarea
+                    {...register("description", {
+                        required: "Description is required",
+                        maxLength: { value: 200, message: "Max 200 characters" }
+                    })}
+                    placeholder="Enter a description for your reservation"
+                    className="resize-none"
+                />
+                {errors.description && <span className="text-red-500 text-xs">{errors.description.message}</span>}
+                <p className="text-sm text-muted-foreground">
+                    Briefly describe the purpose of your reservation.
+                </p>
+            </div>
+            {/* Participants Field */}
+            <div>
+                <Label>Participants</Label>
+                <Input
+                    placeholder="John, Jane, Alex"
+                    {...register("participants", {
+                        required: "Participants are required",
+                        maxLength: { value: 255, message: "Max 255 characters" },
+                        pattern: {
+                            value: /^[A-Za-zÄäÖöÜüß ,]+$/,
+                            message: "Only letters, spaces, and commas allowed"
+                        }
+                    })}
+                />
+                {errors.participants && <span className="text-red-500 text-xs">{errors.participants.message}</span>}
+                <p className="text-sm text-muted-foreground">
+                    Enter participant names separated by commas (letters only).
+                </p>
+            </div>
+        </>
+    );
+}
+
+// fixes shadcn calendar which broke because of a different local date format then used in the calendar
+function formatDateString(dateString: string | Date): string {
+    const date = new Date(dateString)
+
+    // Generate yyyy-mm-dd date string
+    return date.toLocaleString('default', { year: 'numeric' }) + '-' + date.toLocaleString('default', { month: '2-digit' }) + '-' + date.toLocaleString('default', { day: '2-digit' })
+}
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/ui/dialog.tsx b/OrariAperti/frontend/src/components/ui/dialog.tsx
index 981e999..2108d0e 100644
--- a/OrariAperti/frontend/src/components/ui/dialog.tsx
+++ b/OrariAperti/frontend/src/components/ui/dialog.tsx
@@ -61,7 +61,7 @@ function DialogContent({
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+        <DialogPrimitive.Close className="hover:cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
           <XIcon />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -100,7 +100,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-xl leading-none font-semibold", className)}
       {...props}
     />
   )

From cf3b82eb662b30b3ee1703bcbef93cd079f16c6b Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Thu, 12 Jun 2025 09:45:47 +0200
Subject: [PATCH 08/27] Adds room management and reservation enhancements

Introduces room entity and repository to support room management. Updates reservation logic to associate reservations with specific rooms via UUID. Enhances API to handle room-related operations, including fetching rooms and their reservations. Refactors Seeder to populate room and reservation data. Improves CORS and frontend URL configuration for dynamic environment settings. Updates frontend metadata and package details for branding consistency.
---
 OrariAperti/backend/backend-openapi.yaml      | 242 ++++++++++++++++++
 .../ims/orariaperti/DTO/ReservationDTO.java   |  17 +-
 .../ims/orariaperti/config/WebConfig.java     |  24 +-
 .../controller/MainController.java            |  17 ++
 .../controller/ReservationController.java     |  59 +++--
 .../controller/RoomController.java            |  63 +++++
 .../ims/orariaperti/entity/Reservation.java   |  13 +-
 .../java/ims/orariaperti/entity/Room.java     |  56 ++++
 .../repository/RoomRepository.java            |   8 +
 .../orariaperti/utilities/RoomFeatures.java   |  30 +++
 .../ims/orariaperti/utilities/Seeder.java     | 115 +++++++--
 .../resources/application.properties.example  |   3 +
 .../src/main/resources/backend-api.yaml       | 178 -------------
 .../.run/{dev.run.xml => Frontend.run.xml}    |   4 +-
 OrariAperti/frontend/index.html               |   2 +-
 OrariAperti/frontend/package-lock.json        |   8 +-
 OrariAperti/frontend/package.json             |   4 +-
 OrariAperti/frontend/vite.config.ts           |   6 +-
 18 files changed, 580 insertions(+), 269 deletions(-)
 create mode 100644 OrariAperti/backend/backend-openapi.yaml
 create mode 100644 OrariAperti/backend/src/main/java/ims/orariaperti/controller/MainController.java
 create mode 100644 OrariAperti/backend/src/main/java/ims/orariaperti/controller/RoomController.java
 create mode 100644 OrariAperti/backend/src/main/java/ims/orariaperti/entity/Room.java
 create mode 100644 OrariAperti/backend/src/main/java/ims/orariaperti/repository/RoomRepository.java
 create mode 100644 OrariAperti/backend/src/main/java/ims/orariaperti/utilities/RoomFeatures.java
 delete mode 100644 OrariAperti/backend/src/main/resources/backend-api.yaml
 rename OrariAperti/frontend/.run/{dev.run.xml => Frontend.run.xml} (58%)

diff --git a/OrariAperti/backend/backend-openapi.yaml b/OrariAperti/backend/backend-openapi.yaml
new file mode 100644
index 0000000..2975260
--- /dev/null
+++ b/OrariAperti/backend/backend-openapi.yaml
@@ -0,0 +1,242 @@
+openapi: "3.1.0"
+info:
+  title: "OrariAperti Backend API"
+  description: "Backend API Description of the OrariAperti application."
+  version: "1.0.0"
+servers:
+  - url: "http://localhost:8080"
+    description: "Local server"
+paths:
+  /api/reservation:
+    get:
+      summary: "Get reservation by key"
+      operationId: "getReservationByKey"
+      parameters:
+        - name: "publicKey"
+          in: "header"
+          required: false
+          schema:
+            type: "string"
+            format: "uuid"
+        - name: "privateKey"
+          in: "header"
+          required: false
+          schema:
+            type: "string"
+            format: "uuid"
+      responses:
+        "200":
+          description: "Reservation found"
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  reservationDetails:
+                    $ref: "#/components/schemas/Reservation"
+                  privateKey:
+                    type: string
+                    format: uuid
+                  publicKey:
+                    type: string
+                    format: uuid
+        "400":
+          description: "Bad request"
+        "404":
+          description: "Not found"
+    post:
+      summary: "Create a new reservation"
+      operationId: "createReservation"
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/ReservationDTO"
+      responses:
+        "200":
+          description: "Reservation created"
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  reservation:
+                    $ref: "#/components/schemas/Reservation"
+                  privateKey:
+                    type: string
+                    format: uuid
+                  publicKey:
+                    type: string
+                    format: uuid
+        "400":
+          description: "Bad request"
+  /api/reservation/{id}:
+    put:
+      summary: "Update a reservation"
+      operationId: "updateReservation"
+      parameters:
+        - name: "id"
+          in: "path"
+          required: true
+          schema:
+            type: "string"
+            format: "uuid"
+        - name: "privateKey"
+          in: "header"
+          required: true
+          schema:
+            type: "string"
+            format: "uuid"
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/ReservationDTO"
+      responses:
+        "200":
+          description: "Reservation updated"
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Reservation"
+        "400":
+          description: "Bad request"
+        "401":
+          description: "Unauthorized"
+        "404":
+          description: "Not found"
+    delete:
+      summary: "Delete a reservation"
+      operationId: "deleteReservation"
+      parameters:
+        - name: "id"
+          in: "path"
+          required: true
+          schema:
+            type: "string"
+            format: "uuid"
+        - name: "privateKey"
+          in: "header"
+          required: true
+          schema:
+            type: "string"
+            format: "uuid"
+      responses:
+        "200":
+          description: "Reservation deleted"
+        "401":
+          description: "Unauthorized"
+        "404":
+          description: "Not found"
+  /api/room:
+    get:
+      summary: "Get all rooms"
+      operationId: "getRooms"
+      responses:
+        "200":
+          description: "List of rooms"
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/Room"
+        "404":
+          description: "No rooms found"
+  /api/room/{roomId}/reservations:
+    get:
+      summary: "Get reservations for a room"
+      operationId: "getReservationsForRoom"
+      parameters:
+        - name: "roomId"
+          in: "path"
+          required: true
+          schema:
+            type: "string"
+            format: "uuid"
+      responses:
+        "200":
+          description: "List of reservations"
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/Reservation"
+        "404":
+          description: "Room not found"
+components:
+  schemas:
+    Room:
+      type: object
+      properties:
+        id:
+          type: string
+          format: uuid
+        roomNumber:
+          type: string
+        roomFeatures:
+          type: array
+          items:
+            $ref: "#/components/schemas/RoomFeatures"
+    RoomFeatures:
+      type: string
+      enum:
+        - BEAMER
+        - WATER_SOURCE
+        - WHITEBOARD
+        - AIR_CONDITIONING
+        - PROJECTOR_SCREEN
+        - SPEAKER_SYSTEM
+        - VIDEO_CONFERENCING
+        - WIFI
+        - POWER_OUTLETS
+        - NATURAL_LIGHT
+        - SOUNDPROOFING
+        - SMART_BOARD
+        - TELEPHONE
+        - COFFEE_MACHINE
+        - PRINTER
+        - LOCKERS
+    Reservation:
+      type: object
+      properties:
+        id:
+          type: string
+          format: uuid
+        date:
+          type: string
+          format: date
+        startTime:
+          type: string
+          format: partial-time
+        endTime:
+          type: string
+          format: partial-time
+        room:
+          $ref: "#/components/schemas/Room"
+        description:
+          type: string
+        participants:
+          type: string
+    ReservationDTO:
+      type: object
+      properties:
+        date:
+          type: string
+          format: date
+        startTime:
+          type: string
+          format: partial-time
+        endTime:
+          type: string
+          format: partial-time
+        roomId:
+          type: string
+          format: uuid
+        description:
+          type: string
+        participants:
+          type: string
\ No newline at end of file
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/DTO/ReservationDTO.java b/OrariAperti/backend/src/main/java/ims/orariaperti/DTO/ReservationDTO.java
index a8c0287..4d3cbec 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/DTO/ReservationDTO.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/DTO/ReservationDTO.java
@@ -2,23 +2,24 @@
 
 import java.time.LocalDate;
 import java.time.LocalTime;
+import java.util.UUID;
 
 public class ReservationDTO {
     private LocalDate date;
     private LocalTime startTime;
     private LocalTime endTime;
-    private int room;
+    private UUID roomId;
     private String description;
     private String participants;
 
     public ReservationDTO() {
     }
 
-    public ReservationDTO(LocalDate date, LocalTime startTime, LocalTime endTime, int room, String description, String participants) {
+    public ReservationDTO(LocalDate date, LocalTime startTime, LocalTime endTime, UUID roomId, String description, String participants) {
         this.date = date;
         this.startTime = startTime;
         this.endTime = endTime;
-        this.room = room;
+        this.roomId = roomId;
         this.description = description;
         this.participants = participants;
     }
@@ -47,12 +48,12 @@ public void setEndTime(LocalTime endTime) {
         this.endTime = endTime;
     }
 
-    public int getRoom() {
-        return room;
+    public UUID getRoomId() {
+        return roomId;
     }
 
-    public void setRoom(int room) {
-        this.room = room;
+    public void setRoomId(UUID roomId) {
+        this.roomId = roomId;
     }
 
     public String getDescription() {
@@ -77,7 +78,7 @@ public String toString() {
                 ", date=" + date +
                 ", startTime=" + startTime +
                 ", endTime=" + endTime +
-                ", room=" + room +
+                ", roomId=" + roomId +
                 ", description='" + description + '\'' +
                 ", participants='" + participants + '\'' +
                 '}';
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java b/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
index 829689a..4dc8f88 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
@@ -1,29 +1,27 @@
 package ims.orariaperti.config;
 
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.web.servlet.config.annotation.*;
 
 @Configuration
 public class WebConfig implements WebMvcConfigurer {
 
+    @Value("${frontend.url}")
+    private String frontendUrl;
+
     @Override
     public void addCorsMappings(CorsRegistry registry) {
-        registry.addMapping("/**") // Allow all routes
-                .allowedOrigins("http://localhost:3000") // Your React dev server
-                .allowedMethods("*") // GET, POST, PUT, DELETE, etc.
+        registry.addMapping("/**")
+                .allowedOrigins(frontendUrl)
+                .allowedMethods("*")
                 .allowedHeaders("*");
     }
-
-    @Override
-    public void addResourceHandlers(ResourceHandlerRegistry registry) {
-        registry.addResourceHandler("/**")
-                .addResourceLocations("classpath:/static/react-app/");
-    }
-
+    
     @Override
     public void addViewControllers(ViewControllerRegistry registry) {
-        registry.addViewController("/").setViewName("forward:/index.html");
-        registry.addViewController("/{x:[\\w\\-]+}").setViewName("forward:/index.html");
-        registry.addViewController("/{x:^(?!api$).*$}/**").setViewName("forward:/index.html");
+        registry.addViewController("/").setViewName("forward:" + frontendUrl);
+        registry.addViewController("/{x:[\\w\\-]+}").setViewName("forward:" + frontendUrl);
+        registry.addViewController("/{x:^(?!api$).*$}/**").setViewName("forward:" + frontendUrl);
     }
 }
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/MainController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/MainController.java
new file mode 100644
index 0000000..f0ca27b
--- /dev/null
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/MainController.java
@@ -0,0 +1,17 @@
+package ims.orariaperti.controller;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.boot.web.servlet.error.ErrorController;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+public class MainController implements ErrorController {
+    @Value("${frontend.url}")
+    private String frontendUrl;
+
+    @RequestMapping("/*")
+    public Object redirect() {
+        return "redirect:" + frontendUrl;
+    }
+}
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
index e83798a..0a3e8da 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
@@ -2,11 +2,14 @@
 
 import ims.orariaperti.DTO.ReservationDTO;
 import ims.orariaperti.entity.Reservation;
+import ims.orariaperti.entity.Room;
 import ims.orariaperti.repository.ReservationRepository;
+import ims.orariaperti.repository.RoomRepository;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.Map;
 import java.util.Optional;
 import java.util.UUID;
 
@@ -16,9 +19,11 @@
 public class ReservationController {
 
     private final ReservationRepository reservationRepository;
+    private final RoomRepository roomRepository;
 
-    public ReservationController(ReservationRepository reservationRepository) {
+    public ReservationController(ReservationRepository reservationRepository, RoomRepository roomRepository) {
         this.reservationRepository = reservationRepository;
+        this.roomRepository = roomRepository;
     }
 
     @GetMapping
@@ -29,21 +34,21 @@ public Object getReservations(@RequestHeader(required = false) UUID publicKey, @
         if (privateKey != null) {
             Optional<Object> reservationInDB = reservationRepository.findByPrivateKey(privateKey);
             if (reservationInDB.isPresent() && reservationInDB.get() instanceof Reservation reservation) {
-                return ResponseEntity.ok(new Object() {
-                    public final Reservation reservationDetails = reservation;
-                    public final UUID privateKey = reservation.getPrivateKey();
-                    public final UUID publicKey = reservation.getPublicKey();
-                });
+                return ResponseEntity.ok(Map.of(
+                    "reservationDetails", reservation,
+                    "privateKey", reservation.getPrivateKey(),
+                    "publicKey", reservation.getPublicKey()
+                ));
             } else {
                 return ResponseEntity.notFound().build();
             }
         } else {
             Optional<Object> reservationInDB = reservationRepository.findByPublicKey(publicKey);
             if (reservationInDB.isPresent() && reservationInDB.get() instanceof Reservation reservation) {
-                return ResponseEntity.ok(new Object() {
-                    public final Reservation reservationDetails = reservation;
-                    public final UUID publicKey = reservation.getPublicKey();
-                });
+                return ResponseEntity.ok(Map.of(
+                    "reservationDetails", reservation,
+                    "publicKey", reservation.getPublicKey()
+                ));
             } else {
                 return ResponseEntity.notFound().build();
             }
@@ -56,25 +61,27 @@ public ResponseEntity<Object> createReservation(@RequestBody ReservationDTO rese
             if (!reservationDTO.getParticipants().matches("^[A-Za-z\\s]+(,\\s*[A-Za-z\\s]+)*$")) {
                 throw new Exception("Participants field must only contain letters (A-Z, a-z) separated by commas.");
             }
-
+            Room room = roomRepository.findById(reservationDTO.getRoomId()).orElse(null);
+            if (room == null) {
+                throw new Exception("Room not found.");
+            }
             for (Reservation reservation : reservationRepository.findAll()) {
-                boolean isSameRoom = reservation.getRoom() == reservationDTO.getRoom();
+                boolean isSameRoom = reservation.getRoom().getId().equals(room.getId());
                 boolean isSameDate = reservation.getDate().equals(reservationDTO.getDate());
                 boolean isOverlappingTime = reservationDTO.getStartTime().isBefore(reservation.getEndTime()) && reservationDTO.getEndTime().isAfter(reservation.getStartTime());
-
                 if (isSameRoom && isSameDate && isOverlappingTime) {
                     throw new Exception("Room is already reserved for the given time and the given date.");
                 }
             }
-            Reservation reservationInDB = new Reservation(null, reservationDTO.getDate(), reservationDTO.getStartTime(), reservationDTO.getEndTime(), reservationDTO.getRoom(), reservationDTO.getDescription(), reservationDTO.getParticipants(), null, null);
+            Reservation reservationInDB = new Reservation(null, reservationDTO.getDate(), reservationDTO.getStartTime(), reservationDTO.getEndTime(), room, reservationDTO.getDescription(), reservationDTO.getParticipants(), null, null);
             reservationRepository.save(reservationInDB);
-            return ResponseEntity.ok(new Object() {
-                public final Reservation reservation = reservationInDB;
-                public final UUID privateKey = reservationInDB.getPrivateKey();
-                public final UUID publicKey = reservationInDB.getPublicKey();
-            });
+            return ResponseEntity.ok(Map.of(
+                "reservation", reservationInDB,
+                "privateKey", reservationInDB.getPrivateKey(),
+                "publicKey", reservationInDB.getPublicKey()
+            ));
         } catch (Exception e) {
-            return ResponseEntity.badRequest().build();
+            return ResponseEntity.badRequest().body(e.getMessage());
         }
     }
 
@@ -101,27 +108,27 @@ public ResponseEntity<Reservation> updateReservation(@PathVariable UUID id, @Req
             if (!reservation.getPrivateKey().equals(privateKey)) {
                 return ResponseEntity.status(401).build();
             }
-
             if (!reservationDTO.getParticipants().matches("^[A-Za-z\\s]+(,\\s*[A-Za-z\\s]+)*$")) {
                 throw new Exception("Participants field must only contain letters (A-Z, a-z) separated by commas.");
             }
-
+            Room room = roomRepository.findById(reservationDTO.getRoomId()).orElse(null);
+            if (room == null) {
+                throw new Exception("Room not found.");
+            }
             for (Reservation currentReservationFromDB : reservationRepository.findAll()) {
-                boolean isSameRoom = currentReservationFromDB.getRoom() == reservationDTO.getRoom();
+                boolean isSameRoom = currentReservationFromDB.getRoom().getId().equals(room.getId());
                 boolean isSameDate = currentReservationFromDB.getDate().equals(reservationDTO.getDate());
                 boolean isOverlappingTime = reservationDTO.getStartTime().isBefore(currentReservationFromDB.getEndTime()) && reservationDTO.getEndTime().isAfter(currentReservationFromDB.getStartTime());
-
                 if (isSameRoom && isSameDate && isOverlappingTime && !currentReservationFromDB.getId().equals(id)) {
                     throw new Exception("Room is already reserved for the given time and the given date.");
                 }
             }
-
             return reservationRepository.findById(id)
                     .map(existingReservation -> {
                         existingReservation.setDate(reservationDTO.getDate());
                         existingReservation.setStartTime(reservationDTO.getStartTime());
                         existingReservation.setEndTime(reservationDTO.getEndTime());
-                        existingReservation.setRoom(reservationDTO.getRoom());
+                        existingReservation.setRoom(room);
                         existingReservation.setDescription(reservationDTO.getDescription());
                         existingReservation.setParticipants(reservationDTO.getParticipants());
                         reservationRepository.save(existingReservation);
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/RoomController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/RoomController.java
new file mode 100644
index 0000000..5573d8a
--- /dev/null
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/RoomController.java
@@ -0,0 +1,63 @@
+package ims.orariaperti.controller;
+
+import ims.orariaperti.entity.Room;
+import ims.orariaperti.entity.Reservation;
+import ims.orariaperti.repository.RoomRepository;
+import ims.orariaperti.repository.ReservationRepository;
+import ims.orariaperti.utilities.RoomFeatures;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Repository;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.UUID;
+
+@Repository
+@RequestMapping("/api/room")
+@RestController
+public class RoomController {
+    
+    private final RoomRepository roomRepository;
+    private final ReservationRepository reservationRepository;
+
+    public RoomController(RoomRepository roomRepository, ReservationRepository reservationRepository) {
+        this.roomRepository = roomRepository;
+        this.reservationRepository = reservationRepository;
+    }
+    
+    @GetMapping
+    public Object getRooms() {
+        List<Room> roomsInDB = roomRepository.findAll();
+        if (!roomsInDB.isEmpty()) {
+            ArrayList<Object> rooms = new ArrayList<>();
+            for (Room room : roomsInDB) {
+                rooms.add(Map.of(
+                    "id", room.getId(),
+                    "roomNumber", room.getRoomNumber(),
+                    "roomFeatures", room.getRoomFeatures().stream().map(RoomFeatures::getFeature).toList()
+                ));
+            }
+            return ResponseEntity.ok(rooms);
+        } else {
+            return ResponseEntity.notFound().build();
+        }
+    }
+
+    @GetMapping("/{roomId}/reservations")
+    public ResponseEntity<?> getReservationsForRoom(@PathVariable UUID roomId) {
+        var roomOpt = roomRepository.findById(roomId);
+        if (roomOpt.isEmpty()) {
+            return ResponseEntity.notFound().build();
+        }
+        List<Reservation> reservations = reservationRepository.findAll().stream()
+            .filter(r -> r.getRoom() != null && r.getRoom().getId().equals(roomId))
+            .toList();
+        return ResponseEntity.ok(reservations);
+    }
+
+}
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Reservation.java b/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Reservation.java
index ad163c7..c7bcb55 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Reservation.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Reservation.java
@@ -24,8 +24,9 @@ public class Reservation {
     @Column(nullable = false)
     private LocalTime endTime;
 
-    @Column(nullable = false)
-    private int room;
+    @ManyToOne(fetch = FetchType.EAGER)
+    @JoinColumn(name = "room_id", nullable = false)
+    private Room room;
 
     @Column(nullable = false, columnDefinition = "VARCHAR(200)")
     private String description;
@@ -44,7 +45,7 @@ public class Reservation {
     public Reservation() {
     }
 
-    public Reservation(UUID id, LocalDate date, LocalTime startTime, LocalTime endTime, int room, String description, String participants, UUID privateKey, UUID publicKey) {
+    public Reservation(UUID id, LocalDate date, LocalTime startTime, LocalTime endTime, Room room, String description, String participants, UUID privateKey, UUID publicKey) {
         this.id = id;
         this.date = date;
         this.startTime = startTime;
@@ -99,11 +100,11 @@ public void setEndTime(LocalTime endTime) {
         this.endTime = endTime;
     }
 
-    public int getRoom() {
+    public Room getRoom() {
         return room;
     }
 
-    public void setRoom(int room) {
+    public void setRoom(Room room) {
         this.room = room;
     }
 
@@ -146,7 +147,7 @@ public String toString() {
                 ", date=" + date +
                 ", startTime=" + startTime +
                 ", endTime=" + endTime +
-                ", room=" + room +
+                ", room=" + (room != null ? room.getId() : null) +
                 ", description='" + description + '\'' +
                 ", participants='" + participants + '\'' +
                 ", privateKey=" + privateKey +
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Room.java b/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Room.java
new file mode 100644
index 0000000..22af1bf
--- /dev/null
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Room.java
@@ -0,0 +1,56 @@
+package ims.orariaperti.entity;
+
+import ims.orariaperti.utilities.RoomFeatures;
+import jakarta.persistence.*;
+
+import java.util.ArrayList;
+import java.util.UUID;
+
+@Entity
+@Table(name = "rooms")
+public class Room {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.AUTO)
+    private UUID id;
+
+    /**
+     * Should contain only the numbers. **without** the "Room {nmr}" Room prefix.
+     */
+    private String roomNumber;
+    
+    private ArrayList<RoomFeatures> roomFeatures;
+
+    public Room() {
+    }
+
+    public Room(UUID id, String roomNumber, ArrayList<RoomFeatures> roomFeatures) {
+        this.id = id;
+        this.roomNumber = roomNumber;
+        this.roomFeatures = roomFeatures;
+    }
+
+    public UUID getId() {
+        return id;
+    }
+
+    public void setId(UUID id) {
+        this.id = id;
+    }
+
+    public String getRoomNumber() {
+        return roomNumber;
+    }
+
+    public void setRoomNumber(String roomName) {
+        this.roomNumber = roomName;
+    }
+
+    public ArrayList<RoomFeatures> getRoomFeatures() {
+        return roomFeatures;
+    }
+
+    public void setRoomFeatures(ArrayList<RoomFeatures> roomFeatures) {
+        this.roomFeatures = roomFeatures;
+    }
+}
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/repository/RoomRepository.java b/OrariAperti/backend/src/main/java/ims/orariaperti/repository/RoomRepository.java
new file mode 100644
index 0000000..40a44f6
--- /dev/null
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/repository/RoomRepository.java
@@ -0,0 +1,8 @@
+package ims.orariaperti.repository;
+
+import ims.orariaperti.entity.Room;
+import org.springframework.data.jpa.repository.JpaRepository;
+import java.util.UUID;
+
+public interface RoomRepository extends JpaRepository<Room, UUID> {
+}
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/RoomFeatures.java b/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/RoomFeatures.java
new file mode 100644
index 0000000..ef2fd48
--- /dev/null
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/RoomFeatures.java
@@ -0,0 +1,30 @@
+package ims.orariaperti.utilities;
+
+public enum RoomFeatures {
+    BEAMER("Beamer"),
+    WATER_SOURCE("Water Tap"),
+    WHITEBOARD("Whiteboard"),
+    AIR_CONDITIONING("Air Conditioning"),
+    PROJECTOR_SCREEN("Projector Screen"),
+    SPEAKER_SYSTEM("Speaker System"),
+    VIDEO_CONFERENCING("Video Conferencing"),
+    WIFI("WiFi"),
+    POWER_OUTLETS("Power Outlets"),
+    NATURAL_LIGHT("Natural Light"),
+    SOUNDPROOFING("Soundproofing"),
+    SMART_BOARD("Smart Board"),
+    TELEPHONE("Telephone"),
+    COFFEE_MACHINE("Coffee Machine"),
+    PRINTER("Printer"),
+    LOCKERS("Lockers");
+
+    private final String feature;
+
+    RoomFeatures(String name) {
+        this.feature = name;
+    }
+
+    public String getFeature() {
+        return feature;
+    }
+}
\ No newline at end of file
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java b/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java
index 564fbeb..561da54 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java
@@ -1,52 +1,115 @@
 package ims.orariaperti.utilities;
 
 import ims.orariaperti.entity.Reservation;
+import ims.orariaperti.entity.Room;
 import ims.orariaperti.repository.ReservationRepository;
+import ims.orariaperti.repository.RoomRepository;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.CommandLineRunner;
 import org.springframework.stereotype.Component;
 
 import java.time.LocalDate;
 import java.time.LocalTime;
+import java.util.ArrayList;
+import java.util.Arrays;
 import java.util.UUID;
 
 @Component
 public class Seeder implements CommandLineRunner {
 
     private final ReservationRepository reservationRepository;
+    private final RoomRepository roomRepository;
 
     @Autowired
-    public Seeder(ReservationRepository reservationRepository) {
+    public Seeder(ReservationRepository reservationRepository,  RoomRepository roomRepository) {
         this.reservationRepository = reservationRepository;
+        this.roomRepository = roomRepository;
     }
 
     @Override
     public void run(String... args) {
-        if (reservationRepository.count() == 0) {
-            reservationRepository.save(new Reservation(
-                    null,
-                    LocalDate.now(),
-                    LocalTime.of(9, 0),
-                    LocalTime.of(10, 0),
-                    101,
-                    "Team Meeting",
-                    "Chandra,Johnson",
-                    UUID.randomUUID(),
-                    UUID.randomUUID()
-            ));
-            reservationRepository.save(new Reservation(
-                    null,
-                    LocalDate.now(),
-                    LocalTime.of(11, 0),
-                    LocalTime.of(12, 0),
-                    102,
-                    "Project Discussion",
-                    "Natalia,Fluury",
-                    UUID.randomUUID(),
-                    UUID.randomUUID()
-            ));
+        if (roomRepository.count() == 0) {
+            Room room101 = roomRepository.save(new Room(null, "101", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.WHITEBOARD))));
+            Room room102 = roomRepository.save(new Room(null, "102", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.WHITEBOARD))));
+            @SuppressWarnings("unused")
+            Room room201 = roomRepository.save(new Room(null, "201", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.WATER_SOURCE))));
+            @SuppressWarnings("unused")
+            Room room103 = roomRepository.save(new Room(null, "103", new ArrayList<>(Arrays.asList(RoomFeatures.WHITEBOARD, RoomFeatures.WIFI))));
+            @SuppressWarnings("unused")
+            Room room104 = roomRepository.save(new Room(null, "104", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.AIR_CONDITIONING))));
+            @SuppressWarnings("unused")
+            Room room105 = roomRepository.save(new Room(null, "105", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.POWER_OUTLETS))));
+            @SuppressWarnings("unused")
+            Room room110 = roomRepository.save(new Room(null, "110", new ArrayList<>(Arrays.asList(RoomFeatures.WHITEBOARD, RoomFeatures.NATURAL_LIGHT))));
+            @SuppressWarnings("unused")
+            Room room120 = roomRepository.save(new Room(null, "120", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.SOUNDPROOFING))));
+            @SuppressWarnings("unused")
+            Room room130 = roomRepository.save(new Room(null, "130", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.SMART_BOARD, RoomFeatures.WIFI))));
+            @SuppressWarnings("unused")
+            Room room140 = roomRepository.save(new Room(null, "140", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.WHITEBOARD, RoomFeatures.POWER_OUTLETS))));
+            @SuppressWarnings("unused")
+            Room room150 = roomRepository.save(new Room(null, "150", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.LOCKERS))));
+            @SuppressWarnings("unused")
+            Room room201_2 = roomRepository.save(new Room(null, "201", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.WATER_SOURCE))));
+            @SuppressWarnings("unused")
+            Room room202 = roomRepository.save(new Room(null, "202", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.WHITEBOARD, RoomFeatures.AIR_CONDITIONING))));
+            @SuppressWarnings("unused")
+            Room room210 = roomRepository.save(new Room(null, "210", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.PROJECTOR_SCREEN))));
+            @SuppressWarnings("unused")
+            Room room220 = roomRepository.save(new Room(null, "220", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.SPEAKER_SYSTEM))));
+            @SuppressWarnings("unused")
+            Room room230 = roomRepository.save(new Room(null, "230", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.VIDEO_CONFERENCING, RoomFeatures.WIFI))));
+            @SuppressWarnings("unused")
+            Room room240 = roomRepository.save(new Room(null, "240", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.POWER_OUTLETS, RoomFeatures.NATURAL_LIGHT))));
+            @SuppressWarnings("unused")
+            Room room250 = roomRepository.save(new Room(null, "250", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.SMART_BOARD))));
+            @SuppressWarnings("unused")
+            Room room301 = roomRepository.save(new Room(null, "301", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.WHITEBOARD, RoomFeatures.TELEPHONE))));
+            @SuppressWarnings("unused")
+            Room room310 = roomRepository.save(new Room(null, "310", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.COFFEE_MACHINE))));
+            @SuppressWarnings("unused")
+            Room room320 = roomRepository.save(new Room(null, "320", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.PRINTER))));
+            @SuppressWarnings("unused")
+            Room room330 = roomRepository.save(new Room(null, "330", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.LOCKERS, RoomFeatures.WIFI))));
+            Room room340 = roomRepository.save(new Room(null, "340", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.WHITEBOARD, RoomFeatures.AIR_CONDITIONING, RoomFeatures.POWER_OUTLETS))));
+            System.out.println("Sample Rooms have been added to the database.");
 
-            System.out.println("Sample Reservations have been added to the database.");
+            if (reservationRepository.count() == 0) {
+                reservationRepository.save(new Reservation(
+                        null,
+                        LocalDate.now(),
+                        LocalTime.of(9, 0),
+                        LocalTime.of(10, 0),
+                        room101,
+                        "Team Meeting",
+                        "Chandra,Johnson",
+                        UUID.randomUUID(),
+                        UUID.randomUUID()
+                ));
+                reservationRepository.save(new Reservation(
+                        null,
+                        LocalDate.now(),
+                        LocalTime.of(11, 0),
+                        LocalTime.of(12, 0),
+                        room102,
+                        "Project Discussion",
+                        "Natalia,Fluury",
+                        UUID.randomUUID(),
+                        UUID.randomUUID()
+                ));
+                reservationRepository.save(new Reservation(
+                        null,
+                        LocalDate.now(),
+                        LocalTime.of(11, 0),
+                        LocalTime.of(12, 0),
+                        room102,
+                        "Project Feedback",
+                        "Pluh,Dario",
+                        UUID.randomUUID(),
+                        UUID.randomUUID()
+                ));
+                System.out.println("Sample Reservations have been added to the database.");
+            }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/OrariAperti/backend/src/main/resources/application.properties.example b/OrariAperti/backend/src/main/resources/application.properties.example
index 44afada..5aa0b85 100644
--- a/OrariAperti/backend/src/main/resources/application.properties.example
+++ b/OrariAperti/backend/src/main/resources/application.properties.example
@@ -10,3 +10,6 @@ spring.jpa.hibernate.ddl-auto=update
 spring.jpa.show-sql=true
 spring.jpa.properties.hibernate.format_sql=true
 spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQLDialect
+
+# CORS and Redirect Configuration
+frontend.url=http://localhost:3000
diff --git a/OrariAperti/backend/src/main/resources/backend-api.yaml b/OrariAperti/backend/src/main/resources/backend-api.yaml
deleted file mode 100644
index 502e91c..0000000
--- a/OrariAperti/backend/src/main/resources/backend-api.yaml
+++ /dev/null
@@ -1,178 +0,0 @@
-openapi: 3.0.3
-info:
-  title: OrariAperti Reservation API
-  version: 1.0.0
-servers:
-  - url: localhost:8080/api
-paths:
-  /reservation:
-    get:
-      summary: Get reservation by public or private key
-      parameters:
-        - in: header
-          name: publicKey
-          schema:
-            type: string
-            format: uuid
-          required: false
-        - in: header
-          name: privateKey
-          schema:
-            type: string
-            format: uuid
-          required: false
-      responses:
-        '200':
-          description: Reservation found
-          content:
-            application/json:
-              schema:
-                oneOf:
-                  - $ref: '#/components/schemas/ReservationWithKeys'
-                  - $ref: '#/components/schemas/ReservationWithPublicKey'
-        '400':
-          description: Bad request
-        '404':
-          description: Not found
-    post:
-      summary: Create a new reservation
-      requestBody:
-        required: true
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ReservationDTO'
-      responses:
-        '200':
-          description: Reservation created
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/ReservationWithKeys'
-        '400':
-          description: Bad request
-  /reservation/{id}:
-    delete:
-      summary: Delete a reservation by ID
-      parameters:
-        - in: path
-          name: id
-          required: true
-          schema:
-            type: string
-            format: uuid
-        - in: header
-          name: privateKey
-          required: true
-          schema:
-            type: string
-            format: uuid
-      responses:
-        '200':
-          description: Reservation deleted
-        '401':
-          description: Unauthorized
-        '404':
-          description: Not found
-    put:
-      summary: Update a reservation by ID
-      parameters:
-        - in: path
-          name: id
-          required: true
-          schema:
-            type: string
-            format: uuid
-        - in: header
-          name: privateKey
-          required: true
-          schema:
-            type: string
-            format: uuid
-      requestBody:
-        required: true
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ReservationDTO'
-      responses:
-        '200':
-          description: Reservation updated
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/Reservation'
-        '400':
-          description: Bad request
-        '401':
-          description: Unauthorized
-        '404':
-          description: Not found
-
-components:
-  schemas:
-    ReservationDTO:
-      type: object
-      properties:
-        date:
-          type: string
-          format: date
-        startTime:
-          type: string
-          format: time
-        endTime:
-          type: string
-          format: time
-        room:
-          type: integer
-        description:
-          type: string
-        participants:
-          type: string
-      required: [date, startTime, endTime, room, description, participants]
-    Reservation:
-      type: object
-      properties:
-        id:
-          type: string
-          format: uuid
-        date:
-          type: string
-          format: date
-        startTime:
-          type: string
-          format: time
-        endTime:
-          type: string
-          format: time
-        room:
-          type: integer
-        description:
-          type: string
-        participants:
-          type: string
-        privateKey:
-          type: string
-          format: uuid
-        publicKey:
-          type: string
-          format: uuid
-    ReservationWithKeys:
-      type: object
-      properties:
-        reservation:
-          $ref: '#/components/schemas/Reservation'
-        privateKey:
-          type: string
-          format: uuid
-        publicKey:
-          type: string
-          format: uuid
-    ReservationWithPublicKey:
-      type: object
-      properties:
-        reservation:
-          $ref: '#/components/schemas/Reservation'
-        publicKey:
-          type: string
-          format: uuid
\ No newline at end of file
diff --git a/OrariAperti/frontend/.run/dev.run.xml b/OrariAperti/frontend/.run/Frontend.run.xml
similarity index 58%
rename from OrariAperti/frontend/.run/dev.run.xml
rename to OrariAperti/frontend/.run/Frontend.run.xml
index fba0858..af1dea6 100644
--- a/OrariAperti/frontend/.run/dev.run.xml
+++ b/OrariAperti/frontend/.run/Frontend.run.xml
@@ -1,6 +1,6 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="dev" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/OrariAperti/frontend/package.json" />
+  <configuration default="false" name="Frontend" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
     <command value="run" />
     <scripts>
       <script value="dev" />
diff --git a/OrariAperti/frontend/index.html b/OrariAperti/frontend/index.html
index 36011ac..e88b925 100644
--- a/OrariAperti/frontend/index.html
+++ b/OrariAperti/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo-oa-dark.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>OrariAperti - Manage your Rooms with Ease</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/OrariAperti/frontend/package-lock.json b/OrariAperti/frontend/package-lock.json
index 4ad52d0..46f5689 100644
--- a/OrariAperti/frontend/package-lock.json
+++ b/OrariAperti/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "frontend",
-  "version": "0.0.0",
+  "name": "orariaperti-frontend",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
-      "version": "0.0.0",
+      "name": "orariaperti-frontend",
+      "version": "1.0.0",
       "dependencies": {
         "@hookform/resolvers": "^5.0.1",
         "@radix-ui/react-accordion": "^1.2.11",
diff --git a/OrariAperti/frontend/package.json b/OrariAperti/frontend/package.json
index d88ed29..21bc2f4 100644
--- a/OrariAperti/frontend/package.json
+++ b/OrariAperti/frontend/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "frontend",
+  "name": "orariaperti-frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/OrariAperti/frontend/vite.config.ts b/OrariAperti/frontend/vite.config.ts
index c74627c..2a61f81 100644
--- a/OrariAperti/frontend/vite.config.ts
+++ b/OrariAperti/frontend/vite.config.ts
@@ -12,8 +12,8 @@ export default defineConfig({
     },
   },
   server: {
-    host: "localhost",  // Change the host to localhost or 127.0.0.1
-    port: 3000,         // Or any other port if 5173 is conflicting
-    strictPort: true,   // Ensure Vite doesn't pick another port if 5173 is taken
+    host: "localhost",
+    port: 3000,
+    strictPort: true,
   }
 })

From 6cb7c88a4cbbd07691c91cb6e6f246c19c00053c Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Thu, 12 Jun 2025 10:32:08 +0200
Subject: [PATCH 09/27] Enhances AccessKeys component to handle reservation
 loading with error handling and state management

---
 .../ims/orariaperti/config/WebConfig.java     |  8 ++--
 .../controller/MainController.java            | 17 -------
 .../controller/ReservationController.java     | 11 ++---
 .../frontend/src/components/AccessKeys.tsx    | 46 +++++++++++++++++--
 OrariAperti/frontend/src/components/Main.tsx  |  9 ++--
 5 files changed, 58 insertions(+), 33 deletions(-)
 delete mode 100644 OrariAperti/backend/src/main/java/ims/orariaperti/controller/MainController.java

diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java b/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
index 4dc8f88..2c418f8 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/config/WebConfig.java
@@ -13,15 +13,15 @@ public class WebConfig implements WebMvcConfigurer {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**")
-                .allowedOrigins(frontendUrl)
+                .allowedOrigins(frontendUrl, "http://localhost:8080")
                 .allowedMethods("*")
                 .allowedHeaders("*");
     }
     
     @Override
     public void addViewControllers(ViewControllerRegistry registry) {
-        registry.addViewController("/").setViewName("forward:" + frontendUrl);
-        registry.addViewController("/{x:[\\w\\-]+}").setViewName("forward:" + frontendUrl);
-        registry.addViewController("/{x:^(?!api$).*$}/**").setViewName("forward:" + frontendUrl);
+        registry.addViewController("/").setViewName("redirect:" + frontendUrl);
+        registry.addViewController("/{x:[\\w\\-]+}").setViewName("redirect:" + frontendUrl);
+        registry.addViewController("/{x:^(?!api$).*$}/**").setViewName("redirect:" + frontendUrl);
     }
 }
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/MainController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/MainController.java
deleted file mode 100644
index f0ca27b..0000000
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/MainController.java
+++ /dev/null
@@ -1,17 +0,0 @@
-package ims.orariaperti.controller;
-
-import org.springframework.beans.factory.annotation.Value;
-import org.springframework.boot.web.servlet.error.ErrorController;
-import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.RequestMapping;
-
-@Controller
-public class MainController implements ErrorController {
-    @Value("${frontend.url}")
-    private String frontendUrl;
-
-    @RequestMapping("/*")
-    public Object redirect() {
-        return "redirect:" + frontendUrl;
-    }
-}
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
index 0a3e8da..8f171d8 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
@@ -15,7 +15,6 @@
 
 @RestController
 @RequestMapping("/api/reservation")
-@Controller
 public class ReservationController {
 
     private final ReservationRepository reservationRepository;
@@ -27,12 +26,12 @@ public ReservationController(ReservationRepository reservationRepository, RoomRe
     }
 
     @GetMapping
-    public Object getReservations(@RequestHeader(required = false) UUID publicKey, @RequestHeader(required = false) UUID privateKey) {
-        if (publicKey == null && privateKey == null) {
+    public Object getReservations(@RequestHeader(required = false) UUID publickey, @RequestHeader(required = false) UUID privatekey) {
+        if (publickey == null && privatekey == null) {
             return ResponseEntity.badRequest().build();
         }
-        if (privateKey != null) {
-            Optional<Object> reservationInDB = reservationRepository.findByPrivateKey(privateKey);
+        if (privatekey != null) {
+            Optional<Object> reservationInDB = reservationRepository.findByPrivateKey(privatekey);
             if (reservationInDB.isPresent() && reservationInDB.get() instanceof Reservation reservation) {
                 return ResponseEntity.ok(Map.of(
                     "reservationDetails", reservation,
@@ -43,7 +42,7 @@ public Object getReservations(@RequestHeader(required = false) UUID publicKey, @
                 return ResponseEntity.notFound().build();
             }
         } else {
-            Optional<Object> reservationInDB = reservationRepository.findByPublicKey(publicKey);
+            Optional<Object> reservationInDB = reservationRepository.findByPublicKey(publickey);
             if (reservationInDB.isPresent() && reservationInDB.get() instanceof Reservation reservation) {
                 return ResponseEntity.ok(Map.of(
                     "reservationDetails", reservation,
diff --git a/OrariAperti/frontend/src/components/AccessKeys.tsx b/OrariAperti/frontend/src/components/AccessKeys.tsx
index 485bd37..a7ecdf5 100644
--- a/OrariAperti/frontend/src/components/AccessKeys.tsx
+++ b/OrariAperti/frontend/src/components/AccessKeys.tsx
@@ -9,8 +9,43 @@ import {
 import {Input} from "@/components/ui/input.tsx";
 import {Label} from "@/components/ui/label.tsx";
 import {Button} from "@/components/ui/button.tsx";
+import { useState } from "react";
+import type { Reservation } from "@/types/types";
+
+export default function AccessKeys({ onReservationLoaded }: { onReservationLoaded?: (reservation: Reservation) => void }) {
+    const [privateKey, setPrivateKey] = useState("");
+    const [publicKey, setPublicKey] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        setError(null);
+        setLoading(true);
+        try {
+            // debugger
+            debugger
+            const headers: Record<string, string> = { "Content-Type": "application/json" };
+            if (privateKey) headers["privateKey"] = privateKey;
+            else if (publicKey) headers["publicKey"] = publicKey;
+            else throw new Error("Please enter a private or public key.");
+            const res = await fetch(import.meta.env.VITE_APP_BACKEND_URL + "/api/reservation", { method: "GET", headers });
+            if (!res.ok) throw new Error("Reservation not found or invalid key.");
+            const data = await res.json();
+            if (data.reservationDetails) {
+                onReservationLoaded?.({ ...data.reservationDetails, privateKey: data.privateKey, publicKey: data.publicKey });
+            } else {
+                throw new Error("No reservation details found.");
+            }
+        } catch (err: unknown) {
+            let message = "Failed to load reservation.";
+            if (err instanceof Error) message = err.message;
+            setError(message);
+        } finally {
+            setLoading(false);
+        }
+    }
 
-export default function AccessKeys() {
     return (
         <>
             <Card className={"h-[96%] w-[30%]"}>
@@ -18,7 +53,7 @@ export default function AccessKeys() {
                     <CardTitle>Access Keys</CardTitle>
                     <CardDescription>Enter your Access Keys to view or edit your reservations.</CardDescription>
                 </CardHeader>
-                <form className="flex flex-col flex-1">
+                <form className="flex flex-col flex-1" onSubmit={handleSubmit}>
                     <CardContent className="flex-1">
                         <div className="grid gap-4">
                             <div className="grid gap-2">
@@ -28,6 +63,8 @@ export default function AccessKeys() {
                                     id="privateKey"
                                     name="privateKey"
                                     placeholder="Enter your private key"
+                                    value={privateKey}
+                                    onChange={e => setPrivateKey(e.target.value)}
                                 />
                             </div>
                             <div className="grid gap-2">
@@ -37,12 +74,15 @@ export default function AccessKeys() {
                                     id="publicKey"
                                     name="publicKey"
                                     placeholder="Enter your public key"
+                                    value={publicKey}
+                                    onChange={e => setPublicKey(e.target.value)}
                                 />
                             </div>
+                            {error && <div className="text-red-500 text-xs">{error}</div>}
                         </div>
                     </CardContent>
                     <CardFooter className={"flex-col gap-2"}>
-                        <Button type={"submit"} variant={"default"} className={"w-full"}>Load Reservations</Button>
+                        <Button type={"submit"} variant={"default"} className={"w-full"} disabled={loading}>{loading ? "Loading..." : "Load Reservations"}</Button>
                     </CardFooter>
                 </form>
             </Card>
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index f6607b5..61c2568 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -1,12 +1,15 @@
+import { useState } from "react";
 import AccessKeys from "@/components/AccessKeys.tsx";
 import CurrentReservation from "@/components/CurrentReservation.tsx";
+import type { Reservation } from "@/types/types";
 
 export default function MainUIOnly() {
-  
+  const [reservation, setReservation] = useState<Reservation | undefined>(undefined);
+
   return (
       <main className="container mx-auto px-2 sm:px-6 pt-6 h-screen min-h-screen flex flex-row items-center w-full">
-          <AccessKeys/>
-          <CurrentReservation reservation={undefined}/>
+          <AccessKeys onReservationLoaded={setReservation}/>
+          <CurrentReservation reservation={reservation}/>
       </main>
   );
 }

From 4cff0524604aabc677364dac45bddce0c5cc18ea Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Thu, 12 Jun 2025 11:27:38 +0200
Subject: [PATCH 10/27] Adds RoomFeaturesSerializer class

Introduces an empty RoomFeaturesSerializer class to establish the groundwork for future serialization functionality related to room features.

No implementation details are provided yet, serving as a placeholder for subsequent development.
---
 .../ims/orariaperti/serializer/RoomFeaturesSerializer.java    | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 OrariAperti/backend/src/main/java/ims/orariaperti/serializer/RoomFeaturesSerializer.java

diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/serializer/RoomFeaturesSerializer.java b/OrariAperti/backend/src/main/java/ims/orariaperti/serializer/RoomFeaturesSerializer.java
new file mode 100644
index 0000000..11201ae
--- /dev/null
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/serializer/RoomFeaturesSerializer.java
@@ -0,0 +1,4 @@
+package ims.orariaperti.serializer;
+
+public class RoomFeaturesSerializer {
+}

From 202f6e2e500c604eb4fc289a5d7eb0eb14de2e89 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Thu, 12 Jun 2025 11:28:06 +0200
Subject: [PATCH 11/27] Adds custom serializer for Room features and improves
 reservation editing

Integrates a custom JSON serializer for Room features to enhance data serialization in the backend. Updates the frontend to enable reservation editing, including room features display and save functionality. Removes unnecessary debugger statements for cleaner code.
---
 .../java/ims/orariaperti/entity/Room.java     |   5 +-
 .../serializer/RoomFeaturesSerializer.java    |  15 +-
 .../frontend/src/components/AccessKeys.tsx    |   2 -
 .../src/components/CurrentReservation.tsx     | 151 +++++++++++++++---
 4 files changed, 145 insertions(+), 28 deletions(-)

diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Room.java b/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Room.java
index 22af1bf..b0d50c7 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Room.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/entity/Room.java
@@ -1,5 +1,7 @@
 package ims.orariaperti.entity;
 
+import com.fasterxml.jackson.databind.annotation.JsonSerialize;
+import ims.orariaperti.serializer.RoomFeaturesSerializer;
 import ims.orariaperti.utilities.RoomFeatures;
 import jakarta.persistence.*;
 
@@ -18,7 +20,8 @@ public class Room {
      * Should contain only the numbers. **without** the "Room {nmr}" Room prefix.
      */
     private String roomNumber;
-    
+
+    @JsonSerialize(contentUsing = RoomFeaturesSerializer.class)
     private ArrayList<RoomFeatures> roomFeatures;
 
     public Room() {
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/serializer/RoomFeaturesSerializer.java b/OrariAperti/backend/src/main/java/ims/orariaperti/serializer/RoomFeaturesSerializer.java
index 11201ae..a57a99c 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/serializer/RoomFeaturesSerializer.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/serializer/RoomFeaturesSerializer.java
@@ -1,4 +1,15 @@
 package ims.orariaperti.serializer;
 
-public class RoomFeaturesSerializer {
-}
+import com.fasterxml.jackson.core.JsonGenerator;
+import com.fasterxml.jackson.databind.JsonSerializer;
+import com.fasterxml.jackson.databind.SerializerProvider;
+import ims.orariaperti.utilities.RoomFeatures;
+
+import java.io.IOException;
+
+public class RoomFeaturesSerializer extends JsonSerializer<RoomFeatures> {
+    @Override
+    public void serialize(RoomFeatures value, JsonGenerator gen, SerializerProvider serializers) throws IOException {
+        gen.writeString(value.getFeature());
+    }
+}
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/AccessKeys.tsx b/OrariAperti/frontend/src/components/AccessKeys.tsx
index a7ecdf5..40db254 100644
--- a/OrariAperti/frontend/src/components/AccessKeys.tsx
+++ b/OrariAperti/frontend/src/components/AccessKeys.tsx
@@ -23,8 +23,6 @@ export default function AccessKeys({ onReservationLoaded }: { onReservationLoade
         setError(null);
         setLoading(true);
         try {
-            // debugger
-            debugger
             const headers: Record<string, string> = { "Content-Type": "application/json" };
             if (privateKey) headers["privateKey"] = privateKey;
             else if (publicKey) headers["publicKey"] = publicKey;
diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index e1701bf..a2ef9cb 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -1,7 +1,18 @@
 import {Card, CardHeader, CardTitle, CardContent, CardDescription} from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
+import {Input} from "@/components/ui/input";
+import {Label} from "@/components/ui/label";
+import {Textarea} from "@/components/ui/textarea";
+import {useState} from "react";
 import type {Reservation} from "@/types/types";
 
 export default function CurrentReservation({reservation}: { reservation?: Reservation }) {
+    const [editData, setEditData] = useState<Reservation | undefined>(reservation);
+    const [editing, setEditing] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const isPrivate = !!reservation?.privateKey;
+
     if (!reservation) {
         return (
             <>
@@ -15,44 +26,138 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                 </Card>
             </>
         );
-    } else if (Object.keys(reservation).length === 0) {
+    }
 
-        return (
-            <Card className="h-[96%] w-full ml-8">
-                <CardHeader>
-                    <CardTitle>Current Reservation</CardTitle>
-                    <CardDescription>
-                        Reservation details and access keys.
-                    </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-3">
+    // Render room details
+    const room = reservation.room;
+    let roomDisplay = "";
+    let featuresDisplay = "";
+    if (room && typeof room === "object" && "roomNumber" in room) {
+        roomDisplay = (room as { roomNumber?: string }).roomNumber || (room as { id?: string }).id || "";
+        featuresDisplay = Array.isArray((room as { roomFeatures?: string[] }).roomFeatures)
+            ? (room as { roomFeatures: string[] }).roomFeatures.join(", ")
+            : "";
+    } else {
+        roomDisplay = String(room);
+    }
+
+    // Handlers for editing
+    function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+        if (!editData) return;
+        setEditData({ ...editData, [e.target.name]: e.target.value });
+    }
+
+    async function handleSave() {
+        if (!editData) return;
+        setSaving(true);
+        setError(null);
+        try {
+            let roomId = "";
+            if (editData.room && typeof editData.room === "object" && "id" in editData.room) {
+                roomId = (editData.room as { id?: string }).id || "";
+            } else {
+                roomId = String(editData.room);
+            }
+            const payload = {
+                date: editData.date,
+                startTime: editData.startTime,
+                endTime: editData.endTime,
+                room: roomId,
+                description: editData.description,
+                participants: editData.participants,
+            };
+            const res = await fetch(`${import.meta.env.VITE_APP_BACKEND_URL}/api/reservation/${editData.id}`, {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                    privateKey: editData.privateKey,
+                },
+                body: JSON.stringify(payload),
+            });
+            if (!res.ok) throw new Error("Failed to save reservation.");
+            setEditing(false);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to save reservation.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    function handleShare() {
+        if (!reservation) return;
+        const url = `${window.location.origin}?publicKey=${reservation.publicKey}`;
+        navigator.clipboard.writeText(url);
+        alert("Share link copied to clipboard!");
+    }
+
+    return (
+        <Card className="h-[96%] w-full ml-8">
+            <CardHeader>
+                <CardTitle>Current Reservation</CardTitle>
+                <CardDescription>
+                    Reservation details and access keys.
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                <form className="space-y-3" onSubmit={e => { e.preventDefault(); if (editing) handleSave(); }}>
                     <div>
-                        <span className="font-semibold">Date:</span> {reservation.date}
+                        <Label>Date:</Label>
+                        <Input name="date" value={editing && editData ? editData.date : reservation.date} onChange={handleChange} readOnly={!isPrivate || !editing} />
                     </div>
                     <div>
-                        <span className="font-semibold">Time:</span> {reservation.startTime} - {reservation.endTime}
+                        <Label>Time:</Label>
+                        <div className="flex gap-2">
+                            <Input name="startTime" value={editing && editData ? editData.startTime : reservation.startTime} onChange={handleChange} readOnly={!isPrivate || !editing} className="w-24" />
+                            <span>-</span>
+                            <Input name="endTime" value={editing && editData ? editData.endTime : reservation.endTime} onChange={handleChange} readOnly={!isPrivate || !editing} className="w-24" />
+                        </div>
                     </div>
                     <div>
-                        <span className="font-semibold">Room:</span> {reservation.room}
+                        <Label>Room:</Label>
+                        <Input name="room" value={roomDisplay} readOnly />
                     </div>
+                    {featuresDisplay && (
+                        <div>
+                            <Label>Features:</Label> <div>{featuresDisplay}</div>
+                        </div>
+                    )}
                     <div>
-                        <span className="font-semibold">Description:</span> {reservation.description}
+                        <Label>Description:</Label>
+                        <Textarea name="description" value={editing && editData ? editData.description : reservation.description} onChange={handleChange} readOnly={!isPrivate || !editing} />
                     </div>
                     <div>
-                        <span className="font-semibold">Participants:</span> {reservation.participants}
+                        <Label>Participants:</Label>
+                        <Textarea name="participants" value={editing && editData ? editData.participants : reservation.participants} onChange={handleChange} readOnly={!isPrivate || !editing} />
                     </div>
                     <div>
-                        <span className="font-semibold">Reservation ID:</span> {reservation.id}
+                        <Label>Reservation ID:</Label> <Input value={reservation.id} readOnly />
                     </div>
                     <div>
-                        <span className="font-semibold">Private Key:</span> {reservation.privateKey}
+                        <Label>Private Key:</Label> <Input value={reservation.privateKey} readOnly />
                     </div>
                     <div>
-                        <span className="font-semibold">Public Key:</span> {reservation.publicKey}
+                        <Label>Public Key:</Label> <Input value={reservation.publicKey} readOnly />
                     </div>
-                </CardContent>
-            </Card>
-        )
-            ;
-    }
+                    {error && <div className="text-red-500 text-xs">{error}</div>}
+                    <div className="flex gap-2 mt-4">
+                        {isPrivate ? (
+                            editing ? (
+                                <>
+                                    <Button type="submit" disabled={saving}>{saving ? "Saving..." : "Save"}</Button>
+                                    <Button type="button" variant="secondary" onClick={() => { setEditing(false); setEditData(reservation); }}>Cancel</Button>
+                                </>
+                            ) : (
+                                <>
+                                    <Button type="button" onClick={() => { setEditing(true); setEditData(reservation); }}>Edit</Button>
+                                    <Button type="button" variant="secondary" onClick={handleShare}>Share</Button>
+                                </>
+                            )
+                        ) : (
+                            <Button type="button" onClick={handleShare}>Share</Button>
+                        )}
+                    </div>
+                </form>
+            </CardContent>
+        </Card>
+    );
 }
\ No newline at end of file

From f0c820686de54668e89a1f545e39b6582c78acb0 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Fri, 13 Jun 2025 19:47:51 +0200
Subject: [PATCH 12/27] Removes unused React logo asset, updates theme styles
 and color tokens, improves `AccessKeys` error handling with toast
 notifications, and enhances app layout with `Toaster` integration.

---
 ...rtiApplication.run.xml => Backend.run.xml} |  2 +-
 .../frontend/public/github-logo-dark.svg      |  2 +-
 .../frontend/public/github-logo-light.svg     |  2 +-
 OrariAperti/frontend/src/App.tsx              |  2 ++
 OrariAperti/frontend/src/assets/react.svg     |  1 -
 .../frontend/src/components/AccessKeys.tsx    |  6 ++--
 .../frontend/src/components/Footer.tsx        |  2 +-
 .../frontend/src/components/Header.tsx        |  2 +-
 OrariAperti/frontend/src/index.css            | 30 +++++++++++--------
 9 files changed, 26 insertions(+), 23 deletions(-)
 rename OrariAperti/backend/.run/{OrariApertiApplication.run.xml => Backend.run.xml} (70%)
 delete mode 100644 OrariAperti/frontend/src/assets/react.svg

diff --git a/OrariAperti/backend/.run/OrariApertiApplication.run.xml b/OrariAperti/backend/.run/Backend.run.xml
similarity index 70%
rename from OrariAperti/backend/.run/OrariApertiApplication.run.xml
rename to OrariAperti/backend/.run/Backend.run.xml
index 5591567..ca2e9b0 100644
--- a/OrariAperti/backend/.run/OrariApertiApplication.run.xml
+++ b/OrariAperti/backend/.run/Backend.run.xml
@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="OrariApertiApplication" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot" nameIsGenerated="true">
+  <configuration default="false" name="Backend" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot">
     <option name="FRAME_DEACTIVATION_UPDATE_POLICY" value="UpdateClassesAndResources" />
     <module name="OrariAperti" />
     <option name="SPRING_BOOT_MAIN_CLASS" value="ims.orariaperti.OrariApertiApplication" />
diff --git a/OrariAperti/frontend/public/github-logo-dark.svg b/OrariAperti/frontend/public/github-logo-dark.svg
index f77322b..b9f24c1 100644
--- a/OrariAperti/frontend/public/github-logo-dark.svg
+++ b/OrariAperti/frontend/public/github-logo-dark.svg
@@ -1 +1 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#FFF"/></svg>
\ No newline at end of file
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#7f22fe"/></svg>
\ No newline at end of file
diff --git a/OrariAperti/frontend/public/github-logo-light.svg b/OrariAperti/frontend/public/github-logo-light.svg
index 45ca7bb..b9f24c1 100644
--- a/OrariAperti/frontend/public/github-logo-light.svg
+++ b/OrariAperti/frontend/public/github-logo-light.svg
@@ -1 +1 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#000"/></svg>
\ No newline at end of file
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#7f22fe"/></svg>
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/App.tsx b/OrariAperti/frontend/src/App.tsx
index 05d6d7a..84c24b7 100644
--- a/OrariAperti/frontend/src/App.tsx
+++ b/OrariAperti/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import {ThemeProvider} from "@/components/ui/theme-provider.tsx";
 import Header from "@/components/Header.tsx";
 import Main from "@/components/Main.tsx";
 import Footer from "@/components/Footer.tsx";
+import {Toaster} from "@/components/ui/sonner.tsx";
 
 
 function App() {
@@ -12,6 +13,7 @@ function App() {
             <Header/>
             <Main/>
             <Footer/>
+            <Toaster/>
         </ThemeProvider>
     </>
   )
diff --git a/OrariAperti/frontend/src/assets/react.svg b/OrariAperti/frontend/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/OrariAperti/frontend/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/AccessKeys.tsx b/OrariAperti/frontend/src/components/AccessKeys.tsx
index 40db254..f1e14cc 100644
--- a/OrariAperti/frontend/src/components/AccessKeys.tsx
+++ b/OrariAperti/frontend/src/components/AccessKeys.tsx
@@ -11,16 +11,15 @@ import {Label} from "@/components/ui/label.tsx";
 import {Button} from "@/components/ui/button.tsx";
 import { useState } from "react";
 import type { Reservation } from "@/types/types";
+import { toast } from "sonner";
 
 export default function AccessKeys({ onReservationLoaded }: { onReservationLoaded?: (reservation: Reservation) => void }) {
     const [privateKey, setPrivateKey] = useState("");
     const [publicKey, setPublicKey] = useState("");
     const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
 
     async function handleSubmit(e: React.FormEvent) {
         e.preventDefault();
-        setError(null);
         setLoading(true);
         try {
             const headers: Record<string, string> = { "Content-Type": "application/json" };
@@ -38,7 +37,7 @@ export default function AccessKeys({ onReservationLoaded }: { onReservationLoade
         } catch (err: unknown) {
             let message = "Failed to load reservation.";
             if (err instanceof Error) message = err.message;
-            setError(message);
+            toast.error(message, {dismissible: true, duration: 4000});
         } finally {
             setLoading(false);
         }
@@ -76,7 +75,6 @@ export default function AccessKeys({ onReservationLoaded }: { onReservationLoade
                                     onChange={e => setPublicKey(e.target.value)}
                                 />
                             </div>
-                            {error && <div className="text-red-500 text-xs">{error}</div>}
                         </div>
                     </CardContent>
                     <CardFooter className={"flex-col gap-2"}>
diff --git a/OrariAperti/frontend/src/components/Footer.tsx b/OrariAperti/frontend/src/components/Footer.tsx
index 25cd7f1..070daf2 100644
--- a/OrariAperti/frontend/src/components/Footer.tsx
+++ b/OrariAperti/frontend/src/components/Footer.tsx
@@ -6,7 +6,7 @@ import github_dark from "/github-logo-dark.svg";
 export default function Footer() {
     return (
         <>
-            <footer className="bg-secondary text-primary py-3">
+            <footer className="bg-secondary text-secondary-foreground py-3">
                 <div className="container mx-auto text-center text-sm flex items-center justify-between px-3">
                     <div />
                     <p>&copy; {new Date().getFullYear()} OrariAperti. All rights reserved.</p>
diff --git a/OrariAperti/frontend/src/components/Header.tsx b/OrariAperti/frontend/src/components/Header.tsx
index d7343b3..3a896ae 100644
--- a/OrariAperti/frontend/src/components/Header.tsx
+++ b/OrariAperti/frontend/src/components/Header.tsx
@@ -6,7 +6,7 @@ import NewReservationDialog from "@/components/dialogs/NewReservationDialog.tsx"
 export default function Header() {
   return (
       <>
-          <header className={"flex items-center justify-between p-3 bg-secondary text-primary"}>
+          <header className={"flex items-center justify-between p-3 bg-secondary text-secondary-foreground"}>
               <div className={"flex items-center gap-2"}>
                 <img
                     className="hover:cursor-pointer hidden dark:block"
diff --git a/OrariAperti/frontend/src/index.css b/OrariAperti/frontend/src/index.css
index 8226754..c66ea4f 100644
--- a/OrariAperti/frontend/src/index.css
+++ b/OrariAperti/frontend/src/index.css
@@ -42,15 +42,15 @@
 }
 
 :root {
-  --radius: 0.5rem;
+  --radius: 0.65rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.606 0.25 292.717);
+  --primary-foreground: oklch(0.969 0.016 293.756);
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
@@ -60,7 +60,7 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
+  --ring: oklch(0.606 0.25 292.717);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -68,12 +68,12 @@
   --chart-5: oklch(0.769 0.188 70.08);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.606 0.25 292.717);
+  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
   --sidebar-accent: oklch(0.967 0.001 286.375);
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --sidebar-ring: oklch(0.606 0.25 292.717);
 }
 
 .dark {
@@ -83,8 +83,8 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
+  --primary: oklch(0.541 0.281 293.009);
+  --primary-foreground: oklch(0.969 0.016 293.756);
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.274 0.006 286.033);
@@ -94,7 +94,7 @@
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
+  --ring: oklch(0.541 0.281 293.009);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -102,14 +102,18 @@
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.541 0.281 293.009);
+  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
   --sidebar-accent: oklch(0.274 0.006 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --sidebar-ring: oklch(0.541 0.281 293.009);
 }
 
+::selection {
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
+}
 
 @layer base {
   * {

From 0a5e1b127dd809852c12f3ca0d49b236bf068006 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Fri, 13 Jun 2025 19:49:06 +0200
Subject: [PATCH 13/27] Adds sharing functionality and integrates
 `NewReservationDialog` component

Integrates `NewReservationDialog` for creating new reservations. Replaces alert with toast notification for share link copy action. Enhances UI with `CardAction` for better interaction design.
---
 .../src/components/CurrentReservation.tsx     | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index a2ef9cb..a208eff 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -1,10 +1,13 @@
-import {Card, CardHeader, CardTitle, CardContent, CardDescription} from "@/components/ui/card";
+import {Card, CardHeader, CardTitle, CardContent, CardDescription, CardAction} from "@/components/ui/card";
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
 import {Label} from "@/components/ui/label";
 import {Textarea} from "@/components/ui/textarea";
 import {useState} from "react";
 import type {Reservation} from "@/types/types";
+import NewReservationDialog from "@/components/dialogs/NewReservationDialog.tsx";
+import {toast} from "sonner";
+import {LucideLink} from "lucide-react";
 
 export default function CurrentReservation({reservation}: { reservation?: Reservation }) {
     const [editData, setEditData] = useState<Reservation | undefined>(reservation);
@@ -22,6 +25,9 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                         <CardDescription>
                             Please load your reservations to view the current reservation details.
                         </CardDescription>
+                        <CardAction>
+                            <NewReservationDialog/>
+                        </CardAction>
                     </CardHeader>
                 </Card>
             </>
@@ -30,7 +36,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
 
     // Render room details
     const room = reservation.room;
-    let roomDisplay = "";
+    let roomDisplay: string;
     let featuresDisplay = "";
     if (room && typeof room === "object" && "roomNumber" in room) {
         roomDisplay = (room as { roomNumber?: string }).roomNumber || (room as { id?: string }).id || "";
@@ -87,7 +93,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
         if (!reservation) return;
         const url = `${window.location.origin}?publicKey=${reservation.publicKey}`;
         navigator.clipboard.writeText(url);
-        alert("Share link copied to clipboard!");
+        toast.success("Share link copied to clipboard!");
     }
 
     return (
@@ -97,6 +103,9 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                 <CardDescription>
                     Reservation details and access keys.
                 </CardDescription>
+                <CardAction>
+                    <Button type="button" onClick={handleShare}>Share<LucideLink/></Button>
+                </CardAction>
             </CardHeader>
             <CardContent className="space-y-3">
                 <form className="space-y-3" onSubmit={e => { e.preventDefault(); if (editing) handleSave(); }}>
@@ -153,8 +162,9 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                 </>
                             )
                         ) : (
-                            <Button type="button" onClick={handleShare}>Share</Button>
-                        )}
+                            <></>
+                        )
+                        }
                     </div>
                 </form>
             </CardContent>

From 66fdd26d92a79b17e55e5bc65075c6aba0f3fe1b Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Sun, 15 Jun 2025 10:59:04 +0200
Subject: [PATCH 14/27] Refactors CurrentReservation and AccessKeys components
 for improved layout and user experience, updates error handling with toast
 notifications, and enhances form input types.

---
 .../frontend/src/components/AccessKeys.tsx    |  2 +-
 .../src/components/CurrentReservation.tsx     | 26 +++++++++----------
 OrariAperti/frontend/src/components/Main.tsx  |  2 +-
 .../dialogs/NewReservationDialog.tsx          | 15 ++++++-----
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/OrariAperti/frontend/src/components/AccessKeys.tsx b/OrariAperti/frontend/src/components/AccessKeys.tsx
index f1e14cc..001a343 100644
--- a/OrariAperti/frontend/src/components/AccessKeys.tsx
+++ b/OrariAperti/frontend/src/components/AccessKeys.tsx
@@ -77,7 +77,7 @@ export default function AccessKeys({ onReservationLoaded }: { onReservationLoade
                             </div>
                         </div>
                     </CardContent>
-                    <CardFooter className={"flex-col gap-2"}>
+                    <CardFooter className={"mt-[150%]"}>
                         <Button type={"submit"} variant={"default"} className={"w-full"} disabled={loading}>{loading ? "Loading..." : "Load Reservations"}</Button>
                     </CardFooter>
                 </form>
diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index a208eff..037dde5 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -7,7 +7,7 @@ import {useState} from "react";
 import type {Reservation} from "@/types/types";
 import NewReservationDialog from "@/components/dialogs/NewReservationDialog.tsx";
 import {toast} from "sonner";
-import {LucideLink} from "lucide-react";
+import {LucideEdit2, LucideLink} from "lucide-react";
 
 export default function CurrentReservation({reservation}: { reservation?: Reservation }) {
     const [editData, setEditData] = useState<Reservation | undefined>(reservation);
@@ -19,11 +19,11 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
     if (!reservation) {
         return (
             <>
-                <Card className="h-[96%] w-full ml-8">
+                <Card className="h-[108vh] w-full ml-8">
                     <CardHeader>
                         <CardTitle>No Current Reservation</CardTitle>
                         <CardDescription>
-                            Please load your reservations to view the current reservation details.
+                            Please enter the provided keys on the Access Key Panel or create a new Reservation
                         </CardDescription>
                         <CardAction>
                             <NewReservationDialog/>
@@ -101,17 +101,17 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
             <CardHeader>
                 <CardTitle>Current Reservation</CardTitle>
                 <CardDescription>
-                    Reservation details and access keys.
+                    Reservation details for the provided Access Key
                 </CardDescription>
                 <CardAction>
-                    <Button type="button" onClick={handleShare}>Share<LucideLink/></Button>
+                    <Button type="button" onClick={handleShare}><LucideLink/>Share</Button>
                 </CardAction>
             </CardHeader>
             <CardContent className="space-y-3">
                 <form className="space-y-3" onSubmit={e => { e.preventDefault(); if (editing) handleSave(); }}>
                     <div>
                         <Label>Date:</Label>
-                        <Input name="date" value={editing && editData ? editData.date : reservation.date} onChange={handleChange} readOnly={!isPrivate || !editing} />
+                        <Input type={"date"} name="date" value={editing && editData ? editData.date : reservation.date} onChange={handleChange} readOnly={!isPrivate || !editing} />
                     </div>
                     <div>
                         <Label>Time:</Label>
@@ -138,12 +138,11 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                         <Label>Participants:</Label>
                         <Textarea name="participants" value={editing && editData ? editData.participants : reservation.participants} onChange={handleChange} readOnly={!isPrivate || !editing} />
                     </div>
-                    <div>
-                        <Label>Reservation ID:</Label> <Input value={reservation.id} readOnly />
-                    </div>
-                    <div>
-                        <Label>Private Key:</Label> <Input value={reservation.privateKey} readOnly />
-                    </div>
+                    {reservation.privateKey && 
+                        <div>
+                            <Label>Private Key:</Label> <Input value={reservation.privateKey} readOnly />
+                        </div>
+                    }
                     <div>
                         <Label>Public Key:</Label> <Input value={reservation.publicKey} readOnly />
                     </div>
@@ -157,8 +156,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                 </>
                             ) : (
                                 <>
-                                    <Button type="button" onClick={() => { setEditing(true); setEditData(reservation); }}>Edit</Button>
-                                    <Button type="button" variant="secondary" onClick={handleShare}>Share</Button>
+                                    <Button type="button" onClick={() => { setEditing(true); setEditData(reservation); }}><LucideEdit2/>Edit</Button>
                                 </>
                             )
                         ) : (
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index 61c2568..4dd6478 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -7,7 +7,7 @@ export default function MainUIOnly() {
   const [reservation, setReservation] = useState<Reservation | undefined>(undefined);
 
   return (
-      <main className="container mx-auto px-2 sm:px-6 pt-6 h-screen min-h-screen flex flex-row items-center w-full">
+      <main className="container mx-auto p-6 min-h-screen flex flex-row items-center w-full">
           <AccessKeys onReservationLoaded={setReservation}/>
           <CurrentReservation reservation={reservation}/>
       </main>
diff --git a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
index 3c4d19f..ef1775c 100644
--- a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
+++ b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
@@ -6,7 +6,7 @@ import {Calendar} from "@/components/ui/calendar.tsx";
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
 import {Textarea} from "@/components/ui/textarea.tsx";
 import {Input} from "@/components/ui/input.tsx";
-import {useForm} from "react-hook-form";
+import {type FieldErrors, useForm} from "react-hook-form";
 import type {ReservationDTO} from "@/types/types.ts";
 import axios from "axios";
 import {
@@ -20,6 +20,7 @@ import {
     DialogClose
 } from "@/components/ui/dialog";
 import {format} from "date-fns";
+import {toast} from "sonner";
 
 export default function NewReservationDialog() {
     const { register, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm<ReservationDTO>({
@@ -33,7 +34,7 @@ export default function NewReservationDialog() {
             const start = data.startTime;
             const end = data.endTime;
             if (start >= end) {
-                alert("Start time must be before end time.");
+                toast.error("Start time must be before end time.");
                 return;
             }
         }
@@ -41,7 +42,7 @@ export default function NewReservationDialog() {
         // Prepare payload for backend
         const payload = {
             ...data,
-            room: parseInt(data.room as any, 10),
+            room: parseInt(data.room as never, 10),
             date: data.date, // already YYYY-MM-DD
             startTime: data.startTime, // already HH:mm
             endTime: data.endTime, // already HH:mm
@@ -51,11 +52,11 @@ export default function NewReservationDialog() {
 
         try {
             const response = await axios.post(import.meta.env.VITE_APP_BACKEND_URL+ "/api/reservation", payload);
-            alert("Reservation created! Keys in response.");
+            toast.error("Reservation created! Keys in response.");
             console.log(response.data);
             reset();
         } catch (error) {
-            alert("Failed to create reservation");
+            toast.error("Failed to create reservation");
             console.error(error);
         }
     };
@@ -66,7 +67,7 @@ export default function NewReservationDialog() {
                 <DialogTrigger asChild>
                     <Button>
                         <LucideEdit />
-                        <span className="hidden sm:inline pl-2">Create Reservation</span>
+                        <span className="hidden sm:inline">Create Reservation</span>
                     </Button>
                 </DialogTrigger>
                 <DialogContent className="sm:max-w-2xl">
@@ -105,7 +106,7 @@ function NewReservation({
     register: ReturnType<typeof useForm<ReservationDTO>>["register"],
     watch: ReturnType<typeof useForm<ReservationDTO>>["watch"],
     setValue: ReturnType<typeof useForm<ReservationDTO>>["setValue"],
-    errors: any,
+    errors: FieldErrors<ReservationDTO>,
 }) {
     return (
         <>

From 0e4cdf50e086354397ce9069acd653d77d7a0c73 Mon Sep 17 00:00:00 2001
From: nano <df@proconsis.ch>
Date: Sun, 15 Jun 2025 17:58:49 +0200
Subject: [PATCH 15/27] reverted github logo and adjusted card heights

---
 OrariAperti/frontend/public/github-logo-dark.svg   | 2 +-
 OrariAperti/frontend/public/github-logo-light.svg  | 2 +-
 OrariAperti/frontend/src/components/AccessKeys.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/OrariAperti/frontend/public/github-logo-dark.svg b/OrariAperti/frontend/public/github-logo-dark.svg
index b9f24c1..d5e6491 100644
--- a/OrariAperti/frontend/public/github-logo-dark.svg
+++ b/OrariAperti/frontend/public/github-logo-dark.svg
@@ -1 +1 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#7f22fe"/></svg>
\ No newline at end of file
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/OrariAperti/frontend/public/github-logo-light.svg b/OrariAperti/frontend/public/github-logo-light.svg
index b9f24c1..45ca7bb 100644
--- a/OrariAperti/frontend/public/github-logo-light.svg
+++ b/OrariAperti/frontend/public/github-logo-light.svg
@@ -1 +1 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#7f22fe"/></svg>
\ No newline at end of file
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/AccessKeys.tsx b/OrariAperti/frontend/src/components/AccessKeys.tsx
index 001a343..eb3f3cd 100644
--- a/OrariAperti/frontend/src/components/AccessKeys.tsx
+++ b/OrariAperti/frontend/src/components/AccessKeys.tsx
@@ -45,7 +45,7 @@ export default function AccessKeys({ onReservationLoaded }: { onReservationLoade
 
     return (
         <>
-            <Card className={"h-[96%] w-[30%]"}>
+            <Card className={"h-[108vh] w-[30%]"}>
                 <CardHeader>
                     <CardTitle>Access Keys</CardTitle>
                     <CardDescription>Enter your Access Keys to view or edit your reservations.</CardDescription>

From 92855994f1e3d2b89571f91304b84f5ac4c4156c Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Sun, 15 Jun 2025 18:29:07 +0200
Subject: [PATCH 16/27] Standardizes room feature names and enhances
 reservation logic

- Updates room feature names in the backend API documentation for consistency and readability.
- Expands participant validation in the backend to support additional character sets.
- Improves frontend reservation creation with dynamic room features, real-time validation, and better error handling.
- Refactors UI components for enhanced responsiveness and accessibility across devices.
- Adds room feature badges and integrates key handling for better user feedback.
- Updates type definitions to align with backend changes and improve type safety.
---
 OrariAperti/backend/backend-openapi.yaml      |  32 +-
 .../controller/ReservationController.java     |   2 +-
 .../frontend/src/components/AccessKeys.tsx    |  42 ++-
 .../src/components/CurrentReservation.tsx     |  14 +-
 .../frontend/src/components/FeatureBadge.tsx  |  53 +++
 OrariAperti/frontend/src/components/Main.tsx  |  12 +-
 .../dialogs/NewReservationDialog.tsx          | 333 +++++++++++++-----
 .../src/components/ui/mode-toggle.tsx         |  10 +-
 OrariAperti/frontend/src/types/types.ts       |  42 ++-
 9 files changed, 390 insertions(+), 150 deletions(-)
 create mode 100644 OrariAperti/frontend/src/components/FeatureBadge.tsx

diff --git a/OrariAperti/backend/backend-openapi.yaml b/OrariAperti/backend/backend-openapi.yaml
index 2975260..e55e3ba 100644
--- a/OrariAperti/backend/backend-openapi.yaml
+++ b/OrariAperti/backend/backend-openapi.yaml
@@ -184,22 +184,22 @@ components:
     RoomFeatures:
       type: string
       enum:
-        - BEAMER
-        - WATER_SOURCE
-        - WHITEBOARD
-        - AIR_CONDITIONING
-        - PROJECTOR_SCREEN
-        - SPEAKER_SYSTEM
-        - VIDEO_CONFERENCING
-        - WIFI
-        - POWER_OUTLETS
-        - NATURAL_LIGHT
-        - SOUNDPROOFING
-        - SMART_BOARD
-        - TELEPHONE
-        - COFFEE_MACHINE
-        - PRINTER
-        - LOCKERS
+        - "Beamer"
+        - "Water Tap"
+        - "Whiteboard"
+        - "Air Conditioning"
+        - "Projector Screen"
+        - "Speaker System"
+        - "Video Conferencing"
+        - "WiFi"
+        - "Power Outlets"
+        - "Natural Light"
+        - "Soundproofing"
+        - "Smart Board"
+        - "Telephone"
+        - "Coffee Machine"
+        - "Printer"
+        - "Lockers"
     Reservation:
       type: object
       properties:
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
index 8f171d8..019c0d5 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
@@ -57,7 +57,7 @@ public Object getReservations(@RequestHeader(required = false) UUID publickey, @
     @PostMapping
     public ResponseEntity<Object> createReservation(@RequestBody ReservationDTO reservationDTO) {
         try {
-            if (!reservationDTO.getParticipants().matches("^[A-Za-z\\s]+(,\\s*[A-Za-z\\s]+)*$")) {
+            if (!reservationDTO.getParticipants().matches("^[A-Za-zÄäÖöÜüßèéêç ]+(, *[A-Za-zÄäÖöÜüßèéêç ]+)*$")) {
                 throw new Exception("Participants field must only contain letters (A-Z, a-z) separated by commas.");
             }
             Room room = roomRepository.findById(reservationDTO.getRoomId()).orElse(null);
diff --git a/OrariAperti/frontend/src/components/AccessKeys.tsx b/OrariAperti/frontend/src/components/AccessKeys.tsx
index 001a343..b92f35d 100644
--- a/OrariAperti/frontend/src/components/AccessKeys.tsx
+++ b/OrariAperti/frontend/src/components/AccessKeys.tsx
@@ -9,17 +9,34 @@ import {
 import {Input} from "@/components/ui/input.tsx";
 import {Label} from "@/components/ui/label.tsx";
 import {Button} from "@/components/ui/button.tsx";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { Reservation } from "@/types/types";
 import { toast } from "sonner";
 
-export default function AccessKeys({ onReservationLoaded }: { onReservationLoaded?: (reservation: Reservation) => void }) {
-    const [privateKey, setPrivateKey] = useState("");
-    const [publicKey, setPublicKey] = useState("");
+export default function AccessKeys({
+    privateKey: initialPrivateKey,
+    publicKey: initialPublicKey,
+    onReservationLoaded,
+    onLoad,
+}: {
+    privateKey?: string;
+    publicKey?: string;
+    onReservationLoaded?: (reservation: Reservation) => void;
+    onLoad?: () => void;
+}) {
+    const [privateKey, setPrivateKey] = useState(initialPrivateKey || "");
+    const [publicKey, setPublicKey] = useState(initialPublicKey || "");
     const [loading, setLoading] = useState(false);
 
-    async function handleSubmit(e: React.FormEvent) {
-        e.preventDefault();
+    useEffect(() => {
+        if ((initialPrivateKey || initialPublicKey) && !loading) {
+            handleSubmit();
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialPrivateKey, initialPublicKey]);
+
+    async function handleSubmit(e?: React.FormEvent) {
+        if (e) e.preventDefault();
         setLoading(true);
         try {
             const headers: Record<string, string> = { "Content-Type": "application/json" };
@@ -31,6 +48,7 @@ export default function AccessKeys({ onReservationLoaded }: { onReservationLoade
             const data = await res.json();
             if (data.reservationDetails) {
                 onReservationLoaded?.({ ...data.reservationDetails, privateKey: data.privateKey, publicKey: data.publicKey });
+                onLoad?.();
             } else {
                 throw new Error("No reservation details found.");
             }
@@ -45,13 +63,13 @@ export default function AccessKeys({ onReservationLoaded }: { onReservationLoade
 
     return (
         <>
-            <Card className={"h-[96%] w-[30%]"}>
+            <Card className="h-full w-full">
                 <CardHeader>
                     <CardTitle>Access Keys</CardTitle>
                     <CardDescription>Enter your Access Keys to view or edit your reservations.</CardDescription>
                 </CardHeader>
-                <form className="flex flex-col flex-1" onSubmit={handleSubmit}>
-                    <CardContent className="flex-1">
+                <form className="flex flex-col h-full" onSubmit={handleSubmit}>
+                    <CardContent className="flex-grow">
                         <div className="grid gap-4">
                             <div className="grid gap-2">
                                 <Label htmlFor="privateKey">Private Key</Label>
@@ -77,11 +95,11 @@ export default function AccessKeys({ onReservationLoaded }: { onReservationLoade
                             </div>
                         </div>
                     </CardContent>
-                    <CardFooter className={"mt-[150%]"}>
-                        <Button type={"submit"} variant={"default"} className={"w-full"} disabled={loading}>{loading ? "Loading..." : "Load Reservations"}</Button>
+                    <CardFooter className="mt-4">
+                        <Button type="submit" variant="default" className="w-full" disabled={loading}>{loading ? "Loading..." : "Load Reservations"}</Button>
                     </CardFooter>
                 </form>
             </Card>
         </>
     );
-}
\ No newline at end of file
+}
diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index 037dde5..01d7dc0 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -19,7 +19,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
     if (!reservation) {
         return (
             <>
-                <Card className="h-[108vh] w-full ml-8">
+                <Card className="h-full w-full">
                     <CardHeader>
                         <CardTitle>No Current Reservation</CardTitle>
                         <CardDescription>
@@ -97,7 +97,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
     }
 
     return (
-        <Card className="h-[96%] w-full ml-8">
+        <Card className="h-full w-full">
             <CardHeader>
                 <CardTitle>Current Reservation</CardTitle>
                 <CardDescription>
@@ -147,16 +147,16 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                         <Label>Public Key:</Label> <Input value={reservation.publicKey} readOnly />
                     </div>
                     {error && <div className="text-red-500 text-xs">{error}</div>}
-                    <div className="flex gap-2 mt-4">
+                    <div className="flex gap-2 mt-4 w-full">
                         {isPrivate ? (
                             editing ? (
                                 <>
-                                    <Button type="submit" disabled={saving}>{saving ? "Saving..." : "Save"}</Button>
-                                    <Button type="button" variant="secondary" onClick={() => { setEditing(false); setEditData(reservation); }}>Cancel</Button>
+                                    <Button className={"w-1/2"} type="submit" disabled={saving}>{saving ? "Saving..." : "Save"}</Button>
+                                    <Button className={"w-1/2"} type="button" variant="secondary" onClick={() => { setEditing(false); setEditData(reservation); }}>Cancel</Button>
                                 </>
                             ) : (
                                 <>
-                                    <Button type="button" onClick={() => { setEditing(true); setEditData(reservation); }}><LucideEdit2/>Edit</Button>
+                                    <Button className={"w-full"} type="button" onClick={() => { setEditing(true); setEditData(reservation); }}><LucideEdit2/>Edit</Button>
                                 </>
                             )
                         ) : (
@@ -168,4 +168,4 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
             </CardContent>
         </Card>
     );
-}
\ No newline at end of file
+}
diff --git a/OrariAperti/frontend/src/components/FeatureBadge.tsx b/OrariAperti/frontend/src/components/FeatureBadge.tsx
new file mode 100644
index 0000000..a7eea40
--- /dev/null
+++ b/OrariAperti/frontend/src/components/FeatureBadge.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import {
+  Projector,
+  Droplet,
+  Clipboard,
+  Snowflake,
+  Monitor,
+  Volume2,
+  Video,
+  Wifi,
+  Plug,
+  Sun,
+  Shield,
+  MonitorSmartphone,
+  Phone,
+  Coffee,
+  Printer,
+  Lock,
+} from "lucide-react";
+import {Badge} from "@/components/ui/badge.tsx";
+import type {RoomFeature} from "@/types/types.ts";
+
+const featureIconMap: Record<RoomFeature, React.ElementType> = {
+  "Beamer": Projector,
+  "Water Tap": Droplet,
+  "Whiteboard": Clipboard,
+  "Air Conditioning": Snowflake,
+  "Projector Screen": Monitor,
+  "Speaker System": Volume2,
+  "Video Conferencing": Video,
+  "WiFi": Wifi,
+  "Power Outlets": Plug,
+  "Natural Light": Sun,
+  "Soundproofing": Shield,
+  "Smart Board": MonitorSmartphone,
+  "Telephone": Phone,
+  "Coffee Machine": Coffee,
+  "Printer": Printer,
+  "Lockers": Lock,
+};
+
+const validFeatures = Object.keys(featureIconMap);
+
+export function FeatureBadge({ feature }: { feature: string }) {
+  const isValid = validFeatures.includes(feature);
+  const Icon = isValid ? featureIconMap[feature as RoomFeature] : undefined;
+  return (
+    <Badge variant={"outline"}>
+      {Icon && <Icon size={16} />}
+      {feature.replace(/_/g, " ")}
+    </Badge>
+  );
+}
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index 4dd6478..59c064a 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -7,9 +7,15 @@ export default function MainUIOnly() {
   const [reservation, setReservation] = useState<Reservation | undefined>(undefined);
 
   return (
-      <main className="container mx-auto p-6 min-h-screen flex flex-row items-center w-full">
-          <AccessKeys onReservationLoaded={setReservation}/>
-          <CurrentReservation reservation={reservation}/>
+      <main className="container mx-auto p-6 min-h-screen w-full">
+          <div className="flex flex-col md:flex-row gap-6 min-h-[calc(100vh-100px)]">
+              <div className="w-full md:w-1/3 flex-shrink-0 h-full md:h-auto">
+                  <AccessKeys onReservationLoaded={setReservation}/>
+              </div>
+              <div className="w-full md:w-2/3 flex-grow h-full md:h-auto">
+                  <CurrentReservation reservation={reservation}/>
+              </div>
+          </div>
       </main>
   );
 }
diff --git a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
index ef1775c..adb384d 100644
--- a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
+++ b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
@@ -1,71 +1,123 @@
-import {Label} from "@/components/ui/label.tsx";
-import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover.tsx";
-import {Button} from "@/components/ui/button.tsx";
-import {CalendarIcon, LucideEdit} from "lucide-react";
-import {Calendar} from "@/components/ui/calendar.tsx";
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
-import {Textarea} from "@/components/ui/textarea.tsx";
-import {Input} from "@/components/ui/input.tsx";
-import {type FieldErrors, useForm} from "react-hook-form";
-import type {ReservationDTO} from "@/types/types.ts";
+import { useEffect, useState } from "react";
+import { Label } from "@/components/ui/label.tsx";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { CalendarIcon, LucideEdit } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar.tsx";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select.tsx";
+import { Textarea } from "@/components/ui/textarea.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { type FieldErrors, useForm } from "react-hook-form";
+import type { ReservationDTO, Room } from "@/types/types.ts";
 import axios from "axios";
 import {
     Dialog,
+    DialogClose,
     DialogContent,
     DialogDescription,
+    DialogFooter,
     DialogHeader,
-    DialogTrigger,
     DialogTitle,
-    DialogFooter, 
-    DialogClose
+    DialogTrigger,
 } from "@/components/ui/dialog";
-import {format} from "date-fns";
-import {toast} from "sonner";
+import { format } from "date-fns";
+import { toast } from "sonner";
+import {FeatureBadge} from "../FeatureBadge.tsx";
+import AccessKeys from "@/components/AccessKeys"; // adjust path as needed
 
 export default function NewReservationDialog() {
-    const { register, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm<ReservationDTO>({
+    const {
+        register,
+        handleSubmit,
+        reset,
+        watch,
+        setValue,
+        formState: { errors },
+    } = useForm<ReservationDTO>({
         mode: "onBlur",
         reValidateMode: "onChange",
     });
 
+    const [rooms, setRooms] = useState<Room[]>([]);
+    const [loadingRooms, setLoadingRooms] = useState(false);
+    const [accessKeys, setAccessKeys] = useState<{privateKey: string, publicKey: string} | null>(null);
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    useEffect(() => {
+        setLoadingRooms(true);
+        axios
+            .get(import.meta.env.VITE_APP_BACKEND_URL + "/api/room")
+            .then((res) => setRooms(res.data))
+            .catch(() => toast.error("Failed to load rooms"))
+            .finally(() => setLoadingRooms(false));
+    }, []);
+
     const onSubmit = async (data: ReservationDTO) => {
-        // Validate startTime < endTime
-        if (data.startTime && data.endTime) {
-            const start = data.startTime;
-            const end = data.endTime;
-            if (start >= end) {
-                toast.error("Start time must be before end time.");
-                return;
-            }
+        if (data.startTime && data.endTime && data.startTime >= data.endTime) {
+            toast.error("Start time must be before end time.");
+            return;
+        }
+        if (!data.date) {
+            toast.error("Please select a date.");
+            return;
         }
-
-        // Prepare payload for backend
         const payload = {
             ...data,
-            room: parseInt(data.room as never, 10),
-            date: data.date, // already YYYY-MM-DD
-            startTime: data.startTime, // already HH:mm
-            endTime: data.endTime, // already HH:mm
+            roomId: data.roomId,
+            date: data.date,
+            startTime: data.startTime,
+            endTime: data.endTime,
             description: data.description,
             participants: data.participants,
         };
-
         try {
-            const response = await axios.post(import.meta.env.VITE_APP_BACKEND_URL+ "/api/reservation", payload);
-            toast.error("Reservation created! Keys in response.");
-            console.log(response.data);
+            const res = await axios.post(
+            import.meta.env.VITE_APP_BACKEND_URL + "/api/reservation",
+            payload
+            );
+            if (typeof res.data === "string") {
+            // Backend returned an error as a string
+            toast.error(res.data);
+            return;
+            }
+            toast.success("Reservation succesfully created!");
             reset();
-        } catch (error) {
-            toast.error("Failed to create reservation");
-            console.error(error);
+            setAccessKeys({
+            privateKey: res.data.privateKey,
+            publicKey: res.data.publicKey
+            });
+            setDialogOpen(false);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (error: any) {
+            const errorMessage =
+            error?.response?.data?.error ||
+            error?.response?.data?.message ||
+            (typeof error?.response?.data === "string" ? error.response.data : undefined) ||
+            "Failed to create reservation";
+            toast.error(errorMessage);
         }
     };
 
+    // When dialog closes, clear keys
+    useEffect(() => {
+        if (!dialogOpen) setAccessKeys(null);
+    }, [dialogOpen]);
+
     return (
         <>
-            <Dialog>
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                 <DialogTrigger asChild>
-                    <Button>
+                    <Button onClick={() => setDialogOpen(true)}>
                         <LucideEdit />
                         <span className="hidden sm:inline">Create Reservation</span>
                     </Button>
@@ -74,7 +126,8 @@ export default function NewReservationDialog() {
                     <DialogHeader>
                         <DialogTitle>Create a new Reservation</DialogTitle>
                         <DialogDescription>
-                            Fill out the form below to create a new reservation. Ensure all fields are filled out correctly.
+                            Fill out the form below to create a new reservation. Ensure all
+                            fields are filled out correctly.
                         </DialogDescription>
                     </DialogHeader>
                     <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
@@ -83,16 +136,27 @@ export default function NewReservationDialog() {
                             watch={watch}
                             setValue={setValue}
                             errors={errors}
+                            rooms={rooms}
+                            loadingRooms={loadingRooms}
                         />
                         <DialogFooter>
                             <DialogClose asChild>
                                 <Button variant={"secondary"}>Cancel</Button>
                             </DialogClose>
-                            <Button type="submit" className="w-full sm:w-auto">Create</Button>
+                            <Button type="submit" className="w-full sm:w-auto">
+                                Create
+                            </Button>
                         </DialogFooter>
                     </form>
                 </DialogContent>
             </Dialog>
+            {accessKeys && (
+                <AccessKeys
+                    privateKey={accessKeys.privateKey}
+                    publicKey={accessKeys.publicKey}
+                    onLoad={() => {/* Optionally trigger load logic here */}}
+                />
+            )}
         </>
     );
 }
@@ -102,12 +166,20 @@ function NewReservation({
     watch,
     setValue,
     errors,
+    rooms,
+    loadingRooms,
 }: {
-    register: ReturnType<typeof useForm<ReservationDTO>>["register"],
-    watch: ReturnType<typeof useForm<ReservationDTO>>["watch"],
-    setValue: ReturnType<typeof useForm<ReservationDTO>>["setValue"],
-    errors: FieldErrors<ReservationDTO>,
+    register: ReturnType<typeof useForm<ReservationDTO>>["register"];
+    watch: ReturnType<typeof useForm<ReservationDTO>>["watch"];
+    setValue: ReturnType<typeof useForm<ReservationDTO>>["setValue"];
+    errors: FieldErrors<ReservationDTO>;
+    rooms: Room[];
+    loadingRooms: boolean;
 }) {
+    // Get the selected roomId from the form state
+    const selectedRoomId = watch("roomId");
+    const selectedRoom = rooms.find((room) => room.id === selectedRoomId);
+
     return (
         <>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -122,60 +194,102 @@ function NewReservation({
                                 className="data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal"
                             >
                                 <CalendarIcon />
-                                {watch("date")
-                                    ? format(new Date(watch("date")), "PPP")
-                                    : <span>Pick a date</span>}
+                                {watch("date") ? (
+                                    format(new Date(watch("date")), "PPP")
+                                ) : (
+                                    <span>Pick a date</span>
+                                )}
                             </Button>
                         </PopoverTrigger>
                         <PopoverContent className="w-auto p-0">
                             <Calendar
                                 mode="single"
                                 selected={watch("date") ? new Date(watch("date")) : undefined}
-                                onSelect={date => {
+                                disabled={(date) =>
+                                    date < new Date() /* || date.getDay() === 0 || date.getDay() === 6*/ // TODO: Disable weekends if needed check with others
+                                }
+                                onSelect={(date) => {
                                     if (date) {
-                                        setValue("date", formatDateString(date), { shouldValidate: true });
+                                        setValue("date", formatDateString(date), {
+                                            shouldValidate: true,
+                                        });
                                     }
                                 }}
                             />
                         </PopoverContent>
                     </Popover>
-                    {errors.date && <span className="text-red-500 text-xs">{errors.date.message}</span>}
+                    {errors.date && (
+                        <span className="text-red-500 text-xs">{errors.date.message}</span>
+                    )}
                 </div>
                 {/* Room Field */}
                 <div>
                     <Label>Room</Label>
-                    <Select onValueChange={val => setValue("room", parseInt(val, 10), { shouldValidate: true })}>
-                        <SelectTrigger {...register("room", {
-                            required: "Room is required",
-                            validate: value => ["101", "102", "103", "201", "202"].includes(value.toString()) || "Invalid room"
-                        })}>
-                            <SelectValue placeholder="Select a room"/>
+                    <Select
+                        onValueChange={(val) =>
+                            setValue("roomId", val, { shouldValidate: true })
+                        }
+                        disabled={loadingRooms}
+                        value={selectedRoomId}
+                    >
+                        <SelectTrigger
+                            {...register("roomId", {
+                                required: "Room is required",
+                            })}
+                        >
+                            <span>
+                                {selectedRoom
+                                    ? `Room ${selectedRoom.roomNumber}`
+                                    : loadingRooms
+                                    ? "Loading rooms..."
+                                    : "Select a room"}
+                            </span>
                         </SelectTrigger>
                         <SelectContent>
-                            <SelectItem value="101">Room 101</SelectItem>
-                            <SelectItem value="102">Room 102</SelectItem>
-                            <SelectItem value="103">Room 103</SelectItem>
-                            <SelectItem value="201">Room 201</SelectItem>
-                            <SelectItem value="202">Room 202</SelectItem>
+                            {rooms
+                                .slice()
+                                .sort((a, b) => Number(a.roomNumber) - Number(b.roomNumber))
+                                .map((room) => (
+                                    <SelectItem key={room.id} value={room.id}>
+                                        <div className="flex flex-col gap-1">
+                                            <span className="font-medium">Room {room.roomNumber}</span>
+                                            <div className="flex flex-wrap gap-1 mt-1">
+                                                {room.roomFeatures.map((feature) => (
+                                                    <FeatureBadge key={feature} feature={feature} />
+                                                ))}
+                                            </div>
+                                        </div>
+                                    </SelectItem>
+                                ))}
                         </SelectContent>
                     </Select>
-                    {errors.room && <span className="text-red-500 text-xs">{errors.room.message}</span>}
+                    {errors.roomId && (
+                        <span className="text-red-500 text-xs">
+                            {errors.roomId.message}
+                        </span>
+                    )}
                 </div>
                 {/* Start Time Field */}
                 <div>
                     <Label>Start Time</Label>
-                    <Select onValueChange={val => setValue("startTime", val, { shouldValidate: true })}>
-                        <SelectTrigger {...register("startTime", {
-                            required: "Start time is required",
-                            pattern: {
-                                value: /^([01]\d|2[0-3]):[0-5]\d$/,
-                                message: "Invalid time format"
-                            }
-                        })}>
-                            <SelectValue placeholder="Select start time"/>
+                    <Select
+                        onValueChange={(val) =>
+                            setValue("startTime", val, { shouldValidate: true })
+                        }
+                    >
+                        <SelectTrigger
+                            {...register("startTime", {
+                                required: "Start time is required",
+                                pattern: {
+                                    value: /^([01]\d|2[0-3]):[0-5]\d$/,
+                                    message: "Invalid time format",
+                                },
+                            })}
+                        >
+                            <SelectValue placeholder="Select start time" />
                         </SelectTrigger>
                         <SelectContent>
-                            {Array.from({length: 31}, (_, i) => {
+                            {Array.from({ length: 31 }, (_, i) => {
                                 const hour = 6 + Math.floor(i / 2);
                                 const minute = i % 2 === 0 ? "00" : "30";
                                 const time = `${hour.toString().padStart(2, "0")}:${minute}`;
@@ -187,23 +301,33 @@ function NewReservation({
                             })}
                         </SelectContent>
                     </Select>
-                    {errors.startTime && <span className="text-red-500 text-xs">{errors.startTime.message}</span>}
+                    {errors.startTime && (
+                        <span className="text-red-500 text-xs">
+                            {errors.startTime.message}
+                        </span>
+                    )}
                 </div>
                 {/* End Time Field */}
                 <div>
                     <Label>End Time</Label>
-                    <Select onValueChange={val => setValue("endTime", val, { shouldValidate: true })}>
-                        <SelectTrigger {...register("endTime", {
-                            required: "End time is required",
-                            pattern: {
-                                value: /^([01]\d|2[0-3]):[0-5]\d$/,
-                                message: "Invalid time format"
-                            }
-                        })}>
-                            <SelectValue placeholder="Select end time"/>
+                    <Select
+                        onValueChange={(val) =>
+                            setValue("endTime", val, { shouldValidate: true })
+                        }
+                    >
+                        <SelectTrigger
+                            {...register("endTime", {
+                                required: "End time is required",
+                                pattern: {
+                                    value: /^([01]\d|2[0-3]):[0-5]\d$/,
+                                    message: "Invalid time format",
+                                },
+                            })}
+                        >
+                            <SelectValue placeholder="Select end time" />
                         </SelectTrigger>
                         <SelectContent>
-                            {Array.from({length: 31}, (_, i) => {
+                            {Array.from({ length: 31 }, (_, i) => {
                                 const hour = 6 + Math.floor(i / 2);
                                 const minute = i % 2 === 0 ? "00" : "30";
                                 const time = `${hour.toString().padStart(2, "0")}:${minute}`;
@@ -215,7 +339,11 @@ function NewReservation({
                             })}
                         </SelectContent>
                     </Select>
-                    {errors.endTime && <span className="text-red-500 text-xs">{errors.endTime.message}</span>}
+                    {errors.endTime && (
+                        <span className="text-red-500 text-xs">
+                            {errors.endTime.message}
+                        </span>
+                    )}
                 </div>
             </div>
             {/* Description Field */}
@@ -224,12 +352,16 @@ function NewReservation({
                 <Textarea
                     {...register("description", {
                         required: "Description is required",
-                        maxLength: { value: 200, message: "Max 200 characters" }
+                        maxLength: { value: 200, message: "Max 200 characters" },
                     })}
                     placeholder="Enter a description for your reservation"
                     className="resize-none"
                 />
-                {errors.description && <span className="text-red-500 text-xs">{errors.description.message}</span>}
+                {errors.description && (
+                    <span className="text-red-500 text-xs">
+                        {errors.description.message}
+                    </span>
+                )}
                 <p className="text-sm text-muted-foreground">
                     Briefly describe the purpose of your reservation.
                 </p>
@@ -243,12 +375,16 @@ function NewReservation({
                         required: "Participants are required",
                         maxLength: { value: 255, message: "Max 255 characters" },
                         pattern: {
-                            value: /^[A-Za-zÄäÖöÜüß ,]+$/,
-                            message: "Only letters, spaces, and commas allowed"
-                        }
+                            value: /^[A-Za-zÄäÖöÜüßèéêç\s]+(,\s*[A-Za-zÄäÖöÜüßèéêç\s]+)*$/,
+                            message: "Only letters, spaces, and commas allowed",
+                        },
                     })}
                 />
-                {errors.participants && <span className="text-red-500 text-xs">{errors.participants.message}</span>}
+                {errors.participants && (
+                    <span className="text-red-500 text-xs">
+                        {errors.participants.message}
+                    </span>
+                )}
                 <p className="text-sm text-muted-foreground">
                     Enter participant names separated by commas (letters only).
                 </p>
@@ -257,10 +393,13 @@ function NewReservation({
     );
 }
 
-// fixes shadcn calendar which broke because of a different local date format then used in the calendar
 function formatDateString(dateString: string | Date): string {
-    const date = new Date(dateString)
-
-    // Generate yyyy-mm-dd date string
-    return date.toLocaleString('default', { year: 'numeric' }) + '-' + date.toLocaleString('default', { month: '2-digit' }) + '-' + date.toLocaleString('default', { day: '2-digit' })
-}
\ No newline at end of file
+    const date = new Date(dateString);
+    return (
+        date.toLocaleString("default", { year: "numeric" }) +
+        "-" +
+        date.toLocaleString("default", { month: "2-digit" }) +
+        "-" +
+        date.toLocaleString("default", { day: "2-digit" })
+    );
+}
diff --git a/OrariAperti/frontend/src/components/ui/mode-toggle.tsx b/OrariAperti/frontend/src/components/ui/mode-toggle.tsx
index 560075b..ad94336 100644
--- a/OrariAperti/frontend/src/components/ui/mode-toggle.tsx
+++ b/OrariAperti/frontend/src/components/ui/mode-toggle.tsx
@@ -1,4 +1,4 @@
-import { Moon, Sun } from "lucide-react"
+import {LucideComputer, Moon, Sun} from "lucide-react"
 
 import { Button } from "@/components/ui/button.tsx"
 import {
@@ -15,7 +15,7 @@ export function ModeToggle() {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="outline" className={"border-0 hover:cursor-pointer bg-secondary bg-input hover:bg-secondary hover:text-primary "} size="icon">
+                <Button variant="outline" className={"border-0 hover:cursor-pointer bg-secondary hover:bg-secondary hover:text-primary "} size="icon">
                     <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                     <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                     <span className="sr-only">Toggle theme</span>
@@ -23,13 +23,13 @@ export function ModeToggle() {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className={"w-32"}>
                 <DropdownMenuItem className={"hover:cursor-pointer"} onClick={() => setTheme("light")}>
-                    Light
+                    <Sun/>Light
                 </DropdownMenuItem>
                 <DropdownMenuItem className={"hover:cursor-pointer"} onClick={() => setTheme("dark")}>
-                    Dark
+                    <Moon/>Dark
                 </DropdownMenuItem>
                 <DropdownMenuItem className={"hover:cursor-pointer"} onClick={() => setTheme("system")}>
-                    System
+                    <LucideComputer/>System
                 </DropdownMenuItem>
             </DropdownMenuContent>
         </DropdownMenu>
diff --git a/OrariAperti/frontend/src/types/types.ts b/OrariAperti/frontend/src/types/types.ts
index 42d1282..daac4cd 100644
--- a/OrariAperti/frontend/src/types/types.ts
+++ b/OrariAperti/frontend/src/types/types.ts
@@ -1,14 +1,38 @@
 export interface ReservationDTO {
-    date: string; // format: "YYYY-MM-DD"
-    startTime: string; // format: "HH:mm"
-    endTime: string; // format: "HH:mm"
-    room: number;
+    date: string;
+    startTime: string;
+    endTime: string;
+    roomId: string; 
     description: string;
-    participants: string; // comma-separated participant names
+    participants: string;
 }
 
 export interface Reservation extends ReservationDTO {
-    id: string; // UUID
-    privateKey: string; // UUID
-    publicKey: string; // UUID
-}
\ No newline at end of file
+    id: string;
+    privateKey: string; 
+    publicKey: string;
+}
+
+export type Room = {
+    id: string;
+    roomNumber: string;
+    roomFeatures: string[];
+};
+
+export type RoomFeature =
+    | "Beamer"
+    | "Water Tap"
+    | "Whiteboard"
+    | "Air Conditioning"
+    | "Projector Screen"
+    | "Speaker System"
+    | "Video Conferencing"
+    | "WiFi"
+    | "Power Outlets"
+    | "Natural Light"
+    | "Soundproofing"
+    | "Smart Board"
+    | "Telephone"
+    | "Coffee Machine"
+    | "Printer"
+    | "Lockers";
\ No newline at end of file

From 0f050bab3f87749b56287188fe022978ca5cea0c Mon Sep 17 00:00:00 2001
From: nano <df@proconsis.ch>
Date: Sun, 15 Jun 2025 19:47:45 +0200
Subject: [PATCH 17/27] added delete

---
 .../src/components/CurrentReservation.tsx     | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index 01d7dc0..fb172a8 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -7,12 +7,13 @@ import {useState} from "react";
 import type {Reservation} from "@/types/types";
 import NewReservationDialog from "@/components/dialogs/NewReservationDialog.tsx";
 import {toast} from "sonner";
-import {LucideEdit2, LucideLink} from "lucide-react";
+import {LucideEdit2, LucideLink, Trash2} from "lucide-react";
 
 export default function CurrentReservation({reservation}: { reservation?: Reservation }) {
     const [editData, setEditData] = useState<Reservation | undefined>(reservation);
     const [editing, setEditing] = useState(false);
     const [saving, setSaving] = useState(false);
+    const [deleting, setDeleting] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const isPrivate = !!reservation?.privateKey;
 
@@ -96,6 +97,28 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
         toast.success("Share link copied to clipboard!");
     }
 
+    async function handleDelete() {
+        if (!reservation) return;
+        setDeleting(true);
+        setError(null);
+        try {
+            const res = await fetch(`${import.meta.env.VITE_APP_BACKEND_URL}/api/reservation/${reservation.id}`, {
+                method: "DELETE",
+                headers: {
+                    privateKey: reservation.privateKey,
+                },
+            });
+            if (!res.ok) throw new Error("Failed to delete reservation.");
+            toast.success("Reservation delted successfully!");
+
+            // Redirect that damn user back to the homepage :OO
+            window.location.href = "/";
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to delete reservation.");
+            toast.error("Failed to delete reservation.");
+        }
+    }
+
     return (
         <Card className="h-full w-full">
             <CardHeader>
@@ -156,7 +179,10 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                 </>
                             ) : (
                                 <>
-                                    <Button className={"w-full"} type="button" onClick={() => { setEditing(true); setEditData(reservation); }}><LucideEdit2/>Edit</Button>
+                                    <div className="flex gap-2 w-full">
+                                        <Button className={"w-1/2"} type="button" onClick={() => { setEditing(true); setEditData(reservation); }}><LucideEdit2/>Edit</Button>
+                                        <Button className={"w-1/2"} type="button" variant="destructive" onClick={handleDelete} disabled={deleting}><Trash2/>Delete</Button>
+                                    </div>
                                 </>
                             )
                         ) : (

From 54be8b540b44ca9bfeddb3a89755b0dc974279b3 Mon Sep 17 00:00:00 2001
From: nano <df@proconsis.ch>
Date: Sun, 15 Jun 2025 19:48:35 +0200
Subject: [PATCH 18/27] added a neat delete button animation

---
 OrariAperti/frontend/src/components/CurrentReservation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index fb172a8..21932a2 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -181,7 +181,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                 <>
                                     <div className="flex gap-2 w-full">
                                         <Button className={"w-1/2"} type="button" onClick={() => { setEditing(true); setEditData(reservation); }}><LucideEdit2/>Edit</Button>
-                                        <Button className={"w-1/2"} type="button" variant="destructive" onClick={handleDelete} disabled={deleting}><Trash2/>Delete</Button>
+                                        <Button className={"w-1/2"} type="button" variant="destructive" onClick={handleDelete} disabled={deleting}><Trash2/>{deleting ? "Deleting..." : "Delete"}</Button>
                                     </div>
                                 </>
                             )

From d32e74abd9d0d341998c4d43a0243766238092b4 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Mon, 16 Jun 2025 14:28:34 +0200
Subject: [PATCH 19/27] Enhances AccessKeys component with alert messages for
 key sharing, updates Main component to retrieve keys from URL parameters, and
 improves reservation creation logic with URL updates.

---
 OrariAperti/backend/backend-openapi.yaml      |  2 +-
 .../frontend/src/components/AccessKeys.tsx    | 24 +++++++-
 OrariAperti/frontend/src/components/Main.tsx  | 45 ++++++++++-----
 .../dialogs/NewReservationDialog.tsx          | 57 ++++++++++---------
 OrariAperti/frontend/src/types/types.ts       |  5 +-
 5 files changed, 86 insertions(+), 47 deletions(-)

diff --git a/OrariAperti/backend/backend-openapi.yaml b/OrariAperti/backend/backend-openapi.yaml
index e55e3ba..0312ebf 100644
--- a/OrariAperti/backend/backend-openapi.yaml
+++ b/OrariAperti/backend/backend-openapi.yaml
@@ -11,7 +11,7 @@ paths:
     get:
       summary: "Get reservation by key"
       operationId: "getReservationByKey"
-      parameters:
+      parameters: 
         - name: "publicKey"
           in: "header"
           required: false
diff --git a/OrariAperti/frontend/src/components/AccessKeys.tsx b/OrariAperti/frontend/src/components/AccessKeys.tsx
index b92f35d..0b21d1f 100644
--- a/OrariAperti/frontend/src/components/AccessKeys.tsx
+++ b/OrariAperti/frontend/src/components/AccessKeys.tsx
@@ -12,6 +12,8 @@ import {Button} from "@/components/ui/button.tsx";
 import { useEffect, useState } from "react";
 import type { Reservation } from "@/types/types";
 import { toast } from "sonner";
+import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
+import {Globe, LucideLink, LucideTriangleAlert, Shield} from "lucide-react";
 
 export default function AccessKeys({
     privateKey: initialPrivateKey,
@@ -72,7 +74,7 @@ export default function AccessKeys({
                     <CardContent className="flex-grow">
                         <div className="grid gap-4">
                             <div className="grid gap-2">
-                                <Label htmlFor="privateKey">Private Key</Label>
+                                <Label htmlFor="privateKey"><Shield size={16}/> Private Key</Label>
                                 <Input
                                     type="text"
                                     id="privateKey"
@@ -81,9 +83,18 @@ export default function AccessKeys({
                                     value={privateKey}
                                     onChange={e => setPrivateKey(e.target.value)}
                                 />
+                                <Alert variant={"destructive"} >
+                                    <LucideTriangleAlert/>
+                                    <AlertTitle className={"text-xs"}>
+                                        Never share your private key with anyone.
+                                    </AlertTitle>
+                                    <AlertDescription className={"text-xs"}>
+                                        It is used to securely access and manage your reservations.
+                                    </AlertDescription>
+                                </Alert>
                             </div>
                             <div className="grid gap-2">
-                                <Label htmlFor="publicKey">Public Key</Label>
+                                <Label htmlFor="publicKey"><Globe size={16}/> Public Key</Label>
                                 <Input
                                     type="text"
                                     id="publicKey"
@@ -92,6 +103,15 @@ export default function AccessKeys({
                                     value={publicKey}
                                     onChange={e => setPublicKey(e.target.value)}
                                 />
+                            <Alert>
+                                <LucideLink/>
+                                <AlertTitle className={"text-xs"}>
+                                    Share your public key
+                                </AlertTitle>
+                                <AlertDescription className={"text-xs"}>
+                                    Share your public key with others to allow them to view your reservations without giving them access to manage them.
+                                </AlertDescription>
+                            </Alert>
                             </div>
                         </div>
                     </CardContent>
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index 59c064a..c14b8ba 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -3,19 +3,36 @@ import AccessKeys from "@/components/AccessKeys.tsx";
 import CurrentReservation from "@/components/CurrentReservation.tsx";
 import type { Reservation } from "@/types/types";
 
+function getQueryParam(param: string) {
+    const params = new URLSearchParams(window.location.search);
+    for (const [key, value] of params.entries()) {
+        if (key.toLowerCase() === param.toLowerCase()) {
+            return value;
+        }
+    }
+    return undefined;
+}
+
 export default function MainUIOnly() {
-  const [reservation, setReservation] = useState<Reservation | undefined>(undefined);
+    const [reservation, setReservation] = useState<Reservation | undefined>(undefined);
 
-  return (
-      <main className="container mx-auto p-6 min-h-screen w-full">
-          <div className="flex flex-col md:flex-row gap-6 min-h-[calc(100vh-100px)]">
-              <div className="w-full md:w-1/3 flex-shrink-0 h-full md:h-auto">
-                  <AccessKeys onReservationLoaded={setReservation}/>
-              </div>
-              <div className="w-full md:w-2/3 flex-grow h-full md:h-auto">
-                  <CurrentReservation reservation={reservation}/>
-              </div>
-          </div>
-      </main>
-  );
-}
+    const publicKey = getQueryParam("publicKey");
+    const privateKey = getQueryParam("privateKey");
+
+    return (
+        <main className="container mx-auto p-6 w-full">
+            <div className="flex flex-col md:flex-row gap-6 min-h-[calc(100vh-100px)]">
+                <div className="w-full md:w-1/3 flex-shrink-0 h-full md:h-auto">
+                    <AccessKeys
+                        onReservationLoaded={setReservation}
+                        publicKey={publicKey || undefined}
+                        privateKey={privateKey || undefined}
+                    />
+                </div>
+                <div className="w-full md:w-2/3 flex-grow h-full md:h-auto">
+                    <CurrentReservation reservation={reservation}/>
+                </div>
+            </div>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
index adb384d..86b31f0 100644
--- a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
+++ b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
@@ -33,7 +33,6 @@ import {
 import { format } from "date-fns";
 import { toast } from "sonner";
 import {FeatureBadge} from "../FeatureBadge.tsx";
-import AccessKeys from "@/components/AccessKeys"; // adjust path as needed
 
 export default function NewReservationDialog() {
     const {
@@ -50,7 +49,6 @@ export default function NewReservationDialog() {
 
     const [rooms, setRooms] = useState<Room[]>([]);
     const [loadingRooms, setLoadingRooms] = useState(false);
-    const [accessKeys, setAccessKeys] = useState<{privateKey: string, publicKey: string} | null>(null);
     const [dialogOpen, setDialogOpen] = useState(false);
 
     useEffect(() => {
@@ -71,6 +69,21 @@ export default function NewReservationDialog() {
             toast.error("Please select a date.");
             return;
         }
+
+        const now = new Date();
+        const [year, month, day] = data.date.split("-");
+        const [hour, minute] = data.startTime.split(":");
+        const reservationStart = new Date(
+            Number(year),
+            Number(month) - 1,
+            Number(day),
+            Number(hour),
+            Number(minute)
+        );
+        if (reservationStart < now) {
+            toast.error("Reservation cannot be in the past.");
+            return;
+        }
         const payload = {
             ...data,
             roomId: data.roomId,
@@ -85,18 +98,20 @@ export default function NewReservationDialog() {
             import.meta.env.VITE_APP_BACKEND_URL + "/api/reservation",
             payload
             );
-            if (typeof res.data === "string") {
-            // Backend returned an error as a string
-            toast.error(res.data);
-            return;
+            if (typeof res.data === "string" && res.status !== 200) {
+                // Backend returned an error as a string
+                toast.error(res.data);
+                return;
             }
-            toast.success("Reservation succesfully created!");
-            reset();
-            setAccessKeys({
-            privateKey: res.data.privateKey,
-            publicKey: res.data.publicKey
-            });
+            toast.success("Reservation successfully created!");
             setDialogOpen(false);
+            reset();
+            // modify the current location URL to include the private key and reload the page
+            const newUrl = new URL(window.location.href);
+            newUrl.searchParams.set("privateKey", res.data.privateKey);
+            newUrl.searchParams.set("publicKey", res.data.publicKey);
+            window.history.pushState({}, "", newUrl.toString());
+            window.location.reload();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (error: any) {
             const errorMessage =
@@ -107,12 +122,6 @@ export default function NewReservationDialog() {
             toast.error(errorMessage);
         }
     };
-
-    // When dialog closes, clear keys
-    useEffect(() => {
-        if (!dialogOpen) setAccessKeys(null);
-    }, [dialogOpen]);
-
     return (
         <>
             <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -150,13 +159,6 @@ export default function NewReservationDialog() {
                     </form>
                 </DialogContent>
             </Dialog>
-            {accessKeys && (
-                <AccessKeys
-                    privateKey={accessKeys.privateKey}
-                    publicKey={accessKeys.publicKey}
-                    onLoad={() => {/* Optionally trigger load logic here */}}
-                />
-            )}
         </>
     );
 }
@@ -176,7 +178,6 @@ function NewReservation({
     rooms: Room[];
     loadingRooms: boolean;
 }) {
-    // Get the selected roomId from the form state
     const selectedRoomId = watch("roomId");
     const selectedRoom = rooms.find((room) => room.id === selectedRoomId);
 
@@ -191,7 +192,7 @@ function NewReservation({
                             <Button
                                 variant="outline"
                                 data-empty={!watch("date")}
-                                className="data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal"
+                                className="data-[empty=true]:text-muted-foreground w-full justify-start text-left font-normal"
                             >
                                 <CalendarIcon />
                                 {watch("date") ? (
@@ -206,7 +207,7 @@ function NewReservation({
                                 mode="single"
                                 selected={watch("date") ? new Date(watch("date")) : undefined}
                                 disabled={(date) =>
-                                    date < new Date() /* || date.getDay() === 0 || date.getDay() === 6*/ // TODO: Disable weekends if needed check with others
+                                    date < new Date(new Date().setHours(0, 0, 0, 0)) /* || date.getDay() === 0 || date.getDay() === 6*/ // TODO: Disable weekends if needed check with others
                                 }
                                 onSelect={(date) => {
                                     if (date) {
diff --git a/OrariAperti/frontend/src/types/types.ts b/OrariAperti/frontend/src/types/types.ts
index daac4cd..74a56f4 100644
--- a/OrariAperti/frontend/src/types/types.ts
+++ b/OrariAperti/frontend/src/types/types.ts
@@ -2,15 +2,16 @@ export interface ReservationDTO {
     date: string;
     startTime: string;
     endTime: string;
-    roomId: string; 
+    roomId: string;
     description: string;
     participants: string;
 }
 
 export interface Reservation extends ReservationDTO {
     id: string;
-    privateKey: string; 
+    privateKey: string;
     publicKey: string;
+    room?: Room;
 }
 
 export type Room = {

From 1ec8be78e9882e78ed4ca69fe16c9af9cb90f255 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Mon, 16 Jun 2025 14:29:01 +0200
Subject: [PATCH 20/27] Updates reservation update method to return error
 messages and modifies seed data for reservations

---
 .../ims/orariaperti/controller/ReservationController.java   | 4 ++--
 .../src/main/java/ims/orariaperti/utilities/Seeder.java     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
index 019c0d5..b2717b1 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
@@ -98,7 +98,7 @@ public ResponseEntity<Void> deleteReservation(@PathVariable UUID id, @RequestHea
     }
 
     @PutMapping("/{id}")
-    public ResponseEntity<Reservation> updateReservation(@PathVariable UUID id, @RequestBody ReservationDTO reservationDTO, @RequestHeader UUID privateKey) {
+    public Object updateReservation(@PathVariable UUID id, @RequestBody ReservationDTO reservationDTO, @RequestHeader UUID privateKey) {
         try {
             Reservation reservation = reservationRepository.getFirstById(id);
             if (reservation == null) {
@@ -135,7 +135,7 @@ public ResponseEntity<Reservation> updateReservation(@PathVariable UUID id, @Req
                     })
                     .orElse(ResponseEntity.notFound().build());
         } catch (Exception e) {
-            return ResponseEntity.badRequest().build();
+            return ResponseEntity.badRequest().body(e.getMessage());
         }
     }
 
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java b/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java
index 561da54..e92726a 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java
@@ -82,7 +82,7 @@ public void run(String... args) {
                         LocalTime.of(10, 0),
                         room101,
                         "Team Meeting",
-                        "Chandra,Johnson",
+                        "Tom,Johnson",
                         UUID.randomUUID(),
                         UUID.randomUUID()
                 ));
@@ -93,7 +93,7 @@ public void run(String... args) {
                         LocalTime.of(12, 0),
                         room102,
                         "Project Discussion",
-                        "Natalia,Fluury",
+                        "Mac,Fluury",
                         UUID.randomUUID(),
                         UUID.randomUUID()
                 ));
@@ -104,7 +104,7 @@ public void run(String... args) {
                         LocalTime.of(12, 0),
                         room102,
                         "Project Feedback",
-                        "Pluh,Dario",
+                        "Pluh,Tompson",
                         UUID.randomUUID(),
                         UUID.randomUUID()
                 ));

From dc8e61c6c9ac83d9d53f138315bdd6b20ffe2af8 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Mon, 16 Jun 2025 17:25:54 +0200
Subject: [PATCH 21/27] everything works EXCEPT editing - Adds
 DeleteSingleReservationDialog component

Introduces a new component to handle the deletion of single reservations. This provides modular functionality for managing individual reservation deletions in the frontend.
---
 .../src/components/dialogs/DeleteSingleReservationDialog.tsx      | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx

diff --git a/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx b/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx
new file mode 100644
index 0000000..e69de29

From bf92d1e94593f4d84a25158290a6c45baa216e64 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Mon, 16 Jun 2025 17:26:12 +0200
Subject: [PATCH 22/27] Enhances reservation management and UI interactions

Refactors reservation editing and deletion logic, introducing a reusable confirmation dialog for deletions. Adds dynamic room selection and feature badges to improve user experience. Implements private/public key handling for access control.

Fixes room ID handling during reservation updates and optimizes error feedback. Improves code readability and consistency by reorganizing imports and cleaning up redundant logic.
---
 .../src/components/CurrentReservation.tsx     | 435 ++++++++++++------
 .../dialogs/DeleteSingleReservationDialog.tsx |  39 ++
 .../dialogs/NewReservationDialog.tsx          |   1 -
 3 files changed, 345 insertions(+), 130 deletions(-)

diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index 21932a2..4389acb 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -1,197 +1,374 @@
-import {Card, CardHeader, CardTitle, CardContent, CardDescription, CardAction} from "@/components/ui/card";
+import {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardContent,
+    CardDescription,
+    CardFooter, CardAction,
+} from "@/components/ui/card";
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
 import {Label} from "@/components/ui/label";
 import {Textarea} from "@/components/ui/textarea";
-import {useState} from "react";
-import type {Reservation} from "@/types/types";
-import NewReservationDialog from "@/components/dialogs/NewReservationDialog.tsx";
+import {useState, useEffect} from "react";
+import type {Reservation, Room} from "@/types/types";
+import NewReservationDialog from "@/components/dialogs/NewReservationDialog";
 import {toast} from "sonner";
-import {LucideEdit2, LucideLink, Trash2} from "lucide-react";
+import {CircleX, LucideEdit2, LucideLink, Save} from "lucide-react";
+import {FeatureBadge} from "@/components/FeatureBadge";
+import {format} from "date-fns";
+import DeleteSingleReservationDialog from "@/components/dialogs/DeleteSingleReservationDialog.tsx";
+
+const API_URL = import.meta.env.VITE_APP_BACKEND_URL;
+
+function getQueryParam(param: string) {
+    const params = new URLSearchParams(window.location.search);
+    for (const [key, value] of params.entries()) {
+        if (key.toLowerCase() === param.toLowerCase()) {
+            return value;
+        }
+    }
+    return undefined;
+}
 
 export default function CurrentReservation({reservation}: { reservation?: Reservation }) {
     const [editData, setEditData] = useState<Reservation | undefined>(reservation);
     const [editing, setEditing] = useState(false);
     const [saving, setSaving] = useState(false);
     const [deleting, setDeleting] = useState(false);
+    const [rooms, setRooms] = useState<Room[]>([]);
     const [error, setError] = useState<string | null>(null);
-    const isPrivate = !!reservation?.privateKey;
 
-    if (!reservation) {
-        return (
-            <>
-                <Card className="h-full w-full">
-                    <CardHeader>
-                        <CardTitle>No Current Reservation</CardTitle>
-                        <CardDescription>
-                            Please enter the provided keys on the Access Key Panel or create a new Reservation
-                        </CardDescription>
-                        <CardAction>
-                            <NewReservationDialog/>
-                        </CardAction>
-                    </CardHeader>
-                </Card>
-            </>
-        );
-    }
+    const privateKey = getQueryParam("privateKey");
+    // @ts-expect-error: Comparing DOM element to reservation.privateKey for access control
+    const isPrivate = !!reservation && document.querySelector('#privateKey').value === reservation.privateKey;
+
+    useEffect(() => {
+        setEditData(reservation);
+    }, [reservation]);
+
+    useEffect(() => {
+        if (editing) {
+            fetchRooms().then();
+        }
+    }, [editing]);
 
-    // Render room details
-    const room = reservation.room;
-    let roomDisplay: string;
-    let featuresDisplay = "";
-    if (room && typeof room === "object" && "roomNumber" in room) {
-        roomDisplay = (room as { roomNumber?: string }).roomNumber || (room as { id?: string }).id || "";
-        featuresDisplay = Array.isArray((room as { roomFeatures?: string[] }).roomFeatures)
-            ? (room as { roomFeatures: string[] }).roomFeatures.join(", ")
-            : "";
-    } else {
-        roomDisplay = String(room);
+    async function fetchRooms() {
+        try {
+            const res = await fetch(`${API_URL}/api/room`);
+            if (!res.ok) throw new Error("Failed to load rooms");
+            setRooms(await res.json());
+        } catch {
+            toast.error("Failed to load rooms");
+        }
     }
 
-    // Handlers for editing
-    function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-        if (!editData) return;
-        setEditData({ ...editData, [e.target.name]: e.target.value });
+    function handleCopyLink() {
+        const url = new URL(window.location.href);
+        if (reservation?.publicKey) {
+            url.searchParams.set("publicKey", reservation.publicKey);
+            url.searchParams.delete("privateKey");
+        }
+        navigator.clipboard.writeText(url.toString()).then();
+        toast.success("Shareable link copied!");
     }
 
-    async function handleSave() {
+    async function handleSave(e: React.FormEvent) {
+        e.preventDefault();
         if (!editData) return;
         setSaving(true);
         setError(null);
         try {
-            let roomId = "";
-            if (editData.room && typeof editData.room === "object" && "id" in editData.room) {
-                roomId = (editData.room as { id?: string }).id || "";
-            } else {
-                roomId = String(editData.room);
-            }
             const payload = {
                 date: editData.date,
                 startTime: editData.startTime,
                 endTime: editData.endTime,
-                room: roomId,
+                roomId: editData.room?.id,
                 description: editData.description,
                 participants: editData.participants,
             };
-            const res = await fetch(`${import.meta.env.VITE_APP_BACKEND_URL}/api/reservation/${editData.id}`, {
+            const res = await fetch(`${API_URL}/api/reservation/${editData.id}`, {
                 method: "PUT",
                 headers: {
                     "Content-Type": "application/json",
-                    privateKey: editData.privateKey,
+                    privateKey: privateKey || "",
                 },
                 body: JSON.stringify(payload),
             });
-            if (!res.ok) throw new Error("Failed to save reservation.");
+            if (!res.ok) {
+                const msg = await res.text();
+                throw new Error(msg || "Failed to update reservation");
+            }
+            const updated = await res.json();
             setEditing(false);
-        } catch (err) {
-            setError(err instanceof Error ? err.message : "Failed to save reservation.");
+            setEditData(updated);
+            toast.success("Reservation updated!");
+            const url = new URL(window.location.href);
+            url.searchParams.set("privateKey", updated.privateKey);
+            window.history.replaceState({}, "", url.toString());
+            window.location.reload();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (err: any) {
+            setError(err?.message || "Failed to update reservation");
+            toast.error(error);
         } finally {
             setSaving(false);
         }
     }
 
-    function handleShare() {
-        if (!reservation) return;
-        const url = `${window.location.origin}?publicKey=${reservation.publicKey}`;
-        navigator.clipboard.writeText(url);
-        toast.success("Share link copied to clipboard!");
-    }
-
     async function handleDelete() {
         if (!reservation) return;
         setDeleting(true);
         setError(null);
         try {
-            const res = await fetch(`${import.meta.env.VITE_APP_BACKEND_URL}/api/reservation/${reservation.id}`, {
+            const res = await fetch(`${API_URL}/api/reservation/${reservation.id}`, {
                 method: "DELETE",
                 headers: {
-                    privateKey: reservation.privateKey,
+                    privateKey: privateKey || "",
                 },
             });
-            if (!res.ok) throw new Error("Failed to delete reservation.");
-            toast.success("Reservation delted successfully!");
-
-            // Redirect that damn user back to the homepage :OO
-            window.location.href = "/";
-        } catch (err) {
-            setError(err instanceof Error ? err.message : "Failed to delete reservation.");
-            toast.error("Failed to delete reservation.");
+            if (!res.ok) {
+                const msg = await res.text();
+                throw new Error(msg || "Failed to delete reservation");
+            }
+            toast.success("Reservation deleted!");
+            setEditData(undefined);
+            setEditing(false);
+            const url = new URL(window.location.href);
+            url.searchParams.delete("privateKey");
+            url.searchParams.delete("publicKey");
+            window.history.replaceState({}, "", url.toString());
+            window.location.reload();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (err: any) {
+            setError(err.message || "Failed to delete reservation");
+            toast.error(error);
+        } finally {
+            setDeleting(false);
         }
     }
 
-    return (
-        <Card className="h-full w-full">
-            <CardHeader>
-                <CardTitle>Current Reservation</CardTitle>
-                <CardDescription>
-                    Reservation details for the provided Access Key
-                </CardDescription>
-                <CardAction>
-                    <Button type="button" onClick={handleShare}><LucideLink/>Share</Button>
-                </CardAction>
-            </CardHeader>
-            <CardContent className="space-y-3">
-                <form className="space-y-3" onSubmit={e => { e.preventDefault(); if (editing) handleSave(); }}>
-                    <div>
-                        <Label>Date:</Label>
-                        <Input type={"date"} name="date" value={editing && editData ? editData.date : reservation.date} onChange={handleChange} readOnly={!isPrivate || !editing} />
-                    </div>
-                    <div>
-                        <Label>Time:</Label>
-                        <div className="flex gap-2">
-                            <Input name="startTime" value={editing && editData ? editData.startTime : reservation.startTime} onChange={handleChange} readOnly={!isPrivate || !editing} className="w-24" />
-                            <span>-</span>
-                            <Input name="endTime" value={editing && editData ? editData.endTime : reservation.endTime} onChange={handleChange} readOnly={!isPrivate || !editing} className="w-24" />
+    if (!reservation) {
+        return (
+            <Card className="h-full w-full">
+                <CardHeader>
+                    <CardTitle>No Current Reservation</CardTitle>
+                    <CardDescription>
+                        Please enter the provided keys on the Access Key Panel or create a new Reservation
+                    </CardDescription>
+                    <CardAction>
+                        <NewReservationDialog/>
+                    </CardAction>
+                </CardHeader>
+            </Card>
+        );
+    }
+
+    if (editing && editData) {
+        return (
+            <Card className="h-full w-full">
+                <form onSubmit={handleSave}>
+                    <CardHeader className={"mb-4"}>
+                        <CardTitle>Edit Reservation</CardTitle>
+                        <CardDescription>
+                            Update your reservation details below.
+                        </CardDescription>
+                        <CardAction>
+                            <Button
+                                variant="secondary"
+                                onClick={() => setEditing(false)}
+                                title="Cancel editing"
+                            >
+                                <CircleX/>Cancel Editing
+                            </Button>
+                        </CardAction>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div>
+                            <Label>Date</Label>
+                            <Input
+                                type="date"
+                                value={editData.date}
+                                onChange={e => setEditData({...editData, date: e.target.value})}
+                                required
+                            />
                         </div>
-                    </div>
-                    <div>
-                        <Label>Room:</Label>
-                        <Input name="room" value={roomDisplay} readOnly />
-                    </div>
-                    {featuresDisplay && (
                         <div>
-                            <Label>Features:</Label> <div>{featuresDisplay}</div>
+                            <Label>Room</Label>
+                            <select
+                                className="w-full border rounded px-2 py-2"
+                                value={editData.room?.id || ""}
+                                onChange={e => {
+                                    const room = rooms.find(r => r.id === e.target.value);
+                                    setEditData({...editData, room});
+                                }}
+                                required
+                            >
+                                <option value="" disabled>Select a room</option>
+                                {rooms.map(room => (
+                                    <option key={room.id} value={room.id}>
+                                        Room {room.roomNumber}
+                                    </option>
+                                ))}
+                            </select>
+                            {editData.room?.roomFeatures && (
+                                <div className="flex flex-wrap gap-1 mt-2">
+                                    {editData.room.roomFeatures.map(f => (
+                                        <FeatureBadge key={f} feature={f}/>
+                                    ))}
+                                </div>
+                            )}
                         </div>
-                    )}
+                        <div className="flex gap-4">
+                            <div className="flex-1">
+                                <Label>Start Time</Label>
+                                <Input
+                                    type="time"
+                                    value={editData.startTime}
+                                    onChange={e => setEditData({...editData, startTime: e.target.value})}
+                                    required
+                                />
+                            </div>
+                            <div className="flex-1">
+                                <Label>End Time</Label>
+                                <Input
+                                    type="time"
+                                    value={editData.endTime}
+                                    onChange={e => setEditData({...editData, endTime: e.target.value})}
+                                    required
+                                />
+                            </div>
+                        </div>
+                        <div>
+                            <Label>Description</Label>
+                            <Textarea
+                                value={editData.description}
+                                onChange={e => setEditData({...editData, description: e.target.value})}
+                                maxLength={200}
+                                required
+                            />
+                        </div>
+                        <div>
+                            <Label>Participants</Label>
+                            <Input
+                                value={editData.participants}
+                                onChange={e => setEditData({...editData, participants: e.target.value})}
+                                maxLength={255}
+                                required
+                            />
+                        </div>
+                        {error && <div className="text-red-500 text-sm">{error}</div>}
+                    </CardContent>
+                    <CardFooter className="flex gap-2 mt-4">
+                        <Button type="button" className={"w-1/2"} variant="secondary" onClick={() => setEditing(false)}>
+                            <CircleX/>Cancel Editing
+                        </Button>
+                        <Button type="submit" className={"w-1/2"} disabled={saving}>
+                            {saving ? "Saving..." : <><Save/>Save</>}
+                        </Button>
+                    </CardFooter>
+                </form>
+            </Card>
+        );
+    }
+
+    return (
+        <>
+            <Card className="h-full w-full">
+                <CardHeader>
+                    <CardTitle>
+                        Reservation for Room {reservation.room?.roomNumber}
+                    </CardTitle>
+                    <CardDescription>
+                        {reservation.date && (
+                            <span>
+                                {format(new Date(reservation.date), "PPP")}
+                                {" · "}
+                                {reservation.startTime} - {reservation.endTime}
+                            </span>
+                        )}
+                    </CardDescription>
+                    <CardAction>
+                        <Button
+                            onClick={handleCopyLink}
+                            title="Copy shareable link"
+                        >
+                            <LucideLink size={16}/>
+                            Share
+                        </Button>
+                    </CardAction>
+                </CardHeader>
+                <CardContent className="space-y-4">
                     <div>
-                        <Label>Description:</Label>
-                        <Textarea name="description" value={editing && editData ? editData.description : reservation.description} onChange={handleChange} readOnly={!isPrivate || !editing} />
+                        <Label>Room {reservation.room?.roomNumber} Features</Label>
+                        <div className="flex flex-wrap gap-1 mt-1">
+                            {reservation.room?.roomFeatures?.map(f => (
+                                <FeatureBadge key={f} feature={f}/>
+                            ))}
+                        </div>
                     </div>
                     <div>
-                        <Label>Participants:</Label>
-                        <Textarea name="participants" value={editing && editData ? editData.participants : reservation.participants} onChange={handleChange} readOnly={!isPrivate || !editing} />
+                        <Label>Description</Label>
+                        <Textarea value={reservation.description} className={"bg-muted resize-none"} readOnly={true}/>
                     </div>
-                    {reservation.privateKey && 
-                        <div>
-                            <Label>Private Key:</Label> <Input value={reservation.privateKey} readOnly />
-                        </div>
-                    }
                     <div>
-                        <Label>Public Key:</Label> <Input value={reservation.publicKey} readOnly />
+                        <Label>Participants</Label>
+                        <Textarea value={reservation.participants} className={"bg-muted resize-none"} readOnly={true}/>
                     </div>
-                    {error && <div className="text-red-500 text-xs">{error}</div>}
-                    <div className="flex gap-2 mt-4 w-full">
-                        {isPrivate ? (
-                            editing ? (
+                    <div>
+                        <div className="flex flex-col gap-1">
+                            {reservation.privateKey && (
                                 <>
-                                    <Button className={"w-1/2"} type="submit" disabled={saving}>{saving ? "Saving..." : "Save"}</Button>
-                                    <Button className={"w-1/2"} type="button" variant="secondary" onClick={() => { setEditing(false); setEditData(reservation); }}>Cancel</Button>
+                                    <Label htmlFor={"privatekey-input-current"} className={"cursor-pointer"}>Private Key</Label>
+                                    <Input
+                                        id="privatekey-input-current"
+                                        type="text"
+                                        value={reservation.privateKey}
+                                        readOnly
+                                        className="bg-muted mb-3 cursor-pointer select-all"
+                                        onClick={e => {
+                                            (e.target as HTMLInputElement).select();
+                                            navigator.clipboard.writeText(reservation.privateKey).then();
+                                            toast.success("Private key copied to clipboard!");
+                                        }}/>
                                 </>
-                            ) : (
+                            )}
+                            {reservation.publicKey && (
                                 <>
-                                    <div className="flex gap-2 w-full">
-                                        <Button className={"w-1/2"} type="button" onClick={() => { setEditing(true); setEditData(reservation); }}><LucideEdit2/>Edit</Button>
-                                        <Button className={"w-1/2"} type="button" variant="destructive" onClick={handleDelete} disabled={deleting}><Trash2/>{deleting ? "Deleting..." : "Delete"}</Button>
-                                    </div>
+                                    <Label htmlFor={"publickey-input-current"} className={"cursor-pointer"}>Public Key</Label>
+                                    <Input
+                                        id="publickey-input-current"
+                                        type="text"
+                                        value={reservation.publicKey}
+                                        readOnly
+                                        className="bg-muted cursor-pointer select-all"
+                                        onClick={e => {
+                                            (e.target as HTMLInputElement).select();
+                                            navigator.clipboard.writeText(reservation.publicKey).then();
+                                            toast.success("Public key copied to clipboard!");
+                                        }}/>
                                 </>
-                            )
-                        ) : (
-                            <></>
-                        )
-                        }
+                            )}
+                        </div>
                     </div>
-                </form>
-            </CardContent>
-        </Card>
+                </CardContent>
+                <CardFooter className="flex gap-2">
+                    {isPrivate && (
+                        <>
+                            <Button
+                                variant="secondary"
+                                onClick={() => setEditing(true)}
+                                title="Edit reservation"
+                                className={"w-1/2"}
+                            >
+                                <LucideEdit2 />
+                                Edit
+                            </Button>
+                            <DeleteSingleReservationDialog deleting={deleting} onDelete={handleDelete} />
+                        </>
+                    )}
+                </CardFooter>
+            </Card>
+        </>
     );
-}
+}
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx b/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx
index e69de29..92cee80 100644
--- a/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx
+++ b/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx
@@ -0,0 +1,39 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {Trash2} from "lucide-react";
+
+export default function DeleteSingleReservationDialog({ onDelete, deleting }: { onDelete: () => void; deleting: boolean }) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" className={"w-1/2"}><Trash2/>Delete</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Reservation</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete this reservation? This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction asChild>
+            <Button variant="destructive" onClick={onDelete} disabled={deleting}>
+              {deleting ? "Deleting..." : <><Trash2/>Delete</> }
+            </Button>
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
index 86b31f0..e86ddd7 100644
--- a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
+++ b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
@@ -109,7 +109,6 @@ export default function NewReservationDialog() {
             // modify the current location URL to include the private key and reload the page
             const newUrl = new URL(window.location.href);
             newUrl.searchParams.set("privateKey", res.data.privateKey);
-            newUrl.searchParams.set("publicKey", res.data.publicKey);
             window.history.pushState({}, "", newUrl.toString());
             window.location.reload();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any

From 81e50548533f45624697575128e2a4423c8fbfb5 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Mon, 16 Jun 2025 18:53:31 +0200
Subject: [PATCH 23/27] WORKS NOW.... SHOULD NOT CONTAIN BUGS - Refactors
 reservation and room APIs, updates UI

Removes redundant room reservation endpoint and controller methods.
Refines reservation API to ensure proper request validation and
more descriptive response handling, including error messages for
missing private keys.

Enhances frontend reservation editing and validation with room
selection, date picker, and improved participant input handling.
Fixes UI inconsistencies and streamlines form submission logic.

Improves code readability and ensures better data integrity across
backend and frontend.
---
 OrariAperti/backend/backend-openapi.yaml      |  22 -
 .../controller/ReservationController.java     |  19 +-
 .../controller/RoomController.java            |  19 +-
 .../frontend/src/components/AccessKeys.tsx    |   2 +-
 .../src/components/CurrentReservation.tsx     | 460 ++++++++++++------
 5 files changed, 336 insertions(+), 186 deletions(-)

diff --git a/OrariAperti/backend/backend-openapi.yaml b/OrariAperti/backend/backend-openapi.yaml
index 0312ebf..ef130b8 100644
--- a/OrariAperti/backend/backend-openapi.yaml
+++ b/OrariAperti/backend/backend-openapi.yaml
@@ -145,28 +145,6 @@ paths:
                   $ref: "#/components/schemas/Room"
         "404":
           description: "No rooms found"
-  /api/room/{roomId}/reservations:
-    get:
-      summary: "Get reservations for a room"
-      operationId: "getReservationsForRoom"
-      parameters:
-        - name: "roomId"
-          in: "path"
-          required: true
-          schema:
-            type: "string"
-            format: "uuid"
-      responses:
-        "200":
-          description: "List of reservations"
-          content:
-            application/json:
-              schema:
-                type: array
-                items:
-                  $ref: "#/components/schemas/Reservation"
-        "404":
-          description: "Room not found"
 components:
   schemas:
     Room:
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
index b2717b1..f924000 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
@@ -6,7 +6,6 @@
 import ims.orariaperti.repository.ReservationRepository;
 import ims.orariaperti.repository.RoomRepository;
 import org.springframework.http.ResponseEntity;
-import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.*;
 
 import java.util.Map;
@@ -26,12 +25,12 @@ public ReservationController(ReservationRepository reservationRepository, RoomRe
     }
 
     @GetMapping
-    public Object getReservations(@RequestHeader(required = false) UUID publickey, @RequestHeader(required = false) UUID privatekey) {
+    public ResponseEntity<?> getReservations(@RequestHeader(required = false) UUID publickey, @RequestHeader(required = false) UUID privatekey) {
         if (publickey == null && privatekey == null) {
             return ResponseEntity.badRequest().build();
         }
         if (privatekey != null) {
-            Optional<Object> reservationInDB = reservationRepository.findByPrivateKey(privatekey);
+            Optional<?> reservationInDB = reservationRepository.findByPrivateKey(privatekey);
             if (reservationInDB.isPresent() && reservationInDB.get() instanceof Reservation reservation) {
                 return ResponseEntity.ok(Map.of(
                     "reservationDetails", reservation,
@@ -42,7 +41,7 @@ public Object getReservations(@RequestHeader(required = false) UUID publickey, @
                 return ResponseEntity.notFound().build();
             }
         } else {
-            Optional<Object> reservationInDB = reservationRepository.findByPublicKey(publickey);
+            Optional<?> reservationInDB = reservationRepository.findByPublicKey(publickey);
             if (reservationInDB.isPresent() && reservationInDB.get() instanceof Reservation reservation) {
                 return ResponseEntity.ok(Map.of(
                     "reservationDetails", reservation,
@@ -55,7 +54,7 @@ public Object getReservations(@RequestHeader(required = false) UUID publickey, @
     }
 
     @PostMapping
-    public ResponseEntity<Object> createReservation(@RequestBody ReservationDTO reservationDTO) {
+    public ResponseEntity<?> createReservation(@RequestBody ReservationDTO reservationDTO) {
         try {
             if (!reservationDTO.getParticipants().matches("^[A-Za-zÄäÖöÜüßèéêç ]+(, *[A-Za-zÄäÖöÜüßèéêç ]+)*$")) {
                 throw new Exception("Participants field must only contain letters (A-Z, a-z) separated by commas.");
@@ -85,7 +84,10 @@ public ResponseEntity<Object> createReservation(@RequestBody ReservationDTO rese
     }
 
     @DeleteMapping("/{id}")
-    public ResponseEntity<Void> deleteReservation(@PathVariable UUID id, @RequestHeader UUID privateKey) {
+    public ResponseEntity<?> deleteReservation(@PathVariable UUID id, @RequestHeader(required = false) UUID privateKey) {
+        if (privateKey == null) {
+            return ResponseEntity.status(401).body("Private key is required for deleting a reservation.");
+        }
         Reservation reservation = reservationRepository.getFirstById(id);
         if (reservation == null) {
             return ResponseEntity.notFound().build();
@@ -98,7 +100,10 @@ public ResponseEntity<Void> deleteReservation(@PathVariable UUID id, @RequestHea
     }
 
     @PutMapping("/{id}")
-    public Object updateReservation(@PathVariable UUID id, @RequestBody ReservationDTO reservationDTO, @RequestHeader UUID privateKey) {
+    public ResponseEntity<?> updateReservation(@PathVariable UUID id, @RequestBody ReservationDTO reservationDTO, @RequestHeader(required = false) UUID privateKey) {
+        if (privateKey == null) {
+            return ResponseEntity.status(401).body("Private key is required for updating a reservation.");
+        }
         try {
             Reservation reservation = reservationRepository.getFirstById(id);
             if (reservation == null) {
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/RoomController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/RoomController.java
index 5573d8a..1c07b8b 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/RoomController.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/RoomController.java
@@ -8,14 +8,12 @@
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Repository;
 import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
-import java.util.UUID;
 
 @Repository
 @RequestMapping("/api/room")
@@ -23,11 +21,9 @@
 public class RoomController {
     
     private final RoomRepository roomRepository;
-    private final ReservationRepository reservationRepository;
 
-    public RoomController(RoomRepository roomRepository, ReservationRepository reservationRepository) {
+    public RoomController(RoomRepository roomRepository) {
         this.roomRepository = roomRepository;
-        this.reservationRepository = reservationRepository;
     }
     
     @GetMapping
@@ -47,17 +43,4 @@ public Object getRooms() {
             return ResponseEntity.notFound().build();
         }
     }
-
-    @GetMapping("/{roomId}/reservations")
-    public ResponseEntity<?> getReservationsForRoom(@PathVariable UUID roomId) {
-        var roomOpt = roomRepository.findById(roomId);
-        if (roomOpt.isEmpty()) {
-            return ResponseEntity.notFound().build();
-        }
-        List<Reservation> reservations = reservationRepository.findAll().stream()
-            .filter(r -> r.getRoom() != null && r.getRoom().getId().equals(roomId))
-            .toList();
-        return ResponseEntity.ok(reservations);
-    }
-
 }
diff --git a/OrariAperti/frontend/src/components/AccessKeys.tsx b/OrariAperti/frontend/src/components/AccessKeys.tsx
index 0b21d1f..170998d 100644
--- a/OrariAperti/frontend/src/components/AccessKeys.tsx
+++ b/OrariAperti/frontend/src/components/AccessKeys.tsx
@@ -72,7 +72,7 @@ export default function AccessKeys({
                 </CardHeader>
                 <form className="flex flex-col h-full" onSubmit={handleSubmit}>
                     <CardContent className="flex-grow">
-                        <div className="grid gap-4">
+                        <div className="grid gap-6">
                             <div className="grid gap-2">
                                 <Label htmlFor="privateKey"><Shield size={16}/> Private Key</Label>
                                 <Input
diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index 4389acb..ef24bdd 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -11,57 +11,86 @@ import {Input} from "@/components/ui/input";
 import {Label} from "@/components/ui/label";
 import {Textarea} from "@/components/ui/textarea";
 import {useState, useEffect} from "react";
-import type {Reservation, Room} from "@/types/types";
+import type {Reservation, Room, ReservationDTO} from "@/types/types";
 import NewReservationDialog from "@/components/dialogs/NewReservationDialog";
 import {toast} from "sonner";
-import {CircleX, LucideEdit2, LucideLink, Save} from "lucide-react";
+import {CalendarIcon, CircleX, LucideEdit2, LucideLink, Save} from "lucide-react";
 import {FeatureBadge} from "@/components/FeatureBadge";
 import {format} from "date-fns";
 import DeleteSingleReservationDialog from "@/components/dialogs/DeleteSingleReservationDialog.tsx";
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover.tsx";
+import {Calendar} from "@/components/ui/calendar.tsx";
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
+import {useForm} from "react-hook-form";
 
 const API_URL = import.meta.env.VITE_APP_BACKEND_URL;
 
-function getQueryParam(param: string) {
-    const params = new URLSearchParams(window.location.search);
-    for (const [key, value] of params.entries()) {
-        if (key.toLowerCase() === param.toLowerCase()) {
-            return value;
-        }
-    }
-    return undefined;
+function formatDateString(dateString: string | Date): string {
+    const date = new Date(dateString);
+    return (
+        date.toLocaleString("default", {year: "numeric"}) +
+        "-" +
+        date.toLocaleString("default", {month: "2-digit"}) +
+        "-" +
+        date.toLocaleString("default", {day: "2-digit"})
+    );
 }
 
 export default function CurrentReservation({reservation}: { reservation?: Reservation }) {
-    const [editData, setEditData] = useState<Reservation | undefined>(reservation);
     const [editing, setEditing] = useState(false);
     const [saving, setSaving] = useState(false);
     const [deleting, setDeleting] = useState(false);
     const [rooms, setRooms] = useState<Room[]>([]);
-    const [error, setError] = useState<string | null>(null);
+    const [loadingRooms, setLoadingRooms] = useState(false);
 
-    const privateKey = getQueryParam("privateKey");
-    // @ts-expect-error: Comparing DOM element to reservation.privateKey for access control
-    const isPrivate = !!reservation && document.querySelector('#privateKey').value === reservation.privateKey;
+    const isPrivate = !!reservation && (document.querySelector<HTMLInputElement>('#privateKey')?.value === reservation.privateKey);
 
-    useEffect(() => {
-        setEditData(reservation);
-    }, [reservation]);
+    const {
+        register,
+        handleSubmit,
+        watch,
+        setValue,
+        formState: {errors},
+        reset,
+    } = useForm<ReservationDTO>({
+        mode: "onBlur",
+        reValidateMode: "onChange",
+        defaultValues: reservation
+            ? {
+                date: reservation.date,
+                startTime: reservation.startTime.substring(0, reservation.startTime.length - 3),
+                endTime: reservation.endTime.substring(0, reservation.endTime.length - 3),
+                roomId: reservation.room?.id ?? "",
+                description: reservation.description,
+                participants: reservation.participants,
+            }
+            : undefined,
+    });
 
     useEffect(() => {
         if (editing) {
-            fetchRooms().then();
+            setLoadingRooms(true);
+            fetch(`${API_URL}/api/room`)
+                .then(res => res.json())
+                .then(setRooms)
+                .catch(() => toast.error("Failed to load rooms"))
+                .finally(() => setLoadingRooms(false));
         }
     }, [editing]);
 
-    async function fetchRooms() {
-        try {
-            const res = await fetch(`${API_URL}/api/room`);
-            if (!res.ok) throw new Error("Failed to load rooms");
-            setRooms(await res.json());
-        } catch {
-            toast.error("Failed to load rooms");
+    useEffect(() => {
+        // Reset form when reservation changes
+        if (reservation) {
+            reset({
+                date: reservation.date,
+                startTime: reservation.startTime.substring(0, reservation.startTime.length - 3),
+                endTime: reservation.endTime.substring(0, reservation.endTime.length - 3),
+                roomId: reservation.room?.id ?? "",
+                description: reservation.description,
+                participants: reservation.participants,
+            });
         }
-    }
+    }, [reservation, reset]);
 
     function handleCopyLink() {
         const url = new URL(window.location.href);
@@ -73,25 +102,49 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
         toast.success("Shareable link copied!");
     }
 
-    async function handleSave(e: React.FormEvent) {
-        e.preventDefault();
-        if (!editData) return;
+    async function onEditSubmit(data: ReservationDTO) {
         setSaving(true);
-        setError(null);
+        if (!reservation) {
+            toast.error("No reservation to update");
+            setSaving(false);
+            return;
+        }
+        // Validate date
+        if (!data.date || !data.startTime || !data.endTime) {
+            toast.error("Please fill in all required fields");
+            setSaving(false);
+            return;
+        }
+        const now = new Date();
+        const [year, month, day] = data.date.split("-");
+        const [hour, minute] = data.startTime.split(":");
+        const reservationStart = new Date(
+            Number(year),
+            Number(month) - 1,
+            Number(day),
+            Number(hour),
+            Number(minute)
+        );
+        if (reservationStart < now) {
+            toast.error("Reservation cannot be in the past.");
+            setSaving(false);
+            return;
+        }
+        if (data.startTime >= data.endTime) {
+            toast.error("End time must be after start time");
+            setSaving(false);
+            return;
+        }
+        
         try {
             const payload = {
-                date: editData.date,
-                startTime: editData.startTime,
-                endTime: editData.endTime,
-                roomId: editData.room?.id,
-                description: editData.description,
-                participants: editData.participants,
+                ...data,
             };
-            const res = await fetch(`${API_URL}/api/reservation/${editData.id}`, {
+            const res = await fetch(`${API_URL}/api/reservation/${reservation?.id}`, {
                 method: "PUT",
                 headers: {
                     "Content-Type": "application/json",
-                    privateKey: privateKey || "",
+                    privateKey: reservation?.privateKey || "",
                 },
                 body: JSON.stringify(payload),
             });
@@ -99,18 +152,17 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                 const msg = await res.text();
                 throw new Error(msg || "Failed to update reservation");
             }
-            const updated = await res.json();
-            setEditing(false);
-            setEditData(updated);
-            toast.success("Reservation updated!");
+            toast.success("Reservation updated!", {description: "The site will refresh automatically in 4.5 seconds to show the accurate information...", duration: 4500});
             const url = new URL(window.location.href);
-            url.searchParams.set("privateKey", updated.privateKey);
+            url.searchParams.set("privateKey", reservation?.privateKey || "");
+            url.searchParams.delete("publicKey");
             window.history.replaceState({}, "", url.toString());
-            window.location.reload();
+            setTimeout(() => {
+                window.location.reload();
+            }, 3000);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (err: any) {
-            setError(err?.message || "Failed to update reservation");
-            toast.error(error);
+            toast.error(err?.message || "Failed to update reservation");
         } finally {
             setSaving(false);
         }
@@ -119,30 +171,28 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
     async function handleDelete() {
         if (!reservation) return;
         setDeleting(true);
-        setError(null);
         try {
             const res = await fetch(`${API_URL}/api/reservation/${reservation.id}`, {
                 method: "DELETE",
                 headers: {
-                    privateKey: privateKey || "",
+                    privateKey: reservation?.privateKey || "",
                 },
             });
             if (!res.ok) {
                 const msg = await res.text();
                 throw new Error(msg || "Failed to delete reservation");
             }
-            toast.success("Reservation deleted!");
-            setEditData(undefined);
-            setEditing(false);
+            toast.success("Reservation deleted!", {description: "Redirecting to home in 3 seconds...", duration: 3000});
             const url = new URL(window.location.href);
             url.searchParams.delete("privateKey");
             url.searchParams.delete("publicKey");
             window.history.replaceState({}, "", url.toString());
-            window.location.reload();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            setTimeout(() => {
+                window.location.href = "/";
+            }, 3000);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (err: any) {
-            setError(err.message || "Failed to delete reservation");
-            toast.error(error);
+            toast.error(err.message || "Failed to delete reservation");
         } finally {
             setDeleting(false);
         }
@@ -164,100 +214,230 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
         );
     }
 
-    if (editing && editData) {
+    if (editing) {
+        const selectedRoomId = watch("roomId");
+        const selectedRoom = rooms.find((room) => room.id === selectedRoomId);
+
         return (
             <Card className="h-full w-full">
-                <form onSubmit={handleSave}>
+                <form onSubmit={handleSubmit(onEditSubmit)}>
                     <CardHeader className={"mb-4"}>
                         <CardTitle>Edit Reservation</CardTitle>
                         <CardDescription>
                             Update your reservation details below.
                         </CardDescription>
-                        <CardAction>
-                            <Button
-                                variant="secondary"
-                                onClick={() => setEditing(false)}
-                                title="Cancel editing"
-                            >
-                                <CircleX/>Cancel Editing
-                            </Button>
-                        </CardAction>
                     </CardHeader>
                     <CardContent className="space-y-4">
-                        <div>
-                            <Label>Date</Label>
-                            <Input
-                                type="date"
-                                value={editData.date}
-                                onChange={e => setEditData({...editData, date: e.target.value})}
-                                required
-                            />
-                        </div>
-                        <div>
-                            <Label>Room</Label>
-                            <select
-                                className="w-full border rounded px-2 py-2"
-                                value={editData.room?.id || ""}
-                                onChange={e => {
-                                    const room = rooms.find(r => r.id === e.target.value);
-                                    setEditData({...editData, room});
-                                }}
-                                required
-                            >
-                                <option value="" disabled>Select a room</option>
-                                {rooms.map(room => (
-                                    <option key={room.id} value={room.id}>
-                                        Room {room.roomNumber}
-                                    </option>
-                                ))}
-                            </select>
-                            {editData.room?.roomFeatures && (
-                                <div className="flex flex-wrap gap-1 mt-2">
-                                    {editData.room.roomFeatures.map(f => (
-                                        <FeatureBadge key={f} feature={f}/>
-                                    ))}
-                                </div>
-                            )}
-                        </div>
-                        <div className="flex gap-4">
-                            <div className="flex-1">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            {/* Date Field */}
+                            <div className="flex flex-col">
+                                <Label>Date</Label>
+                                <Popover>
+                                    <PopoverTrigger asChild>
+                                        <Button
+                                            variant="outline"
+                                            data-empty={!watch("date")}
+                                            className="data-[empty=true]:text-muted-foreground w-full justify-start text-left font-normal"
+                                            type="button"
+                                        >
+                                            <CalendarIcon/>
+                                            {watch("date") ? (
+                                                format(new Date(watch("date")), "PPP")
+                                            ) : (
+                                                <span>Pick a date</span>
+                                            )}
+                                        </Button>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-auto p-0">
+                                        <Calendar
+                                            mode="single"
+                                            selected={watch("date") ? new Date(watch("date")) : undefined}
+                                            disabled={(date) =>
+                                                date < new Date(new Date().setHours(0, 0, 0, 0))
+                                            }
+                                            onSelect={(date) => {
+                                                if (date) {
+                                                    setValue("date", formatDateString(date), {
+                                                        shouldValidate: true,
+                                                    });
+                                                }
+                                            }}
+                                        />
+                                    </PopoverContent>
+                                </Popover>
+                                {errors.date && (
+                                    <span className="text-red-500 text-xs">{errors.date.message}</span>
+                                )}
+                            </div>
+                            {/* Room Field */}
+                            <div>
+                                <Label>Room</Label>
+                                <Select
+                                    onValueChange={(val) =>
+                                        setValue("roomId", val, {shouldValidate: true})
+                                    }
+                                    disabled={loadingRooms}
+                                    value={selectedRoomId}
+                                >
+                                    <SelectTrigger
+                                        {...register("roomId", {
+                                            required: "Room is required",
+                                        })}
+                                    >
+                                        <span>
+                                            {selectedRoom
+                                                ? `Room ${selectedRoom.roomNumber}`
+                                                : loadingRooms
+                                                    ? "Loading rooms..."
+                                                    : "Select a room"}
+                                        </span>
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {rooms
+                                            .slice()
+                                            .sort((a, b) => Number(a.roomNumber) - Number(b.roomNumber))
+                                            .map((room) => (
+                                                <SelectItem key={room.id} value={room.id}>
+                                                    <div className="flex flex-col gap-1">
+                                                        <span className="font-medium">Room {room.roomNumber}</span>
+                                                        <div className="flex flex-wrap gap-1 mt-1">
+                                                            {room.roomFeatures.map((feature) => (
+                                                                <FeatureBadge key={feature} feature={feature}/>
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                </SelectItem>
+                                            ))}
+                                    </SelectContent>
+                                </Select>
+                                {errors.roomId && (
+                                    <span className="text-red-500 text-xs">
+                                        {errors.roomId.message}
+                                    </span>
+                                )}
+                            </div>
+                            {/* Start Time Field */}
+                            <div>
                                 <Label>Start Time</Label>
-                                <Input
-                                    type="time"
-                                    value={editData.startTime}
-                                    onChange={e => setEditData({...editData, startTime: e.target.value})}
-                                    required
-                                />
+                                <Select
+                                    onValueChange={(val) =>
+                                        setValue("startTime", val, {shouldValidate: true})
+                                    }
+                                    value={watch("startTime")}
+                                >
+                                    <SelectTrigger
+                                        {...register("startTime", {
+                                            required: "Start time is required",
+                                            pattern: {
+                                                value: /^([01]\d|2[0-3]):[0-5]\d$/,
+                                                message: "Invalid time format",
+                                            },
+                                        })}
+                                    >
+                                        <SelectValue defaultValue={reservation.startTime.substring(0, reservation.startTime.length - 3)} />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {Array.from({length: 31}, (_, i) => {
+                                            const hour = 6 + Math.floor(i / 2);
+                                            const minute = i % 2 === 0 ? "00" : "30";
+                                            const time = `${hour.toString().padStart(2, "0")}:${minute}`;
+                                            return (
+                                                <SelectItem key={time} value={time}>
+                                                    {time}
+                                                </SelectItem>
+                                            );
+                                        })}
+                                    </SelectContent>
+                                </Select>
+                                {errors.startTime && (
+                                    <span className="text-red-500 text-xs">
+                                        {errors.startTime.message}
+                                    </span>
+                                )}
                             </div>
-                            <div className="flex-1">
+                            {/* End Time Field */}
+                            <div>
                                 <Label>End Time</Label>
-                                <Input
-                                    type="time"
-                                    value={editData.endTime}
-                                    onChange={e => setEditData({...editData, endTime: e.target.value})}
-                                    required
-                                />
+                                <Select
+                                    onValueChange={(val) =>
+                                        setValue("endTime", val, {shouldValidate: true})
+                                    }
+                                    value={watch("endTime")}
+                                >
+                                    <SelectTrigger
+                                        {...register("endTime", {
+                                            required: "End time is required",
+                                            pattern: {
+                                                value: /^([01]\d|2[0-3]):[0-5]\d$/,
+                                                message: "Invalid time format",
+                                            },
+                                        })}
+                                    >
+                                        <SelectValue defaultValue={reservation.endTime.substring(0, reservation.endTime.length - 3)}/>
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {Array.from({length: 31}, (_, i) => {
+                                            const hour = 6 + Math.floor(i / 2);
+                                            const minute = i % 2 === 0 ? "00" : "30";
+                                            const time = `${hour.toString().padStart(2, "0")}:${minute}`;
+                                            return (
+                                                <SelectItem key={time} value={time}>
+                                                    {time}
+                                                </SelectItem>
+                                            );
+                                        })}
+                                    </SelectContent>
+                                </Select>
+                                {errors.endTime && (
+                                    <span className="text-red-500 text-xs">
+                                        {errors.endTime.message}
+                                    </span>
+                                )}
                             </div>
                         </div>
+                        {/* Description Field */}
                         <div>
                             <Label>Description</Label>
                             <Textarea
-                                value={editData.description}
-                                onChange={e => setEditData({...editData, description: e.target.value})}
-                                maxLength={200}
-                                required
+                                {...register("description", {
+                                    required: "Description is required",
+                                    maxLength: {value: 200, message: "Max 200 characters"},
+                                })}
+                                placeholder="Enter a description for your reservation"
+                                className="resize-none"
                             />
+                            {errors.description && (
+                                <span className="text-red-500 text-xs">
+                                    {errors.description.message}
+                                </span>
+                            )}
+                            <p className="text-sm text-muted-foreground">
+                                Briefly describe the purpose of your reservation.
+                            </p>
                         </div>
+                        {/* Participants Field */}
                         <div>
                             <Label>Participants</Label>
                             <Input
-                                value={editData.participants}
-                                onChange={e => setEditData({...editData, participants: e.target.value})}
-                                maxLength={255}
-                                required
+                                placeholder="John, Jane, Alex"
+                                {...register("participants", {
+                                    required: "Participants are required",
+                                    maxLength: {value: 255, message: "Max 255 characters"},
+                                    pattern: {
+                                        value: /^[A-Za-zÄäÖöÜüßèéêç\s]+(,\s*[A-Za-zÄäÖöÜüßèéêç\s]+)*$/,
+                                        message: "Only letters, spaces, and commas allowed",
+                                    },
+                                })}
                             />
+                            {errors.participants && (
+                                <span className="text-red-500 text-xs">
+                                    {errors.participants.message}
+                                </span>
+                            )}
+                            <p className="text-sm text-muted-foreground">
+                                Enter participant names separated by commas (letters only).
+                            </p>
                         </div>
-                        {error && <div className="text-red-500 text-sm">{error}</div>}
                     </CardContent>
                     <CardFooter className="flex gap-2 mt-4">
                         <Button type="button" className={"w-1/2"} variant="secondary" onClick={() => setEditing(false)}>
@@ -319,7 +499,8 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                         <div className="flex flex-col gap-1">
                             {reservation.privateKey && (
                                 <>
-                                    <Label htmlFor={"privatekey-input-current"} className={"cursor-pointer"}>Private Key</Label>
+                                    <Label htmlFor={"privatekey-input-current"} className={"cursor-pointer"}>Private
+                                                                                                             Key</Label>
                                     <Input
                                         id="privatekey-input-current"
                                         type="text"
@@ -335,7 +516,8 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                             )}
                             {reservation.publicKey && (
                                 <>
-                                    <Label htmlFor={"publickey-input-current"} className={"cursor-pointer"}>Public Key</Label>
+                                    <Label htmlFor={"publickey-input-current"} className={"cursor-pointer"}>Public
+                                                                                                            Key</Label>
                                     <Input
                                         id="publickey-input-current"
                                         type="text"
@@ -355,16 +537,18 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                 <CardFooter className="flex gap-2">
                     {isPrivate && (
                         <>
-                            <Button
-                                variant="secondary"
-                                onClick={() => setEditing(true)}
-                                title="Edit reservation"
-                                className={"w-1/2"}
-                            >
-                                <LucideEdit2 />
-                                Edit
-                            </Button>
-                            <DeleteSingleReservationDialog deleting={deleting} onDelete={handleDelete} />
+                            {new Date(reservation.date) >= new Date(new Date().setHours(0, 0, 0, 0)) && (
+                                <Button
+                                    variant="secondary"
+                                    onClick={() => setEditing(true)}
+                                    title="Edit reservation"
+                                    className={"w-1/2"}
+                                >
+                                    <LucideEdit2/>
+                                    Edit
+                                </Button>
+                            )}
+                            <DeleteSingleReservationDialog deleting={deleting} onDelete={handleDelete}/>
                         </>
                     )}
                 </CardFooter>

From 5b0f9324d2ad562887a793c9e6a397a92d6d1cef Mon Sep 17 00:00:00 2001
From: nano <df@proconsis.ch>
Date: Mon, 16 Jun 2025 20:12:15 +0200
Subject: [PATCH 24/27] added favicon that actually looks good

---
 OrariAperti/frontend/index.html         | 4 +---
 OrariAperti/frontend/public/favicon.svg | 8 ++++++++
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 OrariAperti/frontend/public/favicon.svg

diff --git a/OrariAperti/frontend/index.html b/OrariAperti/frontend/index.html
index e88b925..cef190d 100644
--- a/OrariAperti/frontend/index.html
+++ b/OrariAperti/frontend/index.html
@@ -2,9 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/logo-oa-dark.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OrariAperti - Manage your Rooms with Ease</title>
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />    <title>OrariAperti - Manage your Rooms with Ease</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/OrariAperti/frontend/public/favicon.svg b/OrariAperti/frontend/public/favicon.svg
new file mode 100644
index 0000000..09b1484
--- /dev/null
+++ b/OrariAperti/frontend/public/favicon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 1950 1200">
+    <g transform="translate(150, 250)">
+    <path d="M0 0 C3.87 0.01 7.74 -0 11.61 -0.01 C19.14 -0.02 26.66 -0.02 34.19 -0 C43 0.02 51.82 0.01 60.63 0.01 C76.39 0 92.15 0.02 107.9 0.04 C123.1 0.07 138.29 0.07 153.49 0.06 C170.14 0.05 186.8 0.05 203.46 0.06 C205.24 0.06 207.03 0.07 208.81 0.07 C209.69 0.07 210.57 0.07 211.47 0.07 C217.58 0.07 223.68 0.07 229.79 0.07 C237.25 0.06 244.72 0.07 252.19 0.09 C255.98 0.1 259.76 0.1 263.55 0.1 C293.99 0.04 324.09 2.47 354.13 7.51 C355.13 7.68 356.14 7.84 357.18 8.01 C396.14 14.71 432.62 30.71 464.13 54.51 C464.96 55.13 465.79 55.74 466.64 56.38 C472.19 60.65 477.32 65.36 482.44 70.13 C483.12 70.77 483.81 71.4 484.51 72.05 C488.36 75.68 491.8 79.4 495.13 83.51 C496.06 84.42 496.98 85.32 497.94 86.26 C500.13 88.51 500.13 88.51 500.13 90.51 C501.12 90.84 502.11 91.17 503.13 91.51 C503.83 92.82 504.49 94.16 505.13 95.51 C505.8 96.15 505.8 96.15 506.48 96.81 C510.04 100.47 512.46 105.17 515.13 109.51 C515.56 110.19 515.99 110.87 516.44 111.57 C517.98 114.1 519.08 116.19 519.53 119.13 C520.16 122.66 521.2 125.76 522.4 129.13 C529.42 148.84 533.14 169.08 535.94 189.76 C536.05 190.53 536.15 191.31 536.26 192.11 C537.48 201.18 538.41 210.22 538.89 219.36 C539.05 222.4 539.05 222.4 539.64 224.87 C540.15 227.61 540.25 230.11 540.24 232.9 C540.24 234.51 540.24 234.51 540.24 236.14 C540.23 237.88 540.23 237.88 540.22 239.66 C540.21 240.88 540.21 242.11 540.21 243.37 C540.15 257.49 539.97 271.6 539.76 285.71 C539.7 289.47 539.65 293.22 539.6 296.98 C539.56 299.91 539.52 302.84 539.48 305.76 C539.46 307.15 539.44 308.54 539.42 309.93 C539.4 311.84 539.37 313.75 539.33 315.67 C539.31 317.29 539.31 317.29 539.29 318.95 C539.13 321.51 539.13 321.51 538.13 323.51 C537.47 323.51 536.81 323.51 536.13 323.51 C536.03 324.04 535.92 324.58 535.82 325.13 C534.95 328.13 533.57 330.75 532.13 333.51 C531.47 333.51 530.81 333.51 530.13 333.51 C530.13 334.5 530.13 335.49 530.13 336.51 C529.47 336.51 528.81 336.51 528.13 336.51 C528.13 337.5 528.13 338.49 528.13 339.51 C526.82 340.86 525.48 342.2 524.13 343.51 C523.8 344.5 523.47 345.49 523.13 346.51 C522.47 346.51 521.81 346.51 521.13 346.51 C521.13 347.5 521.13 348.49 521.13 349.51 C520.47 349.51 519.81 349.51 519.13 349.51 C518.98 350.11 518.84 350.7 518.69 351.32 C518.24 353.07 517.7 354.8 517.13 356.51 C516.47 356.51 515.81 356.51 515.13 356.51 C514.85 357.07 514.58 357.63 514.29 358.21 C513.09 360.59 511.81 362.93 510.5 365.26 C510.06 366.06 509.61 366.86 509.15 367.68 C508.81 368.28 508.48 368.89 508.13 369.51 C507.47 369.51 506.81 369.51 506.13 369.51 C506.13 370.5 506.13 371.49 506.13 372.51 C505.47 372.51 504.81 372.51 504.13 372.51 C503.98 373.11 503.84 373.7 503.69 374.32 C502.43 379.23 502.43 379.23 500.38 381.13 C497.19 384.5 495.26 388.42 493.13 392.51 C492.47 392.51 491.81 392.51 491.13 392.51 C491.13 393.5 491.13 394.49 491.13 395.51 C490.47 395.51 489.81 395.51 489.13 395.51 C488.98 396.11 488.84 396.7 488.69 397.32 C487.77 400.92 486.99 403.1 484.13 405.51 C483.47 405.51 482.81 405.51 482.13 405.51 C482.03 406.04 481.92 406.58 481.82 407.13 C480.95 410.13 479.57 412.75 478.13 415.51 C477.47 415.51 476.81 415.51 476.13 415.51 C476.13 416.5 476.13 417.49 476.13 418.51 C475.47 418.51 474.81 418.51 474.13 418.51 C473.8 419.83 473.47 421.15 473.13 422.51 C472.47 422.51 471.81 422.51 471.13 422.51 C470.98 423.13 470.84 423.75 470.69 424.38 C470.13 426.51 470.13 426.51 469.13 428.51 C468.47 428.51 467.81 428.51 467.13 428.51 C466.98 429.11 466.84 429.7 466.69 430.32 C466.24 432.07 465.7 433.8 465.13 435.51 C464.47 435.51 463.81 435.51 463.13 435.51 C463.13 436.5 463.13 437.49 463.13 438.51 C462.47 438.51 461.81 438.51 461.13 438.51 C461.13 439.5 461.13 440.49 461.13 441.51 C460.47 441.51 459.81 441.51 459.13 441.51 C458.8 442.83 458.47 444.15 458.13 445.51 C457.47 445.51 456.81 445.51 456.13 445.51 C456.13 446.5 456.13 447.49 456.13 448.51 C455.47 448.51 454.81 448.51 454.13 448.51 C454.13 449.5 454.13 450.49 454.13 451.51 C453.47 451.51 452.81 451.51 452.13 451.51 C451.98 452.11 451.84 452.7 451.69 453.32 C451.24 455.07 450.7 456.8 450.13 458.51 C449.47 458.51 448.81 458.51 448.13 458.51 C448.13 459.5 448.13 460.49 448.13 461.51 C447.47 461.51 446.81 461.51 446.13 461.51 C444.92 463.84 443.96 466 443.13 468.51 C442.47 468.51 441.81 468.51 441.13 468.51 C441.13 469.5 441.13 470.49 441.13 471.51 C440.47 471.51 439.81 471.51 439.13 471.51 C439.13 472.5 439.13 473.49 439.13 474.51 C438.47 474.51 437.81 474.51 437.13 474.51 C437.13 475.5 437.13 476.49 437.13 477.51 C436.47 477.51 435.81 477.51 435.13 477.51 C435.13 478.83 435.13 480.15 435.13 481.51 C434.47 482.17 433.81 482.83 433.13 483.51 C430.84 486.21 429.26 488.13 428.13 491.51 C427.47 491.51 426.81 491.51 426.13 491.51 C426.13 492.5 426.13 493.49 426.13 494.51 C425.47 494.51 424.81 494.51 424.13 494.51 C424.13 495.5 424.13 496.49 424.13 497.51 C423.47 497.51 422.81 497.51 422.13 497.51 C422.13 498.5 422.13 499.49 422.13 500.51 C421.47 500.51 420.81 500.51 420.13 500.51 C419.8 501.83 419.47 503.15 419.13 504.51 C418.47 504.51 417.81 504.51 417.13 504.51 C417.46 505.5 417.79 506.49 418.13 507.51 C417.17 508.41 417.17 508.41 416.19 509.32 C413.93 511.42 413.93 511.42 413.13 514.51 C412.47 514.51 411.81 514.51 411.13 514.51 C411.13 515.5 411.13 516.49 411.13 517.51 C410.47 517.51 409.81 517.51 409.13 517.51 C409.13 518.5 409.13 519.49 409.13 520.51 C408.47 520.51 407.81 520.51 407.13 520.51 C407.13 521.5 407.13 522.49 407.13 523.51 C406.47 523.51 405.81 523.51 405.13 523.51 C404.8 524.83 404.47 526.15 404.13 527.51 C403.47 527.51 402.81 527.51 402.13 527.51 C402.03 528.04 401.92 528.58 401.82 529.13 C400.95 532.13 399.57 534.75 398.13 537.51 C397.47 537.51 396.81 537.51 396.13 537.51 C396.13 538.5 396.13 539.49 396.13 540.51 C395.47 540.51 394.81 540.51 394.13 540.51 C394.13 541.5 394.13 542.49 394.13 543.51 C393.47 543.51 392.81 543.51 392.13 543.51 C390.92 545.84 389.96 548 389.13 550.51 C388.14 550.84 387.15 551.17 386.13 551.51 C384.58 548.06 383.88 545.37 383.89 541.59 C383.88 540.63 383.88 539.66 383.88 538.66 C383.88 537.6 383.89 536.55 383.89 535.46 C383.89 534.33 383.89 533.2 383.89 532.04 C383.89 528.25 383.9 524.46 383.92 520.67 C383.92 517.96 383.92 515.24 383.92 512.53 C383.92 506.68 383.93 500.83 383.95 494.99 C383.97 486.52 383.98 478.05 383.98 469.59 C383.99 455.84 384.01 442.08 384.03 428.33 C384.03 427.51 384.04 426.69 384.04 425.84 C384.04 425.02 384.04 424.19 384.04 423.34 C384.06 411.67 384.08 400 384.09 388.34 C384.1 387.51 384.1 386.69 384.1 385.85 C384.12 372.16 384.13 358.46 384.14 344.77 C384.15 336.33 384.16 327.88 384.18 319.44 C384.19 313.65 384.2 307.87 384.2 302.08 C384.21 298.74 384.21 295.4 384.22 292.07 C384.23 288.44 384.23 284.82 384.24 281.19 C384.24 279.63 384.24 279.63 384.25 278.03 C384.24 271.79 383.84 265.7 383.13 259.51 C382.99 257.74 382.84 255.98 382.71 254.21 C380.57 230.6 375.88 200.99 357.13 184.51 C327.34 162.39 289.24 163.35 253.73 163.36 C251.2 163.36 248.68 163.36 246.16 163.35 C240.05 163.34 233.95 163.34 227.84 163.34 C222.87 163.34 217.9 163.34 212.92 163.34 C198.76 163.33 184.6 163.32 170.44 163.32 C169.68 163.32 168.92 163.32 168.14 163.32 C167.37 163.32 166.61 163.32 165.83 163.32 C153.51 163.32 141.19 163.31 128.87 163.3 C116.16 163.29 103.45 163.28 90.74 163.28 C83.63 163.28 76.51 163.28 69.4 163.27 C62.71 163.26 56.01 163.26 49.31 163.26 C46.87 163.26 44.44 163.26 42 163.26 C-12.18 162.7 -12.18 162.7 -58.73 187.17 C-65.42 194.47 -69.58 202.21 -72.87 211.51 C-73.3 212.7 -73.73 213.89 -74.18 215.12 C-79.14 230.34 -78.56 245.98 -78.47 261.79 C-78.45 266 -78.46 270.21 -78.46 274.42 C-78.47 282.65 -78.45 290.88 -78.42 299.1 C-78.39 308.72 -78.38 318.34 -78.38 327.96 C-78.38 345.16 -78.35 362.36 -78.3 379.56 C-78.26 396.16 -78.23 412.77 -78.22 429.38 C-78.22 430.4 -78.22 431.42 -78.22 432.47 C-78.22 436.57 -78.21 440.68 -78.21 444.78 C-78.2 462.63 -78.17 480.48 -78.15 498.33 C-78.14 501.19 -78.14 504.05 -78.14 506.91 C-78.12 516.96 -78.11 527.01 -78.08 537.07 C-78.07 541.21 -78.06 545.36 -78.06 549.51 C-78.04 565.42 -77.94 581.33 -77.57 597.24 C-77.53 598.74 -77.5 600.24 -77.48 601.74 C-77.26 613.29 -75.57 623.58 -71.87 634.51 C-71.51 636.17 -71.16 637.83 -70.87 639.51 C-70.21 639.51 -69.55 639.51 -68.87 639.51 C-68.55 640.19 -68.24 640.86 -67.91 641.56 C-60.34 656.67 -47.58 665.94 -32 671.76 C-9.99 679.04 12.26 679.09 35.17 679.02 C39.85 679.01 44.54 679.02 49.22 679.03 C58.36 679.04 67.5 679.03 76.65 679.02 C87.32 679 97.98 679 108.65 679.01 C127.7 679.01 146.75 679 165.79 678.97 C184.23 678.95 202.68 678.94 221.12 678.95 C241.25 678.97 261.39 678.97 281.52 678.95 C283.67 678.95 285.82 678.95 287.97 678.95 C289.03 678.95 290.09 678.95 291.18 678.95 C298.6 678.94 306.02 678.94 313.44 678.95 C322.49 678.95 331.55 678.95 340.6 678.93 C345.21 678.92 349.82 678.91 354.43 678.92 C358.66 678.93 362.89 678.92 367.12 678.9 C368.64 678.9 370.16 678.9 371.68 678.91 C396.89 679.01 417.89 673.46 437.33 656.72 C439.38 654.62 439.38 654.62 439.4 651.73 C439.31 651 439.22 650.27 439.13 649.51 C440.12 649.51 441.11 649.51 442.13 649.51 C442.79 647.53 443.45 645.55 444.13 643.51 C444.79 643.51 445.45 643.51 446.13 643.51 C446.13 642.52 446.13 641.53 446.13 640.51 C446.79 640.51 447.45 640.51 448.13 640.51 C448.13 639.52 448.13 638.53 448.13 637.51 C448.79 637.51 449.45 637.51 450.13 637.51 C450.13 636.52 450.13 635.53 450.13 634.51 C450.79 634.51 451.45 634.51 452.13 634.51 C452.46 633.19 452.79 631.87 453.13 630.51 C453.79 630.51 454.45 630.51 455.13 630.51 C455.27 629.89 455.42 629.27 455.57 628.63 C456.13 626.51 456.13 626.51 457.13 624.51 C457.79 624.51 458.45 624.51 459.13 624.51 C459.13 623.19 459.13 621.87 459.13 620.51 C459.79 620.51 460.45 620.51 461.13 620.51 C461.13 619.52 461.13 618.53 461.13 617.51 C461.79 617.51 462.45 617.51 463.13 617.51 C463.13 616.52 463.13 615.53 463.13 614.51 C463.79 614.51 464.45 614.51 465.13 614.51 C465.13 613.52 465.13 612.53 465.13 611.51 C465.79 611.51 466.45 611.51 467.13 611.51 C467.46 610.19 467.79 608.87 468.13 607.51 C468.79 607.51 469.45 607.51 470.13 607.51 C470.27 606.89 470.42 606.27 470.57 605.63 C471.13 603.51 471.13 603.51 472.13 601.51 C472.79 601.51 473.45 601.51 474.13 601.51 C474.13 600.19 474.13 598.87 474.13 597.51 C474.79 597.51 475.45 597.51 476.13 597.51 C476.13 596.52 476.13 595.53 476.13 594.51 C476.79 594.51 477.45 594.51 478.13 594.51 C478.13 593.52 478.13 592.53 478.13 591.51 C479.44 590.15 480.78 588.82 482.13 587.51 C482.46 586.52 482.79 585.53 483.13 584.51 C483.79 584.51 484.45 584.51 485.13 584.51 C485.13 583.52 485.13 582.53 485.13 581.51 C485.79 581.51 486.45 581.51 487.13 581.51 C487.13 580.52 487.13 579.53 487.13 578.51 C487.79 578.51 488.45 578.51 489.13 578.51 C489.13 577.19 489.13 575.87 489.13 574.51 C489.79 574.51 490.45 574.51 491.13 574.51 C491.13 573.52 491.13 572.53 491.13 571.51 C491.79 571.51 492.45 571.51 493.13 571.51 C493.13 570.52 493.13 569.53 493.13 568.51 C494.44 567.15 495.78 565.82 497.13 564.51 C497.46 563.52 497.79 562.53 498.13 561.51 C498.79 561.51 499.45 561.51 500.13 561.51 C500.13 560.52 500.13 559.53 500.13 558.51 C500.79 558.51 501.45 558.51 502.13 558.51 C502.13 557.52 502.13 556.53 502.13 555.51 C502.79 555.51 503.45 555.51 504.13 555.51 C504.13 554.19 504.13 552.87 504.13 551.51 C504.79 551.51 505.45 551.51 506.13 551.51 C506.4 550.95 506.68 550.38 506.96 549.81 C508.17 547.42 509.45 545.09 510.75 542.76 C511.2 541.96 511.65 541.16 512.11 540.34 C512.44 539.73 512.78 539.13 513.13 538.51 C513.79 538.51 514.45 538.51 515.13 538.51 C515.13 537.52 515.13 536.53 515.13 535.51 C515.79 535.51 516.45 535.51 517.13 535.51 C517.13 534.52 517.13 533.53 517.13 532.51 C517.79 532.51 518.45 532.51 519.13 532.51 C519.13 531.19 519.13 529.87 519.13 528.51 C520.5 526.76 520.5 526.76 522.13 525.51 C522.79 525.51 523.45 525.51 524.13 525.51 C524.23 524.97 524.33 524.44 524.44 523.88 C525.31 520.88 526.68 518.27 528.13 515.51 C528.79 515.51 529.45 515.51 530.13 515.51 C530.13 514.52 530.13 513.53 530.13 512.51 C530.79 512.51 531.45 512.51 532.13 512.51 C532.13 511.52 532.13 510.53 532.13 509.51 C533.11 508.49 534.11 507.49 535.13 506.51 C536.3 504.41 536.3 504.41 537.13 502.51 C537.79 502.51 538.45 502.51 539.13 502.51 C539.23 501.97 539.33 501.44 539.44 500.88 C540.31 497.88 541.68 495.27 543.13 492.51 C543.79 492.51 544.45 492.51 545.13 492.51 C545.13 491.52 545.13 490.53 545.13 489.51 C545.79 489.51 546.45 489.51 547.13 489.51 C547.13 488.52 547.13 487.53 547.13 486.51 C548.44 485.15 549.78 483.82 551.13 482.51 C551.46 481.52 551.79 480.53 552.13 479.51 C552.79 479.51 553.45 479.51 554.13 479.51 C554.13 478.52 554.13 477.53 554.13 476.51 C554.79 476.51 555.45 476.51 556.13 476.51 C556.27 475.91 556.42 475.31 556.57 474.7 C557.02 472.95 557.56 471.22 558.13 469.51 C558.79 469.51 559.45 469.51 560.13 469.51 C560.4 468.95 560.68 468.38 560.96 467.81 C562.17 465.42 563.45 463.09 564.75 460.76 C565.2 459.96 565.65 459.16 566.11 458.34 C566.44 457.73 566.78 457.13 567.13 456.51 C567.79 456.51 568.45 456.51 569.13 456.51 C569.13 455.52 569.13 454.53 569.13 453.51 C569.79 453.51 570.45 453.51 571.13 453.51 C571.27 452.91 571.42 452.31 571.57 451.7 C572.83 446.79 572.83 446.79 574.88 444.88 C578.07 441.52 580 437.6 582.13 433.51 C582.79 433.51 583.45 433.51 584.13 433.51 C584.13 432.52 584.13 431.53 584.13 430.51 C584.79 430.51 585.45 430.51 586.13 430.51 C586.27 429.91 586.42 429.31 586.57 428.7 C587.49 425.1 588.27 422.91 591.13 420.51 C591.79 420.51 592.45 420.51 593.13 420.51 C593.23 419.97 593.33 419.44 593.44 418.88 C594.31 415.88 595.68 413.27 597.13 410.51 C597.79 410.51 598.45 410.51 599.13 410.51 C599.13 409.52 599.13 408.53 599.13 407.51 C599.79 407.51 600.45 407.51 601.13 407.51 C601.46 406.19 601.79 404.87 602.13 403.51 C602.79 403.51 603.45 403.51 604.13 403.51 C604.27 402.89 604.42 402.27 604.57 401.63 C605.13 399.51 605.13 399.51 606.13 397.51 C606.79 397.51 607.45 397.51 608.13 397.51 C608.27 396.91 608.42 396.31 608.57 395.7 C609.02 393.95 609.56 392.22 610.13 390.51 C610.79 390.51 611.45 390.51 612.13 390.51 C612.13 389.52 612.13 388.53 612.13 387.51 C612.79 387.51 613.45 387.51 614.13 387.51 C614.13 386.52 614.13 385.53 614.13 384.51 C614.79 384.51 615.45 384.51 616.13 384.51 C616.46 383.19 616.79 381.87 617.13 380.51 C617.79 380.51 618.45 380.51 619.13 380.51 C619.13 379.52 619.13 378.53 619.13 377.51 C619.79 377.51 620.45 377.51 621.13 377.51 C621.13 376.52 621.13 375.53 621.13 374.51 C621.79 374.51 622.45 374.51 623.13 374.51 C623.27 373.91 623.42 373.31 623.57 372.7 C624.02 370.95 624.56 369.22 625.13 367.51 C625.79 367.51 626.45 367.51 627.13 367.51 C627.13 366.52 627.13 365.53 627.13 364.51 C627.79 364.51 628.45 364.51 629.13 364.51 C630.34 362.18 631.29 360.01 632.13 357.51 C632.79 357.51 633.45 357.51 634.13 357.51 C634.13 356.52 634.13 355.53 634.13 354.51 C634.79 354.51 635.45 354.51 636.13 354.51 C636.13 353.52 636.13 352.53 636.13 351.51 C636.79 351.51 637.45 351.51 638.13 351.51 C638.13 350.52 638.13 349.53 638.13 348.51 C638.79 348.51 639.45 348.51 640.13 348.51 C640.13 347.19 640.13 345.87 640.13 344.51 C640.79 343.85 641.45 343.19 642.13 342.51 C644.42 339.8 646 337.89 647.13 334.51 C647.79 334.51 648.45 334.51 649.13 334.51 C649.13 333.52 649.13 332.53 649.13 331.51 C649.79 331.51 650.45 331.51 651.13 331.51 C651.13 330.52 651.13 329.53 651.13 328.51 C651.79 328.51 652.45 328.51 653.13 328.51 C653.13 327.52 653.13 326.53 653.13 325.51 C653.79 325.51 654.45 325.51 655.13 325.51 C655.46 324.19 655.79 322.87 656.13 321.51 C656.79 321.51 657.45 321.51 658.13 321.51 C657.8 320.52 657.47 319.53 657.13 318.51 C658.09 317.61 658.09 317.61 659.07 316.7 C661.33 314.6 661.33 314.6 662.13 311.51 C662.79 311.51 663.45 311.51 664.13 311.51 C664.13 310.52 664.13 309.53 664.13 308.51 C664.79 308.51 665.45 308.51 666.13 308.51 C666.13 307.52 666.13 306.53 666.13 305.51 C666.79 305.51 667.45 305.51 668.13 305.51 C668.13 304.52 668.13 303.53 668.13 302.51 C668.79 302.51 669.45 302.51 670.13 302.51 C670.46 301.19 670.79 299.87 671.13 298.51 C671.79 298.51 672.45 298.51 673.13 298.51 C673.23 297.97 673.33 297.44 673.44 296.88 C674.31 293.88 675.68 291.27 677.13 288.51 C677.79 288.51 678.45 288.51 679.13 288.51 C679.13 287.52 679.13 286.53 679.13 285.51 C679.79 285.51 680.45 285.51 681.13 285.51 C681.13 284.52 681.13 283.53 681.13 282.51 C681.79 282.51 682.45 282.51 683.13 282.51 C684.34 280.18 685.29 278.01 686.13 275.51 C686.79 275.51 687.45 275.51 688.13 275.51 C688.13 274.52 688.13 273.53 688.13 272.51 C688.79 272.51 689.45 272.51 690.13 272.51 C690.23 271.97 690.33 271.44 690.44 270.88 C691.31 267.88 692.68 265.27 694.13 262.51 C694.79 262.51 695.45 262.51 696.13 262.51 C696.13 261.52 696.13 260.53 696.13 259.51 C697.44 258.15 698.78 256.82 700.13 255.51 C700.46 254.52 700.79 253.53 701.13 252.51 C701.79 252.51 702.45 252.51 703.13 252.51 C703.13 251.52 703.13 250.53 703.13 249.51 C703.79 249.51 704.45 249.51 705.13 249.51 C705.23 248.97 705.33 248.44 705.44 247.88 C706.59 243.9 708.19 240.45 711.13 237.51 C713.42 234.8 715 232.89 716.13 229.51 C716.79 229.51 717.45 229.51 718.13 229.51 C718.13 228.52 718.13 227.53 718.13 226.51 C718.79 226.51 719.45 226.51 720.13 226.51 C720.27 225.91 720.42 225.31 720.57 224.7 C721.02 222.95 721.56 221.22 722.13 219.51 C722.79 219.51 723.45 219.51 724.13 219.51 C724.54 218.67 724.54 218.67 724.96 217.81 C726.17 215.42 727.45 213.09 728.75 210.76 C729.2 209.96 729.65 209.16 730.11 208.34 C730.44 207.73 730.78 207.13 731.13 206.51 C731.79 206.51 732.45 206.51 733.13 206.51 C733.13 205.52 733.13 204.53 733.13 203.51 C733.79 203.51 734.45 203.51 735.13 203.51 C735.21 202.97 735.29 202.44 735.38 201.88 C736.4 198.63 738.09 196.22 740.13 193.51 C740.79 193.51 741.45 193.51 742.13 193.51 C742.23 192.97 742.33 192.44 742.44 191.88 C743.31 188.88 744.68 186.27 746.13 183.51 C746.79 183.51 747.45 183.51 748.13 183.51 C748.13 182.52 748.13 181.53 748.13 180.51 C748.79 180.51 749.45 180.51 750.13 180.51 C750.23 179.91 750.33 179.31 750.44 178.7 C751.23 176.19 752.26 175.3 754.13 173.51 C754.46 172.52 754.79 171.53 755.13 170.51 C755.79 170.51 756.45 170.51 757.13 170.51 C757.13 169.52 757.13 168.53 757.13 167.51 C757.79 167.51 758.45 167.51 759.13 167.51 C759.27 166.91 759.42 166.31 759.57 165.7 C760.02 163.95 760.56 162.22 761.13 160.51 C761.79 160.51 762.45 160.51 763.13 160.51 C763.13 159.52 763.13 158.53 763.13 157.51 C764.77 155.82 766.44 154.16 768.13 152.51 C769.42 150.63 770.64 148.7 771.81 146.74 C772.82 145.05 772.82 145.05 773.85 143.33 C774.2 142.74 774.55 142.15 774.91 141.54 C776.79 138.37 778.69 135.22 780.58 132.07 C781.16 131.11 781.16 131.11 781.74 130.13 C785.34 124.13 789.03 118.18 792.75 112.26 C793.36 111.29 793.97 110.32 794.6 109.31 C795.83 107.36 797.05 105.41 798.28 103.45 C800.16 100.46 802.03 97.46 803.91 94.45 C810.5 83.87 817.14 73.32 823.85 62.81 C828.9 54.89 833.87 46.93 838.84 38.96 C843.54 31.43 848.3 23.95 853.13 16.51 C855.35 16.58 855.35 16.58 858.13 17.51 C859.86 19.77 861.23 21.86 862.63 24.32 C863.5 25.79 864.38 27.25 865.26 28.72 C865.72 29.5 866.18 30.28 866.66 31.08 C869.19 35.27 871.88 39.35 874.57 43.45 C875.68 45.16 876.8 46.87 877.92 48.59 C878.46 49.42 879 50.25 879.56 51.11 C887.14 62.72 894.62 74.39 902.09 86.08 C906.75 93.38 911.46 100.65 916.19 107.91 C921.24 115.65 926.21 123.44 931.19 131.23 C935.31 137.67 939.45 144.1 943.63 150.51 C948.5 157.98 953.33 165.49 958.13 173.01 C964.59 183.12 971.11 193.2 977.66 203.25 C985.19 214.82 992.65 226.44 1000.09 238.08 C1004.75 245.38 1009.46 252.65 1014.19 259.91 C1018.54 266.59 1022.84 273.29 1027.13 280.01 C1033.59 290.12 1040.11 300.2 1046.66 310.25 C1054.19 321.82 1061.65 333.44 1069.09 345.08 C1073.75 352.38 1078.46 359.65 1083.19 366.91 C1087.54 373.59 1091.84 380.29 1096.13 387.01 C1102.59 397.12 1109.11 407.2 1115.66 417.25 C1123.19 428.82 1130.65 440.44 1138.09 452.08 C1142.75 459.38 1147.46 466.65 1152.19 473.91 C1156.54 480.59 1160.84 487.29 1165.13 494.01 C1171.57 504.1 1178.08 514.15 1184.61 524.18 C1187.12 528.03 1189.63 531.9 1192.13 535.76 C1192.78 536.76 1192.78 536.76 1193.44 537.78 C1194.67 539.69 1195.9 541.6 1197.13 543.51 C1197.83 544.59 1197.83 544.59 1198.55 545.7 C1199.01 546.41 1199.47 547.13 1199.94 547.87 C1200.36 548.52 1200.78 549.17 1201.21 549.84 C1202.13 551.51 1202.13 551.51 1202.13 553.51 C1202.79 553.51 1203.45 553.51 1204.13 553.51 C1205.7 555.79 1207.14 558.07 1208.57 560.45 C1209.47 561.93 1210.38 563.4 1211.28 564.88 C1211.99 566.03 1211.99 566.03 1212.71 567.21 C1214.94 570.82 1217.25 574.38 1219.57 577.95 C1220.02 578.65 1220.48 579.36 1220.96 580.08 C1221.89 581.52 1222.82 582.95 1223.75 584.38 C1225.55 587.16 1227.35 589.95 1229.15 592.73 C1230.99 595.57 1232.83 598.41 1234.66 601.25 C1235.67 602.8 1236.68 604.36 1237.68 605.91 C1243.58 615.02 1249.49 624.1 1255.5 633.13 C1255.97 633.83 1256.43 634.53 1256.91 635.25 C1259.39 638.96 1261.91 642.63 1264.49 646.27 C1268.48 651.95 1272.22 657.78 1275.94 663.63 C1276.64 664.74 1277.35 665.84 1278.07 666.97 C1281.85 672.9 1285.61 678.85 1289.32 684.82 C1297.14 697.41 1305.29 709.79 1313.5 722.13 C1313.97 722.83 1314.43 723.53 1314.91 724.25 C1317.39 727.96 1319.91 731.63 1322.49 735.27 C1326.49 740.96 1330.22 746.82 1333.94 752.7 C1342.24 765.72 1350.67 778.58 1359.7 791.11 C1362.05 794.38 1364.34 797.69 1366.63 801.01 C1369.67 805.42 1372.75 809.79 1375.88 814.13 C1380.06 819.96 1384.14 825.84 1388.19 831.76 C1388.76 832.59 1389.34 833.43 1389.93 834.29 C1390.46 835.07 1390.99 835.85 1391.54 836.65 C1392.01 837.35 1392.49 838.04 1392.98 838.76 C1394.13 840.51 1394.13 840.51 1395.13 842.51 C1229.47 842.51 1063.81 842.51 893.13 842.51 C892.8 841.52 892.47 840.53 892.13 839.51 C891.47 839.51 890.81 839.51 890.13 839.51 C888.72 837.58 888.72 837.58 887.07 834.85 C883.3 828.75 879.32 822.81 875.28 816.88 C873 813.54 870.73 810.19 868.46 806.84 C867.96 806.11 867.47 805.39 866.96 804.64 C860.86 795.64 854.77 786.63 848.69 777.62 C847.41 775.73 846.13 773.84 844.85 771.95 C832.76 754.06 832.76 754.06 827.45 745.62 C825.75 742.9 823.98 740.23 822.19 737.57 C821.52 736.57 820.85 735.57 820.16 734.54 C819.16 733.04 819.16 733.04 818.13 731.51 C816.79 729.51 815.46 727.51 814.13 725.51 C813.47 724.52 812.81 723.53 812.13 722.51 C806.13 713.51 806.13 713.51 804.13 710.51 C802.79 708.5 801.44 706.48 800.09 704.47 C787.13 685.11 787.13 685.11 787.13 683.51 C921.77 683.01 921.77 683.01 1059.13 682.51 C1049.08 665.43 1049.08 665.43 1038.69 648.57 C1033.62 640.51 1028.62 632.41 1023.69 624.26 C1019.64 617.58 1015.53 610.99 1011.15 604.52 C1004.77 595 998.75 585.22 992.82 575.41 C992.45 574.8 992.08 574.18 991.7 573.55 C989.85 570.49 988.01 567.44 986.18 564.38 C982.55 558.34 978.77 552.47 974.67 546.72 C972.49 543.59 970.58 540.33 968.69 537.01 C964.44 529.66 960.03 522.42 955.57 515.2 C949.82 505.89 944.11 496.55 938.44 487.2 C933.54 479.11 928.62 471.04 923.63 463.01 C918.64 454.98 913.72 446.91 908.82 438.82 C902.57 428.5 896.27 418.22 889.94 407.95 C885.65 400.98 881.38 394 877.13 387.01 C872.33 379.11 867.52 371.22 862.68 363.34 C861.66 361.69 860.65 360.03 859.63 358.37 C858.69 356.84 858.69 356.84 857.72 355.27 C856.9 353.92 856.9 353.92 856.06 352.55 C853.48 348.49 850.81 344.5 848.13 340.51 C847.83 340.97 847.52 341.43 847.21 341.91 C833.46 362.87 819.67 383.81 805.63 404.57 C805.08 405.38 804.53 406.19 803.97 407.03 C800.6 412.01 797.23 416.99 793.85 421.96 C788.48 429.89 783.11 437.82 777.75 445.76 C777.15 446.65 776.55 447.54 775.93 448.46 C766.12 462.98 756.45 477.6 746.83 492.25 C734.64 510.8 722.23 529.21 709.79 547.6 C705.54 553.89 701.32 560.19 697.13 566.51 C692.37 573.68 687.57 580.83 682.74 587.96 C670.18 606.53 657.69 625.14 645.38 643.88 C633.98 661.23 622.44 678.47 610.78 695.65 C606.96 701.27 603.16 706.9 599.37 712.54 C598.24 714.21 597.11 715.89 595.98 717.56 C594.36 719.96 592.75 722.36 591.13 724.76 C585.65 732.91 580.13 741.02 574.36 748.96 C572.11 752.06 570.09 755.23 568.13 758.51 C567.28 759.62 566.4 760.71 565.49 761.78 C565 762.35 564.51 762.93 564 763.52 C563.49 764.11 562.97 764.71 562.44 765.32 C561.91 765.94 561.37 766.56 560.82 767.2 C557.33 771.21 553.72 775.04 549.9 778.74 C548.15 780.48 546.58 782.3 545 784.2 C532.71 798.42 517.41 810.24 501.13 819.51 C500.11 820.09 499.09 820.68 498.04 821.28 C460.67 841.32 416.27 842.57 374.88 842.79 C371.17 842.81 367.47 842.84 363.76 842.86 C356.48 842.91 349.21 842.96 341.93 843 C335.93 843.03 329.94 843.07 323.95 843.11 C322.65 843.12 322.65 843.12 321.33 843.12 C319.58 843.13 317.82 843.15 316.07 843.16 C299.57 843.26 283.08 843.36 266.59 843.45 C252.77 843.54 238.96 843.62 225.15 843.71 C185.89 843.96 146.64 844.19 107.38 844.36 C106.51 844.37 105.65 844.37 104.76 844.38 C103.89 844.38 103.03 844.38 102.14 844.39 C100.84 844.39 100.84 844.39 99.52 844.4 C97.79 844.41 96.05 844.42 94.31 844.42 C81.33 844.48 68.36 844.55 55.38 844.63 C40.55 844.72 25.71 844.79 10.87 844.83 C2.54 844.86 -5.79 844.9 -14.13 844.95 C-19.73 844.99 -25.34 845.01 -30.94 845.02 C-34.13 845.02 -37.31 845.03 -40.5 845.07 C-56.32 845.21 -70.9 843.72 -86.32 840.1 C-88.65 839.56 -91 839.05 -93.34 838.56 C-122.44 832.43 -150.05 816.72 -171.69 796.54 C-173.66 794.71 -175.68 792.98 -177.75 791.26 C-218.25 755.73 -230.44 703.13 -234.87 651.51 C-235.74 638.11 -235.6 624.65 -235.58 611.22 C-235.58 606.03 -235.6 600.84 -235.62 595.66 C-235.66 585.59 -235.67 575.52 -235.68 565.46 C-235.68 553.74 -235.71 542.01 -235.75 530.29 C-235.81 507.25 -235.84 484.22 -235.85 461.18 C-235.87 444.7 -235.89 428.22 -235.91 411.74 C-235.95 386.99 -235.98 362.23 -235.99 337.48 C-236 334.45 -236 331.42 -236 328.39 C-236.01 316.89 -236.01 305.39 -236.01 293.89 C-236 290.45 -236 287.01 -236.01 283.57 C-236.02 266.49 -235.9 249.43 -235.42 232.36 C-235.4 231.63 -235.38 230.9 -235.36 230.14 C-235.06 219.05 -234.33 208.12 -232.75 197.13 C-232.53 195.52 -232.31 193.91 -232.09 192.3 C-224.75 139.72 -210.86 97.83 -173.87 58.51 C-173.18 57.75 -172.48 56.99 -171.77 56.21 C-127.5 9.46 -61.21 -0.25 0 0 Z " fill="#fff" transform="translate(437.8712748289108,72.49176037311554)"/>
+    <path d="" fill="#000000" transform="translate(0,0)"/>
+    <path d="" fill="#000000" transform="translate(0,0)"/>
+    <path d="" fill="#000000" transform="translate(0,0)"/>
+    </g>
+</svg>
\ No newline at end of file

From 4f95fcafe63f6b748cefc12d4a50e16e38753b05 Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Mon, 16 Jun 2025 20:19:24 +0200
Subject: [PATCH 25/27] the biggest part should be finished... Enhances
 reservation system UI and backend error handling

Updates error messages in `ReservationController` to provide user-friendly suggestions. Adds a new room in the backend seeder and fixes formatting in participant names.

Improves frontend UI components:
- Introduces `FAQAccordion` for user guidance.
- Refines error message styling to ensure consistency.
- Enhances `CurrentReservation` for better key management with warnings.
- Adds hover effects and visual polish to `AccordionItem`.

Fixes styling inconsistencies and improves user experience throughout.
---
 .../controller/ReservationController.java     |   4 +-
 .../ims/orariaperti/utilities/Seeder.java     |   7 +-
 .../src/components/CurrentReservation.tsx     | 123 ++++++++++++------
 .../frontend/src/components/FAQAccordion.tsx  |  87 +++++++++++++
 OrariAperti/frontend/src/components/Main.tsx  |   8 +-
 .../dialogs/NewReservationDialog.tsx          |  12 +-
 .../frontend/src/components/ui/accordion.tsx  |   5 +-
 7 files changed, 194 insertions(+), 52 deletions(-)
 create mode 100644 OrariAperti/frontend/src/components/FAQAccordion.tsx

diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
index f924000..73faaeb 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/controller/ReservationController.java
@@ -61,7 +61,7 @@ public ResponseEntity<?> createReservation(@RequestBody ReservationDTO reservati
             }
             Room room = roomRepository.findById(reservationDTO.getRoomId()).orElse(null);
             if (room == null) {
-                throw new Exception("Room not found.");
+                throw new Exception("Room not found. Please hard reload the page (ctrl + F5)");
             }
             for (Reservation reservation : reservationRepository.findAll()) {
                 boolean isSameRoom = reservation.getRoom().getId().equals(room.getId());
@@ -117,7 +117,7 @@ public ResponseEntity<?> updateReservation(@PathVariable UUID id, @RequestBody R
             }
             Room room = roomRepository.findById(reservationDTO.getRoomId()).orElse(null);
             if (room == null) {
-                throw new Exception("Room not found.");
+                throw new Exception("Room not found. Please hard reload the page (ctrl + F5)");
             }
             for (Reservation currentReservationFromDB : reservationRepository.findAll()) {
                 boolean isSameRoom = currentReservationFromDB.getRoom().getId().equals(room.getId());
diff --git a/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java b/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java
index e92726a..9d873a9 100644
--- a/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java
+++ b/OrariAperti/backend/src/main/java/ims/orariaperti/utilities/Seeder.java
@@ -71,6 +71,7 @@ public void run(String... args) {
             Room room320 = roomRepository.save(new Room(null, "320", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.PRINTER))));
             @SuppressWarnings("unused")
             Room room330 = roomRepository.save(new Room(null, "330", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.LOCKERS, RoomFeatures.WIFI))));
+            @SuppressWarnings("unused")
             Room room340 = roomRepository.save(new Room(null, "340", new ArrayList<>(Arrays.asList(RoomFeatures.BEAMER, RoomFeatures.WHITEBOARD, RoomFeatures.AIR_CONDITIONING, RoomFeatures.POWER_OUTLETS))));
             System.out.println("Sample Rooms have been added to the database.");
 
@@ -82,7 +83,7 @@ public void run(String... args) {
                         LocalTime.of(10, 0),
                         room101,
                         "Team Meeting",
-                        "Tom,Johnson",
+                        "Tom, Johnson",
                         UUID.randomUUID(),
                         UUID.randomUUID()
                 ));
@@ -93,7 +94,7 @@ public void run(String... args) {
                         LocalTime.of(12, 0),
                         room102,
                         "Project Discussion",
-                        "Mac,Fluury",
+                        "Mac, Fluury",
                         UUID.randomUUID(),
                         UUID.randomUUID()
                 ));
@@ -104,7 +105,7 @@ public void run(String... args) {
                         LocalTime.of(12, 0),
                         room102,
                         "Project Feedback",
-                        "Pluh,Tompson",
+                        "Pluh, Tompson",
                         UUID.randomUUID(),
                         UUID.randomUUID()
                 ));
diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index ef24bdd..37a73d3 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -14,7 +14,7 @@ import {useState, useEffect} from "react";
 import type {Reservation, Room, ReservationDTO} from "@/types/types";
 import NewReservationDialog from "@/components/dialogs/NewReservationDialog";
 import {toast} from "sonner";
-import {CalendarIcon, CircleX, LucideEdit2, LucideLink, Save} from "lucide-react";
+import {CalendarIcon, CircleX, Globe, LucideEdit2, LucideLink, Save, Shield, LucideTriangleAlert} from "lucide-react";
 import {FeatureBadge} from "@/components/FeatureBadge";
 import {format} from "date-fns";
 import DeleteSingleReservationDialog from "@/components/dialogs/DeleteSingleReservationDialog.tsx";
@@ -22,6 +22,8 @@ import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover.t
 import {Calendar} from "@/components/ui/calendar.tsx";
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
 import {useForm} from "react-hook-form";
+import {HoverCard, HoverCardTrigger, HoverCardContent} from "@/components/ui/hover-card.tsx";
+import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
 
 const API_URL = import.meta.env.VITE_APP_BACKEND_URL;
 
@@ -135,7 +137,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
             setSaving(false);
             return;
         }
-        
+
         try {
             const payload = {
                 ...data,
@@ -152,7 +154,10 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                 const msg = await res.text();
                 throw new Error(msg || "Failed to update reservation");
             }
-            toast.success("Reservation updated!", {description: "The site will refresh automatically in 4.5 seconds to show the accurate information...", duration: 4500});
+            toast.success("Reservation updated!", {
+                description: "The site will refresh automatically in 4.5 seconds to show the accurate information...",
+                duration: 4500
+            });
             const url = new URL(window.location.href);
             url.searchParams.set("privateKey", reservation?.privateKey || "");
             url.searchParams.delete("publicKey");
@@ -190,7 +195,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
             setTimeout(() => {
                 window.location.href = "/";
             }, 3000);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (err: any) {
             toast.error(err.message || "Failed to delete reservation");
         } finally {
@@ -266,7 +271,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                     </PopoverContent>
                                 </Popover>
                                 {errors.date && (
-                                    <span className="text-red-500 text-xs">{errors.date.message}</span>
+                                    <span className="text-destructive text-xs">{errors.date.message}</span>
                                 )}
                             </div>
                             {/* Room Field */}
@@ -311,7 +316,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                     </SelectContent>
                                 </Select>
                                 {errors.roomId && (
-                                    <span className="text-red-500 text-xs">
+                                    <span className="text-destructive text-xs">
                                         {errors.roomId.message}
                                     </span>
                                 )}
@@ -334,7 +339,8 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                             },
                                         })}
                                     >
-                                        <SelectValue defaultValue={reservation.startTime.substring(0, reservation.startTime.length - 3)} />
+                                        <SelectValue
+                                            defaultValue={reservation.startTime.substring(0, reservation.startTime.length - 3)}/>
                                     </SelectTrigger>
                                     <SelectContent>
                                         {Array.from({length: 31}, (_, i) => {
@@ -350,7 +356,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                     </SelectContent>
                                 </Select>
                                 {errors.startTime && (
-                                    <span className="text-red-500 text-xs">
+                                    <span className="text-destructive text-xs">
                                         {errors.startTime.message}
                                     </span>
                                 )}
@@ -373,7 +379,8 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                             },
                                         })}
                                     >
-                                        <SelectValue defaultValue={reservation.endTime.substring(0, reservation.endTime.length - 3)}/>
+                                        <SelectValue
+                                            defaultValue={reservation.endTime.substring(0, reservation.endTime.length - 3)}/>
                                     </SelectTrigger>
                                     <SelectContent>
                                         {Array.from({length: 31}, (_, i) => {
@@ -389,7 +396,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                     </SelectContent>
                                 </Select>
                                 {errors.endTime && (
-                                    <span className="text-red-500 text-xs">
+                                    <span className="text-destructive text-xs">
                                         {errors.endTime.message}
                                     </span>
                                 )}
@@ -407,7 +414,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                 className="resize-none"
                             />
                             {errors.description && (
-                                <span className="text-red-500 text-xs">
+                                <span className="text-destructive text-xs">
                                     {errors.description.message}
                                 </span>
                             )}
@@ -430,7 +437,7 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                                 })}
                             />
                             {errors.participants && (
-                                <span className="text-red-500 text-xs">
+                                <span className="text-destructive text-xs">
                                     {errors.participants.message}
                                 </span>
                             )}
@@ -498,37 +505,77 @@ export default function CurrentReservation({reservation}: { reservation?: Reserv
                     <div>
                         <div className="flex flex-col gap-1">
                             {reservation.privateKey && (
+
                                 <>
-                                    <Label htmlFor={"privatekey-input-current"} className={"cursor-pointer"}>Private
-                                                                                                             Key</Label>
-                                    <Input
-                                        id="privatekey-input-current"
-                                        type="text"
-                                        value={reservation.privateKey}
-                                        readOnly
-                                        className="bg-muted mb-3 cursor-pointer select-all"
-                                        onClick={e => {
-                                            (e.target as HTMLInputElement).select();
-                                            navigator.clipboard.writeText(reservation.privateKey).then();
-                                            toast.success("Private key copied to clipboard!");
-                                        }}/>
+                                    <HoverCard>
+                                        <HoverCardTrigger asChild>
+                                            <div>
+                                                <Label htmlFor={"privatekey-input-current"}
+                                                       className={"cursor-pointer"}>Private Key</Label>
+                                                <Input
+                                                    id="privatekey-input-current"
+                                                    type="text"
+                                                    value={reservation.privateKey}
+                                                    readOnly
+                                                    className="bg-muted mb-3 cursor-pointer select-all"
+                                                    onClick={e => {
+                                                        (e.target as HTMLInputElement).select();
+                                                        navigator.clipboard.writeText(reservation.privateKey).then();
+                                                        toast.success("Private key copied to clipboard!");
+                                                    }}/>
+                                            </div>
+                                        </HoverCardTrigger>
+                                        <HoverCardContent asChild>
+                                            <Alert variant={"destructive"}>
+                                                <AlertTitle className={"text-xs flex gap-1 text-destructive"}>
+                                                    <LucideTriangleAlert size={30} className={"mt-[1px]"}/>
+                                                    Never share your private key with anyone.
+                                                </AlertTitle>
+                                                <AlertDescription className={"text-xs"}>
+                                                    It is used to securely access and manage your reservations.
+                                                    Sharing it will allow others to edit or delete your reservations.
+                                                </AlertDescription>
+                                            </Alert>
+                                        </HoverCardContent>
+                                    </HoverCard>
                                 </>
                             )}
                             {reservation.publicKey && (
                                 <>
-                                    <Label htmlFor={"publickey-input-current"} className={"cursor-pointer"}>Public
-                                                                                                            Key</Label>
-                                    <Input
-                                        id="publickey-input-current"
-                                        type="text"
-                                        value={reservation.publicKey}
-                                        readOnly
-                                        className="bg-muted cursor-pointer select-all"
-                                        onClick={e => {
-                                            (e.target as HTMLInputElement).select();
-                                            navigator.clipboard.writeText(reservation.publicKey).then();
-                                            toast.success("Public key copied to clipboard!");
-                                        }}/>
+                                    <HoverCard>
+                                        <HoverCardTrigger asChild>
+                                            <div>
+                                                <Label htmlFor={"publickey-input-current"} className={"cursor-pointer"}>Public
+                                                                                                                        Key</Label>
+                                                <Input
+                                                    id="publickey-input-current"
+                                                    type="text"
+                                                    value={reservation.publicKey}
+                                                    readOnly
+                                                    className="bg-muted cursor-pointer select-all"
+                                                    onClick={e => {
+                                                        (e.target as HTMLInputElement).select();
+                                                        navigator.clipboard.writeText(reservation.publicKey).then();
+                                                        toast.success("Public key copied to clipboard!");
+                                                    }}/>
+                                            </div>
+                                        </HoverCardTrigger>
+                                        <HoverCardContent asChild onClick={() => {
+                                            handleCopyLink()
+                                        }} className={"hover:cursor-pointer"}>
+                                            <Alert>
+                                                <AlertTitle className={"text-xs flex gap-1"}>
+                                                    <LucideLink size={15}/>
+                                                    Share your public key
+                                                </AlertTitle>
+                                                <AlertDescription className={"text-xs"}>
+                                                    Share your public key with others to allow them to view your
+                                                    reservations without giving them access to manage them. You can
+                                                    click on me to copy it to your clipboard.
+                                                </AlertDescription>
+                                            </Alert>
+                                        </HoverCardContent>
+                                    </HoverCard>
                                 </>
                             )}
                         </div>
diff --git a/OrariAperti/frontend/src/components/FAQAccordion.tsx b/OrariAperti/frontend/src/components/FAQAccordion.tsx
new file mode 100644
index 0000000..e514c56
--- /dev/null
+++ b/OrariAperti/frontend/src/components/FAQAccordion.tsx
@@ -0,0 +1,87 @@
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion"
+import { Badge } from "@/components/ui/badge";
+import {SquareArrowOutUpRight} from "lucide-react";
+
+export default function FAQAccordion() {
+    return (
+        <><Accordion
+            type="single"
+            collapsible
+            className="w-2/3 mx-auto my-8"
+        >
+            <AccordionItem value="item-1">
+                <AccordionTrigger className={"hover:cursor-pointer"}>How do I reserve a room?</AccordionTrigger>
+                <AccordionContent className="flex flex-col gap-4 text-balance">
+                    <p>
+                        Click the "Create Reservation" button on the main page and fill out
+                        the form with the required details such as date, time, room,
+                        description, and participants. The system will check if the room is
+                        available before confirming your reservation. Then you will be able to
+                        share the reservation with others using the easy-to-use share link.
+                        (works via the public key)
+                    </p>
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+                <AccordionTrigger className={"hover:cursor-pointer"}>What are the private and public keys for?</AccordionTrigger>
+                <AccordionContent className="flex flex-col gap-4 text-balance">
+                    <p>
+                        After creating a reservation, you receive two keys: a <b>private key</b> and a <b>public key</b>.
+                        <br/>The private key allows you to edit or delete your reservation, while the public key can be
+                        shared with others so they can view the reservation details, but not modify them.
+                    </p>
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3">
+                <AccordionTrigger className={"hover:cursor-pointer"}>Do I need an account to use the system?</AccordionTrigger>
+                <AccordionContent className="flex flex-col gap-4 text-balance">
+                    <p>
+                        No account is required. All reservation management is done using the private and public keys
+                        provided after creating a reservation. <b>Keep your private key secure, as it grants full
+                                                                  control over your reservation.</b>
+                    </p>
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-4">
+                <AccordionTrigger className={"hover:cursor-pointer"}>What rules apply to reservations?</AccordionTrigger>
+                <AccordionContent className="flex flex-col gap-4 text-balance">
+                    <p>
+                        Reservations can only be made for available rooms and valid time slots. The system prevents
+                        overlapping bookings and ensures that the start time is before the end time. Reservations cannot
+                        be made in the past. The participant field only allows letters, spaces, and commas.
+                    </p>
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-5">
+                <AccordionTrigger className={"hover:cursor-pointer"}>What if I lose my private or public key?</AccordionTrigger>
+                <AccordionContent className="flex flex-col gap-4 text-balance">
+                    <p>
+                        If you lose your private key, you will not be able to edit or delete your reservation.
+                        Similarly, if you lose your public key, you cannot share the reservation for viewing unless you
+                        still have the private key. Then you can restore the public key by entering the private and
+                        copying the public one.
+                        <br/><br/>For security reasons, we cannot recover lost keys. You will need to create a new
+                        reservation if necessary.
+                    </p>
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-6">
+                <AccordionTrigger className={"hover:cursor-pointer"}>Who can I contact for support or issues?</AccordionTrigger>
+                <AccordionContent className="flex flex-col gap-4 text-balance">
+                    <p>
+                        If you encounter technical issues or have questions not answered here, please contact us
+                        on <Badge><a href="https://github.com/orgs/IMS-coding-projects/teams/dev" className={"flex"}><SquareArrowOutUpRight size={15} className={"mr-1"}/>GitHub</a></Badge>.
+                        We are glad to help you with any problems or concerns you may have regarding the reservation
+                        system.
+                    </p>
+                </AccordionContent>
+            </AccordionItem>
+        </Accordion>
+        </>
+    )
+}
diff --git a/OrariAperti/frontend/src/components/Main.tsx b/OrariAperti/frontend/src/components/Main.tsx
index c14b8ba..c16c241 100644
--- a/OrariAperti/frontend/src/components/Main.tsx
+++ b/OrariAperti/frontend/src/components/Main.tsx
@@ -2,6 +2,8 @@ import { useState } from "react";
 import AccessKeys from "@/components/AccessKeys.tsx";
 import CurrentReservation from "@/components/CurrentReservation.tsx";
 import type { Reservation } from "@/types/types";
+import { Separator } from "@/components/ui/separator.tsx";
+import FAQAccordion from "@/components/FAQAccordion.tsx";
 
 function getQueryParam(param: string) {
     const params = new URLSearchParams(window.location.search);
@@ -21,18 +23,20 @@ export default function MainUIOnly() {
 
     return (
         <main className="container mx-auto p-6 w-full">
-            <div className="flex flex-col md:flex-row gap-6 min-h-[calc(100vh-100px)]">
+            <div className="flex flex-col md:flex-row gap-6">
                 <div className="w-full md:w-1/3 flex-shrink-0 h-full md:h-auto">
                     <AccessKeys
                         onReservationLoaded={setReservation}
                         publicKey={publicKey || undefined}
                         privateKey={privateKey || undefined}
                     />
-                </div>
+                </div>      
                 <div className="w-full md:w-2/3 flex-grow h-full md:h-auto">
                     <CurrentReservation reservation={reservation}/>
                 </div>
             </div>
+            <Separator className="my-4" />
+            <FAQAccordion/>
         </main>
     );
 }
\ No newline at end of file
diff --git a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
index e86ddd7..aae2ec4 100644
--- a/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
+++ b/OrariAperti/frontend/src/components/dialogs/NewReservationDialog.tsx
@@ -219,7 +219,7 @@ function NewReservation({
                         </PopoverContent>
                     </Popover>
                     {errors.date && (
-                        <span className="text-red-500 text-xs">{errors.date.message}</span>
+                        <span className="text-destructive text-xs">{errors.date.message}</span>
                     )}
                 </div>
                 {/* Room Field */}
@@ -264,7 +264,7 @@ function NewReservation({
                         </SelectContent>
                     </Select>
                     {errors.roomId && (
-                        <span className="text-red-500 text-xs">
+                        <span className="text-destructive text-xs">
                             {errors.roomId.message}
                         </span>
                     )}
@@ -302,7 +302,7 @@ function NewReservation({
                         </SelectContent>
                     </Select>
                     {errors.startTime && (
-                        <span className="text-red-500 text-xs">
+                        <span className="text-destructive text-xs">
                             {errors.startTime.message}
                         </span>
                     )}
@@ -340,7 +340,7 @@ function NewReservation({
                         </SelectContent>
                     </Select>
                     {errors.endTime && (
-                        <span className="text-red-500 text-xs">
+                        <span className="text-destructive text-xs">
                             {errors.endTime.message}
                         </span>
                     )}
@@ -358,7 +358,7 @@ function NewReservation({
                     className="resize-none"
                 />
                 {errors.description && (
-                    <span className="text-red-500 text-xs">
+                    <span className="text-destructive text-xs">
                         {errors.description.message}
                     </span>
                 )}
@@ -381,7 +381,7 @@ function NewReservation({
                     })}
                 />
                 {errors.participants && (
-                    <span className="text-red-500 text-xs">
+                    <span className="text-destructive text-xs">
                         {errors.participants.message}
                     </span>
                 )}
diff --git a/OrariAperti/frontend/src/components/ui/accordion.tsx b/OrariAperti/frontend/src/components/ui/accordion.tsx
index d21b65f..374763c 100644
--- a/OrariAperti/frontend/src/components/ui/accordion.tsx
+++ b/OrariAperti/frontend/src/components/ui/accordion.tsx
@@ -17,7 +17,10 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
+      className={cn(
+          "border border-primary/30 shadow-sm my-4 px-5 bg-card rounded-xl transition-all duration-200 hover:shadow-lg hover:border-primary/80 hover:ring-4 hover:ring-primary/30",
+          className
+      )}
       {...props}
     />
   )

From 117fd6bfdb22e08dfaee25d564dbe30d1a0bc9c1 Mon Sep 17 00:00:00 2001
From: Anon <206556099+An0n-01@users.noreply.github.com>
Date: Wed, 18 Jun 2025 10:58:25 +0200
Subject: [PATCH 26/27] Update README.md

---
 OrariAperti/backend/README.md | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/OrariAperti/backend/README.md b/OrariAperti/backend/README.md
index fafb84e..ad4691a 100644
--- a/OrariAperti/backend/README.md
+++ b/OrariAperti/backend/README.md
@@ -15,14 +15,19 @@ OrariAperti is a room reservation system built with Spring Boot and React.
 
 ### Backend Development
 
-To run the backend only:
+To run the backend:
 
+1. **Copy and Modify the [application.properties](./src/main/resources/application.properties.example)**
 ```bash
-mvn spring-boot:run
+mv ./src/main/resources/application.properties.example ./src/main/resources/application.properties
 ```
 
-and then:
+3. **Build the Application**
+```bash
+mvn spring-boot:run
+```
 
+3. **Run the Application**
 ```bash
 java -jar target/OrariAperti-0.0.1-SNAPSHOT.jar
 ```

From 1cd639a1fcc0f04f5b3b8b416bbd140d3348adaf Mon Sep 17 00:00:00 2001
From: An0n-01 <206556099+an0n-01@users.noreply.github.com>
Date: Wed, 18 Jun 2025 11:04:58 +0200
Subject: [PATCH 27/27] Optimizes build output and enhances UI consistency

Refactors Vite configuration to enable manual chunking for better vendor module separation, improving build performance and maintainability.

Adjusts button styling in reservation deletion dialog for consistency and accessibility, ensuring better user experience.

Removes unused imports to streamline code and minimize dependencies.
---
 .../src/components/CurrentReservation.tsx     |  2 +-
 .../dialogs/DeleteSingleReservationDialog.tsx |  2 +-
 OrariAperti/frontend/vite.config.ts           | 19 +++++++++++++++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/OrariAperti/frontend/src/components/CurrentReservation.tsx b/OrariAperti/frontend/src/components/CurrentReservation.tsx
index 37a73d3..d82112f 100644
--- a/OrariAperti/frontend/src/components/CurrentReservation.tsx
+++ b/OrariAperti/frontend/src/components/CurrentReservation.tsx
@@ -14,7 +14,7 @@ import {useState, useEffect} from "react";
 import type {Reservation, Room, ReservationDTO} from "@/types/types";
 import NewReservationDialog from "@/components/dialogs/NewReservationDialog";
 import {toast} from "sonner";
-import {CalendarIcon, CircleX, Globe, LucideEdit2, LucideLink, Save, Shield, LucideTriangleAlert} from "lucide-react";
+import {CalendarIcon, CircleX, LucideEdit2, LucideLink, Save, LucideTriangleAlert} from "lucide-react";
 import {FeatureBadge} from "@/components/FeatureBadge";
 import {format} from "date-fns";
 import DeleteSingleReservationDialog from "@/components/dialogs/DeleteSingleReservationDialog.tsx";
diff --git a/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx b/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx
index 92cee80..3309d62 100644
--- a/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx
+++ b/OrariAperti/frontend/src/components/dialogs/DeleteSingleReservationDialog.tsx
@@ -28,7 +28,7 @@ export default function DeleteSingleReservationDialog({ onDelete, deleting }: {
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
           <AlertDialogAction asChild>
-            <Button variant="destructive" onClick={onDelete} disabled={deleting}>
+            <Button variant={"destructive"} className={"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 "} onClick={onDelete} disabled={deleting}>
               {deleting ? "Deleting..." : <><Trash2/>Delete</> }
             </Button>
           </AlertDialogAction>
diff --git a/OrariAperti/frontend/vite.config.ts b/OrariAperti/frontend/vite.config.ts
index 2a61f81..d41210a 100644
--- a/OrariAperti/frontend/vite.config.ts
+++ b/OrariAperti/frontend/vite.config.ts
@@ -15,5 +15,20 @@ export default defineConfig({
     host: "localhost",
     port: 3000,
     strictPort: true,
-  }
-})
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            if (id.includes('react')) return 'vendor-react'
+            if (id.includes('@radix-ui')) return 'vendor-radix'
+            if (id.includes('lucide-react')) return 'vendor-lucide'
+            if (id.includes('recharts')) return 'vendor-recharts'
+            return 'vendor'
+          }
+        },
+      },
+    },
+  },
+})
\ No newline at end of file