Kita/kita-planer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
t.indorf
2026-05-21 13:04:52 +02:00
parent 9915c8213e
commit 339563bf4d
3 changed files with 223 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/dashboard/kalender/_components/calendar-overview-client.tsx
+106 -12
View File
@@ -62,6 +62,8 @@ const categories = [
{ label: "Fest", type: TerminType.KITA_FEST, color: "var(--good)" },
{ label: "Geburtstag", type: TerminType.GEBURTSTAG_INTERN, color: "oklch(0.50 0.10 320)" },
{ label: "Elterndienst", type: "elterndienst", color: "oklch(0.60 0.15 160)" },
{ label: "Mein Notdienst", type: "mein-notdienst", color: "oklch(0.60 0.18 45)" },
{ label: "Notdienst", type: "notdienst", color: "oklch(0.75 0.10 50)" },
{ label: "Sonstiges", type: TerminType.SONSTIGES, color: "var(--ink-muted)" },
];
@@ -113,15 +115,26 @@ export function CalendarOverviewClient({
? item.description.toLowerCase().includes(query)
: false;
const familyMatch =
item.kind === "duty" && item.familyName
(item.kind === "duty" || item.kind === "notdienst") && item.familyName
? item.familyName.toLowerCase().includes(query)
: false;
if (!titleMatch && !descMatch && !familyMatch) return false;
const childMatch =
item.kind === "notdienst" && item.childName
? item.childName.toLowerCase().includes(query)
: false;
if (!titleMatch && !descMatch && !familyMatch && !childMatch) return false;
}
// 2. Category filter
if (activeTypes.size > 0) {
const itemType = item.kind === "duty" ? "elterndienst" : item.type;
const itemType =
item.kind === "duty"
? "elterndienst"
: item.kind === "notdienst"
? item.isOwn
? "mein-notdienst"
: "notdienst"
: item.type;
if (!activeTypes.has(itemType)) return false;
}
@@ -309,6 +322,59 @@ export function CalendarOverviewClient({
)}
</div>
</div>
) : item.kind === "notdienst" ? (
<div className="flex items-start gap-3">
<div
className="absolute inset-y-3 left-0 w-[4px] rounded-r-full"
style={{
backgroundColor: item.isOwn
? "oklch(0.60 0.18 45)"
: "oklch(0.75 0.10 50)",
}}
/>
<div className="pl-2 flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
<h4 className="font-semibold text-[15px] text-[var(--ink)] truncate">
{item.title}
</h4>
<Badge
variant="secondary"
style={{
color: item.isOwn
? "oklch(0.60 0.18 45)"
: "oklch(0.75 0.10 50)",
borderColor:
(item.isOwn
? "oklch(0.60 0.18 45)"
: "oklch(0.75 0.10 50)") + "44",
backgroundColor:
(item.isOwn
? "oklch(0.60 0.18 45)"
: "oklch(0.75 0.10 50)") + "11",
}}
className="border text-[10px]"
>
{item.isOwn ? "Mein Notdienst" : "Notdienst"}
</Badge>
</div>
<p className="mt-1 text-sm text-[var(--ink-soft)]">
Kind: {item.childName} (Familie: {item.familyName})
</p>
<p className="mt-1 text-xs text-[var(--ink-muted)] flex items-center gap-1">
<Clock className="h-3.5 w-3.5" />
{format(new Date(item.startDate), "dd.MM.yyyy")}
</p>
{isAdmin && (
<div className="mt-3 flex gap-2">
<a href="/dashboard/notdienst/plan">
<Button size="sm" variant="outline" className="h-7 text-xs px-2.5">
Im Planer bearbeiten
</Button>
</a>
</div>
)}
</div>
</div>
) : (
<div className="flex items-start gap-3">
<div
@@ -539,6 +605,10 @@ function MonthView({
const color =
item.kind === "duty"
? "oklch(0.60 0.15 160)"
: item.kind === "notdienst"
? item.isOwn
? "oklch(0.60 0.18 45)"
: "oklch(0.75 0.10 50)"
: getCategoryColor(item.type);
return (
<div
@@ -632,8 +702,14 @@ function AgendaView({
{/* Items stack on right */}
<div className="space-y-3">
{group.items.map((item) => {
const isTermin = item.kind === "termin";
const color = isTermin ? getCategoryColor(item.type) : "oklch(0.60 0.15 160)";
const color =
item.kind === "termin"
? getCategoryColor(item.type)
: item.kind === "notdienst"
? item.isOwn
? "oklch(0.60 0.18 45)"
: "oklch(0.75 0.10 50)"
: "oklch(0.60 0.15 160)";
return (
<div
@@ -650,7 +726,7 @@ function AgendaView({
<h4 className="font-bold text-[15px] text-[var(--ink)] truncate">
{item.title}
</h4>
{isTermin ? (
{item.kind === "termin" ? (
<span
className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold border"
style={{
@@ -661,34 +737,52 @@ function AgendaView({
>
{getTypeLabel(item.type)}
</span>
) : item.kind === "notdienst" ? (
<Badge
variant="secondary"
className="text-[10px]"
style={{
color,
borderColor: color + "44",
backgroundColor: color + "11",
}}
>
{item.isOwn ? "Mein Notdienst" : "Notdienst"}
</Badge>
) : (
<Badge variant="secondary" className="bg-[oklch(0.95_0.02_160)] text-[oklch(0.40_0.10_160)] text-[10px]">
Elterndienst
</Badge>
)}
{isTermin && item.status === TerminStatus.PENDING && (
{item.kind === "termin" && item.status === TerminStatus.PENDING && (
<Badge variant="warning" className="text-[10px]">Ausstehend</Badge>
)}
</div>
<p className="mt-1 text-xs text-[var(--ink-muted)] flex items-center gap-1.5">
<Clock className="h-3.5 w-3.5" />
{isTermin
{item.kind === "termin"
? item.allDay
? "Ganztägig"
: `${format(new Date(item.startDate), "HH:mm")} - ${format(
new Date(item.endDate),
"HH:mm",
)}`
: item.kind === "notdienst"
? `${format(new Date(item.startDate), "dd.MM.yyyy")} (ganztägig)`
: `${format(new Date(item.startDate), "dd.MM.")} - ${format(
new Date(item.endDate),
"dd.MM.yyyy",
)}`}
{isTermin && <MapPin className="ml-1 h-3.5 w-3.5" />}
{isTermin ? "Kita" : `Familie: ${item.familyName}`}
{item.kind === "termin" && <MapPin className="ml-1 h-3.5 w-3.5" />}
{item.kind === "termin"
? "Kita"
: item.kind === "notdienst"
? `Kind: ${item.childName} · Familie: ${item.familyName}`
: `Familie: ${item.familyName}`}
</p>
{isTermin && item.description && (
{item.kind === "termin" && item.description && (
<p className="mt-2 text-sm text-[var(--ink-soft)] line-clamp-2 leading-relaxed">
{item.description}
</p>
@@ -697,7 +791,7 @@ function AgendaView({
</div>
{/* Actions for admins */}
{isAdmin && isTermin && (
{isAdmin && item.kind === "termin" && (
<div className="flex gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
<AdminTerminModal
existingTermin={item}
src/app/dashboard/kalender/_components/termin-list.tsx
+76 -1
View File
@@ -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>
);
}
src/app/dashboard/kalender/page.tsx
+41
View File
@@ -148,6 +148,32 @@ export default async function KalenderPage({
orderBy: { startDate: "asc" },
});
const notdienstAssignmentRows = await prisma.notdienstAssignment.findMany({
where: {
kitaId: session.user.kitaId,
plan: {
status: "PUBLISHED",
},
},
select: {
id: true,
date: true,
child: {
select: {
firstName: true,
lastName: true,
familyId: true,
family: {
select: {
name: true,
},
},
},
},
},
orderBy: { date: "asc" },
});
const allUserTermine: CalendarListItemDto[] = [
...confirmedTermineRows.map((termin) => ({
...termin,
@@ -178,6 +204,21 @@ export default async function KalenderPage({
startDate: assignment.startDate,
endDate: assignment.endDate,
})),
...notdienstAssignmentRows.map((assignment) => {
const isOwn = assignment.child.familyId === familyIdForParticipation;
return {
kind: "notdienst" as const,
id: assignment.id,
title: isOwn
? `Mein Notdienst (${assignment.child.firstName})`
: `Notdienst (${assignment.child.family.name})`,
familyName: assignment.child.family.name,
childName: `${assignment.child.firstName} ${assignment.child.lastName}`,
isOwn,
startDate: assignment.date,
endDate: assignment.date,
};
}),
].sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
let allPendingTermine: PendingTerminDto[] = [];