Files
anouma/app/(frontend)/konto/page.tsx
T

73 lines
2.9 KiB
TypeScript

import type { Metadata } from "next";
import { getCurrentCustomer } from "@/lib/auth/customer";
import { getCustomerBookings } from "@/lib/booking/queries";
import { BookingCard } from "@/components/booking/BookingCard";
import { ArrowLink } from "@/components/ArrowLink";
import { getMeetingSettingsGlobal } from "@/lib/payload/globals";
import { getBookingMeetingStatus } from "@/lib/booking/meetingAccess";
export const metadata: Metadata = { title: "Mein Konto" };
export default async function KontoOverviewPage() {
const customer = await getCurrentCustomer();
if (!customer) return null; // Layout already redirects; keeps TS happy.
const bookings = await getCustomerBookings(customer.id);
const meetingSettings = await getMeetingSettingsGlobal();
const pending = bookings.filter((b) => b.status === "pending");
const confirmed = bookings.filter((b) => b.status === "confirmed" && new Date(b.date) >= new Date());
const past = bookings.filter((b) => new Date(b.date) < new Date() || b.status === "rejected" || b.status === "cancelled");
return (
<div className="space-y-10">
<div className="rounded-3xl bg-white p-6">
<h2 className="font-serif text-xl font-medium text-anouma-plum">Deine Daten</h2>
<dl className="mt-4 grid gap-4 sm:grid-cols-2">
<div>
<dt className="text-xs font-medium uppercase tracking-wide text-anouma-plum/60">Name</dt>
<dd className="text-base text-anouma-plum">{customer.name}</dd>
</div>
<div>
<dt className="text-xs font-medium uppercase tracking-wide text-anouma-plum/60">E-Mail</dt>
<dd className="text-base text-anouma-plum">{customer.email}</dd>
</div>
</dl>
</div>
<div>
<div className="flex items-center justify-between">
<h2 className="font-serif text-xl font-medium text-anouma-plum">Offene Buchungsanfragen</h2>
</div>
{pending.length === 0 ? (
<p className="mt-3 text-sm text-anouma-plum/70">Keine offenen Anfragen.</p>
) : (
<div className="mt-4 grid gap-4 sm:grid-cols-2">
{pending.map((b) => (
<BookingCard key={b.id} booking={b} />
))}
</div>
)}
</div>
<div>
<h2 className="font-serif text-xl font-medium text-anouma-plum">Bestätigte Termine</h2>
{confirmed.length === 0 ? (
<p className="mt-3 text-sm text-anouma-plum/70">Noch keine bestätigten Termine.</p>
) : (
<div className="mt-4 grid gap-4 sm:grid-cols-2">
{confirmed.map((b) => (
<BookingCard key={b.id} booking={b} meetingStatus={getBookingMeetingStatus(b, meetingSettings)} />
))}
</div>
)}
</div>
{past.length > 0 && (
<div>
<ArrowLink href="/konto/termine">Alle Termine (inkl. vergangene) ansehen</ArrowLink>
</div>
)}
</div>
);
}