feat: tempcommit

- Added `SettingsDropdown` component for selecting settings sections with icons and descriptions.
- Created `SettingsPage` component to manage user settings, including account details, notifications, calendar availability, privacy, and appearance.
- Introduced `SettingsSwitcher` for selecting options within settings.
- Integrated command and dialog components for improved user interaction.
- Updated `UserDropdown` to include links for settings and logout.
- Refactored button styles and card footer layout for consistency.
- Added popover functionality for dropdown menus.
- Updated dependencies in `yarn.lock` for new components.

.env.test

@@ -1,6 +0,0 @@
-AUTH_SECRET="auth_secret"
-AUTH_URL="http://127.0.0.1:3000"
-HOSTNAME="127.0.0.1"
-DATABASE_URL="file:/tmp/dev.db"
-AUTH_AUTHENTIK_ID="id"
-AUTH_AUTHENTIK_ISSUER="issuer"

.github/workflows/tests.yml

@@ -1,34 +0,0 @@
-name: tests
-on:
-  push:
-    branches:
-      - main
-      - renovate/*
-  pull_request:
-jobs:
-  tests:
-    name: Tests
-    runs-on: docker
-    container:
-      image: cypress/browsers:latest@sha256:9daea41366dfd1b72496bf3e8295eda215a6990c2dbe4f9ff4b8ba47342864fb
-      options: --user 1001
-    steps:
-      - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
-
-      - name: Enable corepack
-        run: corepack enable
-
-      - name: Cypress run (e2e)
-        uses: https://github.com/cypress-io/github-action@v6
-        with:
-          build: yarn cypress:build
-          start: yarn cypress:start_server
-          e2e: true
-          wait-on: 'http://127.0.0.1:3000'
-
-      - name: Cypress run (component)
-        uses: https://github.com/cypress-io/github-action@v6
-        with:
-          component: true
-          install: false

.gitignore

@@ -33,7 +33,6 @@ yarn-error.log*
 # env files (can opt-in for committing if needed)
 .env*
 !.env.example
-!.env.test
 
 # vercel
 .vercel
@@ -46,8 +45,3 @@ next-env.d.ts
 /prisma/*.db*
 src/generated/*
 data
-
-# cypress
-cypress/videos
-cypress/screenshots
-cypress/coverage

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22-alpine@sha256:5340cbfc2df14331ab021555fdd9f83f072ce811488e705b0e736b11adeec4bb AS base
+FROM node:22-alpine@sha256:41e4389f3d988d2ed55392df4db1420ad048ae53324a8e2b7c6d19508288107e AS base
 
 # ----- Dependencies -----
 FROM base AS deps

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:22-alpine@sha256:5340cbfc2df14331ab021555fdd9f83f072ce811488e705b0e736b11adeec4bb
+FROM node:22-alpine@sha256:41e4389f3d988d2ed55392df4db1420ad048ae53324a8e2b7c6d19508288107e
 
 WORKDIR /app
 

README.md

@@ -66,6 +66,7 @@ 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
@@ -96,6 +97,7 @@ 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

cypress.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'cypress';
-
-export default defineConfig({
-  component: {
-    devServer: {
-      framework: 'next',
-      bundler: 'webpack',
-    },
-  },
-
-  e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
-  },
-});

cypress/e2e/auth-user.ts

@@ -1,12 +0,0 @@
-export default function authUser() {
-  cy.visit('http://127.0.0.1:3000/login');
-  cy.getBySel('login-header').should('exist');
-  cy.getBySel('login-form').should('exist');
-  cy.getBySel('email-input').should('exist');
-  cy.getBySel('password-input').should('exist');
-  cy.getBySel('login-button').should('exist');
-  cy.getBySel('email-input').type('cypress@example.com');
-  cy.getBySel('password-input').type('Password123!');
-  cy.getBySel('login-button').click();
-  cy.url().should('include', '/home');
-}

cypress/e2e/event-create.cy.ts

@@ -1,9 +0,0 @@
-import authUser from './auth-user';
-
-describe('event creation', () => {
-  it('loads', () => {
-    authUser();
-
-    // cy.visit('http://127.0.0.1:3000/events/new'); // TODO: Add event creation tests
-  });
-});

cypress/e2e/login.cy.ts

@@ -1,45 +0,0 @@
-describe('login and register', () => {
-  it('loads', () => {
-    cy.visit('http://127.0.0.1:3000/');
-
-    cy.getBySel('login-header').should('exist');
-  });
-
-  it('shows register form', () => {
-    cy.visit('http://127.0.0.1:3000/');
-
-    cy.getBySel('register-switch').click();
-
-    cy.getBySel('register-form').should('exist');
-    cy.getBySel('first-name-input').should('exist');
-    cy.getBySel('last-name-input').should('exist');
-    cy.getBySel('email-input').should('exist');
-    cy.getBySel('username-input').should('exist');
-    cy.getBySel('password-input').should('exist');
-    cy.getBySel('confirm-password-input').should('exist');
-    cy.getBySel('register-button').should('exist');
-  });
-
-  it('allows to register', async () => {
-    cy.visit('http://127.0.0.1:3000/');
-
-    cy.getBySel('register-switch').click();
-
-    cy.getBySel('first-name-input').type('Test');
-    cy.getBySel('last-name-input').type('User');
-    cy.getBySel('email-input').type('test@example.com');
-    cy.getBySel('username-input').type('testuser');
-    cy.getBySel('password-input').type('Password123!');
-    cy.getBySel('confirm-password-input').type('Password123!');
-    cy.getBySel('register-button').click();
-    cy.getBySel('login-header').should('exist');
-    cy.getBySel('login-form').should('exist');
-    cy.getBySel('email-input').should('exist');
-    cy.getBySel('password-input').should('exist');
-    cy.getBySel('login-button').should('exist');
-    cy.getBySel('email-input').type('test@example.com');
-    cy.getBySel('password-input').type('Password123!');
-    cy.getBySel('login-button').click();
-    cy.url().should('include', '/home');
-  });
-});

cypress/e2e/seed.ts

@@ -1,29 +0,0 @@
-import { PrismaClient } from '../../src/generated/prisma';
-
-const prisma = new PrismaClient();
-
-export default async function requireUser() {
-  await prisma.$transaction(async (tx) => {
-    const { id } = await tx.user.create({
-      data: {
-        email: 'cypress@example.com',
-        name: 'cypress',
-        password_hash:
-          '$2a$10$FmkVRHXzMb63dLHHwG1mDOepZJirL.U964wU/3Xr7cFis8XdRh8sO',
-        first_name: 'Cypress',
-        last_name: 'Tester',
-        emailVerified: new Date(),
-      },
-    });
-
-    await tx.account.create({
-      data: {
-        userId: id,
-        type: 'credentials',
-        provider: 'credentials',
-        providerAccountId: id,
-      },
-    });
-  });
-}
-requireUser();

cypress/support/commands.ts

@@ -1,62 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
-
-Cypress.Commands.add('getBySel', (selector, ...args) => {
-  return cy.get(`[data-cy=${selector}]`, ...args);
-});
-
-Cypress.Commands.add('getBySelLike', (selector, ...args) => {
-  return cy.get(`[data-cy*=${selector}]`, ...args);
-});
-
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      getBySel(
-        selector: string,
-        ...args: any[]
-      ): Chainable<JQuery<HTMLElement>>;
-      getBySelLike(
-        selector: string,
-        ...args: any[]
-      ): Chainable<JQuery<HTMLElement>>;
-    }
-  }
-}
-
-export {};

cypress/support/component-index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>Components App</title>
-    <!-- Used by Next.js to inject CSS. -->
-    <div id="__next_css__DO_NOT_USE__"></div>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>

cypress/support/component.ts

@@ -1,38 +0,0 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-import '@/app/globals.css';
-
-// Import commands.js using ES2015 syntax:
-import './commands';
-
-import { mount } from 'cypress/react';
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount;
-    }
-  }
-}
-
-Cypress.Commands.add('mount', mount);
-
-// Example use:
-// cy.mount(<MyComponent />)

cypress/support/e2e.ts

@@ -1,17 +0,0 @@
-// ***********************************************************
-// This example support/e2e.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands';

exportSwagger.ts

@@ -22,15 +22,16 @@ async function exportSwagger() {
   );
 
   await Promise.all(
-    filesToImport.map(async (file) => {
+    filesToImport.map((file) => {
-      try {
+      return import(file)
-        const moduleImp = await import(file);
+        .then((module) => {
-        if (moduleImp.default) {
+          if (module.default) {
-          moduleImp.default(registry);
+            module.default(registry);
           }
-      } catch (error) {
+        })
+        .catch((error) => {
           console.error(`Error importing ${file}:`, error);
-      }
+        });
     }),
   );
 

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "prettier --check . && next build",
-    "start": "node .next/standalone/server.js",
+    "start": "next start",
     "lint": "next lint",
     "format": "prettier --write .",
     "prisma:migrate": "dotenv -e .env.local -- prisma migrate dev",
@@ -15,11 +15,7 @@
     "prisma:migrate:reset": "dotenv -e .env.local -- prisma migrate reset",
     "dev_container": "docker compose -f docker-compose.dev.yml up --watch --build",
     "swagger:generate": "ts-node -r tsconfig-paths/register exportSwagger.ts",
-    "orval:generate": "orval",
+    "orval:generate": "orval"
-    "cypress:build": "rm -rf /tmp/dev.db && DATABASE_URL=\"file:/tmp/dev.db\" yarn prisma:generate && yarn swagger:generate && yarn orval:generate && DATABASE_URL=\"file:/tmp/dev.db\" yarn prisma:db:push && prettier --check . && NODE_ENV=test next build",
-    "cypress:start_server": "DATABASE_URL=\"file:/tmp/dev.db\" ts-node cypress/e2e/seed.ts && cp .env.test .next/standalone && cp public .next/standalone/ -r && cp .next/static/ .next/standalone/.next/ -r && NODE_ENV=test HOSTNAME=\"0.0.0.0\" dotenv -e .env.test -- node .next/standalone/server.js",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run"
   },
   "dependencies": {
     "@asteasolutions/zod-to-openapi": "^8.0.0-beta.4",
@@ -38,7 +34,7 @@
     "@radix-ui/react-hover-card": "^1.1.13",
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-scroll-area": "^1.2.8",
     "@radix-ui/react-select": "^2.2.4",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
@@ -50,44 +46,34 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
+    "lucide-react": "^0.515.0",
-    "lucide-react": "^0.523.0",
+    "next": "15.4.0-canary.92",
-    "next": "15.3.4",
     "next-auth": "^5.0.0-beta.25",
-    "next-swagger-doc": "^0.4.1",
     "next-themes": "^0.4.6",
-    "react": "^19.1.0",
+    "react": "^19.0.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.11",
+    "@tailwindcss/postcss": "4.1.10",
-    "@types/node": "22.15.33",
+    "@types/node": "22.15.32",
     "@types/react": "19.1.8",
-    "@types/react-big-calendar": "1.16.2",
     "@types/react-dom": "19.1.6",
-    "@types/swagger-ui-react": "5.18.0",
+    "@types/swagger-ui-react": "5",
     "@types/webpack-env": "1.18.8",
-    "cypress": "14.5.0",
     "dotenv-cli": "8.0.0",
     "eslint": "9.29.0",
     "eslint-config-next": "15.3.4",
     "eslint-config-prettier": "10.1.5",
     "orval": "7.10.0",
     "postcss": "8.5.6",
-    "prettier": "3.6.2",
+    "prettier": "3.5.3",
     "prisma": "6.10.1",
-    "tailwindcss": "4.1.11",
+    "tailwindcss": "4.1.10",
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tw-animate-css": "1.3.4",

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

@@ -1,238 +0,0 @@
-'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

@@ -1,24 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,54 +0,0 @@
-'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,17 +1,21 @@
 'use client';
 
-import Calendar from '@/components/calendar';
+import { RedirectButton } from '@/components/buttons/redirect-button';
 import { useGetApiUserMe } from '@/generated/api/user/user';
 
 export default function Home() {
-  const { data } = useGetApiUserMe();
+  const { data, isLoading } = useGetApiUserMe();
 
   return (
-    <div className='max-h-full'>
+    <div className='flex flex-col items-center justify-center h-full'>
-      <Calendar
+      <div>
-        userId={data?.data.user?.id}
+        <h1>
-        height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
+          Hello{' '}
-      />
+          {isLoading ? 'Loading...' : data?.data.user?.name || 'Unknown User'}
+        </h1>
+        <RedirectButton redirectUrl='/logout' buttonText='Logout' />
+        <RedirectButton redirectUrl='/settings' buttonText='Settings' />
+      </div>
     </div>
   );
 }

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

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

@@ -13,16 +13,12 @@ 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 = zod
+export const OwnedBlockedSlotSchema = BlockedSlotSchema.extend({
-  .object({
-    start_time: eventStartTimeSchema,
-    end_time: eventEndTimeSchema,
   id: zod.string(),
   reason: zod.string().nullish(),
   is_recurring: zod.boolean().default(false),
@@ -31,10 +27,9 @@ export const OwnedBlockedSlotSchema = zod
   created_at: zod.date().nullish(),
   updated_at: zod.date().nullish(),
   type: zod.literal('blocked_owned'),
-  })
+}).openapi('OwnedBlockedSlotSchema', {
-  .openapi('OwnedBlockedSlotSchema', {
   description: 'Blocked slot owned by the user',
-  });
+});
 
 export const VisibleSlotSchema = EventSchema.omit({
   organizer: true,

src/app/api/user/me/password/route.ts

@@ -1,122 +0,0 @@
-import { auth } from '@/auth';
-import { prisma } from '@/prisma';
-import { updateUserPasswordServerSchema } from '../validation';
-import {
-  returnZodTypeCheckedResponse,
-  userAuthenticated,
-} from '@/lib/apiHelpers';
-import { FullUserResponseSchema } from '../../validation';
-import {
-  ErrorResponseSchema,
-  ZodErrorResponseSchema,
-} from '@/app/api/validation';
-import bcrypt from 'bcryptjs';
-
-export const PATCH = auth(async function PATCH(req) {
-  const authCheck = userAuthenticated(req);
-  if (!authCheck.continue)
-    return returnZodTypeCheckedResponse(
-      ErrorResponseSchema,
-      authCheck.response,
-      authCheck.metadata,
-    );
-
-  const body = await req.json();
-  const parsedBody = updateUserPasswordServerSchema.safeParse(body);
-  if (!parsedBody.success)
-    return returnZodTypeCheckedResponse(
-      ZodErrorResponseSchema,
-      {
-        success: false,
-        message: 'Invalid request data',
-        errors: parsedBody.error.issues,
-      },
-      { status: 400 },
-    );
-
-  const { current_password, new_password } = parsedBody.data;
-
-  const dbUser = await prisma.user.findUnique({
-    where: {
-      id: authCheck.user.id,
-    },
-    include: {
-      accounts: true,
-    },
-  });
-
-  if (!dbUser)
-    return returnZodTypeCheckedResponse(
-      ErrorResponseSchema,
-      {
-        success: false,
-        message: 'User not found',
-      },
-      { status: 404 },
-    );
-
-  if (!dbUser.password_hash)
-    return returnZodTypeCheckedResponse(
-      ErrorResponseSchema,
-      {
-        success: false,
-        message: 'User does not have a password set',
-      },
-      { status: 400 },
-    );
-
-  if (
-    dbUser.accounts.length === 0 ||
-    dbUser.accounts[0].provider !== 'credentials'
-  )
-    return returnZodTypeCheckedResponse(
-      ErrorResponseSchema,
-      {
-        success: false,
-        message: 'Credentials login is not enabled for this user',
-      },
-      { status: 400 },
-    );
-
-  const isCurrentPasswordValid = await bcrypt.compare(
-    current_password,
-    dbUser.password_hash || '',
-  );
-
-  if (!isCurrentPasswordValid)
-    return returnZodTypeCheckedResponse(
-      ErrorResponseSchema,
-      {
-        success: false,
-        message: 'Current password is incorrect',
-      },
-      { status: 401 },
-    );
-
-  const hashedNewPassword = await bcrypt.hash(new_password, 10);
-
-  const updatedUser = await prisma.user.update({
-    where: {
-      id: dbUser.id,
-    },
-    data: {
-      password_hash: hashedNewPassword,
-    },
-    select: {
-      id: true,
-      name: true,
-      first_name: true,
-      last_name: true,
-      email: true,
-      image: true,
-      timezone: true,
-      created_at: true,
-      updated_at: true,
-    },
-  });
-
-  return returnZodTypeCheckedResponse(FullUserResponseSchema, {
-    success: true,
-    user: updatedUser,
-  });
-});

src/app/api/user/me/password/swagger.ts

@@ -1,43 +0,0 @@
-import { OpenAPIRegistry } from '@asteasolutions/zod-to-openapi';
-import { FullUserResponseSchema } from '../../validation';
-import { updateUserPasswordServerSchema } from '../validation';
-import {
-  invalidRequestDataResponse,
-  notAuthenticatedResponse,
-  serverReturnedDataValidationErrorResponse,
-  userNotFoundResponse,
-} from '@/lib/defaultApiResponses';
-
-export default function registerSwaggerPaths(registry: OpenAPIRegistry) {
-  registry.registerPath({
-    method: 'patch',
-    path: '/api/user/me/password',
-    description: 'Update the password of the currently authenticated user',
-    request: {
-      body: {
-        description: 'User password update request body',
-        required: true,
-        content: {
-          'application/json': {
-            schema: updateUserPasswordServerSchema,
-          },
-        },
-      },
-    },
-    responses: {
-      200: {
-        description: 'User information updated successfully',
-        content: {
-          'application/json': {
-            schema: FullUserResponseSchema,
-          },
-        },
-      },
-      ...invalidRequestDataResponse,
-      ...notAuthenticatedResponse,
-      ...userNotFoundResponse,
-      ...serverReturnedDataValidationErrorResponse,
-    },
-    tags: ['User'],
-  });
-}

src/app/api/user/me/route.ts

@@ -8,7 +8,6 @@ import {
 import { FullUserResponseSchema } from '../validation';
 import {
   ErrorResponseSchema,
-  SuccessResponseSchema,
   ZodErrorResponseSchema,
 } from '@/app/api/validation';
 
@@ -118,43 +117,3 @@ export const PATCH = auth(async function PATCH(req) {
     { status: 200 },
   );
 });
-
-export const DELETE = auth(async function DELETE(req) {
-  const authCheck = userAuthenticated(req);
-  if (!authCheck.continue)
-    return returnZodTypeCheckedResponse(
-      ErrorResponseSchema,
-      authCheck.response,
-      authCheck.metadata,
-    );
-
-  const dbUser = await prisma.user.findUnique({
-    where: {
-      id: authCheck.user.id,
-    },
-  });
-  if (!dbUser)
-    return returnZodTypeCheckedResponse(
-      ErrorResponseSchema,
-      {
-        success: false,
-        message: 'User not found',
-      },
-      { status: 404 },
-    );
-
-  await prisma.user.delete({
-    where: {
-      id: authCheck.user.id,
-    },
-  });
-
-  return returnZodTypeCheckedResponse(
-    SuccessResponseSchema,
-    {
-      success: true,
-      message: 'User deleted successfully',
-    },
-    { status: 200 },
-  );
-});

src/app/api/user/me/swagger.ts

@@ -7,7 +7,6 @@ import {
   serverReturnedDataValidationErrorResponse,
   userNotFoundResponse,
 } from '@/lib/defaultApiResponses';
-import { SuccessResponseSchema } from '../../validation';
 
 export default function registerSwaggerPaths(registry: OpenAPIRegistry) {
   registry.registerPath({
@@ -61,24 +60,4 @@ export default function registerSwaggerPaths(registry: OpenAPIRegistry) {
     },
     tags: ['User'],
   });
-
-  registry.registerPath({
-    method: 'delete',
-    path: '/api/user/me',
-    description: 'Delete the currently authenticated user',
-    responses: {
-      200: {
-        description: 'User deleted successfully',
-        content: {
-          'application/json': {
-            schema: SuccessResponseSchema,
-          },
-        },
-      },
-      ...notAuthenticatedResponse,
-      ...userNotFoundResponse,
-      ...serverReturnedDataValidationErrorResponse,
-    },
-    tags: ['User'],
-  });
 }

src/app/api/user/me/validation.ts

@@ -4,8 +4,6 @@ import {
   lastNameSchema,
   newUserEmailServerSchema,
   newUserNameServerSchema,
-  passwordSchema,
-  timezoneSchema,
 } from '@/app/api/user/validation';
 
 // ----------------------------------------
@@ -18,16 +16,6 @@ export const updateUserServerSchema = zod.object({
   first_name: firstNameSchema.optional(),
   last_name: lastNameSchema.optional(),
   email: newUserEmailServerSchema.optional(),
-  image: zod.url().optional(),
+  image: zod.string().optional(),
-  timezone: timezoneSchema.optional(),
+  timezone: zod.string().optional(),
 });
-
-export const updateUserPasswordServerSchema = zod
-  .object({
-    current_password: zod.string().min(1, 'Current password is required'),
-    new_password: passwordSchema,
-    confirm_new_password: passwordSchema,
-  })
-  .refine((data) => data.new_password === data.confirm_new_password, {
-    message: 'New password and confirm new password must match',
-  });

src/app/api/user/validation.ts

@@ -1,7 +1,6 @@
 import { extendZodWithOpenApi } from '@asteasolutions/zod-to-openapi';
 import { prisma } from '@/prisma';
 import zod from 'zod/v4';
-import { allTimeZones } from '@/lib/timezones';
 
 extendZodWithOpenApi(zod);
 
@@ -108,15 +107,6 @@ export const passwordSchema = zod
     'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character',
   );
 
-// ----------------------------------------
-//
-// Timezone Validation
-//
-// ----------------------------------------
-export const timezoneSchema = zod.enum(allTimeZones).openapi('Timezone', {
-  description: 'Valid timezone from the list of supported timezones',
-});
-
 // ----------------------------------------
 //
 // User Schema Validation (for API responses)
@@ -129,11 +119,8 @@ export const FullUserSchema = zod
     first_name: zod.string().nullish(),
     last_name: zod.string().nullish(),
     email: zod.email(),
-    image: zod.url().nullish(),
+    image: zod.string().nullish(),
-    timezone: zod
+    timezone: zod.string(),
-      .string()
-      .refine((i) => (allTimeZones as string[]).includes(i))
-      .nullish(),
     created_at: zod.date(),
     updated_at: zod.date(),
   })

src/app/layout.tsx

@@ -3,8 +3,6 @@ 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',
@@ -52,7 +50,6 @@ export default function RootLayout({
         <link rel='manifest' href='/site.webmanifest' />
       </head>
       <body>
-        <SessionProvider>
         <ThemeProvider
           attribute='class'
           defaultTheme='system'
@@ -61,8 +58,6 @@ export default function RootLayout({
         >
           <QueryProvider>{children}</QueryProvider>
         </ThemeProvider>
-        </SessionProvider>
-        <Toaster />
       </body>
     </html>
   );

src/app/login/page.tsx

@@ -33,10 +33,7 @@ export default async function LoginPage() {
         </div>
         <div className='mt-auto mb-auto'>
           <Card className='w-[350px] max-w-screen;'>
-            <CardHeader
+            <CardHeader className='grid place-items-center'>
-              className='grid place-items-center'
-              data-cy='login-header'
-            >
               <Logo colorType='colored' logoType='secondary'></Logo>
             </CardHeader>
             <CardContent className='gap-6 flex flex-col items-center'>
@@ -49,7 +46,6 @@ export default async function LoginPage() {
                   key={provider.id}
                   provider={provider.id}
                   providerDisplayName={provider.name}
-                  data-cy={'sso-login-button_' + provider.name.toLowerCase()}
                 />
               ))}
             </CardContent>

src/assets/usericon/default/default-user-icon_dark.svg

@@ -1,5 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,2 +0,0 @@
-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

@@ -2,6 +2,15 @@ import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
+  // DropdownMenuGroup,
+  // DropdownMenuItem,
+  // DropdownMenuLabel,
+  // DropdownMenuPortal,
+  // DropdownMenuSeparator,
+  // DropdownMenuShortcut,
+  // DropdownMenuSub,
+  // DropdownMenuSubContent,
+  // DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { NDot, NotificationDot } from '@/components/misc/notification-dot';

src/components/buttons/redirect-button.tsx

@@ -1,18 +1,16 @@
-import { Button } from '@/components/ui/button';
+import { Button } from '../ui/button';
 import Link from 'next/link';
 
 export function RedirectButton({
   redirectUrl,
   buttonText,
-  className,
 }: {
   redirectUrl: string;
   buttonText: string;
-  className?: string;
 }) {
   return (
     <Link href={redirectUrl}>
-      <Button className={className}>{buttonText}</Button>
+      <Button>{buttonText}</Button>
     </Link>
   );
 }

src/components/buttons/sso-login-button.tsx

@@ -5,11 +5,10 @@ import { faOpenid } from '@fortawesome/free-brands-svg-icons';
 export default function SSOLogin({
   provider,
   providerDisplayName,
-  ...props
 }: {
   provider: string;
   providerDisplayName: string;
-} & React.HTMLAttributes<HTMLButtonElement>) {
+}) {
   return (
     <form
       className='flex flex-col items-center w-full'
@@ -23,7 +22,6 @@ export default function SSOLogin({
         type='submit'
         variant='secondary'
         icon={faOpenid}
-        {...props}
       >
         Login with {providerDisplayName}
       </IconButton>

src/components/calendar.tsx

@@ -1,256 +0,0 @@
-'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

@@ -1,114 +0,0 @@
-/* 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

@@ -1,260 +0,0 @@
-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/app-sidebar.tsx

@@ -6,12 +6,26 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
+  // SidebarGroupAction,
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarHeader,
+  // SidebarInput,
+  // SidebarInset,
   SidebarMenu,
+  // SidebarMenuAction,
+  // SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
+  // SidebarMenuSkeleton,
+  // SidebarMenuSub,
+  // SidebarMenuSubButton,
+  // SidebarMenuSubItem,
+  // SidebarProvider,
+  // SidebarRail,
+  // SidebarSeparator,
+  // SidebarTrigger,
+  // useSidebar,
 } from '@/components/custom-ui/sidebar';
 
 import { ChevronDown } from 'lucide-react';

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

@@ -1,68 +0,0 @@
-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,9 +1,8 @@
-import { Input, Textarea } from '@/components/ui/input';
+import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import React from 'react';
 import { Button } from '../ui/button';
 import { Eye, EyeOff } from 'lucide-react';
-import { cn } from '@/lib/utils';
 
 export default function LabeledInput({
   type,
@@ -11,7 +10,6 @@ export default function LabeledInput({
   placeholder,
   value,
   name,
-  variantSize = 'default',
   autocomplete,
   error,
   ...rest
@@ -21,7 +19,6 @@ export default function LabeledInput({
   placeholder?: string;
   value?: string;
   name?: string;
-  variantSize?: 'default' | 'big' | 'textarea';
   autocomplete?: string;
   error?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>) {
@@ -30,23 +27,9 @@ export default function LabeledInput({
   return (
     <div className='grid grid-cols-1 gap-1'>
       <Label htmlFor={name}>{label}</Label>
-      {variantSize === 'textarea' ? (
-        <Textarea
-          placeholder={placeholder}
-          defaultValue={value}
-          id={name}
-          name={name}
-          rows={3}
-        />
-      ) : (
       <span className='relative'>
         <Input
-            className={cn(
+          className={type === 'password' ? 'pr-[50px]' : ''}
-              type === 'password' ? 'pr-[50px]' : '',
-              variantSize === 'big'
-                ? 'h-12 file:h-10 text-lg gplaceholder:text-lg sm:text-2xl sm:placeholder:text-2xl'
-                : '',
-            )}
           type={passwordVisible ? 'text' : type}
           placeholder={placeholder}
           defaultValue={value}
@@ -55,7 +38,6 @@ export default function LabeledInput({
           autoComplete={autocomplete}
           {...rest}
         />
-
         {type === 'password' && (
           <Button
             className='absolute right-0 top-0 w-[36px] h-[36px]'
@@ -67,8 +49,6 @@ export default function LabeledInput({
           </Button>
         )}
       </span>
-      )}
-
       {error && <p className='text-red-500 text-sm mt-1'>{error}</p>}
     </div>
   );

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

@@ -1,26 +0,0 @@
-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

@@ -1,343 +0,0 @@
-'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/forms/login-form.tsx

@@ -48,18 +48,13 @@ function LoginFormElement({
   });
 
   return (
-    <form
+    <form className='flex flex-col gap-5 w-full' onSubmit={onSubmit}>
-      className='flex flex-col gap-5 w-full'
-      onSubmit={onSubmit}
-      data-cy='login-form'
-    >
       <LabeledInput
         type='text'
         label='E-Mail or Username'
         placeholder='What you are known as'
         error={formState.errors.email?.message}
         {...register('email')}
-        data-cy='email-input'
       />
       <LabeledInput
         type='password'
@@ -67,10 +62,9 @@ function LoginFormElement({
         placeholder="Let's hope you remember it"
         error={formState.errors.password?.message}
         {...register('password')}
-        data-cy='password-input'
       />
       <div className='grid grid-rows-2 gap-2'>
-        <Button type='submit' variant='primary' data-cy='login-button'>
+        <Button type='submit' variant='primary'>
           Login
         </Button>
         <Button
@@ -80,7 +74,6 @@ function LoginFormElement({
             formRef?.current?.reset();
             setIsSignUp((v) => !v);
           }}
-          data-cy='register-switch'
         >
           Sign Up
         </Button>
@@ -136,7 +129,6 @@ function RegisterFormElement({
       ref={formRef}
       className='flex flex-col gap-5 w-full'
       onSubmit={onSubmit}
-      data-cy='register-form'
     >
       <LabeledInput
         type='text'
@@ -145,7 +137,6 @@ function RegisterFormElement({
         autocomplete='given-name'
         error={formState.errors.firstName?.message}
         {...register('firstName')}
-        data-cy='first-name-input'
       />
       <LabeledInput
         type='text'
@@ -154,7 +145,6 @@ function RegisterFormElement({
         autocomplete='family-name'
         error={formState.errors.lastName?.message}
         {...register('lastName')}
-        data-cy='last-name-input'
       />
       <LabeledInput
         type='email'
@@ -163,7 +153,6 @@ function RegisterFormElement({
         autocomplete='email'
         error={formState.errors.email?.message}
         {...register('email')}
-        data-cy='email-input'
       />
       <LabeledInput
         type='text'
@@ -172,7 +161,6 @@ function RegisterFormElement({
         autocomplete='username'
         error={formState.errors.username?.message}
         {...register('username')}
-        data-cy='username-input'
       />
       <LabeledInput
         type='password'
@@ -181,7 +169,6 @@ function RegisterFormElement({
         autocomplete='new-password'
         error={formState.errors.password?.message}
         {...register('password')}
-        data-cy='password-input'
       />
       <LabeledInput
         type='password'
@@ -190,10 +177,9 @@ function RegisterFormElement({
         autocomplete='new-password'
         error={formState.errors.confirmPassword?.message}
         {...register('confirmPassword')}
-        data-cy='confirm-password-input'
       />
       <div className='grid grid-rows-2 gap-2'>
-        <Button type='submit' variant='primary' data-cy='register-button'>
+        <Button type='submit' variant='primary'>
           Sign Up
         </Button>
         <Button

src/components/misc/header.tsx

@@ -45,7 +45,7 @@ export default function Header({
           <UserDropdown />
         </span>
       </header>
-      <main className='max-h-full overflow-y-auto p-5'>{children}</main>
+      <main>{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' or 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
+      `Logo: 'width' and 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
     );
   }
 

src/components/misc/theme-picker.cy.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { ThemePicker } from '@/components/misc/theme-picker';
-import { ThemeProvider } from '@/components/wrappers/theme-provider';
-
-describe('<ThemePicker />', () => {
-  it('renders', () => {
-    cy.mount(<ThemePicker />);
-  });
-
-  it('toggle open and close', () => {
-    cy.mount(<ThemePicker />);
-    cy.getBySel('theme-picker').click();
-    cy.getBySel('theme-picker-content').should('exist');
-    cy.get('html').click();
-    cy.getBySel('theme-picker-content').should('not.exist');
-  });
-
-  it('enable dark mode', () => {
-    cy.mount(
-      <ThemeProvider>
-        <ThemePicker />
-      </ThemeProvider>,
-    );
-
-    cy.getBySel('theme-picker').click();
-    cy.getBySel('dark-theme').click();
-    cy.get('html').should('have.attr', 'data-theme', 'dark');
-  });
-
-  it('enable light mode', () => {
-    cy.mount(
-      <ThemeProvider>
-        <ThemePicker />
-      </ThemeProvider>,
-    );
-
-    cy.getBySel('theme-picker').click();
-    cy.getBySel('light-theme').click();
-    cy.get('html').should('have.attr', 'data-theme', 'light');
-  });
-});

src/components/misc/theme-picker.tsx

@@ -18,26 +18,20 @@ export function ThemePicker() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='outline_primary' size='icon' data-cy='theme-picker'>
+        <Button variant='outline_primary' size='icon'>
           <Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
           <Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
           <span className='sr-only'>Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='end' data-cy='theme-picker-content'>
+      <DropdownMenuContent align='end'>
-        <DropdownMenuItem
+        <DropdownMenuItem onClick={() => setTheme('light')}>
-          onClick={() => setTheme('light')}
-          data-cy='light-theme'
-        >
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')} data-cy='dark-theme'>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem
+        <DropdownMenuItem onClick={() => setTheme('system')}>
-          onClick={() => setTheme('system')}
-          data-cy='system-theme'
-        >
           System
         </DropdownMenuItem>
       </DropdownMenuContent>

src/components/misc/toast-inner.tsx

@@ -1,162 +0,0 @@
-/*
-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

@@ -5,8 +5,15 @@ import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
+  // DropdownMenuGroup,
   DropdownMenuItem,
+  // DropdownMenuLabel,
+  // DropdownMenuPortal,
   DropdownMenuSeparator,
+  // DropdownMenuShortcut,
+  // DropdownMenuSub,
+  // DropdownMenuSubContent,
+  // DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useGetApiUserMe } from '@/generated/api/user/user';

src/components/misc/user-search.tsx

@@ -1,95 +0,0 @@
-'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

@@ -1,930 +0,0 @@
-@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

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

@@ -1,213 +0,0 @@
-'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-[4px_4px_9px_9px_rgba(0,0,0,0.25)]',
+        'shadow-sm',
         /* Opacity */
         '',
         /* Scaling */

src/components/ui/command.tsx

@@ -1,17 +1,17 @@
-'use client';
+"use client"
 
-import * as React from 'react';
+import * as React from "react"
-import { Command as CommandPrimitive } from 'cmdk';
+import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from 'lucide-react';
+import { SearchIcon } from "lucide-react"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
+} from "@/components/ui/dialog"
 
 function Command({
   className,
@@ -19,45 +19,45 @@ function Command({
 }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
-      data-slot='command'
+      data-slot="command"
       className={cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandDialog({
-  title = 'Command Palette',
+  title = "Command Palette",
-  description = 'Search for a command to run...',
+  description = "Search for a command to run...",
   children,
   className,
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string;
+  title?: string
-  description?: string;
+  description?: string
-  className?: string;
+  className?: string
-  showCloseButton?: boolean;
+  showCloseButton?: boolean
 }) {
   return (
     <Dialog {...props}>
-      <DialogHeader className='sr-only'>
+      <DialogHeader className="sr-only">
         <DialogTitle>{title}</DialogTitle>
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn('overflow-hidden p-0', className)}
+        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'>
+        <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({
@@ -66,20 +66,20 @@ function CommandInput({
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div
-      data-slot='command-input-wrapper'
+      data-slot="command-input-wrapper"
-      className='flex h-9 items-center gap-2 border-b px-3'
+      className="flex h-9 items-center gap-2 border-b px-3"
     >
-      <SearchIcon className='size-4 shrink-0 opacity-50' />
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input
-        data-slot='command-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',
+          "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,
+          className
         )}
         {...props}
       />
     </div>
-  );
+  )
 }
 
 function CommandList({
@@ -88,14 +88,14 @@ function CommandList({
 }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
-      data-slot='command-list'
+      data-slot="command-list"
       className={cn(
-        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandEmpty({
@@ -103,11 +103,11 @@ function CommandEmpty({
 }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
-      data-slot='command-empty'
+      data-slot="command-empty"
-      className='py-6 text-center text-sm'
+      className="py-6 text-center text-sm"
       {...props}
     />
-  );
+  )
 }
 
 function CommandGroup({
@@ -116,14 +116,14 @@ function CommandGroup({
 }: React.ComponentProps<typeof CommandPrimitive.Group>) {
   return (
     <CommandPrimitive.Group
-      data-slot='command-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',
+        "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,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandSeparator({
@@ -132,11 +132,11 @@ function CommandSeparator({
 }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
-      data-slot='command-separator'
+      data-slot="command-separator"
-      className={cn('bg-border -mx-1 h-px', className)}
+      className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
-  );
+  )
 }
 
 function CommandItem({
@@ -145,30 +145,30 @@ function CommandItem({
 }: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return (
     <CommandPrimitive.Item
-      data-slot='command-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,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
-      data-slot='command-shortcut'
+      data-slot="command-shortcut"
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
+        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -181,4 +181,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-};
+}

src/components/ui/dialog.tsx

@@ -1,33 +1,33 @@
-'use client';
+"use client"
 
-import * as React from 'react';
+import * as React from "react"
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from 'lucide-react';
+import { XIcon } from "lucide-react"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot='dialog' {...props} />;
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
 function DialogOverlay({
@@ -36,14 +36,14 @@ function DialogOverlay({
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
     <DialogPrimitive.Overlay
-      data-slot='dialog-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',
+        "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,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DialogContent({
@@ -52,55 +52,55 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
+  showCloseButton?: boolean
 }) {
   return (
-    <DialogPortal data-slot='dialog-portal'>
+    <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
-        data-slot='dialog-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',
+          "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,
+          className
         )}
         {...props}
       >
         {children}
         {showCloseButton && (
           <DialogPrimitive.Close
-            data-slot='dialog-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>
+            <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  );
+  )
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='dialog-header'
+      data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  );
+  )
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='dialog-footer'
+      data-slot="dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DialogTitle({
@@ -109,11 +109,11 @@ function DialogTitle({
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
-      data-slot='dialog-title'
+      data-slot="dialog-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DialogDescription({
@@ -122,11 +122,11 @@ function DialogDescription({
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
   return (
     <DialogPrimitive.Description
-      data-slot='dialog-description'
+      data-slot="dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -140,4 +140,4 @@ export {
   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 file:text-destructive file:text-sm placeholder:text-text-muted-input',
+        'text-text-input selection:text-text md:text-sm file:text-destructive file:text-sm placeholder:text-text-muted-input',
         /* Background */
         'bg-transparent selection:bg-muted-input file:bg-transparent',
         /* Border */
@@ -41,45 +41,4 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   );
 }
 
-function Textarea({
+export { Input };
-  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,21 +5,16 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 
 import { cn } from '@/lib/utils';
 
-type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root> & {
+function Label({
-  size?: 'default' | 'small' | 'large';
+  className,
-};
+  ...props
-
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-function Label({ className, size = 'default', ...props }: LabelProps) {
   return (
     <LabelPrimitive.Root
       data-slot='label'
       className={cn(
         /* Text */
-        size === 'small'
+        'text-sm',
-          ? 'text-sm'
-          : size === 'large'
-            ? 'text-xl'
-            : 'text-base',
         /* Background */
         '',
         /* Border */

src/components/ui/popover.tsx

@@ -1,48 +1,48 @@
-'use client';
+"use client"
 
-import * as React from 'react';
+import * as React from "react"
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as PopoverPrimitive from "@radix-ui/react-popover"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot='popover' {...props} />;
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
 }
 
 function PopoverTrigger({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />;
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
 }
 
 function PopoverContent({
   className,
-  align = 'center',
+  align = "center",
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
-        data-slot='popover-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',
+          "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,
+          className
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  );
+  )
 }
 
 function PopoverAnchor({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/sidebar.tsx

@@ -1,725 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, VariantProps } from 'class-variance-authority';
-import { PanelLeftIcon } from 'lucide-react';
-
-import { useIsMobile } from '@/hooks/use-mobile';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Separator } from '@/components/ui/separator';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-
-const SIDEBAR_COOKIE_NAME = 'sidebar_state';
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_MOBILE = '18rem';
-const SIDEBAR_WIDTH_ICON = '4rem';
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-
-type SidebarContextProps = {
-  state: 'expanded' | 'collapsed';
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-};
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null);
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
-    throw new Error('useSidebar must be used within a SidebarProvider.');
-  }
-
-  return context;
-}
-
-function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}) {
-  const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React.useState(false);
-
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen);
-  const open = openProp ?? _open;
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === 'function' ? value(open) : value;
-      if (setOpenProp) {
-        setOpenProp(openState);
-      } else {
-        _setOpen(openState);
-      }
-
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-    },
-    [setOpenProp, open],
-  );
-
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-  }, [isMobile, setOpen, setOpenMobile]);
-
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault();
-        toggleSidebar();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [toggleSidebar]);
-
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? 'expanded' : 'collapsed';
-
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-  );
-
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot='sidebar-wrapper'
-          style={
-            {
-              '--sidebar-width': SIDEBAR_WIDTH,
-              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-            className,
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  );
-}
-
-function Sidebar({
-  side = 'left',
-  variant = 'sidebar',
-  collapsible = 'offcanvas',
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  side?: 'left' | 'right';
-  variant?: 'sidebar' | 'floating' | 'inset';
-  collapsible?: 'offcanvas' | 'icon' | 'none';
-}) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-  if (collapsible === 'none') {
-    return (
-      <div
-        data-slot='sidebar'
-        className={cn(
-          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          data-sidebar='sidebar'
-          data-slot='sidebar'
-          data-mobile='true'
-          className='bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden group/mobile'
-          style={
-            {
-              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <SheetHeader className='sr-only'>
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
-          <div className='flex h-full w-full flex-col'>{children}</div>
-        </SheetContent>
-      </Sheet>
-    );
-  }
-
-  return (
-    <div
-      className='group peer text-sidebar-foreground hidden md:block'
-      data-state={state}
-      data-collapsible={state === 'collapsed' ? collapsible : ''}
-      data-variant={variant}
-      data-side={side}
-      data-slot='sidebar'
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot='sidebar-gap'
-        className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-          'group-data-[collapsible=offcanvas]:w-0',
-          'group-data-[side=right]:rotate-180',
-          variant === 'floating' || variant === 'inset'
-            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-        )}
-      />
-      <div
-        data-slot='sidebar-container'
-        className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-          side === 'left'
-            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-          // Adjust the padding for floating and inset variants.
-          variant === 'floating' || variant === 'inset'
-            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-          className,
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar='sidebar'
-          data-slot='sidebar-inner'
-          className='bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar();
-
-  return (
-    <Button
-      data-sidebar='trigger'
-      data-slot='sidebar-trigger'
-      variant='muted'
-      size='icon'
-      className={cn('', className)}
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
-      {...props}
-    >
-      <PanelLeftIcon />
-      <span className='sr-only'>Toggle Sidebar</span>
-    </Button>
-  );
-}
-
-function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
-  const { toggleSidebar } = useSidebar();
-
-  return (
-    <button
-      data-sidebar='rail'
-      data-slot='sidebar-rail'
-      aria-label='Toggle Sidebar'
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title='Toggle Sidebar'
-      className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
-  return (
-    <main
-      data-slot='sidebar-inset'
-      className={cn(
-        'bg-background relative flex w-full flex-1 flex-col',
-        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
-  return (
-    <Input
-      data-slot='sidebar-input'
-      data-sidebar='input'
-      className={cn('bg-background h-8 w-full shadow-none', className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='sidebar-header'
-      data-sidebar='header'
-      className={cn('flex flex-col gap-2 p-2', className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='sidebar-footer'
-      data-sidebar='footer'
-      className={cn('flex flex-col gap-2 p-2', className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot='sidebar-separator'
-      data-sidebar='separator'
-      className={cn('bg-sidebar-border mx-2 w-auto', className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='sidebar-content'
-      data-sidebar='content'
-      className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='sidebar-group'
-      data-sidebar='group'
-      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'div'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'div';
-
-  return (
-    <Comp
-      data-slot='sidebar-group-label'
-      data-sidebar='group-label'
-      className={cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 ml-[7.5px]',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarGroupAction({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'button';
-
-  return (
-    <Comp
-      data-slot='sidebar-group-action'
-      data-sidebar='group-action'
-      className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 md:after:hidden',
-        'group-data-[collapsible=icon]:hidden',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='sidebar-group-content'
-      data-sidebar='group-content'
-      className={cn('w-full text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
-  return (
-    <ul
-      data-slot='sidebar-menu'
-      data-sidebar='menu'
-      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
-  return (
-    <li
-      data-slot='sidebar-menu-item'
-      data-sidebar='menu-item'
-      className={cn('group/menu-item relative', className)}
-      {...props}
-    />
-  );
-}
-
-const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! p-0 ml-[15.5px] [&>span:last-child]:truncate [&>svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-        outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
-      },
-      size: {
-        default: 'h-8 text-sm',
-        sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = 'default',
-  size = 'default',
-  tooltip,
-  className,
-  ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean;
-  isActive?: boolean;
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : 'button';
-  const { isMobile, state } = useSidebar();
-
-  const button = (
-    <Comp
-      data-slot='sidebar-menu-button'
-      data-sidebar='menu-button'
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  );
-
-  if (!tooltip) {
-    return button;
-  }
-
-  if (typeof tooltip === 'string') {
-    tooltip = {
-      children: tooltip,
-    };
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side='right'
-        align='center'
-        hidden={state !== 'collapsed' || isMobile}
-        {...tooltip}
-      />
-    </Tooltip>
-  );
-}
-
-function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean;
-  showOnHover?: boolean;
-}) {
-  const Comp = asChild ? Slot : 'button';
-
-  return (
-    <Comp
-      data-slot='sidebar-menu-action'
-      data-sidebar='menu-action'
-      className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 md:after:hidden',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[collapsible=icon]:hidden',
-        showOnHover &&
-          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='sidebar-menu-badge'
-      data-sidebar='menu-badge'
-      className={cn(
-        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[collapsible=icon]:hidden',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
-}: React.ComponentProps<'div'> & {
-  showIcon?: boolean;
-}) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
-
-  return (
-    <div
-      data-slot='sidebar-menu-skeleton'
-      data-sidebar='menu-skeleton'
-      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className='size-4 rounded-md'
-          data-sidebar='menu-skeleton-icon'
-        />
-      )}
-      <Skeleton
-        className='h-4 max-w-(--skeleton-width) flex-1'
-        data-sidebar='menu-skeleton-text'
-        style={
-          {
-            '--skeleton-width': width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  );
-}
-
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
-  return (
-    <ul
-      data-slot='sidebar-menu-sub'
-      data-sidebar='menu-sub'
-      className={cn(
-        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-        'group-data-[collapsible=icon]:hidden',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<'li'>) {
-  return (
-    <li
-      data-slot='sidebar-menu-sub-item'
-      data-sidebar='menu-sub-item'
-      className={cn('group/menu-sub-item relative', className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarMenuSubButton({
-  asChild = false,
-  size = 'md',
-  isActive = false,
-  className,
-  ...props
-}: React.ComponentProps<'a'> & {
-  asChild?: boolean;
-  size?: 'sm' | 'md';
-  isActive?: boolean;
-}) {
-  const Comp = asChild ? Slot : 'a';
-
-  return (
-    <Comp
-      data-slot='sidebar-menu-sub-button'
-      data-sidebar='menu-sub-button'
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-        size === 'sm' && 'text-xs',
-        size === 'md' && 'text-sm',
-        'group-data-[collapsible=icon]:hidden',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-};

src/components/ui/sonner.tsx

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

tsconfig.json

@@ -20,8 +20,7 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    },
+    }
-    "types": ["node", "cypress", "@types/webpack-env"]
   },
   "ts-node": {
     "compilerOptions": {