Apply linen design system across app

src/app/dashboard/kalender/_components/termin-list.tsx

@@ -3,17 +3,18 @@
 import { DutyAssignmentStatus, TerminStatus, TerminType } from "@prisma/client";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { AlertTriangle, AlignLeft, Calendar, Clock, WashingMachine } from "lucide-react";
+import {
+  AlertTriangle,
+  Calendar,
+  Clock,
+  MapPin,
+  MoreHorizontal,
+  WashingMachine,
+} from "lucide-react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { MitbringselList } from "./mitbringsel-list";
-import { toggleMitbringselList } from "../actions";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { useTransition } from "react";
-import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -22,6 +23,8 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { AdminTerminModal } from "./admin-termin-modal";
+import { TerminRequestModal } from "./termin-request-modal";
 
 export type TerminListItemDto = {
   kind: "termin";
@@ -59,7 +62,6 @@ export type CalendarListItemDto = TerminListItemDto | DutyCalendarItemDto;
 
 export function TerminList({
   termine,
-  userId,
   isAdmin,
 }: {
   termine: CalendarListItemDto[];
@@ -68,169 +70,130 @@ export function TerminList({
 }) {
   if (termine.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center animate-in fade-in-50">
-        <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
-          <Calendar className="h-10 w-10 text-muted-foreground mb-4" />
-          <h3 className="mt-4 text-lg font-semibold">Keine Termine</h3>
-          <p className="mb-4 mt-2 text-sm text-muted-foreground">
-            Es stehen aktuell keine Termine an.
+      <Card>
+        <CardContent className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-6 py-12 text-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+            <Calendar className="h-6 w-6 [stroke-width:1.7]" />
+          </div>
+          <h3 className="mt-5 text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+            Keine Termine in diesem Zeitraum
+          </h3>
+          <p className="mt-2 max-w-md text-sm leading-6 text-[var(--ink-soft)]">
+            Lege den ersten Termin an, damit Eltern planen können.
           </p>
-        </div>
-      </div>
+          <div className="mt-5">
+            {isAdmin ? (
+              <AdminTerminModal triggerLabel="+ Termin anlegen" triggerClassName="" />
+            ) : (
+              <TerminRequestModal
+                triggerLabel="+ Termin anlegen"
+                triggerVariant="default"
+                triggerClassName=""
+              />
+            )}
+          </div>
+        </CardContent>
+      </Card>
     );
   }
 
+  const groups = groupByMonth(termine);
+
   return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-      {termine.map((termin) => (
-        termin.kind === "duty" ? (
-          <DutyCard key={`duty-${termin.id}`} duty={termin} />
-        ) : (
-          <TerminCard
-            key={`termin-${termin.id}`}
-            termin={termin}
-            userId={userId}
-            isAdmin={isAdmin}
-          />
-        )
+    <div className="space-y-8">
+      {groups.map((group) => (
+        <section key={group.key}>
+          <div className="mb-3 flex items-center justify-between gap-3">
+            <h2 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+              {group.label}
+            </h2>
+            <span className="rounded-full border border-[var(--hairline)] bg-[var(--surface-2)] px-2.5 py-1 text-[11px] font-semibold text-[var(--ink-soft)] tabular-nums">
+              {group.items.length} {group.items.length === 1 ? "Termin" : "Termine"}
+            </span>
+          </div>
+          <Card className="overflow-hidden p-0">
+            <div className="divide-y divide-[var(--hairline-soft)]">
+              {group.items.map((item) =>
+                item.kind === "duty" ? (
+                  <DutyRow key={`duty-${item.id}`} duty={item} />
+                ) : (
+                  <TerminRow key={`termin-${item.id}`} termin={item} />
+                ),
+              )}
+            </div>
+          </Card>
+        </section>
       ))}
     </div>
   );
 }
 
-function DutyCard({ duty }: { duty: DutyCalendarItemDto }) {
+function DutyRow({ duty }: { duty: DutyCalendarItemDto }) {
+  const color = "var(--good)";
+
   return (
-    <Card className="flex flex-col overflow-hidden border-emerald-200 bg-emerald-50/60">
-      <CardHeader className="pb-3">
-        <div className="mb-2 flex items-start justify-between gap-2">
-          <Badge className="border-transparent bg-emerald-600 text-white hover:bg-emerald-700">
-            Elterndienst
-          </Badge>
-        </div>
-        <CardTitle className="line-clamp-2 leading-tight">
+    <div className="relative grid grid-cols-[56px_minmax(0,1fr)_auto] items-center gap-4 px-5 py-4 transition-colors hover:bg-[var(--surface-2)]">
+      <div className="absolute inset-y-3 left-0 w-[3px] rounded-r-full" style={{ backgroundColor: color }} />
+      <DateTile date={duty.startDate} />
+      <div className="min-w-0">
+        <h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
           {duty.title}
-        </CardTitle>
-        <CardDescription className="mt-1 flex items-center gap-1 text-sm">
-          <Clock className="h-3.5 w-3.5" />
+        </h3>
+        <p className="mt-1 flex flex-wrap items-center gap-2 text-[13px] text-[var(--ink-soft)]">
+          <Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
           {format(duty.startDate, "dd.MM.", { locale: de })} -{" "}
           {format(duty.endDate, "dd.MM.yyyy", { locale: de })}
-        </CardDescription>
-      </CardHeader>
-
-      <CardContent className="flex-1 pb-4">
-        <div className="flex items-start gap-2 text-sm text-emerald-900">
-          <WashingMachine className="mt-0.5 h-4 w-4 shrink-0" />
-          <p>
-            Eingeteilt: <span className="font-medium">{duty.familyName}</span>
-          </p>
-        </div>
-      </CardContent>
-    </Card>
+          <WashingMachine className="ml-1 h-3.5 w-3.5 [stroke-width:1.7]" />
+          {duty.familyName}
+        </p>
+      </div>
+      <div className="flex items-center gap-2">
+        <CategoryPill color={color}>Elterndienst</CategoryPill>
+        <Button variant="ghost" size="icon" aria-label="Mehr Optionen">
+          <MoreHorizontal className="h-4 w-4 [stroke-width:1.7]" />
+        </Button>
+      </div>
+    </div>
   );
 }
 
-function TerminCard({
-  termin,
-  userId,
-  isAdmin,
-}: {
-  termin: TerminListItemDto;
-  userId: string;
-  isAdmin: boolean;
-}) {
-  const [isPending, startTransition] = useTransition();
+function TerminRow({ termin }: { termin: TerminListItemDto }) {
+  const color = getTypeColor(termin.type);
 
-  const handleToggleMitbringsel = (enabled: boolean) => {
-    startTransition(async () => {
-      const result = await toggleMitbringselList(termin.id, enabled);
-      if (result.error) {
-        toast.error(result.error);
-      } else {
-        toast.success(
-          enabled
-            ? "Mitbring-Liste aktiviert"
-            : "Mitbring-Liste deaktiviert"
-        );
-      }
-    });
-  };
-
-  return (
-    <Card className="flex flex-col overflow-hidden relative">
-      {termin.status === TerminStatus.PENDING && (
-        <div className="absolute top-0 right-0 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded-bl-lg z-10">
-          Ausstehend
-        </div>
-      )}
-      <CardHeader className="pb-3">
-        <div className="flex justify-between items-start mb-2 gap-2">
-          <Badge variant={getBadgeVariant(termin.type)} className={getBadgeColor(termin.type)}>
-            {getTypeLabel(termin.type)}
-          </Badge>
-        </div>
-        <CardTitle className="line-clamp-2 leading-tight">{termin.title}</CardTitle>
-        <CardDescription className="flex items-center gap-1 mt-1 text-sm">
-          <Clock className="h-3.5 w-3.5" />
-          {format(termin.startDate, "PP", { locale: de })}
-          {!termin.allDay && (
-            <>
-              {" • "}
-              {format(termin.startDate, "p", { locale: de })} -{" "}
-              {format(termin.endDate, "p", { locale: de })}
-            </>
-          )}
-        </CardDescription>
-      </CardHeader>
-
-      <CardContent className="flex-1 pb-4">
-        {termin.description && (
-          <div className="flex items-start gap-2 text-sm text-muted-foreground mt-2">
-            <AlignLeft className="h-4 w-4 shrink-0 mt-0.5" />
-            <p className="line-clamp-3 whitespace-pre-wrap">{termin.description}</p>
-          </div>
-        )}
-
-        <TerminDetailDialog termin={termin} />
-
-        {/* Admin Toggle for Mitbringsel-List */}
-        {isAdmin && termin.status === TerminStatus.CONFIRMED && (
-          <div className="flex items-center space-x-2 mt-6 pt-4 border-t">
-            <Switch
-              id={`mitbringsel-${termin.id}`}
-              checked={termin.mitbringselListEnabled}
-              onCheckedChange={handleToggleMitbringsel}
-              disabled={isPending}
-            />
-            <Label htmlFor={`mitbringsel-${termin.id}`} className="text-xs">
-              Mitbring-Liste aktiv
-            </Label>
-          </div>
-        )}
-
-        {/* Mitbringsel-List UI */}
-        {termin.mitbringselListEnabled && termin.status === TerminStatus.CONFIRMED && (
-          <div className="mt-4">
-            <MitbringselList
-              terminId={termin.id}
-              items={termin.mitbringselItems || []}
-              currentUserId={userId}
-              isAdmin={isAdmin}
-            />
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-function TerminDetailDialog({ termin }: { termin: TerminListItemDto }) {
   return (
     <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm" className="mt-4">
-          Details
-        </Button>
-      </DialogTrigger>
+      <div className="relative grid grid-cols-[56px_minmax(0,1fr)_auto] items-center gap-4 px-5 py-4 transition-colors hover:bg-[var(--surface-2)]">
+        <div className="absolute inset-y-3 left-0 w-[3px] rounded-r-full" style={{ backgroundColor: color }} />
+        <DateTile date={termin.startDate} />
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
+              {termin.title}
+            </h3>
+            {termin.status === TerminStatus.PENDING && (
+              <Badge variant="warning">Ausstehend</Badge>
+            )}
+          </div>
+          <p className="mt-1 flex flex-wrap items-center gap-2 text-[13px] text-[var(--ink-soft)]">
+            <Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
+            {formatTerminTime(termin)}
+            <MapPin className="ml-1 h-3.5 w-3.5 [stroke-width:1.7]" />
+            Kita
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <CategoryPill color={color}>{getTypeLabel(termin.type)}</CategoryPill>
+          <DialogTrigger asChild>
+            <Button variant="ghost" size="sm">
+              Details
+            </Button>
+          </DialogTrigger>
+          <Button variant="ghost" size="icon" aria-label="Mehr Optionen">
+            <MoreHorizontal className="h-4 w-4 [stroke-width:1.7]" />
+          </Button>
+        </div>
+      </div>
+
       <DialogContent>
         <DialogHeader>
           <DialogTitle>{termin.title}</DialogTitle>
@@ -246,24 +209,22 @@ function TerminDetailDialog({ termin }: { termin: TerminListItemDto }) {
         </DialogHeader>
 
         <div className="grid gap-4">
-          <Badge variant={getBadgeVariant(termin.type)} className={getBadgeColor(termin.type)}>
-            {getTypeLabel(termin.type)}
-          </Badge>
+          <CategoryPill color={color}>{getTypeLabel(termin.type)}</CategoryPill>
 
           {termin.description ? (
-            <p className="whitespace-pre-wrap text-sm text-muted-foreground">
+            <p className="whitespace-pre-wrap text-sm leading-6 text-[var(--ink-soft)]">
               {termin.description}
             </p>
           ) : (
-            <p className="text-sm text-muted-foreground">
+            <p className="text-sm italic text-[var(--ink-faint)]">
               Keine Beschreibung hinterlegt.
             </p>
           )}
 
           {termin.participantInfo && termin.showParticipantInfo && (
-            <div className="rounded-md border border-yellow-300 bg-yellow-50 p-4 text-sm text-yellow-950">
+            <div className="rounded-lg border border-[var(--warn)] bg-[var(--warn-soft)] p-4 text-sm text-[var(--ink)]">
               <div className="mb-1 flex items-center gap-2 font-medium">
-                <AlertTriangle className="h-4 w-4 text-yellow-700" />
+                <AlertTriangle className="h-4 w-4 text-[var(--warn)] [stroke-width:1.7]" />
                 Wichtiger Hinweis für Teilnehmer
               </div>
               <p className="whitespace-pre-wrap">{termin.participantInfo}</p>
@@ -275,42 +236,77 @@ function TerminDetailDialog({ termin }: { termin: TerminListItemDto }) {
   );
 }
 
-function getBadgeVariant(type: TerminType): "default" | "secondary" | "destructive" | "outline" {
-  switch (type) {
-    case TerminType.KITA_FEST:
-    case TerminType.MITMACH_TAG:
-      return "default";
-    case TerminType.SCHLIESSTAG:
-    case TerminType.TEAMTAG:
-      return "destructive";
-    case TerminType.GEBURTSTAG_INTERN:
-    case TerminType.GEBURTSTAG_EXTERN:
-    case TerminType.ELTERNABEND:
-    case TerminType.MITGLIEDERVERSAMMLUNG:
-    case TerminType.ELTERNCAFE:
-      return "secondary";
-    default:
-      return "outline";
-  }
+function DateTile({ date }: { date: Date }) {
+  return (
+    <div className="flex h-14 w-14 flex-col items-center justify-center rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)]">
+      <span className="text-[22px] font-medium leading-none tracking-[-0.02em] text-[var(--ink)] tabular-nums">
+        {format(date, "d", { locale: de })}
+      </span>
+      <span className="mt-1 text-[10px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.08em]">
+        {format(date, "EEE", { locale: de })}
+      </span>
+    </div>
+  );
 }
 
-function getBadgeColor(type: TerminType): string {
+function CategoryPill({
+  color,
+  children,
+}: {
+  color: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 rounded-full border border-[var(--hairline)] bg-[var(--surface-2)] px-2.5 py-1 text-[11px] font-semibold text-[var(--ink-soft)]"
+      style={{ color }}
+    >
+      <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: color }} />
+      {children}
+    </span>
+  );
+}
+
+function groupByMonth(items: CalendarListItemDto[]) {
+  const groups = new Map<string, { key: string; label: string; items: CalendarListItemDto[] }>();
+
+  items.forEach((item) => {
+    const key = format(item.startDate, "yyyy-MM");
+    const label = format(item.startDate, "MMMM yyyy", { locale: de });
+    const group = groups.get(key) ?? { key, label, items: [] };
+    group.items.push(item);
+    groups.set(key, group);
+  });
+
+  return Array.from(groups.values());
+}
+
+function formatTerminTime(termin: TerminListItemDto) {
+  if (termin.allDay) return "ganztägig";
+  return `${format(termin.startDate, "HH:mm", { locale: de })} - ${format(
+    termin.endDate,
+    "HH:mm",
+    { locale: de },
+  )}`;
+}
+
+function getTypeColor(type: TerminType): string {
   switch (type) {
     case TerminType.KITA_FEST:
     case TerminType.MITMACH_TAG:
-      return "bg-amber-500 hover:bg-amber-600 text-white border-transparent";
+      return "var(--good)";
     case TerminType.SCHLIESSTAG:
     case TerminType.TEAMTAG:
-      return "bg-rose-500 hover:bg-rose-600 text-white border-transparent";
+      return "var(--danger)";
     case TerminType.GEBURTSTAG_INTERN:
     case TerminType.GEBURTSTAG_EXTERN:
-      return "bg-blue-500 hover:bg-blue-600 text-white border-transparent";
+      return "oklch(0.50 0.10 320)";
     case TerminType.ELTERNABEND:
     case TerminType.MITGLIEDERVERSAMMLUNG:
     case TerminType.ELTERNCAFE:
-      return "bg-purple-500 hover:bg-purple-600 text-white border-transparent";
+      return "oklch(0.50 0.10 280)";
     default:
-      return "bg-slate-200 text-slate-800 border-slate-300 dark:bg-slate-800 dark:text-slate-200 dark:border-slate-700";
+      return "var(--ink-muted)";
   }
 }
 
@@ -323,7 +319,7 @@ function getTypeLabel(type: TerminType): string {
     case TerminType.SCHLIESSTAG:
       return "Schließtag";
     case TerminType.TEAMTAG:
-      return "Teamtag (Kita geschlossen)";
+      return "Teamtag";
     case TerminType.ELTERNABEND:
       return "Elternabend";
     case TerminType.MITGLIEDERVERSAMMLUNG:
@@ -331,9 +327,9 @@ function getTypeLabel(type: TerminType): string {
     case TerminType.ELTERNCAFE:
       return "Elterncafe";
     case TerminType.GEBURTSTAG_INTERN:
-      return "Geburtstag (Intern)";
+      return "Geburtstag";
     case TerminType.GEBURTSTAG_EXTERN:
-      return "Raumanfrage (Extern)";
+      return "Raumanfrage";
     default:
       return "Sonstiges";
   }