800 lines
30 KiB
TypeScript
800 lines
30 KiB
TypeScript
import React from 'react';
|
||
import { useNavigate, useParams } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { AlertCircle, ArrowLeft, CheckCircle2, Circle, Clock3, Loader2, PlugZap, Power, RefreshCw, ShieldCheck, Copy } from 'lucide-react';
|
||
|
||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
|
||
import { AdminLayout } from '../components/AdminLayout';
|
||
import {
|
||
PhotoboothStatus,
|
||
TenantEvent,
|
||
type EventToolkit,
|
||
type TenantPhoto,
|
||
disableEventPhotobooth,
|
||
enableEventPhotobooth,
|
||
getEvent,
|
||
getEventPhotoboothStatus,
|
||
getEventToolkit,
|
||
rotateEventPhotobooth,
|
||
} from '../api';
|
||
import { isAuthError } from '../auth/tokens';
|
||
import { getApiErrorMessage } from '../lib/apiError';
|
||
import { ADMIN_EVENTS_PATH, ADMIN_EVENT_VIEW_PATH } from '../constants';
|
||
import { buildEventTabs } from '../lib/eventTabs';
|
||
|
||
type State = {
|
||
event: TenantEvent | null;
|
||
status: PhotoboothStatus | null;
|
||
toolkit: EventToolkit | null;
|
||
loading: boolean;
|
||
updating: boolean;
|
||
error: string | null;
|
||
};
|
||
|
||
export default function EventPhotoboothPage() {
|
||
const { slug } = useParams<{ slug: string }>();
|
||
const navigate = useNavigate();
|
||
const { t } = useTranslation(['management', 'common']);
|
||
|
||
const [state, setState] = React.useState<State>({
|
||
event: null,
|
||
status: null,
|
||
toolkit: null,
|
||
loading: true,
|
||
updating: false,
|
||
error: null,
|
||
});
|
||
|
||
const load = React.useCallback(async () => {
|
||
if (!slug) {
|
||
setState((prev) => ({
|
||
...prev,
|
||
loading: false,
|
||
error: t('management.photobooth.errors.missingSlug', 'Kein Event ausgewählt.'),
|
||
}));
|
||
return;
|
||
}
|
||
|
||
setState((prev) => ({ ...prev, loading: true, error: null }));
|
||
|
||
try {
|
||
const toolkitPromise = getEventToolkit(slug)
|
||
.then((data) => data)
|
||
.catch((toolkitError) => {
|
||
if (!isAuthError(toolkitError)) {
|
||
console.warn('[Photobooth] Toolkit konnte nicht geladen werden', toolkitError);
|
||
}
|
||
return null;
|
||
});
|
||
const [eventData, statusData, toolkitData] = await Promise.all([getEvent(slug), getEventPhotoboothStatus(slug), toolkitPromise]);
|
||
setState({
|
||
event: eventData,
|
||
status: statusData,
|
||
toolkit: toolkitData,
|
||
loading: false,
|
||
updating: false,
|
||
error: null,
|
||
});
|
||
} catch (error) {
|
||
if (!isAuthError(error)) {
|
||
setState((prev) => ({
|
||
...prev,
|
||
loading: false,
|
||
error: getApiErrorMessage(error, t('management.photobooth.errors.loadFailed', 'Photobooth-Link konnte nicht geladen werden.')),
|
||
}));
|
||
} else {
|
||
setState((prev) => ({ ...prev, loading: false }));
|
||
}
|
||
}
|
||
}, [slug, t]);
|
||
|
||
React.useEffect(() => {
|
||
void load();
|
||
}, [load]);
|
||
|
||
async function handleEnable(): Promise<void> {
|
||
if (!slug) return;
|
||
setState((prev) => ({ ...prev, updating: true, error: null }));
|
||
|
||
try {
|
||
const result = await enableEventPhotobooth(slug);
|
||
setState((prev) => ({
|
||
...prev,
|
||
status: result,
|
||
updating: false,
|
||
}));
|
||
} catch (error) {
|
||
if (!isAuthError(error)) {
|
||
setState((prev) => ({
|
||
...prev,
|
||
updating: false,
|
||
error: getApiErrorMessage(error, t('management.photobooth.errors.enableFailed', 'Zugang konnte nicht aktiviert werden.')),
|
||
}));
|
||
} else {
|
||
setState((prev) => ({ ...prev, updating: false }));
|
||
}
|
||
}
|
||
}
|
||
|
||
async function handleRotate(): Promise<void> {
|
||
if (!slug) return;
|
||
setState((prev) => ({ ...prev, updating: true, error: null }));
|
||
|
||
try {
|
||
const result = await rotateEventPhotobooth(slug);
|
||
setState((prev) => ({
|
||
...prev,
|
||
status: result,
|
||
updating: false,
|
||
}));
|
||
} catch (error) {
|
||
if (!isAuthError(error)) {
|
||
setState((prev) => ({
|
||
...prev,
|
||
updating: false,
|
||
error: getApiErrorMessage(error, t('management.photobooth.errors.rotateFailed', 'Zugangsdaten konnten nicht neu generiert werden.')),
|
||
}));
|
||
} else {
|
||
setState((prev) => ({ ...prev, updating: false }));
|
||
}
|
||
}
|
||
}
|
||
|
||
async function handleDisable(options?: { skipConfirm?: boolean }): Promise<void> {
|
||
if (!slug) return;
|
||
if (!options?.skipConfirm && !window.confirm(t('management.photobooth.confirm.disable', 'Photobooth-Zugang deaktivieren?'))) {
|
||
return;
|
||
}
|
||
|
||
setState((prev) => ({ ...prev, updating: true, error: null }));
|
||
|
||
try {
|
||
const result = await disableEventPhotobooth(slug);
|
||
setState((prev) => ({
|
||
...prev,
|
||
status: result,
|
||
updating: false,
|
||
}));
|
||
} catch (error) {
|
||
if (!isAuthError(error)) {
|
||
setState((prev) => ({
|
||
...prev,
|
||
updating: false,
|
||
error: getApiErrorMessage(error, t('management.photobooth.errors.disableFailed', 'Zugang konnte nicht deaktiviert werden.')),
|
||
}));
|
||
} else {
|
||
setState((prev) => ({ ...prev, updating: false }));
|
||
}
|
||
}
|
||
}
|
||
|
||
const { event, status, toolkit, loading, updating, error } = state;
|
||
const title = event
|
||
? t('management.photobooth.titleForEvent', { defaultValue: 'Fotobox-Uploads verwalten', event: resolveEventName(event.name) })
|
||
: t('management.photobooth.title', 'Fotobox-Uploads');
|
||
const subtitle = t(
|
||
'management.photobooth.subtitle',
|
||
'Erstelle einen einfachen FTP-Link für Photobooth-Software. Rate-Limit: 20 Fotos/Minute.'
|
||
);
|
||
const eventTabs = React.useMemo(() => {
|
||
if (!event || !slug) {
|
||
return [];
|
||
}
|
||
const translateMenu = (key: string, fallback: string) => t(key, { defaultValue: fallback });
|
||
return buildEventTabs(event, translateMenu, {
|
||
invites: event.active_invites_count ?? event.total_invites_count ?? undefined,
|
||
photos: event.photo_count ?? event.pending_photo_count ?? undefined,
|
||
tasks: event.tasks_count ?? undefined,
|
||
});
|
||
}, [event, slug, t]);
|
||
|
||
const recentPhotos = React.useMemo(() => toolkit?.photos?.recent ?? [], [toolkit?.photos?.recent]);
|
||
const photoboothRecent = React.useMemo(() => recentPhotos.filter((photo) => photo.ingest_source === 'photobooth'), [recentPhotos]);
|
||
const effectiveRecentPhotos = React.useMemo(
|
||
() => (photoboothRecent.length > 0 ? photoboothRecent : recentPhotos),
|
||
[photoboothRecent, recentPhotos],
|
||
);
|
||
const uploads24h = React.useMemo(
|
||
() => countUploadsInWindow(effectiveRecentPhotos, 24 * 60 * 60 * 1000),
|
||
[effectiveRecentPhotos],
|
||
);
|
||
const recentShare = React.useMemo(() => {
|
||
if (recentPhotos.length === 0) {
|
||
return null;
|
||
}
|
||
const ratio = photoboothRecent.length / recentPhotos.length;
|
||
return Math.round(ratio * 100);
|
||
}, [photoboothRecent.length, recentPhotos.length]);
|
||
const lastUploadAt = React.useMemo(() => {
|
||
const latestPhoto = selectLatestUpload(effectiveRecentPhotos);
|
||
if (latestPhoto?.uploaded_at) {
|
||
return latestPhoto.uploaded_at;
|
||
}
|
||
return status?.metrics?.last_upload_at ?? null;
|
||
}, [effectiveRecentPhotos, status?.metrics?.last_upload_at]);
|
||
const lastUploadSource: 'photobooth' | 'event' | null = photoboothRecent.length > 0
|
||
? 'photobooth'
|
||
: recentPhotos.length > 0
|
||
? 'event'
|
||
: null;
|
||
const eventUploadsTotal = toolkit?.metrics.uploads_total ?? event?.photo_count ?? 0;
|
||
const uploadStats = React.useMemo(
|
||
() => ({
|
||
uploads24h,
|
||
shareRecent: recentShare,
|
||
totalEventUploads: eventUploadsTotal ?? 0,
|
||
lastUploadAt,
|
||
source: lastUploadSource,
|
||
sampleSize: recentPhotos.length,
|
||
}),
|
||
[uploads24h, recentShare, eventUploadsTotal, lastUploadAt, lastUploadSource, recentPhotos.length],
|
||
);
|
||
|
||
const actions = (
|
||
<div className="flex gap-2">
|
||
{slug ? (
|
||
<Button variant="outline" onClick={() => navigate(ADMIN_EVENT_VIEW_PATH(slug))}>
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
{t('management.photobooth.actions.backToEvent', 'Zur Detailansicht')}
|
||
</Button>
|
||
) : null}
|
||
<Button variant="ghost" onClick={() => navigate(ADMIN_EVENTS_PATH)}>
|
||
{t('management.photobooth.actions.allEvents', 'Zur Eventliste')}
|
||
</Button>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<AdminLayout title={title} subtitle={subtitle} actions={actions} tabs={eventTabs} currentTabKey="photobooth">
|
||
{error ? (
|
||
<Alert variant="destructive" className="mb-4">
|
||
<AlertTitle>{t('common:messages.error', 'Fehler')}</AlertTitle>
|
||
<AlertDescription>{error}</AlertDescription>
|
||
</Alert>
|
||
) : null}
|
||
|
||
{loading ? (
|
||
<PhotoboothSkeleton />
|
||
) : (
|
||
<div className="space-y-6">
|
||
<div className="grid gap-6 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)]">
|
||
<StatusCard status={status} />
|
||
<SetupChecklistCard status={status} />
|
||
</div>
|
||
<div className="grid gap-6 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)]">
|
||
<ModePresetsCard
|
||
status={status}
|
||
updating={updating}
|
||
onEnable={handleEnable}
|
||
onDisable={() => handleDisable({ skipConfirm: true })}
|
||
onRotate={handleRotate}
|
||
/>
|
||
<UploadStatsCard stats={uploadStats} />
|
||
</div>
|
||
<CredentialsCard status={status} updating={updating} onEnable={handleEnable} onRotate={handleRotate} onDisable={handleDisable} />
|
||
<div className="grid gap-6 lg:grid-cols-2">
|
||
<StatusTimelineCard status={status} lastUploadAt={lastUploadAt} />
|
||
<RateLimitCard status={status} uploadsLastHour={status?.metrics?.uploads_last_hour ?? null} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</AdminLayout>
|
||
);
|
||
}
|
||
|
||
function resolveEventName(name: TenantEvent['name']): string {
|
||
if (typeof name === 'string') {
|
||
return name;
|
||
}
|
||
if (name && typeof name === 'object') {
|
||
return Object.values(name)[0] ?? 'Event';
|
||
}
|
||
return 'Event';
|
||
}
|
||
|
||
function PhotoboothSkeleton() {
|
||
return (
|
||
<div className="space-y-4">
|
||
{Array.from({ length: 3 }).map((_, idx) => (
|
||
<div key={idx} className="rounded-3xl border border-slate-200/80 bg-white/70 p-6 shadow-sm">
|
||
<div className="h-4 w-32 animate-pulse rounded bg-slate-200/80" />
|
||
<div className="mt-4 h-3 w-full animate-pulse rounded bg-slate-100" />
|
||
<div className="mt-2 h-3 w-3/4 animate-pulse rounded bg-slate-100" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
type ModePresetsCardProps = {
|
||
status: PhotoboothStatus | null;
|
||
updating: boolean;
|
||
onEnable: () => Promise<void>;
|
||
onDisable: () => Promise<void>;
|
||
onRotate: () => Promise<void>;
|
||
};
|
||
|
||
function ModePresetsCard({ status, updating, onEnable, onDisable, onRotate }: ModePresetsCardProps) {
|
||
const { t } = useTranslation('management');
|
||
const activePreset: 'plan' | 'live' = status?.enabled ? 'live' : 'plan';
|
||
const [selectedPreset, setSelectedPreset] = React.useState<'plan' | 'live'>(activePreset);
|
||
|
||
React.useEffect(() => {
|
||
setSelectedPreset(activePreset);
|
||
}, [activePreset]);
|
||
|
||
const presets = React.useMemo(
|
||
() => [
|
||
{
|
||
key: 'plan' as const,
|
||
title: t('photobooth.presets.planTitle', 'Planungsmodus'),
|
||
description: t('photobooth.presets.planDescription', 'Zugang bleibt deaktiviert, um Tests vorzubereiten.'),
|
||
badge: t('photobooth.presets.badgePlan', 'Planung'),
|
||
icon: <Clock3 className="h-5 w-5 text-slate-500" />,
|
||
},
|
||
{
|
||
key: 'live' as const,
|
||
title: t('photobooth.presets.liveTitle', 'Live-Modus'),
|
||
description: t('photobooth.presets.liveDescription', 'FTP ist aktiv und Uploads werden direkt entgegen genommen.'),
|
||
badge: t('photobooth.presets.badgeLive', 'Live'),
|
||
icon: <PlugZap className="h-5 w-5 text-emerald-500" />,
|
||
},
|
||
],
|
||
[t],
|
||
);
|
||
|
||
const handleApply = React.useCallback(() => {
|
||
if (selectedPreset === activePreset) {
|
||
return;
|
||
}
|
||
if (selectedPreset === 'live') {
|
||
void onEnable();
|
||
} else {
|
||
void onDisable();
|
||
}
|
||
}, [activePreset, onDisable, onEnable, selectedPreset]);
|
||
|
||
return (
|
||
<Card className="rounded-3xl border border-slate-200/80 shadow-sm">
|
||
<CardHeader>
|
||
<CardTitle>{t('photobooth.presets.title', 'Modus wählen')}</CardTitle>
|
||
<CardDescription>{t('photobooth.presets.description', 'Passe die Photobooth an Vorbereitung oder Live-Betrieb an.')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid gap-3 md:grid-cols-2">
|
||
{presets.map((preset) => {
|
||
const isSelected = selectedPreset === preset.key;
|
||
const isActive = activePreset === preset.key;
|
||
return (
|
||
<button
|
||
key={preset.key}
|
||
type="button"
|
||
onClick={() => setSelectedPreset(preset.key)}
|
||
className={`flex h-full flex-col items-start gap-3 rounded-2xl border p-4 text-left transition ${
|
||
isSelected ? 'border-emerald-400 bg-emerald-50/70 shadow-inner' : 'border-slate-200 hover:border-slate-300'
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
{preset.icon}
|
||
<div>
|
||
<p className="text-sm font-semibold text-slate-900">{preset.title}</p>
|
||
<p className="text-xs text-slate-500">{preset.description}</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||
<Badge variant="outline" className="border-slate-200 text-slate-600">
|
||
{preset.badge}
|
||
</Badge>
|
||
{isActive ? (
|
||
<Badge className="bg-emerald-500/20 text-emerald-700">
|
||
{t('photobooth.presets.current', 'Aktiv')}
|
||
</Badge>
|
||
) : null}
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-3 border-t border-slate-200 pt-4">
|
||
<Button
|
||
onClick={handleApply}
|
||
disabled={selectedPreset === activePreset || updating}
|
||
className="min-w-[160px]"
|
||
>
|
||
{updating ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <PlugZap className="mr-2 h-4 w-4" />}
|
||
{t('photobooth.presets.actions.apply', 'Modus übernehmen')}
|
||
</Button>
|
||
<Button variant="outline" onClick={onRotate} disabled={updating}>
|
||
<RefreshCw className="mr-2 h-4 w-4" />
|
||
{t('photobooth.presets.actions.rotate', 'Zugang zurücksetzen')}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
type UploadStatsCardProps = {
|
||
stats: {
|
||
uploads24h: number;
|
||
shareRecent: number | null;
|
||
totalEventUploads: number;
|
||
lastUploadAt: string | null;
|
||
source: 'photobooth' | 'event' | null;
|
||
sampleSize: number;
|
||
};
|
||
};
|
||
|
||
function UploadStatsCard({ stats }: UploadStatsCardProps) {
|
||
const { t } = useTranslation('management');
|
||
const lastUploadLabel = stats.lastUploadAt ? formatPhotoboothDate(stats.lastUploadAt) : t('photobooth.stats.none', 'Noch keine Uploads');
|
||
const shareLabel = stats.shareRecent != null ? `${stats.shareRecent}%` : '—';
|
||
const sourceLabel = stats.source === 'photobooth'
|
||
? t('photobooth.stats.sourcePhotobooth', 'Quelle: Photobooth')
|
||
: stats.source === 'event'
|
||
? t('photobooth.stats.sourceEvent', 'Quelle: Event')
|
||
: null;
|
||
|
||
return (
|
||
<Card className="rounded-3xl border border-slate-200/80 shadow-sm">
|
||
<CardHeader>
|
||
<CardTitle>{t('photobooth.stats.title', 'Upload-Status')}</CardTitle>
|
||
<CardDescription>{t('photobooth.stats.description', 'Fokussiere deine Photobooth-Uploads der letzten Stunden.')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4 text-sm">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-slate-500">{t('photobooth.stats.lastUpload', 'Letzter Upload')}</span>
|
||
<span className="font-semibold text-slate-900">{lastUploadLabel}</span>
|
||
</div>
|
||
{sourceLabel ? <p className="text-xs text-slate-500">{sourceLabel}</p> : null}
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-slate-500">{t('photobooth.stats.uploads24h', 'Uploads (24h)')}</span>
|
||
<span className="font-medium text-slate-900">{stats.uploads24h}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-slate-500">{t('photobooth.stats.share', 'Anteil Photobooth (letzte Uploads)')}</span>
|
||
<span className="font-medium text-slate-900">{shareLabel}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-slate-500">{t('photobooth.stats.totalEvent', 'Uploads gesamt (Event)')}</span>
|
||
<span className="font-medium text-slate-900">{stats.totalEventUploads}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between border-t border-dashed border-slate-200 pt-3 text-xs text-slate-500">
|
||
<span>{t('photobooth.stats.sample', 'Analysierte Uploads')}</span>
|
||
<span>{stats.sampleSize}</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function SetupChecklistCard({ status }: { status: PhotoboothStatus | null }) {
|
||
const { t } = useTranslation('management');
|
||
const steps = [
|
||
{
|
||
key: 'enable',
|
||
label: t('photobooth.checklist.enable', 'Zugang aktivieren'),
|
||
description: t('photobooth.checklist.enableCopy', 'Aktiviere den FTP-Account für eure Photobooth-Software.'),
|
||
done: Boolean(status?.enabled),
|
||
},
|
||
{
|
||
key: 'share',
|
||
label: t('photobooth.checklist.share', 'Zugang teilen'),
|
||
description: t('photobooth.checklist.shareCopy', 'Übergib Host, Benutzer & Passwort an den Betreiber.'),
|
||
done: Boolean(status?.username && status?.password),
|
||
},
|
||
{
|
||
key: 'monitor',
|
||
label: t('photobooth.checklist.monitor', 'Uploads beobachten'),
|
||
description: t('photobooth.checklist.monitorCopy', 'Verfolge Uploads & Limits direkt im Dashboard.'),
|
||
done: Boolean(status?.status === 'active'),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Card className="rounded-3xl border border-slate-200/80 bg-white shadow-sm">
|
||
<CardHeader>
|
||
<CardTitle>{t('photobooth.checklist.title', 'Setup-Checkliste')}</CardTitle>
|
||
<CardDescription>{t('photobooth.checklist.description', 'Erledige jeden Schritt, bevor Gäste Zugang erhalten.')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
{steps.map((step) => (
|
||
<div key={step.key} className="flex items-start gap-3 rounded-2xl border border-slate-200/70 p-3">
|
||
{step.done ? (
|
||
<CheckCircle2 className="mt-0.5 h-4 w-4 text-emerald-500" />
|
||
) : (
|
||
<Circle className="mt-0.5 h-4 w-4 text-slate-300" />
|
||
)}
|
||
<div>
|
||
<p className={`text-sm font-semibold ${step.done ? 'text-emerald-700' : 'text-slate-800'}`}>{step.label}</p>
|
||
<p className="text-xs text-slate-500">{step.description}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function StatusCard({ status }: { status: PhotoboothStatus | null }) {
|
||
const { t } = useTranslation('management');
|
||
const isActive = Boolean(status?.enabled);
|
||
const badgeColor = isActive ? 'bg-emerald-600 text-white' : 'bg-slate-300 text-slate-800';
|
||
const icon = isActive ? <PlugZap className="h-5 w-5 text-emerald-500" /> : <Power className="h-5 w-5 text-slate-400" />;
|
||
|
||
return (
|
||
<Card className="rounded-3xl border border-slate-200/80 shadow-sm">
|
||
<CardHeader className="flex flex-row items-center justify-between gap-3">
|
||
<div>
|
||
<CardTitle>{t('photobooth.status.heading', 'Status')}</CardTitle>
|
||
<CardDescription>
|
||
{isActive
|
||
? t('photobooth.status.active', 'Photobooth-Link ist aktiv.')
|
||
: t('photobooth.status.inactive', 'Noch keine Photobooth-Uploads angebunden.')}
|
||
</CardDescription>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
{icon}
|
||
<Badge className={badgeColor}>
|
||
{isActive ? t('photobooth.status.badgeActive', 'AKTIV') : t('photobooth.status.badgeInactive', 'INAKTIV')}
|
||
</Badge>
|
||
</div>
|
||
</CardHeader>
|
||
{status?.expires_at ? (
|
||
<CardContent className="text-sm text-slate-600">
|
||
{t('photobooth.status.expiresAt', 'Automatisches Abschalten am {{date}}', {
|
||
date: new Date(status.expires_at).toLocaleString(),
|
||
})}
|
||
</CardContent>
|
||
) : null}
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
type CredentialCardProps = {
|
||
status: PhotoboothStatus | null;
|
||
updating: boolean;
|
||
onEnable: () => Promise<void>;
|
||
onRotate: () => Promise<void>;
|
||
onDisable: () => Promise<void>;
|
||
};
|
||
|
||
function CredentialsCard({ status, updating, onEnable, onRotate, onDisable }: CredentialCardProps) {
|
||
const { t } = useTranslation('management');
|
||
const isActive = Boolean(status?.enabled);
|
||
|
||
return (
|
||
<Card className="rounded-3xl border border-rose-100/80 shadow-lg shadow-rose-100/40">
|
||
<CardHeader>
|
||
<CardTitle>{t('photobooth.credentials.heading', 'FTP-Zugangsdaten')}</CardTitle>
|
||
<CardDescription>
|
||
{t(
|
||
'photobooth.credentials.description',
|
||
'Teile die Zugangsdaten mit der Photobooth-Software. Passwörter werden max. 8 Zeichen lang generiert.'
|
||
)}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
<Field label={t('photobooth.credentials.host', 'Host')} value={status?.ftp.host ?? '—'} />
|
||
<Field label={t('photobooth.credentials.port', 'Port')} value={String(status?.ftp.port ?? 2121)} />
|
||
<Field label={t('photobooth.credentials.username', 'Benutzername')} value={status?.username ?? '—'} copyable />
|
||
<Field label={t('photobooth.credentials.password', 'Passwort')} value={status?.password ?? '—'} copyable sensitive />
|
||
<Field label={t('photobooth.credentials.path', 'Upload-Pfad')} value={status?.path ?? '/photobooth/...'} copyable />
|
||
<Field label="FTP-Link" value={status?.ftp_url ?? '—'} copyable className="md:col-span-2" />
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-3">
|
||
{isActive ? (
|
||
<>
|
||
<Button onClick={onRotate} disabled={updating} className="bg-rose-600 text-white hover:bg-rose-500">
|
||
{updating ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
|
||
{t('photobooth.actions.rotate', 'Zugang neu generieren')}
|
||
</Button>
|
||
<Button variant="outline" onClick={onDisable} disabled={updating}>
|
||
<Power className="mr-2 h-4 w-4" />
|
||
{t('photobooth.actions.disable', 'Deaktivieren')}
|
||
</Button>
|
||
</>
|
||
) : (
|
||
<Button onClick={onEnable} disabled={updating} className="bg-rose-600 text-white hover:bg-rose-500">
|
||
{updating ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <PlugZap className="mr-2 h-4 w-4" />}
|
||
{t('photobooth.actions.enable', 'Photobooth aktivieren')}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function StatusTimelineCard({ status, lastUploadAt }: { status: PhotoboothStatus | null; lastUploadAt?: string | null }) {
|
||
const { t } = useTranslation('management');
|
||
const entries = [
|
||
{
|
||
title: t('photobooth.timeline.activation', 'Freischaltung'),
|
||
body: status?.enabled
|
||
? t('photobooth.timeline.activationReady', 'Zugang ist aktiv.')
|
||
: t('photobooth.timeline.activationPending', 'Noch nicht aktiviert.'),
|
||
},
|
||
{
|
||
title: t('photobooth.timeline.credentials', 'Zugangsdaten'),
|
||
body: status?.username
|
||
? t('photobooth.timeline.credentialsReady', { defaultValue: 'Benutzer {{username}} ist bereit.', username: status.username })
|
||
: t('photobooth.timeline.credentialsPending', 'Noch keine Logindaten generiert.'),
|
||
},
|
||
{
|
||
title: t('photobooth.timeline.expiry', 'Ablauf'),
|
||
body: status?.expires_at
|
||
? t('photobooth.timeline.expiryHint', { defaultValue: 'Automatisches Abschalten am {{date}}', date: formatPhotoboothDate(status.expires_at) })
|
||
: t('photobooth.timeline.noExpiry', 'Noch kein Ablaufdatum gesetzt.'),
|
||
},
|
||
{
|
||
title: t('photobooth.timeline.lastUpload', 'Letzter Upload'),
|
||
body: lastUploadAt
|
||
? t('photobooth.timeline.lastUploadAt', { defaultValue: 'Zuletzt am {{date}}', date: formatPhotoboothDate(lastUploadAt) })
|
||
: t('photobooth.timeline.lastUploadPending', 'Noch keine Uploads registriert.'),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Card className="rounded-3xl border border-slate-200/80 bg-white shadow-sm">
|
||
<CardHeader>
|
||
<CardTitle>{t('photobooth.timeline.title', 'Status-Timeline')}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
{entries.map((entry, index) => (
|
||
<div key={entry.title} className="flex gap-3">
|
||
<div className="flex flex-col items-center">
|
||
<Clock3 className="h-4 w-4 text-slate-400" />
|
||
{index < entries.length - 1 ? <span className="mt-1 h-10 w-px bg-slate-200" /> : null}
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-semibold text-slate-800">{entry.title}</p>
|
||
<p className="text-xs text-slate-500">{entry.body}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function RateLimitCard({ status, uploadsLastHour }: { status: PhotoboothStatus | null; uploadsLastHour: number | null }) {
|
||
const { t } = useTranslation('management');
|
||
const rateLimit = status?.rate_limit_per_minute ?? 20;
|
||
const usage = uploadsLastHour != null ? Math.max(0, uploadsLastHour) : null;
|
||
const usageRatio = usage !== null && rateLimit > 0 ? usage / rateLimit : null;
|
||
const showWarning = usageRatio !== null && usageRatio >= 0.8;
|
||
|
||
return (
|
||
<Card className="rounded-3xl border border-slate-200/80 bg-white shadow-sm">
|
||
<CardHeader className="flex flex-row items-center gap-3">
|
||
<ShieldCheck className="h-5 w-5 text-emerald-500" />
|
||
<div>
|
||
<CardTitle>{t('photobooth.rateLimit.heading', 'Sicherheit & Limits')}</CardTitle>
|
||
<CardDescription>
|
||
{t('photobooth.rateLimit.description', 'Uploads werden strikt auf {{count}} Fotos pro Minute begrenzt.', {
|
||
count: rateLimit,
|
||
})}
|
||
</CardDescription>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="text-sm leading-relaxed text-slate-600">
|
||
<p>
|
||
{t(
|
||
'photobooth.rateLimit.body',
|
||
'Bei Überschreitung wird die Verbindung hart geblockt. Nach 60 Sekunden wird der Zugang automatisch wieder freigegeben.'
|
||
)}
|
||
</p>
|
||
<div className="mt-4 rounded-2xl border border-slate-200 bg-slate-50/70 p-3">
|
||
<div className="flex items-center justify-between text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||
<span>{t('photobooth.rateLimit.usage', 'Uploads letzte Stunde')}</span>
|
||
<span className="text-slate-900">{usage !== null ? `${usage}/${rateLimit}` : `≤ ${rateLimit}`}</span>
|
||
</div>
|
||
{showWarning ? (
|
||
<p className="mt-2 text-xs text-amber-600">
|
||
{t('photobooth.rateLimit.warning', 'Kurz vor dem Limit – bitte Upload-Takt reduzieren oder Support informieren.')}
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
<p className="mt-3 text-xs text-slate-500">
|
||
<AlertCircle className="mr-1 inline h-3.5 w-3.5" />
|
||
{t(
|
||
'photobooth.rateLimit.hint',
|
||
'Ablaufzeit stimmt mit dem Event-Ende überein. Nach Ablauf wird der Account automatisch entfernt.'
|
||
)}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
type FieldProps = {
|
||
label: string;
|
||
value: string;
|
||
copyable?: boolean;
|
||
sensitive?: boolean;
|
||
className?: string;
|
||
};
|
||
|
||
function Field({ label, value, copyable, sensitive, className }: FieldProps) {
|
||
const [copied, setCopied] = React.useState(false);
|
||
const showValue = sensitive && value && value !== '—' ? '•'.repeat(Math.min(6, value.length)) : value;
|
||
|
||
async function handleCopy() {
|
||
if (!copyable || !value || value === '—') return;
|
||
await navigator.clipboard.writeText(value);
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 1500);
|
||
}
|
||
|
||
return (
|
||
<div className={`rounded-2xl border border-slate-200/80 bg-white/70 p-4 shadow-inner ${className ?? ''}`}>
|
||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">{label}</p>
|
||
<div className="mt-1 flex items-center justify-between gap-2">
|
||
<span className="truncate text-base font-medium text-slate-900">{showValue}</span>
|
||
{copyable ? (
|
||
<Button variant="ghost" size="icon" onClick={handleCopy} aria-label="Copy" disabled={!value || value === '—'}>
|
||
{copied ? <ShieldCheck className="h-4 w-4 text-emerald-500" /> : <Copy className="h-4 w-4 text-slate-500" />}
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function formatPhotoboothDate(iso: string | null): string {
|
||
if (!iso) {
|
||
return '—';
|
||
}
|
||
const date = new Date(iso);
|
||
if (Number.isNaN(date.getTime())) {
|
||
return '—';
|
||
}
|
||
return date.toLocaleString(undefined, {
|
||
day: '2-digit',
|
||
month: '2-digit',
|
||
year: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
}
|
||
|
||
function countUploadsInWindow(photos: TenantPhoto[], windowMs: number): number {
|
||
if (!photos.length) {
|
||
return 0;
|
||
}
|
||
const now = Date.now();
|
||
return photos.reduce((total, photo) => {
|
||
if (!photo.uploaded_at) {
|
||
return total;
|
||
}
|
||
const timestamp = Date.parse(photo.uploaded_at);
|
||
if (Number.isNaN(timestamp)) {
|
||
return total;
|
||
}
|
||
return now - timestamp <= windowMs ? total + 1 : total;
|
||
}, 0);
|
||
}
|
||
|
||
function selectLatestUpload(photos: TenantPhoto[]): TenantPhoto | null {
|
||
let latest: TenantPhoto | null = null;
|
||
let bestTime = -Infinity;
|
||
photos.forEach((photo) => {
|
||
if (!photo.uploaded_at) {
|
||
return;
|
||
}
|
||
const timestamp = Date.parse(photo.uploaded_at);
|
||
if (!Number.isNaN(timestamp) && timestamp > bestTime) {
|
||
latest = photo;
|
||
bestTime = timestamp;
|
||
}
|
||
});
|
||
return latest;
|
||
}
|