From 45f3531a2a75b6f9db4cee3a780b1dddec463ad7 Mon Sep 17 00:00:00 2001
From: Dominik Stahl <dominik@samdj.de>
Date: Wed, 25 Jun 2025 20:13:17 +0200
Subject: [PATCH 01/23] fix(deps): revert nextjs to latest stable version

---
 package.json |   2 +-
 yarn.lock    | 111 +++++++++++++++++++++++++++++++--------------------
 2 files changed, 69 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index 158f342..71bc8ea 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.515.0",
-    "next": "15.4.0-canary.96",
+    "next": "15.3.4",
     "next-auth": "^5.0.0-beta.25",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
diff --git a/yarn.lock b/yarn.lock
index 31cf7fd..fdbfaa1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -975,10 +975,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "@next/env@npm:15.4.0-canary.96"
-  checksum: 10c0/069432deddf2c4c34dff181507ad40bf0717371de4c20c3eeb523942a492d9e6d16b10f470a5097ea5bb0841b55c284b75131180be163d39a15058a1d09346f5
+"@next/env@npm:15.3.4":
+  version: 15.3.4
+  resolution: "@next/env@npm:15.3.4"
+  checksum: 10c0/43d37896e1422c9c353d9ded1d1b01545aa30b2bb125bcc40ffd4474dbc6e0ba603a77fc2a598616964a925379bb5a39eb1a242f0c49fc933e39e099fb2f7d75
   languageName: node
   linkType: hard
 
@@ -991,58 +991,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "@next/swc-darwin-arm64@npm:15.4.0-canary.96"
+"@next/swc-darwin-arm64@npm:15.3.4":
+  version: 15.3.4
+  resolution: "@next/swc-darwin-arm64@npm:15.3.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "@next/swc-darwin-x64@npm:15.4.0-canary.96"
+"@next/swc-darwin-x64@npm:15.3.4":
+  version: 15.3.4
+  resolution: "@next/swc-darwin-x64@npm:15.3.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "@next/swc-linux-arm64-gnu@npm:15.4.0-canary.96"
+"@next/swc-linux-arm64-gnu@npm:15.3.4":
+  version: 15.3.4
+  resolution: "@next/swc-linux-arm64-gnu@npm:15.3.4"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "@next/swc-linux-arm64-musl@npm:15.4.0-canary.96"
+"@next/swc-linux-arm64-musl@npm:15.3.4":
+  version: 15.3.4
+  resolution: "@next/swc-linux-arm64-musl@npm:15.3.4"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "@next/swc-linux-x64-gnu@npm:15.4.0-canary.96"
+"@next/swc-linux-x64-gnu@npm:15.3.4":
+  version: 15.3.4
+  resolution: "@next/swc-linux-x64-gnu@npm:15.3.4"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "@next/swc-linux-x64-musl@npm:15.4.0-canary.96"
+"@next/swc-linux-x64-musl@npm:15.3.4":
+  version: 15.3.4
+  resolution: "@next/swc-linux-x64-musl@npm:15.3.4"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "@next/swc-win32-arm64-msvc@npm:15.4.0-canary.96"
+"@next/swc-win32-arm64-msvc@npm:15.3.4":
+  version: 15.3.4
+  resolution: "@next/swc-win32-arm64-msvc@npm:15.3.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "@next/swc-win32-x64-msvc@npm:15.4.0-canary.96"
+"@next/swc-win32-x64-msvc@npm:15.3.4":
+  version: 15.3.4
+  resolution: "@next/swc-win32-x64-msvc@npm:15.3.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -2961,6 +2961,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/counter@npm:0.1.3":
+  version: 0.1.3
+  resolution: "@swc/counter@npm:0.1.3"
+  checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356
+  languageName: node
+  linkType: hard
+
 "@swc/helpers@npm:0.5.15":
   version: 0.5.15
   resolution: "@swc/helpers@npm:0.5.15"
@@ -4192,6 +4199,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"busboy@npm:1.6.0":
+  version: 1.6.0
+  resolution: "busboy@npm:1.6.0"
+  dependencies:
+    streamsearch: "npm:^1.1.0"
+  checksum: 10c0/fa7e836a2b82699b6e074393428b91ae579d4f9e21f5ac468e1b459a244341d722d2d22d10920cdd849743dbece6dca11d72de939fb75a7448825cf2babfba1f
+  languageName: node
+  linkType: hard
+
 "cac@npm:^6.7.14":
   version: 6.7.14
   resolution: "cac@npm:6.7.14"
@@ -7392,7 +7408,7 @@ __metadata:
     eslint-config-next: "npm:15.3.4"
     eslint-config-prettier: "npm:10.1.5"
     lucide-react: "npm:^0.515.0"
-    next: "npm:15.4.0-canary.96"
+    next: "npm:15.3.4"
     next-auth: "npm:^5.0.0-beta.25"
     next-themes: "npm:^0.4.6"
     orval: "npm:7.10.0"
@@ -7675,27 +7691,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:15.4.0-canary.96":
-  version: 15.4.0-canary.96
-  resolution: "next@npm:15.4.0-canary.96"
+"next@npm:15.3.4":
+  version: 15.3.4
+  resolution: "next@npm:15.3.4"
   dependencies:
-    "@next/env": "npm:15.4.0-canary.96"
-    "@next/swc-darwin-arm64": "npm:15.4.0-canary.96"
-    "@next/swc-darwin-x64": "npm:15.4.0-canary.96"
-    "@next/swc-linux-arm64-gnu": "npm:15.4.0-canary.96"
-    "@next/swc-linux-arm64-musl": "npm:15.4.0-canary.96"
-    "@next/swc-linux-x64-gnu": "npm:15.4.0-canary.96"
-    "@next/swc-linux-x64-musl": "npm:15.4.0-canary.96"
-    "@next/swc-win32-arm64-msvc": "npm:15.4.0-canary.96"
-    "@next/swc-win32-x64-msvc": "npm:15.4.0-canary.96"
+    "@next/env": "npm:15.3.4"
+    "@next/swc-darwin-arm64": "npm:15.3.4"
+    "@next/swc-darwin-x64": "npm:15.3.4"
+    "@next/swc-linux-arm64-gnu": "npm:15.3.4"
+    "@next/swc-linux-arm64-musl": "npm:15.3.4"
+    "@next/swc-linux-x64-gnu": "npm:15.3.4"
+    "@next/swc-linux-x64-musl": "npm:15.3.4"
+    "@next/swc-win32-arm64-msvc": "npm:15.3.4"
+    "@next/swc-win32-x64-msvc": "npm:15.3.4"
+    "@swc/counter": "npm:0.1.3"
     "@swc/helpers": "npm:0.5.15"
+    busboy: "npm:1.6.0"
     caniuse-lite: "npm:^1.0.30001579"
     postcss: "npm:8.4.31"
     sharp: "npm:^0.34.1"
     styled-jsx: "npm:5.1.6"
   peerDependencies:
     "@opentelemetry/api": ^1.1.0
-    "@playwright/test": ^1.51.1
+    "@playwright/test": ^1.41.2
     babel-plugin-react-compiler: "*"
     react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
     react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
@@ -7730,7 +7748,7 @@ __metadata:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: 10c0/b3c3d3ccef2b7e86bfdfbe3d6047dd09232d968c53130a7393cc45bed9410cc27e06bfa8f6c70178c806228c1c279c07b49de24b25c9ce8edba6e01f7a817585
+  checksum: 10c0/52d3fba6f53d5d2a339cbde433ab360301e9a0a0d9b95a656bf29ce1af43f02e9cc32571d5d4095bcb8ab7a795207d6e75c64b33fc1f90d21f2f9b157cc9a503
   languageName: node
   linkType: hard
 
@@ -9468,6 +9486,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"streamsearch@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "streamsearch@npm:1.1.0"
+  checksum: 10c0/fbd9aecc2621364384d157f7e59426f4bfd385e8b424b5aaa79c83a6f5a1c8fd2e4e3289e95de1eb3511cb96bb333d6281a9919fafce760e4edb35b2cd2facab
+  languageName: node
+  linkType: hard
+
 "string-argv@npm:^0.3.2":
   version: 0.3.2
   resolution: "string-argv@npm:0.3.2"

From 51fe42374d7fbb8a33db7675490d4da66709b3f7 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Wed, 25 Jun 2025 13:10:27 +0200
Subject: [PATCH 02/23] feat(events): add event creation form components

---
 package.json                                  |  10 +-
 src/app/globals.css                           |  63 +++-
 src/app/layout.tsx                            |  21 +-
 .../default/default-user-icon_dark.svg        |   5 +
 .../default/default-user-icon_light.svg       |   5 +
 .../default/defaultusericon-export.tsx        |   2 +
 src/components/buttons/redirect-button.tsx    |   6 +-
 src/components/custom-ui/labeled-input.tsx    |  38 +-
 .../custom-ui/participant-list-entry.tsx      |  28 ++
 src/components/forms/event-form.tsx           | 344 +++++++++++++++++
 src/components/misc/logo.tsx                  |   4 +-
 src/components/misc/toast-inner.tsx           | 160 ++++++++
 src/components/misc/user-search.tsx           |  96 +++++
 src/components/time-picker.tsx                |  86 +++++
 src/components/ui/button.tsx                  |   5 +-
 src/components/ui/calendar.tsx                | 213 +++++++++++
 src/components/ui/card.tsx                    |   2 +-
 src/components/ui/command.tsx                 | 184 +++++++++
 src/components/ui/dialog.tsx                  | 143 +++++++
 src/components/ui/input.tsx                   |  45 ++-
 src/components/ui/label.tsx                   |  15 +-
 src/components/ui/popover.tsx                 |  48 +++
 src/components/ui/sonner.tsx                  |  54 +++
 yarn.lock                                     | 352 ++++++++++++++++--
 24 files changed, 1868 insertions(+), 61 deletions(-)
 create mode 100644 src/assets/usericon/default/default-user-icon_dark.svg
 create mode 100644 src/assets/usericon/default/default-user-icon_light.svg
 create mode 100644 src/assets/usericon/default/defaultusericon-export.tsx
 create mode 100644 src/components/custom-ui/participant-list-entry.tsx
 create mode 100644 src/components/forms/event-form.tsx
 create mode 100644 src/components/misc/toast-inner.tsx
 create mode 100644 src/components/misc/user-search.tsx
 create mode 100644 src/components/time-picker.tsx
 create mode 100644 src/components/ui/calendar.tsx
 create mode 100644 src/components/ui/command.tsx
 create mode 100644 src/components/ui/dialog.tsx
 create mode 100644 src/components/ui/popover.tsx
 create mode 100644 src/components/ui/sonner.tsx

diff --git a/package.json b/package.json
index 71bc8ea..e18c3c4 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-hover-card": "^1.1.13",
     "@radix-ui/react-label": "^2.1.6",
-    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.4",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
@@ -48,13 +49,18 @@
     "bcryptjs": "^3.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.515.0",
     "next": "15.3.4",
     "next-auth": "^5.0.0-beta.25",
+    "next-swagger-doc": "^0.4.1",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
+    "react-day-picker": "^9.7.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.4",
+    "sonner": "^2.0.5",
     "swagger-ui-react": "^5.24.1",
     "tailwind-merge": "^3.2.0",
     "zod": "^3.25.60"
@@ -80,7 +86,7 @@
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tw-animate-css": "1.3.4",
-    "typescript": "5.8.3"
+    "typescript": "^5.8.3"
   },
   "packageManager": "yarn@4.9.2"
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 93a24ce..1707398 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9,6 +9,7 @@
   --font-heading: 'Comfortaa', sans-serif;
   --font-label: 'Varela Round', sans-serif;
   --font-button: 'Varela Round', sans-serif;
+  --font-sans: var(--font-label);
 
   --transparent: transparent;
 
@@ -28,7 +29,7 @@
 
   --background: var(--neutral-800);
   --background-reversed: var(--neutral-000);
-  --base: var(--neutral-800);
+  --basecl: var(--neutral-800);
   --text: var(--neutral-000);
   --text-alt: var(--neutral-900);
   --text-input: var(--text);
@@ -115,6 +116,62 @@
   --sidebar-ring: oklch(0.707 0.022 261.325);
 }
 
+h1 {
+  font-family: var(--font-heading);
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+h2 {
+  font-family: var(--font-heading);
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+h3 {
+  font-family: var(--font-heading);
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+h4 {
+  font-family: var(--font-heading);
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+h5 {
+  font-family: var(--font-heading);
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+h6 {
+  font-family: var(--font-heading);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+p {
+  font-family: var(--font-label);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
 @font-face {
   font-family: 'Comfortaa';
   font-style: normal;
@@ -153,7 +210,7 @@
 
   --color-background: var(--neutral-750);
   --color-background-reversed: var(--background-reversed);
-  --color-base: var(--neutral-800);
+  --color-basecl: var(--neutral-800);
   --color-text: var(--text);
   --color-text-alt: var(--text-alt);
   --color-text-input: var(--text-input);
@@ -277,7 +334,7 @@
 
   --background: var(--neutral-750);
   --background-reversed: var(--neutral-000);
-  --base: var(--neutral-750);
+  --basecl: var(--neutral-750);
   --text: var(--neutral-000);
   --text-alt: var(--neutral-900);
   --text-input: var(--text);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index af40867..47cec2d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import { ThemeProvider } from '@/components/wrappers/theme-provider';
 import type { Metadata } from 'next';
 import './globals.css';
 import { QueryProvider } from '@/components/wrappers/query-provider';
+import { Toaster } from '@/components/ui/sonner';
+import { SessionProvider } from 'next-auth/react';
 
 export const metadata: Metadata = {
   title: 'MeetUp',
@@ -50,14 +52,17 @@ export default function RootLayout({
         <link rel='manifest' href='/site.webmanifest' />
       </head>
       <body>
-        <ThemeProvider
-          attribute='class'
-          defaultTheme='system'
-          enableSystem
-          disableTransitionOnChange
-        >
-          <QueryProvider>{children}</QueryProvider>
-        </ThemeProvider>
+        <SessionProvider>
+          <ThemeProvider
+            attribute='class'
+            defaultTheme='system'
+            enableSystem
+            disableTransitionOnChange
+          >
+            <QueryProvider>{children}</QueryProvider>
+          </ThemeProvider>
+        </SessionProvider>
+        <Toaster />
       </body>
     </html>
   );
diff --git a/src/assets/usericon/default/default-user-icon_dark.svg b/src/assets/usericon/default/default-user-icon_dark.svg
new file mode 100644
index 0000000..b2a1cfb
--- /dev/null
+++ b/src/assets/usericon/default/default-user-icon_dark.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 4.92487 4.92487 0 11 0H29C35.0751 0 40 4.92487 40 11V29C40 35.0751 35.0751 40 29 40H11C4.92487 40 0 35.0751 0 29V11Z" fill="#5770FF"/>
+<path d="M31.6663 35V31.6667C31.6663 29.8986 30.964 28.2029 29.7137 26.9526C28.4635 25.7024 26.7678 25 24.9997 25H14.9997C13.2316 25 11.5359 25.7024 10.2856 26.9526C9.03539 28.2029 8.33301 29.8986 8.33301 31.6667V35" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.9997 18.3333C23.6816 18.3333 26.6663 15.3486 26.6663 11.6667C26.6663 7.98477 23.6816 5 19.9997 5C16.3178 5 13.333 7.98477 13.333 11.6667C13.333 15.3486 16.3178 18.3333 19.9997 18.3333Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/usericon/default/default-user-icon_light.svg b/src/assets/usericon/default/default-user-icon_light.svg
new file mode 100644
index 0000000..60ba6d0
--- /dev/null
+++ b/src/assets/usericon/default/default-user-icon_light.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 4.92487 4.92487 0 11 0H29C35.0751 0 40 4.92487 40 11V29C40 35.0751 35.0751 40 29 40H11C4.92487 40 0 35.0751 0 29V11Z" fill="#4154C0"/>
+<path d="M31.6663 35V31.6667C31.6663 29.8986 30.964 28.2029 29.7137 26.9526C28.4635 25.7024 26.7678 25 24.9997 25H14.9997C13.2316 25 11.5359 25.7024 10.2856 26.9526C9.03539 28.2029 8.33301 29.8986 8.33301 31.6667V35" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.9997 18.3333C23.6816 18.3333 26.6663 15.3486 26.6663 11.6667C26.6663 7.98477 23.6816 5 19.9997 5C16.3178 5 13.333 7.98477 13.333 11.6667C13.333 15.3486 16.3178 18.3333 19.9997 18.3333Z" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/usericon/default/defaultusericon-export.tsx b/src/assets/usericon/default/defaultusericon-export.tsx
new file mode 100644
index 0000000..d1b482d
--- /dev/null
+++ b/src/assets/usericon/default/defaultusericon-export.tsx
@@ -0,0 +1,2 @@
+export { default as user_default_dark } from '@/assets/usericon/default/default-user-icon_dark.svg';
+export { default as user_default_light } from '@/assets/usericon/default/default-user-icon_light.svg';
diff --git a/src/components/buttons/redirect-button.tsx b/src/components/buttons/redirect-button.tsx
index c4bf997..e67acc1 100644
--- a/src/components/buttons/redirect-button.tsx
+++ b/src/components/buttons/redirect-button.tsx
@@ -1,16 +1,18 @@
-import { Button } from '../ui/button';
+import { Button } from '@/components/ui/button';
 import Link from 'next/link';
 
 export function RedirectButton({
   redirectUrl,
   buttonText,
+  className,
 }: {
   redirectUrl: string;
   buttonText: string;
+  className?: string;
 }) {
   return (
     <Link href={redirectUrl}>
-      <Button>{buttonText}</Button>
+      <Button className={className}>{buttonText}</Button>
     </Link>
   );
 }
diff --git a/src/components/custom-ui/labeled-input.tsx b/src/components/custom-ui/labeled-input.tsx
index ea26e51..4746a31 100644
--- a/src/components/custom-ui/labeled-input.tsx
+++ b/src/components/custom-ui/labeled-input.tsx
@@ -1,4 +1,4 @@
-import { Input } from '@/components/ui/input';
+import { Input, Textarea } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
 export default function LabeledInput({
@@ -7,6 +7,7 @@ export default function LabeledInput({
   placeholder,
   value,
   name,
+  variantSize = 'default',
   autocomplete,
   error,
   ...rest
@@ -16,22 +17,37 @@ export default function LabeledInput({
   placeholder?: string;
   value?: string;
   name?: string;
+  variantSize?: 'default' | 'big' | 'textarea';
   autocomplete?: string;
   error?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>) {
   return (
     <div className='grid grid-cols-1 gap-1'>
       <Label htmlFor={name}>{label}</Label>
-
-      <Input
-        type={type}
-        placeholder={placeholder}
-        defaultValue={value}
-        id={name}
-        name={name}
-        autoComplete={autocomplete}
-        {...rest}
-      />
+      {variantSize === 'textarea' ? (
+        <Textarea
+          placeholder={placeholder}
+          defaultValue={value}
+          id={name}
+          name={name}
+          rows={3}
+        />
+      ) : (
+        <Input
+          type={type}
+          placeholder={placeholder}
+          defaultValue={value}
+          id={name}
+          name={name}
+          className={
+            variantSize === 'big'
+              ? 'h-12 file:h-10 text-lg gplaceholder:text-lg sm:text-2xl sm:placeholder:text-2xl'
+              : ''
+          }
+          autoComplete={autocomplete}
+          {...rest}
+        />
+      )}
       {error && <p className='text-red-500 text-sm mt-1'>{error}</p>}
     </div>
   );
diff --git a/src/components/custom-ui/participant-list-entry.tsx b/src/components/custom-ui/participant-list-entry.tsx
new file mode 100644
index 0000000..292a28b
--- /dev/null
+++ b/src/components/custom-ui/participant-list-entry.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Image from 'next/image';
+import { user_default_dark } from '@/assets/usericon/default/defaultusericon-export';
+import { user_default_light } from '@/assets/usericon/default/defaultusericon-export';
+import { useTheme } from 'next-themes';
+
+type ParticipantListEntryProps = {
+  participant: string;
+  imageSrc?: string | null;
+};
+
+export default function ParticipantListEntry({
+  participant,
+  imageSrc,
+}: ParticipantListEntryProps) {
+  const { resolvedTheme } = useTheme();
+  const defaultImage =
+    resolvedTheme === 'dark' ? user_default_dark : user_default_light;
+
+  const finalImageSrc = imageSrc ?? defaultImage;
+
+  return (
+    <div className='flex items-center gap-2 py-1 ml-5'>
+      <Image src={finalImageSrc} alt='Avatar' width={30} height={30} />
+      <span>{participant}</span>
+    </div>
+  );
+}
diff --git a/src/components/forms/event-form.tsx b/src/components/forms/event-form.tsx
new file mode 100644
index 0000000..d89988a
--- /dev/null
+++ b/src/components/forms/event-form.tsx
@@ -0,0 +1,344 @@
+'use client';
+import React from 'react';
+import LabeledInput from '@/components/custom-ui/labeled-input';
+import { Button } from '@/components/ui/button';
+import Logo from '@/components/misc/logo';
+import TimePicker from '@/components/time-picker';
+import { Label } from '@/components/ui/label';
+import { useGetApiUserMe } from '@/generated/api/user/user';
+import {
+  usePostApiEvent,
+  useGetApiEventEventID,
+  usePatchApiEventEventID,
+} from '@/generated/api/event/event';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { ToastInner } from '@/components/misc/toast-inner';
+import { UserSearchInput } from '@/components/misc/user-search';
+import ParticipantListEntry from '../custom-ui/participant-list-entry';
+
+import { useSearchParams } from 'next/navigation';
+
+interface User {
+  id: string;
+  name: string;
+}
+
+interface EventFormProps {
+  type: 'create' | 'edit';
+  eventId?: string;
+}
+
+const EventForm: React.FC<EventFormProps> = (props) => {
+  // Runtime validation
+  if (props.type === 'edit' && !props.eventId) {
+    throw new Error(
+      'Error [event-form]: eventId must be provided when type is "edit".',
+    );
+  }
+
+  const searchParams = useSearchParams();
+  const startFromUrl = searchParams.get('start');
+  const endFromUrl = searchParams.get('end');
+
+  const { mutate: createEvent, status, isSuccess, error } = usePostApiEvent();
+  const { data, isLoading, error: fetchError } = useGetApiUserMe();
+  const { data: eventData } = useGetApiEventEventID(props.eventId!, {
+    query: { enabled: props.type === 'edit' },
+  });
+  const patchEvent = usePatchApiEventEventID();
+  const router = useRouter();
+
+  // Extract event fields for form defaults
+  const event = eventData?.data?.event;
+
+  // State for date and time fields
+  const [startDate, setStartDate] = React.useState<Date | undefined>(undefined);
+  const [startTime, setStartTime] = React.useState('');
+  const [endDate, setEndDate] = React.useState<Date | undefined>(undefined);
+  const [endTime, setEndTime] = React.useState('');
+
+  // State for participants
+  const [selectedParticipants, setSelectedParticipants] = React.useState<
+    User[]
+  >([]);
+
+  // State for form fields
+  const [title, setTitle] = React.useState('');
+  const [location, setLocation] = React.useState('');
+  const [description, setDescription] = React.useState('');
+
+  // Update state when event data loads
+  React.useEffect(() => {
+    if (props.type === 'edit' && event) {
+      setTitle(event.title || '');
+      // Parse start_time and end_time
+      if (event.start_time) {
+        const start = new Date(event.start_time);
+        setStartDate(start);
+        setStartTime(start.toTimeString().slice(0, 5)); // "HH:mm"
+      }
+      if (event.end_time) {
+        const end = new Date(event.end_time);
+        setEndDate(end);
+        setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
+      }
+      setLocation(event.location || '');
+      setDescription(event.description || '');
+      setSelectedParticipants(
+        event.participants?.map((u) => ({
+          id: u.user.id,
+          name: u.user.name,
+        })) || [],
+      );
+    } else if (props.type === 'create' && startFromUrl && endFromUrl) {
+      // If creating a new event with URL params, set title and dates
+      setTitle('');
+      const start = new Date(startFromUrl);
+      setStartDate(start);
+      setStartTime(start.toTimeString().slice(0, 5)); // "HH:mm"
+      const end = new Date(endFromUrl);
+      setEndDate(end);
+      setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
+    }
+  }, [event, props.type, startFromUrl, endFromUrl]);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+
+    function combine(date?: Date, time?: string) {
+      if (!date || !time) return undefined;
+      const [hours, minutes] = time.split(':');
+      const d = new Date(date);
+      d.setHours(Number(hours), Number(minutes), 0, 0);
+      return d;
+    }
+
+    const start = combine(startDate, startTime);
+    const end = combine(endDate, endTime);
+
+    //validate form data
+    if (!formData.get('eventName')) {
+      alert('Event name is required.');
+      return;
+    }
+    if (!start || !end) {
+      alert('Please provide both start and end date/time.');
+      return;
+    } else if (start >= end) {
+      alert('End time must be after start time.');
+      return;
+    }
+
+    const data = {
+      title: formData.get('eventName') as string,
+      description: formData.get('eventDescription') as string,
+      start_time: start.toISOString(),
+      end_time: end.toISOString(),
+      location: formData.get('eventLocation') as string,
+      created_at: formData.get('createdAt') as string,
+      updated_at: formData.get('updatedAt') as string,
+      organiser: formData.get('organiser') as string,
+      participants: selectedParticipants.map((u) => u.id),
+    };
+
+    if (props.type === 'edit' && props.eventId) {
+      await patchEvent.mutateAsync({
+        eventID: props.eventId,
+        data: {
+          title: data.title,
+          description: data.description,
+          start_time: data.start_time,
+          end_time: data.end_time,
+          location: data.location,
+          participants: data.participants,
+        },
+      });
+      console.log('Updating event');
+    } else {
+      console.log('Creating event');
+      createEvent({ data });
+    }
+
+    toast.custom((t) => (
+      <ToastInner
+        toastId={t}
+        title='Event saved'
+        description={event?.title}
+        onAction={() => router.push(`/events/${event?.id}`)}
+        variant='success'
+        buttonText='show'
+      />
+    ));
+
+    router.back();
+  }
+
+  // Calculate values for organiser, created, and updated
+  const organiserValue = isLoading
+    ? 'Loading...'
+    : data?.data.user?.name || 'Unknown User';
+
+  // Use DB values for created_at/updated_at in edit mode
+  const createdAtValue =
+    props.type === 'edit' && event?.created_at
+      ? event.created_at
+      : new Date().toISOString();
+  const updatedAtValue =
+    props.type === 'edit' && event?.updated_at
+      ? event.updated_at
+      : new Date().toISOString();
+
+  // Format date for display
+  const createdAtDisplay = new Date(createdAtValue).toLocaleDateString();
+  const updatedAtDisplay = new Date(updatedAtValue).toLocaleDateString();
+
+  if (props.type === 'edit' && isLoading) return <div>Loading...</div>;
+  if (props.type === 'edit' && fetchError)
+    return <div>Error loading event.</div>;
+
+  return (
+    <form className='flex flex-col gap-5 w-full' onSubmit={handleSubmit}>
+      <div className='grid grid-row-start:auto gap-4 sm:gap-8 w-full'>
+        <div className='h-full w-full mt-0 ml-2 mb-16 flex items-center max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
+          <div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
+            <Logo colorType='monochrome' logoType='submark' width={50} />
+          </div>
+          <div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full'>
+            <LabeledInput
+              type='text'
+              label='Event Name'
+              placeholder={props.type === 'create' ? 'New Event' : 'Event Name'}
+              name='eventName'
+              variantSize='big'
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+          <div className='w-0 sm:w-[50px]'></div>
+        </div>
+        <div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
+          <div>
+            <TimePicker
+              dateLabel='start Time'
+              timeLabel='&nbsp;'
+              date={startDate}
+              setDate={setStartDate}
+              time={startTime}
+              setTime={setStartTime}
+            />
+          </div>
+          <div>
+            <TimePicker
+              dateLabel='end Time'
+              timeLabel='&nbsp;'
+              date={endDate}
+              setDate={setEndDate}
+              time={endTime}
+              setTime={setEndTime}
+            />
+          </div>
+          <div className='w-54'>
+            <LabeledInput
+              type='text'
+              label='Location'
+              placeholder='where is the event?'
+              name='eventLocation'
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+            />
+          </div>
+          <div className='flex flex-col gap-4'>
+            <div className='flex flex-row gap-2'>
+              <Label className='w-[70px]'>created:</Label>
+              <Label className='text-[var(--color-neutral-300)]'>
+                {createdAtDisplay}
+              </Label>
+            </div>
+            <div className='flex flex-row gap-2'>
+              <Label className='w-[70px]'>updated:</Label>
+              <p className='text-[var(--color-neutral-300)]'>
+                {updatedAtDisplay}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
+          <div className='h-full w-full grid grid-flow-row gap-4'>
+            <div className='h-full w-full'>
+              <div className='flex flex-row gap-2'>
+                <Label>Organiser:</Label>
+                <Label className='text-[var(--color-neutral-300)]'>
+                  {organiserValue}
+                </Label>
+              </div>
+            </div>
+            <div className='h-full w-full'>
+              <LabeledInput
+                type='text'
+                label='Event Description'
+                placeholder='What is the event about?'
+                name='eventDescription'
+                variantSize='textarea'
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              ></LabeledInput>
+            </div>
+          </div>
+          <div className='h-full w-full'>
+            <Label>Participants</Label>
+            <UserSearchInput
+              selectedUsers={selectedParticipants}
+              addUserAction={(user) => {
+                setSelectedParticipants((current) =>
+                  current.find((u) => u.id === user.id)
+                    ? current
+                    : [...current, user],
+                );
+              }}
+              removeUserAction={(user) => {
+                setSelectedParticipants((current) =>
+                  current.filter((u) => u.id !== user.id),
+                );
+              }}
+            />
+            <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
+              {selectedParticipants.map((user) => (
+                <ParticipantListEntry key={user.id} participant={user.name} />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
+          <div className='w-[20%] grid max-sm:w-[40%]'>
+            <Button
+              type='button'
+              variant='secondary'
+              onClick={() => {
+                router.back();
+                console.log('user aborted - no change in database');
+              }}
+            >
+              cancel
+            </Button>
+          </div>
+          <div className='w-[20%] grid max-sm:w-[40%]'>
+            <Button
+              type='submit'
+              variant='primary'
+              disabled={status === 'pending'}
+            >
+              {status === 'pending' ? 'Saving...' : 'save event'}
+            </Button>
+          </div>
+        </div>
+        {isSuccess && <p>Event created!</p>}
+        {error && <p className='text-red-500'>Error: {error.message}</p>}
+      </div>
+    </form>
+  );
+};
+
+export default EventForm;
diff --git a/src/components/misc/logo.tsx b/src/components/misc/logo.tsx
index 739fc90..4e7bb75 100644
--- a/src/components/misc/logo.tsx
+++ b/src/components/misc/logo.tsx
@@ -63,9 +63,9 @@ export default function Logo({
     );
   }
 
-  if (width === undefined || height === undefined) {
+  if (width === undefined && height === undefined) {
     console.warn(
-      `Logo: 'width' and 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
+      `Logo: 'width' or 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
     );
   }
 
diff --git a/src/components/misc/toast-inner.tsx b/src/components/misc/toast-inner.tsx
new file mode 100644
index 0000000..9617b75
--- /dev/null
+++ b/src/components/misc/toast-inner.tsx
@@ -0,0 +1,160 @@
+/*
+USAGE:
+
+import { toast } from 'sonner';
+import { ToastInner } from '@/components/misc/toast-inner';
+
+import { Button } from '@/components/ui/button';
+
+ <Button
+          variant='outline_primary'
+          onClick={() =>
+
+
+            toast.custom(
+              (t) => (
+                <ToastInner
+                  toastId={t}
+                  title=''
+                  description=''
+                  onAction={() => console.log('on Action')} //No Button shown if this is null
+                  variant=''default' | 'success' | 'error' | 'info' | 'warning' | 'notification''
+                  buttonText=[No Button shown if this is null]
+                  iconName=[Any Icon Name from Lucide in UpperCamelCase or default if null]
+                />
+              ),
+
+
+              {
+                duration: 5000,
+              },
+            )
+          }
+        >
+          Show Toast
+        </Button>
+
+
+*/
+
+'use client';
+
+import { toast } from 'sonner';
+import { X } from 'lucide-react';
+import React from 'react';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import * as Icons from 'lucide-react';
+
+interface ToastInnerProps {
+  title: string;
+  description?: string;
+  buttonText?: string;
+  onAction?: () => void;
+  toastId: string | number;
+  variant?:
+    | 'default'
+    | 'success'
+    | 'error'
+    | 'info'
+    | 'warning'
+    | 'notification';
+  iconName?: keyof typeof Icons;
+  closeOnAction?: boolean;
+}
+
+const variantConfig = {
+  default: {
+    bgColor: 'bg-neutral-150',
+    defaultIcon: 'Info',
+  },
+  success: {
+    bgColor: 'bg-green-200',
+    defaultIcon: 'CheckCircle',
+  },
+  error: {
+    bgColor: 'bg-red-200',
+    defaultIcon: 'XCircle',
+  },
+  info: {
+    bgColor: 'bg-blue-200',
+    defaultIcon: 'Info',
+  },
+  warning: {
+    bgColor: 'bg-yellow-200',
+    defaultIcon: 'AlertTriangle',
+  },
+  notification: {
+    bgColor: 'bg-neutral-150',
+    defaultIcon: 'BellRing',
+  },
+};
+
+export const ToastInner: React.FC<ToastInnerProps> = ({
+  title,
+  description,
+  buttonText,
+  onAction,
+  toastId,
+  variant = 'default',
+  iconName,
+  closeOnAction = true,
+}) => {
+  const bgColor = variantConfig[variant].bgColor;
+
+  // fallback to variant's default icon if iconName is not provided
+  const iconKey = (iconName ||
+    variantConfig[variant].defaultIcon) as keyof typeof Icons;
+  const Icon = Icons[iconKey] as React.ComponentType<Icons.LucideProps>;
+
+  return (
+    <div className={`relative sm:w-120 rounded p-4 ${bgColor} select-none`}>
+      {/* Close Button */}
+      <button
+        onClick={() => toast.dismiss(toastId)}
+        className='absolute top-2 right-2 cursor-pointer'
+        aria-label='Close notification'
+      >
+        <X className='h-4 w-4 text-neutral-600' />
+      </button>
+
+      <div
+        className={`grid ${
+          variant === 'default'
+            ? 'grid-cols-[auto_130px] max-sm:grid-cols-[auto_90px]'
+            : 'grid-cols-[40px_auto_130px] max-sm:grid-cols-[40px_auto_90px]'
+        } gap-4 items-center`}
+      >
+        {variant !== 'default' && (
+          <div className='flex items-center justify-center'>
+            <Icon size={40} />
+          </div>
+        )}
+
+        {/* Text Content */}
+        <div className='grid gap-1'>
+          <h6>{title}</h6>
+          {description && <Label>{description}</Label>}
+        </div>
+
+        {/* Action Button */}
+        <div className='flex justify-center'>
+          {onAction && buttonText && (
+            <Button
+              variant={'secondary'}
+              className='w-full mr-2'
+              onClick={() => {
+                onAction();
+                if (closeOnAction) {
+                  toast.dismiss(toastId);
+                }
+              }}
+            >
+              {buttonText}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/misc/user-search.tsx b/src/components/misc/user-search.tsx
new file mode 100644
index 0000000..82b7c38
--- /dev/null
+++ b/src/components/misc/user-search.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { useGetApiSearchUser } from '@/generated/api/search/search';
+
+interface User {
+  id: string;
+  name: string;
+}
+
+export function UserSearchInput({
+  addUserAction,
+  removeUserAction,
+  selectedUsers,
+}: {
+  addUserAction: (user: User) => void;
+  removeUserAction: (user: User) => void;
+  selectedUsers: User[];
+}) {
+  const [userSearch, setUserSearch] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const { data: searchUserData } = useGetApiSearchUser({ query: userSearch });
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline_muted'
+          role='combobox'
+          aria-expanded={open}
+          className='w-[200px] justify-between'
+        >
+          {'Select user...'}
+          <ChevronsUpDownIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-[200px] p-0'>
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder='Search user...'
+            value={userSearch}
+            onValueChange={setUserSearch}
+          />
+          <CommandList>
+            <CommandEmpty>No users found.</CommandEmpty>
+            <CommandGroup>
+              {searchUserData?.data.users?.map((user) => {
+                const isSelected = selectedUsers.some((u) => u.id === user.id);
+
+                return (
+                  <CommandItem
+                    key={user.id}
+                    value={user.id}
+                    onSelect={() => {
+                      if (isSelected) {
+                        removeUserAction(user);
+                      } else {
+                        addUserAction(user);
+                      }
+                      setOpen(false);
+                    }}
+                  >
+                    <CheckIcon
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        isSelected ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                    {user.name}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/time-picker.tsx b/src/components/time-picker.tsx
new file mode 100644
index 0000000..4402b88
--- /dev/null
+++ b/src/components/time-picker.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+
+export default function TimePicker({
+  dateLabel = 'Date',
+  timeLabel = 'Time',
+  date,
+  setDate,
+  time,
+  setTime,
+}: {
+  dateLabel?: string;
+  timeLabel?: string;
+  date?: Date;
+  setDate?: (date: Date | undefined) => void;
+  time?: string;
+  setTime?: (time: string) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className='flex gap-4'>
+      <div className='flex flex-col gap-3'>
+        <Label htmlFor='date' className='px-1'>
+          {dateLabel}
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant='calendar' id='date'>
+              {date ? date.toLocaleDateString() : 'Select date'}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+            <Calendar
+              mode='single'
+              selected={date}
+              captionLayout='dropdown'
+              onSelect={(d) => {
+                setDate?.(d);
+                setOpen(false);
+              }}
+              modifiers={{
+                today: new Date(),
+              }}
+              modifiersClassNames={{
+                today: 'bg-secondary text-secondary-foreground rounded-full',
+              }}
+              classNames={{
+                day: 'text-center hover:bg-gray-500 hover:rounded-md',
+              }}
+              weekStartsOn={1} // Set Monday as the first day of the week
+              startMonth={new Date(new Date().getFullYear() - 10, 0)}
+              endMonth={new Date(new Date().getFullYear() + 14, 12)}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className='flex flex-col gap-3'>
+        <Label htmlFor='time' className='px-1'>
+          {timeLabel}
+        </Label>
+        <Input
+          type='time'
+          id='time'
+          step='60'
+          value={time}
+          onChange={(e) => setTime?.(e.target.value)}
+          className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 2a25f66..8daf206 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -21,8 +21,11 @@ const buttonVariants = cva(
           'bg-background border-2 text-text shadow-xs hover:bg-secondary border-secondary hover:border-background-reversed active:bg-active-secondary disabled:bg-disabled-secondary',
         outline_muted:
           'bg-background border-2 text-text shadow-xs hover:bg-muted border-muted hover:border-background-reversed active:bg-active-muted disabled:bg-disabled-muted',
-
         link: 'text-text underline-offset-4 hover:underline',
+        calendar:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 w-32 justify-between font-normal',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..54b77d1
--- /dev/null
+++ b/src/components/ui/calendar.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import * as React from 'react';
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react';
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
+
+import { cn } from '@/lib/utils';
+import { Button, buttonVariants } from '@/components/ui/button';
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'flex gap-4 flex-col md:flex-row relative',
+          defaultClassNames.months,
+        ),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          'bg-[var(--color-basecl)] absolute inset-0 opacity-0',
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn(
+          'select-none w-(--cell-size)',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-md bg-accent',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot='calendar'
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            );
+          }
+
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon
+                className={cn('size-4', className)}
+                {...props}
+              />
+            );
+          }
+
+          return (
+            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className='flex size-(--cell-size) items-center justify-center text-center'>
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant='ghost'
+      size='icon'
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index c0894f8..7ba53ea 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -22,7 +22,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
         /* Outline */
         '',
         /* Shadow */
-        'shadow-sm',
+        'shadow-[4px_4px_9px_9px_rgba(0,0,0,0.25)]',
         /* Opacity */
         '',
         /* Scaling */
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 0000000..62a2627
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,184 @@
+'use client';
+
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot='command'
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className='sr-only'>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot='command-input-wrapper'
+      className='flex h-9 items-center gap-2 border-b px-3'
+    >
+      <SearchIcon className='size-4 shrink-0 opacity-50' />
+      <CommandPrimitive.Input
+        data-slot='command-input'
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot='command-list'
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot='command-empty'
+      className='py-6 text-center text-sm'
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot='command-group'
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot='command-separator'
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot='command-item'
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='command-shortcut'
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..e481c76
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot='dialog' {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot='dialog-overlay'
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot='dialog-portal'>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot='dialog-content'
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot='dialog-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"
+          >
+            <XIcon />
+            <span className='sr-only'>Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='dialog-header'
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='dialog-footer'
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot='dialog-title'
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot='dialog-description'
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 5bced36..88dfe48 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       data-slot='input'
       className={cn(
         /* Text */
-        'text-text-input selection:text-text md:text-sm file:text-destructive file:text-sm placeholder:text-text-muted-input',
+        'text-text-input selection:text-text file:text-destructive file:text-sm placeholder:text-text-muted-input',
         /* Background */
         'bg-transparent selection:bg-muted-input file:bg-transparent',
         /* Border */
@@ -41,4 +41,45 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   );
 }
 
-export { Input };
+function Textarea({
+  className,
+  rows,
+  ...props
+}: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot='input'
+      rows={rows}
+      className={cn(
+        /* Text */
+        'text-text-input selection:text-text placeholder:text-text-muted-input',
+        /* Background */
+        'bg-transparent selection:bg-muted-input',
+        /* Border */
+        'rounded-md border border-input focus-visible:border-ring aria-invalid:border-destructive',
+        /* Font */
+        '',
+        /* Cursor */
+        'disabled:pointer-events-none disabled:cursor-not-allowed',
+        /* Ring */
+        'focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+        /* Outline */
+        'outline-none',
+        /* Shadow */
+        'shadow-md transition-[color,box-shadow]',
+        /* Opacity */
+        'disabled:opacity-50',
+        /* Scaling */
+        'h-32 w-full min-w-0', // Bigger height for textarea
+        /* Spacing */
+        'px-3 py-2',
+        /* Alignment */
+        '',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input, Textarea };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 16acf98..3e62d0d 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -5,16 +5,21 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 
 import { cn } from '@/lib/utils';
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root> & {
+  size?: 'default' | 'small' | 'large';
+};
+
+function Label({ className, size = 'default', ...props }: LabelProps) {
   return (
     <LabelPrimitive.Root
       data-slot='label'
       className={cn(
         /* Text */
-        'text-sm',
+        size === 'small'
+          ? 'text-sm'
+          : size === 'large'
+            ? 'text-xl'
+            : 'text-base',
         /* Background */
         '',
         /* Border */
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..5db039e
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot='popover' {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot='popover-content'
+        align={align}
+        sideOffset={sideOffset}
+        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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..38b3ce9
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, ToasterProps } from 'sonner';
+import React from 'react';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  const [shouldExpand, setShouldExpand] = React.useState(false);
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 600px)');
+
+    const handleScreenSizeChange = () => {
+      setShouldExpand(mediaQuery.matches);
+    };
+
+    handleScreenSizeChange(); // set initial value
+    mediaQuery.addEventListener('change', handleScreenSizeChange);
+
+    return () =>
+      mediaQuery.removeEventListener('change', handleScreenSizeChange);
+  }, []);
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      richColors={true}
+      className='toaster group'
+      toastOptions={{
+        style: {
+          backgroundColor: 'var(--color-neutral-150)',
+          color: 'var(--color-text-alt)',
+          borderRadius: 'var(--radius)',
+        },
+        cancelButtonStyle: {
+          backgroundColor: 'var(--color-secondary)',
+          color: 'var(--color-text-alt)',
+        },
+        actionButtonStyle: {
+          backgroundColor: 'var(--color-secondary)',
+          color: 'var(--color-text-alt)',
+        },
+      }}
+      swipeDirections={['left', 'right']}
+      closeButton={true}
+      expand={shouldExpand}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/yarn.lock b/yarn.lock
index fdbfaa1..63e900a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -33,7 +33,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apidevtools/openapi-schemas@npm:^2.1.0":
+"@apidevtools/json-schema-ref-parser@npm:^9.0.6":
+  version: 9.1.2
+  resolution: "@apidevtools/json-schema-ref-parser@npm:9.1.2"
+  dependencies:
+    "@jsdevtools/ono": "npm:^7.1.3"
+    "@types/json-schema": "npm:^7.0.6"
+    call-me-maybe: "npm:^1.0.1"
+    js-yaml: "npm:^4.1.0"
+  checksum: 10c0/ebf952eb2e00bf0919f024e72897e047fd5012f0a9e47ac361873f6de0a733b9334513cdbc73205a6b43ac4a652b8c87f55e489c39b2d60bd0bc1cb2b411e218
+  languageName: node
+  linkType: hard
+
+"@apidevtools/openapi-schemas@npm:^2.0.4, @apidevtools/openapi-schemas@npm:^2.1.0":
   version: 2.1.0
   resolution: "@apidevtools/openapi-schemas@npm:2.1.0"
   checksum: 10c0/f4aa0f9df32e474d166c84ef91bceb18fa1c4f44b5593879529154ef340846811ea57dc2921560f157f692262827d28d988dd6e19fb21f00320e9961964176b4
@@ -47,6 +59,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@apidevtools/swagger-parser@npm:10.0.3":
+  version: 10.0.3
+  resolution: "@apidevtools/swagger-parser@npm:10.0.3"
+  dependencies:
+    "@apidevtools/json-schema-ref-parser": "npm:^9.0.6"
+    "@apidevtools/openapi-schemas": "npm:^2.0.4"
+    "@apidevtools/swagger-methods": "npm:^3.0.2"
+    "@jsdevtools/ono": "npm:^7.1.3"
+    call-me-maybe: "npm:^1.0.1"
+    z-schema: "npm:^5.0.1"
+  peerDependencies:
+    openapi-types: ">=7"
+  checksum: 10c0/3b43f719c2d647ac8dcf30f132834d413ce21cbf7a8d9c3b35ec91149dd25d608c8fd892358fcd61a8edd8c5140a7fb13676f948e2d87067d081a47b8c7107e9
+  languageName: node
+  linkType: hard
+
 "@apidevtools/swagger-parser@npm:^10.1.1":
   version: 10.1.1
   resolution: "@apidevtools/swagger-parser@npm:10.1.1"
@@ -180,6 +208,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@date-fns/tz@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@date-fns/tz@npm:1.2.0"
+  checksum: 10c0/411e9d4303b10951f6fd0189d18fb845f0d934a575df2176bc10daf664282c765fb6b057a977e446bbb1229151d89e7788978600a019f1fc24b5c75276d496bd
+  languageName: node
+  linkType: hard
+
 "@emnapi/core@npm:^1.4.3":
   version: 1.4.3
   resolution: "@emnapi/core@npm:1.4.3"
@@ -428,12 +463,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/core@npm:^0.15.0":
-  version: 0.15.0
-  resolution: "@eslint/core@npm:0.15.0"
+"@eslint/core@npm:^0.15.1":
+  version: 0.15.1
+  resolution: "@eslint/core@npm:0.15.1"
   dependencies:
     "@types/json-schema": "npm:^7.0.15"
-  checksum: 10c0/9882c69acfe29743ce473a619d5248589c6687561afaabe8ec8d7ffed07592db16edcca3af022f33ea92fe5f6cfbe3545ee53e89292579d22a944ebaeddcf72d
+  checksum: 10c0/abaf641940776638b8c15a38d99ce0dac551a8939310ec81b9acd15836a574cf362588eaab03ab11919bc2a0f9648b19ea8dee33bf12675eb5b6fd38bda6f25e
   languageName: node
   linkType: hard
 
@@ -469,12 +504,12 @@ __metadata:
   linkType: hard
 
 "@eslint/plugin-kit@npm:^0.3.1":
-  version: 0.3.2
-  resolution: "@eslint/plugin-kit@npm:0.3.2"
+  version: 0.3.3
+  resolution: "@eslint/plugin-kit@npm:0.3.3"
   dependencies:
-    "@eslint/core": "npm:^0.15.0"
+    "@eslint/core": "npm:^0.15.1"
     levn: "npm:^0.4.1"
-  checksum: 10c0/e069b0a46eb9fa595a1ac7dea4540a9daa493afba88875ee054e9117609c1c41555e779303cb4cff36cf88f603ba6eba2556a927e8ced77002828206ee17fc7e
+  checksum: 10c0/c61888eb8757abc0d25a53c1832f85521c2f347126c475eb32d3596be3505e8619e0ceddee7346d195089a2eb1633b61e6127a5772b8965a85eb9f55b8b1cebe
   languageName: node
   linkType: hard
 
@@ -1406,7 +1441,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-compose-refs@npm:1.1.2":
+"@radix-ui/react-compose-refs@npm:1.1.2, @radix-ui/react-compose-refs@npm:^1.1.1":
   version: 1.1.2
   resolution: "@radix-ui/react-compose-refs@npm:1.1.2"
   peerDependencies:
@@ -1432,7 +1467,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-dialog@npm:^1.1.14":
+"@radix-ui/react-dialog@npm:^1.1.14, @radix-ui/react-dialog@npm:^1.1.6":
   version: 1.1.14
   resolution: "@radix-ui/react-dialog@npm:1.1.14"
   dependencies:
@@ -1586,7 +1621,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-id@npm:1.1.1":
+"@radix-ui/react-id@npm:1.1.1, @radix-ui/react-id@npm:^1.1.0":
   version: 1.1.1
   resolution: "@radix-ui/react-id@npm:1.1.1"
   dependencies:
@@ -1656,6 +1691,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-popover@npm:^1.1.14":
+  version: 1.1.14
+  resolution: "@radix-ui/react-popover@npm:1.1.14"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.10"
+    "@radix-ui/react-focus-guards": "npm:1.1.2"
+    "@radix-ui/react-focus-scope": "npm:1.1.7"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-popper": "npm:1.2.7"
+    "@radix-ui/react-portal": "npm:1.1.9"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-slot": "npm:1.2.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    aria-hidden: "npm:^1.2.4"
+    react-remove-scroll: "npm:^2.6.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/04e557bfcaab4887694d119555b101e16b8a4e99595541ff2cbe805c551be853cb02882a2ada04e6507ffc45bc092bc2b89704b7b79f5025251767d0b4f3230a
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-popper@npm:1.2.7":
   version: 1.2.7
   resolution: "@radix-ui/react-popper@npm:1.2.7"
@@ -1724,7 +1792,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-primitive@npm:2.1.3":
+"@radix-ui/react-primitive@npm:2.1.3, @radix-ui/react-primitive@npm:^2.0.2":
   version: 2.1.3
   resolution: "@radix-ui/react-primitive@npm:2.1.3"
   dependencies:
@@ -1770,7 +1838,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-scroll-area@npm:^1.2.8":
+"@radix-ui/react-scroll-area@npm:^1.2.9":
   version: 1.2.9
   resolution: "@radix-ui/react-scroll-area@npm:1.2.9"
   dependencies:
@@ -3248,7 +3316,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:^7.0.11, @types/json-schema@npm:^7.0.15, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.7":
+"@types/json-schema@npm:^7.0.11, @types/json-schema@npm:^7.0.15, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.6, @types/json-schema@npm:^7.0.7":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
   checksum: 10c0/a996a745e6c5d60292f36731dd41341339d4eeed8180bb09226e5c8d23759067692b1d88e5d91d72ee83dfc00d3aca8e7bd43ea120516c17922cbcb7c3e252db
@@ -3321,6 +3389,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/swagger-jsdoc@npm:6.0.4":
+  version: 6.0.4
+  resolution: "@types/swagger-jsdoc@npm:6.0.4"
+  checksum: 10c0/fbe17d91a12e1e60a255b02e6def6877c81b356c75ffcd0e5167fbaf1476e2d6600cd7eea79e6b3e0ff7929dec33ade345147509ed3b98026f63c782b74514f6
+  languageName: node
+  linkType: hard
+
 "@types/swagger-ui-react@npm:5":
   version: 5.18.0
   resolution: "@types/swagger-ui-react@npm:5.18.0"
@@ -4386,6 +4461,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cleye@npm:1.3.2":
+  version: 1.3.2
+  resolution: "cleye@npm:1.3.2"
+  dependencies:
+    terminal-columns: "npm:^1.4.1"
+    type-flag: "npm:^3.0.0"
+  checksum: 10c0/2cd63c194d8476230cb9730dae87ae106995ff36b5e43436965caf14ebc6386b7a33e61cc12f90f27e42f4490383fb6032f1f1956bbbc12a3bb13e5cc74cbd78
+  languageName: node
+  linkType: hard
+
 "cli-cursor@npm:^3.1.0":
   version: 3.1.0
   resolution: "cli-cursor@npm:3.1.0"
@@ -4443,6 +4528,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cmdk@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "cmdk@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:^1.1.1"
+    "@radix-ui/react-dialog": "npm:^1.1.6"
+    "@radix-ui/react-id": "npm:^1.1.0"
+    "@radix-ui/react-primitive": "npm:^2.0.2"
+  peerDependencies:
+    react: ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^18 || ^19 || ^19.0.0-rc
+  checksum: 10c0/5605ac4396ec9bc65c82f954da19dd89a0636a54026df72780e2470da1381f9d57434a80a53f2d57eaa4e759660a3ebba9232b74258dc09970576591eae03116
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^2.0.1":
   version: 2.0.1
   resolution: "color-convert@npm:2.0.1"
@@ -4509,6 +4609,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:6.2.0":
+  version: 6.2.0
+  resolution: "commander@npm:6.2.0"
+  checksum: 10c0/1b701c6726fc2b6c6a7d9ab017be9465153546a05767cdd0e15e9f9a11c07f88f64d47684b90b07e5fb103d173efb6afdf4a21f6d6c4c25f7376bd027d21062c
+  languageName: node
+  linkType: hard
+
 "commander@npm:^6.2.1":
   version: 6.2.1
   resolution: "commander@npm:6.2.1"
@@ -4516,6 +4623,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^9.4.1":
+  version: 9.5.0
+  resolution: "commander@npm:9.5.0"
+  checksum: 10c0/5f7784fbda2aaec39e89eb46f06a999e00224b3763dc65976e05929ec486e174fe9aac2655f03ba6a5e83875bd173be5283dc19309b7c65954701c02025b3c1d
+  languageName: node
+  linkType: hard
+
 "common-tags@npm:^1.8.0":
   version: 1.8.2
   resolution: "common-tags@npm:1.8.2"
@@ -4695,6 +4809,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns-jalali@npm:4.1.0-0":
+  version: 4.1.0-0
+  resolution: "date-fns-jalali@npm:4.1.0-0"
+  checksum: 10c0/f9ad98d9f7e8e5abe0d070dc806b0c8baded2b1208626c42e92cbd2605b5171f5714d6b79b20cc2666267d821699244c9d0b5e93274106cf57d6232da77596ed
+  languageName: node
+  linkType: hard
+
+"date-fns@npm:4.1.0, date-fns@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "date-fns@npm:4.1.0"
+  checksum: 10c0/b79ff32830e6b7faa009590af6ae0fb8c3fd9ffad46d930548fbb5acf473773b4712ae887e156ba91a7b3dc30591ce0f517d69fd83bd9c38650fdc03b4e0bac8
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:^1.10.4":
   version: 1.11.13
   resolution: "dayjs@npm:1.11.13"
@@ -4810,6 +4938,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"doctrine@npm:3.0.0":
+  version: 3.0.0
+  resolution: "doctrine@npm:3.0.0"
+  dependencies:
+    esutils: "npm:^2.0.2"
+  checksum: 10c0/c96bdccabe9d62ab6fea9399fdff04a66e6563c1d6fb3a3a063e8d53c3bb136ba63e84250bbf63d00086a769ad53aef92d2bd483f03f837fc97b71cbee6b2520
+  languageName: node
+  linkType: hard
+
 "doctrine@npm:^2.1.0":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"
@@ -5886,6 +6023,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs.realpath@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "fs.realpath@npm:1.0.0"
+  checksum: 10c0/444cf1291d997165dfd4c0d58b69f0e4782bfd9149fd72faa4fe299e68e0e93d6db941660b37dd29153bf7186672ececa3b50b7e7249477b03fdf850f287c948
+  languageName: node
+  linkType: hard
+
 "function-bind@npm:^1.1.2":
   version: 1.1.2
   resolution: "function-bind@npm:1.1.2"
@@ -6028,6 +6172,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:7.1.6":
+  version: 7.1.6
+  resolution: "glob@npm:7.1.6"
+  dependencies:
+    fs.realpath: "npm:^1.0.0"
+    inflight: "npm:^1.0.4"
+    inherits: "npm:2"
+    minimatch: "npm:^3.0.4"
+    once: "npm:^1.3.0"
+    path-is-absolute: "npm:^1.0.0"
+  checksum: 10c0/2575cce9306ac534388db751f0aa3e78afedb6af8f3b529ac6b2354f66765545145dba8530abf7bff49fb399a047d3f9b6901c38ee4c9503f592960d9af67763
+  languageName: node
+  linkType: hard
+
 "glob@npm:^10.2.2":
   version: 10.4.5
   resolution: "glob@npm:10.4.5"
@@ -6333,7 +6491,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:^2.0.1":
+"inflight@npm:^1.0.4":
+  version: 1.0.6
+  resolution: "inflight@npm:1.0.6"
+  dependencies:
+    once: "npm:^1.3.0"
+    wrappy: "npm:1"
+  checksum: 10c0/7faca22584600a9dc5b9fca2cd5feb7135ac8c935449837b315676b4c90aa4f391ec4f42240178244b5a34e8bede1948627fda392ca3191522fc46b34e985ab2
+  languageName: node
+  linkType: hard
+
+"inherits@npm:2, inherits@npm:^2.0.1":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 10c0/4e531f648b29039fb7426fb94075e6545faa1eb9fe83c29f0b6d9e7263aceb4289d2d4557db0d428188eeb449cc7c5e77b0a0b2c4e248ff2a65933a0dee49ef2
@@ -6701,7 +6869,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isarray@npm:^2.0.5":
+"isarray@npm:2.0.5, isarray@npm:^2.0.5":
   version: 2.0.5
   resolution: "isarray@npm:2.0.5"
   checksum: 10c0/4199f14a7a13da2177c66c31080008b7124331956f47bca57dd0b6ea9f11687aa25e565a2c7a2b519bc86988d10398e3049a1f5df13c9f6b7664154690ae79fd
@@ -7157,6 +7325,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.get@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "lodash.get@npm:4.4.2"
+  checksum: 10c0/48f40d471a1654397ed41685495acb31498d5ed696185ac8973daef424a749ca0c7871bf7b665d5c14f5cc479394479e0307e781f61d5573831769593411be6e
+  languageName: node
+  linkType: hard
+
 "lodash.isempty@npm:^4.4.0":
   version: 4.4.0
   resolution: "lodash.isempty@npm:4.4.0"
@@ -7164,6 +7339,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.isequal@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "lodash.isequal@npm:4.5.0"
+  checksum: 10c0/dfdb2356db19631a4b445d5f37868a095e2402292d59539a987f134a8778c62a2810c2452d11ae9e6dcac71fc9de40a6fedcb20e2952a15b431ad8b29e50e28f
+  languageName: node
+  linkType: hard
+
 "lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
@@ -7171,6 +7353,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.mergewith@npm:^4.6.2":
+  version: 4.6.2
+  resolution: "lodash.mergewith@npm:4.6.2"
+  checksum: 10c0/4adbed65ff96fd65b0b3861f6899f98304f90fd71e7f1eb36c1270e05d500ee7f5ec44c02ef979b5ddbf75c0a0b9b99c35f0ad58f4011934c4d4e99e5200b3b5
+  languageName: node
+  linkType: hard
+
 "lodash.omitby@npm:^4.6.0":
   version: 4.6.0
   resolution: "lodash.omitby@npm:4.6.0"
@@ -7385,7 +7574,8 @@ __metadata:
     "@radix-ui/react-dropdown-menu": "npm:^2.1.15"
     "@radix-ui/react-hover-card": "npm:^1.1.13"
     "@radix-ui/react-label": "npm:^2.1.6"
-    "@radix-ui/react-scroll-area": "npm:^1.2.8"
+    "@radix-ui/react-popover": "npm:^1.1.14"
+    "@radix-ui/react-scroll-area": "npm:^1.2.9"
     "@radix-ui/react-select": "npm:^2.2.4"
     "@radix-ui/react-separator": "npm:^1.1.7"
     "@radix-ui/react-slot": "npm:^1.2.3"
@@ -7402,7 +7592,9 @@ __metadata:
     bcryptjs: "npm:^3.0.2"
     class-variance-authority: "npm:^0.7.1"
     clsx: "npm:^2.1.1"
+    cmdk: "npm:^1.1.1"
     cypress: "npm:14.5.0"
+    date-fns: "npm:^4.1.0"
     dotenv-cli: "npm:8.0.0"
     eslint: "npm:9.29.0"
     eslint-config-next: "npm:15.3.4"
@@ -7410,21 +7602,24 @@ __metadata:
     lucide-react: "npm:^0.515.0"
     next: "npm:15.3.4"
     next-auth: "npm:^5.0.0-beta.25"
+    next-swagger-doc: "npm:^0.4.1"
     next-themes: "npm:^0.4.6"
     orval: "npm:7.10.0"
     postcss: "npm:8.5.6"
     prettier: "npm:3.5.3"
     prisma: "npm:6.10.1"
     react: "npm:^19.0.0"
+    react-day-picker: "npm:^9.7.0"
     react-dom: "npm:^19.0.0"
     react-hook-form: "npm:^7.56.4"
+    sonner: "npm:^2.0.5"
     swagger-ui-react: "npm:^5.24.1"
     tailwind-merge: "npm:^3.2.0"
     tailwindcss: "npm:4.1.10"
     ts-node: "npm:10.9.2"
     tsconfig-paths: "npm:4.2.0"
     tw-animate-css: "npm:1.3.4"
-    typescript: "npm:5.8.3"
+    typescript: "npm:^5.8.3"
     zod: "npm:^3.25.60"
   languageName: unknown
   linkType: soft
@@ -7485,7 +7680,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:3.1.2, minimatch@npm:^3.1.2":
+"minimatch@npm:3.1.2, minimatch@npm:^3.0.4, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -7681,6 +7876,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-swagger-doc@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "next-swagger-doc@npm:0.4.1"
+  dependencies:
+    "@types/swagger-jsdoc": "npm:6.0.4"
+    cleye: "npm:1.3.2"
+    isarray: "npm:2.0.5"
+    swagger-jsdoc: "npm:6.2.8"
+  peerDependencies:
+    next: ">=9"
+  bin:
+    next-swagger-doc-cli: dist/cli.js
+  checksum: 10c0/8ff0d33aad41296eb88f03243a627f9f0db528ea6889e528bbdbf66e38499069bfb9b7c29d2787c49f90f0b2a86a9c3e3475218d5af7a13dd4b0a37bec959703
+  languageName: node
+  linkType: hard
+
 "next-themes@npm:^0.4.6":
   version: 0.4.6
   resolution: "next-themes@npm:0.4.6"
@@ -8034,7 +8245,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"once@npm:^1.3.1, once@npm:^1.4.0":
+"once@npm:^1.3.0, once@npm:^1.3.1, once@npm:^1.4.0":
   version: 1.4.0
   resolution: "once@npm:1.4.0"
   dependencies:
@@ -8236,6 +8447,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-is-absolute@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "path-is-absolute@npm:1.0.1"
+  checksum: 10c0/127da03c82172a2a50099cddbf02510c1791fc2cc5f7713ddb613a56838db1e8168b121a920079d052e0936c23005562059756d653b7c544c53185efe53be078
+  languageName: node
+  linkType: hard
+
 "path-key@npm:^3.0.0, path-key@npm:^3.1.0":
   version: 3.1.1
   resolution: "path-key@npm:3.1.1"
@@ -8567,6 +8785,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-day-picker@npm:^9.7.0":
+  version: 9.7.0
+  resolution: "react-day-picker@npm:9.7.0"
+  dependencies:
+    "@date-fns/tz": "npm:1.2.0"
+    date-fns: "npm:4.1.0"
+    date-fns-jalali: "npm:4.1.0-0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10c0/c08c45a53aebceda1c938d2e4c95eb1702dcf149715e3457739f8930dce19a3be5780e5bad12dcc9d244d50b7e0efb226c336d81c1c062f616cf422e6a3804a6
+  languageName: node
+  linkType: hard
+
 "react-debounce-input@npm:=3.3.0":
   version: 3.3.0
   resolution: "react-debounce-input@npm:3.3.0"
@@ -9411,6 +9642,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sonner@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "sonner@npm:2.0.5"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10c0/38ec98e2f5d7e086825307f737a90bdc8639182d184e002719c2368bf3a9259c340f41afda731716d2b78c40e5e3aa9165058375be42f6a93bda0876b9b433ba
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
@@ -9708,6 +9949,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swagger-jsdoc@npm:6.2.8":
+  version: 6.2.8
+  resolution: "swagger-jsdoc@npm:6.2.8"
+  dependencies:
+    commander: "npm:6.2.0"
+    doctrine: "npm:3.0.0"
+    glob: "npm:7.1.6"
+    lodash.mergewith: "npm:^4.6.2"
+    swagger-parser: "npm:^10.0.3"
+    yaml: "npm:2.0.0-1"
+  bin:
+    swagger-jsdoc: bin/swagger-jsdoc.js
+  checksum: 10c0/7e20f08e8d90cc1e787cd82c096291cf12533359f89c70fbe4295a01f7c4734f2e82a03ba94027127bcd3da04b817abfe979f00d00ef0cd8283e449250a66215
+  languageName: node
+  linkType: hard
+
+"swagger-parser@npm:^10.0.3":
+  version: 10.0.3
+  resolution: "swagger-parser@npm:10.0.3"
+  dependencies:
+    "@apidevtools/swagger-parser": "npm:10.0.3"
+  checksum: 10c0/d1a5c05f651f21a23508a36416071630b83e91dfffd52a6d44b06ca2cd1b86304c0dd2f4c04526c999b70062fa89bde3f5d54a1436626f4350590b6c6265a098
+  languageName: node
+  linkType: hard
+
 "swagger-ui-react@npm:^5.24.1":
   version: 5.25.2
   resolution: "swagger-ui-react@npm:5.25.2"
@@ -9810,6 +10076,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"terminal-columns@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "terminal-columns@npm:1.4.1"
+  checksum: 10c0/e79135b0e9605d247ac26addf2afc0a4313ca4b70e6ff5b8571ab95c93703ab60db5b7b8a61a715e0ea5b6067434cfe1ae58f4392e01ad86c514b347a2a34e34
+  languageName: node
+  linkType: hard
+
 "throttleit@npm:^1.0.0":
   version: 1.0.1
   resolution: "throttleit@npm:1.0.1"
@@ -10103,6 +10376,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-flag@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "type-flag@npm:3.0.0"
+  checksum: 10c0/b1015d4eb18cd85432fa3bcd0228149dd6893a9c1360a2ad619f79b72e19acfb648a932e2a9ccf2e2db0f0c4b86385bd886a3364e221afb116424e0ae6d1b1ba
+  languageName: node
+  linkType: hard
+
 "typed-array-buffer@npm:^1.0.3":
   version: 1.0.3
   resolution: "typed-array-buffer@npm:1.0.3"
@@ -10191,7 +10471,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:5.8.3, typescript@npm:^5.6.3":
+"typescript@npm:^5.6.3, typescript@npm:^5.8.3":
   version: 5.8.3
   resolution: "typescript@npm:5.8.3"
   bin:
@@ -10201,7 +10481,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.6.3#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A^5.6.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.8.3#optional!builtin<compat/typescript>":
   version: 5.8.3
   resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=5786d5"
   bin:
@@ -10439,7 +10719,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"validator@npm:^13.11.0":
+"validator@npm:^13.11.0, validator@npm:^13.7.0":
   version: 13.15.15
   resolution: "validator@npm:13.15.15"
   checksum: 10c0/f5349d1fbb9cc36f9f6c5dab1880764ddad1d0d2b084e2a71e5964f7de1635d20e406611559df9a3db24828ce775cbee5e3b6dd52f0d555a61939ed7ea5990bd
@@ -10662,6 +10942,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:2.0.0-1":
+  version: 2.0.0-1
+  resolution: "yaml@npm:2.0.0-1"
+  checksum: 10c0/e76eba2fbae37cd3e5bff057184be7cdca849895149d2f5660386871a501d76d2e1ec5906c48269a9fe798f214df31d342675b37bcd9d09af7c12eb6fb46a740
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^1.10.0":
   version: 1.10.2
   resolution: "yaml@npm:1.10.2"
@@ -10724,6 +11011,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"z-schema@npm:^5.0.1":
+  version: 5.0.5
+  resolution: "z-schema@npm:5.0.5"
+  dependencies:
+    commander: "npm:^9.4.1"
+    lodash.get: "npm:^4.4.2"
+    lodash.isequal: "npm:^4.5.0"
+    validator: "npm:^13.7.0"
+  dependenciesMeta:
+    commander:
+      optional: true
+  bin:
+    z-schema: bin/z-schema
+  checksum: 10c0/e4c812cfe6468c19b2a21d07d4ff8fb70359062d33400b45f89017eaa3efe9d51e85963f2b115eaaa99a16b451782249bf9b1fa8b31d35cc473e7becb3e44264
+  languageName: node
+  linkType: hard
+
 "zenscroll@npm:^4.0.2":
   version: 4.0.2
   resolution: "zenscroll@npm:4.0.2"

From abc4c063c35c2dd6c3d1425b49711379bf191d40 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Wed, 25 Jun 2025 13:10:52 +0200
Subject: [PATCH 03/23] feat(events): add event list lage

---
 src/app/events/page.tsx                       | 61 ++++++++++++++++
 src/components/custom-ui/event-list-entry.tsx | 72 +++++++++++++++++++
 2 files changed, 133 insertions(+)
 create mode 100644 src/app/events/page.tsx
 create mode 100644 src/components/custom-ui/event-list-entry.tsx

diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
new file mode 100644
index 0000000..75c6720
--- /dev/null
+++ b/src/app/events/page.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { RedirectButton } from '@/components/buttons/redirect-button';
+import EventListEntry from '@/components/custom-ui/event-list-entry';
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Label } from '@/components/ui/label';
+import { useGetApiEvent } from '@/generated/api/event/event';
+
+export default function Events() {
+  const { data: eventsData, isLoading, error } = useGetApiEvent();
+
+  if (isLoading) return <div className='text-center mt-10'>Loading...</div>;
+  if (error)
+    return (
+      <div className='text-center mt-10 text-red-500'>Error loading events</div>
+    );
+
+  const events = eventsData?.data?.events || [];
+
+  return (
+    <div className='relative h-screen flex flex-col items-center'>
+      <div className='absolute top-4 right-4'>
+        <ThemePicker />
+      </div>
+
+      {/* Heading */}
+      <h1 className='text-3xl font-bold mt-8 mb-4 text-center z-10'>
+        My Events
+      </h1>
+
+      {/* Scrollable event list */}
+      <div className='w-full flex justify-center overflow-hidden'>
+        <div className='grid gap-8 w-[90%] sm:w-[80%] lg:w-[60%] xl:w-[50%] p-6 overflow-y-auto'>
+          {events.length > 0 ? (
+            events.map((event) => (
+              <EventListEntry
+                key={event.id}
+                title={event.title}
+                id={event.id}
+                start_time={event.start_time}
+                end_time={event.end_time}
+                location={event.location}
+              />
+            ))
+          ) : (
+            <div className='flex flex-1 flex-col items-center justify-center min-h-[300px]'>
+              <Label size='large' className='justify-center text-center'>
+                You don&#39;t have any events right now
+              </Label>
+              <RedirectButton
+                redirectUrl='/events/new'
+                buttonText='create Event'
+                className='mt-4'
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/custom-ui/event-list-entry.tsx b/src/components/custom-ui/event-list-entry.tsx
new file mode 100644
index 0000000..61beb73
--- /dev/null
+++ b/src/components/custom-ui/event-list-entry.tsx
@@ -0,0 +1,72 @@
+import { Card } from '@/components/ui/card';
+import Logo from '@/components/misc/logo';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+type EventListEntryProps = {
+  title: string;
+  id: string;
+  start_time: string;
+  end_time: string;
+  location: string | null | undefined;
+};
+
+export default function EventListEntry({
+  title,
+  id,
+  start_time,
+  end_time,
+  location,
+}: EventListEntryProps) {
+  const formatDate = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleDateString();
+  };
+  const formatTime = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+  return (
+    <Link href={`/events/${id}`} className='block'>
+      <Card className='w-full'>
+        <div className='grid grid-cols-1 gap-2 mx-auto md:mx-4 md:grid-cols-[80px_1fr_250px]'>
+          <div className='w-full items-center justify-center grid'>
+            <Logo colorType='monochrome' logoType='submark' width={50} />
+          </div>
+          <div className='w-full items-center justify-center grid my-3 md:my-0'>
+            <h2 className='text-center'>{title}</h2>
+          </div>
+          <div className='grid gap-4'>
+            <div className='grid grid-cols-[80px_auto] gap-2'>
+              <Label className='text-[var(--color-neutral-300)] justify-end'>
+                start
+              </Label>
+              <Label>
+                {formatDate(start_time)} {formatTime(start_time)}
+              </Label>
+            </div>
+            <div className='grid grid-cols-[80px_auto] gap-2'>
+              <Label className='text-[var(--color-neutral-300)] justify-end'>
+                end
+              </Label>
+              <Label>
+                {formatDate(end_time)} {formatTime(end_time)}
+              </Label>
+            </div>
+            {location && (
+              <div className='grid grid-cols-[80px_auto] gap-2'>
+                <Label className='text-[var(--color-neutral-300)] justify-end'>
+                  location
+                </Label>
+                <Label>{location}</Label>
+              </div>
+            )}
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}

From 173be63a9c9f5b7f3e8d3342711eb9d83b275e75 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Wed, 25 Jun 2025 13:11:14 +0200
Subject: [PATCH 04/23] feat(events): add event edit page

---
 src/app/events/edit/[eventID]/page.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/app/events/edit/[eventID]/page.tsx

diff --git a/src/app/events/edit/[eventID]/page.tsx b/src/app/events/edit/[eventID]/page.tsx
new file mode 100644
index 0000000..712ba05
--- /dev/null
+++ b/src/app/events/edit/[eventID]/page.tsx
@@ -0,0 +1,26 @@
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import EventForm from '@/components/forms/event-form';
+import { Suspense } from 'react';
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ eventID: string }>;
+}) {
+  const eventID = (await params).eventID;
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
+      <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
+        <CardHeader className='p-0 m-0 gap-0' />
+
+        <CardContent>
+          <Suspense>
+            <EventForm type='edit' eventId={eventID} />
+          </Suspense>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

From a357a5a8d7d984e980474ad00466e2c7e691000c Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Wed, 25 Jun 2025 13:11:26 +0200
Subject: [PATCH 05/23] feat(event): add event view page

---
 src/app/events/[eventID]/page.tsx | 175 ++++++++++++++++++++++++++++++
 1 file changed, 175 insertions(+)
 create mode 100644 src/app/events/[eventID]/page.tsx

diff --git a/src/app/events/[eventID]/page.tsx b/src/app/events/[eventID]/page.tsx
new file mode 100644
index 0000000..4248d7a
--- /dev/null
+++ b/src/app/events/[eventID]/page.tsx
@@ -0,0 +1,175 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+import Logo from '@/components/misc/logo';
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { useGetApiEventEventID } from '@/generated/api/event/event';
+import { useGetApiUserMe } from '@/generated/api/user/user';
+import { RedirectButton } from '@/components/buttons/redirect-button';
+import { useSession } from 'next-auth/react';
+import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
+
+export default function ShowEvent() {
+  const session = useSession();
+  const pathname = usePathname();
+
+  // Extract eventId from URL like /events/[eventId]
+  const eventId = pathname.split('/').pop() || '';
+
+  // Fetch event data
+  const { data: eventData, isLoading, error } = useGetApiEventEventID(eventId);
+  const { data: userData, isLoading: userLoading } = useGetApiUserMe();
+
+  if (isLoading || userLoading) {
+    return (
+      <div className='flex justify-center items-center h-screen'>
+        Loading...
+      </div>
+    );
+  }
+  if (error || !eventData?.data?.event) {
+    return (
+      <div className='flex justify-center items-center h-screen'>
+        Error loading event.
+      </div>
+    );
+  }
+
+  const event = eventData.data.event;
+  const organiserName = userData?.data.user?.name || 'Unknown User';
+
+  // Format dates & times for display
+  const formatDate = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleDateString();
+  };
+  const formatTime = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <div className='absolute top-4 right-4'>
+        <ThemePicker />
+      </div>
+      <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
+        <CardHeader className='p-0 m-0 gap-0' />
+
+        <CardContent>
+          <div className='flex flex-col gap-5 w-full'>
+            <div className='grid grid-row-start:auto gap-4 sm:gap-8'>
+              <div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
+                <div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
+                  <Logo colorType='monochrome' logoType='submark' width={50} />
+                </div>
+                <div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full max-sm:flex max-sm:justify-center'>
+                  <h1 className='text-center'>
+                    {event.title || 'Untitled Event'}
+                  </h1>
+                </div>
+                <div className='w-0 sm:w-[100px]'></div>
+              </div>
+              <div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
+                <div>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    start Time
+                  </Label>
+                  <Label size='large'>
+                    {event.start_time
+                      ? `${formatDate(event.start_time)} ${formatTime(event.start_time)}`
+                      : '-'}
+                  </Label>
+                </div>
+                <div>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    end Time
+                  </Label>
+                  <Label size='large'>
+                    {event.end_time
+                      ? `${formatDate(event.end_time)} ${formatTime(event.end_time)}`
+                      : '-'}
+                  </Label>
+                </div>
+                <div className='w-54'>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    Location
+                  </Label>
+                  <Label size='large'>{event.location || '-'}</Label>
+                </div>
+                <div className='flex flex-col gap-4'>
+                  <div className='flex flex-row gap-2'>
+                    <Label className='w-[70px] text-[var(--color-neutral-300)]'>
+                      created:
+                    </Label>
+                    <Label>
+                      {event.created_at ? formatDate(event.created_at) : '-'}
+                    </Label>
+                  </div>
+                  <div className='flex flex-row gap-2'>
+                    <Label className='w-[70px] text-[var(--color-neutral-300)]'>
+                      updated:
+                    </Label>
+                    <Label>
+                      {event.updated_at ? formatDate(event.updated_at) : '-'}
+                    </Label>
+                  </div>
+                </div>
+              </div>
+              <div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
+                <div className='h-full w-full grid grid-flow-row gap-4 sm:gap-8'>
+                  <div className='h-full w-full'>
+                    <div className='flex flex-row gap-2'>
+                      <Label className='text-[var(--color-neutral-300)]'>
+                        Organiser:
+                      </Label>
+                      <Label size='large'>{organiserName}</Label>
+                    </div>
+                  </div>
+                  <div className='h-full w-full'>
+                    <Label className='text-[var(--color-neutral-300)] mb-2'>
+                      Description
+                    </Label>
+                    <Label size='large'>{event.description || '-'}</Label>
+                  </div>
+                </div>
+                <div className='h-full w-full mt-2'>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    Participants
+                  </Label>{' '}
+                  <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
+                    {event.participants?.map((user) => (
+                      <ParticipantListEntry
+                        key={user.user.id}
+                        participant={user.user.name}
+                        imageSrc={user.user.image}
+                      ></ParticipantListEntry>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
+                <div className='w-[20%] grid max-sm:w-full'>
+                  {session.data?.user?.id === event.organizer.id ? (
+                    <RedirectButton
+                      redirectUrl={`/events/edit/${eventId}`}
+                      buttonText='edit'
+                      className='w-full'
+                    />
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

From 4a4d3b73d665621224e76ab42fe110ba527c1b3f Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Wed, 25 Jun 2025 13:11:37 +0200
Subject: [PATCH 06/23] feat(events): add event creation page

---
 src/app/(main)/home/page.tsx |  1 +
 src/app/events/new/page.tsx  | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/app/events/new/page.tsx

diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx
index c381c03..66a97d8 100644
--- a/src/app/(main)/home/page.tsx
+++ b/src/app/(main)/home/page.tsx
@@ -15,6 +15,7 @@ export default function Home() {
         </h1>
         <RedirectButton redirectUrl='/logout' buttonText='Logout' />
         <RedirectButton redirectUrl='/settings' buttonText='Settings' />
+        <RedirectButton redirectUrl='/events/new' buttonText='New Event' />
       </div>
     </div>
   );
diff --git a/src/app/events/new/page.tsx b/src/app/events/new/page.tsx
new file mode 100644
index 0000000..2db7ae2
--- /dev/null
+++ b/src/app/events/new/page.tsx
@@ -0,0 +1,21 @@
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import EventForm from '@/components/forms/event-form';
+import { Suspense } from 'react';
+
+export default function NewEvent() {
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
+      <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
+        <CardHeader className='p-0 m-0 gap-0' />
+
+        <CardContent>
+          <Suspense>
+            <EventForm type='create' />
+          </Suspense>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

From 8bbb7e4c85a1460d9e8f589fe50334d122ffae16 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Wed, 25 Jun 2025 19:11:38 +0200
Subject: [PATCH 07/23] feat(events): refactor event and participant list
 entries to use schema validation

---
 src/app/events/[eventID]/page.tsx             | 12 +++--------
 src/app/events/page.tsx                       |  8 +++----
 src/components/custom-ui/event-list-entry.tsx | 10 +++------
 .../custom-ui/participant-list-entry.tsx      | 14 ++++++-------
 src/components/forms/event-form.tsx           | 21 +++++++++----------
 src/components/misc/user-search.tsx           |  7 +++----
 6 files changed, 28 insertions(+), 44 deletions(-)

diff --git a/src/app/events/[eventID]/page.tsx b/src/app/events/[eventID]/page.tsx
index 4248d7a..c366130 100644
--- a/src/app/events/[eventID]/page.tsx
+++ b/src/app/events/[eventID]/page.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { usePathname } from 'next/navigation';
 import Logo from '@/components/misc/logo';
 import { ThemePicker } from '@/components/misc/theme-picker';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
@@ -11,13 +10,12 @@ import { useGetApiUserMe } from '@/generated/api/user/user';
 import { RedirectButton } from '@/components/buttons/redirect-button';
 import { useSession } from 'next-auth/react';
 import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
+import { useParams } from 'next/navigation';
 
 export default function ShowEvent() {
   const session = useSession();
-  const pathname = usePathname();
 
-  // Extract eventId from URL like /events/[eventId]
-  const eventId = pathname.split('/').pop() || '';
+  const { eventId } = useParams<{ eventId: string }>();
 
   // Fetch event data
   const { data: eventData, isLoading, error } = useGetApiEventEventID(eventId);
@@ -145,11 +143,7 @@ export default function ShowEvent() {
                   </Label>{' '}
                   <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
                     {event.participants?.map((user) => (
-                      <ParticipantListEntry
-                        key={user.user.id}
-                        participant={user.user.name}
-                        imageSrc={user.user.image}
-                      ></ParticipantListEntry>
+                      <ParticipantListEntry key={user.user.id} {...user} />
                     ))}
                   </div>
                 </div>
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 75c6720..b5c295d 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -35,11 +35,9 @@ export default function Events() {
             events.map((event) => (
               <EventListEntry
                 key={event.id}
-                title={event.title}
-                id={event.id}
-                start_time={event.start_time}
-                end_time={event.end_time}
-                location={event.location}
+                {...event}
+                created_at={new Date(event.created_at)}
+                updated_at={new Date(event.updated_at)}
               />
             ))
           ) : (
diff --git a/src/components/custom-ui/event-list-entry.tsx b/src/components/custom-ui/event-list-entry.tsx
index 61beb73..197649b 100644
--- a/src/components/custom-ui/event-list-entry.tsx
+++ b/src/components/custom-ui/event-list-entry.tsx
@@ -2,14 +2,10 @@ import { Card } from '@/components/ui/card';
 import Logo from '@/components/misc/logo';
 import { Label } from '@/components/ui/label';
 import Link from 'next/link';
+import zod from 'zod/v4';
+import { EventSchema } from '@/app/api/event/validation';
 
-type EventListEntryProps = {
-  title: string;
-  id: string;
-  start_time: string;
-  end_time: string;
-  location: string | null | undefined;
-};
+type EventListEntryProps = zod.output<typeof EventSchema>;
 
 export default function EventListEntry({
   title,
diff --git a/src/components/custom-ui/participant-list-entry.tsx b/src/components/custom-ui/participant-list-entry.tsx
index 292a28b..27827cf 100644
--- a/src/components/custom-ui/participant-list-entry.tsx
+++ b/src/components/custom-ui/participant-list-entry.tsx
@@ -3,26 +3,24 @@ import Image from 'next/image';
 import { user_default_dark } from '@/assets/usericon/default/defaultusericon-export';
 import { user_default_light } from '@/assets/usericon/default/defaultusericon-export';
 import { useTheme } from 'next-themes';
+import zod from 'zod/v4';
+import { ParticipantSchema } from '@/app/api/event/[eventID]/participant/validation';
 
-type ParticipantListEntryProps = {
-  participant: string;
-  imageSrc?: string | null;
-};
+type ParticipantListEntryProps = zod.output<typeof ParticipantSchema>;
 
 export default function ParticipantListEntry({
-  participant,
-  imageSrc,
+  user,
 }: ParticipantListEntryProps) {
   const { resolvedTheme } = useTheme();
   const defaultImage =
     resolvedTheme === 'dark' ? user_default_dark : user_default_light;
 
-  const finalImageSrc = imageSrc ?? defaultImage;
+  const finalImageSrc = user.image ?? defaultImage;
 
   return (
     <div className='flex items-center gap-2 py-1 ml-5'>
       <Image src={finalImageSrc} alt='Avatar' width={30} height={30} />
-      <span>{participant}</span>
+      <span>{user.name}</span>
     </div>
   );
 }
diff --git a/src/components/forms/event-form.tsx b/src/components/forms/event-form.tsx
index d89988a..a445080 100644
--- a/src/components/forms/event-form.tsx
+++ b/src/components/forms/event-form.tsx
@@ -19,10 +19,10 @@ import ParticipantListEntry from '../custom-ui/participant-list-entry';
 
 import { useSearchParams } from 'next/navigation';
 
-interface User {
-  id: string;
-  name: string;
-}
+import zod from 'zod/v4';
+import { PublicUserSchema } from '@/app/api/user/validation';
+
+type User = zod.output<typeof PublicUserSchema>;
 
 interface EventFormProps {
   type: 'create' | 'edit';
@@ -85,12 +85,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
       }
       setLocation(event.location || '');
       setDescription(event.description || '');
-      setSelectedParticipants(
-        event.participants?.map((u) => ({
-          id: u.user.id,
-          name: u.user.name,
-        })) || [],
-      );
+      setSelectedParticipants(event.participants?.map((u) => u.user) || []);
     } else if (props.type === 'create' && startFromUrl && endFromUrl) {
       // If creating a new event with URL params, set title and dates
       setTitle('');
@@ -305,7 +300,11 @@ const EventForm: React.FC<EventFormProps> = (props) => {
             />
             <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
               {selectedParticipants.map((user) => (
-                <ParticipantListEntry key={user.id} participant={user.name} />
+                <ParticipantListEntry
+                  key={user.id}
+                  user={user}
+                  status='PENDING'
+                />
               ))}
             </div>
           </div>
diff --git a/src/components/misc/user-search.tsx b/src/components/misc/user-search.tsx
index 82b7c38..9509e57 100644
--- a/src/components/misc/user-search.tsx
+++ b/src/components/misc/user-search.tsx
@@ -19,11 +19,10 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { useGetApiSearchUser } from '@/generated/api/search/search';
+import zod from 'zod/v4';
+import { PublicUserSchema } from '@/app/api/user/validation';
 
-interface User {
-  id: string;
-  name: string;
-}
+type User = zod.output<typeof PublicUserSchema>;
 
 export function UserSearchInput({
   addUserAction,

From 42e1b69720e8ef7345d5e705d6bf9034b6a0809e Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Thu, 26 Jun 2025 12:56:53 +0200
Subject: [PATCH 08/23] feat(events): add deletion button and style toaster for
 light mode

---
 .../{ => (main)}/events/[eventID]/page.tsx    | 89 ++++++++++++++++---
 .../events/edit/[eventID]/page.tsx            |  2 -
 src/app/{ => (main)}/events/new/page.tsx      |  0
 src/app/{ => (main)}/events/page.tsx          |  5 --
 src/app/globals.css                           | 42 +++++++--
 src/components/misc/toast-inner.tsx           | 20 +++--
 src/components/ui/button.tsx                  |  2 +
 7 files changed, 128 insertions(+), 32 deletions(-)
 rename src/app/{ => (main)}/events/[eventID]/page.tsx (66%)
 rename src/app/{ => (main)}/events/edit/[eventID]/page.tsx (84%)
 rename src/app/{ => (main)}/events/new/page.tsx (100%)
 rename src/app/{ => (main)}/events/page.tsx (92%)

diff --git a/src/app/events/[eventID]/page.tsx b/src/app/(main)/events/[eventID]/page.tsx
similarity index 66%
rename from src/app/events/[eventID]/page.tsx
rename to src/app/(main)/events/[eventID]/page.tsx
index c366130..bfc390d 100644
--- a/src/app/events/[eventID]/page.tsx
+++ b/src/app/(main)/events/[eventID]/page.tsx
@@ -1,25 +1,42 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import Logo from '@/components/misc/logo';
-import { ThemePicker } from '@/components/misc/theme-picker';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
-import { useGetApiEventEventID } from '@/generated/api/event/event';
+import {
+  useDeleteApiEventEventID,
+  useGetApiEventEventID,
+} from '@/generated/api/event/event';
 import { useGetApiUserMe } from '@/generated/api/user/user';
 import { RedirectButton } from '@/components/buttons/redirect-button';
 import { useSession } from 'next-auth/react';
 import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { ToastInner } from '@/components/misc/toast-inner';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
 
 export default function ShowEvent() {
   const session = useSession();
+  const router = useRouter();
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
-  const { eventId } = useParams<{ eventId: string }>();
+  const { eventID: eventID } = useParams<{ eventID: string }>();
 
   // Fetch event data
-  const { data: eventData, isLoading, error } = useGetApiEventEventID(eventId);
+  const { data: eventData, isLoading, error } = useGetApiEventEventID(eventID);
   const { data: userData, isLoading: userLoading } = useGetApiUserMe();
+  const deleteEvent = useDeleteApiEventEventID();
 
   if (isLoading || userLoading) {
     return (
@@ -54,9 +71,6 @@ export default function ShowEvent() {
 
   return (
     <div className='flex flex-col items-center justify-center h-screen'>
-      <div className='absolute top-4 right-4'>
-        <ThemePicker />
-      </div>
       <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
         <CardHeader className='p-0 m-0 gap-0' />
 
@@ -150,10 +164,65 @@ export default function ShowEvent() {
               </div>
 
               <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
+                <div className='w-[20%] grid max-sm:w-full'>
+                  {session.data?.user?.id === event.organizer.id ? (
+                    <Dialog
+                      open={deleteDialogOpen}
+                      onOpenChange={setDeleteDialogOpen}
+                    >
+                      <DialogTrigger asChild>
+                        <Button variant='destructive' className='w-full'>
+                          delete
+                        </Button>
+                      </DialogTrigger>
+                      <DialogContent>
+                        <DialogHeader>
+                          <DialogTitle>Delete Event</DialogTitle>
+                          <DialogDescription>
+                            Are you sure you want to delete the event &ldquo;
+                            {event.title}&rdquo;? This action cannot be undone.
+                          </DialogDescription>
+                        </DialogHeader>
+                        <DialogFooter>
+                          <Button
+                            variant='secondary'
+                            onClick={() => setDeleteDialogOpen(false)}
+                          >
+                            Cancel
+                          </Button>
+                          <Button
+                            variant='muted'
+                            onClick={() => {
+                              deleteEvent.mutate(
+                                { eventID: event.id },
+                                {
+                                  onSuccess: () => {
+                                    router.push('/home');
+                                    toast.custom((t) => (
+                                      <ToastInner
+                                        toastId={t}
+                                        title='Event deleted'
+                                        description={event?.title}
+                                        variant='success'
+                                      />
+                                    ));
+                                  },
+                                },
+                              );
+                              setDeleteDialogOpen(false);
+                            }}
+                          >
+                            Delete
+                          </Button>
+                        </DialogFooter>
+                      </DialogContent>
+                    </Dialog>
+                  ) : null}
+                </div>
                 <div className='w-[20%] grid max-sm:w-full'>
                   {session.data?.user?.id === event.organizer.id ? (
                     <RedirectButton
-                      redirectUrl={`/events/edit/${eventId}`}
+                      redirectUrl={`/events/edit/${eventID}`}
                       buttonText='edit'
                       className='w-full'
                     />
diff --git a/src/app/events/edit/[eventID]/page.tsx b/src/app/(main)/events/edit/[eventID]/page.tsx
similarity index 84%
rename from src/app/events/edit/[eventID]/page.tsx
rename to src/app/(main)/events/edit/[eventID]/page.tsx
index 712ba05..42c6e8b 100644
--- a/src/app/events/edit/[eventID]/page.tsx
+++ b/src/app/(main)/events/edit/[eventID]/page.tsx
@@ -1,4 +1,3 @@
-import { ThemePicker } from '@/components/misc/theme-picker';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import EventForm from '@/components/forms/event-form';
 import { Suspense } from 'react';
@@ -11,7 +10,6 @@ export default async function Page({
   const eventID = (await params).eventID;
   return (
     <div className='flex flex-col items-center justify-center h-screen'>
-      <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
       <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
         <CardHeader className='p-0 m-0 gap-0' />
 
diff --git a/src/app/events/new/page.tsx b/src/app/(main)/events/new/page.tsx
similarity index 100%
rename from src/app/events/new/page.tsx
rename to src/app/(main)/events/new/page.tsx
diff --git a/src/app/events/page.tsx b/src/app/(main)/events/page.tsx
similarity index 92%
rename from src/app/events/page.tsx
rename to src/app/(main)/events/page.tsx
index b5c295d..f0391dd 100644
--- a/src/app/events/page.tsx
+++ b/src/app/(main)/events/page.tsx
@@ -2,7 +2,6 @@
 
 import { RedirectButton } from '@/components/buttons/redirect-button';
 import EventListEntry from '@/components/custom-ui/event-list-entry';
-import { ThemePicker } from '@/components/misc/theme-picker';
 import { Label } from '@/components/ui/label';
 import { useGetApiEvent } from '@/generated/api/event/event';
 
@@ -19,10 +18,6 @@ export default function Events() {
 
   return (
     <div className='relative h-screen flex flex-col items-center'>
-      <div className='absolute top-4 right-4'>
-        <ThemePicker />
-      </div>
-
       {/* Heading */}
       <h1 className='text-3xl font-bold mt-8 mb-4 text-center z-10'>
         My Events
diff --git a/src/app/globals.css b/src/app/globals.css
index 1707398..bc18178 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -50,11 +50,23 @@
   --active-secondary: oklch(0.4254 0.133 272.15);
   --disabled-secondary: oklch(0.4937 0.1697 271.26 / 0.5);
 
+  --destructive: oklch(60.699% 0.20755 25.945);
+  --hover-destructive: oklch(60.699% 0.20755 25.945 / 0.8);
+  --active-destructive: oklch(50.329% 0.17084 25.842);
+  --disabled-destructive: oklch(60.699% 0.20755 25.945 / 0.4);
+
   --muted: var(--color-neutral-700);
   --hover-muted: var(--color-neutral-600);
   --active-muted: var(--color-neutral-400);
   --disabled-muted: var(--color-neutral-400);
 
+  --toaster-default-bg: var(--color-neutral-150);
+  --toaster-success-bg: oklch(54.147% 0.09184 144.208);
+  --toaster-error-bg: oklch(52.841% 0.10236 27.274);
+  --toaster-info-bg: oklch(44.298% 0.05515 259.369);
+  --toaster-warning-bg: oklch(61.891% 0.07539 102.943);
+  --toaster-notification-bg: var(--color-neutral-150);
+
   --card: var(--neutral-800);
 
   --sidebar-width-icon: 32px;
@@ -81,8 +93,6 @@
 
   --accent-foreground: oklch(0.21 0.034 264.665);
 
-  --destructive: oklch(0.577 0.245 27.325);
-
   --border: oklch(0.928 0.006 264.531);
 
   --input: oklch(0.928 0.006 264.531);
@@ -232,11 +242,23 @@ p {
   --color-active-secondary: var(--active-secondary);
   --color-disabled-secondary: var(--disabled-secondary);
 
+  --color-destructive: var(--destructive);
+  --color-hover-destructive: var(--hover-destructive);
+  --color-active-destructive: var(--active-destructive);
+  --color-disabled-destructive: var(--disabled-destructive);
+
   --color-muted: var(--muted);
   --color-hover-muted: var(--hover-muted);
   --color-active-muted: var(--active-muted);
   --color-disabled-muted: var(--disabled-muted);
 
+  --color-toaster-default-bg: var(--toaster-default-bg);
+  --color-toaster-success-bg: var(--toaster-success-bg);
+  --color-toaster-error-bg: var(--toaster-error-bg);
+  --color-toaster-info-bg: var(--toaster-info-bg);
+  --color-toaster-warning-bg: var(--toaster-warning-bg);
+  --color-toaster-notification-bg: var(--toaster-notification-bg);
+
   /* Custom values */
 
   --radius-sm: calc(var(--radius) - 4px);
@@ -277,8 +299,6 @@ p {
 
   --color-accent-foreground: var(--accent-foreground);
 
-  --color-destructive: var(--destructive);
-
   --color-border: var(--border);
 
   --color-input: var(--input);
@@ -354,11 +374,23 @@ p {
   --active-secondary: oklch(0.4471 0.15 271.61);
   --disabled-secondary: oklch(0.6065 0.213 271.11 / 0.4);
 
+  --destructive: oklch(0.58 0.2149 27.13);
+  --hover-destructive: oklch(0.58 0.2149 27.13 / 0.8);
+  --active-destructive: oklch(45.872% 0.16648 26.855);
+  --disabled-destructive: oklch(0.58 0.2149 27.13 / 0.4);
+
   --muted: var(--color-neutral-650);
   --hover-muted: var(--color-neutral-500);
   --active-muted: var(--color-neutral-400);
   --disabled-muted: var(--color-neutral-400);
 
+  --toaster-default-bg: var(--color-neutral-150);
+  --toaster-success-bg: var(--color-green-200);
+  --toaster-error-bg: var(--color-red-200);
+  --toaster-info-bg: var(--color-blue-200);
+  --toaster-warning-bg: var(--color-yellow-200);
+  --toaster-notification-bg: var(--color-neutral-150);
+
   --card: var(--neutral-750);
 
   /* ------------------- */
@@ -383,8 +415,6 @@ p {
 
   --accent-foreground: oklch(0.985 0.002 247.839);
 
-  --destructive: oklch(0.704 0.191 22.216);
-
   --border: oklch(1 0 0 / 10%);
 
   --input: oklch(1 0 0 / 15%);
diff --git a/src/components/misc/toast-inner.tsx b/src/components/misc/toast-inner.tsx
index 9617b75..c3f8134 100644
--- a/src/components/misc/toast-inner.tsx
+++ b/src/components/misc/toast-inner.tsx
@@ -65,27 +65,27 @@ interface ToastInnerProps {
 
 const variantConfig = {
   default: {
-    bgColor: 'bg-neutral-150',
+    bgColor: 'bg-toaster-default-bg',
     defaultIcon: 'Info',
   },
   success: {
-    bgColor: 'bg-green-200',
+    bgColor: 'bg-toaster-success-bg',
     defaultIcon: 'CheckCircle',
   },
   error: {
-    bgColor: 'bg-red-200',
+    bgColor: 'bg-toaster-error-bg',
     defaultIcon: 'XCircle',
   },
   info: {
-    bgColor: 'bg-blue-200',
+    bgColor: 'bg-toaster-info-bg',
     defaultIcon: 'Info',
   },
   warning: {
-    bgColor: 'bg-yellow-200',
+    bgColor: 'bg-toaster-warning-bg',
     defaultIcon: 'AlertTriangle',
   },
   notification: {
-    bgColor: 'bg-neutral-150',
+    bgColor: 'bg-toaster-notification-bg',
     defaultIcon: 'BellRing',
   },
 };
@@ -127,14 +127,16 @@ export const ToastInner: React.FC<ToastInnerProps> = ({
       >
         {variant !== 'default' && (
           <div className='flex items-center justify-center'>
-            <Icon size={40} />
+            <Icon className='text-text-alt' size={40} />
           </div>
         )}
 
         {/* Text Content */}
         <div className='grid gap-1'>
-          <h6>{title}</h6>
-          {description && <Label>{description}</Label>}
+          <h6 className='text-text-alt'>{title}</h6>
+          {description && (
+            <Label className='text-text-alt'>{description}</Label>
+          )}
         </div>
 
         {/* Action Button */}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8daf206..a5eec23 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -26,6 +26,8 @@ const buttonVariants = cva(
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 w-32 justify-between font-normal',
         ghost:
           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        destructive:
+          'bg-destructive text-text shadow-xs hover:bg-hover-destructive active:bg-active-destructive disabled:bg-disabled-destructive',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',

From cd7c62cb98541060bc027c2d5d752831b4e231e1 Mon Sep 17 00:00:00 2001
From: Renovate Bot <renovate@dominikstahl.dev>
Date: Thu, 26 Jun 2025 11:01:16 +0000
Subject: [PATCH 09/23] fix(deps): update dependency swagger-ui-react to
 v5.25.3

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index fdbfaa1..7ad9cda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9709,8 +9709,8 @@ __metadata:
   linkType: hard
 
 "swagger-ui-react@npm:^5.24.1":
-  version: 5.25.2
-  resolution: "swagger-ui-react@npm:5.25.2"
+  version: 5.25.3
+  resolution: "swagger-ui-react@npm:5.25.3"
   dependencies:
     "@babel/runtime-corejs3": "npm:^7.27.1"
     "@scarf/scarf": "npm:=1.4.0"
@@ -9748,7 +9748,7 @@ __metadata:
   peerDependencies:
     react: ">=16.8.0 <19"
     react-dom: ">=16.8.0 <19"
-  checksum: 10c0/036fe857782ecba1410be7789a23be185a2af369274aaafa853b4b17c5216df2f39e7470149487de55fab8be7ca3f0e9174c752f4ffcb97f0e7909a8b002d2fa
+  checksum: 10c0/9d6542d0d1bd2533e87853d4deef5507d30b35941c697d50c763428533a88cbd9c2e3abe1af5946e35aa7fa3568dc14b9da4363f09bdf6d8023e0699efceb5cf
   languageName: node
   linkType: hard
 

From edee739812642c2e1cfd1b2a0111ac19477add5f Mon Sep 17 00:00:00 2001
From: Renovate Bot <renovate@dominikstahl.dev>
Date: Thu, 26 Jun 2025 18:01:00 +0000
Subject: [PATCH 10/23] chore(deps): pin dependencies

---
 .github/workflows/tests.yml |  2 +-
 package.json                |  4 ++--
 yarn.lock                   | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 3220256..b0d8710 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -10,7 +10,7 @@ jobs:
     name: Tests
     runs-on: docker
     container:
-      image: cypress/browsers:latest
+      image: cypress/browsers:latest@sha256:9daea41366dfd1b72496bf3e8295eda215a6990c2dbe4f9ff4b8ba47342864fb
       options: --user 1001
     steps:
       - name: Checkout
diff --git a/package.json b/package.json
index e18c3c4..4594d6a 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "@types/node": "22.15.33",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
-    "@types/swagger-ui-react": "5",
+    "@types/swagger-ui-react": "5.18.0",
     "@types/webpack-env": "1.18.8",
     "cypress": "14.5.0",
     "dotenv-cli": "8.0.0",
@@ -86,7 +86,7 @@
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tw-animate-css": "1.3.4",
-    "typescript": "^5.8.3"
+    "typescript": "5.8.3"
   },
   "packageManager": "yarn@4.9.2"
 }
diff --git a/yarn.lock b/yarn.lock
index 5ef4d93..b7a88a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3396,7 +3396,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/swagger-ui-react@npm:5":
+"@types/swagger-ui-react@npm:5.18.0":
   version: 5.18.0
   resolution: "@types/swagger-ui-react@npm:5.18.0"
   dependencies:
@@ -7587,7 +7587,7 @@ __metadata:
     "@types/node": "npm:22.15.33"
     "@types/react": "npm:19.1.8"
     "@types/react-dom": "npm:19.1.6"
-    "@types/swagger-ui-react": "npm:5"
+    "@types/swagger-ui-react": "npm:5.18.0"
     "@types/webpack-env": "npm:1.18.8"
     bcryptjs: "npm:^3.0.2"
     class-variance-authority: "npm:^0.7.1"
@@ -7619,7 +7619,7 @@ __metadata:
     ts-node: "npm:10.9.2"
     tsconfig-paths: "npm:4.2.0"
     tw-animate-css: "npm:1.3.4"
-    typescript: "npm:^5.8.3"
+    typescript: "npm:5.8.3"
     zod: "npm:^3.25.60"
   languageName: unknown
   linkType: soft
@@ -10471,7 +10471,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.6.3, typescript@npm:^5.8.3":
+"typescript@npm:5.8.3, typescript@npm:^5.6.3":
   version: 5.8.3
   resolution: "typescript@npm:5.8.3"
   bin:
@@ -10481,7 +10481,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.6.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.8.3#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.6.3#optional!builtin<compat/typescript>":
   version: 5.8.3
   resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=5786d5"
   bin:

From 80cac65fc6cbaf63be6e3c7b533f67e204c3ed6d Mon Sep 17 00:00:00 2001
From: Renovate Bot <renovate@dominikstahl.dev>
Date: Thu, 26 Jun 2025 18:01:14 +0000
Subject: [PATCH 11/23] chore(deps): update tailwindcss monorepo to v4.1.11

---
 package.json |   4 +-
 yarn.lock    | 144 +++++++++++++++++++++++++--------------------------
 2 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/package.json b/package.json
index e18c3c4..9425670 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.3.1",
-    "@tailwindcss/postcss": "4.1.10",
+    "@tailwindcss/postcss": "4.1.11",
     "@types/node": "22.15.33",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
@@ -82,7 +82,7 @@
     "postcss": "8.5.6",
     "prettier": "3.5.3",
     "prisma": "6.10.1",
-    "tailwindcss": "4.1.10",
+    "tailwindcss": "4.1.11",
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tw-animate-css": "1.3.4",
diff --git a/yarn.lock b/yarn.lock
index 5ef4d93..7797aeb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -999,7 +999,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@napi-rs/wasm-runtime@npm:^0.2.10, @napi-rs/wasm-runtime@npm:^0.2.11":
+"@napi-rs/wasm-runtime@npm:^0.2.11":
   version: 0.2.11
   resolution: "@napi-rs/wasm-runtime@npm:0.2.11"
   dependencies:
@@ -3045,9 +3045,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tailwindcss/node@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/node@npm:4.1.10"
+"@tailwindcss/node@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/node@npm:4.1.11"
   dependencies:
     "@ampproject/remapping": "npm:^2.3.0"
     enhanced-resolve: "npm:^5.18.1"
@@ -3055,118 +3055,118 @@ __metadata:
     lightningcss: "npm:1.30.1"
     magic-string: "npm:^0.30.17"
     source-map-js: "npm:^1.2.1"
-    tailwindcss: "npm:4.1.10"
-  checksum: 10c0/5cf900fe53ba08b5d9bfbd48925ea2c18eb8f89ae47738d95372152ed9b20c020bf3660ad04fa5dbb67f62ce01efd431cf4d3015d2d43e918fa89ce3c77b5170
+    tailwindcss: "npm:4.1.11"
+  checksum: 10c0/1a433aecd80d0c6d07d468ed69b696e4e02996e6b77cc5ed66e3c91b02f5fa9a26320fb321e4b1aa107003b401d7a4ffeb2986966dc022ec329a44e54493a2aa
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-android-arm64@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-android-arm64@npm:4.1.10"
+"@tailwindcss/oxide-android-arm64@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.1.11"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-darwin-arm64@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.1.10"
+"@tailwindcss/oxide-darwin-arm64@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.1.11"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-darwin-x64@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.1.10"
+"@tailwindcss/oxide-darwin-x64@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.1.11"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-freebsd-x64@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.1.10"
+"@tailwindcss/oxide-freebsd-x64@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.1.11"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.10"
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.11"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.10"
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.11"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-linux-arm64-musl@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.1.10"
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.1.11"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-linux-x64-gnu@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.1.10"
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.1.11"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-linux-x64-musl@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.1.10"
+"@tailwindcss/oxide-linux-x64-musl@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.1.11"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-wasm32-wasi@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.1.10"
+"@tailwindcss/oxide-wasm32-wasi@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.1.11"
   dependencies:
     "@emnapi/core": "npm:^1.4.3"
     "@emnapi/runtime": "npm:^1.4.3"
     "@emnapi/wasi-threads": "npm:^1.0.2"
-    "@napi-rs/wasm-runtime": "npm:^0.2.10"
+    "@napi-rs/wasm-runtime": "npm:^0.2.11"
     "@tybys/wasm-util": "npm:^0.9.0"
     tslib: "npm:^2.8.0"
   conditions: cpu=wasm32
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.10"
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.11"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide-win32-x64-msvc@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.1.10"
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.1.11"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/oxide@npm:4.1.10"
+"@tailwindcss/oxide@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/oxide@npm:4.1.11"
   dependencies:
-    "@tailwindcss/oxide-android-arm64": "npm:4.1.10"
-    "@tailwindcss/oxide-darwin-arm64": "npm:4.1.10"
-    "@tailwindcss/oxide-darwin-x64": "npm:4.1.10"
-    "@tailwindcss/oxide-freebsd-x64": "npm:4.1.10"
-    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.1.10"
-    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.1.10"
-    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.1.10"
-    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.1.10"
-    "@tailwindcss/oxide-linux-x64-musl": "npm:4.1.10"
-    "@tailwindcss/oxide-wasm32-wasi": "npm:4.1.10"
-    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.1.10"
-    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.1.10"
+    "@tailwindcss/oxide-android-arm64": "npm:4.1.11"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.1.11"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.1.11"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.1.11"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.1.11"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.1.11"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.1.11"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.1.11"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.1.11"
+    "@tailwindcss/oxide-wasm32-wasi": "npm:4.1.11"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.1.11"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.1.11"
     detect-libc: "npm:^2.0.4"
     tar: "npm:^7.4.3"
   dependenciesMeta:
@@ -3194,20 +3194,20 @@ __metadata:
       optional: true
     "@tailwindcss/oxide-win32-x64-msvc":
       optional: true
-  checksum: 10c0/38adecfedb1854acbf82538881b9caf475e656a3cb9b86d860c0bfac5f3f042da34c85d664506ab0feaff2d6106d29d74afc93ea8c4281e4eac35da690f6ca5c
+  checksum: 10c0/0455483b0e52885a3f36ecbec5409c360159bb0ee969f3a64c2d93dbd94d0d769c1351b7031f4d4b9d8bed997d04d685ca9519160714f432d63f4e824ce1406d
   languageName: node
   linkType: hard
 
-"@tailwindcss/postcss@npm:4.1.10":
-  version: 4.1.10
-  resolution: "@tailwindcss/postcss@npm:4.1.10"
+"@tailwindcss/postcss@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@tailwindcss/postcss@npm:4.1.11"
   dependencies:
     "@alloc/quick-lru": "npm:^5.2.0"
-    "@tailwindcss/node": "npm:4.1.10"
-    "@tailwindcss/oxide": "npm:4.1.10"
+    "@tailwindcss/node": "npm:4.1.11"
+    "@tailwindcss/oxide": "npm:4.1.11"
     postcss: "npm:^8.4.41"
-    tailwindcss: "npm:4.1.10"
-  checksum: 10c0/f320527b4e50e586e6bbe0e653f0c63ef0738a40737d1c80f47b074d42c0762d8dc20d40cbea9f13c7592f008e850b2f6eac61439ef9dc1c366d11dea52afda1
+    tailwindcss: "npm:4.1.11"
+  checksum: 10c0/e449e1992d0723061aa9452979cd01727db4d1e81b2c16762b01899d06a6c9015792d10d3db4cb553e2e59f307593dc4ccf679ef1add5f774da73d3a091f7227
   languageName: node
   linkType: hard
 
@@ -7582,7 +7582,7 @@ __metadata:
     "@radix-ui/react-switch": "npm:^1.2.4"
     "@radix-ui/react-tabs": "npm:^1.1.11"
     "@radix-ui/react-tooltip": "npm:^1.2.7"
-    "@tailwindcss/postcss": "npm:4.1.10"
+    "@tailwindcss/postcss": "npm:4.1.11"
     "@tanstack/react-query": "npm:^5.80.7"
     "@types/node": "npm:22.15.33"
     "@types/react": "npm:19.1.8"
@@ -7615,7 +7615,7 @@ __metadata:
     sonner: "npm:^2.0.5"
     swagger-ui-react: "npm:^5.24.1"
     tailwind-merge: "npm:^3.2.0"
-    tailwindcss: "npm:4.1.10"
+    tailwindcss: "npm:4.1.11"
     ts-node: "npm:10.9.2"
     tsconfig-paths: "npm:4.2.0"
     tw-animate-css: "npm:1.3.4"
@@ -10048,10 +10048,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:4.1.10":
-  version: 4.1.10
-  resolution: "tailwindcss@npm:4.1.10"
-  checksum: 10c0/9da74ee1f25d6065150f132a3eb18caad82cd9902b7c552278eb627266c68b12990a22bb4b6169d04ce775c058a8d2638a5051be905be99961889c572e2aeab8
+"tailwindcss@npm:4.1.11":
+  version: 4.1.11
+  resolution: "tailwindcss@npm:4.1.11"
+  checksum: 10c0/e23eed0a0d6557b3aff8ba320b82758988ca67c351ee9b33dfc646e83a64f6eaeca6183dfc97e931f7b2fab46e925090066edd697d2ede3f396c9fdeb4af24c1
   languageName: node
   linkType: hard
 

From 18aed86d602a8580c2c8ce1e8d8091dec372d6de Mon Sep 17 00:00:00 2001
From: Renovate Bot <renovate@dominikstahl.dev>
Date: Thu, 26 Jun 2025 18:01:40 +0000
Subject: [PATCH 12/23] fix(deps): update dependency lucide-react to ^0.523.0

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index e18c3c4..073c61b 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.515.0",
+    "lucide-react": "^0.523.0",
     "next": "15.3.4",
     "next-auth": "^5.0.0-beta.25",
     "next-swagger-doc": "^0.4.1",
diff --git a/yarn.lock b/yarn.lock
index 5ef4d93..3bb9377 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7473,12 +7473,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react@npm:^0.515.0":
-  version: 0.515.0
-  resolution: "lucide-react@npm:0.515.0"
+"lucide-react@npm:^0.523.0":
+  version: 0.523.0
+  resolution: "lucide-react@npm:0.523.0"
   peerDependencies:
     react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/00485e09ab3d0bbb34797b1f368c269e8708522b6e2f46fd84dd5bd99741546487be9a65a260f274e8049b81cc37687566e26132f5752352c8d9bc8e5d0b3dea
+  checksum: 10c0/dafd180d05326edc81d928f37d6574930f0592da08b91c536ae5675d0b764295368e8daf9bcc81a5283c18e2f19412060d1da475b4f26112168245e708bd562f
   languageName: node
   linkType: hard
 
@@ -7599,7 +7599,7 @@ __metadata:
     eslint: "npm:9.29.0"
     eslint-config-next: "npm:15.3.4"
     eslint-config-prettier: "npm:10.1.5"
-    lucide-react: "npm:^0.515.0"
+    lucide-react: "npm:^0.523.0"
     next: "npm:15.3.4"
     next-auth: "npm:^5.0.0-beta.25"
     next-swagger-doc: "npm:^0.4.1"

From a6cc4d328485230573c19bcda15de04f16e85774 Mon Sep 17 00:00:00 2001
From: Semir <semir@noreply.git.dominikstahl.dev>
Date: Thu, 15 May 2025 08:40:12 +0200
Subject: [PATCH 13/23] feat: Basic Calendar without any functions

---
 package.json                 |  3 +-
 src/app/(main)/home/page.tsx |  2 +-
 yarn.lock                    | 84 ++++++++++++++++++++++++++++++++++--
 3 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e18c3c4..ff1bc0d 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,8 @@
     "next-auth": "^5.0.0-beta.25",
     "next-swagger-doc": "^0.4.1",
     "next-themes": "^0.4.6",
-    "react": "^19.0.0",
+    "react": "^19.1.0",
+    "react-calendar": "^5.1.0",
     "react-day-picker": "^9.7.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.4",
diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx
index 66a97d8..b653ab8 100644
--- a/src/app/(main)/home/page.tsx
+++ b/src/app/(main)/home/page.tsx
@@ -19,4 +19,4 @@ export default function Home() {
       </div>
     </div>
   );
-}
+};
diff --git a/yarn.lock b/yarn.lock
index 5ef4d93..0b92e97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3727,6 +3727,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wojtekmaj/date-utils@npm:^1.1.3":
+  version: 1.5.1
+  resolution: "@wojtekmaj/date-utils@npm:1.5.1"
+  checksum: 10c0/7c213cca5ab6b84ef61b9aea2b9fb8a04bf4c9764b28a97ffc4ee46a3e81560532a74d106a6f8aeef4792e1aaa6ea3dfd3c4a639dddbea560eb3f33cd62b8d7d
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^3.0.0":
   version: 3.0.1
   resolution: "abbrev@npm:3.0.1"
@@ -4521,7 +4528,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.1.1":
+"clsx@npm:^2.0.0, clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
@@ -6136,6 +6143,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-user-locale@npm:^2.2.1":
+  version: 2.3.2
+  resolution: "get-user-locale@npm:2.3.2"
+  dependencies:
+    mem: "npm:^8.0.0"
+  checksum: 10c0/2796b3fc3782b1f4826f31e899642cf72eeb23e296e1cf55280aab5caf7a25f4b906491ee1508a001519d6a410902ccf8fa8edaa895b7aee5dfd422ffe5523b9
+  languageName: node
+  linkType: hard
+
 "getos@npm:^3.2.1":
   version: 3.2.1
   resolution: "getos@npm:3.2.1"
@@ -7524,6 +7540,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"map-age-cleaner@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "map-age-cleaner@npm:0.1.3"
+  dependencies:
+    p-defer: "npm:^1.0.0"
+  checksum: 10c0/7495236c7b0950956c144fd8b4bc6399d4e78072a8840a4232fe1c4faccbb5eb5d842e5c0a56a60afc36d723f315c1c672325ca03c1b328650f7fcc478f385fd
+  languageName: node
+  linkType: hard
+
 "markdown-it@npm:^14.1.0":
   version: 14.1.0
   resolution: "markdown-it@npm:14.1.0"
@@ -7608,7 +7633,8 @@ __metadata:
     postcss: "npm:8.5.6"
     prettier: "npm:3.5.3"
     prisma: "npm:6.10.1"
-    react: "npm:^19.0.0"
+    react: "npm:^19.1.0"
+    react-calendar: "npm:^5.1.0"
     react-day-picker: "npm:^9.7.0"
     react-dom: "npm:^19.0.0"
     react-hook-form: "npm:^7.56.4"
@@ -7624,6 +7650,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"mem@npm:^8.0.0":
+  version: 8.1.1
+  resolution: "mem@npm:8.1.1"
+  dependencies:
+    map-age-cleaner: "npm:^0.1.3"
+    mimic-fn: "npm:^3.1.0"
+  checksum: 10c0/5829c404d024c1accaf76ebacbc7eae9b59e5ce5722d184aa24e8387a8097a499f6aa7e181021003c51eb87b2dcdc9a2270050c58753cce761de206643cba91c
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -7671,6 +7707,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mimic-fn@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "mimic-fn@npm:3.1.0"
+  checksum: 10c0/a07cdd8ed6490c2dff5b11f889b245d9556b80f5a653a552a651d17cff5a2d156e632d235106c2369f00cccef4071704589574cf3601bc1b1400a1f620dff067
+  languageName: node
+  linkType: hard
+
 "minim@npm:~0.23.8":
   version: 0.23.8
   resolution: "minim@npm:0.23.8"
@@ -8376,6 +8419,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-defer@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "p-defer@npm:1.0.0"
+  checksum: 10c0/ed603c3790e74b061ac2cb07eb6e65802cf58dce0fbee646c113a7b71edb711101329ad38f99e462bd2e343a74f6e9366b496a35f1d766c187084d3109900487
+  languageName: node
+  linkType: hard
+
 "p-limit@npm:^3.0.2":
   version: 3.1.0
   resolution: "p-limit@npm:3.1.0"
@@ -8773,6 +8823,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-calendar@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "react-calendar@npm:5.1.0"
+  dependencies:
+    "@wojtekmaj/date-utils": "npm:^1.1.3"
+    clsx: "npm:^2.0.0"
+    get-user-locale: "npm:^2.2.1"
+    warning: "npm:^4.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/27673f639c5d6296342a2a888436b31a5d602faeaae01be83b2beb98ff568b0a3d1514f5cc50fcacf3ac50b9c0b9d2fb423b0c001a8f5f1a22816671409e2616
+  languageName: node
+  linkType: hard
+
 "react-copy-to-clipboard@npm:5.1.0":
   version: 5.1.0
   resolution: "react-copy-to-clipboard@npm:5.1.0"
@@ -8954,7 +9023,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^19.0.0":
+"react@npm:^19.1.0":
   version: 19.1.0
   resolution: "react@npm:19.1.0"
   checksum: 10c0/530fb9a62237d54137a13d2cfb67a7db6a2156faed43eecc423f4713d9b20c6f2728b026b45e28fcd72e8eadb9e9ed4b089e99f5e295d2f0ad3134251bdd3698
@@ -10737,6 +10806,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"warning@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "warning@npm:4.0.3"
+  dependencies:
+    loose-envify: "npm:^1.0.0"
+  checksum: 10c0/aebab445129f3e104c271f1637fa38e55eb25f968593e3825bd2f7a12bd58dc3738bb70dc8ec85826621d80b4acfed5a29ebc9da17397c6125864d72301b937e
+  languageName: node
+  linkType: hard
+
 "web-streams-polyfill@npm:^3.0.3":
   version: 3.3.3
   resolution: "web-streams-polyfill@npm:3.3.3"

From 1d721874b2ade9f118a859adba26eaafdb5c3913 Mon Sep 17 00:00:00 2001
From: Semir <semir@noreply.git.dominikstahl.dev>
Date: Fri, 23 May 2025 15:23:01 +0200
Subject: [PATCH 14/23] feat: Calendar Update

---
 package.json |   3 +-
 yarn.lock    | 261 +++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 195 insertions(+), 69 deletions(-)

diff --git a/package.json b/package.json
index ff1bc0d..c84c825 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "next-swagger-doc": "^0.4.1",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
-    "react-calendar": "^5.1.0",
+    "react-big-calendar": "^1.18.0",
     "react-day-picker": "^9.7.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.4",
@@ -71,6 +71,7 @@
     "@tailwindcss/postcss": "4.1.10",
     "@types/node": "22.15.33",
     "@types/react": "19.1.8",
+    "@types/react-big-calendar": "^1",
     "@types/react-dom": "19.1.6",
     "@types/swagger-ui-react": "5",
     "@types/webpack-env": "1.18.8",
diff --git a/yarn.lock b/yarn.lock
index 0b92e97..e2d1b89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -156,7 +156,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.3.1":
+"@babel/runtime@npm:^7.13.8, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.7":
   version: 7.27.6
   resolution: "@babel/runtime@npm:7.27.6"
   checksum: 10c0/89726be83f356f511dcdb74d3ea4d873a5f0cf0017d4530cb53aa27380c01ca102d573eff8b8b77815e624b1f8c24e7f0311834ad4fb632c90a770fda00bd4c8
@@ -1267,6 +1267,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.11.6":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: 10c0/4681e682abc006d25eb380d0cf3efc7557043f53b6aea7a5057d0d1e7df849a00e281cd8ea79c902a35a414d7919621fc2ba293ecec05f413598e0b23d5a1e63
+  languageName: node
+  linkType: hard
+
 "@prisma/client@npm:^6.9.0":
   version: 6.10.1
   resolution: "@prisma/client@npm:6.10.1"
@@ -2175,6 +2182,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@restart/hooks@npm:^0.4.7":
+  version: 0.4.16
+  resolution: "@restart/hooks@npm:0.4.16"
+  dependencies:
+    dequal: "npm:^2.0.3"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10c0/b6a0f1db046cdec28737092ab5defdfb25fad498d37d218646f7f123aed02a5078b1c89ae631bda14d9ee35f7bb8c9e0f15379b1a45003144dc30cd15e8ba668
+  languageName: node
+  linkType: hard
+
 "@rtsao/scc@npm:^1.1.0":
   version: 1.1.0
   resolution: "@rtsao/scc@npm:1.1.0"
@@ -3282,6 +3300,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/date-arithmetic@npm:*":
+  version: 4.1.4
+  resolution: "@types/date-arithmetic@npm:4.1.4"
+  checksum: 10c0/4ee68b5a422bd5f1cf08923d18a08db558e653bbdc597677e0465a330f1e807da0e79b06b72651b62b19b4b922a779470f84657cbd765805f84f33af518b408f
+  languageName: node
+  linkType: hard
+
 "@types/es-aggregate-error@npm:^1.0.2":
   version: 1.0.6
   resolution: "@types/es-aggregate-error@npm:1.0.6"
@@ -3348,6 +3373,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:*":
+  version: 15.7.15
+  resolution: "@types/prop-types@npm:15.7.15"
+  checksum: 10c0/b59aad1ad19bf1733cf524fd4e618196c6c7690f48ee70a327eb450a42aab8e8a063fbe59ca0a5701aebe2d92d582292c0fb845ea57474f6a15f6994b0e260b2
+  languageName: node
+  linkType: hard
+
 "@types/ramda@npm:~0.30.0":
   version: 0.30.2
   resolution: "@types/ramda@npm:0.30.2"
@@ -3357,6 +3389,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-big-calendar@npm:^1":
+  version: 1.16.2
+  resolution: "@types/react-big-calendar@npm:1.16.2"
+  dependencies:
+    "@types/date-arithmetic": "npm:*"
+    "@types/prop-types": "npm:*"
+    "@types/react": "npm:*"
+  checksum: 10c0/a2ea4116b999cf8dac014fdc4a9f0c10fb2fd9d9886857e93649c0a601057e93e73e3d9096a756b76e227e08f68e4c979f91bf4cfd96692aea3ab7f3df0745d0
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:19.1.6":
   version: 19.1.6
   resolution: "@types/react-dom@npm:19.1.6"
@@ -3366,7 +3409,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:19.1.8":
+"@types/react@npm:*, @types/react@npm:19.1.8, @types/react@npm:>=16.9.11":
   version: 19.1.8
   resolution: "@types/react@npm:19.1.8"
   dependencies:
@@ -3440,6 +3483,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/warning@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "@types/warning@npm:3.0.3"
+  checksum: 10c0/82c1235bd05d7f6940f80012404844e225d589ad338aa4585b231a2c8deacc695b683f4168757c82c10047b81854cbeaaeefd60536dd67bb48f8a65e20410652
+  languageName: node
+  linkType: hard
+
 "@types/webpack-env@npm:1.18.8":
   version: 1.18.8
   resolution: "@types/webpack-env@npm:1.18.8"
@@ -3727,13 +3777,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@wojtekmaj/date-utils@npm:^1.1.3":
-  version: 1.5.1
-  resolution: "@wojtekmaj/date-utils@npm:1.5.1"
-  checksum: 10c0/7c213cca5ab6b84ef61b9aea2b9fb8a04bf4c9764b28a97ffc4ee46a3e81560532a74d106a6f8aeef4792e1aaa6ea3dfd3c4a639dddbea560eb3f33cd62b8d7d
-  languageName: node
-  linkType: hard
-
 "abbrev@npm:^3.0.0":
   version: 3.0.1
   resolution: "abbrev@npm:3.0.1"
@@ -4528,7 +4571,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.0.0, clsx@npm:^2.1.1":
+"clsx@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "clsx@npm:1.2.1"
+  checksum: 10c0/34dead8bee24f5e96f6e7937d711978380647e936a22e76380290e35486afd8634966ce300fc4b74a32f3762c7d4c0303f442c3e259f4ce02374eb0c82834f27
+  languageName: node
+  linkType: hard
+
+"clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
@@ -4816,6 +4866,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-arithmetic@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "date-arithmetic@npm:4.1.0"
+  checksum: 10c0/697774a1a6a1b226004b5527326599c01a095bf715a0d43089e0493a565a91e7f4342b1b73b855c0e7b0caaf4bc947a61bc35ec60d162d52ef3c3c08eab26b6e
+  languageName: node
+  linkType: hard
+
 "date-fns-jalali@npm:4.1.0-0":
   version: 4.1.0-0
   resolution: "date-fns-jalali@npm:4.1.0-0"
@@ -4830,7 +4887,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dayjs@npm:^1.10.4":
+"dayjs@npm:^1.10.4, dayjs@npm:^1.11.7":
   version: 1.11.13
   resolution: "dayjs@npm:1.11.13"
   checksum: 10c0/a3caf6ac8363c7dade9d1ee797848ddcf25c1ace68d9fe8678ecf8ba0675825430de5d793672ec87b24a69bf04a1544b176547b2539982275d5542a7955f35b7
@@ -4915,6 +4972,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dequal@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "dequal@npm:2.0.3"
+  checksum: 10c0/f98860cdf58b64991ae10205137c0e97d384c3a4edc7f807603887b7c4b850af1224a33d88012009f150861cbee4fa2d322c4cc04b9313bee312e47f6ecaa888
+  languageName: node
+  linkType: hard
+
 "detect-libc@npm:^2.0.3, detect-libc@npm:^2.0.4":
   version: 2.0.4
   resolution: "detect-libc@npm:2.0.4"
@@ -4963,6 +5027,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-helpers@npm:^5.2.0, dom-helpers@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "dom-helpers@npm:5.2.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.8.7"
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/f735074d66dd759b36b158fa26e9d00c9388ee0e8c9b16af941c38f014a37fc80782de83afefd621681b19ac0501034b4f1c4a3bff5caa1b8667f0212b5e124c
+  languageName: node
+  linkType: hard
+
 "dompurify@npm:=3.2.4":
   version: 3.2.4
   resolution: "dompurify@npm:3.2.4"
@@ -6143,15 +6217,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-user-locale@npm:^2.2.1":
-  version: 2.3.2
-  resolution: "get-user-locale@npm:2.3.2"
-  dependencies:
-    mem: "npm:^8.0.0"
-  checksum: 10c0/2796b3fc3782b1f4826f31e899642cf72eeb23e296e1cf55280aab5caf7a25f4b906491ee1508a001519d6a410902ccf8fa8edaa895b7aee5dfd422ffe5523b9
-  languageName: node
-  linkType: hard
-
 "getos@npm:^3.2.1":
   version: 3.2.1
   resolution: "getos@npm:3.2.1"
@@ -6227,6 +6292,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globalize@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "globalize@npm:0.1.1"
+  checksum: 10c0/6d4687e7c52a38e7f16f77339aef9b3364c34ce8cc1c8b8495b76418013252eaf5b2453fbc2d8bb9e6e56c739262665484dc7ac51b729501ff0a3b822730116b
+  languageName: node
+  linkType: hard
+
 "globals@npm:^14.0.0":
   version: 14.0.0
   resolution: "globals@npm:14.0.0"
@@ -6542,7 +6614,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"invariant@npm:^2.2.2":
+"invariant@npm:^2.2.2, invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
   dependencies:
@@ -7334,6 +7406,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 10c0/fb407355f7e6cd523a9383e76e6b455321f0f153a6c9625e21a8827d10c54c2a2341bd2ae8d034358b60e07325e1330c14c224ff582d04612a46a4f0479ff2f2
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -7505,6 +7584,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"luxon@npm:^3.2.1":
+  version: 3.6.1
+  resolution: "luxon@npm:3.6.1"
+  checksum: 10c0/906d57a9dc4d1de9383f2e9223e378c298607c1b4d17b6657b836a3cd120feb1c1de3b5d06d846a3417e1ca764de8476e8c23b3cd4083b5cdb870adcb06a99d5
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.30.17":
   version: 0.30.17
   resolution: "magic-string@npm:0.30.17"
@@ -7540,15 +7626,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"map-age-cleaner@npm:^0.1.3":
-  version: 0.1.3
-  resolution: "map-age-cleaner@npm:0.1.3"
-  dependencies:
-    p-defer: "npm:^1.0.0"
-  checksum: 10c0/7495236c7b0950956c144fd8b4bc6399d4e78072a8840a4232fe1c4faccbb5eb5d842e5c0a56a60afc36d723f315c1c672325ca03c1b328650f7fcc478f385fd
-  languageName: node
-  linkType: hard
-
 "markdown-it@npm:^14.1.0":
   version: 14.1.0
   resolution: "markdown-it@npm:14.1.0"
@@ -7611,6 +7688,7 @@ __metadata:
     "@tanstack/react-query": "npm:^5.80.7"
     "@types/node": "npm:22.15.33"
     "@types/react": "npm:19.1.8"
+    "@types/react-big-calendar": "npm:^1"
     "@types/react-dom": "npm:19.1.6"
     "@types/swagger-ui-react": "npm:5"
     "@types/webpack-env": "npm:1.18.8"
@@ -7634,7 +7712,7 @@ __metadata:
     prettier: "npm:3.5.3"
     prisma: "npm:6.10.1"
     react: "npm:^19.1.0"
-    react-calendar: "npm:^5.1.0"
+    react-big-calendar: "npm:^1.18.0"
     react-day-picker: "npm:^9.7.0"
     react-dom: "npm:^19.0.0"
     react-hook-form: "npm:^7.56.4"
@@ -7650,13 +7728,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"mem@npm:^8.0.0":
-  version: 8.1.1
-  resolution: "mem@npm:8.1.1"
-  dependencies:
-    map-age-cleaner: "npm:^0.1.3"
-    mimic-fn: "npm:^3.1.0"
-  checksum: 10c0/5829c404d024c1accaf76ebacbc7eae9b59e5ce5722d184aa24e8387a8097a499f6aa7e181021003c51eb87b2dcdc9a2270050c58753cce761de206643cba91c
+"memoize-one@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "memoize-one@npm:6.0.0"
+  checksum: 10c0/45c88e064fd715166619af72e8cf8a7a17224d6edf61f7a8633d740ed8c8c0558a4373876c9b8ffc5518c2b65a960266adf403cc215cb1e90f7e262b58991f54
   languageName: node
   linkType: hard
 
@@ -7707,13 +7782,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mimic-fn@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "mimic-fn@npm:3.1.0"
-  checksum: 10c0/a07cdd8ed6490c2dff5b11f889b245d9556b80f5a653a552a651d17cff5a2d156e632d235106c2369f00cccef4071704589574cf3601bc1b1400a1f620dff067
-  languageName: node
-  linkType: hard
-
 "minim@npm:~0.23.8":
   version: 0.23.8
   resolution: "minim@npm:0.23.8"
@@ -7851,6 +7919,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"moment-timezone@npm:^0.5.40":
+  version: 0.5.48
+  resolution: "moment-timezone@npm:0.5.48"
+  dependencies:
+    moment: "npm:^2.29.4"
+  checksum: 10c0/ab14ec9d94bc33f29ac18e5417b7f8aca0b17130b952c5cc9697b8fea839e5ece9313af5fd3c9703a05db472b1560ddbfc7ad2aa24aac9afd047d6da6c3c6033
+  languageName: node
+  linkType: hard
+
+"moment@npm:^2.29.4":
+  version: 2.30.1
+  resolution: "moment@npm:2.30.1"
+  checksum: 10c0/865e4279418c6de666fca7786607705fd0189d8a7b7624e2e56be99290ac846f90878a6f602e34b4e0455c549b85385b1baf9966845962b313699e7cb847543a
+  languageName: node
+  linkType: hard
+
 "ms@npm:^2.1.1, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
@@ -8419,13 +8503,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-defer@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "p-defer@npm:1.0.0"
-  checksum: 10c0/ed603c3790e74b061ac2cb07eb6e65802cf58dce0fbee646c113a7b71edb711101329ad38f99e462bd2e343a74f6e9366b496a35f1d766c187084d3109900487
-  languageName: node
-  linkType: hard
-
 "p-limit@npm:^3.0.2":
   version: 3.1.0
   resolution: "p-limit@npm:3.1.0"
@@ -8707,7 +8784,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -8823,22 +8900,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-calendar@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "react-calendar@npm:5.1.0"
+"react-big-calendar@npm:^1.18.0":
+  version: 1.19.4
+  resolution: "react-big-calendar@npm:1.19.4"
   dependencies:
-    "@wojtekmaj/date-utils": "npm:^1.1.3"
-    clsx: "npm:^2.0.0"
-    get-user-locale: "npm:^2.2.1"
-    warning: "npm:^4.0.0"
+    "@babel/runtime": "npm:^7.20.7"
+    clsx: "npm:^1.2.1"
+    date-arithmetic: "npm:^4.1.0"
+    dayjs: "npm:^1.11.7"
+    dom-helpers: "npm:^5.2.1"
+    globalize: "npm:^0.1.1"
+    invariant: "npm:^2.2.4"
+    lodash: "npm:^4.17.21"
+    lodash-es: "npm:^4.17.21"
+    luxon: "npm:^3.2.1"
+    memoize-one: "npm:^6.0.0"
+    moment: "npm:^2.29.4"
+    moment-timezone: "npm:^0.5.40"
+    prop-types: "npm:^15.8.1"
+    react-overlays: "npm:^5.2.1"
+    uncontrollable: "npm:^7.2.1"
   peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/27673f639c5d6296342a2a888436b31a5d602faeaae01be83b2beb98ff568b0a3d1514f5cc50fcacf3ac50b9c0b9d2fb423b0c001a8f5f1a22816671409e2616
+    react: ^16.14.0 || ^17 || ^18 || ^19
+    react-dom: ^16.14.0 || ^17 || ^18 || ^19
+  checksum: 10c0/78730e6396c06a27b24af860fa64d063f6407ccd12546116eb8cb2f274d827891c68a701b9c83f9903f63e5dea03fb6a3dd46d6a0a9186b3ab2f7e1d994fe86b
   languageName: node
   linkType: hard
 
@@ -8937,6 +9022,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-lifecycles-compat@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "react-lifecycles-compat@npm:3.0.4"
+  checksum: 10c0/1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27
+  languageName: node
+  linkType: hard
+
+"react-overlays@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "react-overlays@npm:5.2.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.8"
+    "@popperjs/core": "npm:^2.11.6"
+    "@restart/hooks": "npm:^0.4.7"
+    "@types/warning": "npm:^3.0.0"
+    dom-helpers: "npm:^5.2.0"
+    prop-types: "npm:^15.7.2"
+    uncontrollable: "npm:^7.2.1"
+    warning: "npm:^4.0.3"
+  peerDependencies:
+    react: ">=16.3.0"
+    react-dom: ">=16.3.0"
+  checksum: 10c0/61836490040cfcdebc792b6eddcfac47b7b7e159f99304165371e9eb389a6875f20ddba3433421413ccfb918e8da6042ab2829f9b1f6f5dd9f8476aa16ddcfbe
+  languageName: node
+  linkType: hard
+
 "react-redux@npm:^9.2.0":
   version: 9.2.0
   resolution: "react-redux@npm:9.2.0"
@@ -10579,6 +10690,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uncontrollable@npm:^7.2.1":
+  version: 7.2.1
+  resolution: "uncontrollable@npm:7.2.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.6.3"
+    "@types/react": "npm:>=16.9.11"
+    invariant: "npm:^2.2.4"
+    react-lifecycles-compat: "npm:^3.0.4"
+  peerDependencies:
+    react: ">=15.0.0"
+  checksum: 10c0/81473e892027a99f1ead6b9afd16db65097651cd36c4b6db710728f206f1fc4b82ba9170ecb4a1127a23857e01ba51c0194d0a7cfeecfea61ba9418e0276cb56
+  languageName: node
+  linkType: hard
+
 "undici-types@npm:~6.21.0":
   version: 6.21.0
   resolution: "undici-types@npm:6.21.0"
@@ -10806,7 +10931,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.0":
+"warning@npm:^4.0.3":
   version: 4.0.3
   resolution: "warning@npm:4.0.3"
   dependencies:

From 675a5fa5ffe5be44b737290fb5af14a0066925dc Mon Sep 17 00:00:00 2001
From: Semir <semir@noreply.git.dominikstahl.dev>
Date: Wed, 28 May 2025 09:51:16 +0200
Subject: [PATCH 15/23] feat: Custom Calendar Toolbar

Add Custom Calendar Toolbar
---
 src/components/custom-toolbar.css | 139 +++++++++++++++++++
 src/components/custom-toolbar.tsx | 218 ++++++++++++++++++++++++++++++
 2 files changed, 357 insertions(+)
 create mode 100644 src/components/custom-toolbar.css
 create mode 100644 src/components/custom-toolbar.tsx

diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css
new file mode 100644
index 0000000..16e86ed
--- /dev/null
+++ b/src/components/custom-toolbar.css
@@ -0,0 +1,139 @@
+/* custom-toolbar.css */
+
+/* Container der Toolbar */
+.custom-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  /*border-radius: 8px;*/
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Style für den Bereich, in dem die Ansichten (Month, Week, etc.) gewechselt werden */
+.custom-toolbar .view-change .view-switcher {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.custom-toolbar .view-change .view-switcher button {
+  padding: 8px 16px;
+  background-color: #c1830d;
+  /*border: 1px solid #ccc;*/
+  border-radius: 11px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+  height: 30px;
+  margin-top: 3.5px;
+  color: #ffffff;
+}
+
+.custom-toolbar .view-change .view-switcher button:hover:not(:disabled) {
+  background-color: #e0e0e0;
+  border-color: #999;
+}
+
+.custom-toolbar .view-change .view-switcher button:disabled {
+  background-color: #d0d0d0;
+  border-color: #aaa;
+  cursor: default;
+}
+
+/* Anzeige des aktuellen Datums (Monat und Jahr) */
+.custom-toolbar .current-date {
+  font-weight: bold;
+  font-size: 12px;
+  text-align: center;
+  color: #ffffff;
+  margin: 4px 0;
+  background-color: #717171;
+  width: 178px;
+  height: 37px;
+  border-radius: 11px;
+}
+
+/* Navigationsbereich (Today, Prev, Next) */
+.custom-toolbar .navigation-controls {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.custom-toolbar .navigation-controls button {
+  padding: 8px 12px;
+  /*background-color: #2196F3;*/
+  color: #ffffff;
+  border: none;
+  border-radius: 11px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.custom-toolbar .navigation-controls button:hover {
+  background-color: #1976D2;
+}
+
+.custom-toolbar .navigation-controls button:active {
+  background-color: #1565C0;
+}
+
+/* Dropdown-Bereich für Woche und Jahr */
+.custom-toolbar .dropdowns {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  height: 30px;
+  font-size: 10px;
+  margin-top: 3.5px;
+  border-radius: 11px;
+}
+
+.custom-toolbar .dropdowns select {
+  padding: 8px 12px;
+  /*border: 1px solid #ccc;*/
+  border-radius: 11px;
+  font-size: 10px;
+  background-color: #555555;
+  color: #ffffff;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.custom-toolbar .dropdowns select:hover {
+  border-color: #999;
+}
+
+.right-section {
+    background-color: #717171;
+    width: 393px;
+    height: 37px;
+    border-radius: 11px;
+}
+
+.custom-toolbar .navigation-controls .handleWeek button {
+    background-color: #717171;
+    height: 30px;
+    width: 30px;
+    margin-bottom: 3.5px;
+}
+
+.custom-toolbar .navigation-controls .today button {
+    background-color: #c6c6c6;
+    height: 30px;
+    width: 100px;
+    color: #000000;
+    margin-top: 3.5px;
+}
+
+.view-change {
+    background-color: #717171;
+    height: 37px;
+    width: 290px;
+    border-radius: 11px;
+}
diff --git a/src/components/custom-toolbar.tsx b/src/components/custom-toolbar.tsx
new file mode 100644
index 0000000..10feafa
--- /dev/null
+++ b/src/components/custom-toolbar.tsx
@@ -0,0 +1,218 @@
+import React, { useState, useEffect } from 'react';
+import { format } from 'date-fns';
+import './custom-toolbar.css';
+
+interface CustomToolbarProps {
+  // Das aktuell angezeigte Datum (wird z. B. von der Calendar-Komponente geliefert)
+  date: Date;
+  // Aktuelle Ansicht: "month", "week", "day" oder "agenda"
+  view: 'month' | 'week' | 'day' | 'agenda';
+  /**
+   * onNavigate ermöglicht das Wechseln des angezeigten Datums.
+   * Action kann bspw. 'TODAY' oder 'SET_DATE' sein; newDate wird übergeben, wenn benötigt.
+   */
+  onNavigate: (action: string, newDate?: Date) => void;
+  // onView wechselt die Ansicht
+  onView: (newView: 'month' | 'week' | 'day' | 'agenda') => void;
+}
+
+const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, onView }) => {
+  
+  // Hilfsfunktion, um die ISO-Wochennummer eines Datums zu ermitteln
+  const getISOWeek = (date: Date): number => {
+    const tmp = new Date(date.getTime());
+    // Verschiebe das Datum so, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag)
+    tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
+    const yearStart = new Date(tmp.getFullYear(), 0, 1);
+    const weekNo = Math.ceil((((tmp.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+    return weekNo;
+  };
+
+  // Neue Funktion: Ermittelt das ISO-Wochenjahr eines Datums.
+  // Das ISO-Wochenjahr entspricht dem Jahr des Donnerstags in dieser Woche.
+  const getISOWeekYear = (date: Date): number => {
+    const tmp = new Date(date.getTime());
+    tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
+    return tmp.getFullYear();
+  };
+
+  // Ermittelt die Anzahl der ISO-Wochen im Jahr
+  const getISOWeeksInYear = (year: number): number => {
+    const d = new Date(year, 11, 31);
+    const week = getISOWeek(d);
+    return week === 1 ? getISOWeek(new Date(year, 11, 24)) : week;
+  };
+
+  /* 
+    Berechnet den Montag der gewünschten ISO-Woche eines Jahres.
+    Wir ermitteln zunächst den ersten Montag der ersten ISO-Woche und addieren dann (week - 1) * 7 Tage.
+  */
+  const getDateOfISOWeek = (week: number, year: number): Date => {
+    const jan1 = new Date(year, 0, 1);
+    const dayOfWeek = jan1.getDay();
+    const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
+    let firstMonday: Date;
+    if (isoDayOfWeek <= 4) {
+      // Jan 1 gehört zur ersten ISO-Woche – bestimme den Montag dieser Woche
+      firstMonday = new Date(year, 0, 1 - isoDayOfWeek + 1);
+    } else {
+      // Andernfalls liegt der erste Montag in der darauffolgenden Woche
+      firstMonday = new Date(year, 0, 1 + (8 - isoDayOfWeek));
+    }
+    firstMonday.setDate(firstMonday.getDate() + (week - 1) * 7);
+    return firstMonday;
+  };
+
+  // Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs)
+  const [selectedWeek, setSelectedWeek] = useState<number>(getISOWeek(date));
+  const [selectedYear, setSelectedYear] = useState<number>(getISOWeekYear(date));
+
+  // Aktualisiere die Auswahl, wenn sich die Prop "date" ändert
+  useEffect(() => {
+    setSelectedWeek(getISOWeek(date));
+    setSelectedYear(getISOWeekYear(date));
+  }, [date]);
+
+  // Für die Dropdown-Liste der Wochen: Liste von 1 bis totalWeeks
+  const totalWeeks = getISOWeeksInYear(selectedYear);
+  const weekOptions = Array.from({ length: totalWeeks }, (_, i) => i + 1);
+
+  // Beispielhafte Jahresliste: aktuelles ISO-Wochenjahr ± 10
+  const yearOptions = Array.from({ length: 21 }, (_, i) => selectedYear - 10 + i);
+
+  // Berechne den Start (Montag) und das Ende (Sonntag) der aktuell angezeigten Woche
+  const weekStartDate = getDateOfISOWeek(selectedWeek, selectedYear);
+  const weekEndDate = new Date(weekStartDate);
+  weekEndDate.setDate(weekStartDate.getDate() + 6);
+
+  // Ermittele Monat und Jahr von Start- und Enddatum (normales Kalenderjahr)
+  const monthStart = format(weekStartDate, 'MMMM');
+  const monthEnd = format(weekEndDate, 'MMMM');
+  const yearAtStart = format(weekStartDate, 'yyyy');
+  const yearAtEnd = format(weekEndDate, 'yyyy');
+
+  // Erstelle das Label:
+  // 1. Falls der Wochenanfang und das Wochenende in unterschiedlichen Jahren liegen,
+  //    wird z. B. "Dezember 2025 - Januar 2026" angezeigt.
+  // 2. Liegen beide im gleichen Jahr, wird unterschieden zwischen gleichem Monat und unterschiedlichem Monat.
+  let dateLabel: string;
+  if (yearAtStart !== yearAtEnd) {
+    dateLabel = `${monthStart} ${yearAtStart} - ${monthEnd} ${yearAtEnd}`;
+  } else if (monthStart !== monthEnd) {
+    dateLabel = `${monthStart} - ${monthEnd} ${yearAtStart}`;
+  } else {
+    dateLabel = `${monthStart} ${yearAtStart}`;
+  }
+
+  // Handler zum Wechseln der Ansicht
+  const handleViewChange = (newView: 'month' | 'week' | 'day' | 'agenda') => {
+    onView(newView);
+  };
+
+  // "Today"-Button: setzt das Datum auf das heutige Datum (unter Verwendung des ISO-Wochenjahrs)
+  const handleToday = () => {
+    const today = new Date();
+    setSelectedWeek(getISOWeek(today));
+    setSelectedYear(getISOWeekYear(today));
+    onNavigate('TODAY', today);
+  };
+
+  // Wechselt zur vorherigen Woche. Bei Woche < 1, wird ins Vorjahr gewechselt.
+  const handlePrevWeek = () => {
+    let newWeek = selectedWeek - 1;
+    let newYear = selectedYear;
+    if (newWeek < 1) {
+      newYear = selectedYear - 1;
+      newWeek = getISOWeeksInYear(newYear);
+    }
+    setSelectedWeek(newWeek);
+    setSelectedYear(newYear);
+    const newDate = getDateOfISOWeek(newWeek, newYear);
+    onNavigate('SET_DATE', newDate);
+  };
+
+  // Wechselt zur nächsten Woche. Überschreitet die Woche die maximale Zahl, wechselt ins nächste Jahr.
+  const handleNextWeek = () => {
+    let newWeek = selectedWeek + 1;
+    let newYear = selectedYear;
+    if (newWeek > getISOWeeksInYear(selectedYear)) {
+      newYear = selectedYear + 1;
+      newWeek = 1;
+    }
+    setSelectedWeek(newWeek);
+    setSelectedYear(newYear);
+    const newDate = getDateOfISOWeek(newWeek, newYear);
+    onNavigate('SET_DATE', newDate);
+  };
+
+  // Handler, wenn der Nutzer über das Dropdown eine Woche auswählt
+  const handleWeekChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newWeek = parseInt(event.target.value, 10);
+    setSelectedWeek(newWeek);
+    const newDate = getDateOfISOWeek(newWeek, selectedYear);
+    onNavigate('SET_DATE', newDate);
+  };
+
+  // Handler, wenn der Nutzer über das Dropdown ein Jahr auswählt
+  const handleYearChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newYear = parseInt(event.target.value, 10);
+    setSelectedYear(newYear);
+    const totalWeeksInNewYear = getISOWeeksInYear(newYear);
+    const newWeek = Math.min(selectedWeek, totalWeeksInNewYear);
+    setSelectedWeek(newWeek);
+    const newDate = getDateOfISOWeek(newWeek, newYear);
+    onNavigate('SET_DATE', newDate);
+  };
+
+  return (
+    <div className="custom-toolbar" style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}>
+      {/* Anzeige des Datums-Labels */}
+      <div className="current-date" style={{ fontWeight: 'bold' }}>
+        {dateLabel}
+      </div>
+
+      {/* Ansicht wechseln */}
+      <div className='view-change'>
+        <div className="view-switcher" style={{ display: 'flex', gap: '8px' }}>
+          <button disabled={view === 'month'} onClick={() => handleViewChange('month')}>Month</button>
+          <button disabled={view === 'week'} onClick={() => handleViewChange('week')}>Week</button>
+          <button disabled={view === 'day'} onClick={() => handleViewChange('day')}>Day</button>
+          <button disabled={view === 'agenda'} onClick={() => handleViewChange('agenda')}>Agenda</button>
+        </div>
+      </div>
+
+      <div className="right-section" style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}>
+        {/* Navigationsbuttons */}
+        <div className="navigation-controls" style={{ display: 'flex', gap: '8px' }}>
+          <div className="handleWeek">
+            <button onClick={handlePrevWeek}>&lt;</button>
+            <button onClick={handleNextWeek}>&gt;</button>
+          </div>
+          <div className="today">
+            <button onClick={handleToday}>Today</button>
+          </div>
+        </div>
+
+        {/* DropDowns für Woche und Jahr */}
+        <div className="dropdowns" style={{ display: 'flex', gap: '8px' }}>
+          <select value={selectedWeek} onChange={handleWeekChange}>
+            {weekOptions.map((week) => (
+              <option key={week} value={week}>
+                Week {week}
+              </option>
+            ))}
+          </select>
+          <select value={selectedYear} onChange={handleYearChange}>
+            {yearOptions.map((year) => (
+              <option key={year} value={year}>
+                {year}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomToolbar;

From 04b1b80e53933b962472867861d858b39b1ada69 Mon Sep 17 00:00:00 2001
From: Semir <semir@noreply.git.dominikstahl.dev>
Date: Fri, 6 Jun 2025 10:43:25 +0200
Subject: [PATCH 16/23] feat: Calendar Layout and Function Update

---
 package.json                          |   1 +
 src/components/calendar.tsx           |  38 ++
 src/components/custom-toolbar.css     |  70 +-
 src/components/custom-toolbar.tsx     | 249 ++++---
 src/components/react-big-calendar.css | 904 ++++++++++++++++++++++++++
 yarn.lock                             |  38 +-
 6 files changed, 1170 insertions(+), 130 deletions(-)
 create mode 100644 src/components/calendar.tsx
 create mode 100644 src/components/react-big-calendar.css

diff --git a/package.json b/package.json
index c84c825..5587b6c 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-big-calendar": "^1.18.0",
+    "react-datepicker": "^8.4.0",
     "react-day-picker": "^9.7.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.4",
diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx
new file mode 100644
index 0000000..defedab
--- /dev/null
+++ b/src/components/calendar.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Calendar, momentLocalizer } from 'react-big-calendar';
+import moment from 'moment';
+import '@/components/react-big-calendar.css';
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
+import CustomToolbar from '@/components/custom-toolbar';
+
+moment.updateLocale('en', {
+  week: {
+    dow: 1,
+    doy: 4,
+  },
+});
+
+const localizer = momentLocalizer(moment)
+
+const MyCalendar = (props) => (
+  <div>
+    <Calendar
+      localizer={localizer}
+      //events={myEventsList}
+      startAccessor="start"
+      endAccessor="end"
+      style={{ height: 500 }}
+      culture="de-DE"
+      defaultView='week'
+
+      /*CustomToolbar*/
+      components={{
+        toolbar: CustomToolbar
+      }}
+      /*CustomToolbar*/
+    />
+  </div>
+)
+
+export default MyCalendar;
diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css
index 16e86ed..e16a8e4 100644
--- a/src/components/custom-toolbar.css
+++ b/src/components/custom-toolbar.css
@@ -13,8 +13,7 @@
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-/* Style für den Bereich, in dem die Ansichten (Month, Week, etc.) gewechselt werden */
-.custom-toolbar .view-change .view-switcher {
+/*.custom-toolbar .view-change .view-switcher {
   display: flex;
   gap: 8px;
   justify-content: center;
@@ -24,7 +23,7 @@
   padding: 8px 16px;
   background-color: #c1830d;
   /*border: 1px solid #ccc;*/
-  border-radius: 11px;
+/*  border-radius: 11px;
   font-size: 12px;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
@@ -42,7 +41,7 @@
   background-color: #d0d0d0;
   border-color: #aaa;
   cursor: default;
-}
+}*/
 
 /* Anzeige des aktuellen Datums (Monat und Jahr) */
 .custom-toolbar .current-date {
@@ -50,7 +49,7 @@
   font-size: 12px;
   text-align: center;
   color: #ffffff;
-  margin: 4px 0;
+  /*margin: 4px 0;*/
   background-color: #717171;
   width: 178px;
   height: 37px;
@@ -110,30 +109,53 @@
 }
 
 .right-section {
-    background-color: #717171;
-    width: 393px;
-    height: 37px;
-    border-radius: 11px;
+  background-color: #717171;
+  width: 393px;
+  height: 48px;
+  border-radius: 11px;
+  justify-items: center;
+  align-items: center;
 }
 
 .custom-toolbar .navigation-controls .handleWeek button {
-    background-color: #717171;
-    height: 30px;
-    width: 30px;
-    margin-bottom: 3.5px;
+  background-color: #717171;
+  height: 30px;
+  width: 30px;
+  margin-bottom: 3.5px;
 }
 
-.custom-toolbar .navigation-controls .today button {
-    background-color: #c6c6c6;
-    height: 30px;
-    width: 100px;
-    color: #000000;
-    margin-top: 3.5px;
-}
+/*.custom-toolbar .navigation-controls .today button {
+  background-color: #c6c6c6;
+  height: 30px;
+  width: 100px;
+  color: #000000;
+  margin-top: 3.5px;
+}*/
 
 .view-change {
-    background-color: #717171;
-    height: 37px;
-    width: 290px;
-    border-radius: 11px;
+  background-color: #717171;
+  height: 48px;
+  width: 323px;
+  border-radius: 11px;
+  justify-items: center;
+}
+
+.right-section .datepicker-box {
+  color: #000000;
+  background-color: #c6c6c6;
+  height: 36px;
+  width: 85px;
+  border-radius: 11px;
+  font-size: 12px;
+  align-self: center;
+}
+
+.datepicker {
+  text-align: center;
+  width: 85px;
+  height: 30px;
+}
+
+.datepicker-box {
+  z-index: 9999;
 }
diff --git a/src/components/custom-toolbar.tsx b/src/components/custom-toolbar.tsx
index 10feafa..5f9a2cf 100644
--- a/src/components/custom-toolbar.tsx
+++ b/src/components/custom-toolbar.tsx
@@ -1,214 +1,253 @@
 import React, { useState, useEffect } from 'react';
 import { format } from 'date-fns';
 import './custom-toolbar.css';
+import { Button } from '@/components/custom-ui/button';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 
 interface CustomToolbarProps {
-  // Das aktuell angezeigte Datum (wird z. B. von der Calendar-Komponente geliefert)
+  //Aktuell angezeigtes Datum
   date: Date;
-  // Aktuelle Ansicht: "month", "week", "day" oder "agenda"
+  //Aktuelle Ansicht
   view: 'month' | 'week' | 'day' | 'agenda';
-  /**
-   * onNavigate ermöglicht das Wechseln des angezeigten Datums.
-   * Action kann bspw. 'TODAY' oder 'SET_DATE' sein; newDate wird übergeben, wenn benötigt.
-   */
+
   onNavigate: (action: string, newDate?: Date) => void;
-  // onView wechselt die Ansicht
+  //Ansichtwechsel
   onView: (newView: 'month' | 'week' | 'day' | 'agenda') => void;
 }
 
 const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, onView }) => {
   
-  // Hilfsfunktion, um die ISO-Wochennummer eines Datums zu ermitteln
+  //ISO-Wochennummer eines Datums ermitteln
   const getISOWeek = (date: Date): number => {
     const tmp = new Date(date.getTime());
-    // Verschiebe das Datum so, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag)
+    //Datum so verschieben, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag)
     tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
     const yearStart = new Date(tmp.getFullYear(), 0, 1);
     const weekNo = Math.ceil((((tmp.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
     return weekNo;
   };
 
-  // Neue Funktion: Ermittelt das ISO-Wochenjahr eines Datums.
-  // Das ISO-Wochenjahr entspricht dem Jahr des Donnerstags in dieser Woche.
+  //ISO-Wochenjahr eines Datums ermitteln
   const getISOWeekYear = (date: Date): number => {
     const tmp = new Date(date.getTime());
     tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
     return tmp.getFullYear();
   };
 
-  // Ermittelt die Anzahl der ISO-Wochen im Jahr
+  //Ermittlung der Anzahl der Wochen im Jahr
   const getISOWeeksInYear = (year: number): number => {
     const d = new Date(year, 11, 31);
     const week = getISOWeek(d);
     return week === 1 ? getISOWeek(new Date(year, 11, 24)) : week;
   };
 
-  /* 
-    Berechnet den Montag der gewünschten ISO-Woche eines Jahres.
-    Wir ermitteln zunächst den ersten Montag der ersten ISO-Woche und addieren dann (week - 1) * 7 Tage.
-  */
   const getDateOfISOWeek = (week: number, year: number): Date => {
     const jan1 = new Date(year, 0, 1);
     const dayOfWeek = jan1.getDay();
     const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
     let firstMonday: Date;
     if (isoDayOfWeek <= 4) {
-      // Jan 1 gehört zur ersten ISO-Woche – bestimme den Montag dieser Woche
+      //1. Januar gehört zur ersten ISO-Woche (Montag dieser Woche bestimmen)
       firstMonday = new Date(year, 0, 1 - isoDayOfWeek + 1);
     } else {
-      // Andernfalls liegt der erste Montag in der darauffolgenden Woche
+      //Ansonsten liegt der erste Montag in der darauffolgenden Woche
       firstMonday = new Date(year, 0, 1 + (8 - isoDayOfWeek));
     }
     firstMonday.setDate(firstMonday.getDate() + (week - 1) * 7);
     return firstMonday;
   };
 
-  // Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs)
+  //Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs)
   const [selectedWeek, setSelectedWeek] = useState<number>(getISOWeek(date));
   const [selectedYear, setSelectedYear] = useState<number>(getISOWeekYear(date));
 
-  // Aktualisiere die Auswahl, wenn sich die Prop "date" ändert
+  //Auswahl aktualisieren, wenn sich die Prop "date" ändert
   useEffect(() => {
     setSelectedWeek(getISOWeek(date));
     setSelectedYear(getISOWeekYear(date));
   }, [date]);
 
-  // Für die Dropdown-Liste der Wochen: Liste von 1 bis totalWeeks
+  //Dropdown-Liste der Wochen
   const totalWeeks = getISOWeeksInYear(selectedYear);
   const weekOptions = Array.from({ length: totalWeeks }, (_, i) => i + 1);
 
-  // Beispielhafte Jahresliste: aktuelles ISO-Wochenjahr ± 10
+  //Jahresliste
   const yearOptions = Array.from({ length: 21 }, (_, i) => selectedYear - 10 + i);
 
-  // Berechne den Start (Montag) und das Ende (Sonntag) der aktuell angezeigten Woche
+  //Start (Montag) und Ende (Sonntag) der aktuell angezeigten Woche berechnen
   const weekStartDate = getDateOfISOWeek(selectedWeek, selectedYear);
   const weekEndDate = new Date(weekStartDate);
   weekEndDate.setDate(weekStartDate.getDate() + 6);
 
-  // Ermittele Monat und Jahr von Start- und Enddatum (normales Kalenderjahr)
+  //Monat und Jahr von Start- und Enddatum ermitteln
   const monthStart = format(weekStartDate, 'MMMM');
   const monthEnd = format(weekEndDate, 'MMMM');
   const yearAtStart = format(weekStartDate, 'yyyy');
   const yearAtEnd = format(weekEndDate, 'yyyy');
 
-  // Erstelle das Label:
-  // 1. Falls der Wochenanfang und das Wochenende in unterschiedlichen Jahren liegen,
-  //    wird z. B. "Dezember 2025 - Januar 2026" angezeigt.
-  // 2. Liegen beide im gleichen Jahr, wird unterschieden zwischen gleichem Monat und unterschiedlichem Monat.
-  let dateLabel: string;
-  if (yearAtStart !== yearAtEnd) {
-    dateLabel = `${monthStart} ${yearAtStart} - ${monthEnd} ${yearAtEnd}`;
-  } else if (monthStart !== monthEnd) {
-    dateLabel = `${monthStart} - ${monthEnd} ${yearAtStart}`;
-  } else {
-    dateLabel = `${monthStart} ${yearAtStart}`;
-  }
-
-  // Handler zum Wechseln der Ansicht
+  //Ansichtwechsel
   const handleViewChange = (newView: 'month' | 'week' | 'day' | 'agenda') => {
     onView(newView);
   };
 
-  // "Today"-Button: setzt das Datum auf das heutige Datum (unter Verwendung des ISO-Wochenjahrs)
+  //Today-Button aktualisiert das Datum im DatePicker auf das heutige
   const handleToday = () => {
     const today = new Date();
+    setSelectedDate(today);
     setSelectedWeek(getISOWeek(today));
     setSelectedYear(getISOWeekYear(today));
     onNavigate('TODAY', today);
   };
 
-  // Wechselt zur vorherigen Woche. Bei Woche < 1, wird ins Vorjahr gewechselt.
-  const handlePrevWeek = () => {
-    let newWeek = selectedWeek - 1;
-    let newYear = selectedYear;
-    if (newWeek < 1) {
-      newYear = selectedYear - 1;
-      newWeek = getISOWeeksInYear(newYear);
+  //Pfeiltaste nach Vorne
+  const handleNext = () => {
+    let newDate: Date;
+    if (view === 'day' || view === 'agenda') {
+      newDate = new Date(date);
+      newDate.setDate(newDate.getDate() + 1);
+    } else if (view === 'week') {
+      let newWeek = selectedWeek + 1;
+      let newYear = selectedYear;
+      if (newWeek > getISOWeeksInYear(selectedYear)) {
+        newYear = selectedYear + 1;
+        newWeek = 1;
+      }
+      setSelectedWeek(newWeek);
+      setSelectedYear(newYear);
+      newDate = getDateOfISOWeek(newWeek, newYear);
+    } else if (view === 'month') {
+      newDate = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+    } else {
+      newDate = new Date(date);
     }
-    setSelectedWeek(newWeek);
-    setSelectedYear(newYear);
-    const newDate = getDateOfISOWeek(newWeek, newYear);
+    //Datum im DatePicker aktualisieren
+    setSelectedDate(newDate);
     onNavigate('SET_DATE', newDate);
   };
 
-  // Wechselt zur nächsten Woche. Überschreitet die Woche die maximale Zahl, wechselt ins nächste Jahr.
-  const handleNextWeek = () => {
-    let newWeek = selectedWeek + 1;
-    let newYear = selectedYear;
-    if (newWeek > getISOWeeksInYear(selectedYear)) {
-      newYear = selectedYear + 1;
-      newWeek = 1;
+  //Pfeiltaste nach Hinten
+  const handlePrev = () => {
+    let newDate: Date;
+    if (view === 'day' || view === 'agenda') {
+      newDate = new Date(date);
+      newDate.setDate(newDate.getDate() - 1);
+    } else if (view === 'week') {
+      let newWeek = selectedWeek - 1;
+      let newYear = selectedYear;
+      if (newWeek < 1) {
+        newYear = selectedYear - 1;
+        newWeek = getISOWeeksInYear(newYear);
+      }
+      setSelectedWeek(newWeek);
+      setSelectedYear(newYear);
+      newDate = getDateOfISOWeek(newWeek, newYear);
+    } else if (view === 'month') {
+      newDate = new Date(date.getFullYear(), date.getMonth() - 1, 1);
+    } else {
+      newDate = new Date(date);
     }
-    setSelectedWeek(newWeek);
-    setSelectedYear(newYear);
-    const newDate = getDateOfISOWeek(newWeek, newYear);
+    //Datum im DatePicker aktualisieren
+    setSelectedDate(newDate);
     onNavigate('SET_DATE', newDate);
   };
 
-  // Handler, wenn der Nutzer über das Dropdown eine Woche auswählt
-  const handleWeekChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const newWeek = parseInt(event.target.value, 10);
-    setSelectedWeek(newWeek);
-    const newDate = getDateOfISOWeek(newWeek, selectedYear);
-    onNavigate('SET_DATE', newDate);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+
+  const handleDateChange = (date: Date | null) => {
+    setSelectedDate(date);
+    if (date) {
+      if (view === 'week') {
+        const newWeek = getISOWeek(date);
+        const newYear = getISOWeekYear(date);
+        setSelectedWeek(newWeek);
+        setSelectedYear(newYear);
+        const newDate = getDateOfISOWeek(newWeek, newYear);
+        onNavigate('SET_DATE', newDate);
+      } else if (view === 'day') {
+        onNavigate('SET_DATE', date);
+      } else if (view === 'month') {
+        const newDate = new Date(date.getFullYear(), date.getMonth(), 1);
+        onNavigate('SET_DATE', newDate);
+      } else if (view === 'agenda') {
+        onNavigate('SET_DATE', date);
+      }
+    }
   };
 
-  // Handler, wenn der Nutzer über das Dropdown ein Jahr auswählt
-  const handleYearChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const newYear = parseInt(event.target.value, 10);
-    setSelectedYear(newYear);
-    const totalWeeksInNewYear = getISOWeeksInYear(newYear);
-    const newWeek = Math.min(selectedWeek, totalWeeksInNewYear);
-    setSelectedWeek(newWeek);
-    const newDate = getDateOfISOWeek(newWeek, newYear);
-    onNavigate('SET_DATE', newDate);
-  };
 
   return (
     <div className="custom-toolbar" style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}>
-      {/* Anzeige des Datums-Labels */}
-      <div className="current-date" style={{ fontWeight: 'bold' }}>
-        {dateLabel}
-      </div>
-
-      {/* Ansicht wechseln */}
       <div className='view-change'>
         <div className="view-switcher" style={{ display: 'flex', gap: '8px' }}>
-          <button disabled={view === 'month'} onClick={() => handleViewChange('month')}>Month</button>
-          <button disabled={view === 'week'} onClick={() => handleViewChange('week')}>Week</button>
-          <button disabled={view === 'day'} onClick={() => handleViewChange('day')}>Day</button>
-          <button disabled={view === 'agenda'} onClick={() => handleViewChange('agenda')}>Agenda</button>
+          <Button
+            //className='hover:bg-orange-600 hover:text-white'
+            type='submit'
+            variant='primary'
+            onClick={() => handleViewChange('month')}
+            size={'default'}
+          >
+            Month
+          </Button>
+          <Button
+            //className='hover:bg-orange-600 hover:text-white'
+            type='submit'
+            variant='primary'
+            onClick={() => handleViewChange('week')}
+            size={'default'}
+          >
+            Week
+          </Button>
+          <Button
+            //className='hover:bg-orange-600 hover:text-white'
+            type='submit'
+            variant='primary'
+            onClick={() => handleViewChange('day')}
+            size={'default'}
+          >
+            Day
+          </Button>
+          <Button
+            //className='hover:bg-orange-600 hover:text-white'
+            type='submit'
+            variant='primary'
+            onClick={() => handleViewChange('agenda')}
+            size={'default'}
+          >
+            Agenda
+          </Button>
         </div>
       </div>
 
       <div className="right-section" style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}>
-        {/* Navigationsbuttons */}
         <div className="navigation-controls" style={{ display: 'flex', gap: '8px' }}>
           <div className="handleWeek">
-            <button onClick={handlePrevWeek}>&lt;</button>
-            <button onClick={handleNextWeek}>&gt;</button>
+            <button onClick={handlePrev}>&lt;</button>
+            <button onClick={handleNext}>&gt;</button>
           </div>
           <div className="today">
-            <button onClick={handleToday}>Today</button>
+            <Button
+              //className='hover:bg-orange-600 hover:text-white'
+              type='submit'
+              variant='secondary'
+              onClick={() => handleToday()}
+              size={'default'}
+            >
+              Today
+            </Button>
           </div>
         </div>
 
-        {/* DropDowns für Woche und Jahr */}
-        <div className="dropdowns" style={{ display: 'flex', gap: '8px' }}>
-          <select value={selectedWeek} onChange={handleWeekChange}>
-            {weekOptions.map((week) => (
-              <option key={week} value={week}>
-                Week {week}
-              </option>
-            ))}
-          </select>
-          <select value={selectedYear} onChange={handleYearChange}>
-            {yearOptions.map((year) => (
-              <option key={year} value={year}>
-                {year}
-              </option>
-            ))}
-          </select>
+        <div className='datepicker-box'>
+          <DatePicker
+            className='datepicker'
+            selected={selectedDate}
+            onChange={handleDateChange}
+            calendarStartDay={1}
+            locale='de-DE'
+            dateFormat='dd.MM.yyyy'
+            showWeekNumbers={true}
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/react-big-calendar.css b/src/components/react-big-calendar.css
new file mode 100644
index 0000000..305dce0
--- /dev/null
+++ b/src/components/react-big-calendar.css
@@ -0,0 +1,904 @@
+@charset "UTF-8";
+.rbc-btn {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+button.rbc-btn {
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+     -moz-appearance: button;
+          appearance: button;
+  cursor: pointer;
+}
+
+button[disabled].rbc-btn {
+  cursor: not-allowed;
+}
+
+button.rbc-input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.rbc-calendar {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+}
+
+.rbc-m-b-negative-3 {
+  margin-bottom: -3px;
+}
+
+.rbc-h-full {
+  height: 100%;
+}
+
+.rbc-calendar *,
+.rbc-calendar *:before,
+.rbc-calendar *:after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+
+.rbc-abs-full, .rbc-row-bg {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rbc-rtl {
+  direction: rtl;
+}
+
+.rbc-off-range {
+  color: #999999;
+}
+
+.rbc-off-range-bg {
+  background: #e6e6e6;
+}
+
+.rbc-header {
+  overflow: hidden;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0%;
+          flex: 1 0 0%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 3px;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: bold;
+  font-size: 90%;
+  min-height: 0;
+  border-bottom: 1px solid #ddd;
+}
+.rbc-header + .rbc-header {
+  border-left: 1px solid #c6c6c6; /*#ddd*/
+}
+.rbc-rtl .rbc-header + .rbc-header {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+
+.rbc-button-link {
+  color: inherit;
+  background: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
+.rbc-row-content {
+  position: relative;
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+  z-index: 4;
+}
+
+.rbc-row-content-scrollable {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 100%;
+}
+.rbc-row-content-scrollable .rbc-row-content-scroll-container {
+  height: 100%;
+  overflow-y: scroll;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+.rbc-today {
+  background-color: #5770ff; /*#eaf6ff*/
+}
+/*Own changes 10*/
+.rbc-allday-cell .rbc-row-bg .rbc-day-bg.rbc-today {
+  background-color: transparent !important;
+  /*border: none !important;*/
+}
+/*Own changes 10*/
+
+/*Own changes 11*/
+.rbc-time-header-cell .rbc-header:first-child.rbc-today {
+  border-top-left-radius: 11px !important;
+}
+
+.rbc-time-header-cell .rbc-header:last-child.rbc-today {
+  border-top-right-radius: 11px !important;
+}
+/*Own changes 11*/
+
+.rbc-toolbar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+.rbc-toolbar .rbc-toolbar-label {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  padding: 0 10px;
+  text-align: center;
+
+  /*Own changes 01*/
+  background-color: #717171;
+  color: #ffffff;
+  /*Own changes 01*/
+}
+.rbc-toolbar button {
+  color: #373a3c;
+  display: inline-block;
+  margin: 0;
+  text-align: center;
+  vertical-align: middle;
+  background: none;
+  background-image: none;
+  border: 1px solid #ccc;
+  padding: 0.375rem 1rem;
+  border-radius: 4px;
+  line-height: normal;
+  white-space: nowrap;
+}
+.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
+  background-image: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
+  color: #373a3c;
+  background-color: #d4d4d4;
+  border-color: #8c8c8c;
+}
+.rbc-toolbar button:focus {
+  color: #373a3c;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.rbc-toolbar button:hover {
+  color: #373a3c;
+  cursor: pointer;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+
+.rbc-btn-group {
+  display: inline-block;
+  white-space: nowrap;
+}
+.rbc-btn-group > button:first-child:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  /*Own changes 02*/
+  background-color: #c6c6c6;
+  color: #000000;
+  /*Own changes 02*/
+}
+.rbc-btn-group > button:last-child:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  
+  /*Own changes 03*/
+  background-color: #c6c6c6;
+  color: #000000;
+  /*Own changes 03*/
+}
+.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
+  border-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rbc-btn-group > button:not(:first-child):not(:last-child) {
+  border-radius: 0;
+
+  /*Own changes 04*/
+  background-color: #c6c6c6;
+  color: #000000;
+  /*Own changes 04*/
+}
+.rbc-btn-group button + button {
+  margin-left: -1px;
+}
+.rbc-rtl .rbc-btn-group button + button {
+  margin-left: 0;
+  margin-right: -1px;
+}
+.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
+  margin-left: 10px;
+}
+
+@media (max-width: 767px) {
+  .rbc-toolbar {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.rbc-event, .rbc-day-slot .rbc-background-event {
+  border: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  margin: 0;
+  padding: 2px 5px;
+  background-color: #3174ad;
+  border-radius: 5px;
+  color: #fff;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
+  cursor: inherit;
+  pointer-events: none;
+}
+.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
+  background-color: #265985;
+}
+.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
+  outline: 5px auto #3b99fc;
+}
+
+.rbc-event-label {
+  font-size: 80%;
+}
+
+.rbc-event-overlaps {
+  -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
+          box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
+}
+
+.rbc-event-continues-prior {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rbc-event-continues-after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rbc-event-continues-earlier {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.rbc-event-continues-later {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rbc-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.rbc-row-segment {
+  padding: 0 1px 1px 1px;
+}
+.rbc-selected-cell {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.rbc-show-more {
+  background-color: rgba(255, 255, 255, 0.3);
+  z-index: 4;
+  font-weight: bold;
+  font-size: 85%;
+  height: auto;
+  line-height: normal;
+  color: #3174ad;
+}
+.rbc-show-more:hover, .rbc-show-more:focus {
+  color: #265985;
+}
+
+.rbc-month-view {
+  position: relative;
+  border: 1px solid #ddd;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  width: 100%;
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+  height: 100%;
+}
+
+.rbc-month-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.rbc-month-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  -ms-flex-preferred-size: 0px;
+      flex-basis: 0px;
+  overflow: hidden;
+  height: 100%;
+}
+.rbc-month-row + .rbc-month-row {
+  border-top: 1px solid #ddd;
+}
+
+.rbc-date-cell {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+  min-width: 0;
+  padding-right: 5px;
+  text-align: right;
+}
+.rbc-date-cell.rbc-now {
+  font-weight: bold;
+}
+.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+
+.rbc-row-bg {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  overflow: hidden;
+  right: 1px;
+}
+
+.rbc-day-bg {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0%;
+          flex: 1 0 0%;
+}
+.rbc-day-bg + .rbc-day-bg {
+  border-left: 1px solid #ddd;
+}
+.rbc-rtl .rbc-day-bg + .rbc-day-bg {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+
+.rbc-overlay {
+  position: absolute;
+  z-index: 5;
+  border: 1px solid #e5e5e5;
+  background-color: #fff;
+  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
+          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
+  padding: 10px;
+}
+.rbc-overlay > * + * {
+  margin-top: 1px;
+}
+
+.rbc-overlay-header {
+  border-bottom: 1px solid #e5e5e5;
+  margin: -10px -10px 5px -10px;
+  padding: 2px 10px;
+}
+
+.rbc-agenda-view {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  overflow: auto;
+}
+.rbc-agenda-view table.rbc-agenda-table {
+  width: 100%;
+  border: 1px solid #ddd;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
+  padding: 5px 10px;
+  vertical-align: top;
+}
+.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
+  padding-left: 15px;
+  padding-right: 15px;
+  text-transform: lowercase;
+}
+.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+  border-left: 1px solid #ddd;
+}
+.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
+  border-top: 1px solid #ddd;
+}
+.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+  padding: 3px 5px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+  text-align: right;
+}
+
+.rbc-agenda-time-cell {
+  text-transform: lowercase;
+}
+.rbc-agenda-time-cell .rbc-continues-after:after {
+  content: " »";
+}
+.rbc-agenda-time-cell .rbc-continues-prior:before {
+  content: "« ";
+}
+
+.rbc-agenda-date-cell,
+.rbc-agenda-time-cell {
+  white-space: nowrap;
+}
+
+.rbc-agenda-event-cell {
+  width: 100%;
+}
+
+.rbc-time-column {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-height: 100%;
+
+  /*Own changes 06*/
+  background-color: #383838;
+  /*Own changes 06*/
+}
+.rbc-time-column .rbc-timeslot-group {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.rbc-timeslot-group {
+  border-bottom: 1px solid #8d8d8d; /*#ddd*/
+  min-height: 40px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column nowrap;
+          flex-flow: column nowrap;
+}
+
+.rbc-time-gutter,
+.rbc-header-gutter {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+
+  /*Own changes 07*/
+  background-color: #8d8d8d;
+  /*Own changes 07*/
+}
+
+.rbc-label {
+  padding: 0 5px;
+}
+
+.rbc-day-slot {
+  position: relative;
+}
+.rbc-day-slot .rbc-events-container {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  margin-right: 10px;
+  top: 0;
+}
+.rbc-day-slot .rbc-events-container.rbc-rtl {
+  left: 10px;
+  right: 0;
+}
+.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
+  border: 1px solid #265985;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  max-height: 100%;
+  min-height: 20px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column wrap;
+          flex-flow: column wrap;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  overflow: hidden;
+  position: absolute;
+}
+.rbc-day-slot .rbc-background-event {
+  opacity: 0.75;
+}
+.rbc-day-slot .rbc-event-label {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  padding-right: 5px;
+  width: auto;
+}
+.rbc-day-slot .rbc-event-content {
+  width: 100%;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+  word-wrap: break-word;
+  line-height: 1;
+  height: 100%;
+  min-height: 1em;
+}
+.rbc-day-slot .rbc-time-slot {
+  border-top: 1px solid #383838; /*#f7f7f7*/
+}
+
+.rbc-time-view-resources .rbc-time-gutter,
+.rbc-time-view-resources .rbc-time-header-gutter {
+  position: sticky;
+  left: 0;
+  background-color: white;
+  border-right: 1px solid #ddd;
+  z-index: 10;
+  margin-right: -1px;
+}
+.rbc-time-view-resources .rbc-time-header {
+  overflow: hidden;
+}
+.rbc-time-view-resources .rbc-time-header-content {
+  min-width: auto;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  -ms-flex-preferred-size: 0px;
+      flex-basis: 0px;
+}
+.rbc-time-view-resources .rbc-time-header-cell-single-day {
+  display: none;
+}
+.rbc-time-view-resources .rbc-day-slot {
+  min-width: 140px;
+}
+.rbc-time-view-resources .rbc-header,
+.rbc-time-view-resources .rbc-day-bg {
+  width: 140px;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+  -ms-flex-preferred-size: 0 px;
+      flex-basis: 0 px;
+}
+
+.rbc-time-header-content + .rbc-time-header-content {
+  margin-left: -1px;
+}
+
+.rbc-time-slot {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+}
+.rbc-time-slot.rbc-now {
+  font-weight: bold;
+}
+
+.rbc-day-header {
+  text-align: center;
+}
+
+.rbc-slot-selection {
+  z-index: 10;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-size: 75%;
+  width: 100%;
+  padding: 3px;
+}
+
+.rbc-slot-selecting {
+  cursor: move;
+}
+
+.rbc-time-view {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  width: 100%;
+  border: 1px solid #ddd;
+  min-height: 0;
+}
+.rbc-time-view .rbc-time-gutter {
+  white-space: nowrap;
+  text-align: right;
+}
+.rbc-time-view .rbc-allday-cell {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  /*Own changes 05*/
+  background-color: #555555;
+  /*Own changes 05*/
+}
+.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
+  border-left: 1px solid #ddd;
+}
+.rbc-time-view .rbc-allday-events {
+  position: relative;
+  z-index: 4;
+}
+.rbc-time-view .rbc-row {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  min-height: 20px;
+}
+
+.rbc-time-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+.rbc-time-header.rbc-overflowing {
+  border-right: 1px solid #ddd;
+}
+.rbc-rtl .rbc-time-header.rbc-overflowing {
+  border-right-width: 0;
+  border-left: 1px solid #ddd;
+}
+.rbc-time-header > .rbc-row:first-child {
+  border-bottom: 1px solid #ddd;
+}
+.rbc-time-header > .rbc-row.rbc-row-resource {
+  border-bottom: 1px solid #ddd;
+}
+
+.rbc-time-header-cell-single-day {
+  display: none;
+}
+
+.rbc-time-header-content {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 0;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-left: 1px solid #ddd;
+
+  /*Own changes 08*/
+  background-color: #c6c6c6;
+  color: #000000;
+  border-top-left-radius: 11px;
+  border-top-right-radius: 11px;
+  /*Own changes 08*/
+}
+.rbc-rtl .rbc-time-header-content {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+.rbc-time-header-content > .rbc-row.rbc-row-resource {
+  border-bottom: 1px solid #ddd;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+
+.rbc-time-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0%;
+          flex: 1 0 0%;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 100%;
+  border-top: 2px solid #717171; /*#ddd*/
+  overflow-y: auto;
+  position: relative;
+}
+.rbc-time-content > .rbc-time-gutter {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  
+  /*Own changes 09*/
+  border-top-left-radius: 11px;
+  border-bottom-left-radius: 11px;
+  /*Own changes 09*/
+}
+.rbc-time-content > * + * > * {
+  border-left: 1px solid #c6c6c6; /*#ddd*/
+}
+.rbc-rtl .rbc-time-content > * + * > * {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+.rbc-time-content > .rbc-day-slot {
+  width: 100%;
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+}
+
+.rbc-current-time-indicator {
+  position: absolute;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #74ad31;
+  pointer-events: none;
+}
+
+.rbc-resource-grouping.rbc-time-header-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.rbc-resource-grouping .rbc-row .rbc-header {
+  width: 141px;
+}
+
+/*# sourceMappingURL=react-big-calendar.css.map */
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e2d1b89..234ff57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -539,7 +539,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.0":
+"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.1.3":
   version: 2.1.3
   resolution: "@floating-ui/react-dom@npm:2.1.3"
   dependencies:
@@ -551,6 +551,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/react@npm:^0.27.3":
+  version: 0.27.12
+  resolution: "@floating-ui/react@npm:0.27.12"
+  dependencies:
+    "@floating-ui/react-dom": "npm:^2.1.3"
+    "@floating-ui/utils": "npm:^0.2.9"
+    tabbable: "npm:^6.0.0"
+  peerDependencies:
+    react: ">=17.0.0"
+    react-dom: ">=17.0.0"
+  checksum: 10c0/da453965074bd4ded8e3de97ceb2c0833df8df2ecd9eff5ae4d336413443ea5abde5c9e37b092956901b97e7b47f9138d51d4896fa82da68e77eb0090289bf64
+  languageName: node
+  linkType: hard
+
 "@floating-ui/utils@npm:^0.2.9":
   version: 0.2.9
   resolution: "@floating-ui/utils@npm:0.2.9"
@@ -7713,6 +7727,7 @@ __metadata:
     prisma: "npm:6.10.1"
     react: "npm:^19.1.0"
     react-big-calendar: "npm:^1.18.0"
+    react-datepicker: "npm:^8.4.0"
     react-day-picker: "npm:^9.7.0"
     react-dom: "npm:^19.0.0"
     react-hook-form: "npm:^7.56.4"
@@ -8939,6 +8954,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-datepicker@npm:^8.4.0":
+  version: 8.4.0
+  resolution: "react-datepicker@npm:8.4.0"
+  dependencies:
+    "@floating-ui/react": "npm:^0.27.3"
+    clsx: "npm:^2.1.1"
+    date-fns: "npm:^4.1.0"
+  peerDependencies:
+    react: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc
+  checksum: 10c0/e96ba4f2b54476f66bfa33aa0c21729095c83d293671b07a9ddd96ab48dad85b6530acc5ca016e83ef8907feeebfefb7133bf7a02dc550175c48c5d9f66d70ac
+  languageName: node
+  linkType: hard
+
 "react-day-picker@npm:^9.7.0":
   version: 9.7.0
   resolution: "react-day-picker@npm:9.7.0"
@@ -10221,6 +10250,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.0.0":
+  version: 6.2.0
+  resolution: "tabbable@npm:6.2.0"
+  checksum: 10c0/ced8b38f05f2de62cd46836d77c2646c42b8c9713f5bd265daf0e78ff5ac73d3ba48a7ca45f348bafeef29b23da7187c72250742d37627883ef89cbd7fa76898
+  languageName: node
+  linkType: hard
+
 "tailwind-merge@npm:^3.2.0":
   version: 3.3.1
   resolution: "tailwind-merge@npm:3.3.1"

From 3a96d0e2593c92aa846a6303f8c09b2d25927d9d Mon Sep 17 00:00:00 2001
From: Dominik Stahl <dominik@samdj.de>
Date: Mon, 16 Jun 2025 19:44:09 +0200
Subject: [PATCH 17/23] style: format code

---
 src/components/calendar.tsx           |  15 +-
 src/components/custom-toolbar.css     |   4 +-
 src/components/custom-toolbar.tsx     |  43 ++--
 src/components/react-big-calendar.css | 273 ++++++++++++++------------
 4 files changed, 187 insertions(+), 148 deletions(-)

diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx
index defedab..6e10dab 100644
--- a/src/components/calendar.tsx
+++ b/src/components/calendar.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import { Calendar, momentLocalizer } from 'react-big-calendar';
 import moment from 'moment';
@@ -13,26 +13,25 @@ moment.updateLocale('en', {
   },
 });
 
-const localizer = momentLocalizer(moment)
+const localizer = momentLocalizer(moment);
 
 const MyCalendar = (props) => (
   <div>
     <Calendar
       localizer={localizer}
       //events={myEventsList}
-      startAccessor="start"
-      endAccessor="end"
+      startAccessor='start'
+      endAccessor='end'
       style={{ height: 500 }}
-      culture="de-DE"
+      culture='de-DE'
       defaultView='week'
-
       /*CustomToolbar*/
       components={{
-        toolbar: CustomToolbar
+        toolbar: CustomToolbar,
       }}
       /*CustomToolbar*/
     />
   </div>
-)
+);
 
 export default MyCalendar;
diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css
index e16a8e4..55e9b77 100644
--- a/src/components/custom-toolbar.css
+++ b/src/components/custom-toolbar.css
@@ -75,11 +75,11 @@
 }
 
 .custom-toolbar .navigation-controls button:hover {
-  background-color: #1976D2;
+  background-color: #1976d2;
 }
 
 .custom-toolbar .navigation-controls button:active {
-  background-color: #1565C0;
+  background-color: #1565c0;
 }
 
 /* Dropdown-Bereich für Woche und Jahr */
diff --git a/src/components/custom-toolbar.tsx b/src/components/custom-toolbar.tsx
index 5f9a2cf..bcbb9f9 100644
--- a/src/components/custom-toolbar.tsx
+++ b/src/components/custom-toolbar.tsx
@@ -16,15 +16,21 @@ interface CustomToolbarProps {
   onView: (newView: 'month' | 'week' | 'day' | 'agenda') => void;
 }
 
-const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, onView }) => {
-  
+const CustomToolbar: React.FC<CustomToolbarProps> = ({
+  date,
+  view,
+  onNavigate,
+  onView,
+}) => {
   //ISO-Wochennummer eines Datums ermitteln
   const getISOWeek = (date: Date): number => {
     const tmp = new Date(date.getTime());
     //Datum so verschieben, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag)
     tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
     const yearStart = new Date(tmp.getFullYear(), 0, 1);
-    const weekNo = Math.ceil((((tmp.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+    const weekNo = Math.ceil(
+      ((tmp.getTime() - yearStart.getTime()) / 86400000 + 1) / 7,
+    );
     return weekNo;
   };
 
@@ -60,7 +66,9 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, o
 
   //Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs)
   const [selectedWeek, setSelectedWeek] = useState<number>(getISOWeek(date));
-  const [selectedYear, setSelectedYear] = useState<number>(getISOWeekYear(date));
+  const [selectedYear, setSelectedYear] = useState<number>(
+    getISOWeekYear(date),
+  );
 
   //Auswahl aktualisieren, wenn sich die Prop "date" ändert
   useEffect(() => {
@@ -73,7 +81,10 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, o
   const weekOptions = Array.from({ length: totalWeeks }, (_, i) => i + 1);
 
   //Jahresliste
-  const yearOptions = Array.from({ length: 21 }, (_, i) => selectedYear - 10 + i);
+  const yearOptions = Array.from(
+    { length: 21 },
+    (_, i) => selectedYear - 10 + i,
+  );
 
   //Start (Montag) und Ende (Sonntag) der aktuell angezeigten Woche berechnen
   const weekStartDate = getDateOfISOWeek(selectedWeek, selectedYear);
@@ -175,11 +186,13 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, o
     }
   };
 
-
   return (
-    <div className="custom-toolbar" style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}>
+    <div
+      className='custom-toolbar'
+      style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}
+    >
       <div className='view-change'>
-        <div className="view-switcher" style={{ display: 'flex', gap: '8px' }}>
+        <div className='view-switcher' style={{ display: 'flex', gap: '8px' }}>
           <Button
             //className='hover:bg-orange-600 hover:text-white'
             type='submit'
@@ -219,13 +232,19 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, o
         </div>
       </div>
 
-      <div className="right-section" style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}>
-        <div className="navigation-controls" style={{ display: 'flex', gap: '8px' }}>
-          <div className="handleWeek">
+      <div
+        className='right-section'
+        style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}
+      >
+        <div
+          className='navigation-controls'
+          style={{ display: 'flex', gap: '8px' }}
+        >
+          <div className='handleWeek'>
             <button onClick={handlePrev}>&lt;</button>
             <button onClick={handleNext}>&gt;</button>
           </div>
-          <div className="today">
+          <div className='today'>
             <Button
               //className='hover:bg-orange-600 hover:text-white'
               type='submit'
diff --git a/src/components/react-big-calendar.css b/src/components/react-big-calendar.css
index 305dce0..1aed689 100644
--- a/src/components/react-big-calendar.css
+++ b/src/components/react-big-calendar.css
@@ -9,8 +9,8 @@ button.rbc-btn {
   overflow: visible;
   text-transform: none;
   -webkit-appearance: button;
-     -moz-appearance: button;
-          appearance: button;
+  -moz-appearance: button;
+  appearance: button;
   cursor: pointer;
 }
 
@@ -25,18 +25,18 @@ button.rbc-input::-moz-focus-inner {
 
 .rbc-calendar {
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
 }
 
 .rbc-m-b-negative-3 {
@@ -51,10 +51,11 @@ button.rbc-input::-moz-focus-inner {
 .rbc-calendar *:before,
 .rbc-calendar *:after {
   -webkit-box-sizing: inherit;
-          box-sizing: inherit;
+  box-sizing: inherit;
 }
 
-.rbc-abs-full, .rbc-row-bg {
+.rbc-abs-full,
+.rbc-row-bg {
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -63,7 +64,10 @@ button.rbc-input::-moz-focus-inner {
   bottom: 0;
 }
 
-.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
+.rbc-ellipsis,
+.rbc-show-more,
+.rbc-row-segment .rbc-event-content,
+.rbc-event-label {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -85,8 +89,8 @@ button.rbc-input::-moz-focus-inner {
 .rbc-header {
   overflow: hidden;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0%;
-          flex: 1 0 0%;
+  -ms-flex: 1 0 0%;
+  flex: 1 0 0%;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 0 3px;
@@ -104,7 +108,9 @@ button.rbc-input::-moz-focus-inner {
   border-left-width: 0;
   border-right: 1px solid #ddd;
 }
-.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
+.rbc-header > a,
+.rbc-header > a:active,
+.rbc-header > a:visited {
   color: inherit;
   text-decoration: none;
 }
@@ -117,16 +123,16 @@ button.rbc-input::-moz-focus-inner {
   border: none;
   cursor: pointer;
   -webkit-user-select: text;
-     -moz-user-select: text;
-      -ms-user-select: text;
-          user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
 }
 
 .rbc-row-content {
   position: relative;
   -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   -webkit-user-select: none;
   z-index: 4;
 }
@@ -137,8 +143,8 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   height: 100%;
 }
 .rbc-row-content-scrollable .rbc-row-content-scroll-container {
@@ -150,7 +156,8 @@ button.rbc-input::-moz-focus-inner {
   scrollbar-width: none; /* Firefox */
   /* Hide scrollbar for Chrome, Safari and Opera */
 }
-.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
+.rbc-row-content-scrollable
+  .rbc-row-content-scroll-container::-webkit-scrollbar {
   display: none;
 }
 
@@ -179,20 +186,20 @@ button.rbc-input::-moz-focus-inner {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   margin-bottom: 10px;
   font-size: 16px;
 }
 .rbc-toolbar .rbc-toolbar-label {
   -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   padding: 0 10px;
   text-align: center;
 
@@ -215,14 +222,18 @@ button.rbc-input::-moz-focus-inner {
   line-height: normal;
   white-space: nowrap;
 }
-.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
+.rbc-toolbar button:active,
+.rbc-toolbar button.rbc-active {
   background-image: none;
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   background-color: #e6e6e6;
   border-color: #adadad;
 }
-.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
+.rbc-toolbar button:active:hover,
+.rbc-toolbar button:active:focus,
+.rbc-toolbar button.rbc-active:hover,
+.rbc-toolbar button.rbc-active:focus {
   color: #373a3c;
   background-color: #d4d4d4;
   border-color: #8c8c8c;
@@ -255,7 +266,7 @@ button.rbc-input::-moz-focus-inner {
 .rbc-btn-group > button:last-child:not(:first-child) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  
+
   /*Own changes 03*/
   background-color: #c6c6c6;
   color: #000000;
@@ -286,7 +297,8 @@ button.rbc-input::-moz-focus-inner {
   margin-left: 0;
   margin-right: -1px;
 }
-.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
+.rbc-btn-group + .rbc-btn-group,
+.rbc-btn-group + button {
   margin-left: 10px;
 }
 
@@ -294,16 +306,17 @@ button.rbc-input::-moz-focus-inner {
   .rbc-toolbar {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
   }
 }
-.rbc-event, .rbc-day-slot .rbc-background-event {
+.rbc-event,
+.rbc-day-slot .rbc-background-event {
   border: none;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   margin: 0;
   padding: 2px 5px;
   background-color: #3174ad;
@@ -313,14 +326,18 @@ button.rbc-input::-moz-focus-inner {
   width: 100%;
   text-align: left;
 }
-.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
+.rbc-slot-selecting .rbc-event,
+.rbc-slot-selecting .rbc-day-slot .rbc-background-event,
+.rbc-day-slot .rbc-slot-selecting .rbc-background-event {
   cursor: inherit;
   pointer-events: none;
 }
-.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
+.rbc-event.rbc-selected,
+.rbc-day-slot .rbc-selected.rbc-background-event {
   background-color: #265985;
 }
-.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
+.rbc-event:focus,
+.rbc-day-slot .rbc-background-event:focus {
   outline: 5px auto #3b99fc;
 }
 
@@ -330,7 +347,7 @@ button.rbc-input::-moz-focus-inner {
 
 .rbc-event-overlaps {
   -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
-          box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
+  box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
 }
 
 .rbc-event-continues-prior {
@@ -359,8 +376,8 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .rbc-row-segment {
@@ -379,7 +396,8 @@ button.rbc-input::-moz-focus-inner {
   line-height: normal;
   color: #3174ad;
 }
-.rbc-show-more:hover, .rbc-show-more:focus {
+.rbc-show-more:hover,
+.rbc-show-more:focus {
   color: #265985;
 }
 
@@ -391,15 +409,15 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
   width: 100%;
   -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   -webkit-user-select: none;
   height: 100%;
 }
@@ -410,8 +428,8 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .rbc-month-row {
@@ -421,13 +439,13 @@ button.rbc-input::-moz-focus-inner {
   position: relative;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
   -ms-flex-preferred-size: 0px;
-      flex-basis: 0px;
+  flex-basis: 0px;
   overflow: hidden;
   height: 100%;
 }
@@ -437,8 +455,8 @@ button.rbc-input::-moz-focus-inner {
 
 .rbc-date-cell {
   -webkit-box-flex: 1;
-      -ms-flex: 1 1 0px;
-          flex: 1 1 0;
+  -ms-flex: 1 1 0px;
+  flex: 1 1 0;
   min-width: 0;
   padding-right: 5px;
   text-align: right;
@@ -446,7 +464,9 @@ button.rbc-input::-moz-focus-inner {
 .rbc-date-cell.rbc-now {
   font-weight: bold;
 }
-.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
+.rbc-date-cell > a,
+.rbc-date-cell > a:active,
+.rbc-date-cell > a:visited {
   color: inherit;
   text-decoration: none;
 }
@@ -457,19 +477,19 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
   overflow: hidden;
   right: 1px;
 }
 
 .rbc-day-bg {
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0%;
-          flex: 1 0 0%;
+  -ms-flex: 1 0 0%;
+  flex: 1 0 0%;
 }
 .rbc-day-bg + .rbc-day-bg {
   border-left: 1px solid #ddd;
@@ -485,7 +505,7 @@ button.rbc-input::-moz-focus-inner {
   border: 1px solid #e5e5e5;
   background-color: #fff;
   -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
-          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
   padding: 10px;
 }
 .rbc-overlay > * + * {
@@ -504,11 +524,11 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
   overflow: auto;
 }
 .rbc-agenda-view table.rbc-agenda-table {
@@ -549,10 +569,10 @@ button.rbc-input::-moz-focus-inner {
   text-transform: lowercase;
 }
 .rbc-agenda-time-cell .rbc-continues-after:after {
-  content: " »";
+  content: ' »';
 }
 .rbc-agenda-time-cell .rbc-continues-prior:before {
-  content: "« ";
+  content: '« ';
 }
 
 .rbc-agenda-date-cell,
@@ -570,8 +590,8 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   min-height: 100%;
 
   /*Own changes 06*/
@@ -580,8 +600,8 @@ button.rbc-input::-moz-focus-inner {
 }
 .rbc-time-column .rbc-timeslot-group {
   -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .rbc-timeslot-group {
@@ -592,15 +612,15 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-flow: column nowrap;
-          flex-flow: column nowrap;
+  -ms-flex-flow: column nowrap;
+  flex-flow: column nowrap;
 }
 
 .rbc-time-gutter,
 .rbc-header-gutter {
   -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  -ms-flex: none;
+  flex: none;
 
   /*Own changes 07*/
   background-color: #8d8d8d;
@@ -626,7 +646,8 @@ button.rbc-input::-moz-focus-inner {
   left: 10px;
   right: 0;
 }
-.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
+.rbc-day-slot .rbc-event,
+.rbc-day-slot .rbc-background-event {
   border: 1px solid #265985;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -635,11 +656,11 @@ button.rbc-input::-moz-focus-inner {
   min-height: 20px;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-flow: column wrap;
-          flex-flow: column wrap;
+  -ms-flex-flow: column wrap;
+  flex-flow: column wrap;
   -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
   overflow: hidden;
   position: absolute;
 }
@@ -648,16 +669,16 @@ button.rbc-input::-moz-focus-inner {
 }
 .rbc-day-slot .rbc-event-label {
   -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  -ms-flex: none;
+  flex: none;
   padding-right: 5px;
   width: auto;
 }
 .rbc-day-slot .rbc-event-content {
   width: 100%;
   -webkit-box-flex: 1;
-      -ms-flex: 1 1 0px;
-          flex: 1 1 0;
+  -ms-flex: 1 1 0px;
+  flex: 1 1 0;
   word-wrap: break-word;
   line-height: 1;
   height: 100%;
@@ -682,10 +703,10 @@ button.rbc-input::-moz-focus-inner {
 .rbc-time-view-resources .rbc-time-header-content {
   min-width: auto;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
   -ms-flex-preferred-size: 0px;
-      flex-basis: 0px;
+  flex-basis: 0px;
 }
 .rbc-time-view-resources .rbc-time-header-cell-single-day {
   display: none;
@@ -697,10 +718,10 @@ button.rbc-input::-moz-focus-inner {
 .rbc-time-view-resources .rbc-day-bg {
   width: 140px;
   -webkit-box-flex: 1;
-      -ms-flex: 1 1 0px;
-          flex: 1 1 0;
+  -ms-flex: 1 1 0px;
+  flex: 1 1 0;
   -ms-flex-preferred-size: 0 px;
-      flex-basis: 0 px;
+  flex-basis: 0 px;
 }
 
 .rbc-time-header-content + .rbc-time-header-content {
@@ -709,8 +730,8 @@ button.rbc-input::-moz-focus-inner {
 
 .rbc-time-slot {
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
 }
 .rbc-time-slot.rbc-now {
   font-weight: bold;
@@ -740,11 +761,11 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   width: 100%;
   border: 1px solid #ddd;
   min-height: 0;
@@ -755,7 +776,7 @@ button.rbc-input::-moz-focus-inner {
 }
 .rbc-time-view .rbc-allday-cell {
   -webkit-box-sizing: content-box;
-          box-sizing: content-box;
+  box-sizing: content-box;
   width: 100%;
   height: 100%;
   position: relative;
@@ -773,7 +794,7 @@ button.rbc-input::-moz-focus-inner {
 }
 .rbc-time-view .rbc-row {
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   min-height: 20px;
 }
 
@@ -782,12 +803,12 @@ button.rbc-input::-moz-focus-inner {
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 .rbc-time-header.rbc-overflowing {
   border-right: 1px solid #ddd;
@@ -809,16 +830,16 @@ button.rbc-input::-moz-focus-inner {
 
 .rbc-time-header-content {
   -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   min-width: 0;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   border-left: 1px solid #ddd;
 
   /*Own changes 08*/
@@ -835,7 +856,7 @@ button.rbc-input::-moz-focus-inner {
 .rbc-time-header-content > .rbc-row.rbc-row-resource {
   border-bottom: 1px solid #ddd;
   -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .rbc-time-content {
@@ -843,11 +864,11 @@ button.rbc-input::-moz-focus-inner {
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0%;
-          flex: 1 0 0%;
+  -ms-flex: 1 0 0%;
+  flex: 1 0 0%;
   -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
   width: 100%;
   border-top: 2px solid #717171; /*#ddd*/
   overflow-y: auto;
@@ -855,9 +876,9 @@ button.rbc-input::-moz-focus-inner {
 }
 .rbc-time-content > .rbc-time-gutter {
   -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
-  
+  -ms-flex: none;
+  flex: none;
+
   /*Own changes 09*/
   border-top-left-radius: 11px;
   border-bottom-left-radius: 11px;
@@ -873,8 +894,8 @@ button.rbc-input::-moz-focus-inner {
 .rbc-time-content > .rbc-day-slot {
   width: 100%;
   -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   -webkit-user-select: none;
 }
 
@@ -894,11 +915,11 @@ button.rbc-input::-moz-focus-inner {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 .rbc-resource-grouping .rbc-row .rbc-header {
   width: 141px;
 }
 
-/*# sourceMappingURL=react-big-calendar.css.map */
\ No newline at end of file
+/*# sourceMappingURL=react-big-calendar.css.map */

From fd7be58541ce8b336b34ca2639089f514bb63a70 Mon Sep 17 00:00:00 2001
From: Dominik Stahl <dominik@samdj.de>
Date: Sun, 22 Jun 2025 22:32:16 +0200
Subject: [PATCH 18/23] feat(calendar): add calendar database integration and
 drag and drop

---
 src/app/api/user/[user]/calendar/route.ts     |  50 ++++---
 .../api/user/[user]/calendar/validation.ts    |   1 +
 src/components/calendar.tsx                   | 138 ++++++++++++++++--
 src/components/custom-toolbar.css             |  58 +-------
 src/components/custom-toolbar.tsx             |  38 ++---
 src/components/react-big-calendar.css         |  14 +-
 6 files changed, 183 insertions(+), 116 deletions(-)

diff --git a/src/app/api/user/[user]/calendar/route.ts b/src/app/api/user/[user]/calendar/route.ts
index f6b6098..bf01738 100644
--- a/src/app/api/user/[user]/calendar/route.ts
+++ b/src/app/api/user/[user]/calendar/route.ts
@@ -136,15 +136,15 @@ export const GET = auth(async function GET(req, { params }) {
           start_time: 'asc',
         },
         select: {
-          id: requestUserId === requestedUserId ? true : false,
-          reason: requestUserId === requestedUserId ? true : false,
+          id: true,
+          reason: true,
           start_time: true,
           end_time: true,
-          is_recurring: requestUserId === requestedUserId ? true : false,
-          recurrence_end_date: requestUserId === requestedUserId ? true : false,
-          rrule: requestUserId === requestedUserId ? true : false,
-          created_at: requestUserId === requestedUserId ? true : false,
-          updated_at: requestUserId === requestedUserId ? true : false,
+          is_recurring: true,
+          recurrence_end_date: true,
+          rrule: true,
+          created_at: true,
+          updated_at: true,
         },
       },
     },
@@ -167,6 +167,7 @@ export const GET = auth(async function GET(req, { params }) {
       calendar.push({ ...event.meeting, type: 'event' });
     } else {
       calendar.push({
+        id: event.meeting.id,
         start_time: event.meeting.start_time,
         end_time: event.meeting.end_time,
         type: 'blocked_private',
@@ -182,6 +183,7 @@ export const GET = auth(async function GET(req, { params }) {
       calendar.push({ ...event, type: 'event' });
     } else {
       calendar.push({
+        id: event.id,
         start_time: event.start_time,
         end_time: event.end_time,
         type: 'blocked_private',
@@ -190,19 +192,27 @@ export const GET = auth(async function GET(req, { params }) {
   }
 
   for (const slot of requestedUser.blockedSlots) {
-    calendar.push({
-      start_time: slot.start_time,
-      end_time: slot.end_time,
-      id: slot.id,
-      reason: slot.reason,
-      is_recurring: slot.is_recurring,
-      recurrence_end_date: slot.recurrence_end_date,
-      rrule: slot.rrule,
-      created_at: slot.created_at,
-      updated_at: slot.updated_at,
-      type:
-        requestUserId === requestedUserId ? 'blocked_owned' : 'blocked_private',
-    });
+    if (requestUserId === requestedUserId) {
+      calendar.push({
+        start_time: slot.start_time,
+        end_time: slot.end_time,
+        id: slot.id,
+        reason: slot.reason,
+        is_recurring: slot.is_recurring,
+        recurrence_end_date: slot.recurrence_end_date,
+        rrule: slot.rrule,
+        created_at: slot.created_at,
+        updated_at: slot.updated_at,
+        type: 'blocked_owned',
+      });
+    } else {
+      calendar.push({
+        start_time: slot.start_time,
+        end_time: slot.end_time,
+        id: slot.id,
+        type: 'blocked_private',
+      });
+    }
   }
 
   return returnZodTypeCheckedResponse(UserCalendarResponseSchema, {
diff --git a/src/app/api/user/[user]/calendar/validation.ts b/src/app/api/user/[user]/calendar/validation.ts
index a0d179f..996307f 100644
--- a/src/app/api/user/[user]/calendar/validation.ts
+++ b/src/app/api/user/[user]/calendar/validation.ts
@@ -13,6 +13,7 @@ export const BlockedSlotSchema = zod
     start_time: eventStartTimeSchema,
     end_time: eventEndTimeSchema,
     type: zod.literal('blocked_private'),
+    id: zod.string(),
   })
   .openapi('BlockedSlotSchema', {
     description: 'Blocked time slot in the user calendar',
diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx
index 6e10dab..bfd8651 100644
--- a/src/components/calendar.tsx
+++ b/src/components/calendar.tsx
@@ -1,10 +1,16 @@
 'use client';
 
-import { Calendar, momentLocalizer } from 'react-big-calendar';
+import { Calendar as RBCalendar, momentLocalizer } from 'react-big-calendar';
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
 import moment from 'moment';
 import '@/components/react-big-calendar.css';
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
 import CustomToolbar from '@/components/custom-toolbar';
+import React from 'react';
+import { useGetApiUserUserCalendar } from '@/generated/api/user/user';
+import { useRouter } from 'next/navigation';
+import { usePatchApiEventEventID } from '@/generated/api/event/event';
+import { useSession } from 'next-auth/react';
 
 moment.updateLocale('en', {
   week: {
@@ -13,25 +19,131 @@ moment.updateLocale('en', {
   },
 });
 
+const DaDRBCalendar = withDragAndDrop<
+  {
+    id: string;
+    start: Date;
+    end: Date;
+  },
+  {
+    id: string;
+    title: string;
+  }
+>(RBCalendar);
+
 const localizer = momentLocalizer(moment);
 
-const MyCalendar = (props) => (
-  <div>
-    <Calendar
+export default function Calendar({ userId }: { userId: string }) {
+  const sesstion = useSession();
+  const [currentView, setCurrentView] = React.useState<
+    'month' | 'week' | 'day' | 'agenda' | 'work_week'
+  >('week');
+  const [currentDate, setCurrentDate] = React.useState<Date>(new Date());
+  const router = useRouter();
+
+  const { data, refetch } = useGetApiUserUserCalendar(userId, {
+    start: moment(currentDate)
+      .startOf(
+        currentView === 'agenda'
+          ? 'month'
+          : currentView === 'work_week'
+            ? 'week'
+            : currentView,
+      )
+      .toISOString(),
+    end: moment(currentDate)
+      .endOf(
+        currentView === 'agenda'
+          ? 'month'
+          : currentView === 'work_week'
+            ? 'week'
+            : currentView,
+      )
+      .toISOString(),
+  });
+
+  const { mutate: patchEvent } = usePatchApiEventEventID();
+
+  return (
+    <DaDRBCalendar
       localizer={localizer}
-      //events={myEventsList}
-      startAccessor='start'
-      endAccessor='end'
       style={{ height: 500 }}
       culture='de-DE'
       defaultView='week'
-      /*CustomToolbar*/
       components={{
         toolbar: CustomToolbar,
       }}
-      /*CustomToolbar*/
+      onView={setCurrentView}
+      view={currentView}
+      date={currentDate}
+      onNavigate={(date) => {
+        setCurrentDate(date);
+      }}
+      events={
+        data?.data.calendar.map((event) => ({
+          id: event.id,
+          title: event.type === 'event' ? event.title : 'Blocker',
+          start: new Date(event.start_time),
+          end: new Date(event.end_time),
+        })) ?? []
+      }
+      onSelectEvent={(event) => {
+        router.push(`/events/${event.id}`);
+      }}
+      onSelectSlot={(slotInfo) => {
+        router.push(
+          `/events/new?start=${slotInfo.start.toISOString()}&end=${slotInfo.end.toISOString()}`,
+        );
+      }}
+      resourceIdAccessor={(event) => event.id}
+      resourceTitleAccessor={(event) => event.title}
+      startAccessor={(event) => event.start}
+      endAccessor={(event) => event.end}
+      selectable={sesstion.data?.user?.id === userId}
+      onEventDrop={(event) => {
+        const { start, end, event: droppedEvent } = event;
+        const startISO = new Date(start).toISOString();
+        const endISO = new Date(end).toISOString();
+        patchEvent(
+          {
+            eventID: droppedEvent.id,
+            data: {
+              start_time: startISO,
+              end_time: endISO,
+            },
+          },
+          {
+            onSuccess: () => {
+              refetch();
+            },
+            onError: (error) => {
+              console.error('Error updating event:', error);
+            },
+          },
+        );
+      }}
+      onEventResize={(event) => {
+        const { start, end, event: resizedEvent } = event;
+        const startISO = new Date(start).toISOString();
+        const endISO = new Date(end).toISOString();
+        patchEvent(
+          {
+            eventID: resizedEvent.id,
+            data: {
+              start_time: startISO,
+              end_time: endISO,
+            },
+          },
+          {
+            onSuccess: () => {
+              refetch();
+            },
+            onError: (error) => {
+              console.error('Error resizing event:', error);
+            },
+          },
+        );
+      }}
     />
-  </div>
-);
-
-export default MyCalendar;
+  );
+}
diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css
index 55e9b77..c55d47a 100644
--- a/src/components/custom-toolbar.css
+++ b/src/components/custom-toolbar.css
@@ -1,57 +1,20 @@
-/* custom-toolbar.css */
-
 /* Container der Toolbar */
 .custom-toolbar {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 16px;
-  background-color: #ffffff;
-  border: 1px solid #e0e0e0;
-  /*border-radius: 8px;*/
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-/*.custom-toolbar .view-change .view-switcher {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-}
-
-.custom-toolbar .view-change .view-switcher button {
-  padding: 8px 16px;
-  background-color: #c1830d;
-  /*border: 1px solid #ccc;*/
-/*  border-radius: 11px;
-  font-size: 12px;
-  cursor: pointer;
-  transition: background-color 0.2s, border-color 0.2s;
-  height: 30px;
-  margin-top: 3.5px;
-  color: #ffffff;
-}
-
-.custom-toolbar .view-change .view-switcher button:hover:not(:disabled) {
-  background-color: #e0e0e0;
-  border-color: #999;
-}
-
-.custom-toolbar .view-change .view-switcher button:disabled {
-  background-color: #d0d0d0;
-  border-color: #aaa;
-  cursor: default;
-}*/
-
 /* Anzeige des aktuellen Datums (Monat und Jahr) */
 .custom-toolbar .current-date {
   font-weight: bold;
   font-size: 12px;
   text-align: center;
   color: #ffffff;
-  /*margin: 4px 0;*/
   background-color: #717171;
-  width: 178px;
   height: 37px;
   border-radius: 11px;
 }
@@ -65,7 +28,6 @@
 
 .custom-toolbar .navigation-controls button {
   padding: 8px 12px;
-  /*background-color: #2196F3;*/
   color: #ffffff;
   border: none;
   border-radius: 11px;
@@ -95,7 +57,6 @@
 
 .custom-toolbar .dropdowns select {
   padding: 8px 12px;
-  /*border: 1px solid #ccc;*/
   border-radius: 11px;
   font-size: 10px;
   background-color: #555555;
@@ -108,9 +69,9 @@
   border-color: #999;
 }
 
-.right-section {
+.right-section,
+.view-switcher {
   background-color: #717171;
-  width: 393px;
   height: 48px;
   border-radius: 11px;
   justify-items: center;
@@ -124,18 +85,11 @@
   margin-bottom: 3.5px;
 }
 
-/*.custom-toolbar .navigation-controls .today button {
-  background-color: #c6c6c6;
-  height: 30px;
-  width: 100px;
-  color: #000000;
-  margin-top: 3.5px;
-}*/
-
-.view-change {
+.view-change,
+.right-section {
   background-color: #717171;
   height: 48px;
-  width: 323px;
+  padding: 0 8px;
   border-radius: 11px;
   justify-items: center;
 }
@@ -144,7 +98,6 @@
   color: #000000;
   background-color: #c6c6c6;
   height: 36px;
-  width: 85px;
   border-radius: 11px;
   font-size: 12px;
   align-self: center;
@@ -152,7 +105,6 @@
 
 .datepicker {
   text-align: center;
-  width: 85px;
   height: 30px;
 }
 
diff --git a/src/components/custom-toolbar.tsx b/src/components/custom-toolbar.tsx
index bcbb9f9..36c8fff 100644
--- a/src/components/custom-toolbar.tsx
+++ b/src/components/custom-toolbar.tsx
@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from 'react';
-import { format } from 'date-fns';
 import './custom-toolbar.css';
-import { Button } from '@/components/custom-ui/button';
+import { Button } from '@/components/ui/button';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
+import { NavigateAction } from 'react-big-calendar';
 
 interface CustomToolbarProps {
   //Aktuell angezeigtes Datum
   date: Date;
   //Aktuelle Ansicht
-  view: 'month' | 'week' | 'day' | 'agenda';
+  view: 'month' | 'week' | 'day' | 'agenda' | 'work_week';
 
-  onNavigate: (action: string, newDate?: Date) => void;
+  onNavigate: (action: NavigateAction, newDate?: Date) => void;
   //Ansichtwechsel
-  onView: (newView: 'month' | 'week' | 'day' | 'agenda') => void;
+  onView: (newView: 'month' | 'week' | 'day' | 'agenda' | 'work_week') => void;
 }
 
 const CustomToolbar: React.FC<CustomToolbarProps> = ({
@@ -76,27 +76,11 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({
     setSelectedYear(getISOWeekYear(date));
   }, [date]);
 
-  //Dropdown-Liste der Wochen
-  const totalWeeks = getISOWeeksInYear(selectedYear);
-  const weekOptions = Array.from({ length: totalWeeks }, (_, i) => i + 1);
-
-  //Jahresliste
-  const yearOptions = Array.from(
-    { length: 21 },
-    (_, i) => selectedYear - 10 + i,
-  );
-
   //Start (Montag) und Ende (Sonntag) der aktuell angezeigten Woche berechnen
   const weekStartDate = getDateOfISOWeek(selectedWeek, selectedYear);
   const weekEndDate = new Date(weekStartDate);
   weekEndDate.setDate(weekStartDate.getDate() + 6);
 
-  //Monat und Jahr von Start- und Enddatum ermitteln
-  const monthStart = format(weekStartDate, 'MMMM');
-  const monthEnd = format(weekEndDate, 'MMMM');
-  const yearAtStart = format(weekStartDate, 'yyyy');
-  const yearAtEnd = format(weekEndDate, 'yyyy');
-
   //Ansichtwechsel
   const handleViewChange = (newView: 'month' | 'week' | 'day' | 'agenda') => {
     onView(newView);
@@ -134,7 +118,7 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({
     }
     //Datum im DatePicker aktualisieren
     setSelectedDate(newDate);
-    onNavigate('SET_DATE', newDate);
+    onNavigate('DATE', newDate);
   };
 
   //Pfeiltaste nach Hinten
@@ -160,7 +144,7 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({
     }
     //Datum im DatePicker aktualisieren
     setSelectedDate(newDate);
-    onNavigate('SET_DATE', newDate);
+    onNavigate('DATE', newDate);
   };
 
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
@@ -174,14 +158,14 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({
         setSelectedWeek(newWeek);
         setSelectedYear(newYear);
         const newDate = getDateOfISOWeek(newWeek, newYear);
-        onNavigate('SET_DATE', newDate);
+        onNavigate('DATE', newDate);
       } else if (view === 'day') {
-        onNavigate('SET_DATE', date);
+        onNavigate('DATE', date);
       } else if (view === 'month') {
         const newDate = new Date(date.getFullYear(), date.getMonth(), 1);
-        onNavigate('SET_DATE', newDate);
+        onNavigate('DATE', newDate);
       } else if (view === 'agenda') {
-        onNavigate('SET_DATE', date);
+        onNavigate('DATE', date);
       }
     }
   };
diff --git a/src/components/react-big-calendar.css b/src/components/react-big-calendar.css
index 1aed689..fe7270b 100644
--- a/src/components/react-big-calendar.css
+++ b/src/components/react-big-calendar.css
@@ -546,7 +546,8 @@ button.rbc-input::-moz-focus-inner {
   padding-right: 15px;
   text-transform: lowercase;
 }
-.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td,
+.rbc-agenda-view table.rbc-agenda-table tbody > tr > td.rbc-agenda-time-cell {
   border-left: 1px solid #ddd;
 }
 .rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
@@ -767,7 +768,6 @@ button.rbc-input::-moz-focus-inner {
   -ms-flex: 1;
   flex: 1;
   width: 100%;
-  border: 1px solid #ddd;
   min-height: 0;
 }
 .rbc-time-view .rbc-time-gutter {
@@ -870,10 +870,18 @@ button.rbc-input::-moz-focus-inner {
   -ms-flex-align: start;
   align-items: flex-start;
   width: 100%;
-  border-top: 2px solid #717171; /*#ddd*/
   overflow-y: auto;
   position: relative;
 }
+
+.rbc-time-header-content {
+  border-bottom: 2px solid #717171; /*#ddd*/
+}
+
+.rbc-time-column :last-child {
+  border-bottom: 0;
+}
+
 .rbc-time-content > .rbc-time-gutter {
   -webkit-box-flex: 0;
   -ms-flex: none;

From 758afb36b90f4c1545f7abef1aecf41c93ed2216 Mon Sep 17 00:00:00 2001
From: Dominik Stahl <dominik@samdj.de>
Date: Tue, 24 Jun 2025 10:26:04 +0200
Subject: [PATCH 19/23] feat(calendar): enhance calendar error handlick and
 loading

---
 package.json                                  |   4 +-
 .../api/user/[user]/calendar/validation.ts    |  28 ++--
 src/components/calendar.tsx                   | 135 +++++++++++++++---
 src/components/custom-toolbar.css             |   2 +-
 yarn.lock                                     |  24 +++-
 5 files changed, 155 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index 5587b6c..fb4a2c1 100644
--- a/package.json
+++ b/package.json
@@ -61,11 +61,13 @@
     "react-datepicker": "^8.4.0",
     "react-day-picker": "^9.7.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^6.0.0",
     "react-hook-form": "^7.56.4",
     "sonner": "^2.0.5",
     "swagger-ui-react": "^5.24.1",
     "tailwind-merge": "^3.2.0",
-    "zod": "^3.25.60"
+    "zod": "^3.25.60",
+    "zod-validation-error": "^3.5.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.3.1",
diff --git a/src/app/api/user/[user]/calendar/validation.ts b/src/app/api/user/[user]/calendar/validation.ts
index 996307f..1572793 100644
--- a/src/app/api/user/[user]/calendar/validation.ts
+++ b/src/app/api/user/[user]/calendar/validation.ts
@@ -19,18 +19,22 @@ export const BlockedSlotSchema = zod
     description: 'Blocked time slot in the user calendar',
   });
 
-export const OwnedBlockedSlotSchema = BlockedSlotSchema.extend({
-  id: zod.string(),
-  reason: zod.string().nullish(),
-  is_recurring: zod.boolean().default(false),
-  recurrence_end_date: zod.date().nullish(),
-  rrule: zod.string().nullish(),
-  created_at: zod.date().nullish(),
-  updated_at: zod.date().nullish(),
-  type: zod.literal('blocked_owned'),
-}).openapi('OwnedBlockedSlotSchema', {
-  description: 'Blocked slot owned by the user',
-});
+export const OwnedBlockedSlotSchema = zod
+  .object({
+    start_time: eventStartTimeSchema,
+    end_time: eventEndTimeSchema,
+    id: zod.string(),
+    reason: zod.string().nullish(),
+    is_recurring: zod.boolean().default(false),
+    recurrence_end_date: zod.date().nullish(),
+    rrule: zod.string().nullish(),
+    created_at: zod.date().nullish(),
+    updated_at: zod.date().nullish(),
+    type: zod.literal('blocked_owned'),
+  })
+  .openapi('OwnedBlockedSlotSchema', {
+    description: 'Blocked slot owned by the user',
+  });
 
 export const VisibleSlotSchema = EventSchema.omit({
   organizer: true,
diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx
index bfd8651..71f326b 100644
--- a/src/components/calendar.tsx
+++ b/src/components/calendar.tsx
@@ -11,6 +11,12 @@ import { useGetApiUserUserCalendar } from '@/generated/api/user/user';
 import { useRouter } from 'next/navigation';
 import { usePatchApiEventEventID } from '@/generated/api/event/event';
 import { useSession } from 'next-auth/react';
+import { UserCalendarSchemaItem } from '@/generated/api/meetup.schemas';
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Button } from '@/components/ui/button';
+import { fromZodIssue } from 'zod-validation-error/v4';
+import type { $ZodIssue } from 'zod/v4/core';
 
 moment.updateLocale('en', {
   week: {
@@ -24,16 +30,49 @@ const DaDRBCalendar = withDragAndDrop<
     id: string;
     start: Date;
     end: Date;
+    type: UserCalendarSchemaItem['type'];
   },
   {
     id: string;
     title: string;
+    type: UserCalendarSchemaItem['type'];
   }
 >(RBCalendar);
 
 const localizer = momentLocalizer(moment);
 
-export default function Calendar({ userId }: { userId: string }) {
+export default function Calendar({ userId }: { userId?: string }) {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          onReset={reset}
+          fallbackRender={({ resetErrorBoundary, error }) => (
+            <div className='flex flex-col items-center justify-center h-full'>
+              There was an error!
+              <p className='text-red-500'>
+                {typeof error === 'string'
+                  ? error
+                  : error.errors
+                      .map((e: $ZodIssue) => fromZodIssue(e).toString())
+                      .join(', ')}
+              </p>
+              <Button onClick={() => resetErrorBoundary()}>Try again</Button>
+            </div>
+          )}
+        >
+          {userId ? (
+            <CalendarWithUserEvents userId={userId} />
+          ) : (
+            <CalendarWithoutUserEvents />
+          )}
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+}
+
+function CalendarWithUserEvents({ userId }: { userId: string }) {
   const sesstion = useSession();
   const [currentView, setCurrentView] = React.useState<
     'month' | 'week' | 'day' | 'agenda' | 'work_week'
@@ -41,33 +80,52 @@ export default function Calendar({ userId }: { userId: string }) {
   const [currentDate, setCurrentDate] = React.useState<Date>(new Date());
   const router = useRouter();
 
-  const { data, refetch } = useGetApiUserUserCalendar(userId, {
-    start: moment(currentDate)
-      .startOf(
-        currentView === 'agenda'
-          ? 'month'
-          : currentView === 'work_week'
-            ? 'week'
-            : currentView,
-      )
-      .toISOString(),
-    end: moment(currentDate)
-      .endOf(
-        currentView === 'agenda'
-          ? 'month'
-          : currentView === 'work_week'
-            ? 'week'
-            : currentView,
-      )
-      .toISOString(),
-  });
+  const { data, refetch, error, isError } = useGetApiUserUserCalendar(
+    userId,
+    {
+      start: moment(currentDate)
+        .startOf(
+          currentView === 'agenda'
+            ? 'month'
+            : currentView === 'work_week'
+              ? 'week'
+              : currentView,
+        )
+        .toISOString(),
+      end: moment(currentDate)
+        .endOf(
+          currentView === 'agenda'
+            ? 'month'
+            : currentView === 'work_week'
+              ? 'week'
+              : currentView,
+        )
+        .toISOString(),
+    },
+    {
+      query: {
+        refetchOnWindowFocus: true,
+        refetchOnReconnect: true,
+        refetchOnMount: true,
+      },
+    },
+  );
 
-  const { mutate: patchEvent } = usePatchApiEventEventID();
+  if (isError) {
+    throw error.response?.data || 'Failed to fetch calendar data';
+  }
+
+  const { mutate: patchEvent } = usePatchApiEventEventID({
+    mutation: {
+      throwOnError(error) {
+        throw error.response?.data || 'Failed to update event';
+      },
+    },
+  });
 
   return (
     <DaDRBCalendar
       localizer={localizer}
-      style={{ height: 500 }}
       culture='de-DE'
       defaultView='week'
       components={{
@@ -85,6 +143,7 @@ export default function Calendar({ userId }: { userId: string }) {
           title: event.type === 'event' ? event.title : 'Blocker',
           start: new Date(event.start_time),
           end: new Date(event.end_time),
+          type: event.type,
         })) ?? []
       }
       onSelectEvent={(event) => {
@@ -102,6 +161,7 @@ export default function Calendar({ userId }: { userId: string }) {
       selectable={sesstion.data?.user?.id === userId}
       onEventDrop={(event) => {
         const { start, end, event: droppedEvent } = event;
+        if (droppedEvent.type === 'blocked_private') return;
         const startISO = new Date(start).toISOString();
         const endISO = new Date(end).toISOString();
         patchEvent(
@@ -124,8 +184,13 @@ export default function Calendar({ userId }: { userId: string }) {
       }}
       onEventResize={(event) => {
         const { start, end, event: resizedEvent } = event;
+        if (resizedEvent.type === 'blocked_private') return;
         const startISO = new Date(start).toISOString();
         const endISO = new Date(end).toISOString();
+        if (startISO === endISO) {
+          console.warn('Start and end times are the same, skipping resize.');
+          return;
+        }
         patchEvent(
           {
             eventID: resizedEvent.id,
@@ -147,3 +212,27 @@ export default function Calendar({ userId }: { userId: string }) {
     />
   );
 }
+
+function CalendarWithoutUserEvents() {
+  const [currentView, setCurrentView] = React.useState<
+    'month' | 'week' | 'day' | 'agenda' | 'work_week'
+  >('week');
+  const [currentDate, setCurrentDate] = React.useState<Date>(new Date());
+
+  return (
+    <DaDRBCalendar
+      localizer={localizer}
+      culture='de-DE'
+      defaultView='week'
+      components={{
+        toolbar: CustomToolbar,
+      }}
+      onView={setCurrentView}
+      view={currentView}
+      date={currentDate}
+      onNavigate={(date) => {
+        setCurrentDate(date);
+      }}
+    />
+  );
+}
diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css
index c55d47a..8f8d1f6 100644
--- a/src/components/custom-toolbar.css
+++ b/src/components/custom-toolbar.css
@@ -109,5 +109,5 @@
 }
 
 .datepicker-box {
-  z-index: 9999;
+  z-index: 5;
 }
diff --git a/yarn.lock b/yarn.lock
index 234ff57..74ff1df 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -156,7 +156,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.13.8, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.8, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.7":
   version: 7.27.6
   resolution: "@babel/runtime@npm:7.27.6"
   checksum: 10c0/89726be83f356f511dcdb74d3ea4d873a5f0cf0017d4530cb53aa27380c01ca102d573eff8b8b77815e624b1f8c24e7f0311834ad4fb632c90a770fda00bd4c8
@@ -7730,6 +7730,7 @@ __metadata:
     react-datepicker: "npm:^8.4.0"
     react-day-picker: "npm:^9.7.0"
     react-dom: "npm:^19.0.0"
+    react-error-boundary: "npm:^6.0.0"
     react-hook-form: "npm:^7.56.4"
     sonner: "npm:^2.0.5"
     swagger-ui-react: "npm:^5.24.1"
@@ -7740,6 +7741,7 @@ __metadata:
     tw-animate-css: "npm:1.3.4"
     typescript: "npm:^5.8.3"
     zod: "npm:^3.25.60"
+    zod-validation-error: "npm:^3.5.2"
   languageName: unknown
   linkType: soft
 
@@ -9004,6 +9006,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-error-boundary@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "react-error-boundary@npm:6.0.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    react: ">=16.13.1"
+  checksum: 10c0/1914d600dee95a14f14af4afe9867b0d35c26c4f7826d23208800ba2a99728659029aad60a6ef95e13430b4d79c2c4c9b3585f50bf508450478760d2e4e732d8
+  languageName: node
+  linkType: hard
+
 "react-hook-form@npm:^7.56.4":
   version: 7.58.1
   resolution: "react-hook-form@npm:7.58.1"
@@ -11274,6 +11287,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod-validation-error@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "zod-validation-error@npm:3.5.2"
+  peerDependencies:
+    zod: ^3.25.0
+  checksum: 10c0/da50926ec91c7ad2880bacc5010a53c42de58f73f7c4629baad8132695c4daf74dd68620787198da81aca85134471182ed4c566b5fc9bc5349aefd8540946d57
+  languageName: node
+  linkType: hard
+
 "zod@npm:^3.25.60":
   version: 3.25.67
   resolution: "zod@npm:3.25.67"

From a3e7224087c12c35625c0bf5d5c6136195b2e7cd Mon Sep 17 00:00:00 2001
From: Dominik Stahl <dominik@samdj.de>
Date: Thu, 26 Jun 2025 10:57:31 +0200
Subject: [PATCH 20/23] feat(calendar): add calendar to home page

---
 src/app/(main)/home/page.tsx              | 21 +++++++----------
 src/app/api/user/[user]/calendar/route.ts |  6 ++++-
 src/components/calendar.tsx               | 28 +++++++++++++++++++----
 src/components/custom-toolbar.css         |  3 ++-
 src/components/misc/header.tsx            |  2 +-
 src/components/react-big-calendar.css     |  3 ---
 6 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx
index b653ab8..1cf8a90 100644
--- a/src/app/(main)/home/page.tsx
+++ b/src/app/(main)/home/page.tsx
@@ -1,22 +1,17 @@
 'use client';
 
-import { RedirectButton } from '@/components/buttons/redirect-button';
+import Calendar from '@/components/calendar';
 import { useGetApiUserMe } from '@/generated/api/user/user';
 
 export default function Home() {
-  const { data, isLoading } = useGetApiUserMe();
+  const { data } = useGetApiUserMe();
 
   return (
-    <div className='flex flex-col items-center justify-center h-full'>
-      <div>
-        <h1>
-          Hello{' '}
-          {isLoading ? 'Loading...' : data?.data.user?.name || 'Unknown User'}
-        </h1>
-        <RedirectButton redirectUrl='/logout' buttonText='Logout' />
-        <RedirectButton redirectUrl='/settings' buttonText='Settings' />
-        <RedirectButton redirectUrl='/events/new' buttonText='New Event' />
-      </div>
+    <div className='max-h-full'>
+      <Calendar
+        userId={data?.data.user?.id}
+        height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
+      />
     </div>
   );
-};
+}
diff --git a/src/app/api/user/[user]/calendar/route.ts b/src/app/api/user/[user]/calendar/route.ts
index bf01738..62142e9 100644
--- a/src/app/api/user/[user]/calendar/route.ts
+++ b/src/app/api/user/[user]/calendar/route.ts
@@ -217,6 +217,10 @@ export const GET = auth(async function GET(req, { params }) {
 
   return returnZodTypeCheckedResponse(UserCalendarResponseSchema, {
     success: true,
-    calendar,
+    calendar: calendar.filter(
+      (event, index, self) =>
+        self.findIndex((e) => e.id === event.id && e.type === event.type) ===
+        index,
+    ),
   });
 });
diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx
index 71f326b..a8d6005 100644
--- a/src/components/calendar.tsx
+++ b/src/components/calendar.tsx
@@ -41,7 +41,13 @@ const DaDRBCalendar = withDragAndDrop<
 
 const localizer = momentLocalizer(moment);
 
-export default function Calendar({ userId }: { userId?: string }) {
+export default function Calendar({
+  userId,
+  height,
+}: {
+  userId?: string;
+  height: string;
+}) {
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
@@ -62,9 +68,9 @@ export default function Calendar({ userId }: { userId?: string }) {
           )}
         >
           {userId ? (
-            <CalendarWithUserEvents userId={userId} />
+            <CalendarWithUserEvents userId={userId} height={height} />
           ) : (
-            <CalendarWithoutUserEvents />
+            <CalendarWithoutUserEvents height={height} />
           )}
         </ErrorBoundary>
       )}
@@ -72,7 +78,13 @@ export default function Calendar({ userId }: { userId?: string }) {
   );
 }
 
-function CalendarWithUserEvents({ userId }: { userId: string }) {
+function CalendarWithUserEvents({
+  userId,
+  height,
+}: {
+  userId: string;
+  height: string;
+}) {
   const sesstion = useSession();
   const [currentView, setCurrentView] = React.useState<
     'month' | 'week' | 'day' | 'agenda' | 'work_week'
@@ -131,6 +143,9 @@ function CalendarWithUserEvents({ userId }: { userId: string }) {
       components={{
         toolbar: CustomToolbar,
       }}
+      style={{
+        height: height,
+      }}
       onView={setCurrentView}
       view={currentView}
       date={currentDate}
@@ -213,7 +228,7 @@ function CalendarWithUserEvents({ userId }: { userId: string }) {
   );
 }
 
-function CalendarWithoutUserEvents() {
+function CalendarWithoutUserEvents({ height }: { height: string }) {
   const [currentView, setCurrentView] = React.useState<
     'month' | 'week' | 'day' | 'agenda' | 'work_week'
   >('week');
@@ -224,6 +239,9 @@ function CalendarWithoutUserEvents() {
       localizer={localizer}
       culture='de-DE'
       defaultView='week'
+      style={{
+        height: height,
+      }}
       components={{
         toolbar: CustomToolbar,
       }}
diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css
index 8f8d1f6..3fba69f 100644
--- a/src/components/custom-toolbar.css
+++ b/src/components/custom-toolbar.css
@@ -3,7 +3,8 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 16px;
+  padding: calc(var(--spacing) * 2);
+  padding-left: calc(50px + var(--spacing));
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
diff --git a/src/components/misc/header.tsx b/src/components/misc/header.tsx
index ed53953..dd9e36d 100644
--- a/src/components/misc/header.tsx
+++ b/src/components/misc/header.tsx
@@ -45,7 +45,7 @@ export default function Header({
           <UserDropdown />
         </span>
       </header>
-      <main>{children}</main>
+      <main className='max-h-full overflow-y-auto p-5'>{children}</main>
     </div>
   );
 }
diff --git a/src/components/react-big-calendar.css b/src/components/react-big-calendar.css
index fe7270b..675898c 100644
--- a/src/components/react-big-calendar.css
+++ b/src/components/react-big-calendar.css
@@ -810,9 +810,6 @@ button.rbc-input::-moz-focus-inner {
   -ms-flex-direction: row;
   flex-direction: row;
 }
-.rbc-time-header.rbc-overflowing {
-  border-right: 1px solid #ddd;
-}
 .rbc-rtl .rbc-time-header.rbc-overflowing {
   border-right-width: 0;
   border-left: 1px solid #ddd;

From 33ef6d3e98b015ae938b3a1d60e9271554913fae Mon Sep 17 00:00:00 2001
From: Renovate Bot <renovate@dominikstahl.dev>
Date: Thu, 26 Jun 2025 21:01:01 +0000
Subject: [PATCH 21/23] chore(deps): pin dependency @types/react-big-calendar
 to 1.16.2

---
 package.json | 2 +-
 yarn.lock    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 4901409..83a6ca5 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "@tailwindcss/postcss": "4.1.11",
     "@types/node": "22.15.33",
     "@types/react": "19.1.8",
-    "@types/react-big-calendar": "^1",
+    "@types/react-big-calendar": "1.16.2",
     "@types/react-dom": "19.1.6",
     "@types/swagger-ui-react": "5.18.0",
     "@types/webpack-env": "1.18.8",
diff --git a/yarn.lock b/yarn.lock
index 02e3353..e7b2950 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3403,7 +3403,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-big-calendar@npm:^1":
+"@types/react-big-calendar@npm:1.16.2":
   version: 1.16.2
   resolution: "@types/react-big-calendar@npm:1.16.2"
   dependencies:
@@ -7702,7 +7702,7 @@ __metadata:
     "@tanstack/react-query": "npm:^5.80.7"
     "@types/node": "npm:22.15.33"
     "@types/react": "npm:19.1.8"
-    "@types/react-big-calendar": "npm:^1"
+    "@types/react-big-calendar": "npm:1.16.2"
     "@types/react-dom": "npm:19.1.6"
     "@types/swagger-ui-react": "npm:5.18.0"
     "@types/webpack-env": "npm:1.18.8"

From 9f1f1e24e95267de476023c4a1a0666adff37dea Mon Sep 17 00:00:00 2001
From: Renovate Bot <renovate@dominikstahl.dev>
Date: Fri, 27 Jun 2025 06:01:23 +0000
Subject: [PATCH 22/23] chore(deps): update dependency prettier to v3.6.2

---
 README.md    |  2 --
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index d9ca71b..56fa41d 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,6 @@ This project is built with a modern tech stack:
     yarn install
     ```
 3.  **Set up environment variables:**
-
     - You will need to create an `AUTH_SECRET`. You can generate one using the following command:
       ```bash
       npx auth secret
@@ -97,7 +96,6 @@ This project is built with a modern tech stack:
       ```
 
 4.  **Apply database migrations (Prisma):**
-
     - Ensure your Prisma schema (`prisma/schema.prisma`) is defined.
     - Setup/update the database with these commands:
       ```bash
diff --git a/package.json b/package.json
index 83a6ca5..9a33a39 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "eslint-config-prettier": "10.1.5",
     "orval": "7.10.0",
     "postcss": "8.5.6",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "prisma": "6.10.1",
     "tailwindcss": "4.1.11",
     "ts-node": "10.9.2",
diff --git a/yarn.lock b/yarn.lock
index e7b2950..535f4e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7723,7 +7723,7 @@ __metadata:
     next-themes: "npm:^0.4.6"
     orval: "npm:7.10.0"
     postcss: "npm:8.5.6"
-    prettier: "npm:3.5.3"
+    prettier: "npm:3.6.2"
     prisma: "npm:6.10.1"
     react: "npm:^19.1.0"
     react-big-calendar: "npm:^1.18.0"
@@ -8730,12 +8730,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:3.5.3":
-  version: 3.5.3
-  resolution: "prettier@npm:3.5.3"
+"prettier@npm:3.6.2":
+  version: 3.6.2
+  resolution: "prettier@npm:3.6.2"
   bin:
     prettier: bin/prettier.cjs
-  checksum: 10c0/3880cb90b9dc0635819ab52ff571518c35bd7f15a6e80a2054c05dbc8a3aa6e74f135519e91197de63705bcb38388ded7e7230e2178432a1468005406238b877
+  checksum: 10c0/488cb2f2b99ec13da1e50074912870217c11edaddedeadc649b1244c749d15ba94e846423d062e2c4c9ae683e2d65f754de28889ba06e697ac4f988d44f45812
   languageName: node
   linkType: hard
 

From 511acbca62b0a885b66eee2b9a52fc7fdc34adf6 Mon Sep 17 00:00:00 2001
From: Dominik Stahl <dominik@samdj.de>
Date: Thu, 26 Jun 2025 10:20:20 +0200
Subject: [PATCH 23/23] feat: add notifications support

---
 prisma/schema.prisma                          |  10 +-
 src/app/api/event/[eventID]/route.ts          |  59 +++++++++
 src/app/api/event/route.ts                    |  12 ++
 .../api/notifications/[notification]/route.ts |  77 +++++++++++
 .../notifications/[notification]/swagger.ts   |  44 +++++++
 src/app/api/notifications/route.ts            |  80 ++++++++++++
 src/app/api/notifications/swagger.ts          |  36 ++++++
 src/app/api/notifications/validation.ts       |  44 +++++++
 src/app/api/validation.ts                     |  11 ++
 .../buttons/notification-button.tsx           |  10 +-
 src/components/misc/header.tsx                | 121 ++++++++++++++----
 src/components/misc/user-dropdown.tsx         |  12 +-
 12 files changed, 483 insertions(+), 33 deletions(-)
 create mode 100644 src/app/api/notifications/[notification]/route.ts
 create mode 100644 src/app/api/notifications/[notification]/swagger.ts
 create mode 100644 src/app/api/notifications/route.ts
 create mode 100644 src/app/api/notifications/swagger.ts
 create mode 100644 src/app/api/notifications/validation.ts

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index ffa1c86..4b3c897 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -45,6 +45,12 @@ enum notification_type {
     CALENDAR_SYNC_ERROR
 }
 
+enum entity_type {
+    USER
+    MEETING
+    GROUP
+}
+
 enum group_member_role {
     ADMIN
     MEMBER
@@ -253,8 +259,8 @@ model Notification {
     id                  String            @id @default(cuid())
     user_id             String
     type                notification_type
-    related_entity_type String?
-    related_entity_id   String?
+    related_entity_type entity_type
+    related_entity_id   String
     message             String
     is_read             Boolean           @default(false)
     created_at          DateTime          @default(now())
diff --git a/src/app/api/event/[eventID]/route.ts b/src/app/api/event/[eventID]/route.ts
index 8c06b64..f3915b3 100644
--- a/src/app/api/event/[eventID]/route.ts
+++ b/src/app/api/event/[eventID]/route.ts
@@ -129,6 +129,17 @@ export const DELETE = auth(async (req, { params }) => {
         { participants: { some: { user_id: dbUser.id } } },
       ],
     },
+    include: {
+      participants: {
+        select: {
+          user: {
+            select: {
+              id: true,
+            },
+          },
+        },
+      },
+    },
   });
 
   if (!event)
@@ -151,6 +162,18 @@ export const DELETE = auth(async (req, { params }) => {
     },
   });
 
+  for (const participant of event.participants) {
+    await prisma.notification.create({
+      data: {
+        user_id: participant.user.id,
+        type: 'MEETING_CANCEL',
+        related_entity_id: eventID,
+        related_entity_type: 'MEETING',
+        message: `The event "${event.title}" has been cancelled by the organizer.`,
+      },
+    });
+  }
+
   return returnZodTypeCheckedResponse(
     SuccessResponseSchema,
     { success: true, message: 'Event deleted successfully' },
@@ -190,6 +213,17 @@ export const PATCH = auth(async (req, { params }) => {
         { participants: { some: { user_id: dbUser.id } } },
       ],
     },
+    include: {
+      participants: {
+        select: {
+          user: {
+            select: {
+              id: true,
+            },
+          },
+        },
+      },
+    },
   });
 
   if (!event)
@@ -244,8 +278,33 @@ export const PATCH = auth(async (req, { params }) => {
         },
         update: {},
       });
+      if (event.participants.some((p) => p.user.id === participant)) {
+        await prisma.notification.create({
+          data: {
+            user_id: participant,
+            type: 'MEETING_UPDATE',
+            related_entity_id: eventID,
+            related_entity_type: 'MEETING',
+            message: `The event "${event.title}" has been updated.`,
+          },
+        });
+      }
     }
 
+  for (const participant of event.participants) {
+    if (participants && !participants.includes(participant.user.id)) {
+      await prisma.notification.create({
+        data: {
+          user_id: participant.user.id,
+          type: 'MEETING_CANCEL',
+          related_entity_id: eventID,
+          related_entity_type: 'MEETING',
+          message: `You have been removed from the event "${event.title}".`,
+        },
+      });
+    }
+  }
+
   const updatedEvent = await prisma.meeting.update({
     where: {
       id: eventID,
diff --git a/src/app/api/event/route.ts b/src/app/api/event/route.ts
index fb734b1..5f368d1 100644
--- a/src/app/api/event/route.ts
+++ b/src/app/api/event/route.ts
@@ -167,6 +167,18 @@ export const POST = auth(async (req) => {
     },
   });
 
+  for (const participant of newEvent.participants) {
+    await prisma.notification.create({
+      data: {
+        user_id: participant.user.id,
+        type: 'MEETING_INVITE',
+        related_entity_type: 'MEETING',
+        related_entity_id: newEvent.id,
+        message: `You have been invited to the meeting "${newEvent.title}" by ${newEvent.organizer.first_name} ${newEvent.organizer.last_name}.`,
+      },
+    });
+  }
+
   return returnZodTypeCheckedResponse(
     EventResponseSchema,
     {
diff --git a/src/app/api/notifications/[notification]/route.ts b/src/app/api/notifications/[notification]/route.ts
new file mode 100644
index 0000000..d02d434
--- /dev/null
+++ b/src/app/api/notifications/[notification]/route.ts
@@ -0,0 +1,77 @@
+import { auth } from '@/auth';
+import { prisma } from '@/prisma';
+import {
+  getNotificationResponseSchema,
+  updateNotificationRequestSchema,
+} from '../validation';
+import {
+  returnZodTypeCheckedResponse,
+  userAuthenticated,
+} from '@/lib/apiHelpers';
+import {
+  ErrorResponseSchema,
+  ZodErrorResponseSchema,
+} from '@/app/api/validation';
+
+export const PATCH = auth(async function GET(req, { params }: { params: Promise<{ notification: string }> }) {
+  const authCheck = userAuthenticated(req);
+  if (!authCheck.continue)
+    return returnZodTypeCheckedResponse(
+      ErrorResponseSchema,
+      authCheck.response,
+      authCheck.metadata,
+    );
+
+  const userId = authCheck.user.id;
+
+  const notificationId = (await params).notification;
+
+  const dataRaw = await req.json();
+  const data = await updateNotificationRequestSchema.safeParseAsync(dataRaw);
+  if (!data.success)
+    return returnZodTypeCheckedResponse(
+      ZodErrorResponseSchema,
+      {
+        success: false,
+        message: 'Invalid request data',
+        errors: data.error.issues,
+      },
+      { status: 400 },
+    );
+  const { is_read } = data.data;
+
+  const notification = await prisma.notification.update({
+    where: {
+      id: notificationId,
+      user_id: userId,
+    },
+    data: {
+      is_read,
+    },
+    select: {
+      id: true,
+      type: true,
+      related_entity_id: true,
+      related_entity_type: true,
+      message: true,
+      is_read: true,
+      created_at: true,
+    },
+  });
+
+  if (!notification)
+    return returnZodTypeCheckedResponse(
+      ErrorResponseSchema,
+      { success: false, message: 'Notification not found or you do not have permission to update it' },
+      { status: 404 },
+    );
+
+  return returnZodTypeCheckedResponse(
+    getNotificationResponseSchema,
+    {
+      success: true,
+      notification,
+    },
+    { status: 200 },
+  );
+});
\ No newline at end of file
diff --git a/src/app/api/notifications/[notification]/swagger.ts b/src/app/api/notifications/[notification]/swagger.ts
new file mode 100644
index 0000000..7cf9bba
--- /dev/null
+++ b/src/app/api/notifications/[notification]/swagger.ts
@@ -0,0 +1,44 @@
+import { OpenAPIRegistry } from '@asteasolutions/zod-to-openapi';
+import {
+  invalidRequestDataResponse,
+  notAuthenticatedResponse,
+  serverReturnedDataValidationErrorResponse,
+  userNotFoundResponse,
+} from '@/lib/defaultApiResponses';
+import { getNotificationResponseSchema, updateNotificationRequestSchema } from '../validation';
+import zod from 'zod/v4';
+import { NotificationIdSchema } from '../../validation';
+
+export default function registerSwaggerPaths(registry: OpenAPIRegistry) {
+  registry.registerPath({
+    method: 'patch',
+    path: '/api/notifications/{notification}',
+    request: {
+      body: {
+        content: {
+          'application/json': {
+            schema: updateNotificationRequestSchema,
+          },
+        },
+      },
+      params: zod.object({
+        notification: NotificationIdSchema,
+      }),
+    },
+    responses: {
+      200: {
+        description: 'Notification updated successfully',
+        content: {
+          'application/json': {
+            schema: getNotificationResponseSchema,
+          },
+        },
+      },
+      ...invalidRequestDataResponse,
+      ...notAuthenticatedResponse,
+      ...userNotFoundResponse,
+      ...serverReturnedDataValidationErrorResponse,
+    },
+    tags: ['Notifications'],
+  });
+}
diff --git a/src/app/api/notifications/route.ts b/src/app/api/notifications/route.ts
new file mode 100644
index 0000000..ef0f363
--- /dev/null
+++ b/src/app/api/notifications/route.ts
@@ -0,0 +1,80 @@
+import { auth } from '@/auth';
+import { prisma } from '@/prisma';
+import {
+  getNotificationsRequestSchema,
+  getNotificationsResponseSchema,
+} from './validation';
+import {
+  returnZodTypeCheckedResponse,
+  userAuthenticated,
+} from '@/lib/apiHelpers';
+import {
+  ErrorResponseSchema,
+  ZodErrorResponseSchema,
+} from '@/app/api/validation';
+
+export const GET = auth(async function GET(req) {
+  const authCheck = userAuthenticated(req);
+  if (!authCheck.continue)
+    return returnZodTypeCheckedResponse(
+      ErrorResponseSchema,
+      authCheck.response,
+      authCheck.metadata,
+    );
+
+  const userId = authCheck.user.id;
+
+  const dataRaw = Object.fromEntries(new URL(req.url).searchParams);
+  const data = await getNotificationsRequestSchema.safeParseAsync(dataRaw);
+  if (!data.success)
+    return returnZodTypeCheckedResponse(
+      ZodErrorResponseSchema,
+      {
+        success: false,
+        message: 'Invalid request data',
+        errors: data.error.issues,
+      },
+      { status: 400 },
+    );
+  const { skip, all } = data.data;
+
+  const notifications = await prisma.notification.findMany({
+    where: {
+      user_id: userId,
+      created_at: all
+        ? undefined
+        : { gte: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) },
+    },
+    orderBy: { created_at: 'desc' },
+    select: {
+      id: true,
+      type: true,
+      related_entity_id: true,
+      related_entity_type: true,
+      message: true,
+      is_read: true,
+      created_at: true,
+    },
+    take: 50,
+    skip,
+  });
+
+  const total_count = await prisma.notification.count({
+    where: { user_id: userId },
+  });
+
+  const unread_count = await prisma.notification.count({
+    where: { user_id: userId, is_read: false },
+  });
+
+  return returnZodTypeCheckedResponse(
+    getNotificationsResponseSchema,
+    {
+      success: true,
+      notifications,
+      total_count,
+      unread_count,
+    },
+    { status: 200 },
+  );
+});
diff --git a/src/app/api/notifications/swagger.ts b/src/app/api/notifications/swagger.ts
new file mode 100644
index 0000000..c5dcc09
--- /dev/null
+++ b/src/app/api/notifications/swagger.ts
@@ -0,0 +1,36 @@
+import { OpenAPIRegistry } from '@asteasolutions/zod-to-openapi';
+import {
+  getNotificationsRequestSchema,
+  getNotificationsResponseSchema,
+} from './validation';
+import {
+  invalidRequestDataResponse,
+  notAuthenticatedResponse,
+  serverReturnedDataValidationErrorResponse,
+  userNotFoundResponse,
+} from '@/lib/defaultApiResponses';
+
+export default function registerSwaggerPaths(registry: OpenAPIRegistry) {
+  registry.registerPath({
+    method: 'get',
+    path: '/api/notifications',
+    request: {
+      query: getNotificationsRequestSchema,
+    },
+    responses: {
+      200: {
+        description: 'List of notifications for the authenticated user',
+        content: {
+          'application/json': {
+            schema: getNotificationsResponseSchema,
+          },
+        },
+      },
+      ...invalidRequestDataResponse,
+      ...notAuthenticatedResponse,
+      ...userNotFoundResponse,
+      ...serverReturnedDataValidationErrorResponse,
+    },
+    tags: ['Notifications'],
+  });
+}
diff --git a/src/app/api/notifications/validation.ts b/src/app/api/notifications/validation.ts
new file mode 100644
index 0000000..58cd43f
--- /dev/null
+++ b/src/app/api/notifications/validation.ts
@@ -0,0 +1,44 @@
+import zod from 'zod/v4';
+
+export const notificationsSchema = zod.object({
+  id: zod.string(),
+  type: zod.enum([
+    'FRIEND_REQUEST',
+    'FRIEND_ACCEPT',
+    'MEETING_INVITE',
+    'MEETING_UPDATE',
+    'MEETING_CANCEL',
+    'MEETING_REMINDER',
+    'GROUP_MEMBER_ADDED',
+    'CALENDAR_SYNC_ERROR',
+  ]),
+  related_entity_id: zod.string().nullable(),
+  related_entity_type: zod.enum(['USER', 'MEETING', 'GROUP']),
+  message: zod.string().max(500),
+  is_read: zod.boolean(),
+  created_at: zod.date(),
+}).openapi('Notification');
+
+export const getNotificationsResponseSchema = zod.object({
+  success: zod.boolean(),
+  notifications: zod.array(notificationsSchema),
+  total_count: zod.number(),
+  unread_count: zod.number(),
+});
+
+export const getNotificationResponseSchema = zod.object({
+  success: zod.boolean(),
+  notification: notificationsSchema,
+}).openapi('GetNotificationResponse');
+
+export const getNotificationsRequestSchema = zod.object({
+  skip: zod.string().transform((val) => {
+    const num = parseInt(val, 10);
+    return isNaN(num) ? 0 : num;
+  }).default(0),
+  all: zod.boolean().default(false),
+}).openapi('GetNotificationsRequest');
+
+export const updateNotificationRequestSchema = zod.object({
+  is_read: zod.boolean(),
+}).openapi('UpdateNotificationRequest');
\ No newline at end of file
diff --git a/src/app/api/validation.ts b/src/app/api/validation.ts
index 38b95bd..f16605f 100644
--- a/src/app/api/validation.ts
+++ b/src/app/api/validation.ts
@@ -85,3 +85,14 @@ export const EventIdParamSchema = registry.registerParameter(
     example: '67890',
   }),
 );
+
+export const NotificationIdSchema = registry.registerParameter(
+  'NotificationIdParam',
+  zod.string().openapi({
+    param: {
+      name: 'notification',
+      in: 'path',
+    },
+    example: '12345',
+  }),
+);
\ No newline at end of file
diff --git a/src/components/buttons/notification-button.tsx b/src/components/buttons/notification-button.tsx
index f41f325..e536ff5 100644
--- a/src/components/buttons/notification-button.tsx
+++ b/src/components/buttons/notification-button.tsx
@@ -8,24 +8,28 @@ import { NDot, NotificationDot } from '@/components/misc/notification-dot';
 
 export function NotificationButton({
   dotVariant,
+  icon,
   children,
   ...props
 }: {
   dotVariant?: NDot;
-  children: React.ReactNode;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
 } & React.ComponentProps<typeof Button>) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button type='button' variant='outline_primary' {...props}>
-          {children}
+          {icon}
           <NotificationDot
             dotVariant={dotVariant}
             className='absolute ml-[30px] mt-[30px]'
           />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'></DropdownMenuContent>
+      <DropdownMenuContent align='end'>
+        {children}
+      </DropdownMenuContent>
     </DropdownMenu>
   );
 }
diff --git a/src/components/misc/header.tsx b/src/components/misc/header.tsx
index dd9e36d..b0dc856 100644
--- a/src/components/misc/header.tsx
+++ b/src/components/misc/header.tsx
@@ -1,28 +1,34 @@
+'use client';
+
 import { SidebarTrigger } from '@/components/custom-ui/sidebar';
 import { ThemePicker } from '@/components/misc/theme-picker';
 import { NotificationButton } from '@/components/buttons/notification-button';
 
 import { BellRing, Inbox } from 'lucide-react';
 import UserDropdown from '@/components/misc/user-dropdown';
-
-const items = [
-  {
-    title: 'Calendar',
-    url: '#',
-    icon: Inbox,
-  },
-  {
-    title: 'Friends',
-    url: '#',
-    icon: BellRing,
-  },
-];
+import {
+  useGetApiNotifications,
+  usePatchApiNotificationsNotification,
+} from '@/generated/api/notifications/notifications';
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { useRouter } from 'next/navigation';
 
 export default function Header({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const router = useRouter();
+  const {
+    data: notifications,
+    isLoading: notificationsLoading,
+    refetch,
+  } = useGetApiNotifications();
+
+  const markNotificationAsRead = usePatchApiNotificationsNotification();
+
   return (
     <div className='w-full grid grid-rows-[50px_1fr] h-screen'>
       <header className='border-b-1 grid-cols-[1fr_3fr_1fr] grid items-center px-2 shadow-md'>
@@ -32,16 +38,85 @@ export default function Header({
         <span className='flex justify-center'>Search</span>
         <span className='flex gap-1 justify-end'>
           <ThemePicker />
-          {items.map((item) => (
-            <NotificationButton
-              key={item.title}
-              variant='outline_primary'
-              dotVariant='hidden'
-              size='icon'
-            >
-              <item.icon />
-            </NotificationButton>
-          ))}
+          <NotificationButton
+            variant='outline_primary'
+            dotVariant={
+              !notificationsLoading && notifications?.data.unread_count
+                ? 'active'
+                : notifications?.data.notifications.length
+                  ? 'neutral'
+                  : 'hidden'
+            }
+            size='icon'
+            icon={<Inbox />}
+          >
+            <DropdownMenuItem>
+              {notificationsLoading
+                ? 'Loading...'
+                : `${notifications?.data.unread_count} unread Notifications`}
+            </DropdownMenuItem>
+            {notifications?.data.notifications.map((notification) => (
+              <DropdownMenuItem
+                key={notification.id}
+                className={cn('grid grid-rows-[auto-auto-auto] gap-2', {
+                  'font-bold': !notification.is_read,
+                })}
+              >
+                <p className='text-sm'>{notification.message}</p>
+                <p className='text-xs text-gray-500'>
+                  {new Date(notification.created_at).toLocaleString()}
+                </p>
+                <div className='grid auto-cols-fr grid-flow-col gap-2'>
+                  <Button
+                    onClick={() => {
+                      markNotificationAsRead.mutate(
+                        {
+                          notification: notification.id,
+                          data: {
+                            is_read: !notification.is_read,
+                          },
+                        },
+                        {
+                          onSuccess: () => {
+                            refetch();
+                          },
+                        },
+                      );
+                    }}
+                    variant={
+                      notification.is_read ? 'outline_primary' : 'primary'
+                    }
+                  >
+                    {notification.is_read ? 'Read' : 'Mark as Read'}
+                  </Button>
+                  <Button variant="secondary" onClick={() => {
+                    switch (notification.related_entity_type) {
+                      case "MEETING":
+                        router.push(`/events/${notification.related_entity_id}`);
+                        break;
+                      case "USER":
+                        router.push(`/users/${notification.related_entity_id}`);
+                        break;
+                      case "GROUP":
+                        router.push(`/groups/${notification.related_entity_id}`);
+                        break;
+                      default:
+                        console.warn('Unknown notification type:', notification.related_entity_type);
+                        break;
+                    }
+                  }}>
+                    View Details
+                  </Button>
+                </div>
+              </DropdownMenuItem>
+            ))}
+          </NotificationButton>
+          <NotificationButton
+            variant='outline_primary'
+            dotVariant='hidden'
+            size='icon'
+            icon={<BellRing />}
+          ></NotificationButton>
           <UserDropdown />
         </span>
       </header>
diff --git a/src/components/misc/user-dropdown.tsx b/src/components/misc/user-dropdown.tsx
index e55f4bb..460f2b4 100644
--- a/src/components/misc/user-dropdown.tsx
+++ b/src/components/misc/user-dropdown.tsx
@@ -41,11 +41,13 @@ export default function UserDropdown() {
           <UserCard />
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>Settings</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <Link href='/logout'>Logout</Link>
-        </DropdownMenuItem>
+        <Link href='/settings'>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuSeparator />
+        </Link>
+        <Link href='/logout'>
+          <DropdownMenuItem>Logout</DropdownMenuItem>
+        </Link>
       </DropdownMenuContent>
     </DropdownMenu>
   );