Initial TicketTracker release

frontend/src/App.tsx

@@ -0,0 +1,708 @@
+import {
+  BarChart3,
+  CheckCircle2,
+  Command,
+  LayoutGrid,
+  LogOut,
+  Moon,
+  Pause,
+  Play,
+  Plus,
+  Repeat,
+  Search,
+  Shield,
+  Sun,
+  Timer,
+  UserCog,
+  UserCircle,
+} from "lucide-react";
+import { FormEvent, MouseEvent, useEffect, useMemo, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { usePreferencesStore } from "@/stores/preferences/preferences-provider";
+
+import { cn } from "./lib/utils";
+import { ApiError, getCurrentUser, logout, lookupTicket } from "./api";
+import { formatTimer } from "./format";
+import { activeElapsedMs, pauseEntry, readStoredTimers, resumeEntry, storageKeyForUser, ticketPattern, type TimerEntry } from "./timers";
+import { AdminUsersPage } from "./views/AdminUsersPage";
+import { AnalysisPage } from "./views/AnalysisPage";
+import { LoginPage } from "./views/LoginPage";
+import { ProfilePage } from "./views/ProfilePage";
+import { RecurringBillingsPage } from "./views/RecurringBillingsPage";
+import { TicketDetailPage } from "./views/TicketDetailPage";
+import { TimerPage } from "./views/TimerPage";
+import type { AuthUser, PeriodType } from "./types";
+import type { Dispatch, SetStateAction } from "react";
+
+function routeFromPath(pathname: string) {
+  const periodTicketMatch = pathname.match(/^\/analysis\/(month|day)\/([^/]+)\/tickets\/(\d+)$/);
+
+  if (periodTicketMatch) {
+    return {
+      page: "ticket" as const,
+      periodType: periodTicketMatch[1] as PeriodType,
+      period: periodTicketMatch[2],
+      ticketId: periodTicketMatch[3],
+    };
+  }
+
+  const legacyTicketMatch = pathname.match(/^\/analysis\/(\d{4}-\d{2})\/tickets\/(\d+)$/);
+
+  if (legacyTicketMatch) {
+    return {
+      page: "ticket" as const,
+      periodType: "month" as const,
+      period: legacyTicketMatch[1],
+      ticketId: legacyTicketMatch[2],
+    };
+  }
+
+  if (pathname.startsWith("/analysis")) {
+    return { page: "analysis" as const };
+  }
+
+  if (pathname.startsWith("/recurring")) {
+    return { page: "recurring" as const };
+  }
+
+  if (pathname.startsWith("/admin/users")) {
+    return { page: "admin-users" as const };
+  }
+
+  if (pathname.startsWith("/profile")) {
+    return { page: "profile" as const };
+  }
+
+  return { page: "timer" as const };
+}
+
+function useAppRouter() {
+  const [path, setPath] = useState("/timer");
+
+  useEffect(() => {
+    const update = () => setPath(window.location.pathname);
+    update();
+    window.addEventListener("popstate", update);
+    return () => window.removeEventListener("popstate", update);
+  }, []);
+
+  function navigate(to: string) {
+    window.history.pushState({}, "", to);
+    setPath(window.location.pathname);
+  }
+
+  function navHandler(to: string) {
+    return (event: MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      navigate(to);
+    };
+  }
+
+  return {
+    path,
+    route: useMemo(() => routeFromPath(path), [path]),
+    navigate,
+    navHandler,
+  };
+}
+
+function ThemeSwitcher() {
+  const { themeMode, setPreference } = usePreferencesStore(
+    useShallow((state) => ({
+      themeMode: state.values.theme_mode,
+      setPreference: state.setPreference,
+    })),
+  );
+
+  function cycleTheme() {
+    setPreference("theme_mode", themeMode === "dark" ? "light" : "dark");
+  }
+
+  return (
+    <Button variant="default" size="icon" aria-label="Farbschema wechseln" onClick={cycleTheme}>
+      <Sun className="hidden dark:block" />
+      <Moon className="block dark:hidden" />
+    </Button>
+  );
+}
+
+type QuickTimerStarterProps = {
+  className?: string;
+  inputId: string;
+  onStartTimer: (ticketNumber: string) => Promise<boolean>;
+};
+
+function QuickTimerStarter({ className, inputId, onStartTimer }: QuickTimerStarterProps) {
+  const [ticketNumber, setTicketNumber] = useState("");
+  const trimmedTicketNumber = ticketNumber.trim();
+  const hasInvalidTicket = trimmedTicketNumber.length > 0 && !ticketPattern.test(trimmedTicketNumber);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+
+    if (await onStartTimer(trimmedTicketNumber)) {
+      setTicketNumber("");
+    }
+  }
+
+  return (
+    <form className={cn("flex min-w-0 items-center gap-2", className)} onSubmit={submit}>
+      <label className="sr-only" htmlFor={inputId}>
+        Ticketnummer fuer neuen Timer
+      </label>
+      <Input
+        id={inputId}
+        className={cn("h-8 min-w-0 bg-background", hasInvalidTicket && "border-destructive focus-visible:border-destructive")}
+        placeholder="Ticket#123456"
+        value={ticketNumber}
+        onChange={(event) => setTicketNumber(event.currentTarget.value)}
+      />
+      <Button type="submit" size="sm" className="h-8 shrink-0">
+        <Plus className="size-3.5" />
+        <span className="hidden sm:inline">Timer starten</span>
+        <span className="sm:hidden">Start</span>
+      </Button>
+    </form>
+  );
+}
+
+type SidebarTimersProps = {
+  timers: TimerEntry[];
+  selectedTimerId: string | null;
+  setSelectedTimerId: Dispatch<SetStateAction<string | null>>;
+  setTimers: Dispatch<SetStateAction<TimerEntry[]>>;
+  tick: number;
+  onOpenTimer: () => void;
+};
+
+function SidebarTimers({ timers, selectedTimerId, setSelectedTimerId, setTimers, tick, onOpenTimer }: SidebarTimersProps) {
+  const sortedTimers = useMemo(
+    () =>
+      [...timers].sort((first, second) => {
+        if (first.phase === second.phase) {
+          return first.ticketNumber.localeCompare(second.ticketNumber);
+        }
+
+        return first.phase === "running" ? -1 : 1;
+      }),
+    [timers],
+  );
+  const runningTimer = timers.find((timer) => timer.phase === "running") ?? null;
+
+  function toggleTimer(timerId: string) {
+    const timer = timers.find((entry) => entry.id === timerId);
+
+    if (!timer) {
+      return;
+    }
+
+    const now = Date.now();
+    setSelectedTimerId(timerId);
+    setTimers((current) =>
+      current.map((entry) => {
+        if (entry.id !== timerId) {
+          return pauseEntry(entry, now);
+        }
+
+        return timer.phase === "running" ? pauseEntry(entry, now) : resumeEntry(entry, now);
+      }),
+    );
+  }
+
+  return (
+    <SidebarGroup className="pt-0 group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel className="h-6 px-2 text-xs">Timer</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <div className="mx-2 rounded-md border bg-card/70 p-2 shadow-xs">
+          <div className="mb-1 flex items-center justify-between gap-2">
+            <span className="truncate text-xs font-medium text-muted-foreground">
+              {runningTimer ? "Aktuell aktiv" : timers.length > 0 ? "Bereit" : "Kein Timer"}
+            </span>
+            {runningTimer ? <span className="size-2 rounded-full bg-emerald-500" aria-hidden="true" /> : null}
+          </div>
+
+          {sortedTimers.length === 0 ? (
+            <p className="px-1 py-1 text-xs text-muted-foreground">Noch keine Timer gestartet.</p>
+          ) : (
+            <div className="max-h-52 space-y-1 overflow-y-auto pr-1">
+              {sortedTimers.map((timer) => {
+                const elapsed = Math.floor(activeElapsedMs(timer, tick) / 1000);
+                const isSelected = selectedTimerId === timer.id;
+                const isRunning = timer.phase === "running";
+
+                return (
+                  <div
+                    key={timer.id}
+                    className={cn(
+                      "flex items-center gap-1.5 rounded-md border px-2 py-1.5",
+                      isSelected ? "border-primary/55 bg-accent/35" : "border-transparent bg-background/60",
+                    )}
+                  >
+                    <button
+                      type="button"
+                      className="min-w-0 flex-1 text-left"
+                      onClick={() => {
+                        setSelectedTimerId(timer.id);
+                        onOpenTimer();
+                      }}
+                    >
+                      <span className="flex min-w-0 items-center gap-1.5">
+                        <span className={cn("size-1.5 rounded-full", isRunning ? "bg-emerald-500" : "bg-muted-foreground/50")} />
+                        <span className="truncate text-xs font-medium">{timer.ticketNumber}</span>
+                      </span>
+                      {timer.organizationName ? (
+                        <span className="block truncate text-[11px] leading-4 text-muted-foreground">
+                          {timer.organizationName}
+                        </span>
+                      ) : null}
+                      <span className="block font-mono text-[11px] font-semibold leading-4 tracking-normal text-muted-foreground">
+                        {formatTimer(elapsed)}
+                      </span>
+                    </button>
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant={isRunning ? "secondary" : "ghost"}
+                      className="size-7 shrink-0"
+                      onClick={() => toggleTimer(timer.id)}
+                      aria-label={isRunning ? "Timer pausieren" : "Timer aktivieren"}
+                    >
+                      {isRunning ? <Pause className="size-3.5" /> : <Play className="size-3.5" />}
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}
+
+export function App() {
+  const { path, route, navHandler, navigate } = useAppRouter();
+  const [currentUser, setCurrentUser] = useState<AuthUser | null>(null);
+  const [authLoading, setAuthLoading] = useState(true);
+  const [timers, setTimers] = useState<TimerEntry[]>([]);
+  const [timersLoaded, setTimersLoaded] = useState(false);
+  const [timerOwnerId, setTimerOwnerId] = useState<string | null>(null);
+  const [selectedTimerId, setSelectedTimerId] = useState<string | null>(null);
+  const [tick, setTick] = useState(Date.now());
+
+  useEffect(() => {
+    async function loadUser() {
+      try {
+        const result = await getCurrentUser();
+        setCurrentUser(result.user);
+      } catch (error) {
+        if (!(error instanceof ApiError && error.status === 401)) {
+          console.error(error);
+        }
+        setCurrentUser(null);
+      } finally {
+        setAuthLoading(false);
+      }
+    }
+
+    void loadUser();
+  }, []);
+
+  useEffect(() => {
+    if (!currentUser) {
+      setTimers([]);
+      setSelectedTimerId(null);
+      setTimerOwnerId(null);
+      setTimersLoaded(false);
+      return;
+    }
+
+    setTimers(readStoredTimers(currentUser.id));
+    setTimerOwnerId(currentUser.id);
+    setTimersLoaded(true);
+  }, [currentUser]);
+
+  useEffect(() => {
+    if (!currentUser || !timersLoaded || timerOwnerId !== currentUser.id) {
+      return;
+    }
+
+    localStorage.setItem(storageKeyForUser(currentUser.id), JSON.stringify(timers));
+
+    if (timers.length === 0) {
+      setSelectedTimerId(null);
+      return;
+    }
+
+    if (!selectedTimerId || !timers.some((timer) => timer.id === selectedTimerId)) {
+      setSelectedTimerId(timers[0].id);
+    }
+  }, [currentUser, timers, selectedTimerId, timersLoaded, timerOwnerId]);
+
+  useEffect(() => {
+    if (!currentUser || !timersLoaded || timerOwnerId !== currentUser.id) {
+      return;
+    }
+
+    const timersToHydrate = timers.filter((timer) => !timer.ticketLookupDone);
+
+    if (timersToHydrate.length === 0) {
+      return;
+    }
+
+    let cancelled = false;
+
+    async function hydrateTimers() {
+      const results = await Promise.all(
+        timersToHydrate.map(async (timer) => {
+          try {
+            const result = await lookupTicket(timer.ticketNumber);
+            return {
+              id: timer.id,
+              organizationName: result.ticket?.organization_name ?? result.ticket?.customer_name ?? null,
+              workType: result.ticket?.work_type ?? null
+            };
+          } catch {
+            return {
+              id: timer.id,
+              organizationName: null,
+              workType: null
+            };
+          }
+        })
+      );
+
+      if (cancelled) {
+        return;
+      }
+
+      setTimers((current) =>
+        current.map((timer) => {
+          const result = results.find((entry) => entry.id === timer.id);
+
+          if (!result) {
+            return timer;
+          }
+
+          return {
+            ...timer,
+            organizationName: result.organizationName,
+            workType: result.workType,
+            ticketLookupDone: true
+          };
+        })
+      );
+    }
+
+    void hydrateTimers();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [currentUser, timers, timersLoaded, timerOwnerId]);
+
+  useEffect(() => {
+    const interval = window.setInterval(() => setTick(Date.now()), 500);
+    return () => window.clearInterval(interval);
+  }, []);
+
+  async function startQuickTimer(rawTicketNumber: string) {
+    const ticketNumber = rawTicketNumber.trim();
+
+    if (!ticketPattern.test(ticketNumber)) {
+      toast.error("Ticketnummer prüfen", {
+        description: "Das Format muss Ticket#XXXXXX sein."
+      });
+      return false;
+    }
+
+    const existingTimer = timers.find((timer) => timer.ticketNumber === ticketNumber);
+    const now = Date.now();
+
+    if (existingTimer) {
+      setTimers((current) =>
+        current.map((timer) => (timer.id === existingTimer.id ? resumeEntry(timer, now) : pauseEntry(timer, now)))
+      );
+      setSelectedTimerId(existingTimer.id);
+      toast.info("Bestehender Timer aktiviert", {
+        description: ticketNumber
+      });
+      return true;
+    }
+
+    const ticketResult = await lookupTicket(ticketNumber).catch(() => ({ ticket: null }));
+
+    const newTimer: TimerEntry = {
+      id: crypto.randomUUID(),
+      ticketNumber,
+      organizationName: ticketResult.ticket?.organization_name ?? ticketResult.ticket?.customer_name ?? null,
+      workType: ticketResult.ticket?.work_type ?? null,
+      ticketLookupDone: true,
+      startedAt: now,
+      pausedTotalMs: 0,
+      pausedAt: null,
+      phase: "running"
+    };
+
+    setTimers((current) => [...current.map((timer) => pauseEntry(timer, now)), newTimer]);
+    setSelectedTimerId(newTimer.id);
+    toast.success("Timer gestartet", {
+      description: ticketNumber
+    });
+    return true;
+  }
+
+  async function handleLogout() {
+    await logout().catch(() => undefined);
+    setCurrentUser(null);
+    navigate("/timer");
+  }
+
+  if (authLoading) {
+    return (
+      <main className="grid min-h-screen place-items-center bg-background p-4 text-sm text-muted-foreground">
+        TicketTracker wird geladen...
+      </main>
+    );
+  }
+
+  if (!currentUser) {
+    return <LoginPage onLogin={setCurrentUser} />;
+  }
+
+  const navItems = [
+    { href: "/timer", label: "Timer", icon: Timer, active: path.startsWith("/timer") || path === "/" },
+    { href: "/analysis", label: "Auswertung", icon: BarChart3, active: path.startsWith("/analysis") },
+    { href: "/recurring", label: "Fixe Abrechnung", icon: Repeat, active: path.startsWith("/recurring") },
+    { href: "/profile", label: "Profil", icon: UserCog, active: path.startsWith("/profile") },
+    ...(currentUser.role === "admin"
+      ? [{ href: "/admin/users", label: "Benutzer", icon: Shield, active: path.startsWith("/admin/users") }]
+      : []),
+  ];
+  const runningTimer = timers.find((timer) => timer.phase === "running") ?? null;
+  const runningElapsedSeconds = runningTimer ? Math.floor(activeElapsedMs(runningTimer, tick) / 1000) : 0;
+
+  return (
+    <SidebarProvider
+      defaultOpen
+      style={
+        {
+          "--sidebar-width": "16rem",
+        } as React.CSSProperties
+      }
+    >
+      <Sidebar variant="sidebar" collapsible="icon">
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild>
+                <a href="/timer" onClick={navHandler("/timer")}>
+                  <Command />
+                  <span className="font-semibold text-base">TicketTracker</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="flex flex-col gap-2">
+              <SidebarMenu>
+                <SidebarMenuItem className="flex items-center gap-2">
+                  <SidebarMenuButton
+                    asChild
+                    tooltip="Session starten"
+                    className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
+                  >
+                    <a href="/timer" onClick={navHandler("/timer")}>
+                      <Timer />
+                      <span>Session starten</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+
+          <SidebarTimers
+            timers={timers}
+            selectedTimerId={selectedTimerId}
+            setSelectedTimerId={setSelectedTimerId}
+            setTimers={setTimers}
+            tick={tick}
+            onOpenTimer={() => navigate("/timer")}
+          />
+
+          <SidebarGroup>
+            <SidebarGroupLabel>Workflows</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {navItems.map((item) => (
+                  <SidebarMenuItem key={item.href}>
+                    <SidebarMenuButton asChild tooltip={item.label} isActive={item.active}>
+                      <a href={item.href} onClick={navHandler(item.href)}>
+                        <item.icon />
+                        <span>{item.label}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+
+        </SidebarContent>
+
+        <SidebarFooter>
+          <div className="mx-2 rounded-lg border bg-card p-3 text-sm shadow-xs group-data-[collapsible=icon]:hidden">
+            <div className="mb-2 flex items-center gap-2 font-medium">
+              <CheckCircle2 className="size-4 text-muted-foreground" />
+              Abschluss
+            </div>
+            <p className="text-muted-foreground">Offene Sessions findest du in Tages- und Monatsansicht.</p>
+          </div>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton tooltip="Worklog">
+                <UserCircle />
+                <span>Worklog lokal</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+
+      <SidebarInset
+        className={cn(
+          "[html[data-content-layout=centered]_&>*]:mx-auto",
+          "[html[data-content-layout=centered]_&>*]:w-full",
+          "[html[data-content-layout=centered]_&>*]:max-w-screen-2xl",
+          "[--dashboard-header-height:--spacing(12)]",
+          "min-w-0 overflow-x-clip",
+        )}
+      >
+        <header className="sticky top-0 z-50 flex h-12 shrink-0 items-center gap-2 border-b bg-background/80 backdrop-blur-md">
+          <div className="flex w-full items-center justify-between px-3 sm:px-5 lg:px-6">
+            <div className="flex min-w-0 items-center gap-2">
+              <SidebarTrigger className="-ml-1" />
+              <Separator orientation="vertical" className="mx-1 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center" />
+              <div className="hidden h-8 min-w-[160px] items-center gap-2 rounded-md px-2 text-sm text-muted-foreground lg:flex">
+                <Search className="size-4" />
+                <span>{currentUser.display_name}</span>
+              </div>
+              {runningTimer ? (
+                <button
+                  type="button"
+                  className="flex h-8 min-w-0 items-center gap-1.5 rounded-md border bg-card px-2 text-xs shadow-xs"
+                  onClick={() => {
+                    setSelectedTimerId(runningTimer.id);
+                    navigate("/timer");
+                  }}
+                >
+                  <span className="size-1.5 rounded-full bg-emerald-500" aria-hidden="true" />
+                  <span className="hidden max-w-28 truncate font-medium sm:inline">{runningTimer.ticketNumber}</span>
+                  <span className="font-mono font-semibold tracking-normal">{formatTimer(runningElapsedSeconds)}</span>
+                </button>
+              ) : null}
+              <div className="flex items-center gap-2 md:hidden">
+                <LayoutGrid className="size-4" />
+                <span className="truncate text-sm font-semibold">TicketTracker</span>
+              </div>
+            </div>
+            <QuickTimerStarter
+              inputId="quick-ticket-number-desktop"
+              className="mx-3 hidden max-w-md flex-1 md:flex"
+              onStartTimer={startQuickTimer}
+            />
+            <div className="flex items-center gap-2">
+              <ThemeSwitcher />
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" className="rounded-full border bg-background">
+                    <UserCircle className="size-5" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-48">
+                  <DropdownMenuLabel>
+                    <span className="block truncate">{currentUser.display_name}</span>
+                    <span className="block truncate text-xs font-normal text-muted-foreground">{currentUser.username}</span>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => navigate("/profile")}>
+                    <UserCog className="size-4" />
+                    Profil
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => void handleLogout()}>
+                    <LogOut className="size-4" />
+                    Abmelden
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </header>
+        <div className="border-b bg-background/95 px-3 py-2 md:hidden">
+          <QuickTimerStarter inputId="quick-ticket-number-mobile" onStartTimer={startQuickTimer} />
+        </div>
+        <main className="min-h-0 min-w-0 flex-1 overflow-x-hidden p-3 sm:p-4 md:p-5">
+          <div className="mx-auto w-full max-w-[1180px]">
+            {route.page === "timer" ? (
+              <TimerPage
+                timers={timers}
+                setTimers={setTimers}
+                selectedTimerId={selectedTimerId}
+                setSelectedTimerId={setSelectedTimerId}
+                tick={tick}
+              />
+            ) : null}
+            {route.page === "analysis" ? <AnalysisPage onNavigate={navigate} /> : null}
+            {route.page === "recurring" ? <RecurringBillingsPage /> : null}
+            {route.page === "profile" ? <ProfilePage currentUser={currentUser} onUserUpdated={setCurrentUser} /> : null}
+            {route.page === "admin-users" && currentUser.role === "admin" ? <AdminUsersPage currentUser={currentUser} /> : null}
+            {route.page === "admin-users" && currentUser.role !== "admin" ? (
+              <TimerPage
+                timers={timers}
+                setTimers={setTimers}
+                selectedTimerId={selectedTimerId}
+                setSelectedTimerId={setSelectedTimerId}
+                tick={tick}
+              />
+            ) : null}
+            {route.page === "ticket" ? (
+              <TicketDetailPage periodType={route.periodType} period={route.period} ticketId={route.ticketId} onNavigate={navigate} />
+            ) : null}
+          </div>
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

frontend/src/api.ts

@@ -0,0 +1,357 @@
+import type {
+  AdminSession,
+  AdminUser,
+  AuthUser,
+  BillingStatus,
+  Organization,
+  PeriodOverview,
+  PeriodType,
+  RecurringBilling,
+  TicketMeta,
+  TicketPeriod,
+  UserRole,
+  WorkType
+} from "./types";
+
+type CreateSessionPayload = {
+  ticketNumber: string;
+  organizationId: string;
+  activity: string;
+  workType: WorkType;
+  startedAt: string;
+  endedAt: string;
+  durationSeconds: number;
+};
+
+type DeleteSessionResult = {
+  deleted: {
+    id: string;
+    ticket_id: string;
+    started_at: string;
+    userTicketEmpty: boolean;
+    ticketDeleted: boolean;
+  };
+};
+
+export class ApiError extends Error {
+  constructor(
+    message: string,
+    public status: number
+  ) {
+    super(message);
+    this.name = "ApiError";
+  }
+}
+
+async function request<T>(url: string, options: RequestInit = {}): Promise<T> {
+  const response = await fetch(url, {
+    credentials: "same-origin",
+    headers: {
+      "Content-Type": "application/json",
+      ...options.headers
+    },
+    ...options
+  });
+
+  if (!response.ok) {
+    const body = await response.json().catch(() => ({}));
+    throw new ApiError(body.error ?? "Anfrage fehlgeschlagen", response.status);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+export function login(payload: { username: string; password: string }) {
+  return request<{ user: AuthUser }>("/api/auth/login", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function logout() {
+  return request<{ ok: boolean }>("/api/auth/logout", {
+    method: "POST"
+  });
+}
+
+export function getCurrentUser() {
+  return request<{ user: AuthUser }>("/api/auth/me");
+}
+
+export function updateCurrentUser(payload: {
+  username: string;
+  displayName: string;
+  currentPassword?: string;
+  newPassword?: string;
+}) {
+  return request<{ user: AuthUser }>("/api/auth/me", {
+    method: "PATCH",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function getAdminUsers() {
+  return request<{ users: AdminUser[] }>("/api/admin/users");
+}
+
+export function createAdminUser(payload: {
+  username: string;
+  displayName: string;
+  password: string;
+  role: UserRole;
+  active: boolean;
+}) {
+  return request<{ user: AdminUser }>("/api/admin/users", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function updateAdminUser(
+  userId: string,
+  payload: {
+    username: string;
+    displayName: string;
+    password?: string;
+    role: UserRole;
+    active: boolean;
+  }
+) {
+  return request<{ user: AdminUser }>(`/api/admin/users/${userId}`, {
+    method: "PATCH",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function getAdminSessions() {
+  return request<{ sessions: AdminSession[] }>("/api/admin/sessions");
+}
+
+export function getOrganizations(search = "") {
+  const params = new URLSearchParams();
+
+  if (search.trim()) {
+    params.set("search", search.trim());
+  }
+
+  return request<{ organizations: Organization[] }>(`/api/organizations${params.size ? `?${params}` : ""}`);
+}
+
+export function getZammadSettings() {
+  return request<{ settings: { baseUrl: string; hasApiKey: boolean } }>("/api/admin/zammad/settings");
+}
+
+export function saveZammadSettings(payload: { baseUrl: string; apiKey?: string }) {
+  return request<{ settings: { baseUrl: string; hasApiKey: boolean } }>("/api/admin/zammad/settings", {
+    method: "PUT",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function syncZammadOrganizations(payload: { baseUrl?: string; apiKey?: string }) {
+  return request<{ synced: number; skipped: number; removed: number; unlinkedTickets: number; unlinkedSessions: number }>("/api/admin/zammad/organizations/sync", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function getRecurringBillings() {
+  return request<{ recurringBillings: RecurringBilling[] }>("/api/recurring-billings");
+}
+
+export function createRecurringBilling(payload: {
+  ticketNumber?: string | null;
+  organizationId: string;
+  activity: string;
+  workType: WorkType;
+  recurrenceType: "weekly" | "every_n_weeks";
+  intervalValue: number;
+  validFrom: string;
+  validUntil?: string | null;
+  slots: Array<{
+    weekday: number | null;
+    startTime: string;
+    durationMinutes: number;
+  }>;
+}) {
+  return request<{ recurringBillings: RecurringBilling[] }>("/api/recurring-billings", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function updateRecurringBilling(
+  billingId: string,
+  payload:
+    | { active: boolean }
+    | {
+        ticketNumber?: string | null;
+        organizationId: string;
+        activity: string;
+        workType: WorkType;
+        recurrenceType: "weekly" | "every_n_weeks";
+        intervalValue: number;
+        validFrom: string;
+        validUntil?: string | null;
+        slots: Array<{
+          id?: string;
+          weekday: number | null;
+          startTime: string;
+          durationMinutes: number;
+        }>;
+      }
+) {
+  return request<{ recurringBillings: RecurringBilling[] }>(`/api/recurring-billings/${billingId}`, {
+    method: "PATCH",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function deleteRecurringBilling(billingId: string) {
+  return request<{ recurringBillings: RecurringBilling[] }>(`/api/recurring-billings/${billingId}`, {
+    method: "DELETE"
+  });
+}
+
+export function createAdminSession(payload: {
+  userId: string;
+  ticketNumber: string;
+  organizationId: string;
+  activity: string;
+  workType: WorkType;
+  startedAt: string;
+  endedAt: string;
+}) {
+  return request<{ session: AdminSession }>("/api/admin/sessions", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function reassignAdminSession(sessionId: string, userId: string) {
+  return request<{ session: AdminSession }>(`/api/admin/sessions/${sessionId}/owner`, {
+    method: "PATCH",
+    body: JSON.stringify({ userId })
+  });
+}
+
+export function createSession(payload: CreateSessionPayload) {
+  return request("/api/sessions", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function lookupTicket(ticketNumber: string) {
+  return request<{ ticket: TicketMeta | null }>(`/api/tickets/lookup?ticketNumber=${encodeURIComponent(ticketNumber)}`);
+}
+
+export function updateTicket(
+  ticketId: string,
+  payload: {
+    ticketNumber: string;
+    organizationId: string;
+    workType: WorkType;
+  }
+) {
+  return request<{ ticket: TicketMeta }>(`/api/tickets/${ticketId}`, {
+    method: "PATCH",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function updateSessionDetails(
+  sessionId: string,
+  payload: {
+    organizationId: string;
+    activity: string;
+    workType: WorkType;
+    startedAt: string;
+    endedAt: string;
+  }
+) {
+  return request(`/api/sessions/${sessionId}/details`, {
+    method: "PATCH",
+    body: JSON.stringify(payload)
+  });
+}
+
+export function updateTicketDayBilling(ticketId: string, day: string, billedMinutes: number | null) {
+  return request(`/api/tickets/${ticketId}/day-billings/${day}`, {
+    method: "PATCH",
+    body: JSON.stringify({ billedMinutes })
+  });
+}
+
+export function getMonthOverview(month: string) {
+  return getPeriodOverview("month", month);
+}
+
+export function getTicketMonth(month: string, ticketId: string) {
+  return getTicketPeriod("month", month, ticketId);
+}
+
+function periodPath(type: PeriodType) {
+  return type === "month" ? "months" : "days";
+}
+
+export function getPeriodOverview(type: PeriodType, period: string) {
+  return request<PeriodOverview>(`/api/periods/${periodPath(type)}/${period}/overview`);
+}
+
+export function getTicketPeriod(type: PeriodType, period: string, ticketId: string) {
+  return request<TicketPeriod>(`/api/periods/${periodPath(type)}/${period}/tickets/${ticketId}`);
+}
+
+export function updateSessionBilling(sessionId: string, billingStatus: BillingStatus) {
+  return request(`/api/sessions/${sessionId}/billing`, {
+    method: "PATCH",
+    body: JSON.stringify({ billingStatus })
+  });
+}
+
+export function deleteSession(sessionId: string) {
+  return request<DeleteSessionResult>(`/api/sessions/${sessionId}`, {
+    method: "DELETE"
+  });
+}
+
+export function closeTicketMonth(month: string, ticketId: string) {
+  return closeTicketPeriod("month", month, ticketId);
+}
+
+export function reopenTicketMonth(month: string, ticketId: string) {
+  return reopenTicketPeriod("month", month, ticketId);
+}
+
+export function closeMonth(month: string) {
+  return closePeriod("month", month);
+}
+
+export function reopenMonth(month: string) {
+  return reopenPeriod("month", month);
+}
+
+export function closeTicketPeriod(type: PeriodType, period: string, ticketId: string) {
+  return request(`/api/periods/${periodPath(type)}/${period}/tickets/${ticketId}/close`, {
+    method: "POST"
+  });
+}
+
+export function reopenTicketPeriod(type: PeriodType, period: string, ticketId: string) {
+  return request(`/api/periods/${periodPath(type)}/${period}/tickets/${ticketId}/reopen`, {
+    method: "POST"
+  });
+}
+
+export function closePeriod(type: PeriodType, period: string) {
+  return request(`/api/periods/${periodPath(type)}/${period}/close`, {
+    method: "POST"
+  });
+}
+
+export function reopenPeriod(type: PeriodType, period: string) {
+  return request(`/api/periods/${periodPath(type)}/${period}/reopen`, {
+    method: "POST"
+  });
+}

frontend/src/app/[[...path]]/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { App } from "@/App";
+
+export default function Page() {
+  return <App />;
+}

frontend/src/app/globals.css

@@ -0,0 +1,303 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+/* Theme preset styles: these override CSS variables based on the selected data-theme-preset */
+@import "../styles/presets/brutalist.css";
+@import "../styles/presets/soft-pop.css";
+@import "../styles/presets/tangerine.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-heading: var(--font-sans);
+  --font-sans: var(--font-sans);
+}
+
+/* Default theme styles (used when no data-theme-preset is set or when 'default' is selected).
+These serve as the fallback; there is no separate default.css file. */
+:root {
+  --radius: 0.625rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* fonts */
+  --font-sans: var(--font-geist);
+  --font-mono: var(--font-geist-mono);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans), system-ui, sans-serif;
+  }
+
+  a[href],
+  button:not(:disabled),
+  [role="button"]:not([aria-disabled="true"]),
+  [role="menuitem"]:not([aria-disabled="true"]):not([data-disabled]),
+  [role="option"]:not([aria-disabled="true"]):not([data-disabled]),
+  [data-slot="button"]:not(:disabled),
+  [data-slot="command-item"]:not([data-disabled="true"]),
+  [data-slot="dropdown-menu-item"]:not([data-disabled]),
+  [data-slot="select-item"]:not([data-disabled]) {
+    cursor: pointer;
+  }
+
+  button:disabled,
+  [aria-disabled="true"],
+  [data-disabled] {
+    cursor: not-allowed;
+  }
+
+  html {
+    @apply font-sans;
+  }
+}
+
+@layer utilities {
+  [data-theme-preset]:not([data-theme-preset="default"]) .shadow-2xs {
+    box-shadow: var(--shadow-2xs);
+  }
+
+  [data-theme-preset]:not([data-theme-preset="default"]) .shadow-xs {
+    box-shadow: var(--shadow-xs);
+  }
+
+  [data-theme-preset]:not([data-theme-preset="default"]) .shadow-sm {
+    box-shadow: var(--shadow-sm);
+  }
+
+  [data-theme-preset]:not([data-theme-preset="default"]) .shadow {
+    box-shadow: var(--shadow);
+  }
+
+  [data-theme-preset]:not([data-theme-preset="default"]) .shadow-md {
+    box-shadow: var(--shadow-md);
+  }
+
+  [data-theme-preset]:not([data-theme-preset="default"]) .shadow-lg {
+    box-shadow: var(--shadow-lg);
+  }
+
+  [data-theme-preset]:not([data-theme-preset="default"]) .shadow-xl {
+    box-shadow: var(--shadow-xl);
+  }
+
+  [data-theme-preset]:not([data-theme-preset="default"]) .shadow-2xl {
+    box-shadow: var(--shadow-2xl);
+  }
+
+  html[data-font="inter"] body {
+    --font-sans: var(--font-inter);
+  }
+  html[data-font="notoSans"] body {
+    --font-sans: var(--font-noto-sans);
+  }
+  html[data-font="nunitoSans"] body {
+    --font-sans: var(--font-nunito-sans);
+  }
+  html[data-font="figtree"] body {
+    --font-sans: var(--font-figtree);
+  }
+  html[data-font="roboto"] body {
+    --font-sans: var(--font-roboto);
+  }
+  html[data-font="geist"] body {
+    --font-sans: var(--font-geist);
+  }
+  html[data-font="raleway"] body {
+    --font-sans: var(--font-raleway);
+  }
+  html[data-font="dmSans"] body {
+    --font-sans: var(--font-dm-sans);
+  }
+  html[data-font="publicSans"] body {
+    --font-sans: var(--font-public-sans);
+  }
+  html[data-font="outfit"] body {
+    --font-sans: var(--font-outfit);
+  }
+  html[data-font="geistMono"] body {
+    --font-sans: var(--font-geist-mono);
+  }
+  html[data-font="geistPixelSquare"] body {
+    --font-sans: var(--font-geist-pixel-square);
+  }
+  html[data-font="jetBrainsMono"] body {
+    --font-sans: var(--font-jetbrains-mono);
+  }
+  html[data-font="notoSerif"] body {
+    --font-sans: var(--font-noto-serif);
+  }
+  html[data-font="robotoSlab"] body {
+    --font-sans: var(--font-roboto-slab);
+  }
+  html[data-font="merriweather"] body {
+    --font-sans: var(--font-merriweather);
+  }
+  html[data-font="lora"] body {
+    --font-sans: var(--font-lora);
+  }
+  html[data-font="playfairDisplay"] body {
+    --font-sans: var(--font-playfair-display);
+  }
+}
+
+html {
+  overscroll-behavior: none;
+}
+
+.disable-transitions * {
+  transition: none !important;
+}
+
+[data-print-root] {
+  display: none;
+}
+
+@media print {
+  @page {
+    size: Letter;
+    margin: 0;
+  }
+
+  html,
+  body {
+    width: 8.5in !important;
+    height: 11in !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+  }
+
+  body > *:not([data-print-root]) {
+    display: none !important;
+  }
+
+  [data-print-root] {
+    display: block !important;
+    width: 8.5in !important;
+    height: 11in !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+    background: white !important;
+  }
+
+  [data-print-root] [data-print-paper] {
+    width: 8.5in !important;
+    height: 11in !important;
+    margin: 0 !important;
+    box-shadow: none !important;
+  }
+
+  [data-print-root] [data-print-paper],
+  [data-print-root] [data-print-paper] * {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { APP_CONFIG } from "@/config/app-config";
+import { fontVars } from "@/lib/fonts/registry";
+import { PREFERENCE_DEFAULTS } from "@/lib/preferences/preferences-config";
+import { ThemeBootScript } from "@/scripts/theme-boot";
+import { PreferencesStoreProvider } from "@/stores/preferences/preferences-provider";
+
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: APP_CONFIG.meta.title,
+  description: APP_CONFIG.meta.description,
+};
+
+export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
+  const { theme_mode, theme_preset, content_layout, navbar_style, sidebar_variant, sidebar_collapsible, font } =
+    PREFERENCE_DEFAULTS;
+
+  return (
+    <html
+      lang="de"
+      data-theme-mode={theme_mode}
+      data-theme-preset={theme_preset}
+      data-content-layout={content_layout}
+      data-navbar-style={navbar_style}
+      data-sidebar-variant={sidebar_variant}
+      data-sidebar-collapsible={sidebar_collapsible}
+      data-font={font}
+      suppressHydrationWarning
+    >
+      <head>
+        <ThemeBootScript />
+      </head>
+      <body className={`${fontVars} min-h-screen antialiased`}>
+        <TooltipProvider>
+          <PreferencesStoreProvider initialValues={PREFERENCE_DEFAULTS}>
+            {children}
+            <Toaster />
+          </PreferencesStoreProvider>
+        </TooltipProvider>
+      </body>
+    </html>
+  );
+}

frontend/src/components/CopyTicketButton.tsx

@@ -0,0 +1,40 @@
+import { Copy } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+
+type CopyTicketButtonProps = {
+  ticketNumber: string;
+};
+
+export function CopyTicketButton({ ticketNumber }: CopyTicketButtonProps) {
+  async function copyTicketNumber() {
+    try {
+      await navigator.clipboard.writeText(ticketNumber);
+      toast.success("Ticketnummer kopiert", {
+        description: ticketNumber
+      });
+    } catch (error) {
+      toast.error("Ticketnummer konnte nicht kopiert werden", {
+        description: error instanceof Error ? error.message : "Zwischenablage nicht verfügbar"
+      });
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      className="shrink-0"
+      onClick={(event) => {
+        event.stopPropagation();
+        void copyTicketNumber();
+      }}
+      title="Ticketnummer kopieren"
+    >
+      <Copy className="size-4" />
+      <span className="sr-only">Ticketnummer kopieren</span>
+    </Button>
+  );
+}

frontend/src/components/OrganizationSelect.tsx

@@ -0,0 +1,112 @@
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+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 { cn } from "@/lib/utils";
+import { getOrganizations } from "../api";
+import type { Organization } from "../types";
+
+type OrganizationSelectProps = {
+  value: string;
+  selectedName?: string | null;
+  onChange: (organization: Organization) => void;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+};
+
+export function OrganizationSelect({
+  value,
+  selectedName,
+  onChange,
+  disabled = false,
+  required = false,
+  placeholder = "Organisation wählen"
+}: OrganizationSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      setLoading(true);
+      try {
+        const result = await getOrganizations(search);
+
+        if (!cancelled) {
+          setOrganizations(result.organizations);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          toast.error("Organisationen konnten nicht geladen werden", {
+            description: error instanceof Error ? error.message : "Unbekannter Fehler"
+          });
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    if (open || value) {
+      void load();
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, search, value]);
+
+  const selectedOrganization = useMemo(() => organizations.find((organization) => organization.id === value) ?? null, [organizations, value]);
+  const label = selectedOrganization?.name ?? selectedName ?? "";
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn("h-9 w-full justify-between px-3 font-normal", !label && "text-muted-foreground")}
+        >
+          <span className="truncate">{label || placeholder}</span>
+          <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-[--radix-popover-trigger-width] p-0">
+        <Command shouldFilter={false}>
+          <CommandInput placeholder="Organisation suchen..." value={search} onValueChange={setSearch} />
+          <CommandList>
+            <CommandEmpty>{loading ? "Lädt..." : "Keine Organisation gefunden."}</CommandEmpty>
+            <CommandGroup>
+              {organizations.map((organization) => (
+                <CommandItem
+                  key={organization.id}
+                  value={organization.name}
+                  onSelect={() => {
+                    onChange(organization);
+                    setOpen(false);
+                    setSearch("");
+                  }}
+                >
+                  <span className="truncate">{organization.name}</span>
+                  <Check className={cn("ml-auto size-4", value === organization.id ? "opacity-100" : "opacity-0")} />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+        {required && !value ? <input className="sr-only" tabIndex={-1} required value="" onChange={() => undefined} /> : null}
+      </PopoverContent>
+    </Popover>
+  );
+}

frontend/src/components/ui/accordion.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

frontend/src/components/ui/alert.tsx

@@ -0,0 +1,80 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+        success:
+          "border-emerald-500/30 bg-emerald-500/10 text-emerald-800 dark:text-emerald-200",
+        warning:
+          "border-amber-500/30 bg-amber-500/10 text-amber-800 dark:text-amber-200",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

frontend/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }

frontend/src/components/ui/attachment.tsx

@@ -0,0 +1,204 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+const attachmentVariants = cva(
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default:
+          "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+      },
+    },
+  }
+)
+
+function Attachment({
+  className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done"
+  }) {
+  return (
+    <div
+      data-slot="attachment"
+      data-state={state}
+      data-size={size}
+      data-orientation={orientation}
+      className={cn(attachmentVariants({ size, orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+const attachmentMediaVariants = cva(
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image:
+          "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "icon",
+    },
+  }
+)
+
+function AttachmentMedia({
+  className,
+  variant = "icon",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>) {
+  return (
+    <div
+      data-slot="attachment-media"
+      data-variant={variant}
+      className={cn(attachmentMediaVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-content"
+      className={cn(
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTitle({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-title"
+      className={cn(
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-description"
+      className={cn(
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "max-w-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-actions"
+      className={cn(
+        "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentAction({
+  className,
+  variant,
+  size = "icon-xs",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="attachment-action"
+      variant={variant ?? "ghost"}
+      size={size}
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTrigger({
+  className,
+  asChild = false,
+  type,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="attachment-trigger"
+      type={asChild ? undefined : (type ?? "button")}
+      className={cn("absolute inset-0 z-10 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-group"
+      className={cn(
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Attachment,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentContent,
+  AttachmentTitle,
+  AttachmentDescription,
+  AttachmentActions,
+  AttachmentAction,
+  AttachmentTrigger,
+}

frontend/src/components/ui/avatar.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

frontend/src/components/ui/badge.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        success:
+          "bg-emerald-500/10 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",
+        warning:
+          "bg-amber-500/10 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300",
+        info:
+          "bg-muted text-muted-foreground",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

frontend/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,122 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <ChevronRightIcon />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

frontend/src/components/ui/bubble.tsx

@@ -0,0 +1,125 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="bubble-group"
+      className={cn("flex min-w-0 flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const bubbleVariants = cva(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default:
+          "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary:
+          "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted:
+          "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted:
+          "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline:
+          "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost:
+          "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive:
+          "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof bubbleVariants> & {
+    align?: "start" | "end"
+  }) {
+  return (
+    <div
+      data-slot="bubble"
+      data-variant={variant}
+      data-align={align}
+      className={cn(bubbleVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function BubbleContent({
+  asChild = false,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="bubble-content"
+      className={cn(
+        "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const bubbleReactionsVariants = cva(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4",
+      },
+      align: {
+        start: "left-3",
+        end: "right-3",
+      },
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end",
+    },
+  }
+)
+
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  align?: "start" | "end"
+  side?: "top" | "bottom"
+}) {
+  return (
+    <div
+      data-slot="bubble-reactions"
+      data-align={align}
+      data-side={side}
+      className={cn(bubbleReactionsVariants({ side, align }), className)}
+      {...props}
+    />
+  )
+}
+
+export { BubbleGroup, Bubble, BubbleContent, BubbleReactions }

frontend/src/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

frontend/src/components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

frontend/src/components/ui/calendar.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+import * as React from "react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-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}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground 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: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        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,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  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(locale?.code)}
+      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(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

frontend/src/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

frontend/src/components/ui/carousel.tsx

@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "inset-y-0 -left-12 my-auto"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "inset-y-0 -right-12 my-auto"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRightIcon />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+}

frontend/src/components/ui/chart.tsx

@@ -0,0 +1,373 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import type { TooltipValueType } from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+type TooltipNameType = number | string
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+  initialDimension?: {
+    width: number
+    height: number
+  }
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={initialDimension}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme ?? config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  } & Omit<
+    RechartsPrimitive.DefaultTooltipContentProps<
+      TooltipValueType,
+      TooltipNameType
+    >,
+    "accessibilityLayer"
+  >) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number"
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> & {
+  hideIcon?: boolean
+  nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

frontend/src/components/ui/checkbox.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

frontend/src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

frontend/src/components/ui/combobox.tsx

@@ -0,0 +1,299 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}

frontend/src/components/ui/command.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "@/components/ui/input-group"
+import { SearchIcon, CheckIcon } from "lucide-react"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
+          className
+        )}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

frontend/src/components/ui/context-menu.tsx

@@ -0,0 +1,263 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn("z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,168 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

frontend/src/components/ui/direction.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Direction } from "radix-ui"
+
+function DirectionProvider({
+  dir,
+  direction,
+  children,
+}: React.ComponentProps<typeof Direction.DirectionProvider> & {
+  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
+}) {
+  return (
+    <Direction.DirectionProvider dir={direction ?? dir}>
+      {children}
+    </Direction.DirectionProvider>
+  )
+}
+
+const useDirection = Direction.useDirection
+
+export { DirectionProvider, useDirection }

frontend/src/components/ui/drawer.tsx

@@ -0,0 +1,134 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

frontend/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,269 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

frontend/src/components/ui/empty.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn(
+        "font-heading text-sm font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

frontend/src/components/ui/field.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

frontend/src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

frontend/src/components/ui/input-group.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

frontend/src/components/ui/input-otp.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+
+import { cn } from "@/lib/utils"
+import { MinusIcon } from "lucide-react"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon
+      />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

frontend/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

frontend/src/components/ui/item.tsx

@@ -0,0 +1,196 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

frontend/src/components/ui/kbd.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

frontend/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

frontend/src/components/ui/marker.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const markerVariants = cva(
+  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        separator:
+          "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+        border: "border-b border-border pb-2",
+      },
+    },
+  }
+)
+
+function Marker({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof markerVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="marker"
+      data-variant={variant}
+      className={cn(markerVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="marker-icon"
+      aria-hidden="true"
+      className={cn(
+        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="marker-content"
+      className={cn(
+        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Marker, MarkerIcon, MarkerContent, markerVariants }

frontend/src/components/ui/menubar.tsx

@@ -0,0 +1,280 @@
+"use client"
+
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn("z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-sm font-medium data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn("z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}

frontend/src/components/ui/message-scroller.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import {
+  MessageScroller as MessageScrollerPrimitive,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+} from "@shadcn/react/message-scroller"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ArrowDownIcon } from "lucide-react"
+
+function MessageScrollerProvider(
+  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>
+) {
+  return <MessageScrollerPrimitive.Provider {...props} />
+}
+
+function MessageScroller({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {
+  return (
+    <MessageScrollerPrimitive.Root
+      data-slot="message-scroller"
+      className={cn(
+        "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
+  return (
+    <MessageScrollerPrimitive.Viewport
+      data-slot="message-scroller-viewport"
+      className={cn(
+        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {
+  return (
+    <MessageScrollerPrimitive.Content
+      data-slot="message-scroller-content"
+      className={cn("flex h-max min-h-full flex-col gap-6", className)}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerItem({
+  className,
+  scrollAnchor = false,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {
+  return (
+    <MessageScrollerPrimitive.Item
+      data-slot="message-scroller-item"
+      scrollAnchor={scrollAnchor}
+      className={cn(
+        "min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerButton({
+  direction = "end",
+  className,
+  children,
+  render,
+  variant = "secondary",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <MessageScrollerPrimitive.Button
+      data-slot="message-scroller-button"
+      data-direction={direction}
+      data-variant={variant}
+      data-size={size}
+      direction={direction}
+      className={cn(
+        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+        className
+      )}
+      render={render ?? <Button variant={variant} size={size} />}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <ArrowDownIcon
+          />
+          <span className="sr-only">
+            {direction === "end" ? "Scroll to end" : "Scroll to start"}
+          </span>
+        </>
+      )}
+    </MessageScrollerPrimitive.Button>
+  )
+}
+
+export {
+  MessageScrollerProvider,
+  MessageScroller,
+  MessageScrollerViewport,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerButton,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+}

frontend/src/components/ui/message.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function MessageGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-group"
+      className={cn("flex min-w-0 flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function Message({
+  className,
+  align = "start",
+  ...props
+}: React.ComponentProps<"div"> & { align?: "start" | "end" }) {
+  return (
+    <div
+      data-slot="message"
+      data-align={align}
+      className={cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageAvatar({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-avatar"
+      className={cn(
+        "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-content"
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-header"
+      className={cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-footer"
+      className={cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  MessageGroup,
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageHeader,
+}

frontend/src/components/ui/native-select.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default"
+}
+
+function NativeSelect({
+  className,
+  size = "default",
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        {...props}
+      />
+      <ChevronDownIcon className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon" />
+    </div>
+  )
+}
+
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }

frontend/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,164 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

frontend/src/components/ui/pagination.tsx

@@ -0,0 +1,129 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      asChild
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+    >
+      <a
+        aria-current={isActive ? "page" : undefined}
+        data-slot="pagination-link"
+        data-active={isActive}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

frontend/src/components/ui/popover.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}

frontend/src/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="size-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

frontend/src/components/ui/radio-group.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid w-full gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center"
+      >
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

frontend/src/components/ui/resizable.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

frontend/src/components/ui/scroll-area.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

frontend/src/components/ui/select.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

frontend/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

frontend/src/components/ui/sheet.tsx

@@ -0,0 +1,147 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-3 right-3"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

frontend/src/components/ui/sidebar.tsx

@@ -0,0 +1,702 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+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,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
+
+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 = "3rem"
+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}>
+      <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 flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...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(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          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 hidden text-sidebar-foreground 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"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // 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="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {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="ghost"
+      size="icon-sm"
+      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(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "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",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[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(
+        "relative flex w-full flex-1 flex-col bg-background 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("h-8 w-full bg-background 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("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 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.Root : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        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-0", 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 group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_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.Root : "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.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded: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(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    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(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border 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.Root : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        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,
+}

frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

frontend/src/components/ui/slider.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

frontend/src/components/ui/sonner.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

frontend/src/components/ui/spinner.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }

frontend/src/components/ui/switch.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

frontend/src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

frontend/src/components/ui/tabs.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

frontend/src/components/ui/toggle-group.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

frontend/src/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default:
+          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

frontend/src/config/app-config.ts

@@ -0,0 +1,7 @@
+export const APP_CONFIG = {
+  name: "TicketTracker",
+  meta: {
+    title: "TicketTracker",
+    description: "Zeiterfassung und Auswertung fuer Tickets",
+  },
+} as const;

frontend/src/format.ts

@@ -0,0 +1,59 @@
+export function formatTimer(totalSeconds: number) {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return [hours, minutes, seconds].map((part) => String(part).padStart(2, "0")).join(":");
+}
+
+export function formatMinutes(minutes: number) {
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+
+  if (hours === 0) {
+    return `${rest} min`;
+  }
+
+  if (rest === 0) {
+    return `${hours} h`;
+  }
+
+  return `${hours} h ${rest} min`;
+}
+
+export function formatDateTime(value: string) {
+  return new Intl.DateTimeFormat("de-DE", {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(new Date(value));
+}
+
+export function formatDate(value: string) {
+  return new Intl.DateTimeFormat("de-DE", {
+    weekday: "long",
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  }).format(new Date(value));
+}
+
+export function formatTime(value: string) {
+  return new Intl.DateTimeFormat("de-DE", {
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(new Date(value));
+}
+
+export function formatTimeRange(start: string, end: string) {
+  return `${formatTime(start)} - ${formatTime(end)}`;
+}
+
+export function currentMonth() {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
+}
+
+export function currentDay() {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+}

frontend/src/hooks/use-lg.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const LG_BREAKPOINT = 1024;
+
+export function useIsLg() {
+  const [isLg, setIsLg] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(min-width: ${LG_BREAKPOINT}px)`);
+    const onChange = () => {
+      setIsLg(window.innerWidth >= LG_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsLg(window.innerWidth >= LG_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isLg;
+}

frontend/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

frontend/src/lib/cookie.client.ts

@@ -0,0 +1,24 @@
+// Client-side cookie utilities.
+// These functions manage cookies in the browser only.
+// Server actions handle cookie updates on the server side.
+
+function writeClientCookie(serializedCookie: string) {
+  // biome-ignore lint/suspicious/noDocumentCookie: This project still uses document.cookie for broad browser support.
+  document.cookie = serializedCookie;
+}
+
+export function setClientCookie(key: string, value: string, days = 7) {
+  const expires = new Date(Date.now() + days * 864e5).toUTCString();
+  writeClientCookie(`${key}=${value}; expires=${expires}; path=/`);
+}
+
+export function getClientCookie(key: string) {
+  return document.cookie
+    .split("; ")
+    .find((row) => row.startsWith(`${key}=`))
+    ?.split("=")[1];
+}
+
+export function deleteClientCookie(key: string) {
+  writeClientCookie(`${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`);
+}

frontend/src/lib/fonts/registry.ts

@@ -0,0 +1,23 @@
+const systemSans = {
+  variable: "[--font-geist:ui-sans-serif,system-ui,sans-serif] [--font-geist-mono:ui-monospace,SFMono-Regular,Menlo,monospace]",
+};
+
+export const fontRegistry = {
+  geist: {
+    label: "System",
+    font: systemSans,
+  },
+} as const;
+
+export type FontKey = keyof typeof fontRegistry;
+
+export const fontKeys = Object.keys(fontRegistry) as FontKey[];
+
+export const fontVars = Object.values(fontRegistry)
+  .map(({ font }) => font.variable)
+  .join(" ");
+
+export const fontOptions = fontKeys.map((key) => ({
+  key,
+  label: fontRegistry[key].label,
+}));

frontend/src/lib/local-storage.client.ts

@@ -0,0 +1,19 @@
+"use client";
+
+export function setLocalStorageValue(key: string, value: string) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch (error) {
+    if (process.env.NODE_ENV !== "production") {
+      console.error("[localStorage] Failed to write value:", error);
+    }
+  }
+}
+
+export function getLocalStorageValue(key: string): string | null {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}

frontend/src/lib/preferences/layout.ts

@@ -0,0 +1,32 @@
+// Sidebar Variant
+const SIDEBAR_VARIANT_OPTIONS = [
+  { label: "Sidebar", value: "sidebar" },
+  { label: "Inset", value: "inset" },
+  { label: "Floating", value: "floating" },
+] as const;
+export const SIDEBAR_VARIANT_VALUES = SIDEBAR_VARIANT_OPTIONS.map((v) => v.value);
+export type SidebarVariant = (typeof SIDEBAR_VARIANT_VALUES)[number];
+
+// Sidebar Collapsible
+const SIDEBAR_COLLAPSIBLE_OPTIONS = [
+  { label: "Icon", value: "icon" },
+  { label: "Offcanvas", value: "offcanvas" },
+] as const;
+export const SIDEBAR_COLLAPSIBLE_VALUES = SIDEBAR_COLLAPSIBLE_OPTIONS.map((v) => v.value);
+export type SidebarCollapsible = (typeof SIDEBAR_COLLAPSIBLE_VALUES)[number];
+
+// Content Layout
+const CONTENT_LAYOUT_OPTIONS = [
+  { label: "Centered", value: "centered" },
+  { label: "Full Width", value: "full-width" },
+] as const;
+export const CONTENT_LAYOUT_VALUES = CONTENT_LAYOUT_OPTIONS.map((v) => v.value);
+export type ContentLayout = (typeof CONTENT_LAYOUT_VALUES)[number];
+
+// Navbar Style
+const NAVBAR_STYLE_OPTIONS = [
+  { label: "Sticky", value: "sticky" },
+  { label: "Scroll", value: "scroll" },
+] as const;
+export const NAVBAR_STYLE_VALUES = NAVBAR_STYLE_OPTIONS.map((v) => v.value);
+export type NavbarStyle = (typeof NAVBAR_STYLE_VALUES)[number];

frontend/src/lib/preferences/preference-runtime.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { PREFERENCE_REGISTRY, type PreferenceKey, type PreferenceValueMap } from "./preferences-config";
+import type { ResolvedThemeMode } from "./theme";
+import { applyThemeMode } from "./theme-utils";
+
+export function applyPreference<K extends PreferenceKey>(
+  key: K,
+  value: PreferenceValueMap[K],
+): ResolvedThemeMode | undefined {
+  if (key === "theme_mode") {
+    return applyThemeMode(value as PreferenceValueMap["theme_mode"]);
+  }
+
+  document.documentElement.setAttribute(PREFERENCE_REGISTRY[key].attribute, value);
+  return undefined;
+}

frontend/src/lib/preferences/preferences-config.ts

@@ -0,0 +1,134 @@
+/**
+ * How each preference should be saved.
+ *
+ * "client-cookie"  → write cookie on the browser only.
+ * "server-cookie"  → write cookie through a Server Action.
+ * "localStorage"   → save only on the client (non-layout stuff).
+ * "none"           → no saving, resets on reload.
+ *
+ * Layout-critical prefs (sidebar_variant / sidebar_collapsible)
+ * must stay consistent during SSR → so they can’t use localStorage.
+ * Others are flexible and can use any persistence.
+ */
+
+import { fontKeys } from "@/lib/fonts/registry";
+
+import {
+  CONTENT_LAYOUT_VALUES,
+  NAVBAR_STYLE_VALUES,
+  SIDEBAR_COLLAPSIBLE_VALUES,
+  SIDEBAR_VARIANT_VALUES,
+} from "./layout";
+import { THEME_MODE_VALUES, THEME_PRESET_VALUES } from "./theme";
+
+export type PreferencePersistence = "none" | "client-cookie" | "server-cookie" | "localStorage";
+
+type LayoutPersistence = Exclude<PreferencePersistence, "localStorage">;
+
+type PreferenceDefinition<
+  Values extends readonly string[],
+  Persistence extends PreferencePersistence,
+  Attribute extends `data-${string}`,
+> = {
+  values: Values;
+  defaultValue: Values[number];
+  persistence: Persistence;
+  attribute: Attribute;
+};
+
+function definePreference<
+  const Values extends readonly string[],
+  const Persistence extends PreferencePersistence,
+  const Attribute extends `data-${string}`,
+>(definition: PreferenceDefinition<Values, Persistence, Attribute>) {
+  return definition;
+}
+
+function defineSSRPreference<
+  const Values extends readonly string[],
+  const Persistence extends LayoutPersistence,
+  const Attribute extends `data-${string}`,
+>(definition: PreferenceDefinition<Values, Persistence, Attribute>) {
+  return definition;
+}
+
+export const PREFERENCE_REGISTRY = {
+  theme_mode: definePreference({
+    values: THEME_MODE_VALUES,
+    defaultValue: "light",
+    persistence: "localStorage",
+    attribute: "data-theme-mode",
+  }),
+
+  theme_preset: definePreference({
+    values: THEME_PRESET_VALUES,
+    defaultValue: "default",
+    persistence: "client-cookie",
+    attribute: "data-theme-preset",
+  }),
+
+  font: definePreference({
+    values: fontKeys,
+    defaultValue: "geist",
+    persistence: "client-cookie",
+    attribute: "data-font",
+  }),
+
+  content_layout: definePreference({
+    values: CONTENT_LAYOUT_VALUES,
+    defaultValue: "centered",
+    persistence: "client-cookie",
+    attribute: "data-content-layout",
+  }),
+
+  navbar_style: definePreference({
+    values: NAVBAR_STYLE_VALUES,
+    defaultValue: "sticky",
+    persistence: "client-cookie",
+    attribute: "data-navbar-style",
+  }),
+
+  sidebar_variant: defineSSRPreference({
+    values: SIDEBAR_VARIANT_VALUES,
+    defaultValue: "sidebar",
+    persistence: "client-cookie",
+    attribute: "data-sidebar-variant",
+  }),
+
+  sidebar_collapsible: defineSSRPreference({
+    values: SIDEBAR_COLLAPSIBLE_VALUES,
+    defaultValue: "icon",
+    persistence: "client-cookie",
+    attribute: "data-sidebar-collapsible",
+  }),
+} as const;
+
+export type PreferenceKey = keyof typeof PREFERENCE_REGISTRY;
+
+export type PreferenceValueMap = {
+  [K in PreferenceKey]: (typeof PREFERENCE_REGISTRY)[K]["values"][number];
+};
+
+export const PREFERENCE_KEYS = Object.freeze(Object.keys(PREFERENCE_REGISTRY) as PreferenceKey[]);
+
+export function getPreferencePersistence(key: PreferenceKey): PreferencePersistence {
+  return PREFERENCE_REGISTRY[key].persistence;
+}
+
+export const PREFERENCE_DEFAULTS = Object.fromEntries(
+  PREFERENCE_KEYS.map((key) => [key, PREFERENCE_REGISTRY[key].defaultValue]),
+) as PreferenceValueMap;
+
+export function parsePreference<K extends PreferenceKey>(
+  key: K,
+  rawValue: string | null | undefined,
+): PreferenceValueMap[K] {
+  const definition = PREFERENCE_REGISTRY[key];
+  const allowedValues = definition.values as readonly string[];
+
+  if (rawValue && allowedValues.includes(rawValue)) {
+    return rawValue as PreferenceValueMap[K];
+  }
+
+  return definition.defaultValue as PreferenceValueMap[K];
+}

frontend/src/lib/preferences/preferences-storage.ts

@@ -0,0 +1,35 @@
+"use client";
+
+import { setValueToCookie } from "@/server/server-actions";
+
+import { setClientCookie } from "../cookie.client";
+import { setLocalStorageValue } from "../local-storage.client";
+import {
+  getPreferencePersistence,
+  type PreferenceKey,
+  type PreferencePersistence,
+  type PreferenceValueMap,
+} from "./preferences-config";
+
+async function persistByMode(mode: PreferencePersistence, key: string, value: string): Promise<void> {
+  switch (mode) {
+    case "none":
+      return;
+
+    case "client-cookie":
+      setClientCookie(key, value);
+      return;
+
+    case "server-cookie":
+      await setValueToCookie(key, value);
+      return;
+
+    case "localStorage":
+      setLocalStorageValue(key, value);
+      return;
+  }
+}
+
+export function persistPreference<K extends PreferenceKey>(key: K, value: PreferenceValueMap[K]): Promise<void> {
+  return persistByMode(getPreferencePersistence(key), key, value);
+}

frontend/src/lib/preferences/theme-utils.ts

@@ -0,0 +1,38 @@
+import type { ResolvedThemeMode, ThemeMode } from "./theme";
+
+function resolveThemeMode(mode: ThemeMode): ResolvedThemeMode {
+  if (mode === "system") {
+    const prefersDark = typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)")?.matches;
+    return prefersDark ? "dark" : "light";
+  }
+  return mode === "dark" ? "dark" : "light";
+}
+
+export function applyThemeMode(mode: ThemeMode): ResolvedThemeMode {
+  const resolved = resolveThemeMode(mode);
+  const doc = document.documentElement;
+  doc.setAttribute("data-theme-mode", mode);
+  doc.classList.add("disable-transitions");
+  doc.classList.toggle("dark", resolved === "dark");
+  doc.style.colorScheme = resolved;
+  requestAnimationFrame(() => {
+    doc.classList.remove("disable-transitions");
+  });
+  return resolved;
+}
+
+export function subscribeToSystemTheme(onChange: (mode: ResolvedThemeMode) => void): () => void {
+  if (typeof window === "undefined") return () => undefined;
+  const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+  if (!media) return () => undefined;
+
+  const listener = (event: MediaQueryListEvent) => {
+    onChange(event.matches ? "dark" : "light");
+  };
+
+  media.addEventListener("change", listener);
+
+  return () => {
+    media.removeEventListener("change", listener);
+  };
+}

frontend/src/lib/preferences/theme.ts

@@ -0,0 +1,52 @@
+const THEME_MODE_OPTIONS = [
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" },
+  { label: "System", value: "system" },
+] as const;
+
+export const THEME_MODE_VALUES = THEME_MODE_OPTIONS.map((o) => o.value);
+export type ThemeMode = (typeof THEME_MODE_VALUES)[number];
+export type ResolvedThemeMode = "light" | "dark";
+
+// --- generated:themePresets:start ---
+
+export const THEME_PRESET_OPTIONS = [
+  {
+    label: "Default",
+    value: "default",
+    primary: {
+      light: "oklch(0.205 0 0)",
+      dark: "oklch(0.922 0 0)",
+    },
+  },
+  {
+    label: "Brutalist",
+    value: "brutalist",
+    primary: {
+      light: "oklch(0.6489 0.237 26.9728)",
+      dark: "oklch(0.7044 0.1872 23.1858)",
+    },
+  },
+  {
+    label: "Soft Pop",
+    value: "soft-pop",
+    primary: {
+      light: "oklch(0.5106 0.2301 276.9656)",
+      dark: "oklch(0.6801 0.1583 276.9349)",
+    },
+  },
+  {
+    label: "Tangerine",
+    value: "tangerine",
+    primary: {
+      light: "oklch(0.64 0.17 36.44)",
+      dark: "oklch(0.64 0.17 36.44)",
+    },
+  },
+] as const;
+
+export const THEME_PRESET_VALUES = THEME_PRESET_OPTIONS.map((p) => p.value);
+
+export type ThemePreset = (typeof THEME_PRESET_OPTIONS)[number]["value"];
+
+// --- generated:themePresets:end ---

frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

frontend/src/scripts/theme-boot.tsx

@@ -0,0 +1,78 @@
+/**
+ * Boot script that reads user preference values from cookies or localStorage
+ * based on the configured persistence mode.
+ *
+ * Runs early in <head> to apply the correct data attributes before hydration,
+ * preventing layout or theme flicker and keeping RootLayout fully static.
+ */
+import { PREFERENCE_REGISTRY } from "@/lib/preferences/preferences-config";
+
+export function ThemeBootScript() {
+  const registry = JSON.stringify(PREFERENCE_REGISTRY);
+
+  const code = `
+    (function () {
+      try {
+        var root = document.documentElement;
+        var REGISTRY = ${registry};
+
+        function readCookie(name) {
+          var match = document.cookie.split("; ").find(function(c) {
+            return c.startsWith(name + "=");
+          });
+          return match ? decodeURIComponent(match.split("=")[1]) : null;
+        }
+
+        function readLocal(name) {
+          try {
+            return window.localStorage.getItem(name) || (name === "theme_mode" ? window.localStorage.getItem("tickettracker.theme") : null);
+          } catch (e) {
+            return null;
+          }
+        }
+
+        function readPreference(key, definition) {
+          var mode = definition.persistence;
+          var value = null;
+
+          if (mode === "localStorage") {
+            value = readLocal(key);
+          }
+
+          if (!value && (mode === "client-cookie" || mode === "server-cookie")) {
+            value = readCookie(key);
+          }
+
+          return definition.values.indexOf(value) >= 0 ? value : definition.defaultValue;
+        }
+
+        var preferences = {};
+
+        Object.keys(REGISTRY).forEach(function(key) {
+          var definition = REGISTRY[key];
+          var value = readPreference(key, definition);
+
+          preferences[key] = value;
+          root.setAttribute(definition.attribute, value);
+        });
+
+        var mode = preferences.theme_mode;
+        var resolvedMode =
+          mode === "system" && window.matchMedia
+            ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+            : mode === "dark"
+              ? "dark"
+              : "light";
+
+        root.classList.toggle("dark", resolvedMode === "dark");
+        root.style.colorScheme = resolvedMode;
+
+      } catch (e) {
+        console.warn("ThemeBootScript error:", e);
+      }
+    })();
+  `;
+
+  /* biome-ignore lint/security/noDangerouslySetInnerHtml: required for pre-hydration boot script */
+  return <script dangerouslySetInnerHTML={{ __html: code }} />;
+}

frontend/src/server/server-actions.ts

@@ -0,0 +1,40 @@
+"use server";
+
+import { cookies } from "next/headers";
+
+import {
+  getPreferencePersistence,
+  PREFERENCE_REGISTRY,
+  type PreferenceKey,
+  type PreferenceValueMap,
+  parsePreference,
+} from "@/lib/preferences/preferences-config";
+
+export async function getValueFromCookie(key: string): Promise<string | undefined> {
+  const cookieStore = await cookies();
+  return cookieStore.get(key)?.value;
+}
+
+export async function setValueToCookie(
+  key: string,
+  value: string,
+  options: { path?: string; maxAge?: number } = {},
+): Promise<void> {
+  const cookieStore = await cookies();
+  cookieStore.set(key, value, {
+    path: options.path ?? "/",
+    maxAge: options.maxAge ?? 60 * 60 * 24 * 7, // default: 7 days
+  });
+}
+
+export async function getPreference<K extends PreferenceKey>(key: K): Promise<PreferenceValueMap[K]> {
+  const definition = PREFERENCE_REGISTRY[key];
+  const persistence = getPreferencePersistence(key);
+
+  if (persistence !== "client-cookie" && persistence !== "server-cookie") {
+    return definition.defaultValue as PreferenceValueMap[K];
+  }
+
+  const cookieStore = await cookies();
+  return parsePreference(key, cookieStore.get(key)?.value.trim());
+}

frontend/src/stores/preferences/preferences-provider.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { createContext, use, useEffect, useState } from "react";
+
+import { type StoreApi, useStore } from "zustand";
+
+import {
+  PREFERENCE_DEFAULTS,
+  PREFERENCE_KEYS,
+  PREFERENCE_REGISTRY,
+  type PreferenceKey,
+  type PreferenceValueMap,
+  parsePreference,
+} from "@/lib/preferences/preferences-config";
+import { applyThemeMode, subscribeToSystemTheme } from "@/lib/preferences/theme-utils";
+
+import { createPreferencesStore, type PreferencesState } from "./preferences-store";
+
+const PreferencesStoreContext = createContext<StoreApi<PreferencesState> | null>(null);
+
+function readDomPreference<K extends PreferenceKey>(key: K): PreferenceValueMap[K] {
+  const definition = PREFERENCE_REGISTRY[key];
+  const rawValue = document.documentElement.getAttribute(definition.attribute);
+
+  return parsePreference(key, rawValue);
+}
+
+function readDomPreferences(): PreferenceValueMap {
+  const values = { ...PREFERENCE_DEFAULTS };
+
+  function assignPreference<K extends PreferenceKey>(key: K) {
+    values[key] = readDomPreference(key);
+  }
+
+  for (const key of PREFERENCE_KEYS) assignPreference(key);
+  return values;
+}
+
+export function PreferencesStoreProvider({
+  children,
+  initialValues,
+}: {
+  children: React.ReactNode;
+  initialValues: PreferenceValueMap;
+}) {
+  const [store] = useState<StoreApi<PreferencesState>>(() => createPreferencesStore(initialValues));
+
+  useEffect(() => {
+    store.setState({
+      values: readDomPreferences(),
+      resolvedThemeMode: document.documentElement.classList.contains("dark") ? "dark" : "light",
+      isSynced: true,
+    });
+  }, [store]);
+
+  useEffect(() => {
+    let unsubscribeMedia: (() => void) | undefined;
+
+    const subscribeForMode = (mode: PreferenceValueMap["theme_mode"]) => {
+      unsubscribeMedia?.();
+      unsubscribeMedia = undefined;
+
+      if (mode === "system") {
+        unsubscribeMedia = subscribeToSystemTheme(() => {
+          store.setState({ resolvedThemeMode: applyThemeMode("system") });
+        });
+      }
+    };
+
+    subscribeForMode(store.getState().values.theme_mode);
+
+    const unsubscribeStore = store.subscribe((state, previousState) => {
+      if (state.values.theme_mode !== previousState.values.theme_mode) {
+        subscribeForMode(state.values.theme_mode);
+      }
+    });
+
+    return () => {
+      unsubscribeMedia?.();
+      unsubscribeStore();
+    };
+  }, [store]);
+
+  return <PreferencesStoreContext.Provider value={store}>{children}</PreferencesStoreContext.Provider>;
+}
+
+export function usePreferencesStore<T>(selector: (state: PreferencesState) => T): T {
+  const store = use(PreferencesStoreContext) as StoreApi<PreferencesState> | null;
+  if (!store) throw new Error("Missing PreferencesStoreProvider");
+  return useStore(store, selector);
+}

frontend/src/stores/preferences/preferences-store.ts

@@ -0,0 +1,63 @@
+import { createStore } from "zustand/vanilla";
+
+import { applyPreference } from "@/lib/preferences/preference-runtime";
+import {
+  PREFERENCE_DEFAULTS,
+  PREFERENCE_KEYS,
+  type PreferenceKey,
+  type PreferenceValueMap,
+} from "@/lib/preferences/preferences-config";
+import { persistPreference } from "@/lib/preferences/preferences-storage";
+import type { ResolvedThemeMode } from "@/lib/preferences/theme";
+
+export type PreferencesState = {
+  values: PreferenceValueMap;
+  resolvedThemeMode: ResolvedThemeMode;
+  isSynced: boolean;
+  setPreference: <K extends PreferenceKey>(key: K, value: PreferenceValueMap[K]) => void;
+  resetPreferences: () => void;
+};
+
+export const createPreferencesStore = (initialValues: Partial<PreferenceValueMap> = {}) => {
+  const values: PreferenceValueMap = {
+    ...PREFERENCE_DEFAULTS,
+    ...initialValues,
+  };
+
+  return createStore<PreferencesState>()((set) => ({
+    values,
+    resolvedThemeMode: values.theme_mode === "dark" ? "dark" : "light",
+    isSynced: false,
+
+    setPreference: (key, value) => {
+      const resolvedThemeMode = applyPreference(key, value);
+
+      set((state) => ({
+        values: {
+          ...state.values,
+          [key]: value,
+        } as PreferenceValueMap,
+        ...(resolvedThemeMode ? { resolvedThemeMode } : {}),
+      }));
+
+      void persistPreference(key, value);
+    },
+
+    resetPreferences: () => {
+      let resolvedThemeMode: ResolvedThemeMode = "light";
+
+      for (const key of PREFERENCE_KEYS) {
+        const value = PREFERENCE_DEFAULTS[key];
+        const resolved = applyPreference(key, value);
+
+        if (resolved) resolvedThemeMode = resolved;
+        void persistPreference(key, value);
+      }
+
+      set({
+        values: { ...PREFERENCE_DEFAULTS },
+        resolvedThemeMode,
+      });
+    },
+  }));
+};

frontend/src/styles/presets/brutalist.css

@@ -0,0 +1,89 @@
+/* 
+label: Brutalist
+value: brutalist 
+*/
+
+:root[data-theme-preset="brutalist"] {
+  --radius: 0px;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.6489 0.237 26.9728);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.968 0.211 109.7692);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.9551 0 0);
+  --muted-foreground: oklch(0.3211 0 0);
+  --accent: oklch(0.5635 0.2408 260.8178);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0 0 0);
+  --border: oklch(0 0 0);
+  --input: oklch(0 0 0);
+  --ring: oklch(0.6489 0.237 26.9728);
+  --chart-1: oklch(0.6489 0.237 26.9728);
+  --chart-2: oklch(0.968 0.211 109.7692);
+  --chart-3: oklch(0.5635 0.2408 260.8178);
+  --chart-4: oklch(0.7323 0.2492 142.4953);
+  --chart-5: oklch(0.5931 0.2726 328.3634);
+  --sidebar: oklch(0.9551 0 0);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0.6489 0.237 26.9728);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.5635 0.2408 260.8178);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(0 0 0);
+  --sidebar-ring: oklch(0.6489 0.237 26.9728);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0 0 0);
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 2px 4px -1px hsl(0 0% 0% / 1);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 4px 6px -1px hsl(0 0% 0% / 1);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 8px 10px -1px hsl(0 0% 0% / 1);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.5);
+}
+
+.dark:root[data-theme-preset="brutalist"] {
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.3211 0 0);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.3211 0 0);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(0.7044 0.1872 23.1858);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.9691 0.2005 109.6228);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.3211 0 0);
+  --muted-foreground: oklch(0.8452 0 0);
+  --accent: oklch(0.6755 0.1765 252.2592);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(1 0 0);
+  --border: oklch(1 0 0);
+  --input: oklch(1 0 0);
+  --ring: oklch(0.7044 0.1872 23.1858);
+  --chart-1: oklch(0.7044 0.1872 23.1858);
+  --chart-2: oklch(0.9691 0.2005 109.6228);
+  --chart-3: oklch(0.6755 0.1765 252.2592);
+  --chart-4: oklch(0.7395 0.2268 142.8504);
+  --chart-5: oklch(0.6131 0.2458 328.0714);
+  --sidebar: oklch(0 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(0.7044 0.1872 23.1858);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.6755 0.1765 252.2592);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(1 0 0);
+  --sidebar-ring: oklch(0.7044 0.1872 23.1858);
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 2px 4px -1px hsl(0 0% 0% / 1);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 4px 6px -1px hsl(0 0% 0% / 1);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 8px 10px -1px hsl(0 0% 0% / 1);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.5);
+}

frontend/src/styles/presets/soft-pop.css

@@ -0,0 +1,89 @@
+/* 
+label: Soft Pop
+value: soft-pop 
+*/
+
+:root[data-theme-preset="soft-pop"] {
+  --radius: 1rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.5106 0.2301 276.9656);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.7038 0.123 182.5025);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.9551 0 0);
+  --muted-foreground: oklch(0.3211 0 0);
+  --accent: oklch(0.7686 0.1647 70.0804);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.6368 0.2078 25.3313);
+  --border: oklch(0 0 0);
+  --input: oklch(0.5555 0 0);
+  --ring: oklch(0.7853 0.1041 274.7134);
+  --chart-1: oklch(0.5106 0.2301 276.9656);
+  --chart-2: oklch(0.7038 0.123 182.5025);
+  --chart-3: oklch(0.7686 0.1647 70.0804);
+  --chart-4: oklch(0.6559 0.2118 354.3084);
+  --chart-5: oklch(0.7227 0.192 149.5793);
+  --sidebar: oklch(0.9789 0.0082 121.6272);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0.5106 0.2301 276.9656);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.7686 0.1647 70.0804);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(0 0 0);
+  --sidebar-ring: oklch(0.7853 0.1041 274.7134);
+  --background: oklch(0.9789 0.0082 121.6272);
+  --foreground: oklch(0 0 0);
+  --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03);
+  --shadow-xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03);
+  --shadow-sm: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow-md: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow-lg: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow-xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.13);
+}
+
+.dark:root[data-theme-preset="soft-pop"] {
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.2455 0.0217 257.2823);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.2455 0.0217 257.2823);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(0.6801 0.1583 276.9349);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.7845 0.1325 181.912);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.3211 0 0);
+  --muted-foreground: oklch(0.8452 0 0);
+  --accent: oklch(0.879 0.1534 91.6054);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.7106 0.1661 22.2162);
+  --border: oklch(0.4459 0 0);
+  --input: oklch(1 0 0);
+  --ring: oklch(0.6801 0.1583 276.9349);
+  --chart-1: oklch(0.6801 0.1583 276.9349);
+  --chart-2: oklch(0.7845 0.1325 181.912);
+  --chart-3: oklch(0.879 0.1534 91.6054);
+  --chart-4: oklch(0.7253 0.1752 349.7607);
+  --chart-5: oklch(0.8003 0.1821 151.711);
+  --sidebar: oklch(0 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(0.6801 0.1583 276.9349);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.879 0.1534 91.6054);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(1 0 0);
+  --sidebar-ring: oklch(0.6801 0.1583 276.9349);
+  --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03);
+  --shadow-xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03);
+  --shadow-sm: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow-md: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow-lg: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow-xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05);
+  --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.13);
+}

frontend/src/styles/presets/tangerine.css

@@ -0,0 +1,89 @@
+/* 
+label: Tangerine
+value: tangerine  
+*/
+
+:root[data-theme-preset="tangerine"] {
+  --radius: 0.625rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.32 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.32 0 0);
+  --primary: oklch(0.64 0.17 36.44);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.97 0 264.54);
+  --secondary-foreground: oklch(0.45 0.03 256.8);
+  --muted: oklch(0.98 0 247.84);
+  --muted-foreground: oklch(0.55 0.02 264.36);
+  --accent: oklch(0.91 0.02 243.82);
+  --accent-foreground: oklch(0.38 0.14 265.52);
+  --destructive: oklch(0.64 0.21 25.33);
+  --border: oklch(0.9 0.01 247.88);
+  --input: oklch(0.97 0 264.54);
+  --ring: oklch(0.64 0.17 36.44);
+  --chart-1: oklch(0.72 0.06 248.68);
+  --chart-2: oklch(0.79 0.09 35.96);
+  --chart-3: oklch(0.58 0.08 254.16);
+  --chart-4: oklch(0.5 0.08 259.49);
+  --chart-5: oklch(0.42 0.1 264.03);
+  --sidebar: oklch(0.9 0 258.33);
+  --sidebar-foreground: oklch(0.32 0 0);
+  --sidebar-primary: oklch(0.64 0.17 36.44);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.91 0.02 243.82);
+  --sidebar-accent-foreground: oklch(0.38 0.14 265.52);
+  --sidebar-border: oklch(0.93 0.01 264.53);
+  --sidebar-ring: oklch(0.64 0.17 36.44);
+  --background: oklch(0.94 0 236.5);
+  --foreground: oklch(0.32 0 0);
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+.dark:root[data-theme-preset="tangerine"] {
+  --background: oklch(0.26 0.03 262.67);
+  --foreground: oklch(0.92 0 0);
+  --card: oklch(0.31 0.03 268.64);
+  --card-foreground: oklch(0.92 0 0);
+  --popover: oklch(0.29 0.02 268.4);
+  --popover-foreground: oklch(0.92 0 0);
+  --primary: oklch(0.64 0.17 36.44);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.31 0.03 266.71);
+  --secondary-foreground: oklch(0.92 0 0);
+  --muted: oklch(0.31 0.03 266.71);
+  --muted-foreground: oklch(0.72 0 0);
+  --accent: oklch(0.34 0.06 267.59);
+  --accent-foreground: oklch(0.88 0.06 254.13);
+  --destructive: oklch(0.64 0.21 25.33);
+  --border: oklch(0.38 0.03 269.73);
+  --input: oklch(0.38 0.03 269.73);
+  --ring: oklch(0.64 0.17 36.44);
+  --chart-1: oklch(0.72 0.06 248.68);
+  --chart-2: oklch(0.77 0.09 34.19);
+  --chart-3: oklch(0.58 0.08 254.16);
+  --chart-4: oklch(0.5 0.08 259.49);
+  --chart-5: oklch(0.42 0.1 264.03);
+  --sidebar: oklch(0.31 0.03 267.74);
+  --sidebar-foreground: oklch(0.92 0 0);
+  --sidebar-primary: oklch(0.64 0.17 36.44);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.34 0.06 267.59);
+  --sidebar-accent-foreground: oklch(0.88 0.06 254.13);
+  --sidebar-border: oklch(0.38 0.03 269.73);
+  --sidebar-ring: oklch(0.64 0.17 36.44);
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
+}

frontend/src/timers.ts

@@ -0,0 +1,120 @@
+export type TimerPhase = "running" | "paused";
+
+export type TimerEntry = {
+  id: string;
+  ticketNumber: string;
+  organizationName?: string | null;
+  workType?: "support" | "consulting" | null;
+  ticketLookupDone?: boolean;
+  startedAt: number;
+  pausedTotalMs: number;
+  pausedAt: number | null;
+  phase: TimerPhase;
+};
+
+const storageKeyPrefix = "tickettracker.timers";
+const legacyStorageKey = "tickettracker.activeTimer";
+
+export const ticketPattern = /^Ticket#\d{6}$/;
+
+export function pauseEntry(timer: TimerEntry, now = Date.now()): TimerEntry {
+  if (timer.phase === "paused") {
+    return timer;
+  }
+
+  return {
+    ...timer,
+    phase: "paused",
+    pausedAt: now,
+  };
+}
+
+export function resumeEntry(timer: TimerEntry, now = Date.now()): TimerEntry {
+  if (timer.phase === "running") {
+    return timer;
+  }
+
+  return {
+    ...timer,
+    phase: "running",
+    pausedTotalMs: timer.pausedAt ? timer.pausedTotalMs + now - timer.pausedAt : timer.pausedTotalMs,
+    pausedAt: null,
+  };
+}
+
+export function normalizeTimers(timers: TimerEntry[]) {
+  let runningSeen = false;
+  const now = Date.now();
+
+  return timers
+    .filter((timer) => ticketPattern.test(timer.ticketNumber))
+    .map((timer) => {
+      if (timer.phase !== "running") {
+        return {
+          ...timer,
+          phase: "paused" as const,
+          pausedAt: timer.pausedAt ?? now,
+        };
+      }
+
+      if (!runningSeen) {
+        runningSeen = true;
+        return {
+          ...timer,
+          pausedAt: null,
+        };
+      }
+
+      return pauseEntry(timer, now);
+    });
+}
+
+export function storageKeyForUser(userId: string) {
+  return `${storageKeyPrefix}.${userId}`;
+}
+
+export function readStoredTimers(userId: string): TimerEntry[] {
+  if (typeof window === "undefined") {
+    return [];
+  }
+
+  const storageKey = storageKeyForUser(userId);
+  const raw = localStorage.getItem(storageKey);
+
+  if (raw) {
+    try {
+      return normalizeTimers(JSON.parse(raw) as TimerEntry[]);
+    } catch {
+      return [];
+    }
+  }
+
+  const legacy = localStorage.getItem(legacyStorageKey);
+
+  if (!legacy) {
+    return [];
+  }
+
+  try {
+    const parsed = JSON.parse(legacy) as Omit<TimerEntry, "id">;
+    localStorage.removeItem(legacyStorageKey);
+
+    return normalizeTimers([
+      {
+        ...parsed,
+        id: crypto.randomUUID(),
+      },
+    ]);
+  } catch {
+    return [];
+  }
+}
+
+export function activeElapsedMs(timer: TimerEntry | null, now = Date.now()) {
+  if (!timer) {
+    return 0;
+  }
+
+  const pauseMs = timer.pausedAt ? now - timer.pausedAt : 0;
+  return Math.max(0, now - timer.startedAt - timer.pausedTotalMs - pauseMs);
+}

frontend/src/types.ts

@@ -0,0 +1,193 @@
+export type WorkType = "support" | "consulting";
+export type BillingStatus = "billed" | "non_billable" | null;
+export type PeriodType = "month" | "day";
+export type UserRole = "admin" | "user";
+
+export type AuthUser = {
+  id: string;
+  username: string;
+  display_name: string;
+  role: UserRole;
+  active: boolean;
+};
+
+export type AdminUser = AuthUser & {
+  created_at: string;
+  updated_at: string;
+};
+
+export type AdminSession = {
+  id: string;
+  ticket_id: string;
+  user_id: string;
+  owner_username: string;
+  owner_display_name: string;
+  ticket_number: string;
+  organization_id: string | null;
+  organization_name: string | null;
+  customer_name: string;
+  activity: string;
+  work_type: WorkType;
+  started_at: string;
+  ended_at: string;
+  duration_seconds: number;
+  rounded_minutes: number;
+  billing_status: BillingStatus;
+  created_at: string;
+  recurring_billing_id: string | null;
+  recurring_billing_slot_id: string | null;
+  recurring_occurrence_date: string | null;
+};
+
+export type Organization = {
+  id: string;
+  zammad_id: string;
+  name: string;
+  synced_at: string;
+};
+
+export type RecurringBillingSlot = {
+  id?: string;
+  weekday: number | null;
+  start_time: string | null;
+  duration_minutes: number;
+};
+
+export type RecurringBilling = {
+  id: string;
+  user_id: string;
+  owner_username: string;
+  owner_display_name: string;
+  ticket_number: string;
+  configured_ticket_number: string | null;
+  organization_id: string;
+  organization_name: string;
+  activity: string;
+  work_type: WorkType;
+  recurrence_type: "weekly" | "every_n_weeks";
+  interval_value: number;
+  valid_from: string;
+  valid_until: string | null;
+  start_time: string;
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+  slots: RecurringBillingSlot[];
+};
+
+export type TicketMeta = {
+  id: string;
+  ticket_number: string;
+  organization_id: string | null;
+  organization_name: string | null;
+  customer_name: string | null;
+  work_type: WorkType | null;
+};
+
+export type TicketSummary = {
+  id: string;
+  ticket_number: string;
+  organization_id: string | null;
+  organization_name: string | null;
+  customer_name: string | null;
+  work_type: WorkType | null;
+  session_count: number;
+  total_minutes: number;
+  open_count: number;
+  ticket_open_count: number;
+  billed_count: number;
+  non_billable_count: number;
+  recurring_session_count: number;
+  manual_session_count: number;
+  requires_closure: boolean;
+  closed: boolean;
+  closed_at: string | null;
+};
+
+export type OpenSession = {
+  id: string;
+  ticket_id: string;
+  ticket_number: string;
+  organization_id: string | null;
+  organization_name: string | null;
+  customer_name: string;
+  activity: string;
+  work_type: WorkType;
+  started_at: string;
+  rounded_minutes: number;
+};
+
+export type ActivityBucket = {
+  bucket_key: string;
+  session_count: number;
+  total_minutes: number;
+};
+
+export type PeriodOverview = {
+  periodType: PeriodType;
+  period: string;
+  closed: boolean;
+  closedAt: string | null;
+  canClose: boolean;
+  totals: {
+    tickets: number;
+    sessions: number;
+    minutes: number;
+    crmBilledMinutes: number;
+    openSessions: number;
+  };
+  tickets: TicketSummary[];
+  openSessions: OpenSession[];
+  activitySeries: ActivityBucket[];
+};
+
+export type TicketDayBilling = {
+  day: string;
+  billed_minutes: number;
+};
+
+export type SessionEntry = {
+  id: string;
+  organization_id: string | null;
+  organization_name: string | null;
+  customer_name: string;
+  activity: string;
+  work_type: WorkType;
+  started_at: string;
+  ended_at: string;
+  duration_seconds: number;
+  rounded_minutes: number;
+  billing_status: BillingStatus;
+  billing_updated_at: string | null;
+  created_at: string;
+  recurring_billing_id: string | null;
+  recurring_billing_slot_id: string | null;
+  recurring_occurrence_date: string | null;
+};
+
+export type TicketPeriod = {
+  periodType: PeriodType;
+  period: string;
+  closed: boolean;
+  closedAt: string | null;
+  ticket: {
+    id: string;
+    ticket_number: string;
+    organization_id: string | null;
+    organization_name: string | null;
+    customer_name: string | null;
+    work_type: WorkType | null;
+    closed_at: string | null;
+    requires_closure: boolean;
+    recurring_session_count: number;
+    manual_session_count: number;
+  };
+  sessions: SessionEntry[];
+  dayBillings: TicketDayBilling[];
+  canClose: boolean;
+  openCount: number;
+  ticketOpenCount: number;
+};
+
+export type MonthOverview = PeriodOverview;
+export type TicketMonth = TicketPeriod;

frontend/src/views/AdminUsersPage.tsx

@@ -0,0 +1,767 @@
+import { FormEvent, useEffect, useState } from "react";
+import { CalendarPlus, DatabaseZap, Save, Shield, Shuffle, UserPlus } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+import { OrganizationSelect } from "@/components/OrganizationSelect";
+import {
+  createAdminSession,
+  createAdminUser,
+  getAdminSessions,
+  getAdminUsers,
+  getZammadSettings,
+  reassignAdminSession,
+  saveZammadSettings,
+  syncZammadOrganizations,
+  updateAdminUser
+} from "../api";
+import { currentDay, formatDateTime, formatMinutes } from "../format";
+import type { AdminSession, AdminUser, AuthUser, UserRole, WorkType } from "../types";
+
+type UserFormState = {
+  username: string;
+  displayName: string;
+  password: string;
+  role: UserRole;
+  active: boolean;
+};
+
+type ManualSessionFormState = {
+  userId: string;
+  ticketNumber: string;
+  organizationId: string;
+  organizationName: string | null;
+  activity: string;
+  workType: WorkType;
+  day: string;
+  startTime: string;
+  endTime: string;
+};
+
+const emptyForm: UserFormState = {
+  username: "",
+  displayName: "",
+  password: "",
+  role: "user",
+  active: true
+};
+
+function emptyManualSession(): ManualSessionFormState {
+  return {
+    userId: "",
+    ticketNumber: "",
+    organizationId: "",
+    organizationName: null,
+    activity: "",
+    workType: "support",
+    day: currentDay(),
+    startTime: "09:00",
+    endTime: "09:30"
+  };
+}
+
+function formFromUser(user: AdminUser): UserFormState {
+  return {
+    username: user.username,
+    displayName: user.display_name,
+    password: "",
+    role: user.role,
+    active: user.active
+  };
+}
+
+export function AdminUsersPage({ currentUser }: { currentUser: AuthUser }) {
+  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [sessions, setSessions] = useState<AdminSession[]>([]);
+  const [forms, setForms] = useState<Record<string, UserFormState>>({});
+  const [sessionOwners, setSessionOwners] = useState<Record<string, string>>({});
+  const [newUser, setNewUser] = useState<UserFormState>(emptyForm);
+  const [manualSession, setManualSession] = useState<ManualSessionFormState>(() => emptyManualSession());
+  const [zammadBaseUrl, setZammadBaseUrl] = useState("");
+  const [zammadApiKey, setZammadApiKey] = useState("");
+  const [hasZammadApiKey, setHasZammadApiKey] = useState(false);
+  const [syncingOrganizations, setSyncingOrganizations] = useState(false);
+  const [savingZammadSettings, setSavingZammadSettings] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [savingId, setSavingId] = useState<string | null>(null);
+  const [movingId, setMovingId] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [creatingSession, setCreatingSession] = useState(false);
+
+  async function load(options: { preserveEdits?: boolean } = {}) {
+    setLoading(true);
+    try {
+      const [usersResult, sessionsResult, zammadSettingsResult] = await Promise.all([getAdminUsers(), getAdminSessions(), getZammadSettings()]);
+      setUsers(usersResult.users);
+      setSessions(sessionsResult.sessions);
+      if (!options.preserveEdits) {
+        setZammadBaseUrl(zammadSettingsResult.settings.baseUrl);
+        setHasZammadApiKey(zammadSettingsResult.settings.hasApiKey);
+      }
+      setForms((current) =>
+        Object.fromEntries(usersResult.users.map((user) => [user.id, options.preserveEdits ? current[user.id] ?? formFromUser(user) : formFromUser(user)]))
+      );
+      setSessionOwners((current) =>
+        Object.fromEntries(sessionsResult.sessions.map((session) => [session.id, options.preserveEdits ? current[session.id] ?? session.user_id : session.user_id]))
+      );
+    } catch (error) {
+      toast.error("Adminbereich konnte nicht geladen werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  useEffect(() => {
+    function refreshVisible() {
+      if (document.visibilityState === "visible") {
+        void load({ preserveEdits: true });
+      }
+    }
+
+    const interval = window.setInterval(refreshVisible, 60_000);
+    window.addEventListener("focus", refreshVisible);
+    document.addEventListener("visibilitychange", refreshVisible);
+
+    return () => {
+      window.clearInterval(interval);
+      window.removeEventListener("focus", refreshVisible);
+      document.removeEventListener("visibilitychange", refreshVisible);
+    };
+  }, []);
+
+  function updateForm(userId: string, patch: Partial<UserFormState>) {
+    setForms((current) => ({
+      ...current,
+      [userId]: {
+        ...current[userId],
+        ...patch
+      }
+    }));
+  }
+
+  async function createUser(event: FormEvent) {
+    event.preventDefault();
+    setCreating(true);
+
+    try {
+      await createAdminUser(newUser);
+      toast.success("Benutzer angelegt");
+      setNewUser(emptyForm);
+      await load();
+    } catch (error) {
+      toast.error("Benutzer konnte nicht angelegt werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  async function saveUser(user: AdminUser) {
+    const form = forms[user.id];
+
+    if (!form) {
+      return;
+    }
+
+    setSavingId(user.id);
+    try {
+      await updateAdminUser(user.id, {
+        username: form.username,
+        displayName: form.displayName,
+        role: form.role,
+        active: form.active,
+        password: form.password || undefined
+      });
+      toast.success("Benutzer gespeichert");
+      await load();
+    } catch (error) {
+      toast.error("Benutzer konnte nicht gespeichert werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSavingId(null);
+    }
+  }
+
+  async function moveSession(session: AdminSession) {
+    const nextUserId = sessionOwners[session.id] ?? session.user_id;
+
+    if (nextUserId === session.user_id) {
+      toast.info("Keine Änderung", {
+        description: "Diese Session gehört bereits diesem Benutzer."
+      });
+      return;
+    }
+
+    setMovingId(session.id);
+    try {
+      await reassignAdminSession(session.id, nextUserId);
+      toast.success("Session umverteilt", {
+        description: "Betroffene Tages- und Monatsabschlüsse wurden wieder geöffnet."
+      });
+      await load();
+    } catch (error) {
+      toast.error("Session konnte nicht umverteilt werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setMovingId(null);
+    }
+  }
+
+  const activeUsers = users.filter((user) => user.active);
+  const manualSessionUserId = manualSession.userId || activeUsers[0]?.id || "";
+
+  async function createManualSession(event: FormEvent) {
+    event.preventDefault();
+
+    if (!manualSessionUserId) {
+      toast.error("Kein aktiver Benutzer vorhanden");
+      return;
+    }
+
+    if (!manualSession.organizationId) {
+      toast.error("Organisation wählen");
+      return;
+    }
+
+    const startedAt = new Date(`${manualSession.day}T${manualSession.startTime}:00`);
+    const endedAt = new Date(`${manualSession.day}T${manualSession.endTime}:00`);
+
+    if (Number.isNaN(startedAt.getTime()) || Number.isNaN(endedAt.getTime())) {
+      toast.error("Datum oder Uhrzeit prüfen");
+      return;
+    }
+
+    if (endedAt <= startedAt) {
+      toast.error("Ende muss nach Beginn liegen");
+      return;
+    }
+
+    setCreatingSession(true);
+
+    try {
+      await createAdminSession({
+        userId: manualSessionUserId,
+        ticketNumber: manualSession.ticketNumber,
+        organizationId: manualSession.organizationId,
+        activity: manualSession.activity,
+        workType: manualSession.workType,
+        startedAt: startedAt.toISOString(),
+        endedAt: endedAt.toISOString()
+      });
+      toast.success("Session nachgetragen", {
+        description: "Der Eintrag ist in der Auswertung des gewählten Benutzers offen."
+      });
+      setManualSession({
+        ...emptyManualSession(),
+        userId: manualSessionUserId,
+        day: manualSession.day
+      });
+      await load();
+    } catch (error) {
+      toast.error("Session konnte nicht nachgetragen werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setCreatingSession(false);
+    }
+  }
+
+  async function syncOrganizations(event: FormEvent) {
+    event.preventDefault();
+    setSyncingOrganizations(true);
+
+    try {
+      const result = await syncZammadOrganizations({
+        baseUrl: zammadBaseUrl,
+        apiKey: zammadApiKey.trim() || undefined
+      });
+      toast.success("Organisationen synchronisiert", {
+        description: `${result.synced} gespeichert, ${result.removed} entfernt, ${result.unlinkedTickets + result.unlinkedSessions} Verknüpfung(en) gelöst.`
+      });
+      setHasZammadApiKey(true);
+      setZammadApiKey("");
+    } catch (error) {
+      toast.error("Zammad-Sync fehlgeschlagen", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSyncingOrganizations(false);
+    }
+  }
+
+  async function saveZammadAccess() {
+    setSavingZammadSettings(true);
+
+    try {
+      const result = await saveZammadSettings({
+        baseUrl: zammadBaseUrl,
+        apiKey: zammadApiKey.trim() || undefined
+      });
+      setZammadBaseUrl(result.settings.baseUrl);
+      setHasZammadApiKey(result.settings.hasApiKey);
+      setZammadApiKey("");
+      toast.success("Zammad-Zugang gespeichert", {
+        description: result.settings.hasApiKey ? "URL und API-Key sind hinterlegt." : "URL wurde gespeichert."
+      });
+    } catch (error) {
+      toast.error("Zammad-Zugang konnte nicht gespeichert werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSavingZammadSettings(false);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-xl font-semibold tracking-normal sm:text-2xl">Benutzer</h2>
+        <p className="text-sm text-muted-foreground">Accounts verwalten, Besitzer von Sessions prüfen und Einträge umverteilen.</p>
+      </div>
+
+      <Card>
+        <CardHeader className="p-4">
+          <div className="flex items-center gap-2">
+            <DatabaseZap className="size-5 text-muted-foreground" />
+            <CardTitle>Data-Sync</CardTitle>
+          </div>
+          <CardDescription>Zammad-Zugang speichern und Organisationen in die lokale TicketTracker-Datenbank übernehmen.</CardDescription>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <form className="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_minmax(220px,1fr)_auto_auto] lg:items-end" onSubmit={syncOrganizations}>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="zammad-base-url">Zammad URL</label>
+              <Input
+                id="zammad-base-url"
+                placeholder="https://zammad.example.de"
+                value={zammadBaseUrl}
+                onChange={(event) => setZammadBaseUrl(event.currentTarget.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="zammad-api-key">API-Key</label>
+              <Input
+                id="zammad-api-key"
+                type="password"
+                placeholder={hasZammadApiKey ? "Gespeicherter API-Key wird verwendet" : ""}
+                value={zammadApiKey}
+                onChange={(event) => setZammadApiKey(event.currentTarget.value)}
+              />
+              {hasZammadApiKey ? <p className="text-xs text-muted-foreground">API-Key ist gespeichert. Leer lassen, um ihn weiter zu verwenden.</p> : null}
+            </div>
+            <Button type="button" variant="secondary" disabled={savingZammadSettings} onClick={() => void saveZammadAccess()}>
+              <Save className="size-4" />
+              {savingZammadSettings ? "Speichert..." : "Zugang speichern"}
+            </Button>
+            <Button type="submit" disabled={syncingOrganizations}>
+              <DatabaseZap className="size-4" />
+              {syncingOrganizations ? "Synchronisiert..." : "Organisationen synchronisieren"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="p-4">
+          <CardTitle>Neuer Benutzer</CardTitle>
+          <CardDescription>Neue Benutzer sehen später nur ihre eigenen Sessions und Abschlüsse.</CardDescription>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <form className="grid gap-3 lg:grid-cols-[160px_minmax(180px,1fr)_160px_130px_auto_auto] lg:items-end" onSubmit={createUser}>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="new-username">Benutzername</label>
+              <Input id="new-username" value={newUser.username} onChange={(event) => setNewUser({ ...newUser, username: event.currentTarget.value })} required />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="new-display-name">Name</label>
+              <Input id="new-display-name" value={newUser.displayName} onChange={(event) => setNewUser({ ...newUser, displayName: event.currentTarget.value })} required />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="new-password">Passwort</label>
+              <Input id="new-password" type="password" value={newUser.password} onChange={(event) => setNewUser({ ...newUser, password: event.currentTarget.value })} required />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="new-role">Rolle</label>
+              <select
+                id="new-role"
+                className="h-8 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                value={newUser.role}
+                onChange={(event) => setNewUser({ ...newUser, role: event.currentTarget.value as UserRole })}
+              >
+                <option value="user">User</option>
+                <option value="admin">Admin</option>
+              </select>
+            </div>
+            <label className="flex h-8 items-center gap-2 text-sm">
+              <Switch checked={newUser.active} onCheckedChange={(active) => setNewUser({ ...newUser, active })} />
+              Aktiv
+            </label>
+            <Button type="submit" disabled={creating}>
+              <UserPlus className="size-4" />
+              {creating ? "Legt an..." : "Anlegen"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="p-4">
+          <div className="flex items-center gap-2">
+            <CalendarPlus className="size-5 text-muted-foreground" />
+            <CardTitle>Session nachtragen</CardTitle>
+          </div>
+          <CardDescription>Vergessene Zeiten manuell erfassen und direkt einem Benutzer zuweisen.</CardDescription>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <form className="space-y-4" onSubmit={createManualSession}>
+            <div className="grid gap-3 lg:grid-cols-[160px_minmax(180px,1fr)_150px_150px]">
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="manual-ticket-number">Ticket</label>
+                <Input
+                  id="manual-ticket-number"
+                  placeholder="Ticket#123456"
+                  value={manualSession.ticketNumber}
+                  onChange={(event) => setManualSession({ ...manualSession, ticketNumber: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="manual-organization">Organisation</label>
+                <OrganizationSelect
+                  value={manualSession.organizationId}
+                  selectedName={manualSession.organizationName}
+                  onChange={(organization) =>
+                    setManualSession({
+                      ...manualSession,
+                      organizationId: organization.id,
+                      organizationName: organization.name
+                    })
+                  }
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="manual-work-type">Art</label>
+                <select
+                  id="manual-work-type"
+                  className="h-8 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                  value={manualSession.workType}
+                  onChange={(event) => setManualSession({ ...manualSession, workType: event.currentTarget.value as WorkType })}
+                >
+                  <option value="support">Support</option>
+                  <option value="consulting">Consulting</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="manual-user">Benutzer</label>
+                <select
+                  id="manual-user"
+                  className="h-8 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                  value={manualSessionUserId}
+                  onChange={(event) => setManualSession({ ...manualSession, userId: event.currentTarget.value })}
+                  required
+                >
+                  {activeUsers.map((user) => (
+                    <option key={user.id} value={user.id}>
+                      {user.display_name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            <div className="grid gap-3 lg:grid-cols-[160px_120px_120px_minmax(220px,1fr)_auto] lg:items-end">
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="manual-day">Datum</label>
+                <Input
+                  id="manual-day"
+                  type="date"
+                  value={manualSession.day}
+                  onChange={(event) => setManualSession({ ...manualSession, day: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="manual-start">Von</label>
+                <Input
+                  id="manual-start"
+                  type="time"
+                  value={manualSession.startTime}
+                  onChange={(event) => setManualSession({ ...manualSession, startTime: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="manual-end">Bis</label>
+                <Input
+                  id="manual-end"
+                  type="time"
+                  value={manualSession.endTime}
+                  onChange={(event) => setManualSession({ ...manualSession, endTime: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="manual-activity">Tätigkeit</label>
+                <Textarea
+                  id="manual-activity"
+                  className="min-h-20"
+                  value={manualSession.activity}
+                  onChange={(event) => setManualSession({ ...manualSession, activity: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <Button type="submit" disabled={creatingSession || activeUsers.length === 0}>
+                <CalendarPlus className="size-4" />
+                {creatingSession ? "Speichert..." : "Nachtragen"}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+          <div>
+            <CardTitle>Vorhandene Benutzer</CardTitle>
+            <CardDescription>{loading ? "Lädt..." : `${users.length} Account(s)`}</CardDescription>
+          </div>
+          <Badge variant="outline">{currentUser.display_name}</Badge>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <div className="hidden xl:block">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Benutzername</TableHead>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Rolle</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Neues Passwort</TableHead>
+                  <TableHead />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {users.map((user) => {
+                  const form = forms[user.id] ?? formFromUser(user);
+
+                  return (
+                    <TableRow key={user.id}>
+                      <TableCell>
+                        <Input className="h-8" value={form.username} onChange={(event) => updateForm(user.id, { username: event.currentTarget.value })} />
+                      </TableCell>
+                      <TableCell>
+                        <Input className="h-8" value={form.displayName} onChange={(event) => updateForm(user.id, { displayName: event.currentTarget.value })} />
+                      </TableCell>
+                      <TableCell>
+                        <select
+                          className="h-8 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                          value={form.role}
+                          onChange={(event) => updateForm(user.id, { role: event.currentTarget.value as UserRole })}
+                        >
+                          <option value="user">User</option>
+                          <option value="admin">Admin</option>
+                        </select>
+                      </TableCell>
+                      <TableCell>
+                        <label className="flex items-center gap-2 text-sm">
+                          <Switch checked={form.active} onCheckedChange={(active) => updateForm(user.id, { active })} />
+                          {form.active ? "aktiv" : "inaktiv"}
+                        </label>
+                      </TableCell>
+                      <TableCell>
+                        <Input
+                          className="h-8"
+                          type="password"
+                          placeholder="unverändert"
+                          value={form.password}
+                          onChange={(event) => updateForm(user.id, { password: event.currentTarget.value })}
+                        />
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button size="sm" onClick={() => void saveUser(user)} disabled={savingId === user.id}>
+                          <Save className="size-4" />
+                          {savingId === user.id ? "Speichert..." : "Speichern"}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+
+          <div className="space-y-2 xl:hidden">
+            {users.map((user) => {
+              const form = forms[user.id] ?? formFromUser(user);
+
+              return (
+                <div key={user.id} className="space-y-3 rounded-md border bg-background p-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2">
+                      <Shield className="size-4 text-muted-foreground" />
+                      <span className="font-medium">{user.username}</span>
+                    </div>
+                    <Badge variant={form.role === "admin" ? "default" : "secondary"}>{form.role === "admin" ? "Admin" : "User"}</Badge>
+                  </div>
+                  <Input value={form.username} onChange={(event) => updateForm(user.id, { username: event.currentTarget.value })} />
+                  <Input value={form.displayName} onChange={(event) => updateForm(user.id, { displayName: event.currentTarget.value })} />
+                  <select
+                    className="h-9 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                    value={form.role}
+                    onChange={(event) => updateForm(user.id, { role: event.currentTarget.value as UserRole })}
+                  >
+                    <option value="user">User</option>
+                    <option value="admin">Admin</option>
+                  </select>
+                  <Input
+                    type="password"
+                    placeholder="Passwort unverändert lassen"
+                    value={form.password}
+                    onChange={(event) => updateForm(user.id, { password: event.currentTarget.value })}
+                  />
+                  <div className="flex items-center justify-between gap-2">
+                    <label className="flex items-center gap-2 text-sm">
+                      <Switch checked={form.active} onCheckedChange={(active) => updateForm(user.id, { active })} />
+                      {form.active ? "aktiv" : "inaktiv"}
+                    </label>
+                    <Button size="sm" onClick={() => void saveUser(user)} disabled={savingId === user.id}>
+                      <Save className="size-4" />
+                      Speichern
+                    </Button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+          <div>
+            <CardTitle>Session-Zuordnung</CardTitle>
+            <CardDescription>{loading ? "Lädt..." : `${sessions.length} letzte Session(s), inklusive Besitzer.`}</CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <div className="hidden xl:block">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Besitzer</TableHead>
+                  <TableHead>Ticket</TableHead>
+                  <TableHead>Organisation</TableHead>
+                  <TableHead>Tätigkeit</TableHead>
+                  <TableHead>Beginn</TableHead>
+                  <TableHead>Zeit</TableHead>
+                  <TableHead>Zuordnen zu</TableHead>
+                  <TableHead />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sessions.map((session) => (
+                  <TableRow key={session.id}>
+                    <TableCell>
+                      <div className="font-medium">{session.owner_display_name}</div>
+                      <div className="text-xs text-muted-foreground">{session.owner_username}</div>
+                    </TableCell>
+                    <TableCell className="font-semibold">{session.ticket_number}</TableCell>
+                    <TableCell>{session.customer_name}</TableCell>
+                    <TableCell className="max-w-xs whitespace-normal">{session.activity}</TableCell>
+                    <TableCell className="whitespace-nowrap">{formatDateTime(session.started_at)}</TableCell>
+                    <TableCell>{formatMinutes(session.rounded_minutes)}</TableCell>
+                    <TableCell>
+                      <select
+                        className="h-8 w-full min-w-40 rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                        value={sessionOwners[session.id] ?? session.user_id}
+                        onChange={(event) =>
+                          setSessionOwners((current) => ({
+                            ...current,
+                            [session.id]: event.currentTarget.value
+                          }))
+                        }
+                      >
+                        {activeUsers.map((user) => (
+                          <option key={user.id} value={user.id}>
+                            {user.display_name}
+                          </option>
+                        ))}
+                      </select>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button size="sm" onClick={() => void moveSession(session)} disabled={movingId === session.id}>
+                        <Shuffle className="size-4" />
+                        {movingId === session.id ? "Speichert..." : "Umverteilen"}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          <div className="space-y-2 xl:hidden">
+            {sessions.map((session) => (
+              <div key={session.id} className="space-y-3 rounded-md border bg-background p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div>
+                    <p className="font-semibold">{session.ticket_number}</p>
+                    <p className="text-sm text-muted-foreground">{session.customer_name}</p>
+                  </div>
+                  <Badge variant="outline">{formatMinutes(session.rounded_minutes)}</Badge>
+                </div>
+                <div className="rounded-md bg-muted/40 p-2 text-sm">
+                  <p className="font-medium">{session.owner_display_name}</p>
+                  <p className="text-muted-foreground">{session.owner_username} · {formatDateTime(session.started_at)}</p>
+                </div>
+                <p className="text-sm">{session.activity}</p>
+                <div className="grid gap-2 sm:grid-cols-[1fr_auto]">
+                  <select
+                    className="h-9 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                    value={sessionOwners[session.id] ?? session.user_id}
+                    onChange={(event) =>
+                      setSessionOwners((current) => ({
+                        ...current,
+                        [session.id]: event.currentTarget.value
+                      }))
+                    }
+                  >
+                    {activeUsers.map((user) => (
+                      <option key={user.id} value={user.id}>
+                        {user.display_name}
+                      </option>
+                    ))}
+                  </select>
+                  <Button size="sm" onClick={() => void moveSession(session)} disabled={movingId === session.id}>
+                    <Shuffle className="size-4" />
+                    Umverteilen
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {sessions.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">Noch keine Sessions vorhanden.</p>
+          ) : null}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

frontend/src/views/AnalysisPage.tsx

@@ -0,0 +1,960 @@
+import { CheckCircle2, ChevronLeft, ChevronRight, CircleAlert, Clock3, ExternalLink, LockOpen, RotateCcw, SlidersHorizontal, Ticket, UserCheck, Users } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Alert } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { CopyTicketButton } from "@/components/CopyTicketButton";
+import { closePeriod, getPeriodOverview, reopenPeriod } from "../api";
+import { currentDay, currentMonth, formatDateTime, formatMinutes } from "../format";
+import type { PeriodOverview, PeriodType, TicketSummary } from "../types";
+
+type AnalysisPageProps = {
+  onNavigate: (to: string) => void;
+};
+
+type TimelineBucket = {
+  key: string;
+  label: string;
+  totalMinutes: number;
+  sessionCount: number;
+};
+
+type TicketGroupBy = "none" | "workType" | "organization" | "status";
+type TicketSortBy = "ticket" | "workType" | "organization" | "status";
+type TicketSortDirection = "asc" | "desc";
+type TicketStatusFilter = "all" | "open" | "evaluated";
+type TicketWorkTypeFilter = "all" | "support" | "consulting";
+
+type AnalysisTicketViewSettings = {
+  groupBy: TicketGroupBy;
+  sortBy: TicketSortBy;
+  sortDirection: TicketSortDirection;
+  query: string;
+  workType: TicketWorkTypeFilter;
+  organization: string;
+  status: TicketStatusFilter;
+};
+
+type TicketSection = {
+  key: string;
+  label: string;
+  tickets: TicketSummary[];
+  ticketCount: number;
+  totalMinutes: number;
+  openCount: number;
+};
+
+const analysisTicketViewSettingsKey = "tickettracker.analysis.ticketViewSettings";
+
+const defaultTicketViewSettings: AnalysisTicketViewSettings = {
+  groupBy: "none",
+  sortBy: "ticket",
+  sortDirection: "asc",
+  query: "",
+  workType: "all",
+  organization: "all",
+  status: "all"
+};
+
+const groupByOptions: Array<{ value: TicketGroupBy; label: string }> = [
+  { value: "none", label: "Keine" },
+  { value: "workType", label: "Typ" },
+  { value: "organization", label: "Organisation" },
+  { value: "status", label: "Status" }
+];
+
+const sortByOptions: Array<{ value: TicketSortBy; label: string }> = [
+  { value: "ticket", label: "Ticket" },
+  { value: "workType", label: "Typ" },
+  { value: "organization", label: "Organisation" },
+  { value: "status", label: "Status" }
+];
+
+function readStoredTicketViewSettings(): AnalysisTicketViewSettings {
+  if (typeof window === "undefined") {
+    return defaultTicketViewSettings;
+  }
+
+  try {
+    const raw = window.localStorage.getItem(analysisTicketViewSettingsKey);
+
+    if (!raw) {
+      return defaultTicketViewSettings;
+    }
+
+    const parsed = JSON.parse(raw) as Partial<AnalysisTicketViewSettings>;
+
+    return {
+      groupBy: groupByOptions.find((option) => option.value === parsed.groupBy)?.value ?? defaultTicketViewSettings.groupBy,
+      sortBy: sortByOptions.find((option) => option.value === parsed.sortBy)?.value ?? defaultTicketViewSettings.sortBy,
+      sortDirection: parsed.sortDirection === "desc" ? "desc" : defaultTicketViewSettings.sortDirection,
+      query: typeof parsed.query === "string" ? parsed.query : defaultTicketViewSettings.query,
+      workType: parsed.workType === "support" || parsed.workType === "consulting" ? parsed.workType : defaultTicketViewSettings.workType,
+      organization: typeof parsed.organization === "string" ? parsed.organization : defaultTicketViewSettings.organization,
+      status: parsed.status === "open" || parsed.status === "evaluated" ? parsed.status : defaultTicketViewSettings.status
+    };
+  } catch {
+    return defaultTicketViewSettings;
+  }
+}
+
+function TicketStatus({ ticket }: { ticket: TicketSummary }) {
+  const ticketOpenCount = ticket.ticket_open_count ?? ticket.open_count;
+
+  if (ticketOpenCount > 0) {
+    return <Badge variant="warning">{ticketOpenCount} offen</Badge>;
+  }
+
+  return <Badge variant="success">bewertet</Badge>;
+}
+
+function ticketStatusKey(ticket: TicketSummary): "open" | "evaluated" {
+  return (ticket.ticket_open_count ?? ticket.open_count) > 0 ? "open" : "evaluated";
+}
+
+function ticketStatusLabel(ticket: TicketSummary) {
+  return ticketStatusKey(ticket) === "open" ? "Offen" : "Bewertet";
+}
+
+function workTypeLabel(workType: TicketSummary["work_type"]) {
+  if (workType === "support") {
+    return "Support";
+  }
+
+  if (workType === "consulting") {
+    return "Consulting";
+  }
+
+  return "Ohne Typ";
+}
+
+function organizationLabel(ticket: TicketSummary) {
+  return ticket.customer_name ?? ticket.organization_name ?? "Keine Organisation";
+}
+
+function organizationKey(ticket: TicketSummary) {
+  return ticket.organization_id ? `id:${ticket.organization_id}` : `name:${organizationLabel(ticket)}`;
+}
+
+function compareText(left: string, right: string) {
+  return left.localeCompare(right, "de", { numeric: true, sensitivity: "base" });
+}
+
+function sortTickets(tickets: TicketSummary[], sortBy: TicketSortBy, direction: TicketSortDirection) {
+  const sorted = [...tickets].sort((left, right) => {
+    let result = 0;
+
+    if (sortBy === "ticket") {
+      result = compareText(left.ticket_number, right.ticket_number);
+    } else if (sortBy === "workType") {
+      result = compareText(workTypeLabel(left.work_type), workTypeLabel(right.work_type));
+    } else if (sortBy === "organization") {
+      result = compareText(organizationLabel(left), organizationLabel(right));
+    } else {
+      result = compareText(ticketStatusLabel(left), ticketStatusLabel(right));
+    }
+
+    if (result === 0) {
+      result = compareText(left.ticket_number, right.ticket_number);
+    }
+
+    return direction === "asc" ? result : -result;
+  });
+
+  return sorted;
+}
+
+function groupTicketSections(tickets: TicketSummary[], groupBy: TicketGroupBy): TicketSection[] {
+  if (groupBy === "none") {
+    return [
+      {
+        key: "all",
+        label: "Alle Tickets",
+        tickets,
+        ticketCount: tickets.length,
+        totalMinutes: tickets.reduce((sum, ticket) => sum + ticket.total_minutes, 0),
+        openCount: tickets.reduce((sum, ticket) => sum + (ticket.ticket_open_count ?? ticket.open_count), 0)
+      }
+    ];
+  }
+
+  const groups = new Map<string, TicketSection>();
+
+  for (const ticket of tickets) {
+    const key =
+      groupBy === "workType"
+        ? `workType:${ticket.work_type ?? "none"}`
+        : groupBy === "organization"
+          ? organizationKey(ticket)
+          : `status:${ticketStatusKey(ticket)}`;
+    const label = groupBy === "workType" ? workTypeLabel(ticket.work_type) : groupBy === "organization" ? organizationLabel(ticket) : ticketStatusLabel(ticket);
+    const existing = groups.get(key);
+
+    if (existing) {
+      existing.tickets.push(ticket);
+      existing.ticketCount += 1;
+      existing.totalMinutes += ticket.total_minutes;
+      existing.openCount += ticket.ticket_open_count ?? ticket.open_count;
+      continue;
+    }
+
+    groups.set(key, {
+      key,
+      label,
+      tickets: [ticket],
+      ticketCount: 1,
+      totalMinutes: ticket.total_minutes,
+      openCount: ticket.ticket_open_count ?? ticket.open_count
+    });
+  }
+
+  return Array.from(groups.values()).sort((left, right) => {
+    if (groupBy === "status") {
+      return left.key === "status:open" ? -1 : right.key === "status:open" ? 1 : compareText(left.label, right.label);
+    }
+
+    return compareText(left.label, right.label);
+  });
+}
+
+function buildChartPath(points: Array<{ x: number; y: number }>) {
+  if (points.length === 0) {
+    return "";
+  }
+
+  if (points.length === 1) {
+    return `M ${points[0].x - 18} ${points[0].y} L ${points[0].x + 18} ${points[0].y}`;
+  }
+
+  return points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
+}
+
+function niceCeilMinutes(value: number) {
+  if (value <= 30) {
+    return Math.max(5, Math.ceil(value / 5) * 5);
+  }
+
+  if (value <= 120) {
+    return Math.ceil(value / 15) * 15;
+  }
+
+  if (value <= 480) {
+    return Math.ceil(value / 30) * 30;
+  }
+
+  return Math.ceil(value / 60) * 60;
+}
+
+function formatAxisMinutes(value: number) {
+  const minutes = Math.round(value);
+
+  if (minutes === 0) {
+    return "0";
+  }
+
+  if (minutes >= 60) {
+    return `${new Intl.NumberFormat("de-DE", { maximumFractionDigits: minutes < 600 ? 1 : 0 }).format(minutes / 60)} h`;
+  }
+
+  return `${minutes} min`;
+}
+
+function buildTimeline(periodType: PeriodType, period: string, overview: PeriodOverview | null): TimelineBucket[] {
+  const series = new Map((overview?.activitySeries ?? []).map((bucket) => [bucket.bucket_key, bucket]));
+
+  if (periodType === "day") {
+    return Array.from({ length: 24 }).map((_, hour) => {
+      const key = String(hour).padStart(2, "0");
+      const bucket = series.get(key);
+
+      return {
+        key,
+        label: `${key}:00`,
+        totalMinutes: bucket?.total_minutes ?? 0,
+        sessionCount: bucket?.session_count ?? 0
+      };
+    });
+  }
+
+  const [year, month] = period.split("-").map(Number);
+  const daysInMonth = Number.isFinite(year) && Number.isFinite(month) ? new Date(year, month, 0).getDate() : 31;
+
+  return Array.from({ length: daysInMonth }).map((_, index) => {
+    const day = String(index + 1).padStart(2, "0");
+    const key = `${period}-${day}`;
+    const bucket = series.get(key);
+
+    return {
+      key,
+      label: day,
+      totalMinutes: bucket?.total_minutes ?? 0,
+      sessionCount: bucket?.session_count ?? 0
+    };
+  });
+}
+
+export function AnalysisPage({ onNavigate }: AnalysisPageProps) {
+  const [periodType, setPeriodType] = useState<PeriodType>("month");
+  const [period, setPeriod] = useState(currentMonth());
+  const [overview, setOverview] = useState<PeriodOverview | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const [reopening, setReopening] = useState(false);
+  const [showOpen, setShowOpen] = useState(false);
+  const [ticketViewSettings, setTicketViewSettings] = useState<AnalysisTicketViewSettings>(() => readStoredTicketViewSettings());
+  const loadRequestId = useRef(0);
+
+  useEffect(() => {
+    window.localStorage.setItem(analysisTicketViewSettingsKey, JSON.stringify(ticketViewSettings));
+  }, [ticketViewSettings]);
+
+  async function load() {
+    const requestId = loadRequestId.current + 1;
+    loadRequestId.current = requestId;
+    setLoading(true);
+    try {
+      const nextOverview = await getPeriodOverview(periodType, period);
+
+      if (requestId === loadRequestId.current) {
+        setOverview(nextOverview);
+      }
+    } catch (error) {
+      if (requestId === loadRequestId.current) {
+        toast.error("Auswertung konnte nicht geladen werden", {
+          description: error instanceof Error ? error.message : "Unbekannter Fehler"
+        });
+      }
+    } finally {
+      if (requestId === loadRequestId.current) {
+        setLoading(false);
+      }
+    }
+  }
+
+  useEffect(() => {
+    void load();
+  }, [periodType, period]);
+
+  useEffect(() => {
+    function refreshVisible() {
+      if (document.visibilityState === "visible") {
+        void load();
+      }
+    }
+
+    const interval = window.setInterval(refreshVisible, 60_000);
+    window.addEventListener("focus", refreshVisible);
+    document.addEventListener("visibilitychange", refreshVisible);
+
+    return () => {
+      window.clearInterval(interval);
+      window.removeEventListener("focus", refreshVisible);
+      document.removeEventListener("visibilitychange", refreshVisible);
+    };
+  }, [periodType, period]);
+
+  function switchPeriodType(nextType: PeriodType) {
+    setPeriodType(nextType);
+    setPeriod(nextType === "month" ? currentMonth() : currentDay());
+    setShowOpen(false);
+  }
+
+  function changePeriodBy(delta: number) {
+    if (periodType === "month") {
+      const [year, month] = period.split("-").map(Number);
+      const date = Number.isFinite(year) && Number.isFinite(month) ? new Date(year, month - 1, 1) : new Date();
+      date.setMonth(date.getMonth() + delta);
+      setPeriod(`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`);
+    } else {
+      const [year, month, day] = period.split("-").map(Number);
+      const date =
+        Number.isFinite(year) && Number.isFinite(month) && Number.isFinite(day)
+          ? new Date(year, month - 1, day)
+          : new Date();
+      date.setDate(date.getDate() + delta);
+      setPeriod(`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`);
+    }
+
+    setShowOpen(false);
+  }
+
+  async function finishPeriod() {
+    setClosing(true);
+    try {
+      await closePeriod(periodType, period);
+      toast.success(`${periodType === "month" ? "Monat" : "Tag"} abgeschlossen`, {
+        description: `${period} ist abgeschlossen.`
+      });
+      await load();
+    } catch (error) {
+      toast.error(`${periodType === "month" ? "Monat" : "Tag"} noch nicht abschließbar`, {
+        description: error instanceof Error ? error.message : "Bitte offene Sessions prüfen."
+      });
+      setShowOpen(true);
+      await load();
+    } finally {
+      setClosing(false);
+    }
+  }
+
+  async function openPeriodAgain() {
+    setReopening(true);
+    try {
+      await reopenPeriod(periodType, period);
+      toast.success(`${periodType === "month" ? "Monat" : "Tag"} wieder geöffnet`, {
+        description: `${period} kann wieder bearbeitet werden.`
+      });
+      await load();
+    } catch (error) {
+      toast.error(`${periodType === "month" ? "Monat" : "Tag"} konnte nicht geöffnet werden`, {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setReopening(false);
+    }
+  }
+
+  const totals = overview?.totals;
+  const periodLabel = periodType === "month" ? "Monat" : "Tag";
+  const supportsPeriodClosure = periodType === "month";
+  const metricCards: Array<{ label: string; value: string | number; detail?: string; icon: LucideIcon }> = [
+    { label: "Tickets", value: totals?.tickets ?? 0, icon: Ticket },
+    { label: "Sessions", value: totals?.sessions ?? 0, icon: Users },
+    { label: "Zeit", value: formatMinutes(totals?.minutes ?? 0), detail: `Teamspace ${formatMinutes(totals?.crmBilledMinutes ?? 0)}`, icon: Clock3 },
+    { label: "Offen", value: totals?.openSessions ?? 0, icon: UserCheck }
+  ];
+  const tickets = overview?.tickets ?? [];
+  const organizationOptions = useMemo(() => {
+    const options = new Map<string, string>();
+
+    for (const ticket of tickets) {
+      options.set(organizationKey(ticket), organizationLabel(ticket));
+    }
+
+    return Array.from(options.entries())
+      .map(([value, label]) => ({ value, label }))
+      .sort((left, right) => compareText(left.label, right.label));
+  }, [tickets]);
+  const visibleTickets = useMemo(() => {
+    const normalizedQuery = ticketViewSettings.query.trim().toLocaleLowerCase("de");
+    const filtered = tickets.filter((ticket) => {
+      const matchesQuery =
+        !normalizedQuery ||
+        ticket.ticket_number.toLocaleLowerCase("de").includes(normalizedQuery) ||
+        organizationLabel(ticket).toLocaleLowerCase("de").includes(normalizedQuery);
+      const matchesWorkType = ticketViewSettings.workType === "all" || ticket.work_type === ticketViewSettings.workType;
+      const matchesOrganization = ticketViewSettings.organization === "all" || organizationKey(ticket) === ticketViewSettings.organization;
+      const matchesStatus = ticketViewSettings.status === "all" || ticketStatusKey(ticket) === ticketViewSettings.status;
+
+      return matchesQuery && matchesWorkType && matchesOrganization && matchesStatus;
+    });
+
+    return sortTickets(filtered, ticketViewSettings.sortBy, ticketViewSettings.sortDirection);
+  }, [tickets, ticketViewSettings]);
+  const ticketSections = useMemo(() => groupTicketSections(visibleTickets, ticketViewSettings.groupBy), [visibleTickets, ticketViewSettings.groupBy]);
+  const activeFilterCount = [
+    ticketViewSettings.query.trim(),
+    ticketViewSettings.workType !== "all",
+    ticketViewSettings.organization !== "all",
+    ticketViewSettings.status !== "all",
+    ticketViewSettings.groupBy !== "none",
+    ticketViewSettings.sortBy !== "ticket",
+    ticketViewSettings.sortDirection !== "asc"
+  ].filter(Boolean).length;
+  const timeline = buildTimeline(periodType, period, overview);
+  const chartWidth = 900;
+  const chartHeight = 180;
+  const chartPadding = { top: 18, right: 18, bottom: 34, left: 64 };
+  const chartInnerWidth = chartWidth - chartPadding.left - chartPadding.right;
+  const chartInnerHeight = chartHeight - chartPadding.top - chartPadding.bottom;
+  const maxMinutes = Math.max(...timeline.map((bucket) => bucket.totalMinutes), 1);
+  const chartMaxMinutes = niceCeilMinutes(maxMinutes);
+  const yAxisTicks = Array.from({ length: 5 }).map((_, index) => chartMaxMinutes - (index * chartMaxMinutes) / 4);
+  const barWidth = Math.max(4, Math.min(18, chartInnerWidth / Math.max(timeline.length, 1) / 1.8));
+  const chartPoints = timeline.map((bucket, index) => {
+    const x =
+      timeline.length === 1
+        ? chartPadding.left + chartInnerWidth / 2
+        : chartPadding.left + (index * chartInnerWidth) / (timeline.length - 1);
+
+    return {
+      bucket,
+      x,
+      barHeight: bucket.totalMinutes > 0 ? Math.max(2, (bucket.totalMinutes / chartMaxMinutes) * chartInnerHeight) : 0,
+      y: chartPadding.top + (1 - bucket.totalMinutes / chartMaxMinutes) * chartInnerHeight
+    };
+  });
+  const effortPath = buildChartPath(chartPoints.filter((point) => point.bucket.totalMinutes > 0).map((point) => ({ x: point.x, y: point.y })));
+  const labelStep = periodType === "month" ? Math.max(1, Math.ceil(timeline.length / 8)) : 3;
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between">
+        <div>
+          <h2 className="text-2xl font-semibold tracking-normal">Auswertung</h2>
+          <p className="text-sm text-muted-foreground">
+            {supportsPeriodClosure ? "Tickets prüfen, Sessions markieren und Monat abschließen." : "Sessions des Tages prüfen und bewerten."}
+          </p>
+        </div>
+        <div className="grid gap-2 sm:grid-cols-[auto_minmax(220px,300px)] sm:items-end">
+          <div className="grid grid-cols-2 rounded-md border bg-background p-1">
+            <Button size="sm" variant={periodType === "month" ? "default" : "ghost"} className="h-8" onClick={() => switchPeriodType("month")}>
+              Monat
+            </Button>
+            <Button size="sm" variant={periodType === "day" ? "default" : "ghost"} className="h-8" onClick={() => switchPeriodType("day")}>
+              Tag
+            </Button>
+          </div>
+          <div className="space-y-1">
+            <div className="flex items-center justify-between gap-2">
+              <label className="text-xs font-medium text-muted-foreground" htmlFor="period">
+                {periodLabel}
+              </label>
+              {loading ? <span className="text-xs text-muted-foreground">lädt...</span> : null}
+            </div>
+            <div className="grid grid-cols-[2.25rem_minmax(0,1fr)_2.25rem] gap-1">
+              <Button type="button" size="icon" variant="secondary" className="h-9 w-9" onClick={() => changePeriodBy(-1)} aria-label={`${periodLabel} zurück`}>
+                <ChevronLeft className="size-4" />
+              </Button>
+              <Input
+                id="period"
+                className="h-9"
+                type={periodType === "month" ? "month" : "date"}
+                value={period}
+                onChange={(event) => {
+                  setPeriod(event.currentTarget.value);
+                  setShowOpen(false);
+                }}
+              />
+              <Button type="button" size="icon" variant="secondary" className="h-9 w-9" onClick={() => changePeriodBy(1)} aria-label={`${periodLabel} vor`}>
+                <ChevronRight className="size-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        {metricCards.map(({ label, value, detail, icon: Icon }) => (
+          <Card key={label}>
+            <CardContent className="flex items-center gap-3 p-3">
+              <div className="grid size-8 shrink-0 place-items-center rounded-lg border bg-muted/40 text-muted-foreground">
+                <Icon className="size-3.5" />
+              </div>
+              <div className="min-w-0">
+                <p className="text-xs font-medium text-muted-foreground">{label}</p>
+                <p className="truncate text-xl font-semibold tracking-normal">{value}</p>
+                {detail ? <p className="truncate text-xs text-muted-foreground">{detail}</p> : null}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Card>
+        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+          <div>
+            <CardTitle>Gesamtaufwand</CardTitle>
+            <CardDescription>
+              {periodType === "month" ? "Aufwand pro Tag im ausgewählten Monat." : "Aufwand pro Stunde am ausgewählten Tag."}
+            </CardDescription>
+          </div>
+          <Badge variant="outline">{formatMinutes(totals?.minutes ?? 0)}</Badge>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <div className="h-44 w-full overflow-hidden rounded-md border bg-background">
+            {(totals?.minutes ?? 0) > 0 ? (
+              <svg viewBox={`0 0 ${chartWidth} ${chartHeight}`} className="h-full w-full">
+                {yAxisTicks.map((tick) => {
+                  const y = chartPadding.top + (1 - tick / chartMaxMinutes) * chartInnerHeight;
+
+                  return (
+                    <g key={tick}>
+                      <line x1={chartPadding.left} x2={chartWidth - chartPadding.right} y1={y} y2={y} stroke="currentColor" className="text-muted/70" />
+                      <line x1={chartPadding.left - 5} x2={chartPadding.left} y1={y} y2={y} stroke="currentColor" className="text-muted-foreground/70" />
+                      <text x={chartPadding.left - 9} y={y + 4} textAnchor="end" className="fill-muted-foreground text-[11px]">
+                        {formatAxisMinutes(tick)}
+                      </text>
+                    </g>
+                  );
+                })}
+                <line
+                  x1={chartPadding.left}
+                  x2={chartPadding.left}
+                  y1={chartPadding.top}
+                  y2={chartPadding.top + chartInnerHeight}
+                  stroke="currentColor"
+                  className="text-muted-foreground/70"
+                />
+
+                {chartPoints.map((point) => {
+                  const barY = chartPadding.top + chartInnerHeight - point.barHeight;
+
+                  return (
+                    <g key={point.bucket.key}>
+                      {point.bucket.totalMinutes > 0 ? (
+                        <rect
+                          x={point.x - barWidth / 2}
+                          y={barY}
+                          width={barWidth}
+                          height={point.barHeight}
+                          rx="4"
+                          className="fill-neutral-300 dark:fill-neutral-700"
+                        />
+                      ) : null}
+                    </g>
+                  );
+                })}
+
+                {effortPath ? <path d={effortPath} fill="none" stroke="currentColor" strokeWidth="2.5" className="text-foreground" /> : null}
+
+                {chartPoints.filter((point) => point.bucket.totalMinutes > 0).map((point) => (
+                  <circle key={`${point.bucket.key}-effort`} cx={point.x} cy={point.y} r="3" className="fill-background stroke-foreground" strokeWidth="2" />
+                ))}
+
+                {chartPoints.map((point, index) =>
+                  index % labelStep === 0 || index === chartPoints.length - 1 ? (
+                    <text key={`${point.bucket.key}-label`} x={point.x} y={chartHeight - 10} textAnchor="middle" className="fill-muted-foreground text-[11px]">
+                      {point.bucket.label}
+                    </text>
+                  ) : null
+                )}
+              </svg>
+            ) : (
+              <div className="grid h-full place-items-center text-sm text-muted-foreground">Keine Daten für den gewählten Zeitraum.</div>
+            )}
+          </div>
+          <div className="mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground">
+            <span className="inline-flex items-center gap-1.5">
+              <span className="size-2 rounded-sm bg-neutral-300 dark:bg-neutral-700" />
+              Minuten
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <span className="h-0.5 w-4 bg-foreground" />
+              Verlauf
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+
+      {supportsPeriodClosure && overview?.closed ? (
+        <Alert variant="success" className="flex items-center gap-2 py-3">
+          <CheckCircle2 className="size-4 shrink-0" />
+          <span>Dieser Monat wurde am {formatDateTime(overview.closedAt!)} abgeschlossen.</span>
+        </Alert>
+      ) : null}
+
+      {overview && overview.openSessions.length > 0 ? (
+        <Alert variant="warning" className="flex flex-col gap-2 py-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-2">
+            <CircleAlert className="size-4 shrink-0" />
+            <span>Es gibt noch {overview.openSessions.length} Session(s) ohne Auswahl.</span>
+          </div>
+          <Button variant="ghost" size="sm" onClick={() => setShowOpen((value) => !value)}>
+            Offene Sessions prüfen
+          </Button>
+        </Alert>
+      ) : null}
+
+      {showOpen && overview?.openSessions.length ? (
+        <Card>
+          <CardHeader className="p-4">
+            <CardTitle>Nicht bearbeitete Sessions</CardTitle>
+            <CardDescription>Diese Einträge blockieren den Monatsabschluss.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2 px-4 pb-4">
+            {overview.openSessions.map((session) => (
+              <div key={session.id} className="grid gap-2 rounded-md border p-3 sm:grid-cols-[1fr_auto] sm:items-center">
+                <div className="min-w-0">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="font-medium">{session.ticket_number}</span>
+                    <Badge variant="outline">{formatMinutes(session.rounded_minutes)}</Badge>
+                  </div>
+                  <p className="truncate text-sm text-muted-foreground">{session.customer_name}</p>
+                  <p className="text-sm">{session.activity}</p>
+                </div>
+                <Button variant="secondary" size="sm" onClick={() => onNavigate(`/analysis/${periodType}/${period}/tickets/${session.ticket_id}`)}>
+                  Öffnen
+                  <ExternalLink className="size-4" />
+                </Button>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      ) : null}
+
+      <Card>
+        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+          <div>
+            <CardTitle>Tickets im Zeitraum</CardTitle>
+            <CardDescription>
+              {supportsPeriodClosure ? "Sessions prüfen und danach den Monat abschließen." : "Tagesansicht ohne eigenen Abschluss."}
+            </CardDescription>
+          </div>
+          {supportsPeriodClosure ? (
+            overview?.closed ? (
+              <Button size="sm" variant="secondary" disabled={reopening} onClick={openPeriodAgain}>
+                <LockOpen className="size-4" />
+                {reopening ? "Öffnet..." : "Monat wieder öffnen"}
+              </Button>
+            ) : (
+              <Button size="sm" variant={overview?.canClose ? "default" : "secondary"} disabled={!overview?.canClose || closing} onClick={finishPeriod}>
+                <CheckCircle2 className="size-4" />
+                {closing ? "Schließt..." : overview?.canClose ? "Monat abschließen" : "Noch nicht abschließbar"}
+              </Button>
+            )
+          ) : null}
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <div className="mb-4 rounded-md border bg-muted/20 p-3">
+            <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-center gap-2">
+                <SlidersHorizontal className="size-4 text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium">Ansicht</p>
+                  <p className="text-xs text-muted-foreground">
+                    {visibleTickets.length} von {tickets.length} Ticket(s)
+                  </p>
+                </div>
+                {activeFilterCount > 0 ? <Badge variant="outline">{activeFilterCount} aktiv</Badge> : null}
+              </div>
+              <Button
+                type="button"
+                size="sm"
+                variant="secondary"
+                disabled={activeFilterCount === 0}
+                onClick={() => setTicketViewSettings(defaultTicketViewSettings)}
+              >
+                <RotateCcw className="size-3.5" />
+                Zurücksetzen
+              </Button>
+            </div>
+
+            <div className="grid gap-2 md:grid-cols-2 xl:grid-cols-[minmax(180px,1fr)_150px_190px_140px_140px_140px_120px]">
+              <div className="space-y-1">
+                <label className="text-xs font-medium text-muted-foreground" htmlFor="ticket-filter-query">Suche</label>
+                <Input
+                  id="ticket-filter-query"
+                  className="h-8"
+                  value={ticketViewSettings.query}
+                  placeholder="Ticket oder Organisation"
+                  onChange={(event) => setTicketViewSettings((current) => ({ ...current, query: event.currentTarget.value }))}
+                />
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-xs font-medium text-muted-foreground">Typ</label>
+                <Select value={ticketViewSettings.workType} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, workType: value as TicketWorkTypeFilter }))}>
+                  <SelectTrigger size="sm" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">Alle Typen</SelectItem>
+                    <SelectItem value="support">Support</SelectItem>
+                    <SelectItem value="consulting">Consulting</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-xs font-medium text-muted-foreground">Organisation</label>
+                <Select value={ticketViewSettings.organization} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, organization: value }))}>
+                  <SelectTrigger size="sm" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">Alle Organisationen</SelectItem>
+                    {organizationOptions.map((organization) => (
+                      <SelectItem key={organization.value} value={organization.value}>
+                        {organization.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-xs font-medium text-muted-foreground">Status</label>
+                <Select value={ticketViewSettings.status} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, status: value as TicketStatusFilter }))}>
+                  <SelectTrigger size="sm" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">Alle Status</SelectItem>
+                    <SelectItem value="open">Offen</SelectItem>
+                    <SelectItem value="evaluated">Bewertet</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-xs font-medium text-muted-foreground">Gruppierung</label>
+                <Select value={ticketViewSettings.groupBy} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, groupBy: value as TicketGroupBy }))}>
+                  <SelectTrigger size="sm" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {groupByOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-xs font-medium text-muted-foreground">Sortierung</label>
+                <Select value={ticketViewSettings.sortBy} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, sortBy: value as TicketSortBy }))}>
+                  <SelectTrigger size="sm" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {sortByOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-xs font-medium text-muted-foreground">Richtung</label>
+                <Select value={ticketViewSettings.sortDirection} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, sortDirection: value as TicketSortDirection }))}>
+                  <SelectTrigger size="sm" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="asc">Aufsteigend</SelectItem>
+                    <SelectItem value="desc">Absteigend</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+
+          <div className="hidden md:block">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Ticket</TableHead>
+                  <TableHead>Organisation</TableHead>
+                  <TableHead>Art</TableHead>
+                  <TableHead>Sessions</TableHead>
+                  <TableHead>Zeit</TableHead>
+                  <TableHead>Abgerechnet</TableHead>
+                  <TableHead>Nicht abrechenbar</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ticketSections.map((section) => (
+                  <Fragment key={section.key}>
+                    {ticketViewSettings.groupBy !== "none" ? (
+                      <TableRow className="bg-muted/40 hover:bg-muted/40">
+                        <TableCell colSpan={9}>
+                          <div className="flex flex-wrap items-center gap-2">
+                            <span className="font-semibold">{section.label}</span>
+                            <Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
+                            <Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
+                            {section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ) : null}
+                    {section.tickets.map((ticket) => (
+                      <TableRow key={ticket.id}>
+                        <TableCell>
+                          <div className="flex items-center gap-1">
+                            <span className="font-semibold">{ticket.ticket_number}</span>
+                            <CopyTicketButton ticketNumber={ticket.ticket_number} />
+                          </div>
+                        </TableCell>
+                        <TableCell>{ticket.customer_name ?? "-"}</TableCell>
+                        <TableCell>{workTypeLabel(ticket.work_type)}</TableCell>
+                        <TableCell>{ticket.session_count}</TableCell>
+                        <TableCell>{formatMinutes(ticket.total_minutes)}</TableCell>
+                        <TableCell>{ticket.billed_count}</TableCell>
+                        <TableCell>{ticket.non_billable_count}</TableCell>
+                        <TableCell>
+                          <TicketStatus ticket={ticket} />
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button variant="ghost" size="sm" onClick={() => onNavigate(`/analysis/${periodType}/${period}/tickets/${ticket.id}`)}>
+                            Öffnen
+                            <ExternalLink className="size-4" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          <div className="space-y-2 md:hidden">
+            {ticketSections.map((section) => (
+              <div key={section.key} className="space-y-2">
+                {ticketViewSettings.groupBy !== "none" ? (
+                  <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 px-3 py-2">
+                    <span className="font-semibold">{section.label}</span>
+                    <Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
+                    <Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
+                    {section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
+                  </div>
+                ) : null}
+                {section.tickets.map((ticket) => (
+                  <div key={ticket.id} className="space-y-2 rounded-md border bg-background p-3">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-1">
+                          <p className="truncate font-semibold">{ticket.ticket_number}</p>
+                          <CopyTicketButton ticketNumber={ticket.ticket_number} />
+                        </div>
+                        <p className="text-sm text-muted-foreground">{ticket.customer_name ?? "Keine Organisation"} · {workTypeLabel(ticket.work_type)} · {ticket.session_count} Session(s)</p>
+                      </div>
+                      <TicketStatus ticket={ticket} />
+                    </div>
+                    <div className="grid grid-cols-3 gap-2 text-sm">
+                      <div className="rounded-md bg-muted/50 p-2">
+                        <p className="text-muted-foreground">Zeit</p>
+                        <p className="font-medium">{formatMinutes(ticket.total_minutes)}</p>
+                      </div>
+                      <div className="rounded-md bg-muted/50 p-2">
+                        <p className="text-muted-foreground">Abr.</p>
+                        <p className="font-medium">{ticket.billed_count}</p>
+                      </div>
+                      <div className="rounded-md bg-muted/50 p-2">
+                        <p className="text-muted-foreground">Nicht</p>
+                        <p className="font-medium">{ticket.non_billable_count}</p>
+                      </div>
+                    </div>
+                    <Button className="w-full" size="sm" variant="secondary" onClick={() => onNavigate(`/analysis/${periodType}/${period}/tickets/${ticket.id}`)}>
+                      Öffnen
+                      <ExternalLink className="size-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+
+          {tickets.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">Für diesen Zeitraum sind noch keine Sessions vorhanden.</p>
+          ) : visibleTickets.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">Keine Tickets passend zu den aktuellen Filtern.</p>
+          ) : null}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

frontend/src/views/LoginPage.tsx

@@ -0,0 +1,72 @@
+import { FormEvent, useState } from "react";
+import { LogIn } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { login } from "../api";
+import type { AuthUser } from "../types";
+
+type LoginPageProps = {
+  onLogin: (user: AuthUser) => void;
+};
+
+export function LoginPage({ onLogin }: LoginPageProps) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setLoading(true);
+
+    try {
+      const result = await login({ username, password });
+      onLogin(result.user);
+    } catch (error) {
+      toast.error("Login fehlgeschlagen", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="grid min-h-screen place-items-center bg-background p-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>TicketTracker</CardTitle>
+          <CardDescription>Melde dich an, um deine Sessions und Auswertungen zu sehen.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form className="space-y-4" onSubmit={submit}>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="login-username">
+                Benutzername
+              </label>
+              <Input id="login-username" value={username} onChange={(event) => setUsername(event.currentTarget.value)} autoComplete="username" required />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="login-password">
+                Passwort
+              </label>
+              <Input
+                id="login-password"
+                type="password"
+                value={password}
+                onChange={(event) => setPassword(event.currentTarget.value)}
+                autoComplete="current-password"
+                required
+              />
+            </div>
+            <Button className="w-full" type="submit" disabled={loading}>
+              <LogIn className="size-4" />
+              {loading ? "Meldet an..." : "Anmelden"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

frontend/src/views/ProfilePage.tsx

@@ -0,0 +1,156 @@
+import { FormEvent, useEffect, useState } from "react";
+import { KeyRound, Save, UserCircle } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { updateCurrentUser } from "../api";
+import type { AuthUser } from "../types";
+
+type ProfilePageProps = {
+  currentUser: AuthUser;
+  onUserUpdated: (user: AuthUser) => void;
+};
+
+export function ProfilePage({ currentUser, onUserUpdated }: ProfilePageProps) {
+  const [username, setUsername] = useState(currentUser.username);
+  const [displayName, setDisplayName] = useState(currentUser.display_name);
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setUsername(currentUser.username);
+    setDisplayName(currentUser.display_name);
+  }, [currentUser]);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+
+    const wantsPasswordChange = newPassword.length > 0 || confirmPassword.length > 0 || currentPassword.length > 0;
+
+    if (wantsPasswordChange && newPassword !== confirmPassword) {
+      toast.error("Passwörter stimmen nicht überein");
+      return;
+    }
+
+    if (wantsPasswordChange && newPassword.length < 6) {
+      toast.error("Passwort ist zu kurz", {
+        description: "Das neue Passwort muss mindestens 6 Zeichen lang sein."
+      });
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      const result = await updateCurrentUser({
+        username,
+        displayName,
+        currentPassword: wantsPasswordChange ? currentPassword : undefined,
+        newPassword: wantsPasswordChange ? newPassword : undefined
+      });
+      onUserUpdated(result.user);
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+      toast.success("Profil gespeichert");
+    } catch (error) {
+      toast.error("Profil konnte nicht gespeichert werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-xl font-semibold tracking-normal sm:text-2xl">Profil</h2>
+        <p className="text-sm text-muted-foreground">Benutzername, voller Name und Passwort deines Accounts.</p>
+      </div>
+
+      <Card>
+        <CardHeader className="p-4">
+          <div className="flex items-center gap-2">
+            <UserCircle className="size-5 text-muted-foreground" />
+            <CardTitle>Accountdaten</CardTitle>
+          </div>
+          <CardDescription>Der Benutzername wird beim Login verwendet. Dein voller Name wird in der App angezeigt.</CardDescription>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <form className="space-y-5" onSubmit={submit}>
+            <div className="grid gap-3 md:grid-cols-2">
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="profile-username">
+                  Benutzername
+                </label>
+                <Input id="profile-username" value={username} onChange={(event) => setUsername(event.currentTarget.value)} required />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="profile-display-name">
+                  Voller Name
+                </label>
+                <Input id="profile-display-name" value={displayName} onChange={(event) => setDisplayName(event.currentTarget.value)} required />
+              </div>
+            </div>
+
+            <div className="rounded-md border bg-muted/30 p-3">
+              <div className="mb-3 flex items-center gap-2">
+                <KeyRound className="size-4 text-muted-foreground" />
+                <p className="text-sm font-medium">Passwort ändern</p>
+              </div>
+              <div className="grid gap-3 md:grid-cols-3">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="profile-current-password">
+                    Aktuelles Passwort
+                  </label>
+                  <Input
+                    id="profile-current-password"
+                    type="password"
+                    value={currentPassword}
+                    onChange={(event) => setCurrentPassword(event.currentTarget.value)}
+                    autoComplete="current-password"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="profile-new-password">
+                    Neues Passwort
+                  </label>
+                  <Input
+                    id="profile-new-password"
+                    type="password"
+                    value={newPassword}
+                    onChange={(event) => setNewPassword(event.currentTarget.value)}
+                    autoComplete="new-password"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="profile-confirm-password">
+                    Wiederholen
+                  </label>
+                  <Input
+                    id="profile-confirm-password"
+                    type="password"
+                    value={confirmPassword}
+                    onChange={(event) => setConfirmPassword(event.currentTarget.value)}
+                    autoComplete="new-password"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-end">
+              <Button type="submit" disabled={saving}>
+                <Save className="size-4" />
+                {saving ? "Speichert..." : "Profil speichern"}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

frontend/src/views/RecurringBillingsPage.tsx

@@ -0,0 +1,491 @@
+import { FormEvent, useEffect, useState } from "react";
+import { Pencil, Plus, Repeat, Trash2, X } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { OrganizationSelect } from "@/components/OrganizationSelect";
+import { createRecurringBilling, deleteRecurringBilling, getRecurringBillings, updateRecurringBilling } from "../api";
+import { currentDay, formatMinutes } from "../format";
+import { ticketPattern } from "../timers";
+import type { RecurringBilling, WorkType } from "../types";
+
+type RecurringSlotFormState = {
+  id?: string;
+  weekday: number | null;
+  startTime: string;
+  durationHours: string;
+};
+
+type RecurringFormState = {
+  ticketNumber: string;
+  organizationId: string;
+  organizationName: string | null;
+  activity: string;
+  workType: WorkType;
+  recurrenceType: "weekly" | "every_n_weeks";
+  intervalValue: number;
+  validFrom: string;
+  validUntil: string;
+  slots: RecurringSlotFormState[];
+};
+
+const weekdays = [
+  { value: 1, label: "Mo" },
+  { value: 2, label: "Di" },
+  { value: 3, label: "Mi" },
+  { value: 4, label: "Do" },
+  { value: 5, label: "Fr" },
+  { value: 6, label: "Sa" },
+  { value: 0, label: "So" }
+];
+
+function emptyRecurringForm(): RecurringFormState {
+  return {
+    ticketNumber: "",
+    organizationId: "",
+    organizationName: null,
+    activity: "",
+    workType: "support",
+    recurrenceType: "weekly",
+    intervalValue: 1,
+    validFrom: currentDay(),
+    validUntil: "",
+    slots: [{ weekday: 4, startTime: "09:00", durationHours: "4" }]
+  };
+}
+
+function formatDateLabel(value: string) {
+  return new Intl.DateTimeFormat("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  }).format(new Date(`${value}T00:00:00`));
+}
+
+export function RecurringBillingsPage() {
+  const [recurringBillings, setRecurringBillings] = useState<RecurringBilling[]>([]);
+  const [recurringForm, setRecurringForm] = useState<RecurringFormState>(() => emptyRecurringForm());
+  const [loadingRecurring, setLoadingRecurring] = useState(false);
+  const [creatingRecurring, setCreatingRecurring] = useState(false);
+  const [updatingRecurringId, setUpdatingRecurringId] = useState<string | null>(null);
+  const [editingBillingId, setEditingBillingId] = useState<string | null>(null);
+
+  useEffect(() => {
+    void loadRecurringBillings();
+  }, []);
+
+  async function loadRecurringBillings() {
+    setLoadingRecurring(true);
+
+    try {
+      const result = await getRecurringBillings();
+      setRecurringBillings(result.recurringBillings);
+    } catch (error) {
+      toast.error("Fixe Abrechnungen konnten nicht geladen werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setLoadingRecurring(false);
+    }
+  }
+
+  function changeRecurringType(nextType: "weekly" | "every_n_weeks") {
+    setRecurringForm((current) => ({
+      ...current,
+      recurrenceType: nextType,
+      intervalValue: nextType === "weekly" ? 1 : current.intervalValue || 1,
+      slots:
+        nextType === "weekly"
+          ? [{ weekday: 4, startTime: current.slots[0]?.startTime ?? "09:00", durationHours: current.slots[0]?.durationHours ?? "4" }]
+          : [{ weekday: null, startTime: current.slots[0]?.startTime ?? "09:00", durationHours: current.slots[0]?.durationHours ?? "4" }]
+    }));
+  }
+
+  function durationHoursLabel(minutes: number) {
+    const hours = minutes / 60;
+    return Number.isInteger(hours) ? String(hours) : String(hours).replace(".", ",");
+  }
+
+  function startEditing(billing: RecurringBilling) {
+    setEditingBillingId(billing.id);
+    setRecurringForm({
+      ticketNumber: billing.configured_ticket_number ?? "",
+      organizationId: billing.organization_id,
+      organizationName: billing.organization_name,
+      activity: billing.activity,
+      workType: billing.work_type,
+      recurrenceType: billing.recurrence_type,
+      intervalValue: billing.recurrence_type === "weekly" ? 1 : billing.interval_value,
+      validFrom: billing.valid_from,
+      validUntil: billing.valid_until ?? "",
+      slots: billing.slots.map((slot) => ({
+        id: slot.id,
+        weekday: billing.recurrence_type === "weekly" ? slot.weekday : null,
+        startTime: slot.start_time?.slice(0, 5) ?? "09:00",
+        durationHours: durationHoursLabel(slot.duration_minutes)
+      }))
+    });
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+
+  function cancelEditing() {
+    setEditingBillingId(null);
+    setRecurringForm(emptyRecurringForm());
+  }
+
+  function updateRecurringSlot(index: number, patch: Partial<RecurringSlotFormState>) {
+    setRecurringForm((current) => ({
+      ...current,
+      slots: current.slots.map((slot, slotIndex) => (slotIndex === index ? { ...slot, ...patch } : slot))
+    }));
+  }
+
+  async function submitRecurringBilling(event: FormEvent) {
+    event.preventDefault();
+
+    if (!recurringForm.organizationId) {
+      toast.error("Organisation wählen");
+      return;
+    }
+
+    const trimmedTicketNumber = recurringForm.ticketNumber.trim();
+
+    if (trimmedTicketNumber && !ticketPattern.test(trimmedTicketNumber)) {
+      toast.error("Ticketnummer prüfen", {
+        description: "Leer lassen für Fix#ID oder Ticket#XXXXXX eintragen."
+      });
+      return;
+    }
+
+    let slots: Array<{ id?: string; weekday: number | null; startTime: string; durationMinutes: number }>;
+
+    try {
+      slots = recurringForm.slots.map((slot) => {
+        const hours = Number(slot.durationHours.replace(",", "."));
+
+        if (!Number.isFinite(hours) || hours <= 0) {
+          throw new Error("Dauer prüfen");
+        }
+
+        return {
+          id: slot.id,
+          weekday: recurringForm.recurrenceType === "weekly" ? slot.weekday : null,
+          startTime: slot.startTime,
+          durationMinutes: Math.round(hours * 60)
+        };
+      });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Dauer prüfen");
+      return;
+    }
+
+    setCreatingRecurring(true);
+
+    try {
+      const payload = {
+        ticketNumber: trimmedTicketNumber || null,
+        organizationId: recurringForm.organizationId,
+        activity: recurringForm.activity,
+        workType: recurringForm.workType,
+        recurrenceType: recurringForm.recurrenceType,
+        intervalValue: recurringForm.recurrenceType === "weekly" ? 1 : recurringForm.intervalValue,
+        validFrom: recurringForm.validFrom,
+        validUntil: recurringForm.validUntil || null,
+        slots
+      };
+      const result = editingBillingId
+        ? await updateRecurringBilling(editingBillingId, payload)
+        : await createRecurringBilling(payload);
+      setRecurringBillings(result.recurringBillings);
+      setRecurringForm(emptyRecurringForm());
+      setEditingBillingId(null);
+      toast.success(editingBillingId ? "Fixe Abrechnung gespeichert" : "Fixe Abrechnung angelegt", {
+        description: "Die Sessions erscheinen automatisch in der Auswertung, sobald du den Zeitraum öffnest. Nicht mehr gültige erzeugte Sessions werden entfernt."
+      });
+    } catch (error) {
+      toast.error("Fixe Abrechnung konnte nicht angelegt werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setCreatingRecurring(false);
+    }
+  }
+
+  async function removeRecurring(billing: RecurringBilling) {
+    if (!window.confirm(`Fixe Abrechnung ${billing.ticket_number} wirklich löschen? Dadurch werden auch alle daraus erzeugten Sessions entfernt.`)) {
+      return;
+    }
+
+    setUpdatingRecurringId(billing.id);
+
+    try {
+      const result = await deleteRecurringBilling(billing.id);
+      setRecurringBillings(result.recurringBillings);
+      toast.success("Fixe Abrechnung gelöscht", {
+        description: "Die daraus erzeugten Sessions wurden entfernt."
+      });
+    } catch (error) {
+      toast.error("Fixe Abrechnung konnte nicht gelöscht werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setUpdatingRecurringId(null);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold tracking-normal sm:text-2xl">Fixe Abrechnungen</h2>
+          <p className="text-sm text-muted-foreground">Wiederkehrende Zeiten für deinen Account verwalten.</p>
+        </div>
+        <Badge variant="outline">{recurringBillings.length} Regel(n)</Badge>
+      </div>
+
+      <Card className="overflow-hidden">
+        <CardHeader className="border-b bg-muted/30 p-4">
+          <div className="flex items-center gap-2">
+            <Repeat className="size-5 text-muted-foreground" />
+            <CardTitle>{editingBillingId ? "Regel bearbeiten" : "Neue Regel"}</CardTitle>
+          </div>
+          <CardDescription>Ticket ist optional. Leer bedeutet automatische Gruppierung als Fix#ID.</CardDescription>
+        </CardHeader>
+        <CardContent className="p-4">
+          <form className="space-y-4" onSubmit={submitRecurringBilling}>
+            <div className="grid gap-3 lg:grid-cols-[170px_minmax(220px,1fr)_150px_180px]">
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="recurring-ticket-number">
+                  Ticket
+                </label>
+                <Input
+                  id="recurring-ticket-number"
+                  placeholder="leer = Fix#ID"
+                  value={recurringForm.ticketNumber}
+                  onChange={(event) => setRecurringForm({ ...recurringForm, ticketNumber: event.currentTarget.value })}
+                />
+                {recurringForm.ticketNumber.trim() && !ticketPattern.test(recurringForm.ticketNumber.trim()) ? (
+                  <p className="text-xs text-destructive">Leer lassen oder Ticket#XXXXXX</p>
+                ) : null}
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Organisation</label>
+                <OrganizationSelect
+                  value={recurringForm.organizationId}
+                  selectedName={recurringForm.organizationName}
+                  onChange={(organization) => setRecurringForm({ ...recurringForm, organizationId: organization.id, organizationName: organization.name })}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="recurring-work-type">
+                  Art
+                </label>
+                <select
+                  id="recurring-work-type"
+                  className="h-9 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                  value={recurringForm.workType}
+                  onChange={(event) => setRecurringForm({ ...recurringForm, workType: event.currentTarget.value as WorkType })}
+                >
+                  <option value="support">Support</option>
+                  <option value="consulting">Consulting</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="recurring-type">
+                  Muster
+                </label>
+                <select
+                  id="recurring-type"
+                  className="h-9 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                  value={recurringForm.recurrenceType}
+                  onChange={(event) => changeRecurringType(event.currentTarget.value as "weekly" | "every_n_weeks")}
+                >
+                  <option value="weekly">Wochentage</option>
+                  <option value="every_n_weeks">Alle X Wochen</option>
+                </select>
+              </div>
+            </div>
+
+            <div className={recurringForm.recurrenceType === "every_n_weeks" ? "grid gap-3 sm:grid-cols-[180px_180px_180px]" : "grid gap-3 sm:grid-cols-[180px_180px]"}>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="recurring-valid-from">
+                  Gültig von
+                </label>
+                <Input
+                  id="recurring-valid-from"
+                  type="date"
+                  value={recurringForm.validFrom}
+                  onChange={(event) => setRecurringForm({ ...recurringForm, validFrom: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="recurring-valid-until">
+                  Gültig bis
+                </label>
+                <Input
+                  id="recurring-valid-until"
+                  type="date"
+                  value={recurringForm.validUntil}
+                  onChange={(event) => setRecurringForm({ ...recurringForm, validUntil: event.currentTarget.value })}
+                />
+              </div>
+              {recurringForm.recurrenceType === "every_n_weeks" ? (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="recurring-interval">
+                    Alle X Wochen
+                  </label>
+                  <Input
+                    id="recurring-interval"
+                    type="number"
+                    min="1"
+                    value={recurringForm.intervalValue}
+                    onChange={(event) => setRecurringForm({ ...recurringForm, intervalValue: Number(event.currentTarget.value) || 1 })}
+                    required
+                  />
+                </div>
+              ) : null}
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="recurring-activity">
+                Tätigkeit
+              </label>
+              <Textarea
+                id="recurring-activity"
+                value={recurringForm.activity}
+                onChange={(event) => setRecurringForm({ ...recurringForm, activity: event.currentTarget.value })}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{recurringForm.recurrenceType === "weekly" ? "Wochentage und Dauer" : "Startzeit und Dauer"}</label>
+              <div className="space-y-2">
+                {recurringForm.slots.map((slot, index) => (
+                  <div
+                    key={index}
+                    className={
+                      recurringForm.recurrenceType === "weekly"
+                        ? "grid gap-2 rounded-md border p-2 sm:grid-cols-[90px_120px_120px_auto] sm:items-center"
+                        : "grid gap-2 rounded-md border p-2 sm:grid-cols-[120px_120px_auto] sm:items-center"
+                    }
+                  >
+                    {recurringForm.recurrenceType === "weekly" ? (
+                      <select
+                        className="h-9 rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                        value={slot.weekday ?? 1}
+                        onChange={(event) => updateRecurringSlot(index, { weekday: Number(event.currentTarget.value) })}
+                      >
+                        {weekdays.map((weekday) => (
+                          <option key={weekday.value} value={weekday.value}>
+                            {weekday.label}
+                          </option>
+                        ))}
+                      </select>
+                    ) : null}
+                    <Input type="time" value={slot.startTime} onChange={(event) => updateRecurringSlot(index, { startTime: event.currentTarget.value })} required />
+                    <Input
+                      inputMode="decimal"
+                      value={slot.durationHours}
+                      onChange={(event) => updateRecurringSlot(index, { durationHours: event.currentTarget.value })}
+                      placeholder="2,5"
+                      required
+                    />
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant="ghost"
+                      className="size-8 text-destructive hover:text-destructive"
+                      disabled={recurringForm.slots.length === 1}
+                      onClick={() => setRecurringForm({ ...recurringForm, slots: recurringForm.slots.filter((_, slotIndex) => slotIndex !== index) })}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+              {recurringForm.recurrenceType === "weekly" ? (
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="sm"
+                  onClick={() =>
+                    setRecurringForm({
+                      ...recurringForm,
+                      slots: [...recurringForm.slots, { weekday: 1, startTime: "09:00", durationHours: "2,5" }]
+                    })
+                  }
+                >
+                  <Plus className="size-4" />
+                  Slot hinzufügen
+                </Button>
+              ) : null}
+            </div>
+
+            <div className="flex justify-end">
+              <div className="flex gap-2">
+                {editingBillingId ? (
+                  <Button type="button" variant="secondary" disabled={creatingRecurring} onClick={cancelEditing}>
+                    <X className="size-4" />
+                    Abbrechen
+                  </Button>
+                ) : null}
+                <Button type="submit" disabled={creatingRecurring}>
+                  <Repeat className="size-4" />
+                  {creatingRecurring ? "Speichert..." : editingBillingId ? "Regel speichern" : "Fixe Abrechnung anlegen"}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className="overflow-hidden">
+        <CardHeader className="border-b bg-muted/30 p-4">
+          <CardTitle>Regeln</CardTitle>
+          <CardDescription>Erzeugte Einträge können in der Auswertung verschoben oder gelöscht werden.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2 p-4">
+          {recurringBillings.map((billing) => (
+            <div key={billing.id} className="grid gap-2 rounded-md border bg-background p-3 lg:grid-cols-[1fr_auto] lg:items-center">
+              <div className="min-w-0">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="font-semibold">{billing.ticket_number}</span>
+                  {billing.configured_ticket_number ? <Badge variant="outline">Ticket</Badge> : <Badge variant="outline">Fix</Badge>}
+                </div>
+                <p className="whitespace-pre-wrap break-words text-sm text-muted-foreground">{billing.organization_name} · {billing.activity}</p>
+                <p className="text-xs text-muted-foreground">
+                  {billing.recurrence_type === "weekly" ? "Wochentage" : `Alle ${billing.interval_value} Woche(n)`} · {formatDateLabel(billing.valid_from)}
+                  {billing.valid_until ? ` bis ${formatDateLabel(billing.valid_until)}` : ""}
+                </p>
+                <div className="mt-1 flex flex-wrap gap-1">
+                  {billing.slots.map((slot) => (
+                    <Badge key={slot.id} variant="outline">
+                      {slot.weekday === null ? "Starttag" : weekdays.find((weekday) => weekday.value === slot.weekday)?.label} · {slot.start_time?.slice(0, 5)} · {formatMinutes(slot.duration_minutes)}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+              <div className="flex gap-2 lg:justify-end">
+                <Button size="sm" variant="secondary" disabled={updatingRecurringId === billing.id} onClick={() => startEditing(billing)}>
+                  <Pencil className="size-4" />
+                  Bearbeiten
+                </Button>
+                <Button size="icon" variant="ghost" className="size-8 text-destructive hover:text-destructive" disabled={updatingRecurringId === billing.id} onClick={() => void removeRecurring(billing)}>
+                  <Trash2 className="size-4" />
+                </Button>
+              </div>
+            </div>
+          ))}
+          {loadingRecurring ? <p className="py-2 text-center text-sm text-muted-foreground">Fixe Abrechnungen werden geladen...</p> : null}
+          {!loadingRecurring && recurringBillings.length === 0 ? <p className="py-2 text-center text-sm text-muted-foreground">Noch keine fixen Abrechnungen vorhanden.</p> : null}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

frontend/src/views/TicketDetailPage.tsx

@@ -0,0 +1,853 @@
+import { ArrowLeft, Pencil, Save, Trash2 } from "lucide-react";
+import { FormEvent, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { CopyTicketButton } from "@/components/CopyTicketButton";
+import { OrganizationSelect } from "@/components/OrganizationSelect";
+import {
+  createSession,
+  deleteSession,
+  getTicketPeriod,
+  updateSessionBilling,
+  updateSessionDetails,
+  updateTicket,
+  updateTicketDayBilling
+} from "../api";
+import { currentDay, formatDate, formatDateTime, formatMinutes, formatTimeRange } from "../format";
+import type { BillingStatus, PeriodType, SessionEntry, TicketPeriod, WorkType } from "../types";
+import { cn } from "@/lib/utils";
+
+type TicketDetailPageProps = {
+  periodType: PeriodType;
+  period: string;
+  ticketId: string;
+  onNavigate: (to: string) => void;
+};
+
+type TicketSessionFormState = {
+  organizationId: string;
+  organizationName: string | null;
+  activity: string;
+  workType: WorkType;
+  day: string;
+  startTime: string;
+  endTime: string;
+};
+
+function emptyTicketSessionForm(): TicketSessionFormState {
+  return {
+    organizationId: "",
+    organizationName: null,
+    activity: "",
+    workType: "support",
+    day: currentDay(),
+    startTime: "09:00",
+    endTime: "09:30"
+  };
+}
+
+function BillingButtons({
+  session,
+  disabled,
+  loading,
+  onChange
+}: {
+  session: SessionEntry;
+  disabled: boolean;
+  loading: boolean;
+  onChange: (status: BillingStatus) => void;
+}) {
+  const status = session.billing_status;
+
+  return (
+    <div className="grid grid-cols-2 gap-1.5 sm:inline-grid">
+      <Button
+        type="button"
+        size="sm"
+        variant={status === "billed" ? "default" : "secondary"}
+        disabled={loading || (disabled && status !== "billed")}
+        onClick={() => onChange(status === "billed" ? null : "billed")}
+        className={cn("h-8", status === "billed" ? "" : "bg-secondary/70")}
+      >
+        Abgerechnet
+      </Button>
+      <Button
+        type="button"
+        size="sm"
+        variant={status === "non_billable" ? "default" : "secondary"}
+        disabled={loading || (disabled && status !== "non_billable")}
+        onClick={() => onChange(status === "non_billable" ? null : "non_billable")}
+        className={cn("h-8", status === "non_billable" ? "" : "bg-secondary/70")}
+      >
+        Nicht abrechenbar
+      </Button>
+    </div>
+  );
+}
+
+function sessionDayKey(value: string) {
+  const date = new Date(value);
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+
+function toDateLocalValue(value: string) {
+  const date = new Date(value);
+  const offsetMs = date.getTimezoneOffset() * 60_000;
+  return new Date(date.getTime() - offsetMs).toISOString().slice(0, 10);
+}
+
+function toTimeLocalValue(value: string) {
+  const date = new Date(value);
+  const offsetMs = date.getTimezoneOffset() * 60_000;
+  return new Date(date.getTime() - offsetMs).toISOString().slice(11, 16);
+}
+
+function formatHoursInput(minutes?: number | null) {
+  if (minutes === null || minutes === undefined) {
+    return "";
+  }
+
+  return new Intl.NumberFormat("de-DE", { maximumFractionDigits: 2 }).format(minutes / 60);
+}
+
+function parseHoursInput(value: string) {
+  const trimmed = value.trim();
+
+  if (!trimmed) {
+    return null;
+  }
+
+  if (/[,.]$/.test(trimmed)) {
+    return undefined;
+  }
+
+  const hours = Number(trimmed.replace(",", "."));
+
+  if (!Number.isFinite(hours) || hours < 0) {
+    return undefined;
+  }
+
+  return Math.round(hours * 60);
+}
+
+function isPartialHoursInput(value: string) {
+  return /^\d*(?:[,.]\d*)?$/.test(value.trim());
+}
+
+export function TicketDetailPage({ periodType, period, ticketId, onNavigate }: TicketDetailPageProps) {
+  const [data, setData] = useState<TicketPeriod | null>(null);
+  const [loadingId, setLoadingId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [savingTicket, setSavingTicket] = useState(false);
+  const [editTicketNumber, setEditTicketNumber] = useState("");
+  const [editOrganizationId, setEditOrganizationId] = useState("");
+  const [editOrganizationName, setEditOrganizationName] = useState<string | null>(null);
+  const [editWorkType, setEditWorkType] = useState<WorkType>("support");
+  const [editingSession, setEditingSession] = useState<SessionEntry | null>(null);
+  const [editSessionOrganizationId, setEditSessionOrganizationId] = useState("");
+  const [editSessionOrganizationName, setEditSessionOrganizationName] = useState<string | null>(null);
+  const [editSessionActivity, setEditSessionActivity] = useState("");
+  const [editSessionWorkType, setEditSessionWorkType] = useState<WorkType>("support");
+  const [editSessionDay, setEditSessionDay] = useState("");
+  const [editSessionStartTime, setEditSessionStartTime] = useState("");
+  const [editSessionEndTime, setEditSessionEndTime] = useState("");
+  const [savingSessionDetails, setSavingSessionDetails] = useState(false);
+  const [dayBillingInputs, setDayBillingInputs] = useState<Record<string, string>>({});
+  const [savingDayBillingKey, setSavingDayBillingKey] = useState<string | null>(null);
+  const [ticketSession, setTicketSession] = useState<TicketSessionFormState>(() => emptyTicketSessionForm());
+  const [savingTicketSession, setSavingTicketSession] = useState(false);
+
+  async function load() {
+    try {
+      setData(await getTicketPeriod(periodType, period, ticketId));
+    } catch (error) {
+      toast.error("Ticket konnte nicht geladen werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    }
+  }
+
+  useEffect(() => {
+    void load();
+  }, [periodType, period, ticketId]);
+
+  useEffect(() => {
+    const nextInputs = Object.fromEntries((data?.dayBillings ?? []).map((billing) => [billing.day, formatHoursInput(billing.billed_minutes)]));
+    setDayBillingInputs(nextInputs);
+  }, [data?.dayBillings]);
+
+  useEffect(() => {
+    if (!data?.ticket) {
+      return;
+    }
+
+    setEditTicketNumber(data.ticket.ticket_number);
+    setEditOrganizationId(data.ticket.organization_id ?? "");
+    setEditOrganizationName(data.ticket.organization_name ?? null);
+    setEditWorkType(data.ticket.work_type ?? "support");
+    setTicketSession((current) => ({
+      ...current,
+      organizationId: data.ticket.organization_id ?? current.organizationId,
+      organizationName: data.ticket.organization_name ?? current.organizationName,
+      workType: data.ticket.work_type ?? current.workType
+    }));
+  }, [data?.ticket]);
+
+  const ticket = data?.ticket;
+  const isPeriodClosed = Boolean(data?.closed);
+  const periodLabel = periodType === "month" ? "Monat" : "Tag";
+  const dayBillingMap = useMemo(() => new Map((data?.dayBillings ?? []).map((billing) => [billing.day, billing.billed_minutes])), [data?.dayBillings]);
+  const savedDayBillingInput = (day: string) => formatHoursInput(dayBillingMap.get(day));
+  const isDayBillingDirty = (day: string) => (dayBillingInputs[day] ?? "") !== savedDayBillingInput(day);
+  const sessionGroups = useMemo(() => {
+    const groups = new Map<string, { key: string; label: string; totalMinutes: number; sessions: SessionEntry[] }>();
+
+    for (const session of data?.sessions ?? []) {
+      const key = sessionDayKey(session.started_at);
+      const group = groups.get(key);
+
+      if (group) {
+        group.sessions.push(session);
+        group.totalMinutes += session.rounded_minutes;
+        continue;
+      }
+
+      groups.set(key, {
+        key,
+        label: formatDate(session.started_at),
+        totalMinutes: session.rounded_minutes,
+        sessions: [session]
+      });
+    }
+
+    return Array.from(groups.values());
+  }, [data?.sessions]);
+  const periodTotalMinutes = sessionGroups.reduce((sum, group) => sum + group.totalMinutes, 0);
+
+  async function setBilling(sessionId: string, billingStatus: BillingStatus) {
+    if (isPeriodClosed && billingStatus !== null) {
+      toast.warning("Monat ist abgeschlossen", {
+        description: "Öffne den Monat zuerst wieder, um Bewertungen zu ändern."
+      });
+      return;
+    }
+
+    setLoadingId(sessionId);
+    try {
+      await updateSessionBilling(sessionId, billingStatus);
+      await load();
+    } catch (error) {
+      toast.error("Status konnte nicht gespeichert werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setLoadingId(null);
+    }
+  }
+
+  async function saveDayBilling(day: string) {
+    if (!ticket) {
+      return;
+    }
+
+    const parsedMinutes = parseHoursInput(dayBillingInputs[day] ?? "");
+
+    if (parsedMinutes === undefined) {
+      toast.error("Teamspace-Zeit prüfen", {
+        description: "Bitte Stunden als positive Zahl eintragen, z.B. 1,5."
+      });
+      return;
+    }
+
+    const currentMinutes = dayBillingMap.get(day) ?? null;
+
+    if (parsedMinutes === currentMinutes) {
+      return;
+    }
+
+    setSavingDayBillingKey(day);
+    try {
+      await updateTicketDayBilling(ticket.id, day, parsedMinutes);
+      toast.success("Zeit gespeichert");
+      await load();
+    } catch (error) {
+      toast.error("Zeit konnte nicht gespeichert werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSavingDayBillingKey(null);
+    }
+  }
+
+  async function saveTicketData(event: FormEvent) {
+    event.preventDefault();
+
+    if (!ticket) {
+      return;
+    }
+
+    if (!editOrganizationId) {
+      toast.error("Organisation wählen");
+      return;
+    }
+
+    setSavingTicket(true);
+    try {
+      await updateTicket(ticket.id, {
+        ticketNumber: editTicketNumber,
+        organizationId: editOrganizationId,
+        workType: editWorkType
+      });
+      toast.success("Ticketdaten gespeichert", {
+        description: "Organisation und Art wurden auf die vorhandenen Sessions übernommen."
+      });
+      await load();
+    } catch (error) {
+      toast.error("Ticketdaten konnten nicht gespeichert werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSavingTicket(false);
+    }
+  }
+
+  async function submitTicketSession(event: FormEvent) {
+    event.preventDefault();
+
+    if (!ticket) {
+      return;
+    }
+
+    const effectiveOrganizationId = ticket.organization_id ?? ticketSession.organizationId;
+    const effectiveWorkType = ticket.work_type ?? ticketSession.workType;
+
+    if (!effectiveOrganizationId) {
+      toast.error("Organisation wählen");
+      return;
+    }
+
+    const startedAt = new Date(`${ticketSession.day}T${ticketSession.startTime}:00`);
+    const endedAt = new Date(`${ticketSession.day}T${ticketSession.endTime}:00`);
+
+    if (Number.isNaN(startedAt.getTime()) || Number.isNaN(endedAt.getTime())) {
+      toast.error("Datum oder Uhrzeit prüfen");
+      return;
+    }
+
+    if (endedAt <= startedAt) {
+      toast.error("Ende muss nach Beginn liegen");
+      return;
+    }
+
+    const durationSeconds = Math.floor((endedAt.getTime() - startedAt.getTime()) / 1000);
+
+    setSavingTicketSession(true);
+
+    try {
+      await createSession({
+        ticketNumber: ticket.ticket_number,
+        organizationId: effectiveOrganizationId,
+        activity: ticketSession.activity,
+        workType: effectiveWorkType,
+        startedAt: startedAt.toISOString(),
+        endedAt: endedAt.toISOString(),
+        durationSeconds
+      });
+      toast.success("Session nachgetragen", {
+        description: "Der Eintrag wurde diesem Ticket zugeordnet. Betroffene Abschlüsse wurden wieder geöffnet."
+      });
+      setTicketSession({
+        ...emptyTicketSessionForm(),
+        organizationId: ticket.organization_id ?? "",
+        organizationName: ticket.organization_name ?? null,
+        workType: ticket.work_type ?? "support",
+        day: ticketSession.day
+      });
+      await load();
+    } catch (error) {
+      toast.error("Session konnte nicht nachgetragen werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSavingTicketSession(false);
+    }
+  }
+
+  function openSessionEditor(session: SessionEntry) {
+    setEditingSession(session);
+    setEditSessionOrganizationId(session.organization_id ?? "");
+    setEditSessionOrganizationName(session.organization_name ?? null);
+    setEditSessionActivity(session.activity);
+    setEditSessionWorkType(session.work_type);
+    setEditSessionDay(toDateLocalValue(session.started_at));
+    setEditSessionStartTime(toTimeLocalValue(session.started_at));
+    setEditSessionEndTime(toTimeLocalValue(session.ended_at));
+  }
+
+  async function saveSessionData(event: FormEvent) {
+    event.preventDefault();
+
+    if (!editingSession) {
+      return;
+    }
+
+    if (!editSessionOrganizationId) {
+      toast.error("Organisation wählen");
+      return;
+    }
+
+    const startedAt = new Date(`${editSessionDay}T${editSessionStartTime}:00`);
+    const endedAt = new Date(`${editSessionDay}T${editSessionEndTime}:00`);
+
+    if (Number.isNaN(startedAt.getTime()) || Number.isNaN(endedAt.getTime())) {
+      toast.error("Beginn und Ende prüfen");
+      return;
+    }
+
+    if (endedAt <= startedAt) {
+      toast.error("Ende muss nach Beginn liegen");
+      return;
+    }
+
+    setSavingSessionDetails(true);
+    try {
+      await updateSessionDetails(editingSession.id, {
+        organizationId: editSessionOrganizationId,
+        activity: editSessionActivity,
+        workType: editSessionWorkType,
+        startedAt: startedAt.toISOString(),
+        endedAt: endedAt.toISOString()
+      });
+      toast.success("Session aktualisiert");
+      setEditingSession(null);
+      await load();
+    } catch (error) {
+      toast.error("Session konnte nicht gespeichert werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSavingSessionDetails(false);
+    }
+  }
+
+  async function removeSession(session: SessionEntry) {
+    const confirmed = window.confirm(`Session vom ${formatDateTime(session.started_at)} wirklich löschen?`);
+
+    if (!confirmed) {
+      return;
+    }
+
+    setDeletingId(session.id);
+    try {
+      const result = await deleteSession(session.id);
+
+      if (result.deleted.ticketDeleted || result.deleted.userTicketEmpty) {
+        toast.success("Letzte Session gelöscht", {
+          description: result.deleted.ticketDeleted ? "Das leere Ticket wurde entfernt." : "Für dich gibt es zu diesem Ticket keine Einträge mehr."
+        });
+        onNavigate("/analysis");
+        return;
+      }
+
+      toast.success("Session gelöscht", {
+        description: "Betroffene Abschlüsse wurden wieder geöffnet."
+      });
+      await load();
+    } catch (error) {
+      toast.error("Session konnte nicht gelöscht werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setDeletingId(null);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <Button variant="ghost" size="sm" className="-ml-2 mb-1 h-8" onClick={() => onNavigate("/analysis")}>
+            <ArrowLeft className="size-4" />
+            Zur Auswertung
+          </Button>
+          <div className="flex flex-wrap items-center gap-2">
+            <h2 className="text-xl font-semibold tracking-normal sm:text-2xl">{ticket?.ticket_number ?? "Ticket"}</h2>
+            {ticket?.ticket_number ? <CopyTicketButton ticketNumber={ticket.ticket_number} /> : null}
+            {periodType === "month" && data?.closed ? <Badge variant="outline">Monat geschlossen</Badge> : null}
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Sessions im {periodLabel.toLowerCase()} {period}
+          </p>
+        </div>
+
+        <Badge variant={data?.openCount === 0 ? "success" : "warning"}>
+          {data?.openCount === 0 ? "Bewertet" : `${data?.openCount ?? 0} offen`}
+        </Badge>
+      </div>
+
+      <Card>
+        <CardHeader className="p-4">
+          <CardTitle>Ticketdaten</CardTitle>
+          <CardDescription>Änderungen an Organisation und Art werden auf alle vorhandenen Sessions dieses Tickets übernommen.</CardDescription>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <form className="grid gap-3 lg:grid-cols-[180px_minmax(220px,1fr)_180px_auto] lg:items-end" onSubmit={saveTicketData}>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="edit-ticket-number">Ticketnummer</label>
+              <Input id="edit-ticket-number" value={editTicketNumber} onChange={(event) => setEditTicketNumber(event.currentTarget.value)} required />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="edit-ticket-organization">Organisation</label>
+              {ticket?.customer_name && !ticket.organization_id ? (
+                <p className="text-xs text-muted-foreground">Bisheriger Freitext: {ticket.customer_name}</p>
+              ) : null}
+              <OrganizationSelect
+                value={editOrganizationId}
+                selectedName={editOrganizationName}
+                onChange={(organization) => {
+                  setEditOrganizationId(organization.id);
+                  setEditOrganizationName(organization.name);
+                }}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="edit-ticket-work-type">Art</label>
+              <select
+                id="edit-ticket-work-type"
+                className="h-8 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                value={editWorkType}
+                onChange={(event) => setEditWorkType(event.currentTarget.value as WorkType)}
+              >
+                <option value="support">Support</option>
+                <option value="consulting">Consulting</option>
+              </select>
+            </div>
+            <Button type="submit" disabled={savingTicket}>
+              <Save className="size-4" />
+              {savingTicket ? "Speichert..." : "Speichern"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
+          <div>
+            <CardTitle>Session-Einträge</CardTitle>
+            <CardDescription>Wähle für jede Session genau eine Bewertung aus oder lösche falsche Einträge.</CardDescription>
+          </div>
+          <div className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-2 text-sm">
+            <span className="text-muted-foreground">{periodLabel} gesamt</span>
+            <span className="font-semibold">{formatMinutes(periodTotalMinutes)}</span>
+          </div>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <div className="space-y-3">
+            {sessionGroups.map((group) => (
+              <div key={group.key} className="rounded-md border bg-background">
+                <div className="flex flex-col gap-2 border-b bg-muted/40 px-3 py-2 sm:flex-row sm:items-center sm:justify-between">
+                  <p className="font-medium">{group.label}</p>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Badge variant="outline">Tag gesamt {formatMinutes(group.totalMinutes)}</Badge>
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <label htmlFor={`crm-billing-${group.key}`}>Teamspace</label>
+                      <Input
+                        id={`crm-billing-${group.key}`}
+                        type="text"
+                        className="h-7 w-24 bg-background text-right"
+                        autoComplete="off"
+                        inputMode="decimal"
+                        value={dayBillingInputs[group.key] ?? ""}
+                        disabled={savingDayBillingKey === group.key}
+                        placeholder="0"
+                        onChange={(event) => {
+                          const nextValue = event.currentTarget.value;
+
+                          if (!isPartialHoursInput(nextValue)) {
+                            return;
+                          }
+
+                          setDayBillingInputs((current) => ({
+                            ...current,
+                            [group.key]: nextValue
+                          }));
+                        }}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter") {
+                            event.preventDefault();
+                          }
+                        }}
+                      />
+                      <span>h</span>
+                      <Button
+                        type="button"
+                        size="sm"
+                        className={cn("h-7 w-[104px]", !isDayBillingDirty(group.key) && "invisible")}
+                        disabled={!isDayBillingDirty(group.key) || savingDayBillingKey === group.key}
+                        onMouseDown={(event) => event.preventDefault()}
+                        onClick={() => void saveDayBilling(group.key)}
+                      >
+                        <Save className="size-3.5" />
+                        {savingDayBillingKey === group.key ? "Speichert..." : "Speichern"}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+                <div className="space-y-1.5 p-2 sm:p-3">
+                  {group.sessions.map((session) => (
+                    <div key={session.id} className="ml-3 rounded-md border bg-card/40 p-2 sm:ml-6">
+                      <div className="grid gap-2 lg:grid-cols-[140px_minmax(0,1fr)_90px_auto_auto] lg:items-center">
+                        <div className="text-sm text-muted-foreground">
+                          {formatTimeRange(session.started_at, session.ended_at)}
+                        </div>
+                        <div className="min-w-0">
+                          <p className="whitespace-pre-wrap break-words text-sm font-medium">{session.activity}</p>
+                        </div>
+                        <div className="flex flex-wrap gap-1">
+                          <Badge variant="outline" className="w-fit">{formatMinutes(session.rounded_minutes)}</Badge>
+                          {session.recurring_billing_id ? <Badge variant="secondary">fix</Badge> : null}
+                        </div>
+                        <BillingButtons
+                          session={session}
+                          disabled={isPeriodClosed}
+                          loading={loadingId === session.id}
+                          onChange={(value) => setBilling(session.id, value)}
+                        />
+                        <div className="flex gap-1 lg:justify-end">
+                          <Button size="icon" variant="ghost" className="size-8" onClick={() => openSessionEditor(session)}>
+                            <Pencil className="size-4" />
+                            <span className="sr-only">Session bearbeiten</span>
+                          </Button>
+                          <Button
+                            size="icon"
+                            variant="ghost"
+                            className="size-8 text-destructive hover:text-destructive"
+                            disabled={deletingId === session.id}
+                            onClick={() => removeSession(session)}
+                          >
+                            <Trash2 className="size-4" />
+                            <span className="sr-only">Session löschen</span>
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {data?.sessions.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">Keine Sessions für dieses Ticket im gewählten Zeitraum.</p>
+          ) : null}
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="p-4">
+          <CardTitle>Session nachtragen</CardTitle>
+          <CardDescription>Neue Zeit direkt diesem Ticket zuordnen.</CardDescription>
+        </CardHeader>
+        <CardContent className="px-4 pb-4">
+          <form className="space-y-4" onSubmit={submitTicketSession}>
+            {ticket?.organization_id && ticket.work_type ? (
+              <div className="grid gap-2 rounded-md border bg-muted/30 p-3 text-sm sm:grid-cols-[1fr_auto] sm:items-center">
+                <span className="font-medium">{ticket.organization_name ?? ticket.customer_name}</span>
+                <Badge variant="outline">{ticket.work_type === "support" ? "Support" : "Consulting"}</Badge>
+              </div>
+            ) : (
+              <div className="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_180px]">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Organisation</label>
+                  {ticket?.customer_name && !ticket.organization_id ? (
+                    <p className="text-xs text-muted-foreground">Bisheriger Freitext: {ticket.customer_name}</p>
+                  ) : null}
+                  <OrganizationSelect
+                    value={ticketSession.organizationId}
+                    selectedName={ticketSession.organizationName}
+                    onChange={(organization) =>
+                      setTicketSession({
+                        ...ticketSession,
+                        organizationId: organization.id,
+                        organizationName: organization.name
+                      })
+                    }
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="ticket-session-work-type">
+                    Art
+                  </label>
+                  <select
+                    id="ticket-session-work-type"
+                    className="h-8 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                    value={ticketSession.workType}
+                    onChange={(event) => setTicketSession({ ...ticketSession, workType: event.currentTarget.value as WorkType })}
+                  >
+                    <option value="support">Support</option>
+                    <option value="consulting">Consulting</option>
+                  </select>
+                </div>
+              </div>
+            )}
+
+            <div className="grid gap-3 lg:grid-cols-[150px_120px_120px_minmax(220px,1fr)_auto] lg:items-end">
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="ticket-session-day">
+                  Datum
+                </label>
+                <Input
+                  id="ticket-session-day"
+                  type="date"
+                  value={ticketSession.day}
+                  onChange={(event) => setTicketSession({ ...ticketSession, day: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="ticket-session-start">
+                  Von
+                </label>
+                <Input
+                  id="ticket-session-start"
+                  type="time"
+                  value={ticketSession.startTime}
+                  onChange={(event) => setTicketSession({ ...ticketSession, startTime: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="ticket-session-end">
+                  Bis
+                </label>
+                <Input
+                  id="ticket-session-end"
+                  type="time"
+                  value={ticketSession.endTime}
+                  onChange={(event) => setTicketSession({ ...ticketSession, endTime: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="ticket-session-activity">
+                  Tätigkeit
+                </label>
+                <Textarea
+                  id="ticket-session-activity"
+                  className="min-h-20"
+                  value={ticketSession.activity}
+                  onChange={(event) => setTicketSession({ ...ticketSession, activity: event.currentTarget.value })}
+                  required
+                />
+              </div>
+              <Button type="submit" disabled={savingTicketSession}>
+                <Save className="size-4" />
+                {savingTicketSession ? "Speichert..." : "Nachtragen"}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      
+      {data && data.openCount > 0 ? (
+        <p className="text-sm text-muted-foreground">
+          Noch {data.openCount} Session(s) ohne Auswahl. Erst wenn im Monat keine Sessions mehr offen sind, kann der Monat abgeschlossen werden.
+        </p>
+      ) : null}
+
+      <Dialog open={Boolean(editingSession)} onOpenChange={(open) => !open && setEditingSession(null)}>
+        <DialogContent className="max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] overflow-y-auto p-5 sm:max-w-2xl">
+          <DialogHeader className="pr-8">
+            <DialogTitle>Session bearbeiten</DialogTitle>
+            <DialogDescription>Beginn, Ende, Tätigkeit und Stammdaten dieses Eintrags nachträglich korrigieren.</DialogDescription>
+          </DialogHeader>
+          <form className="space-y-4 overflow-x-hidden" onSubmit={saveSessionData}>
+            <div className="grid gap-3 sm:grid-cols-3">
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="session-day">Datum</label>
+                <Input
+                  id="session-day"
+                  type="date"
+                  value={editSessionDay}
+                  onChange={(event) => setEditSessionDay(event.currentTarget.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="session-start-time">Von</label>
+                <Input
+                  id="session-start-time"
+                  type="time"
+                  value={editSessionStartTime}
+                  onChange={(event) => setEditSessionStartTime(event.currentTarget.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="session-end-time">Bis</label>
+                <Input
+                  id="session-end-time"
+                  type="time"
+                  value={editSessionEndTime}
+                  onChange={(event) => setEditSessionEndTime(event.currentTarget.value)}
+                  required
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="session-organization">Organisation</label>
+              {editingSession?.customer_name && !editingSession.organization_id ? (
+                <p className="text-xs text-muted-foreground">Bisheriger Freitext: {editingSession.customer_name}</p>
+              ) : null}
+              <OrganizationSelect
+                value={editSessionOrganizationId}
+                selectedName={editSessionOrganizationName}
+                onChange={(organization) => {
+                  setEditSessionOrganizationId(organization.id);
+                  setEditSessionOrganizationName(organization.name);
+                }}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="session-activity">Tätigkeit</label>
+              <Textarea
+                id="session-activity"
+                className="min-h-24 resize-y"
+                value={editSessionActivity}
+                onChange={(event) => setEditSessionActivity(event.currentTarget.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="session-work-type">Art</label>
+              <select
+                id="session-work-type"
+                className="h-8 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                value={editSessionWorkType}
+                disabled={Boolean(editingSession?.recurring_billing_id)}
+                onChange={(event) => setEditSessionWorkType(event.currentTarget.value as WorkType)}
+              >
+                <option value="support">Support</option>
+                <option value="consulting">Consulting</option>
+              </select>
+            </div>
+            <div className="flex justify-end">
+              <Button type="submit" disabled={savingSessionDetails}>
+                <Save className="size-4" />
+                {savingSessionDetails ? "Speichert..." : "Session speichern"}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

frontend/src/views/TimerPage.tsx

@@ -0,0 +1,541 @@
+import { FormEvent, useMemo, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { Pause, Play, Plus, RotateCcw, Square, Upload } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { OrganizationSelect } from "@/components/OrganizationSelect";
+import { createSession, lookupTicket } from "../api";
+import { formatTimer } from "../format";
+import { activeElapsedMs, pauseEntry, resumeEntry, ticketPattern, type TimerEntry } from "../timers";
+import type { TicketMeta, WorkType } from "../types";
+
+type ManualSessionFormState = {
+  ticketNumber: string;
+  organizationId: string;
+  organizationName: string | null;
+  activity: string;
+  workType: WorkType;
+  day: string;
+  startTime: string;
+  endTime: string;
+};
+
+function currentDay() {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+}
+
+function emptyManualSession(): ManualSessionFormState {
+  return {
+    ticketNumber: "",
+    organizationId: "",
+    organizationName: null,
+    activity: "",
+    workType: "support",
+    day: currentDay(),
+    startTime: "09:00",
+    endTime: "09:30"
+  };
+}
+
+type FinishedSession = {
+  timerId: string;
+  ticketNumber: string;
+  ticket: TicketMeta | null;
+  startedAt: string;
+  endedAt: string;
+  durationSeconds: number;
+  roundedMinutes: number;
+};
+
+type TimerPageProps = {
+  timers: TimerEntry[];
+  setTimers: Dispatch<SetStateAction<TimerEntry[]>>;
+  selectedTimerId: string | null;
+  setSelectedTimerId: Dispatch<SetStateAction<string | null>>;
+  tick: number;
+};
+
+export function TimerPage({ timers, setTimers, selectedTimerId, setSelectedTimerId, tick }: TimerPageProps) {
+  const [ticketNumber, setTicketNumber] = useState("");
+  const [finished, setFinished] = useState<FinishedSession | null>(null);
+  const [finishingId, setFinishingId] = useState<string | null>(null);
+  const [organizationId, setOrganizationId] = useState("");
+  const [organizationName, setOrganizationName] = useState<string | null>(null);
+  const [activity, setActivity] = useState("");
+  const [workType, setWorkType] = useState<WorkType>("support");
+  const [saving, setSaving] = useState(false);
+  const [manualSession, setManualSession] = useState<ManualSessionFormState>(() => emptyManualSession());
+  const [savingManualSession, setSavingManualSession] = useState(false);
+
+  const selectedTimer = timers.find((timer) => timer.id === selectedTimerId) ?? timers[0] ?? null;
+  const elapsedSeconds = useMemo(() => Math.floor(activeElapsedMs(selectedTimer, tick) / 1000), [selectedTimer, tick]);
+  const isValidTicket = ticketPattern.test(ticketNumber);
+  const runningTimer = timers.find((timer) => timer.phase === "running") ?? null;
+
+  async function addTimer() {
+    if (!isValidTicket) {
+      toast.error("Ticketnummer prüfen", {
+        description: "Das Format muss Ticket#XXXXXX sein."
+      });
+      return;
+    }
+
+    if (timers.some((timer) => timer.ticketNumber === ticketNumber)) {
+      toast.error("Timer existiert bereits", {
+        description: "Für dieses Ticket läuft oder pausiert schon ein Timer."
+      });
+      return;
+    }
+
+    const now = Date.now();
+    const ticketResult = await lookupTicket(ticketNumber).catch(() => ({ ticket: null }));
+    const newTimer: TimerEntry = {
+      id: crypto.randomUUID(),
+      ticketNumber,
+      organizationName: ticketResult.ticket?.organization_name ?? ticketResult.ticket?.customer_name ?? null,
+      workType: ticketResult.ticket?.work_type ?? null,
+      ticketLookupDone: true,
+      startedAt: now,
+      pausedTotalMs: 0,
+      pausedAt: null,
+      phase: "running"
+    };
+
+    setTimers((current) => [...current.map((timer) => pauseEntry(timer, now)), newTimer]);
+    setSelectedTimerId(newTimer.id);
+    setTicketNumber("");
+  }
+
+  function activateTimer(timerId: string) {
+    const now = Date.now();
+    setTimers((current) =>
+      current.map((timer) => {
+        if (timer.id === timerId) {
+          return resumeEntry(timer, now);
+        }
+
+        return pauseEntry(timer, now);
+      })
+    );
+    setSelectedTimerId(timerId);
+  }
+
+  function pauseTimer(timerId: string) {
+    const now = Date.now();
+    setTimers((current) => current.map((timer) => (timer.id === timerId ? pauseEntry(timer, now) : timer)));
+    setSelectedTimerId(timerId);
+  }
+
+  function resetTimer(timerId: string) {
+    setTimers((current) => current.filter((timer) => timer.id !== timerId));
+  }
+
+  async function finishTimer(timerId: string) {
+    const timer = timers.find((entry) => entry.id === timerId);
+
+    if (!timer) {
+      return;
+    }
+
+    const now = Date.now();
+    const stoppedTimer = pauseEntry(timer, now);
+    const durationSeconds = Math.floor(activeElapsedMs(stoppedTimer, now) / 1000);
+    const roundedMinutes = Math.max(1, Math.round(durationSeconds / 60));
+
+    setTimers((current) => current.map((entry) => (entry.id === timerId ? pauseEntry(entry, now) : entry)));
+    setSelectedTimerId(timer.id);
+    setFinishingId(timer.id);
+
+    try {
+      const result = await lookupTicket(timer.ticketNumber);
+      const ticket = result.ticket;
+
+      setOrganizationId(ticket?.organization_id ?? "");
+      setOrganizationName(ticket?.organization_name ?? null);
+      setWorkType(ticket?.work_type ?? "support");
+      setActivity("");
+      setFinished({
+        timerId: timer.id,
+        ticketNumber: timer.ticketNumber,
+        ticket,
+        startedAt: new Date(stoppedTimer.startedAt).toISOString(),
+        endedAt: new Date(now).toISOString(),
+        durationSeconds,
+        roundedMinutes
+      });
+    } catch (error) {
+      toast.error("Ticket konnte nicht geprüft werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setFinishingId(null);
+    }
+  }
+
+  async function submitSession(event: FormEvent) {
+    event.preventDefault();
+
+    if (!finished) {
+      return;
+    }
+
+    const existingTicketHasDefaults = Boolean(finished.ticket?.organization_id && finished.ticket?.work_type);
+    const effectiveOrganizationId = existingTicketHasDefaults ? finished.ticket!.organization_id! : organizationId;
+    const effectiveWorkType = existingTicketHasDefaults ? finished.ticket!.work_type! : workType;
+
+    if (!effectiveOrganizationId) {
+      toast.error("Organisation wählen", {
+        description: "Neue Sessions können nur mit einer synchronisierten Organisation gespeichert werden."
+      });
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      await createSession({
+        ticketNumber: finished.ticketNumber,
+        startedAt: finished.startedAt,
+        endedAt: finished.endedAt,
+        durationSeconds: finished.durationSeconds,
+        organizationId: effectiveOrganizationId,
+        activity,
+        workType: effectiveWorkType
+      });
+
+      toast.success("Session gespeichert", {
+        description: `${finished.ticketNumber} wurde mit ${finished.roundedMinutes} Minute(n) erfasst.`
+      });
+      setTimers((current) => current.filter((timer) => timer.id !== finished.timerId));
+      setFinished(null);
+      setOrganizationId("");
+      setOrganizationName(null);
+      setActivity("");
+      setWorkType("support");
+    } catch (error) {
+      toast.error("Speichern fehlgeschlagen", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function submitManualSession(event: FormEvent) {
+    event.preventDefault();
+
+    if (!ticketPattern.test(manualSession.ticketNumber)) {
+      toast.error("Ticketnummer prüfen", {
+        description: "Das Format muss Ticket#XXXXXX sein."
+      });
+      return;
+    }
+
+    if (!manualSession.organizationId) {
+      toast.error("Organisation wählen");
+      return;
+    }
+
+    const startedAt = new Date(`${manualSession.day}T${manualSession.startTime}:00`);
+    const endedAt = new Date(`${manualSession.day}T${manualSession.endTime}:00`);
+
+    if (Number.isNaN(startedAt.getTime()) || Number.isNaN(endedAt.getTime())) {
+      toast.error("Datum oder Uhrzeit prüfen");
+      return;
+    }
+
+    if (endedAt <= startedAt) {
+      toast.error("Ende muss nach Beginn liegen");
+      return;
+    }
+
+    const durationSeconds = Math.floor((endedAt.getTime() - startedAt.getTime()) / 1000);
+
+    setSavingManualSession(true);
+
+    try {
+      await createSession({
+        ticketNumber: manualSession.ticketNumber,
+        organizationId: manualSession.organizationId,
+        activity: manualSession.activity,
+        workType: manualSession.workType,
+        startedAt: startedAt.toISOString(),
+        endedAt: endedAt.toISOString(),
+        durationSeconds
+      });
+      toast.success("Session nachgetragen", {
+        description: "Der Eintrag ist in deiner Auswertung offen."
+      });
+      setManualSession({
+        ...emptyManualSession(),
+        day: manualSession.day
+      });
+    } catch (error) {
+      toast.error("Session konnte nicht nachgetragen werden", {
+        description: error instanceof Error ? error.message : "Unbekannter Fehler"
+      });
+    } finally {
+      setSavingManualSession(false);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <section className="space-y-4">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h2 className="text-xl font-semibold tracking-normal sm:text-2xl">Timer</h2>
+            <p className="text-sm text-muted-foreground">Mehrere Tickets vorbereiten, aber immer nur eine Session aktiv messen.</p>
+          </div>
+          {runningTimer ? <Badge variant="success">Aktiv: {runningTimer.ticketNumber}</Badge> : null}
+          {!runningTimer && timers.length > 0 ? <Badge variant="warning">Alle pausiert</Badge> : null}
+          {timers.length === 0 ? <Badge variant="info">Kein Timer aktiv</Badge> : null}
+        </div>
+
+        <Card className="overflow-hidden">
+          <CardHeader className="border-b bg-muted/30 p-4">
+            <CardTitle>Neuen Timer starten</CardTitle>
+            <CardDescription>Ein neuer Timer startet sofort und pausiert alle anderen Timer automatisch.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-3 p-4 sm:grid-cols-[minmax(220px,320px)_auto] sm:items-end">
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="ticket-number">
+                Ticketnummer
+              </label>
+              <Input
+                id="ticket-number"
+                placeholder="Ticket#123456"
+                value={ticketNumber}
+                onChange={(event) => setTicketNumber(event.currentTarget.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    void addTimer();
+                  }
+                }}
+              />
+              {ticketNumber.length > 0 && !isValidTicket ? <p className="text-xs text-destructive">Format: Ticket#XXXXXX</p> : null}
+            </div>
+            <Button onClick={() => void addTimer()}>
+              <Plus className="size-4" />
+              Timer starten
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card className="overflow-hidden">
+          <CardHeader className="border-b bg-muted/30 p-4">
+            <CardTitle>{selectedTimer ? selectedTimer.ticketNumber : "Keine Session ausgewählt"}</CardTitle>
+            <CardDescription>
+              {selectedTimer
+                ? selectedTimer.organizationName
+                  ? `${selectedTimer.organizationName}${selectedTimer.workType ? ` · ${selectedTimer.workType === "support" ? "Support" : "Consulting"}` : ""}`
+                  : "Beim Umschalten wird dieser Timer aktiviert und alle anderen werden pausiert."
+                : "Starte einen Timer, um eine Session zu erfassen."}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4 p-4">
+            <div className="rounded-lg border bg-background p-4 sm:p-5">
+              <p className="mb-2 text-sm font-medium text-muted-foreground">Gemessene Arbeitszeit</p>
+              <p className="font-mono text-4xl font-bold leading-none tracking-normal sm:text-6xl">
+                {formatTimer(elapsedSeconds)}
+              </p>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
+              {selectedTimer?.phase === "running" ? (
+                <Button variant="secondary" disabled={!selectedTimer} onClick={() => selectedTimer && pauseTimer(selectedTimer.id)}>
+                  <Pause className="size-4" />
+                  Pausieren
+                </Button>
+              ) : (
+                <Button disabled={!selectedTimer} onClick={() => selectedTimer && activateTimer(selectedTimer.id)}>
+                  <Play className="size-4" />
+                  Aktivieren
+                </Button>
+              )}
+
+              <Button variant="destructive" disabled={!selectedTimer || finishingId === selectedTimer?.id} onClick={() => selectedTimer && void finishTimer(selectedTimer.id)}>
+                <Square className="size-4" />
+                {finishingId === selectedTimer?.id ? "Prüft..." : "Beenden"}
+              </Button>
+              <Button variant="ghost" disabled={!selectedTimer} onClick={() => selectedTimer && resetTimer(selectedTimer.id)}>
+                <RotateCcw className="size-4" />
+                Entfernen
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="overflow-hidden">
+          <CardHeader className="border-b bg-muted/30 p-4">
+            <CardTitle>Session nachtragen</CardTitle>
+            <CardDescription>Vergessene Zeiten für deinen eigenen Account manuell erfassen.</CardDescription>
+          </CardHeader>
+          <CardContent className="p-4">
+            <form className="space-y-4" onSubmit={submitManualSession}>
+              <div className="grid gap-3 lg:grid-cols-[160px_minmax(180px,1fr)_150px]">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="manual-ticket-number">Ticket</label>
+                  <Input
+                    id="manual-ticket-number"
+                    placeholder="Ticket#123456"
+                    value={manualSession.ticketNumber}
+                    onChange={(event) => setManualSession({ ...manualSession, ticketNumber: event.currentTarget.value })}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Organisation</label>
+                  <OrganizationSelect
+                    value={manualSession.organizationId}
+                    selectedName={manualSession.organizationName}
+                    onChange={(organization) =>
+                      setManualSession({
+                        ...manualSession,
+                        organizationId: organization.id,
+                        organizationName: organization.name
+                      })
+                    }
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="manual-work-type">Art</label>
+                  <select
+                    id="manual-work-type"
+                    className="h-9 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                    value={manualSession.workType}
+                    onChange={(event) => setManualSession({ ...manualSession, workType: event.currentTarget.value as WorkType })}
+                  >
+                    <option value="support">Support</option>
+                    <option value="consulting">Consulting</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid gap-3 lg:grid-cols-[160px_120px_120px_minmax(220px,1fr)_auto] lg:items-end">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="manual-day">Datum</label>
+                  <Input
+                    id="manual-day"
+                    type="date"
+                    value={manualSession.day}
+                    onChange={(event) => setManualSession({ ...manualSession, day: event.currentTarget.value })}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="manual-start">Von</label>
+                  <Input
+                    id="manual-start"
+                    type="time"
+                    value={manualSession.startTime}
+                    onChange={(event) => setManualSession({ ...manualSession, startTime: event.currentTarget.value })}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="manual-end">Bis</label>
+                  <Input
+                    id="manual-end"
+                    type="time"
+                    value={manualSession.endTime}
+                    onChange={(event) => setManualSession({ ...manualSession, endTime: event.currentTarget.value })}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium" htmlFor="manual-activity">Tätigkeit</label>
+                  <Textarea
+                    id="manual-activity"
+                    className="min-h-20"
+                    value={manualSession.activity}
+                    onChange={(event) => setManualSession({ ...manualSession, activity: event.currentTarget.value })}
+                    required
+                  />
+                </div>
+                <Button type="submit" disabled={savingManualSession}>
+                  <Upload className="size-4" />
+                  {savingManualSession ? "Speichert..." : "Nachtragen"}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+
+      </section>
+
+      <Dialog open={Boolean(finished)} onOpenChange={(open) => !open && setFinished(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Session abschließen</DialogTitle>
+            <DialogDescription>
+              {finished?.ticketNumber}: {finished?.roundedMinutes} Minute(n), Pausen bereits abgezogen.
+            </DialogDescription>
+          </DialogHeader>
+
+          <form className="space-y-4" onSubmit={submitSession}>
+            {finished?.ticket?.organization_id && finished.ticket.work_type ? (
+              <div className="rounded-lg border bg-muted/40 p-3 text-sm">
+                <p className="font-medium">{finished.ticket.organization_name ?? finished.ticket.customer_name}</p>
+                <p className="text-muted-foreground">{finished.ticket.work_type === "support" ? "Support" : "Consulting"} wurde vom bestehenden Ticket übernommen.</p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="organization">
+                  Organisation
+                </label>
+                {finished?.ticket?.customer_name && !finished.ticket.organization_id ? (
+                  <p className="text-xs text-muted-foreground">Bisheriger Freitext: {finished.ticket.customer_name}</p>
+                ) : null}
+                <OrganizationSelect
+                  value={organizationId}
+                  selectedName={organizationName}
+                  onChange={(organization) => {
+                    setOrganizationId(organization.id);
+                    setOrganizationName(organization.name);
+                  }}
+                  required
+                />
+              </div>
+            )}
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="activity">
+                Tätigkeit
+              </label>
+              <Textarea id="activity" value={activity} onChange={(event) => setActivity(event.currentTarget.value)} required />
+            </div>
+            {finished?.ticket?.organization_id && finished.ticket.work_type ? null : (
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="work-type">
+                  Art
+                </label>
+                <select
+                  id="work-type"
+                  className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  value={workType}
+                  onChange={(event) => setWorkType(event.currentTarget.value as WorkType)}
+                >
+                  <option value="support">Support</option>
+                  <option value="consulting">Consulting</option>
+                </select>
+              </div>
+            )}
+            <div className="flex justify-end">
+              <Button type="submit" disabled={saving}>
+                <Upload className="size-4" />
+                {saving ? "Speichern..." : "Eintrag speichern"}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}