Add order management UI

Rebuild the landing page as an order overview for the Speisekarte24 tool:

- Two tabs: all orders and "Nicht übermittelt", the latter fed by the
  15-minute rule and highlighted while it holds entries
- Table, list and grid views behind an icon dropdown, plus search,
  filters, sorting and pagination
- Escalation timeline (three transmissions, tag, voice message, direct
  call, SOS) rendered in the detail dialog, inline in the list view and
  condensed to the current step in the table
- Action definitions live in one module and feed the row menu, the
  detail dialog and the card quick-action bar

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "rose-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3000
+    }
+  ]
+}

components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package.json

@@ -9,9 +9,18 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.28.0",
     "next": "16.3.0",
+    "next-themes": "^0.4.6",
     "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "react-dom": "19.2.8",
+    "shadcn": "^4.16.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/app/globals.css

@@ -1,26 +1,130 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --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);
+  --radius: 0.625rem;
+  --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);
+}
+
+.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 {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

src/app/layout.tsx

@@ -1,5 +1,9 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
 import "./globals.css";
 
 const geistSans = Geist({
@@ -13,17 +17,21 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Bestellübersicht – Speisekarte24",
+  description: "Bestellungen annehmen, übermitteln und bearbeiten.",
 };
 
 export default function RootLayout({ children }: LayoutProps<"/">) {
   return (
     <html
-      lang="en"
+      lang="de"
       className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col bg-background text-foreground">
+        <TooltipProvider delay={300}>{children}</TooltipProvider>
+        {/* App läuft bewusst nur im Light Mode – Systemtheme nicht übernehmen. */}
+        <Toaster theme="light" />
+      </body>
     </html>
   );
 }

src/app/page.tsx

@@ -1,69 +1,28 @@
-import Image from "next/image";
+import { OrdersView } from "@/components/orders/orders-view";
+import { createOrders } from "@/lib/data";
+
+/** Die Demo-Daten liegen relativ zur aktuellen Uhrzeit, deshalb kein statisches Prerendering. */
+export const dynamic = "force-dynamic";
+
+/** Server-seitiger "Datenabruf": liefert Bestellungen samt der Zeit, auf die sie sich beziehen. */
+async function loadOrders() {
+  const now = Date.now();
+  return { now, orders: createOrders(now) };
+}
+
+export default async function Home() {
+  const { now, orders } = await loadOrders();
 
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert h-5 w-[100px]"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the{" "}
-            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
-              page.tsx
-            </code>{" "}
-            file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert h-[14px] w-4"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={14}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <main className="mx-auto w-full max-w-[1600px] flex-1 px-6 py-8">
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold tracking-tight">Bestellübersicht</h1>
+        <p className="text-sm text-muted-foreground">
+          Alle eingehenden Bestellungen annehmen, übermitteln und bearbeiten.
+        </p>
+      </header>
+
+      <OrdersView initialOrders={orders} renderedAt={now} />
+    </main>
   );
 }

src/components/orders/actions.ts

@@ -0,0 +1,180 @@
+import {
+  Ban,
+  ExternalLink,
+  MessageCircle,
+  PhoneCall,
+  PhoneForwarded,
+  ShieldAlert,
+  Smartphone,
+  Voicemail,
+  XCircle,
+  type LucideIcon,
+} from "lucide-react";
+
+import { telHref, whatsAppHref } from "@/lib/format";
+import type { Order, OrderAction, OrderStatus } from "@/lib/types";
+
+export type { OrderAction };
+
+/** Status, den eine Aktion auf der Bestellung setzt. Aktionen ohne Eintrag ändern nichts. */
+export const ACTION_STATUS: Partial<Record<OrderAction, OrderStatus>> = {
+  uebermittelt: "uebermittelt",
+  nicht_uebermittelt: "nicht_uebermittelt",
+  rueckruf: "rueckruf",
+  storno: "storniert",
+  fake: "fake",
+  stornieren: "storniert",
+  sos: "storniert",
+  telefonisch_uebermittelt: "telefonisch",
+};
+
+/** Aktionen, nach denen der Gastronom als bestätigt gilt. */
+export const CONFIRMING_ACTIONS: OrderAction[] = ["uebermittelt", "telefonisch_uebermittelt"];
+
+export const ACTION_TOAST: Partial<Record<OrderAction, string>> = {
+  uebermittelt: "Als übermittelt markiert",
+  gastronom_voice: "Voice-Message an Gastronom gesendet",
+  nicht_uebermittelt: "Als nicht übermittelt markiert – Kunde und Gastronom informiert",
+  rueckruf: "Rückrufhinweis an Kunden gesendet",
+  storno: "Bestellung storniert – Kunde per E-Mail informiert",
+  stornieren: "Bestellung storniert",
+  fake: "Als Fake markiert",
+  gastronom_anruf: "Direktanruf beim Gastronom vermerkt",
+  sos: "SOS ausgelöst – Bestellung storniert, Gastronom für heute geschlossen",
+  telefonisch_uebermittelt: "Als telefonisch übermittelt markiert",
+};
+
+export type ActionDef = {
+  key: string;
+  label: string;
+  /** Kurzform für die Schnellleiste auf der Karte. */
+  short: string;
+  icon: LucideIcon;
+  /** Gesetzt bei Links (Telefon, WhatsApp, ORDER WebApp). */
+  href?: string;
+  external?: boolean;
+  /** Reiner Telefonanschluss – steckt bereits im Anruf-Dialog. */
+  phone?: boolean;
+  /** Gesetzt bei Aktionen, die den Bestellstatus ändern oder eine Nachricht auslösen. */
+  action?: OrderAction;
+  destructive?: boolean;
+};
+
+/** Kontaktwege zum Gastronomen – Buttons 1–6 der alten Oberfläche. */
+export function gastronomActions({ restaurant }: Order): ActionDef[] {
+  const defs: ActionDef[] = [
+    {
+      key: "phone1",
+      label: `Telefon 1 · ${restaurant.phone1}`,
+      short: "Telefon 1",
+      phone: true,
+      icon: PhoneCall,
+      href: telHref(restaurant.phone1),
+      action: "gastronom_anruf",
+    },
+  ];
+
+  if (restaurant.phone2) {
+    defs.push({
+      key: "phone2",
+      label: `Telefon 2 · ${restaurant.phone2}`,
+      short: "Telefon 2",
+      phone: true,
+      icon: PhoneCall,
+      href: telHref(restaurant.phone2),
+    });
+  }
+  if (restaurant.mobile) {
+    defs.push({
+      key: "mobile",
+      label: `Mobil · ${restaurant.mobile}`,
+      short: "Mobil",
+      phone: true,
+      icon: Smartphone,
+      href: telHref(restaurant.mobile),
+    });
+  }
+
+  defs.push({
+    key: "voice",
+    label: "Voice-Message senden",
+      short: "Voice",
+    icon: Voicemail,
+    action: "gastronom_voice",
+  });
+
+  if (restaurant.mobile) {
+    defs.push({
+      key: "whatsapp",
+      label: "WhatsApp-Message senden",
+      short: "WhatsApp",
+      icon: MessageCircle,
+      href: whatsAppHref(restaurant.mobile),
+      external: true,
+    });
+  }
+
+  defs.push({
+    key: "order",
+    label: "ORDER WebApp öffnen",
+      short: "ORDER",
+    icon: ExternalLink,
+    href: restaurant.orderUrl,
+    external: true,
+  });
+
+  return defs;
+}
+
+/** Bearbeitungsschritte zur Bestellung – Buttons 7–13 der alten Oberfläche. */
+export function bearbeitungActions({ customer }: Order): ActionDef[] {
+  return [
+    {
+      key: "call_customer",
+      label: `Kunde anrufen · ${customer.phone}`,
+      short: "Kunde anrufen",
+      phone: true,
+      icon: PhoneCall,
+      href: telHref(customer.phone),
+      action: "kunde_anrufen",
+    },
+    {
+      key: "phone_transfer",
+      label: "Telefonisch übermittelt",
+      short: "Telefonisch",
+      icon: PhoneForwarded,
+      action: "telefonisch_uebermittelt",
+    },
+    {
+      key: "not_transferred",
+      label: "Nicht übermittelt",
+      short: "Nicht übermittelt",
+      icon: Ban,
+      action: "nicht_uebermittelt",
+    },
+    {
+      key: "callback",
+      label: "Rückrufhinweis senden",
+      short: "Rückruf",
+      icon: PhoneForwarded,
+      action: "rueckruf",
+    },
+    { key: "fake", label: "Als Fake markieren", short: "Fake", icon: ShieldAlert, action: "fake" },
+    {
+      key: "storno",
+      label: "Storno (Kunde per E-Mail)",
+      short: "Storno",
+      icon: XCircle,
+      action: "storno",
+      destructive: true,
+    },
+    {
+      key: "cancel",
+      label: "Stornieren (ohne E-Mail)",
+      short: "Stornieren",
+      icon: Ban,
+      action: "stornieren",
+      destructive: true,
+    },
+  ];
+}

src/components/orders/order-actions.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import * as React from "react";
+import {
+  Check,
+  ExternalLink,
+  MoreHorizontal,
+  PhoneCall,
+  Smartphone,
+  type LucideIcon,
+} from "lucide-react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ButtonGroup } from "@/components/ui/button-group";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { telHref } from "@/lib/format";
+import type { Order } from "@/lib/types";
+
+import {
+  bearbeitungActions,
+  gastronomActions,
+  type ActionDef,
+  type OrderAction,
+} from "./actions";
+
+type Props = {
+  order: Order;
+  onAction: (order: Order, action: OrderAction) => void;
+};
+
+/** Schnellzugriffe in der Tabellenzeile; alles Weitere steckt im Menü und im Detail-Dialog. */
+export function OrderActions({ order, onAction }: Props) {
+  const [confirmOpen, setConfirmOpen] = React.useState(false);
+  const [callOpen, setCallOpen] = React.useState(false);
+
+  return (
+    <>
+      <ButtonGroup>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-8"
+          aria-label="Anrufen"
+          title="Anrufen"
+          onClick={() => setCallOpen(true)}
+        >
+          <PhoneCall />
+        </Button>
+
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-8"
+          aria-label="Als übermittelt markieren"
+          title="Als übermittelt markieren"
+          onClick={() => setConfirmOpen(true)}
+        >
+          <Check />
+        </Button>
+
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-8"
+          nativeButton={false}
+          render={
+            <a
+              href={order.externalUrl}
+              target="_blank"
+              rel="noreferrer"
+              aria-label="Bestellung extern öffnen"
+              title="Bestellung extern öffnen"
+            />
+          }
+        >
+          <ExternalLink />
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8"
+                aria-label="Weitere Aktionen"
+              />
+            }
+          >
+            <MoreHorizontal />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-72">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Gastronom kontaktieren</DropdownMenuLabel>
+              {gastronomActions(order).map((def) => (
+                <MenuAction key={def.key} def={def} order={order} onAction={onAction} />
+              ))}
+            </DropdownMenuGroup>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Bestellung bearbeiten</DropdownMenuLabel>
+              {bearbeitungActions(order).map((def) => (
+                <MenuAction key={def.key} def={def} order={order} onAction={onAction} />
+              ))}
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ButtonGroup>
+
+      <Dialog open={callOpen} onOpenChange={setCallOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Anrufen</DialogTitle>
+            <DialogDescription>
+              Bestellung #{order.number} · {order.restaurant.name}
+            </DialogDescription>
+          </DialogHeader>
+
+          <CallGroup title="Gastronom">
+            <CallLink
+              label="Telefon 1"
+              phone={order.restaurant.phone1}
+              onClick={() => onAction(order, "gastronom_anruf")}
+            />
+            {order.restaurant.phone2 && (
+              <CallLink label="Telefon 2" phone={order.restaurant.phone2} />
+            )}
+            {order.restaurant.mobile && (
+              <CallLink label="Mobil" phone={order.restaurant.mobile} icon={Smartphone} />
+            )}
+          </CallGroup>
+
+          <CallGroup title="Kunde">
+            <CallLink
+              label={order.customer.name}
+              phone={order.customer.phone}
+              onClick={() => onAction(order, "kunde_anrufen")}
+            />
+          </CallGroup>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Bestellung als übermittelt markieren?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Bestellung #{order.number} bei {order.restaurant.name} gilt danach als bestätigt.
+              Die Eskalation stoppt.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Abbrechen</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                onAction(order, "uebermittelt");
+                setConfirmOpen(false);
+              }}
+            >
+              Übermittelt
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+function CallGroup({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-xs font-medium text-muted-foreground uppercase">{title}</p>
+      {children}
+    </div>
+  );
+}
+
+/** Ein wählbarer Anschluss im Anruf-Dialog. */
+function CallLink({
+  label,
+  phone,
+  icon: Icon = PhoneCall,
+  onClick,
+}: {
+  label: string;
+  phone: string;
+  icon?: LucideIcon;
+  onClick?: () => void;
+}) {
+  return (
+    <Button
+      variant="outline"
+      className="justify-start"
+      nativeButton={false}
+      onClick={onClick}
+      render={<a href={telHref(phone)} />}
+    >
+      <Icon />
+      <span className="flex-1 truncate text-left">{label}</span>
+      <span className="text-xs text-muted-foreground tabular-nums">{phone}</span>
+    </Button>
+  );
+}
+
+function MenuAction({
+  def,
+  order,
+  onAction,
+}: {
+  def: ActionDef;
+  order: Order;
+  onAction: (order: Order, action: OrderAction) => void;
+}) {
+  const Icon = def.icon;
+  const handleClick = def.action ? () => onAction(order, def.action!) : undefined;
+
+  if (def.href) {
+    return (
+      <DropdownMenuItem
+        variant={def.destructive ? "destructive" : "default"}
+        nativeButton={false}
+        onClick={handleClick}
+        render={
+          <a
+            href={def.href}
+            {...(def.external ? { target: "_blank", rel: "noreferrer" } : {})}
+          />
+        }
+      >
+        <Icon />
+        {def.label}
+      </DropdownMenuItem>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      variant={def.destructive ? "destructive" : "default"}
+      onClick={handleClick}
+    >
+      <Icon />
+      {def.label}
+    </DropdownMenuItem>
+  );
+}

src/components/orders/order-card.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { formatCurrency, formatTime } from "@/lib/format";
+import { PAYMENT_LABEL, TYPE_LABEL, type Order } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+import type { OrderAction } from "./actions";
+import { OrderActions } from "./order-actions";
+import { OrderQuickActions } from "./order-quick-actions";
+import { OrderTimeline } from "./order-timeline";
+import { StatusBadge } from "./status-badge";
+
+type Props = {
+  order: Order;
+  now: number;
+  onAction: (order: Order, action: OrderAction) => void;
+  onSelect: (order: Order) => void;
+  /** `list` legt die Felder nebeneinander statt untereinander. */
+  layout: "grid" | "list";
+};
+
+export function OrderCard({ order, now, onAction, onSelect, layout }: Props) {
+  const [timelineOpen, setTimelineOpen] = React.useState(false);
+
+  return (
+    <Card
+      className="cursor-pointer gap-3 p-4 transition-colors hover:bg-muted/50"
+      onClick={() => onSelect(order)}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="font-mono text-sm text-muted-foreground tabular-nums">
+            #{order.number}
+          </span>
+          <StatusBadge status={order.status} />
+        </div>
+        {/* Aktionen dürfen den Detail-Dialog der Karte nicht mit öffnen. */}
+        <div
+          className="flex items-center gap-1"
+          onClick={(event) => event.stopPropagation()}
+        >
+          <OrderActions order={order} onAction={onAction} />
+        </div>
+      </div>
+
+      <div
+        className={
+          layout === "list"
+            ? "grid gap-3 sm:grid-cols-2 lg:grid-cols-4"
+            : "grid gap-3 sm:grid-cols-2"
+        }
+      >
+        <Field label="Gastronom">
+          {order.restaurant.name}
+          <span className="block truncate text-xs font-normal text-muted-foreground">
+            {order.restaurant.city} · {order.restaurant.hours}
+          </span>
+        </Field>
+        <Field label="Kunde">
+          {order.customer.name}
+          <span className="block truncate text-xs font-normal text-muted-foreground">
+            {order.customer.email}
+          </span>
+        </Field>
+        <Field
+          label="Zeiten"
+          // Der Verlauf gehört zu den Zeiten, also hängt der Schalter direkt darunter.
+          extra={
+            layout === "list" ? (
+              <div
+                className="flex flex-col gap-2"
+                onClick={(event) => event.stopPropagation()}
+              >
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="-ml-2 h-7 self-start px-2 text-xs text-muted-foreground"
+                  aria-expanded={timelineOpen}
+                  onClick={() => setTimelineOpen((open) => !open)}
+                >
+                  <ChevronDown
+                    className={cn("transition-transform", timelineOpen && "rotate-180")}
+                  />
+                  {timelineOpen ? "Verlauf ausblenden" : "Verlauf anzeigen"}
+                </Button>
+
+                {/* Verlauf bleibt eingeklappt, sonst wird die Liste unlesbar lang. */}
+                {timelineOpen && (
+                  <div className="border-t pt-3">
+                    <OrderTimeline order={order} now={now} onAction={onAction} />
+                  </div>
+                )}
+              </div>
+            ) : undefined
+          }
+        >
+          <span className="inline-flex items-center gap-1.5 tabular-nums">
+            <span className="size-1.5 rounded-full bg-blue-500" />
+            {formatTime(order.receivedAt)}
+            <span className="ml-2 size-1.5 rounded-full bg-emerald-500" />
+            {formatTime(order.dueAt)}
+          </span>
+          <span className="block truncate text-xs font-normal text-muted-foreground">
+            {TYPE_LABEL[order.type]}
+          </span>
+        </Field>
+        <Field label="Betrag">
+          {formatCurrency(order.total)}
+          <span className="block truncate text-xs font-normal text-muted-foreground">
+            {PAYMENT_LABEL[order.payment]}
+          </span>
+        </Field>
+      </div>
+
+      {/* In der Liste ist Platz, alle Aktionen offen zu zeigen statt sie im Menü zu verstecken. */}
+      {layout === "list" && <OrderQuickActions order={order} onAction={onAction} />}
+    </Card>
+  );
+}
+
+function Field({
+  label,
+  children,
+  extra,
+}: {
+  label: string;
+  children: React.ReactNode;
+  /** Steht unter dem Feldinhalt, außerhalb des Abschneidens. */
+  extra?: React.ReactNode;
+}) {
+  return (
+    <div className="min-w-0">
+      <p className="text-xs font-medium text-muted-foreground uppercase">{label}</p>
+      <div className="truncate text-sm font-medium">{children}</div>
+      {extra}
+    </div>
+  );
+}

src/components/orders/order-detail-dialog.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { ExternalLink, FileText } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { formatCurrency, formatDate, formatTime } from "@/lib/format";
+import { PAYMENT_LABEL, TYPE_LABEL, type Order } from "@/lib/types";
+
+import {
+  bearbeitungActions,
+  gastronomActions,
+  type ActionDef,
+  type OrderAction,
+} from "./actions";
+import { OrderTimeline } from "./order-timeline";
+import { StatusBadge } from "./status-badge";
+
+type Props = {
+  order: Order | null;
+  now: number;
+  onOpenChange: (open: boolean) => void;
+  onAction: (order: Order, action: OrderAction) => void;
+};
+
+export function OrderDetailDialog({ order, now, onOpenChange, onAction }: Props) {
+  return (
+    <Dialog open={order !== null} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90svh] overflow-y-auto sm:max-w-2xl">
+        {order && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex flex-wrap items-center gap-2">
+                Bestellung #{order.number}
+                <StatusBadge status={order.status} />
+              </DialogTitle>
+              <DialogDescription>
+                {TYPE_LABEL[order.type]} · Eingang {formatDate(order.receivedAt)} um{" "}
+                {formatTime(order.receivedAt)} Uhr
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field label="Gastronom">
+                {order.restaurant.name}
+                <span className="block text-xs text-muted-foreground">
+                  {order.restaurant.city} · geöffnet {order.restaurant.hours}
+                </span>
+              </Field>
+              <Field label="Kunde">
+                {order.customer.name}
+                <span className="block text-xs text-muted-foreground">
+                  {order.customer.email} · {order.customer.phone}
+                </span>
+              </Field>
+              <Field label="Zeiten">
+                Eingang {formatTime(order.receivedAt)} Uhr
+                <span className="block text-xs text-muted-foreground">
+                  Gewünscht {formatTime(order.dueAt)} Uhr
+                </span>
+              </Field>
+              <Field label="Betrag">
+                {formatCurrency(order.total)}
+                <span className="block text-xs text-muted-foreground">
+                  {order.itemCount} Artikel · {PAYMENT_LABEL[order.payment]}
+                </span>
+              </Field>
+            </div>
+
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <Button
+                variant="outline"
+                nativeButton={false}
+                render={<a href={order.pdfUrl} target="_blank" rel="noreferrer" />}
+              >
+                <FileText />
+                Bestellung als PDF öffnen
+              </Button>
+              <Button
+                variant="outline"
+                nativeButton={false}
+                render={<a href={order.externalUrl} target="_blank" rel="noreferrer" />}
+              >
+                <ExternalLink />
+                Im Backoffice öffnen
+              </Button>
+            </div>
+
+            <Separator />
+
+            <OrderTimeline order={order} now={now} onAction={onAction} />
+
+            <Separator />
+
+            <ActionGroup
+              title="Gastronom kontaktieren"
+              defs={gastronomActions(order)}
+              order={order}
+              onAction={onAction}
+            />
+
+            <ActionGroup
+              title="Bestellung bearbeiten"
+              defs={bearbeitungActions(order)}
+              order={order}
+              onAction={onAction}
+            />
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <p className="text-xs font-medium text-muted-foreground uppercase">{label}</p>
+      <p className="text-sm font-medium">{children}</p>
+    </div>
+  );
+}
+
+function ActionGroup({
+  title,
+  defs,
+  order,
+  onAction,
+}: {
+  title: string;
+  defs: ActionDef[];
+  order: Order;
+  onAction: (order: Order, action: OrderAction) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-xs font-medium text-muted-foreground uppercase">{title}</p>
+      <div className="grid gap-2 sm:grid-cols-2">
+        {defs.map((def) => {
+          const Icon = def.icon;
+          const handleClick = def.action ? () => onAction(order, def.action!) : undefined;
+
+          return (
+            <Button
+              key={def.key}
+              variant={def.destructive ? "destructive" : "outline"}
+              className="justify-start"
+              nativeButton={!def.href}
+              onClick={handleClick}
+              render={
+                def.href ? (
+                  <a
+                    href={def.href}
+                    {...(def.external ? { target: "_blank", rel: "noreferrer" } : {})}
+                  />
+                ) : undefined
+              }
+            >
+              <Icon />
+              {def.label}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/orders/order-quick-actions.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import type { Order } from "@/lib/types";
+
+import { bearbeitungActions, gastronomActions, type ActionDef, type OrderAction } from "./actions";
+
+type Props = {
+  order: Order;
+  onAction: (order: Order, action: OrderAction) => void;
+};
+
+/**
+ * Alle Aktionen offen auf der Karte, wie in der alten Oberfläche: oben die Wege zum
+ * Gastronomen, unten die Bearbeitungsschritte zur Bestellung.
+ */
+export function OrderQuickActions({ order, onAction }: Props) {
+  return (
+    // Aktionen dürfen den Detail-Dialog der Karte nicht mit öffnen.
+    <div
+      className="flex flex-col gap-2 border-t pt-3"
+      onClick={(event) => event.stopPropagation()}
+    >
+      {/* Reine Telefonnummern bleiben draußen – die stecken im Anruf-Button der Kopfzeile. */}
+      <Row
+        title="Gastronom"
+        defs={gastronomActions(order).filter((def) => !def.phone)}
+        order={order}
+        onAction={onAction}
+      />
+      <Row
+        title="Kunde"
+        defs={bearbeitungActions(order).filter((def) => !def.phone)}
+        order={order}
+        onAction={onAction}
+      />
+    </div>
+  );
+}
+
+function Row({
+  title,
+  defs,
+  order,
+  onAction,
+}: {
+  title: string;
+  defs: ActionDef[];
+  order: Order;
+  onAction: (order: Order, action: OrderAction) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <span className="text-xs font-medium text-muted-foreground uppercase">{title}</span>
+      <div className="flex flex-wrap items-center gap-1.5">
+        {defs.map((def) => {
+          const Icon = def.icon;
+          const handleClick = def.action ? () => onAction(order, def.action!) : undefined;
+
+          return (
+            <Button
+              key={def.key}
+              size="sm"
+              variant={def.destructive ? "destructive" : "outline"}
+              className="h-7 px-2 text-xs"
+              title={def.label}
+              nativeButton={!def.href}
+              onClick={handleClick}
+              render={
+                def.href ? (
+                  <a
+                    href={def.href}
+                    {...(def.external ? { target: "_blank", rel: "noreferrer" } : {})}
+                  />
+                ) : undefined
+              }
+            >
+              <Icon />
+              {def.short}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/orders/order-timeline.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { Check, CircleAlert, Clock, Minus, TriangleAlert } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { formatTime } from "@/lib/format";
+import { buildTimeline, type StepState, type TimelineStep } from "@/lib/timeline";
+import type { Order, OrderAction } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+type Props = {
+  order: Order;
+  now: number;
+  onAction: (order: Order, action: OrderAction) => void;
+};
+
+const ICON: Record<StepState, typeof Check> = {
+  done: Check,
+  due: CircleAlert,
+  pending: Clock,
+  skipped: Minus,
+};
+
+export function OrderTimeline({ order, now, onAction }: Props) {
+  const steps = buildTimeline(order, now);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-xs font-medium text-muted-foreground uppercase">Verlauf</p>
+      <ol className="flex flex-col">
+        {steps.map((step, index) => (
+          <Step
+            key={step.id}
+            step={step}
+            last={index === steps.length - 1}
+            order={order}
+            onAction={onAction}
+          />
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+function Step({
+  step,
+  last,
+  order,
+  onAction,
+}: {
+  step: TimelineStep;
+  last: boolean;
+  order: Order;
+  onAction: (order: Order, action: OrderAction) => void;
+}) {
+  const Icon = ICON[step.state];
+  const danger = step.danger && step.state !== "pending" && step.state !== "skipped";
+
+  return (
+    <li className="flex gap-3">
+      <div className="flex flex-col items-center">
+        <span
+          className={cn(
+            "flex size-6 shrink-0 items-center justify-center rounded-full border",
+            step.state === "done" && "border-transparent bg-primary text-primary-foreground",
+            step.state === "due" && "border-transparent bg-amber-500 text-white",
+            step.state === "pending" && "bg-background text-muted-foreground",
+            step.state === "skipped" && "bg-muted text-muted-foreground",
+            danger && "bg-destructive text-white",
+          )}
+        >
+          <Icon className="size-3.5" />
+        </span>
+        {!last && <span className="w-px flex-1 bg-border" />}
+      </div>
+
+      <div className={cn("flex-1 pb-4", last && "pb-0")}>
+        <div className="flex flex-wrap items-baseline gap-x-2">
+          <p
+            className={cn(
+              "text-sm font-medium",
+              step.state === "pending" && "text-muted-foreground",
+              step.state === "skipped" && "text-muted-foreground line-through",
+              danger && "text-destructive",
+            )}
+          >
+            {step.label}
+          </p>
+          {step.at !== undefined && (
+            <span className="text-xs text-muted-foreground tabular-nums">
+              {step.state === "pending" ? "ab " : ""}
+              {formatTime(new Date(step.at).toISOString())} Uhr
+            </span>
+          )}
+        </div>
+
+        {step.description && (
+          <p className="text-xs text-muted-foreground">{step.description}</p>
+        )}
+
+        {step.state === "due" && step.action && (
+          <Button
+            size="sm"
+            variant={step.danger ? "destructive" : "outline"}
+            className="mt-2"
+            onClick={() => onAction(order, step.action!)}
+          >
+            {step.danger && <TriangleAlert />}
+            {step.danger ? "SOS auslösen" : "Jetzt erledigen"}
+          </Button>
+        )}
+      </div>
+    </li>
+  );
+}

src/components/orders/orders-table.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { ArrowDown, ArrowUp, ChevronsUpDown, TriangleAlert } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { formatCurrency, formatTime } from "@/lib/format";
+import { currentStep } from "@/lib/timeline";
+import { PAYMENT_LABEL, type Order } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+import type { OrderAction } from "./actions";
+import { OrderActions } from "./order-actions";
+import { StatusBadge } from "./status-badge";
+
+export type SortKey =
+  | "number"
+  | "status"
+  | "receivedAt"
+  | "dueAt"
+  | "restaurant"
+  | "customer"
+  | "total";
+
+export type SortState = { key: SortKey; dir: "asc" | "desc" };
+
+type Props = {
+  orders: Order[];
+  /** Uhrzeit für den Verlauf – kommt aus der laufenden Uhr der Ansicht. */
+  now: number;
+  sort: SortState;
+  onSortChange: (key: SortKey) => void;
+  onAction: (order: Order, action: OrderAction) => void;
+  onSelect: (order: Order) => void;
+};
+
+export function OrdersTable({ orders, now, sort, onSortChange, onAction, onSelect }: Props) {
+  return (
+    <div className="overflow-x-auto rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow className="hover:bg-transparent">
+            <SortableHead sortKey="number" sort={sort} onSortChange={onSortChange} className="w-16">
+              Nr.
+            </SortableHead>
+            <SortableHead sortKey="status" sort={sort} onSortChange={onSortChange}>
+              Status
+            </SortableHead>
+            <SortableHead sortKey="restaurant" sort={sort} onSortChange={onSortChange}>
+              Gastronom
+            </SortableHead>
+            <SortableHead sortKey="customer" sort={sort} onSortChange={onSortChange}>
+              Kunde
+            </SortableHead>
+            <SortableHead sortKey="receivedAt" sort={sort} onSortChange={onSortChange}>
+              Eingang
+            </SortableHead>
+            <SortableHead sortKey="dueAt" sort={sort} onSortChange={onSortChange}>
+              Gewünscht
+            </SortableHead>
+            <TableHead>Verlauf</TableHead>
+            <SortableHead sortKey="total" sort={sort} onSortChange={onSortChange} align="right">
+              Betrag
+            </SortableHead>
+            <TableHead>Zahlart</TableHead>
+            <TableHead className="text-right">Aktionen</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {orders.length === 0 && (
+            <TableRow className="hover:bg-transparent">
+              <TableCell colSpan={10} className="h-32 text-center text-muted-foreground">
+                Keine Bestellungen gefunden.
+              </TableCell>
+            </TableRow>
+          )}
+
+          {orders.map((order) => (
+            <TableRow
+              key={order.id}
+              className="cursor-pointer"
+              onClick={() => onSelect(order)}
+            >
+              <TableCell className="font-mono text-muted-foreground tabular-nums">
+                {order.number}
+              </TableCell>
+              <TableCell>
+                <StatusBadge status={order.status} />
+              </TableCell>
+              <TableCell>
+                <div className="font-medium whitespace-nowrap">{order.restaurant.name}</div>
+                <div className="text-xs text-muted-foreground whitespace-nowrap">
+                  {order.restaurant.city} · {order.restaurant.hours}
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className="font-medium whitespace-nowrap">{order.customer.name}</div>
+                <div className="text-xs text-muted-foreground">{order.customer.email}</div>
+              </TableCell>
+              <TableCell className="tabular-nums whitespace-nowrap">
+                <span className="mr-2 inline-block size-1.5 rounded-full bg-blue-500 align-middle" />
+                {formatTime(order.receivedAt)}
+              </TableCell>
+              <TableCell className="tabular-nums whitespace-nowrap">
+                <span className="mr-2 inline-block size-1.5 rounded-full bg-emerald-500 align-middle" />
+                {formatTime(order.dueAt)}
+              </TableCell>
+              {/* Der Schritt-Button darf den Detail-Dialog der Zeile nicht mit öffnen. */}
+              <TableCell onClick={(event) => event.stopPropagation()}>
+                <StepCell order={order} now={now} onAction={onAction} />
+              </TableCell>
+              <TableCell className="text-right font-medium tabular-nums whitespace-nowrap">
+                {formatCurrency(order.total)}
+              </TableCell>
+              <TableCell className="whitespace-nowrap text-muted-foreground">
+                {PAYMENT_LABEL[order.payment]}
+              </TableCell>
+              {/* Aktionen dürfen den Detail-Dialog der Zeile nicht mit öffnen. */}
+              <TableCell onClick={(event) => event.stopPropagation()}>
+                <div className="flex items-center justify-end gap-1">
+                  <OrderActions order={order} onAction={onAction} />
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+/** Aktueller Punkt der Eskalation samt Button für den fälligen Schritt. */
+function StepCell({
+  order,
+  now,
+  onAction,
+}: {
+  order: Order;
+  now: number;
+  onAction: (order: Order, action: OrderAction) => void;
+}) {
+  const step = currentStep(order, now);
+  const due = step.state === "due";
+
+  return (
+    <div className="flex items-center gap-2 whitespace-nowrap">
+      <span
+        className={cn(
+          "size-1.5 shrink-0 rounded-full",
+          due && step.danger && "bg-destructive",
+          due && !step.danger && "bg-amber-500",
+          !due && step.danger && "bg-destructive",
+          !due && !step.danger && "bg-muted-foreground/40",
+        )}
+      />
+      <span className={cn("text-sm", step.danger && "text-destructive")}>{step.short}</span>
+
+      {due && step.action && (
+        <Button
+          size="sm"
+          variant={step.danger ? "destructive" : "outline"}
+          className="h-7 px-2 text-xs"
+          title={step.label}
+          onClick={() => onAction(order, step.action!)}
+        >
+          {step.danger && <TriangleAlert />}
+          {step.danger ? "SOS" : "Erledigen"}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function SortableHead({
+  sortKey,
+  sort,
+  onSortChange,
+  align = "left",
+  className,
+  children,
+}: {
+  sortKey: SortKey;
+  sort: SortState;
+  onSortChange: (key: SortKey) => void;
+  align?: "left" | "right";
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const active = sort.key === sortKey;
+  const Icon = !active ? ChevronsUpDown : sort.dir === "asc" ? ArrowUp : ArrowDown;
+
+  return (
+    <TableHead className={className}>
+      <div className={align === "right" ? "flex justify-end" : "flex"}>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 -mx-2 whitespace-nowrap data-[active=true]:text-foreground"
+          data-active={active}
+          onClick={() => onSortChange(sortKey)}
+        >
+          {children}
+          <Icon className={active ? "" : "opacity-50"} />
+        </Button>
+      </div>
+    </TableHead>
+  );
+}

src/components/orders/orders-view.tsx

@@ -0,0 +1,606 @@
+"use client";
+
+import * as React from "react";
+import {
+  ArrowDownWideNarrow,
+  ArrowUpNarrowWide,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  LayoutGrid,
+  SlidersHorizontal,
+  Rows3,
+  Search,
+  Table2,
+  X,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useIsMobile } from "@/hooks/use-media-query";
+import { formatCurrency } from "@/lib/format";
+import {
+  PAYMENT_LABEL,
+  STATUS_LABEL,
+  TYPE_LABEL,
+  type Order,
+  type OrderStatus,
+  type OrderType,
+  type PaymentMethod,
+  effectiveStatus,
+} from "@/lib/types";
+
+import { ACTION_STATUS, ACTION_TOAST, CONFIRMING_ACTIONS, type OrderAction } from "./actions";
+import { OrderCard } from "./order-card";
+import { OrderDetailDialog } from "./order-detail-dialog";
+import { OrdersTable, type SortKey, type SortState } from "./orders-table";
+
+const ALL = "alle";
+const PAGE_SIZES = [10, 25, 50, 100];
+
+type ViewMode = "table" | "list" | "grid";
+
+const VIEW_MODES: { value: ViewMode; label: string; icon: typeof Table2 }[] = [
+  { value: "table", label: "Tabelle", icon: Table2 },
+  { value: "list", label: "Liste", icon: Rows3 },
+  { value: "grid", label: "Raster", icon: LayoutGrid },
+];
+
+/** Sortierfelder für Listen- und Rasteransicht, in denen es keine Spaltenköpfe gibt. */
+const SORT_LABEL: Record<SortKey, string> = {
+  number: "Nummer",
+  status: "Status",
+  restaurant: "Gastronom",
+  customer: "Kunde",
+  receivedAt: "Eingang",
+  dueAt: "Gewünschte Zeit",
+  total: "Betrag",
+};
+
+
+type Props = {
+  initialOrders: Order[];
+  /** Serverzeit des Renderings – Startwert der Uhr für die 15-Minuten-Regel. */
+  renderedAt: number;
+};
+
+export function OrdersView({ initialOrders, renderedAt }: Props) {
+  const [orders, setOrders] = React.useState(initialOrders);
+  const [tab, setTab] = React.useState("allgemein");
+  const [search, setSearch] = React.useState("");
+  const [status, setStatus] = React.useState<string>(ALL);
+  const [type, setType] = React.useState<string>(ALL);
+  const [restaurant, setRestaurant] = React.useState<string>(ALL);
+  const [payment, setPayment] = React.useState<string>(ALL);
+  const [sort, setSort] = React.useState<SortState>({ key: "number", dir: "desc" });
+  const [pageSize, setPageSize] = React.useState(25);
+  const [page, setPage] = React.useState(1);
+  const [selectedId, setSelectedId] = React.useState<string | null>(null);
+  const [view, setView] = React.useState<ViewMode | null>(null);
+  const [now, setNow] = React.useState(renderedAt);
+  const [filtersOpen, setFiltersOpen] = React.useState(false);
+
+  // Die Uhr tickt weiter, damit Bestellungen ohne Zutun in "Nicht übermittelt" kippen.
+  React.useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 30_000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Ohne eigene Wahl entscheidet die Bildschirmbreite: mobil Liste, sonst Tabelle.
+  const isMobile = useIsMobile();
+  // Raster fällt mobil weg – einspaltig sähe es identisch zur Liste aus.
+  const viewModes = isMobile ? VIEW_MODES.filter((m) => m.value !== "grid") : VIEW_MODES;
+  const chosenView = view ?? (isMobile ? "list" : "table");
+  const viewMode: ViewMode = isMobile && chosenView === "grid" ? "list" : chosenView;
+  const activeView = viewModes.find((m) => m.value === viewMode) ?? viewModes[0];
+
+  const restaurants = React.useMemo(
+    () => [...new Set(initialOrders.map((o) => o.restaurant.name))].sort(),
+    [initialOrders],
+  );
+
+  /** Der abgelaufene Status ersetzt den gespeicherten, bevor irgendwo gefiltert wird. */
+  const dated = React.useMemo(
+    () => orders.map((o) => ({ ...o, status: effectiveStatus(o, now) })),
+    [orders, now],
+  );
+
+  const undeliveredCount = dated.filter((o) => o.status === "nicht_uebermittelt").length;
+
+  // Der Dialog liest über die Id nach, damit er Aktionen sofort widerspiegelt.
+  const selected = dated.find((o) => o.id === selectedId) ?? null;
+
+  const filtered = React.useMemo(() => {
+    const q = search.trim().toLowerCase();
+
+    const rows = dated.filter((o) => {
+      if (tab === "nicht_uebermittelt" && o.status !== "nicht_uebermittelt") return false;
+      if (status !== ALL && o.status !== status) return false;
+      if (type !== ALL && o.type !== type) return false;
+      if (restaurant !== ALL && o.restaurant.name !== restaurant) return false;
+      if (payment !== ALL && o.payment !== payment) return false;
+      if (!q) return true;
+
+      return [
+        String(o.number),
+        o.restaurant.name,
+        o.restaurant.city,
+        o.customer.name,
+        o.customer.email,
+        o.customer.phone,
+        STATUS_LABEL[o.status],
+        TYPE_LABEL[o.type],
+      ]
+        .join(" ")
+        .toLowerCase()
+        .includes(q);
+    });
+
+    const factor = sort.dir === "asc" ? 1 : -1;
+    return rows.sort((a, b) => factor * compare(a, b, sort.key));
+  }, [dated, tab, search, status, type, restaurant, payment, sort]);
+
+  const sum = filtered.reduce((acc, o) => acc + o.total, 0);
+  const filtersActive =
+    search !== "" || status !== ALL || type !== ALL || restaurant !== ALL || payment !== ALL;
+
+  const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const currentPage = Math.min(page, pageCount);
+  const pageStart = (currentPage - 1) * pageSize;
+  const pageRows = filtered.slice(pageStart, pageStart + pageSize);
+
+  /** Jede Änderung an Filtern, Suche oder Sortierung springt zurück auf Seite 1. */
+  function update<T>(setter: (value: T) => void) {
+    return (value: T) => {
+      setter(value);
+      setPage(1);
+    };
+  }
+
+  function handleSort(key: SortKey) {
+    setSort((prev) =>
+      prev.key === key
+        ? { key, dir: prev.dir === "asc" ? "desc" : "asc" }
+        : { key, dir: key === "number" ? "desc" : "asc" },
+    );
+    setPage(1);
+  }
+
+  /** Wechselt das Sortierfeld, ohne die Richtung umzuschalten. */
+  function setSortKey(key: SortKey) {
+    setSort((prev) =>
+      prev.key === key ? prev : { key, dir: key === "number" ? "desc" : "asc" },
+    );
+    setPage(1);
+  }
+
+  function resetFilters() {
+    setSearch("");
+    setStatus(ALL);
+    setType(ALL);
+    setRestaurant(ALL);
+    setPayment(ALL);
+    setPage(1);
+  }
+
+  const activeFilters = [status, type, restaurant, payment].filter((v) => v !== ALL).length;
+
+  const filterSelects = (
+    <>
+      <FilterSelect
+        value={status}
+        onValueChange={update(setStatus)}
+        placeholder="Status"
+        options={Object.entries(STATUS_LABEL) as [OrderStatus, string][]}
+      />
+      <FilterSelect
+        value={type}
+        onValueChange={update(setType)}
+        placeholder="Typ"
+        options={Object.entries(TYPE_LABEL) as [OrderType, string][]}
+      />
+      <FilterSelect
+        value={restaurant}
+        onValueChange={update(setRestaurant)}
+        placeholder="Gastronom"
+        options={restaurants.map((r) => [r, r] as [string, string])}
+      />
+      <FilterSelect
+        value={payment}
+        onValueChange={update(setPayment)}
+        placeholder="Zahlart"
+        options={Object.entries(PAYMENT_LABEL) as [PaymentMethod, string][]}
+      />
+    </>
+  );
+
+  function handleAction(order: Order, action: OrderAction) {
+    const at = new Date().toISOString();
+    const next = ACTION_STATUS[action];
+
+    setOrders((prev) =>
+      prev.map((o) =>
+        o.id === order.id
+          ? {
+              ...o,
+              status: next ?? o.status,
+              confirmedAt: CONFIRMING_ACTIONS.includes(action) ? at : o.confirmedAt,
+              events: [...o.events, { type: action, at }],
+            }
+          : o,
+      ),
+    );
+
+    const message = ACTION_TOAST[action];
+    if (message) toast.success(message, { description: `Bestellung #${order.number}` });
+  }
+
+  return (
+    <Tabs value={tab} onValueChange={update(setTab)} className="gap-6">
+      <TabsList>
+        <TabsTrigger value="allgemein">
+          Allgemein
+          <Badge variant="secondary" className="ml-1.5 tabular-nums">
+            {orders.length}
+          </Badge>
+        </TabsTrigger>
+        {/* Offene Fälle sollen ins Auge springen, deshalb rot statt neutral. */}
+        <TabsTrigger
+          value="nicht_uebermittelt"
+          className={
+            undeliveredCount > 0
+              ? "text-destructive hover:text-destructive data-active:text-destructive"
+              : undefined
+          }
+        >
+          {undeliveredCount > 0 && (
+            <span className="relative flex size-2">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-destructive opacity-75" />
+              <span className="relative inline-flex size-2 rounded-full bg-destructive" />
+            </span>
+          )}
+          Nicht übermittelt
+          <Badge
+            variant={undeliveredCount > 0 ? "destructive" : "secondary"}
+            className="ml-1.5 tabular-nums"
+          >
+            {undeliveredCount}
+          </Badge>
+        </TabsTrigger>
+      </TabsList>
+
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          {/* Mobil zieht das Feld die Zeile, ab sm reicht eine feste Breite. */}
+          <div className="relative min-w-40 flex-1 sm:w-72 sm:flex-none">
+            <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={search}
+              onChange={(e) => update(setSearch)(e.target.value)}
+              placeholder="Suche nach Nr., Gastronom, Kunde …"
+              className="pl-9"
+            />
+          </div>
+
+          {/* Filter und Ansicht sammeln sich rechts, die Suche bleibt links. */}
+          <div className="ml-auto flex items-center gap-2">
+            {/* Mobil würden fünf Selects die halbe Seite füllen – deshalb ins Sheet. */}
+            {isMobile ? (
+              <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+                <SheetTrigger
+                  render={
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="relative shrink-0"
+                      aria-label="Filter"
+                    />
+                  }
+                >
+                  <SlidersHorizontal />
+                  {activeFilters > 0 && (
+                    <span className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground tabular-nums">
+                      {activeFilters}
+                    </span>
+                  )}
+                </SheetTrigger>
+                <SheetContent side="bottom" className="gap-4">
+                  <SheetHeader>
+                    <SheetTitle>Filter</SheetTitle>
+                  </SheetHeader>
+                  <div className="grid gap-2 px-4">{filterSelects}</div>
+                  <SheetFooter>
+                    <Button variant="outline" onClick={resetFilters} disabled={!filtersActive}>
+                      <X />
+                      Zurücksetzen
+                    </Button>
+                    <Button onClick={() => setFiltersOpen(false)}>
+                      {filtered.length} Bestellungen anzeigen
+                    </Button>
+                  </SheetFooter>
+                </SheetContent>
+              </Sheet>
+            ) : (
+              <>
+                {filterSelects}
+                {filtersActive && (
+                  <Button variant="ghost" onClick={resetFilters}>
+                    <X />
+                    Zurücksetzen
+                  </Button>
+                )}
+              </>
+            )}
+
+            {/* Ansicht als Icon-Menü, damit die Zeile nicht von drei Schaltern belegt wird. */}
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="shrink-0"
+                    aria-label={`Ansicht: ${activeView.label}`}
+                    title={`Ansicht: ${activeView.label}`}
+                  />
+                }
+              >
+                <activeView.icon />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>Ansicht</DropdownMenuLabel>
+                  <DropdownMenuRadioGroup
+                    value={viewMode}
+                    onValueChange={(next) => setView((next as ViewMode) ?? viewMode)}
+                  >
+                    {viewModes.map(({ value, label, icon: Icon }) => (
+                      // Radio-Einträge bleiben sonst offen stehen; hier ist die Wahl erledigt.
+                      <DropdownMenuRadioItem key={value} value={value} closeOnClick>
+                        <Icon />
+                        {label}
+                      </DropdownMenuRadioItem>
+                    ))}
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        {/* Ohne Spaltenköpfe braucht es in Liste und Raster eigene Sortiersteuerung. */}
+        {viewMode !== "table" && (
+          <div className="flex items-center gap-2">
+            <div className="flex min-w-0 items-center gap-2">
+              <Select
+                value={sort.key}
+                onValueChange={(next) => setSortKey((next ?? "number") as SortKey)}
+              >
+                <SelectTrigger size="sm" className="w-auto min-w-0">
+                  <SelectValue>
+                    {(current: string | null) =>
+                      // Mobil fehlt der Platz für das Präfix.
+                      `${isMobile ? "" : "Sortieren: "}${SORT_LABEL[(current ?? "number") as SortKey]}`
+                    }
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {(Object.entries(SORT_LABEL) as [SortKey, string][]).map(([key, label]) => (
+                    <SelectItem key={key} value={key}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8 shrink-0"
+                aria-label={sort.dir === "asc" ? "Aufsteigend" : "Absteigend"}
+                title={sort.dir === "asc" ? "Aufsteigend" : "Absteigend"}
+                onClick={() => handleSort(sort.key)}
+              >
+                {sort.dir === "asc" ? <ArrowUpNarrowWide /> : <ArrowDownWideNarrow />}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <TabsContent value={tab} className="flex flex-col gap-3">
+        {viewMode === "table" ? (
+          <OrdersTable
+            orders={pageRows}
+            now={now}
+            sort={sort}
+            onSortChange={handleSort}
+            onAction={handleAction}
+            onSelect={(order) => setSelectedId(order.id)}
+          />
+        ) : pageRows.length === 0 ? (
+          <div className="flex h-32 items-center justify-center rounded-md border text-sm text-muted-foreground">
+            Keine Bestellungen gefunden.
+          </div>
+        ) : (
+          <div
+            className={
+              viewMode === "grid"
+                ? "grid gap-3 sm:grid-cols-2 xl:grid-cols-3"
+                : "flex flex-col gap-3"
+            }
+          >
+            {pageRows.map((order) => (
+              <OrderCard
+                key={order.id}
+                order={order}
+                now={now}
+                layout={viewMode}
+                onAction={handleAction}
+                onSelect={(o) => setSelectedId(o.id)}
+              />
+            ))}
+          </div>
+        )}
+
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <p className="text-sm text-muted-foreground">
+            {filtered.length} von {orders.length} Bestellungen · Summe {formatCurrency(sum)}
+          </p>
+
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">Zeilen pro Seite</span>
+              <Select
+                value={String(pageSize)}
+                onValueChange={(next) => update(setPageSize)(Number(next ?? 25))}
+              >
+                <SelectTrigger size="sm" className="w-20">
+                  <SelectValue>{(current: string | null) => current ?? "25"}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {PAGE_SIZES.map((size) => (
+                    <SelectItem key={size} value={String(size)}>
+                      {size}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <span className="text-sm whitespace-nowrap tabular-nums">
+              Seite {currentPage} von {pageCount}
+            </span>
+
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8"
+                aria-label="Erste Seite"
+                disabled={currentPage === 1}
+                onClick={() => setPage(1)}
+              >
+                <ChevronsLeft />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8"
+                aria-label="Vorherige Seite"
+                disabled={currentPage === 1}
+                onClick={() => setPage(currentPage - 1)}
+              >
+                <ChevronLeft />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8"
+                aria-label="Nächste Seite"
+                disabled={currentPage === pageCount}
+                onClick={() => setPage(currentPage + 1)}
+              >
+                <ChevronRight />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="size-8"
+                aria-label="Letzte Seite"
+                disabled={currentPage === pageCount}
+                onClick={() => setPage(pageCount)}
+              >
+                <ChevronsRight />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </TabsContent>
+      <OrderDetailDialog
+        order={selected}
+        now={now}
+        onOpenChange={(open) => !open && setSelectedId(null)}
+        onAction={handleAction}
+      />
+    </Tabs>
+  );
+}
+
+function FilterSelect({
+  value,
+  onValueChange,
+  placeholder,
+  options,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder: string;
+  options: [string, string][];
+}) {
+  const labels = Object.fromEntries(options);
+
+  return (
+    <Select value={value} onValueChange={(next) => onValueChange(next ?? ALL)}>
+      <SelectTrigger className="w-full min-w-36 sm:w-auto">
+        <SelectValue>
+          {(current: string | null) =>
+            current && current !== ALL ? labels[current] : `${placeholder}: Alle`
+          }
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value={ALL}>{placeholder}: Alle</SelectItem>
+        {options.map(([key, label]) => (
+          <SelectItem key={key} value={key}>
+            {label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function compare(a: Order, b: Order, key: SortKey) {
+  switch (key) {
+    case "number":
+    case "total":
+      return a[key] - b[key];
+    case "receivedAt":
+    case "dueAt":
+      return a[key].localeCompare(b[key]);
+    case "status":
+      return STATUS_LABEL[a.status].localeCompare(STATUS_LABEL[b.status], "de");
+    case "restaurant":
+      return a.restaurant.name.localeCompare(b.restaurant.name, "de");
+    case "customer":
+      return a.customer.name.localeCompare(b.customer.name, "de");
+  }
+}

src/components/orders/status-badge.tsx

@@ -0,0 +1,31 @@
+import { Badge } from "@/components/ui/badge";
+import { STATUS_LABEL, type OrderStatus } from "@/lib/types";
+
+const VARIANT: Record<OrderStatus, "default" | "secondary" | "destructive" | "outline"> = {
+  neu: "default",
+  uebermittelt: "secondary",
+  telefonisch: "secondary",
+  nicht_uebermittelt: "destructive",
+  rueckruf: "outline",
+  storniert: "destructive",
+  fake: "outline",
+};
+
+const DOT: Record<OrderStatus, string> = {
+  neu: "bg-blue-500",
+  uebermittelt: "bg-emerald-500",
+  telefonisch: "bg-emerald-500",
+  nicht_uebermittelt: "bg-destructive",
+  rueckruf: "bg-amber-500",
+  storniert: "bg-destructive",
+  fake: "bg-zinc-400",
+};
+
+export function StatusBadge({ status }: { status: OrderStatus }) {
+  return (
+    <Badge variant={VARIANT[status]} className="gap-1.5 whitespace-nowrap">
+      <span className={`size-1.5 rounded-full ${DOT[status]}`} />
+      {STATUS_LABEL[status]}
+    </Badge>
+  );
+}

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-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 AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        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,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+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",
+        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",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

src/components/ui/button-group.tsx

@@ -0,0 +1,87 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "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:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    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,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        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
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  })
+}
+
+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,
+}

src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+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",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

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

src/components/ui/dialog.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      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
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        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"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </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 render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  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,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--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 outline-none 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      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 DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.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 DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      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-popup-open:bg-accent data-popup-open:text-accent-foreground 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" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] 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 )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.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"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.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"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.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}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      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 }

src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      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 }

src/components/ui/select.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  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
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--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=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-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}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  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}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  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.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/components/ui/separator.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      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 }

src/components/ui/sheet.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        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-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] 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=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] 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=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </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 }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  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,
+}

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 }

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

src/components/ui/tabs.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  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
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      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 aria-disabled:pointer-events-none aria-disabled:opacity-50 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 }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

src/components/ui/toggle-group.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+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
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      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>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <TogglePrimitive
+      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}
+    </TogglePrimitive>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

src/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+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
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

src/components/ui/tooltip.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--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=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=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 data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/hooks/use-media-query.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Liest eine Media Query ohne Hydration-Mismatch: Auf dem Server ist das Ergebnis
+ * immer `false`, der Client aktualisiert direkt nach der Hydration.
+ */
+export function useMediaQuery(query: string) {
+  const subscribe = React.useCallback(
+    (onChange: () => void) => {
+      const list = window.matchMedia(query);
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    },
+    [query],
+  );
+
+  return React.useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}
+
+export const useIsMobile = () => useMediaQuery("(max-width: 767px)");

src/lib/data.ts

@@ -0,0 +1,133 @@
+import {
+  UNDELIVERED_AFTER_MS,
+  type Order,
+  type OrderStatus,
+  type OrderType,
+  type PaymentMethod,
+  type Restaurant,
+} from "./types";
+
+const restaurants: Restaurant[] = [
+  {
+    name: "Muster Ristorante",
+    city: "Taben-Rodt",
+    hours: "10:00 bis 23:00",
+    phone1: "+49 6582 123456",
+    phone2: "+49 6582 123457",
+    mobile: "+49 171 2223344",
+    orderUrl: "https://order.speisekarte24.de/muster-ristorante",
+  },
+  {
+    name: "Pizzeria Da Vinci",
+    city: "Trier",
+    hours: "11:00 bis 22:30",
+    phone1: "+49 651 998877",
+    mobile: "+49 160 5544332",
+    orderUrl: "https://order.speisekarte24.de/da-vinci",
+  },
+  {
+    name: "Sushi Yama",
+    city: "Saarbrücken",
+    hours: "12:00 bis 23:00",
+    phone1: "+49 681 445566",
+    phone2: "+49 681 445567",
+    mobile: "+49 175 1112233",
+    orderUrl: "https://order.speisekarte24.de/sushi-yama",
+  },
+  {
+    name: "Burger Station",
+    city: "Konz",
+    hours: "11:30 bis 21:00",
+    phone1: "+49 6501 334455",
+    mobile: "+49 152 9988776",
+    orderUrl: "https://order.speisekarte24.de/burger-station",
+  },
+  {
+    name: "Athen Grill",
+    city: "Wittlich",
+    hours: "17:00 bis 23:30",
+    phone1: "+49 6571 220011",
+    orderUrl: "https://order.speisekarte24.de/athen-grill",
+  },
+];
+
+const customers = [
+  { name: "Test Tester", email: "agentur@speisekarte24.de", phone: "+49 170 1234567" },
+  { name: "Anna Berger", email: "anna.berger@example.com", phone: "+49 151 2345678" },
+  { name: "Murat Yilmaz", email: "m.yilmaz@example.com", phone: "+49 176 3456789" },
+  { name: "Sophie Klein", email: "sophie.klein@example.com", phone: "+49 152 4567890" },
+  { name: "Lukas Weber", email: "lukas.weber@example.com", phone: "+49 160 5678901" },
+  { name: "Nina Hoffmann", email: "nina.h@example.com", phone: "+49 171 6789012" },
+  { name: "Jonas Krämer", email: "j.kraemer@example.com", phone: "+49 175 7890123" },
+  { name: "Elif Demir", email: "elif.demir@example.com", phone: "+49 157 8901234" },
+];
+
+/** Status für Bestellungen, die bereits bearbeitet wurden. */
+const handledStatuses: OrderStatus[] = [
+  "uebermittelt",
+  "uebermittelt",
+  "uebermittelt",
+  "telefonisch",
+  "telefonisch",
+  "rueckruf",
+  "storniert",
+  "fake",
+];
+
+/**
+ * Ältere Bestellungen mit diesem Index bleiben `neu` und kippen dadurch über die
+ * 15-Minuten-Regel auf "Nicht übermittelt" – bewusst nur eine Handvoll.
+ */
+const undeliveredIndexes = new Set([4, 11, 23]);
+
+const types: OrderType[] = ["vorbestellung", "direktanruf"];
+const payments: PaymentMethod[] = ["bar", "ec", "paypal", "kreditkarte"];
+
+/** Deterministischer PRNG, damit Server- und Client-Render identisch sind. */
+function seeded(seed: number) {
+  let s = seed;
+  return () => {
+    s = (s * 1664525 + 1013904223) % 4294967296;
+    return s / 4294967296;
+  };
+}
+
+/**
+ * Erzeugt Demo-Bestellungen relativ zu `now`, damit die jüngsten Aufträge innerhalb
+ * des 15-Minuten-Fensters liegen und ältere als nicht übermittelt gelten.
+ */
+export function createOrders(now: number, count = 42): Order[] {
+  const rand = seeded(20260804);
+
+  return Array.from({ length: count }, (_, i) => {
+    const ageMinutes = i * 6 + Math.floor(rand() * 4);
+    const receivedAt = new Date(now - ageMinutes * 60_000);
+    const dueAt = new Date(receivedAt.getTime() + (20 + Math.floor(rand() * 55)) * 60_000);
+    const fresh = ageMinutes * 60_000 < UNDELIVERED_AFTER_MS;
+    const handled = handledStatuses[Math.floor(rand() * handledStatuses.length)];
+    const open = fresh || undeliveredIndexes.has(i);
+    // Bearbeitete Bestellungen wurden innerhalb der Eskalationsfrist bestätigt.
+    const confirmedAt = open
+      ? undefined
+      : new Date(receivedAt.getTime() + (1 + Math.floor(rand() * 12)) * 60_000).toISOString();
+
+    return {
+      id: `ord_${1000 + i}`,
+      number: count - i,
+      // Frische Bestellungen dürfen offen sein, ältere nur die ausgewählten drei.
+      status: open ? "neu" : handled,
+      type: types[Math.floor(rand() * types.length)],
+      restaurant: restaurants[Math.floor(rand() * restaurants.length)],
+      customer: customers[Math.floor(rand() * customers.length)],
+      receivedAt: receivedAt.toISOString(),
+      dueAt: dueAt.toISOString(),
+      total: Math.round((6 + rand() * 60) * 100) / 100,
+      itemCount: 1 + Math.floor(rand() * 7),
+      payment: payments[Math.floor(rand() * payments.length)],
+      pdfUrl: `/bestellungen/ord_${1000 + i}.pdf`,
+      externalUrl: `https://backoffice.speisekarte24.de/bestellungen/${1000 + i}`,
+      confirmedAt,
+      events: [],
+    } satisfies Order;
+  });
+}

src/lib/format.ts

@@ -0,0 +1,12 @@
+const currency = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });
+const time = new Intl.DateTimeFormat("de-DE", { hour: "2-digit", minute: "2-digit" });
+const date = new Intl.DateTimeFormat("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
+
+export const formatCurrency = (value: number) => currency.format(value);
+export const formatTime = (iso: string) => time.format(new Date(iso));
+export const formatDate = (iso: string) => date.format(new Date(iso));
+
+/** "tel:" bzw. "https://wa.me/" Links brauchen die Nummer ohne Leer- und Sonderzeichen. */
+export const telHref = (phone: string) => `tel:${phone.replace(/[^\d+]/g, "")}`;
+export const whatsAppHref = (phone: string) =>
+  `https://wa.me/${phone.replace(/[^\d]/g, "")}`;

src/lib/timeline.ts

@@ -0,0 +1,151 @@
+import {
+  ATTEMPT_COUNT,
+  ATTEMPT_INTERVAL_MS,
+  UNDELIVERED_AFTER_MS,
+  type Order,
+  type OrderAction,
+} from "./types";
+
+export type StepState =
+  /** Ist passiert. */
+  | "done"
+  /** Steht jetzt an und wartet auf eine Bearbeiterin. */
+  | "due"
+  /** Kommt später automatisch. */
+  | "pending"
+  /** Entfällt, weil der Gastronom vorher bestätigt hat. */
+  | "skipped";
+
+export type TimelineStep = {
+  id: string;
+  label: string;
+  /** Kurzform für die Tabellenspalte. */
+  short: string;
+  description?: string;
+  /** Zeitpunkt des Ereignisses bzw. geplanter Zeitpunkt. */
+  at?: number;
+  state: StepState;
+  /** Eskalationsstufe – wird rot dargestellt. */
+  danger?: boolean;
+  /** Manuelle Schritte tragen die Aktion, die der Button auslöst. */
+  action?: OrderAction;
+};
+
+/**
+ * Eskalationskette einer Bestellung: drei automatische Übermittlungsversuche, danach der
+ * Tag "Nicht übermittelt" und die manuellen Stufen Voice-Message, Direktanruf und SOS.
+ */
+export function buildTimeline(order: Order, now: number): TimelineStep[] {
+  const received = Date.parse(order.receivedAt);
+  const confirmed = order.confirmedAt ? Date.parse(order.confirmedAt) : null;
+  const taggedAt = received + UNDELIVERED_AFTER_MS;
+  const eventAt = (type: OrderAction) => {
+    const event = order.events.find((e) => e.type === type);
+    return event ? Date.parse(event.at) : null;
+  };
+
+  const steps: TimelineStep[] = [
+    {
+      id: "ordered",
+      label: order.type === "vorbestellung" ? "Vorbestellung geplant" : "Bestellung eingegangen",
+      short: order.type === "vorbestellung" ? "Geplant" : "Eingegangen",
+      description:
+        order.type === "vorbestellung"
+          ? `Gewünscht ${new Date(order.dueAt).toLocaleTimeString("de-DE", {
+              hour: "2-digit",
+              minute: "2-digit",
+            })} Uhr`
+          : undefined,
+      at: received,
+      state: "done",
+    },
+  ];
+
+  for (let n = 1; n <= ATTEMPT_COUNT; n++) {
+    const at = received + (n - 1) * ATTEMPT_INTERVAL_MS;
+    steps.push({
+      id: `attempt_${n}`,
+      label: `${n}. Übermittlung an Gastronom`,
+      short: `${n}. Übermittlung`,
+      description: confirmed && confirmed <= at ? "Entfällt – bereits bestätigt" : undefined,
+      at,
+      state: confirmed && confirmed <= at ? "skipped" : now >= at ? "done" : "pending",
+    });
+  }
+
+  if (confirmed) {
+    steps.push({
+      id: "confirmed",
+      label: "Gastronom hat bestätigt",
+      short: "Bestätigt",
+      at: confirmed,
+      state: "done",
+    });
+    return steps;
+  }
+
+  const tagged = now >= taggedAt;
+  steps.push({
+    id: "tagged",
+    label: 'Tag "Nicht übermittelt"',
+    short: "Nicht übermittelt",
+    description: "15 Minuten ohne Reaktion",
+    at: taggedAt,
+    state: tagged ? "done" : "pending",
+    danger: true,
+  });
+
+  const manual: {
+    id: string;
+    label: string;
+    short: string;
+    action: OrderAction;
+    danger?: boolean;
+  }[] = [
+    {
+      id: "voice",
+      label: "Manuelle Voice-Message an Gastronom",
+      short: "Voice-Message",
+      action: "gastronom_voice",
+    },
+    {
+      id: "call",
+      label: "Direktanruf beim Gastronom",
+      short: "Direktanruf",
+      action: "gastronom_anruf",
+    },
+    {
+      id: "sos",
+      label: "SOS: Stornieren & Gastronom für heute schließen",
+      short: "SOS",
+      action: "sos",
+      danger: true,
+    },
+  ];
+
+  let previousDone = tagged;
+  for (const step of manual) {
+    const at = eventAt(step.action);
+    steps.push({
+      ...step,
+      at: at ?? undefined,
+      state: at ? "done" : previousDone ? "due" : "pending",
+    });
+    previousDone = at !== null;
+  }
+
+  return steps;
+}
+
+/**
+ * Der Punkt, an dem die Bestellung gerade steht: der fällige Schritt, sonst der zuletzt
+ * erledigte. Treibt die Verlaufsspalte der Tabelle.
+ */
+export function currentStep(order: Order, now: number): TimelineStep {
+  const steps = buildTimeline(order, now);
+  const due = steps.find((step) => step.state === "due");
+  if (due) return due;
+
+  const done = steps.filter((step) => step.state === "done");
+  return done[done.length - 1] ?? steps[0];
+}

src/lib/types.ts

@@ -0,0 +1,109 @@
+export type OrderStatus =
+  | "neu"
+  | "uebermittelt"
+  | "telefonisch"
+  | "nicht_uebermittelt"
+  | "rueckruf"
+  | "storniert"
+  | "fake";
+
+export type OrderType = "vorbestellung" | "direktanruf";
+
+/** Alles, was eine Bearbeiterin an einer Bestellung auslösen kann. */
+export type OrderAction =
+  | "uebermittelt"
+  | "gastronom_voice"
+  | "gastronom_anruf"
+  | "kunde_anrufen"
+  | "nicht_uebermittelt"
+  | "rueckruf"
+  | "storno"
+  | "fake"
+  | "stornieren"
+  | "sos"
+  | "telefonisch_uebermittelt";
+
+/** Protokolleintrag einer ausgelösten Aktion, treibt die Timeline. */
+export type OrderEvent = { type: OrderAction; at: string };
+
+export type PaymentMethod = "bar" | "ec" | "paypal" | "kreditkarte";
+
+export type Restaurant = {
+  name: string;
+  city: string;
+  /** Öffnungszeiten, z. B. "10:00 bis 23:00" */
+  hours: string;
+  phone1: string;
+  phone2?: string;
+  mobile?: string;
+  orderUrl: string;
+};
+
+export type Customer = {
+  name: string;
+  email: string;
+  phone: string;
+};
+
+export type Order = {
+  id: string;
+  /** Fortlaufende Bestellnummer, wird in der Liste als erste Spalte gezeigt */
+  number: number;
+  status: OrderStatus;
+  type: OrderType;
+  restaurant: Restaurant;
+  customer: Customer;
+  /** Zeitpunkt des Bestelleingangs, ISO-String */
+  receivedAt: string;
+  /** Gewünschte Liefer- bzw. Abholzeit, ISO-String */
+  dueAt: string;
+  total: number;
+  itemCount: number;
+  payment: PaymentMethod;
+  pdfUrl: string;
+  /** Bestellung im externen Backoffice, öffnet in neuem Tab. */
+  externalUrl: string;
+  note?: string;
+  /** Zeitpunkt, zu dem der Gastronom die Bestellung bestätigt hat. */
+  confirmedAt?: string;
+  /** Manuell ausgelöste Schritte, ältester zuerst. */
+  events: OrderEvent[];
+};
+
+export const STATUS_LABEL: Record<OrderStatus, string> = {
+  neu: "Neu",
+  uebermittelt: "Übermittelt",
+  telefonisch: "Telefonisch übermittelt",
+  nicht_uebermittelt: "Nicht übermittelt",
+  rueckruf: "Rückrufhinweis",
+  storniert: "Storniert",
+  fake: "Fake",
+};
+
+export const TYPE_LABEL: Record<OrderType, string> = {
+  vorbestellung: "Vorbestellung",
+  direktanruf: "Direktanruf",
+};
+
+export const PAYMENT_LABEL: Record<PaymentMethod, string> = {
+  bar: "Bar",
+  ec: "EC-Karte",
+  paypal: "PayPal",
+  kreditkarte: "Kreditkarte",
+};
+
+/** Abstand zwischen den drei automatischen Übermittlungsversuchen. */
+export const ATTEMPT_INTERVAL_MS = 5 * 60 * 1000;
+export const ATTEMPT_COUNT = 3;
+
+/** Nach dieser Zeit ohne Bearbeitung gilt eine Bestellung als nicht übermittelt. */
+export const UNDELIVERED_AFTER_MS = 15 * 60 * 1000;
+
+/**
+ * Eine unbearbeitete Bestellung kippt nach {@link UNDELIVERED_AFTER_MS} automatisch auf
+ * `nicht_uebermittelt`. Sobald jemand eine Aktion ausgelöst hat, bleibt der echte Status stehen.
+ */
+export function effectiveStatus(order: Order, now: number): OrderStatus {
+  const overdue = now - new Date(order.receivedAt).getTime() >= UNDELIVERED_AFTER_MS;
+  return order.status === "neu" && overdue ? "nicht_uebermittelt" : order.status;
+}

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