45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { MonthCalendar, type CalendarMarker } from "./MonthCalendar";
|
|
import { BookingCard } from "./BookingCard";
|
|
import { resolveDisplayStatus } from "./BookingStatusBadge";
|
|
import type { MeetingSetting } from "@/payload-types";
|
|
import type { CustomerBooking } from "@/lib/booking/customerView";
|
|
import { berlinDateKey } from "@/lib/calendar/timezone";
|
|
import { getBookingMeetingStatus } from "@/lib/booking/meetingAccess";
|
|
|
|
export function PersonalCalendar({ bookings, meetingSettings }: { bookings: CustomerBooking[]; meetingSettings: MeetingSetting }) {
|
|
const [selectedDay, setSelectedDay] = useState<Date | null>(null);
|
|
|
|
const markers: CalendarMarker[] = bookings.map((b) => ({
|
|
date: new Date(b.date),
|
|
status: resolveDisplayStatus(b.status, b.endTime) as CalendarMarker["status"],
|
|
}));
|
|
|
|
const selectedBookings = selectedDay
|
|
? bookings.filter((b) => berlinDateKey(new Date(b.date)) === berlinDateKey(selectedDay))
|
|
: [];
|
|
|
|
return (
|
|
<div className="grid gap-8 lg:grid-cols-[minmax(0,360px)_1fr]">
|
|
<MonthCalendar markers={markers} onSelectDay={setSelectedDay} selectedDay={selectedDay} />
|
|
<div>
|
|
{selectedDay ? (
|
|
selectedBookings.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{selectedBookings.map((b) => (
|
|
<BookingCard key={b.id} booking={b} meetingStatus={getBookingMeetingStatus(b, meetingSettings)} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-anouma-plum/70">An diesem Tag ist kein Termin von dir eingetragen.</p>
|
|
)
|
|
) : (
|
|
<p className="text-sm text-anouma-plum/70">Wähle einen Tag mit Markierung, um deine Termine zu sehen.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|