335 lines
13 KiB
TypeScript
335 lines
13 KiB
TypeScript
import { format } from "date-fns";
|
|
import { de } from "date-fns/locale";
|
|
import Link from "next/link";
|
|
import { UserRole } from "@prisma/client";
|
|
import {
|
|
AtSign,
|
|
Baby,
|
|
CalendarHeart,
|
|
Home,
|
|
Mail,
|
|
Phone,
|
|
Shield,
|
|
Trash2,
|
|
UserCircle,
|
|
} from "lucide-react";
|
|
|
|
import { requireKitaSession } from "@/lib/auth-utils";
|
|
import { prisma } from "@/lib/prisma";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { DefItem, DefList, EmptyDefValue } from "@/components/ui/def-list";
|
|
import { RoleBadge } from "@/components/ui/role-badge";
|
|
import { DeleteAccountDialog } from "./_components/delete-account-dialog";
|
|
import { MyChildrenManager } from "./_components/my-children-manager";
|
|
import { CreateFamilyDialog } from "./_components/create-family-dialog";
|
|
import { ContactForm } from "./_components/contact-form";
|
|
import { StaffEmailSettings } from "../personal/forms";
|
|
|
|
export const metadata = { title: "Mein Profil · Kita-Planer" };
|
|
|
|
export default async function ProfilPage() {
|
|
const session = await requireKitaSession();
|
|
|
|
const [kita, user] = await Promise.all([
|
|
prisma.kita.findUniqueOrThrow({
|
|
where: { id: session.user.kitaId },
|
|
select: { name: true },
|
|
}),
|
|
prisma.user.findUniqueOrThrow({
|
|
where: { id: session.user.id },
|
|
select: {
|
|
id: true,
|
|
email: true,
|
|
firstName: true,
|
|
lastName: true,
|
|
role: true,
|
|
familyId: true,
|
|
phone: true,
|
|
street: true,
|
|
postalCode: true,
|
|
city: true,
|
|
directoryOptInAt: true,
|
|
staffDecisionEmails: true,
|
|
createdAt: true,
|
|
family: {
|
|
select: {
|
|
name: true,
|
|
children: {
|
|
select: {
|
|
id: true,
|
|
firstName: true,
|
|
lastName: true,
|
|
dateOfBirth: true,
|
|
},
|
|
orderBy: [{ lastName: "asc" }, { firstName: "asc" }],
|
|
},
|
|
},
|
|
},
|
|
dutyAssignments: {
|
|
select: {
|
|
id: true,
|
|
duty: {
|
|
select: {
|
|
name: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
]);
|
|
|
|
const fullName = `${user.firstName} ${user.lastName}`.trim();
|
|
|
|
return (
|
|
<div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
|
|
<header className="mb-9">
|
|
<p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
|
|
PROFIL · {kita.name}
|
|
</p>
|
|
<h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
|
|
Mein{" "}
|
|
<em className="font-normal italic text-[var(--accent-deep)]">
|
|
Profil
|
|
</em>
|
|
</h1>
|
|
<p className="mt-3 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
|
|
{user.role === UserRole.ERZIEHER
|
|
? "Deine persönlichen Daten, dein Arbeitsbereich und Datenschutzeinstellungen."
|
|
: "Deine persönlichen Daten, verknüpfte Kinder und DSGVO-Einstellungen."}
|
|
</p>
|
|
</header>
|
|
|
|
<div className="grid items-start gap-5 lg:grid-cols-2">
|
|
<Card className="self-stretch">
|
|
<CardHeader className="pb-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
|
|
<UserCircle className="h-4 w-4 [stroke-width:1.7]" />
|
|
</div>
|
|
<div>
|
|
<CardTitle>Persönliche Daten</CardTitle>
|
|
<CardDescription className="mt-2">
|
|
Read-only Stammdaten deines Accounts.
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<DefList>
|
|
<DefItem icon={UserCircle} label="Name" value={fullName} />
|
|
<DefItem icon={Mail} label="E-Mail" value={user.email} />
|
|
<DefItem
|
|
icon={Phone}
|
|
label="Telefon"
|
|
value={user.phone ? user.phone : <EmptyDefValue />}
|
|
/>
|
|
<DefItem
|
|
icon={Shield}
|
|
label="Rolle"
|
|
value={<RoleBadge role={user.role} />}
|
|
/>
|
|
{user.role !== UserRole.ERZIEHER && (
|
|
<DefItem
|
|
icon={Home}
|
|
label="Haushalt"
|
|
value={
|
|
user.family ? (
|
|
user.family.name
|
|
) : (
|
|
<div className="grid gap-3 rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-3">
|
|
<p className="text-sm font-normal leading-5 text-[var(--ink-soft)]">
|
|
Dein Account ist noch keinem Haushalt zugeordnet.
|
|
</p>
|
|
<CreateFamilyDialog
|
|
defaultFamilyName={`Familie ${user.lastName}`}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
/>
|
|
)}
|
|
<DefItem
|
|
icon={CalendarHeart}
|
|
label="Mitglied seit"
|
|
value={format(user.createdAt, "PPP", { locale: de })}
|
|
/>
|
|
</DefList>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid gap-4">
|
|
{user.role === UserRole.ERZIEHER && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Meine Arbeitszeit & Urlaub</CardTitle>
|
|
<CardDescription>
|
|
Wochenmodell, Urlaubsanspruch, Zeiterfassung und Überstunden.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Link
|
|
href="/dashboard/personal"
|
|
className="font-medium text-[var(--accent-deep)] underline underline-offset-4"
|
|
>
|
|
Personalbereich öffnen →
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
<Card>
|
|
<CardHeader className="pb-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
|
|
<AtSign className="h-4 w-4 [stroke-width:1.7]" />
|
|
</div>
|
|
<div>
|
|
<CardTitle>Kontaktdaten</CardTitle>
|
|
<CardDescription className="mt-2">
|
|
Für Notdienst, Adressbuch und Abstimmung in der Kita.
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ContactForm
|
|
contact={{
|
|
phone: user.phone,
|
|
street: user.street,
|
|
postalCode: user.postalCode,
|
|
city: user.city,
|
|
directoryOptIn: !!user.directoryOptInAt,
|
|
}}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{user.role === UserRole.ERZIEHER && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>E-Mail-Hinweise</CardTitle>
|
|
<CardDescription>
|
|
Benachrichtigungen aus dem Personalbereich.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<StaffEmailSettings enabled={user.staffDecisionEmails} />
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
{user.role !== UserRole.ERZIEHER && (
|
|
<>
|
|
<Card>
|
|
<CardHeader className="pb-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
|
|
<Baby className="h-4 w-4 [stroke-width:1.7]" />
|
|
</div>
|
|
<div>
|
|
<CardTitle>Meine Kinder</CardTitle>
|
|
<CardDescription className="mt-2">
|
|
Kinder deines Haushalts verwalten.
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<MyChildrenManager
|
|
items={(user.family?.children ?? []).map((child) => ({
|
|
id: child.id,
|
|
firstName: child.firstName,
|
|
lastName: child.lastName,
|
|
dateOfBirth: child.dateOfBirth
|
|
? child.dateOfBirth.toISOString().slice(0, 10)
|
|
: null,
|
|
}))}
|
|
canManage={!!user.familyId}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
|
|
<Shield className="h-4 w-4 [stroke-width:1.7]" />
|
|
</div>
|
|
<div>
|
|
<CardTitle>Meine Ämter & Dienste</CardTitle>
|
|
<CardDescription className="mt-2">
|
|
Feste Aufgaben und laufende Zuständigkeiten.
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{user.dutyAssignments.length === 0 ? (
|
|
<div className="flex min-h-32 flex-col items-center justify-center rounded-[14px] border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-5 text-center">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--accent-soft)] text-[var(--accent-deep)]">
|
|
<Shield className="h-4 w-4 [stroke-width:1.7]" />
|
|
</div>
|
|
<p className="mt-3 text-sm font-medium text-[var(--ink)]">
|
|
Keine festen Ämter übernommen
|
|
</p>
|
|
<p className="mt-1 text-xs text-[var(--ink-soft)]">
|
|
Dienste und Rollen erscheinen hier, sobald sie
|
|
zugewiesen sind.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-2">
|
|
{user.dutyAssignments.map((assignment) => (
|
|
<div
|
|
key={assignment.id}
|
|
className="flex items-center justify-between gap-3 rounded-lg bg-[var(--surface-2)] p-[10px_12px]"
|
|
>
|
|
<div>
|
|
<p className="text-sm font-semibold text-[var(--ink)]">
|
|
{assignment.duty.name}
|
|
</p>
|
|
<p className="text-xs text-[var(--ink-soft)]">
|
|
laufender Dienst
|
|
</p>
|
|
</div>
|
|
<span className="rounded-full border border-[var(--accent-mid)] bg-[var(--accent-soft)] px-2.5 py-1 text-[10.5px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.1em]">
|
|
Aktiv
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="mt-5 bg-[var(--surface-2)]">
|
|
<CardContent className="flex items-center justify-between gap-6 pt-[22px] max-[760px]:flex-col max-[760px]:items-start">
|
|
<div className="max-w-2xl">
|
|
<div className="flex items-center gap-2 text-[var(--danger)]">
|
|
<Trash2 className="h-4 w-4 [stroke-width:1.7]" />
|
|
<h2 className="text-lg font-medium tracking-[-0.02em]">
|
|
Danger Zone
|
|
</h2>
|
|
</div>
|
|
<p className="mt-2 text-[13.5px] leading-5 text-[var(--ink-soft)]">
|
|
Hier kannst du dein Profil und je nach Haushaltssituation auch die
|
|
zugehörigen Familiendaten DSGVO-konform löschen. Aktive
|
|
Notdienst-Verpflichtungen blockieren die Löschung.
|
|
</p>
|
|
</div>
|
|
<DeleteAccountDialog />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|