126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
import { prisma } from '@innungsapp/shared'
|
|
import { auth, getSanitizedHeaders } from '@/lib/auth'
|
|
import { headers } from 'next/headers'
|
|
import { redirect } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { TERMIN_TYP_LABELS } from '@innungsapp/shared'
|
|
import { format } from 'date-fns'
|
|
import { de } from 'date-fns/locale'
|
|
|
|
const TYP_COLORS: Record<string, string> = {
|
|
Pruefung: 'bg-blue-100 text-blue-700',
|
|
Versammlung: 'bg-purple-100 text-purple-700',
|
|
Kurs: 'bg-green-100 text-green-700',
|
|
Event: 'bg-yellow-100 text-yellow-700',
|
|
Sonstiges: 'bg-gray-100 text-gray-700',
|
|
}
|
|
|
|
export default async function TerminePage() {
|
|
const sanitizedHeaders = await getSanitizedHeaders()
|
|
const session = await auth.api.getSession({ headers: sanitizedHeaders })
|
|
if (!session?.user) redirect('/login')
|
|
const userRole = await prisma.userRole.findFirst({
|
|
where: { userId: session.user.id, role: 'admin' },
|
|
})
|
|
if (!userRole) redirect('/dashboard')
|
|
|
|
const now = new Date()
|
|
const [upcoming, past] = await Promise.all([
|
|
prisma.termin.findMany({
|
|
where: { orgId: userRole.orgId, datum: { gte: now } },
|
|
include: { anmeldungen: { select: { id: true } } },
|
|
orderBy: { datum: 'asc' },
|
|
}),
|
|
prisma.termin.findMany({
|
|
where: { orgId: userRole.orgId, datum: { lt: now } },
|
|
include: { anmeldungen: { select: { id: true } } },
|
|
orderBy: { datum: 'desc' },
|
|
take: 10,
|
|
}),
|
|
])
|
|
|
|
const TerminRow = ({ t }: { t: typeof upcoming[0] }) => (
|
|
<tr>
|
|
<td>
|
|
<div className="text-center w-10">
|
|
<p className="font-bold text-brand-500">{format(t.datum, 'dd', { locale: de })}</p>
|
|
<p className="text-xs text-gray-400 uppercase">{format(t.datum, 'MMM', { locale: de })}</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<p className="font-medium text-gray-900">{t.titel}</p>
|
|
{t.ort && <p className="text-xs text-gray-500">{t.ort}</p>}
|
|
</td>
|
|
<td>
|
|
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${TYP_COLORS[t.typ]}`}>
|
|
{TERMIN_TYP_LABELS[t.typ]}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
{t.maxTeilnehmer
|
|
? `${t.anmeldungen.length} / ${t.maxTeilnehmer}`
|
|
: t.anmeldungen.length}
|
|
</td>
|
|
<td>
|
|
<Link href={`/dashboard/termine/${t.id}`} className="text-sm text-brand-600 hover:underline">
|
|
Bearbeiten
|
|
</Link>
|
|
</td>
|
|
</tr>
|
|
)
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold text-gray-900">Termine</h1>
|
|
<Link
|
|
href="/dashboard/termine/neu"
|
|
className="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-brand-600 transition-colors"
|
|
>
|
|
+ Termin anlegen
|
|
</Link>
|
|
</div>
|
|
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
|
|
Bevorstehend ({upcoming.length})
|
|
</h2>
|
|
<div className="bg-white rounded-lg border overflow-hidden">
|
|
<table className="w-full data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Datum</th>
|
|
<th>Titel</th>
|
|
<th>Typ</th>
|
|
<th>Anmeldungen</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{upcoming.map((t) => <TerminRow key={t.id} t={t} />)}
|
|
</tbody>
|
|
</table>
|
|
{upcoming.length === 0 && (
|
|
<div className="text-center py-8 text-gray-500">Keine bevorstehenden Termine</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{past.length > 0 && (
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
|
|
Vergangen
|
|
</h2>
|
|
<div className="bg-white rounded-lg border overflow-hidden opacity-70">
|
|
<table className="w-full data-table">
|
|
<tbody>
|
|
{past.map((t) => <TerminRow key={t.id} t={t} />)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|