continued the kita-planer

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

@@ -1,11 +1,11 @@
 "use client";
 
-import { Termin, MitbringselItem, TerminType, TerminStatus } from "@prisma/client";
+import { DutyAssignmentStatus, TerminStatus, TerminType } from "@prisma/client";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { Calendar, Clock, MapPin, AlignLeft } from "lucide-react";
+import { AlignLeft, Calendar, Clock, WashingMachine } from "lucide-react";
 
-import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
+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";
@@ -14,18 +14,43 @@ import { Label } from "@/components/ui/label";
 import { useTransition } from "react";
 import { toast } from "sonner";
 
-type TerminWithItems = Termin & {
-  mitbringselItems?: (MitbringselItem & {
+export type TerminListItemDto = {
+  kind: "termin";
+  id: string;
+  title: string;
+  description: string | null;
+  type: TerminType;
+  status: TerminStatus;
+  startDate: Date;
+  endDate: Date;
+  allDay: boolean;
+  mitbringselListEnabled: boolean;
+  mitbringselItems?: {
+    id: string;
+    userId: string;
+    content: string;
     user: { firstName: string; lastName: string };
-  })[];
+  }[];
 };
 
+export type DutyCalendarItemDto = {
+  kind: "duty";
+  id: string;
+  title: string;
+  familyName: string;
+  status: DutyAssignmentStatus;
+  startDate: Date;
+  endDate: Date;
+};
+
+export type CalendarListItemDto = TerminListItemDto | DutyCalendarItemDto;
+
 export function TerminList({
   termine,
   userId,
   isAdmin,
 }: {
-  termine: TerminWithItems[];
+  termine: CalendarListItemDto[];
   userId: string;
   isAdmin: boolean;
 }) {
@@ -46,23 +71,58 @@ export function TerminList({
   return (
     <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
       {termine.map((termin) => (
-        <TerminCard
-          key={termin.id}
-          termin={termin}
-          userId={userId}
-          isAdmin={isAdmin}
-        />
+        termin.kind === "duty" ? (
+          <DutyCard key={`duty-${termin.id}`} duty={termin} />
+        ) : (
+          <TerminCard
+            key={`termin-${termin.id}`}
+            termin={termin}
+            userId={userId}
+            isAdmin={isAdmin}
+          />
+        )
       ))}
     </div>
   );
 }
 
+function DutyCard({ duty }: { duty: DutyCalendarItemDto }) {
+  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">
+          {duty.title}
+        </CardTitle>
+        <CardDescription className="mt-1 flex items-center gap-1 text-sm">
+          <Clock className="h-3.5 w-3.5" />
+          {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>
+  );
+}
+
 function TerminCard({
   termin,
   userId,
   isAdmin,
 }: {
-  termin: TerminWithItems;
+  termin: TerminListItemDto;
   userId: string;
   isAdmin: boolean;
 }) {