feat: display published Notdienst assignments in appointment calendar with custom styling for own assignments

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

@@ -12,6 +12,7 @@ import {
   MoreHorizontal,
   WashingMachine,
   Trash2,
+  ShieldAlert,
 } from "lucide-react";
 import { toast } from "sonner";
 
@@ -64,7 +65,18 @@ export type DutyCalendarItemDto = {
   endDate: Date;
 };
 
-export type CalendarListItemDto = TerminListItemDto | DutyCalendarItemDto;
+export type NotdienstCalendarItemDto = {
+  kind: "notdienst";
+  id: string;
+  title: string;
+  familyName: string;
+  childName: string;
+  isOwn: boolean;
+  startDate: Date;
+  endDate: Date;
+};
+
+export type CalendarListItemDto = TerminListItemDto | DutyCalendarItemDto | NotdienstCalendarItemDto;
 
 export function TerminList({
   termine,
@@ -123,6 +135,8 @@ export function TerminList({
               {group.items.map((item) =>
                 item.kind === "duty" ? (
                   <DutyRow key={`duty-${item.id}`} duty={item} isAdmin={isAdmin} />
+                ) : item.kind === "notdienst" ? (
+                  <NotdienstRow key={`notdienst-${item.id}`} notdienst={item} isAdmin={isAdmin} />
                 ) : (
                   <TerminRow key={`termin-${item.id}`} termin={item} userId={userId} isAdmin={isAdmin} />
                 ),
@@ -474,3 +488,64 @@ function getTypeLabel(type: TerminType): string {
       return "Sonstiges";
   }
 }
+
+function NotdienstRow({ notdienst, isAdmin }: { notdienst: NotdienstCalendarItemDto; isAdmin: boolean }) {
+  const color = notdienst.isOwn ? "oklch(0.60 0.18 45)" : "oklch(0.75 0.10 50)";
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <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={notdienst.startDate} />
+      <div className="min-w-0">
+        <h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
+          {notdienst.title}
+        </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(notdienst.startDate, "dd.MM.yyyy", { locale: de })} (ganztägig)
+          <span className="inline-flex items-center gap-1">
+            <span className="h-1.5 w-1.5 rounded-full bg-[var(--ink-muted)]" />
+            Kind: {notdienst.childName}
+          </span>
+        </p>
+      </div>
+      <div className="flex items-center gap-2 relative">
+        <CategoryPill color={color}>
+          {notdienst.isOwn ? "Mein Notdienst" : "Notdienst"}
+        </CategoryPill>
+        {isAdmin ? (
+          <div className="relative">
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="Mehr Optionen"
+              onClick={(e) => {
+                e.stopPropagation();
+                setMenuOpen(!menuOpen);
+              }}
+            >
+              <MoreHorizontal className="h-4 w-4 [stroke-width:1.7]" />
+            </Button>
+            {menuOpen && (
+              <>
+                <div className="fixed inset-0 z-40" onClick={() => setMenuOpen(false)} />
+                <div className="absolute right-0 mt-1 w-56 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-1.5 shadow-lg z-50 animate-in fade-in-50 slide-in-from-top-1 duration-150">
+                  <a
+                    href="/dashboard/notdienst/plan"
+                    className="flex w-full items-center rounded-lg px-2.5 py-2 text-sm text-[var(--ink)] hover:bg-[var(--surface-2)]"
+                    onClick={() => setMenuOpen(false)}
+                  >
+                    Notdienst im Planer bearbeiten
+                  </a>
+                </div>
+              </>
+            )}
+          </div>
+        ) : (
+          <div className="w-9 h-9" />
+        )}
+      </div>
+    </div>
+  );
+}