feat: add notifications support

Reviewed-on: #101
Reviewed-by: Dominik <mail@dominikstahl.dev>

.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

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

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,24 +49,34 @@
     "bcryptjs": "^3.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.515.0",
+    "cmdk": "^1.1.1",
-    "next": "15.4.0-canary.96",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.523.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": "^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-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",
-    "@tailwindcss/postcss": "4.1.10",
+    "@tailwindcss/postcss": "4.1.11",
     "@types/node": "22.15.33",
     "@types/react": "19.1.8",
+    "@types/react-big-calendar": "1.16.2",
     "@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",
@@ -74,9 +85,9 @@
     "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.10",
+    "tailwindcss": "4.1.11",
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tw-animate-css": "1.3.4",

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_type entity_type
-    related_entity_id   String?
+    related_entity_id   String
     message             String
     is_read             Boolean           @default(false)
     created_at          DateTime          @default(now())

src/app/(main)/events/[eventID]/page.tsx

@@ -0,0 +1,238 @@
+'use client';
+
+import React, { useState } from 'react';
+import Logo from '@/components/misc/logo';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+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, 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: eventID } = useParams<{ eventID: string }>();
+
+  // Fetch event data
+  const { data: eventData, isLoading, error } = useGetApiEventEventID(eventID);
+  const { data: userData, isLoading: userLoading } = useGetApiUserMe();
+  const deleteEvent = useDeleteApiEventEventID();
+
+  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'>
+      <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} {...user} />
+                    ))}
+                  </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 ? (
+                    <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}`}
+                      buttonText='edit'
+                      className='w-full'
+                    />
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/(main)/events/edit/[eventID]/page.tsx

@@ -0,0 +1,24 @@
+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'>
+      <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>
+  );
+}

src/app/(main)/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>
+  );
+}

src/app/(main)/events/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { RedirectButton } from '@/components/buttons/redirect-button';
+import EventListEntry from '@/components/custom-ui/event-list-entry';
+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'>
+      {/* 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}
+                {...event}
+                created_at={new Date(event.created_at)}
+                updated_at={new Date(event.updated_at)}
+              />
+            ))
+          ) : (
+            <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>
+  );
+}

src/app/(main)/home/page.tsx

@@ -1,21 +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 className='max-h-full'>
-      <div>
+      <Calendar
-        <h1>
+        userId={data?.data.user?.id}
-          Hello{' '}
+        height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
-          {isLoading ? 'Loading...' : data?.data.user?.name || 'Unknown User'}
+      />
-        </h1>
-        <RedirectButton redirectUrl='/logout' buttonText='Logout' />
-        <RedirectButton redirectUrl='/settings' buttonText='Settings' />
-      </div>
     </div>
   );
 }

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,

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,
     {

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 },
+  );
+});

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'],
+  });
+}

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 },
+  );
+});

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'],
+  });
+}

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');

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,
+          id: true,
-          reason: requestUserId === requestedUserId ? true : false,
+          reason: true,
           start_time: true,
           end_time: true,
-          is_recurring: requestUserId === requestedUserId ? true : false,
+          is_recurring: true,
-          recurrence_end_date: requestUserId === requestedUserId ? true : false,
+          recurrence_end_date: true,
-          rrule: requestUserId === requestedUserId ? true : false,
+          rrule: true,
-          created_at: requestUserId === requestedUserId ? true : false,
+          created_at: true,
-          updated_at: requestUserId === requestedUserId ? true : false,
+          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,23 +192,35 @@ export const GET = auth(async function GET(req, { params }) {
   }
 
   for (const slot of requestedUser.blockedSlots) {
-    calendar.push({
+    if (requestUserId === requestedUserId) {
-      start_time: slot.start_time,
+      calendar.push({
-      end_time: slot.end_time,
+        start_time: slot.start_time,
-      id: slot.id,
+        end_time: slot.end_time,
-      reason: slot.reason,
+        id: slot.id,
-      is_recurring: slot.is_recurring,
+        reason: slot.reason,
-      recurrence_end_date: slot.recurrence_end_date,
+        is_recurring: slot.is_recurring,
-      rrule: slot.rrule,
+        recurrence_end_date: slot.recurrence_end_date,
-      created_at: slot.created_at,
+        rrule: slot.rrule,
-      updated_at: slot.updated_at,
+        created_at: slot.created_at,
-      type:
+        updated_at: slot.updated_at,
-        requestUserId === requestedUserId ? 'blocked_owned' : 'blocked_private',
+        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, {
     success: true,
-    calendar,
+    calendar: calendar.filter(
+      (event, index, self) =>
+        self.findIndex((e) => e.id === event.id && e.type === event.type) ===
+        index,
+    ),
   });
 });

src/app/api/user/[user]/calendar/validation.ts

@@ -13,23 +13,28 @@ 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',
   });
 
-export const OwnedBlockedSlotSchema = BlockedSlotSchema.extend({
+export const OwnedBlockedSlotSchema = zod
-  id: zod.string(),
+  .object({
-  reason: zod.string().nullish(),
+    start_time: eventStartTimeSchema,
-  is_recurring: zod.boolean().default(false),
+    end_time: eventEndTimeSchema,
-  recurrence_end_date: zod.date().nullish(),
+    id: zod.string(),
-  rrule: zod.string().nullish(),
+    reason: zod.string().nullish(),
-  created_at: zod.date().nullish(),
+    is_recurring: zod.boolean().default(false),
-  updated_at: zod.date().nullish(),
+    recurrence_end_date: zod.date().nullish(),
-  type: zod.literal('blocked_owned'),
+    rrule: zod.string().nullish(),
-}).openapi('OwnedBlockedSlotSchema', {
+    created_at: zod.date().nullish(),
-  description: 'Blocked slot owned by the user',
+    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,

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',
+  }),
+);

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);
@@ -49,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;
@@ -80,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);
@@ -115,6 +126,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 +220,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);
@@ -175,11 +242,23 @@
   --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);
@@ -220,8 +299,6 @@
 
   --color-accent-foreground: var(--accent-foreground);
 
-  --color-destructive: var(--destructive);
-
   --color-border: var(--border);
 
   --color-input: var(--input);
@@ -277,7 +354,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);
@@ -297,11 +374,23 @@
   --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);
 
   /* ------------------- */
@@ -326,8 +415,6 @@
 
   --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%);

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
+        <SessionProvider>
-          attribute='class'
+          <ThemeProvider
-          defaultTheme='system'
+            attribute='class'
-          enableSystem
+            defaultTheme='system'
-          disableTransitionOnChange
+            enableSystem
-        >
+            disableTransitionOnChange
-          <QueryProvider>{children}</QueryProvider>
+          >
-        </ThemeProvider>
+            <QueryProvider>{children}</QueryProvider>
+          </ThemeProvider>
+        </SessionProvider>
+        <Toaster />
       </body>
     </html>
   );

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>

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>

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';

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>
   );
 }

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>
   );
 }

src/components/calendar.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+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';
+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: {
+    dow: 1,
+    doy: 4,
+  },
+});
+
+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,
+  height,
+}: {
+  userId?: string;
+  height: 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} height={height} />
+          ) : (
+            <CalendarWithoutUserEvents height={height} />
+          )}
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+}
+
+function CalendarWithUserEvents({
+  userId,
+  height,
+}: {
+  userId: string;
+  height: 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, 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,
+      },
+    },
+  );
+
+  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}
+      culture='de-DE'
+      defaultView='week'
+      components={{
+        toolbar: CustomToolbar,
+      }}
+      style={{
+        height: height,
+      }}
+      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),
+          type: event.type,
+        })) ?? []
+      }
+      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;
+        if (droppedEvent.type === 'blocked_private') return;
+        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;
+        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,
+            data: {
+              start_time: startISO,
+              end_time: endISO,
+            },
+          },
+          {
+            onSuccess: () => {
+              refetch();
+            },
+            onError: (error) => {
+              console.error('Error resizing event:', error);
+            },
+          },
+        );
+      }}
+    />
+  );
+}
+
+function CalendarWithoutUserEvents({ height }: { height: string }) {
+  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'
+      style={{
+        height: height,
+      }}
+      components={{
+        toolbar: CustomToolbar,
+      }}
+      onView={setCurrentView}
+      view={currentView}
+      date={currentDate}
+      onNavigate={(date) => {
+        setCurrentDate(date);
+      }}
+    />
+  );
+}

src/components/custom-toolbar.css

@@ -0,0 +1,114 @@
+/* Container der Toolbar */
+.custom-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  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;
+}
+
+/* Anzeige des aktuellen Datums (Monat und Jahr) */
+.custom-toolbar .current-date {
+  font-weight: bold;
+  font-size: 12px;
+  text-align: center;
+  color: #ffffff;
+  background-color: #717171;
+  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;
+  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-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,
+.view-switcher {
+  background-color: #717171;
+  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;
+}
+
+.view-change,
+.right-section {
+  background-color: #717171;
+  height: 48px;
+  padding: 0 8px;
+  border-radius: 11px;
+  justify-items: center;
+}
+
+.right-section .datepicker-box {
+  color: #000000;
+  background-color: #c6c6c6;
+  height: 36px;
+  border-radius: 11px;
+  font-size: 12px;
+  align-self: center;
+}
+
+.datepicker {
+  text-align: center;
+  height: 30px;
+}
+
+.datepicker-box {
+  z-index: 5;
+}

src/components/custom-toolbar.tsx

@@ -0,0 +1,260 @@
+import React, { useState, useEffect } from 'react';
+import './custom-toolbar.css';
+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' | 'work_week';
+
+  onNavigate: (action: NavigateAction, newDate?: Date) => void;
+  //Ansichtwechsel
+  onView: (newView: 'month' | 'week' | 'day' | 'agenda' | 'work_week') => void;
+}
+
+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,
+    );
+    return weekNo;
+  };
+
+  //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();
+  };
+
+  //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;
+  };
+
+  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) {
+      //1. Januar gehört zur ersten ISO-Woche (Montag dieser Woche bestimmen)
+      firstMonday = new Date(year, 0, 1 - isoDayOfWeek + 1);
+    } else {
+      //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)
+  const [selectedWeek, setSelectedWeek] = useState<number>(getISOWeek(date));
+  const [selectedYear, setSelectedYear] = useState<number>(
+    getISOWeekYear(date),
+  );
+
+  //Auswahl aktualisieren, wenn sich die Prop "date" ändert
+  useEffect(() => {
+    setSelectedWeek(getISOWeek(date));
+    setSelectedYear(getISOWeekYear(date));
+  }, [date]);
+
+  //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);
+
+  //Ansichtwechsel
+  const handleViewChange = (newView: 'month' | 'week' | 'day' | 'agenda') => {
+    onView(newView);
+  };
+
+  //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);
+  };
+
+  //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);
+    }
+    //Datum im DatePicker aktualisieren
+    setSelectedDate(newDate);
+    onNavigate('DATE', newDate);
+  };
+
+  //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);
+    }
+    //Datum im DatePicker aktualisieren
+    setSelectedDate(newDate);
+    onNavigate('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('DATE', newDate);
+      } else if (view === 'day') {
+        onNavigate('DATE', date);
+      } else if (view === 'month') {
+        const newDate = new Date(date.getFullYear(), date.getMonth(), 1);
+        onNavigate('DATE', newDate);
+      } else if (view === 'agenda') {
+        onNavigate('DATE', date);
+      }
+    }
+  };
+
+  return (
+    <div
+      className='custom-toolbar'
+      style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}
+    >
+      <div className='view-change'>
+        <div className='view-switcher' style={{ display: 'flex', gap: '8px' }}>
+          <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' }}
+      >
+        <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'>
+            <Button
+              //className='hover:bg-orange-600 hover:text-white'
+              type='submit'
+              variant='secondary'
+              onClick={() => handleToday()}
+              size={'default'}
+            >
+              Today
+            </Button>
+          </div>
+        </div>
+
+        <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>
+  );
+};
+
+export default CustomToolbar;

src/components/custom-ui/event-list-entry.tsx

@@ -0,0 +1,68 @@
+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 = zod.output<typeof EventSchema>;
+
+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>
+  );
+}

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>
-
+      {variantSize === 'textarea' ? (
-      <Input
+        <Textarea
-        type={type}
+          placeholder={placeholder}
-        placeholder={placeholder}
+          defaultValue={value}
-        defaultValue={value}
+          id={name}
-        id={name}
+          name={name}
-        name={name}
+          rows={3}
-        autoComplete={autocomplete}
+        />
-        {...rest}
+      ) : (
-      />
+        <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>
   );

src/components/custom-ui/participant-list-entry.tsx

@@ -0,0 +1,26 @@
+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';
+import zod from 'zod/v4';
+import { ParticipantSchema } from '@/app/api/event/[eventID]/participant/validation';
+
+type ParticipantListEntryProps = zod.output<typeof ParticipantSchema>;
+
+export default function ParticipantListEntry({
+  user,
+}: ParticipantListEntryProps) {
+  const { resolvedTheme } = useTheme();
+  const defaultImage =
+    resolvedTheme === 'dark' ? user_default_dark : user_default_light;
+
+  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>{user.name}</span>
+    </div>
+  );
+}

src/components/forms/event-form.tsx

@@ -0,0 +1,343 @@
+'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';
+
+import zod from 'zod/v4';
+import { PublicUserSchema } from '@/app/api/user/validation';
+
+type User = zod.output<typeof PublicUserSchema>;
+
+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) => u.user) || []);
+    } 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}
+                  user={user}
+                  status='PENDING'
+                />
+              ))}
+            </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;

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';
-
+import {
-const items = [
+  useGetApiNotifications,
-  {
+  usePatchApiNotificationsNotification,
-    title: 'Calendar',
+} from '@/generated/api/notifications/notifications';
-    url: '#',
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-    icon: Inbox,
+import { cn } from '@/lib/utils';
-  },
+import { Button } from '@/components/ui/button';
-  {
+import { useRouter } from 'next/navigation';
-    title: 'Friends',
-    url: '#',
-    icon: BellRing,
-  },
-];
 
 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,20 +38,89 @@ export default function Header({
         <span className='flex justify-center'>Search</span>
         <span className='flex gap-1 justify-end'>
           <ThemePicker />
-          {items.map((item) => (
+          <NotificationButton
-            <NotificationButton
+            variant='outline_primary'
-              key={item.title}
+            dotVariant={
-              variant='outline_primary'
+              !notificationsLoading && notifications?.data.unread_count
-              dotVariant='hidden'
+                ? 'active'
-              size='icon'
+                : notifications?.data.notifications.length
-            >
+                  ? 'neutral'
-              <item.icon />
+                  : 'hidden'
-            </NotificationButton>
+            }
-          ))}
+            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>
-      <main>{children}</main>
+      <main className='max-h-full overflow-y-auto p-5'>{children}</main>
     </div>
   );
 }

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}`,
     );
   }
 

src/components/misc/toast-inner.tsx

@@ -0,0 +1,162 @@
+/*
+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-toaster-default-bg',
+    defaultIcon: 'Info',
+  },
+  success: {
+    bgColor: 'bg-toaster-success-bg',
+    defaultIcon: 'CheckCircle',
+  },
+  error: {
+    bgColor: 'bg-toaster-error-bg',
+    defaultIcon: 'XCircle',
+  },
+  info: {
+    bgColor: 'bg-toaster-info-bg',
+    defaultIcon: 'Info',
+  },
+  warning: {
+    bgColor: 'bg-toaster-warning-bg',
+    defaultIcon: 'AlertTriangle',
+  },
+  notification: {
+    bgColor: 'bg-toaster-notification-bg',
+    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 className='text-text-alt' size={40} />
+          </div>
+        )}
+
+        {/* Text Content */}
+        <div className='grid gap-1'>
+          <h6 className='text-text-alt'>{title}</h6>
+          {description && (
+            <Label className='text-text-alt'>{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>
+  );
+};

src/components/misc/user-dropdown.tsx

@@ -41,11 +41,13 @@ export default function UserDropdown() {
           <UserCard />
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <Link href='/settings'>
-        <DropdownMenuSeparator />
+          <DropdownMenuItem>Settings</DropdownMenuItem>
-        <DropdownMenuItem>
+          <DropdownMenuSeparator />
-          <Link href='/logout'>Logout</Link>
+        </Link>
-        </DropdownMenuItem>
+        <Link href='/logout'>
+          <DropdownMenuItem>Logout</DropdownMenuItem>
+        </Link>
       </DropdownMenuContent>
     </DropdownMenu>
   );

src/components/misc/user-search.tsx

@@ -0,0 +1,95 @@
+'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';
+import zod from 'zod/v4';
+import { PublicUserSchema } from '@/app/api/user/validation';
+
+type User = zod.output<typeof PublicUserSchema>;
+
+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>
+  );
+}

src/components/react-big-calendar.css

@@ -0,0 +1,930 @@
+@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,
+.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 {
+  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%;
+  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-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%;
+  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;
+  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 */

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>
+  );
+}

src/components/ui/button.tsx

@@ -21,8 +21,13 @@ 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',
+        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',

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 };

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 */

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,
+};

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,
+};

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 };

src/components/ui/label.tsx

@@ -5,16 +5,21 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 
 import { cn } from '@/lib/utils';
 
-function Label({
+type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root> & {
-  className,
+  size?: 'default' | 'small' | 'large';
-  ...props
+};
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+
+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 */

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 };

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 };