113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Invite-Verwaltung (plan.md Abschnitt 3): Link erstellen, Liste mit
|
|
* Status (Aktiv/Abgelaufen/Verwendet) und Zaehleruebersicht.
|
|
*/
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Button, Card, ErrorMessage, Badge } from '@/components/ui/ui';
|
|
|
|
export interface InviteRow {
|
|
id: string;
|
|
expiresAt: Date | null;
|
|
usedAt: Date | null;
|
|
createdAt: Date;
|
|
}
|
|
|
|
export function InviteManager({
|
|
calendarId,
|
|
invites,
|
|
}: {
|
|
calendarId: string;
|
|
invites: InviteRow[];
|
|
}) {
|
|
const router = useRouter();
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [lastInviteUrl, setLastInviteUrl] = useState<string | null>(null);
|
|
|
|
async function createInvite() {
|
|
setBusy(true);
|
|
setError(null);
|
|
try {
|
|
const response = await fetch(`/api/calendars/${calendarId}/invites`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ calendarId }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = (await response.json()) as { error?: string };
|
|
setError(data.error ?? 'Erstellen fehlgeschlagen.');
|
|
return;
|
|
}
|
|
const data = (await response.json()) as { inviteUrl: string };
|
|
setLastInviteUrl(data.inviteUrl);
|
|
router.refresh();
|
|
} catch {
|
|
setError('Netzwerkfehler. Bitte erneut versuchen.');
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
const now = new Date();
|
|
const active = invites.filter(
|
|
(invite) =>
|
|
invite.usedAt === null &&
|
|
(invite.expiresAt === null || invite.expiresAt > now),
|
|
).length;
|
|
const expired = invites.filter(
|
|
(invite) =>
|
|
invite.usedAt === null &&
|
|
invite.expiresAt !== null &&
|
|
invite.expiresAt <= now,
|
|
).length;
|
|
const used = invites.filter((invite) => invite.usedAt !== null).length;
|
|
|
|
return (
|
|
<Card>
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold">Einladungen</h2>
|
|
<Button type="button" variant="secondary" disabled={busy} onClick={createInvite}>
|
|
{busy ? 'Erstelle …' : '+ Benutzer einladen'}
|
|
</Button>
|
|
</div>
|
|
|
|
<ErrorMessage message={error} />
|
|
|
|
{lastInviteUrl && (
|
|
<div className="mb-4 rounded-md bg-slate-100 px-3 py-2 text-sm text-slate-800 dark:bg-slate-800 dark:text-slate-200">
|
|
<p className="mb-1 font-medium">Neuer Invite-Link (einmalig anzeigen):</p>
|
|
<code className="break-all text-xs">{lastInviteUrl}</code>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-4 flex gap-4 text-sm">
|
|
<Badge variant="success">Aktiv: {active}</Badge>
|
|
<Badge variant="warning">Abgelaufen: {expired}</Badge>
|
|
<Badge variant="neutral">Verwendet: {used}</Badge>
|
|
</div>
|
|
|
|
{invites.length === 0 ? (
|
|
<p className="text-sm text-slate-500">Noch keine Einladungen erstellt.</p>
|
|
) : (
|
|
<ul className="space-y-1 text-sm text-slate-600">
|
|
{invites.slice(0, 10).map((invite) => (
|
|
<li key={invite.id} className="flex justify-between rounded bg-slate-50 px-3 py-1.5">
|
|
<span>Erstellt {invite.createdAt.toLocaleDateString('de-DE')}</span>
|
|
<span>
|
|
{invite.usedAt
|
|
? 'Verwendet'
|
|
: invite.expiresAt && invite.expiresAt <= now
|
|
? 'Abgelaufen'
|
|
: 'Aktiv'}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</Card>
|
|
);
|
|
} |