continued the kita-planer

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useTransition } from "react";
-import { MitbringselItem } from "@prisma/client";
 import { Trash2, Plus, Utensils } from "lucide-react";
 import { toast } from "sonner";
 
@@ -9,7 +8,10 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { addMitbringsel, deleteMitbringsel } from "../actions";
 
-type ItemWithUser = MitbringselItem & {
+type MitbringselItemDto = {
+  id: string;
+  userId: string;
+  content: string;
   user: { firstName: string; lastName: string };
 };
 
@@ -20,7 +22,7 @@ export function MitbringselList({
   isAdmin,
 }: {
   terminId: string;
-  items: ItemWithUser[];
+  items: MitbringselItemDto[];
   currentUserId: string;
   isAdmin: boolean;
 }) {

src/app/dashboard/kalender/_components/pending-anfragen.tsx

@@ -5,17 +5,20 @@ import { format } from "date-fns";
 import { de } from "date-fns/locale";
 import { Check, X, Clock, CalendarIcon } from "lucide-react";
 import { toast } from "sonner";
-import { Termin, User } from "@prisma/client";
 
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { approveTermin, rejectTermin } from "../actions";
 
-type PendingTermin = Termin & {
+export type PendingTerminDto = {
+  id: string;
+  title: string;
+  startDate: Date;
+  allDay: boolean;
   createdBy: { firstName: string; lastName: string } | null;
 };
 
-export function PendingAnfragen({ termine }: { termine: PendingTermin[] }) {
+export function PendingAnfragen({ termine }: { termine: PendingTerminDto[] }) {
   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">
@@ -37,7 +40,7 @@ export function PendingAnfragen({ termine }: { termine: PendingTermin[] }) {
   );
 }
 
-function PendingTerminCard({ termin }: { termin: PendingTermin }) {
+function PendingTerminCard({ termin }: { termin: PendingTerminDto }) {
   const [isPending, startTransition] = useTransition();
 
   const handleApprove = () => {

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;
 }) {