Apply linen design system across app

src/app/dashboard/absence-card.tsx

@@ -3,10 +3,10 @@
 import Link from "next/link";
 import { useMemo, useTransition } from "react";
 import { AbsenceReason } from "@prisma/client";
-import { Baby, CalendarX2, Loader2, Trash2 } from "lucide-react";
+import { Baby, CalendarX2, Check, ChevronRight, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 
-import { deleteAbsence, reportAbsence } from "@/actions/absences";
+import { reportAbsence } from "@/actions/absences";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -43,7 +43,6 @@ type AbsenceListItem = {
 
 export function AbsenceCard({
   childOptions,
-  absences,
   today,
 }: {
   childOptions: ChildOption[];
@@ -69,56 +68,68 @@ export function AbsenceCard({
         return;
       }
 
-      toast.success("Abwesenheit eingetragen.");
-    });
-  }
-
-  function handleDelete(absenceId: string) {
-    startTransition(async () => {
-      const result = await deleteAbsence(absenceId);
-      if (result.error) {
-        toast.error(result.error);
-        return;
-      }
-
-      toast.success("Abwesenheit storniert.");
+      toast.success("Abwesenheit gemeldet. Die Kita ist informiert.");
     });
   }
 
   return (
-    <Card className="mb-8 border-amber-200 bg-amber-50/50">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-lg">
-          <CalendarX2 className="h-5 w-5 text-amber-700" />
-          Kind abmelden
-        </CardTitle>
-        <CardDescription>
-          Melde dein Kind für ganze Tage ab. Die Kita sieht die Meldung direkt
-          in der Tagesübersicht.
-        </CardDescription>
+    <Card variant="featured" className="min-w-0">
+      <CardHeader className="pb-5">
+        <div className="flex items-start gap-3">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+            <CalendarX2 className="h-4 w-4 [stroke-width:1.7]" />
+          </div>
+          <div>
+            <CardTitle>Kind abmelden</CardTitle>
+            <CardDescription className="mt-2 max-w-xl">
+              Melde dein Kind für ganze Tage ab. Die Kita sieht die Meldung
+              sofort in der Tagesübersicht — keine zusätzliche E-Mail nötig.
+            </CardDescription>
+          </div>
+        </div>
       </CardHeader>
-      <CardContent className="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
-        {hasChildren ? (
-          <form action={handleSubmit} className="grid gap-4">
-            <div className="grid gap-2">
-              <Label>Welches Kind?</Label>
-              <Select name="childId" defaultValue={defaultChildId} required>
-                <SelectTrigger>
-                  <SelectValue placeholder="Kind auswählen" />
-                </SelectTrigger>
-                <SelectContent>
-                  {childOptions.map((child) => (
-                    <SelectItem key={child.id} value={child.id}>
-                      {child.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
 
-            <div className="grid gap-3 sm:grid-cols-2">
-              <div className="grid gap-2">
-                <Label htmlFor="absence-startDate">Von</Label>
+      <CardContent>
+        {hasChildren ? (
+          <form action={handleSubmit}>
+            <div className="grid gap-4 md:grid-cols-2">
+              <FieldLabel label="Welches Kind?">
+                <Select name="childId" defaultValue={defaultChildId} required>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Kind auswählen" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {childOptions.map((child) => (
+                      <SelectItem key={child.id} value={child.id}>
+                        {child.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FieldLabel>
+
+              <FieldLabel label="Grund">
+                <Select
+                  name="reason"
+                  defaultValue={AbsenceReason.ILLNESS}
+                  required
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Grund auswählen" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value={AbsenceReason.ILLNESS}>Krank</SelectItem>
+                    <SelectItem value={AbsenceReason.VACATION}>
+                      Urlaub
+                    </SelectItem>
+                    <SelectItem value={AbsenceReason.OTHER}>
+                      Sonstiges
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </FieldLabel>
+
+              <FieldLabel label="Von" htmlFor="absence-startDate">
                 <Input
                   id="absence-startDate"
                   name="startDate"
@@ -126,9 +137,9 @@ export function AbsenceCard({
                   defaultValue={today}
                   required
                 />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="absence-endDate">Bis</Label>
+              </FieldLabel>
+
+              <FieldLabel label="Bis" htmlFor="absence-endDate">
                 <Input
                   id="absence-endDate"
                   name="endDate"
@@ -136,144 +147,198 @@ export function AbsenceCard({
                   defaultValue={today}
                   required
                 />
+              </FieldLabel>
+
+              <div className="grid gap-2 md:col-span-2">
+                <Label
+                  htmlFor="absence-note"
+                  className="text-xs font-semibold text-[var(--ink-soft)]"
+                >
+                  Bemerkung{" "}
+                  <span className="font-medium text-[var(--ink-faint)]">
+                    optional
+                  </span>
+                </Label>
+                <Textarea
+                  id="absence-note"
+                  name="note"
+                  rows={4}
+                  placeholder="z. B. voraussichtlich wieder da am Freitag."
+                />
               </div>
             </div>
 
-            <div className="grid gap-2">
-              <Label>Grund</Label>
-              <Select name="reason" defaultValue={AbsenceReason.ILLNESS} required>
-                <SelectTrigger>
-                  <SelectValue placeholder="Grund auswählen" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value={AbsenceReason.ILLNESS}>Krank</SelectItem>
-                  <SelectItem value={AbsenceReason.VACATION}>Urlaub</SelectItem>
-                  <SelectItem value={AbsenceReason.OTHER}>Sonstiges</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="grid gap-2">
-              <Label htmlFor="absence-note">Bemerkung</Label>
-              <Textarea
-                id="absence-note"
-                name="note"
-                rows={3}
-                placeholder="Optional, z.B. voraussichtlich wieder da am Freitag."
-              />
-            </div>
-
-            <div className="flex justify-end">
+            <div className="mt-7 flex items-center justify-between border-t border-[var(--hairline-soft)] pt-5">
+              <Button type="reset" variant="ghost">
+                Zurücksetzen
+              </Button>
               <Button type="submit" disabled={isPending}>
-                {isPending && <Loader2 className="h-4 w-4 animate-spin" />}
+                {isPending ? <Loader2 className="animate-spin" /> : <Check />}
                 Abwesenheit melden
               </Button>
             </div>
           </form>
         ) : (
-          <div className="flex min-h-72 flex-col items-center justify-center rounded-md border border-dashed bg-background/70 p-6 text-center">
-            <Baby className="h-10 w-10 text-muted-foreground" />
-            <p className="mt-4 font-medium">Noch keine Kinder hinterlegt</p>
-            <p className="mt-1 text-sm text-muted-foreground">
+          <div className="flex min-h-72 flex-col items-center justify-center rounded-[14px] border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-6 text-center">
+            <Baby className="h-10 w-10 text-[var(--ink-muted)]" />
+            <p className="mt-4 font-medium text-[var(--ink)]">
+              Noch keine Kinder hinterlegt
+            </p>
+            <p className="mt-1 text-sm text-[var(--ink-soft)]">
               Lege zuerst deine Kinder im Profil an, dann kannst du sie hier
               abmelden.
             </p>
-            <Button asChild className="mt-4" variant="outline">
+            <Button asChild className="mt-4" variant="ghost">
               <Link href="/dashboard/profil">Zum Profil</Link>
             </Button>
           </div>
         )}
-
-        <div className="rounded-md border bg-background/80 p-4">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <p className="font-medium">Aktuelle & anstehende Meldungen</p>
-            <Badge variant="secondary">{absences.length}</Badge>
-          </div>
-          {absences.length === 0 ? (
-            <p className="text-sm text-muted-foreground">
-              Es sind keine aktuellen oder kommenden Abwesenheiten hinterlegt.
-            </p>
-          ) : (
-            <div className="space-y-3">
-              {absences.map((absence) => (
-                <AbsenceRow
-                  key={absence.id}
-                  absence={absence}
-                  disabled={isPending}
-                  onDelete={handleDelete}
-                />
-              ))}
-            </div>
-          )}
-        </div>
       </CardContent>
     </Card>
   );
 }
 
-function AbsenceRow({
-  absence,
-  disabled,
-  onDelete,
+export function UpcomingAbsencesCard({
+  absences,
 }: {
-  absence: AbsenceListItem;
-  disabled: boolean;
-  onDelete: (id: string) => void;
+  absences: AbsenceListItem[];
 }) {
-  const range = useMemo(() => {
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <CardTitle>Anstehende Meldungen</CardTitle>
+            <CardDescription className="mt-2">
+              Aktuelle und kommende Abwesenheiten deiner Kinder.
+            </CardDescription>
+          </div>
+          <Badge variant="secondary">{absences.length}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {absences.length === 0 ? (
+          <div className="flex min-h-36 flex-col items-center justify-center rounded-[14px] border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-5 text-center">
+            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--good-soft)] text-[var(--good)]">
+              <Check className="h-4 w-4" />
+            </div>
+            <p className="mt-3 text-sm font-medium text-[var(--ink)]">
+              Keine offenen Meldungen
+            </p>
+            <p className="mt-1 text-xs text-[var(--ink-soft)]">
+              Für die nächsten Tage ist alles ruhig.
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-[var(--hairline-soft)]">
+            {absences.map((absence) => (
+              <AbsenceRow key={absence.id} absence={absence} />
+            ))}
+          </div>
+        )}
+
+        <Link
+          href="/dashboard/admin/abwesenheiten"
+          className="mt-4 inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--accent-deep)] transition hover:gap-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
+        >
+          Alle Abwesenheiten
+          <ChevronRight className="h-3.5 w-3.5" />
+        </Link>
+      </CardContent>
+    </Card>
+  );
+}
+
+function FieldLabel({
+  label,
+  htmlFor,
+  children,
+}: {
+  label: string;
+  htmlFor?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid gap-2">
+      <Label
+        htmlFor={htmlFor}
+        className="text-xs font-semibold text-[var(--ink-soft)]"
+      >
+        {label}
+      </Label>
+      {children}
+    </div>
+  );
+}
+
+function AbsenceRow({ absence }: { absence: AbsenceListItem }) {
+  const { day, month, detail } = useMemo(() => {
     const start = new Date(`${absence.startDate}T00:00:00`);
     const end = new Date(`${absence.endDate}T00:00:00`);
-    const startLabel = start.toLocaleDateString("de-DE", {
-      day: "2-digit",
-      month: "2-digit",
-    });
-    const endLabel = end.toLocaleDateString("de-DE", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    });
-    return absence.startDate === absence.endDate
-      ? endLabel
-      : `${startLabel} - ${endLabel}`;
+    const range =
+      absence.startDate === absence.endDate
+        ? "ganztägig"
+        : `${start.toLocaleDateString("de-DE", {
+            day: "2-digit",
+            month: "2-digit",
+          })}-${end.toLocaleDateString("de-DE", {
+            day: "2-digit",
+            month: "2-digit",
+          })}`;
+
+    return {
+      day: start.toLocaleDateString("de-DE", { day: "2-digit" }),
+      month: start
+        .toLocaleDateString("de-DE", { month: "short" })
+        .replace(".", ""),
+      detail: range,
+    };
   }, [absence.endDate, absence.startDate]);
 
   return (
-    <div className="rounded-md border p-3">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <p className="font-medium">{absence.childName}</p>
-          <p className="mt-0.5 text-sm text-muted-foreground">{range}</p>
-        </div>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
-          onClick={() => onDelete(absence.id)}
-          disabled={disabled}
-          aria-label="Abwesenheit stornieren"
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
+    <div className="flex items-center gap-3 py-3">
+      <div className="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] leading-none">
+        <span className="text-base font-medium text-[var(--ink)] [font-variant-numeric:tabular-nums]">
+          {day}
+        </span>
+        <span className="mt-1 text-[10px] font-semibold uppercase text-[var(--ink-muted)]">
+          {month}
+        </span>
       </div>
-      <div className="mt-2 flex flex-wrap items-center gap-2">
-        <ReasonBadge reason={absence.reason} />
-        {absence.note && (
-          <span className="text-xs text-muted-foreground">{absence.note}</span>
-        )}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold text-[var(--ink)]">
+              {absence.childName}
+            </p>
+            <p className="mt-1 flex items-center gap-1.5 text-xs text-[var(--ink-soft)]">
+              <span
+                className="h-1.5 w-1.5 rounded-full"
+                style={{ backgroundColor: reasonColor(absence.reason) }}
+              />
+              {reasonLabel(absence.reason)} · {detail}
+            </p>
+          </div>
+          <Badge variant="destructive">Bestätigt</Badge>
+        </div>
+        {absence.note ? (
+          <p className="mt-1 truncate text-xs text-[var(--ink-muted)]">
+            {absence.note}
+          </p>
+        ) : null}
       </div>
     </div>
   );
 }
 
-function ReasonBadge({ reason }: { reason: AbsenceReason }) {
-  if (reason === AbsenceReason.ILLNESS) {
-    return <Badge variant="destructive">Krank</Badge>;
-  }
-
-  if (reason === AbsenceReason.VACATION) {
-    return <Badge variant="warning">Urlaub</Badge>;
-  }
-
-  return <Badge variant="outline">Sonstiges</Badge>;
+function reasonLabel(reason: AbsenceReason) {
+  if (reason === AbsenceReason.ILLNESS) return "Krank";
+  if (reason === AbsenceReason.VACATION) return "Urlaub";
+  return "Sonstiges";
+}
+
+function reasonColor(reason: AbsenceReason) {
+  if (reason === AbsenceReason.ILLNESS) return "var(--danger)";
+  if (reason === AbsenceReason.VACATION) return "var(--warn)";
+  return "var(--accent)";
 }