801 lines
33 KiB
TypeScript
801 lines
33 KiB
TypeScript
// @ts-nocheck
|
|
import React from 'react';
|
|
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
|
import { ArrowLeft, Layers, Loader2, PlusCircle, Search, Sparkles } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import toast from 'react-hot-toast';
|
|
|
|
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 { Checkbox } from '@/components/ui/checkbox';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Input } from '@/components/ui/input';
|
|
|
|
import { AdminLayout } from '../components/AdminLayout';
|
|
import {
|
|
assignTasksToEvent,
|
|
getEvent,
|
|
getEventTasks,
|
|
getTasks,
|
|
getTaskCollections,
|
|
importTaskCollection,
|
|
getEmotions,
|
|
updateEvent,
|
|
TenantEvent,
|
|
TenantTask,
|
|
TenantTaskCollection,
|
|
TenantEmotion,
|
|
} from '../api';
|
|
import { isAuthError } from '../auth/tokens';
|
|
import { ADMIN_EVENTS_PATH, ADMIN_EVENT_BRANDING_PATH, buildEngagementTabPath } from '../constants';
|
|
import { extractBrandingPalette } from '../lib/branding';
|
|
import { filterEmotionsByEventType } from '../lib/emotions';
|
|
import { buildEventTabs } from '../lib/eventTabs';
|
|
|
|
export default function EventTasksPage() {
|
|
const { t } = useTranslation('management', { keyPrefix: 'eventTasks' });
|
|
const { t: tDashboard } = useTranslation('dashboard');
|
|
const params = useParams<{ slug?: string }>();
|
|
const [searchParams] = useSearchParams();
|
|
const slug = params.slug ?? searchParams.get('slug') ?? null;
|
|
const navigate = useNavigate();
|
|
|
|
const [event, setEvent] = React.useState<TenantEvent | null>(null);
|
|
const [assignedTasks, setAssignedTasks] = React.useState<TenantTask[]>([]);
|
|
const [availableTasks, setAvailableTasks] = React.useState<TenantTask[]>([]);
|
|
const [selected, setSelected] = React.useState<number[]>([]);
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [saving, setSaving] = React.useState(false);
|
|
const [modeSaving, setModeSaving] = React.useState(false);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [tab, setTab] = React.useState<'tasks' | 'packs'>('tasks');
|
|
const [taskSearch, setTaskSearch] = React.useState('');
|
|
const [collections, setCollections] = React.useState<TenantTaskCollection[]>([]);
|
|
const [collectionsLoading, setCollectionsLoading] = React.useState(false);
|
|
const [collectionsError, setCollectionsError] = React.useState<string | null>(null);
|
|
const [importingCollectionId, setImportingCollectionId] = React.useState<number | null>(null);
|
|
const [emotions, setEmotions] = React.useState<TenantEmotion[]>([]);
|
|
const [emotionsLoading, setEmotionsLoading] = React.useState(false);
|
|
const [emotionsError, setEmotionsError] = React.useState<string | null>(null);
|
|
const hydrateTasks = React.useCallback(async (targetEvent: TenantEvent) => {
|
|
try {
|
|
const refreshed = await getEventTasks(targetEvent.id, 1);
|
|
const assignedIds = new Set(refreshed.data.map((task) => task.id));
|
|
setAssignedTasks(refreshed.data);
|
|
setAvailableTasks((prev) => prev.filter((task) => !assignedIds.has(task.id)));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('errors.assign', 'Tasks konnten nicht geladen werden.'));
|
|
}
|
|
}
|
|
}, [t]);
|
|
|
|
const statusLabels = React.useMemo(
|
|
() => ({
|
|
published: t('management.members.statuses.published', 'Veröffentlicht'),
|
|
draft: t('management.members.statuses.draft', 'Entwurf'),
|
|
}),
|
|
[t]
|
|
);
|
|
|
|
const palette = React.useMemo(() => extractBrandingPalette(event?.settings), [event?.settings]);
|
|
const relevantEmotions = React.useMemo(
|
|
() => filterEmotionsByEventType(emotions, event?.event_type_id ?? event?.event_type?.id ?? null),
|
|
[emotions, event?.event_type_id, event?.event_type?.id],
|
|
);
|
|
|
|
React.useEffect(() => {
|
|
if (!slug) {
|
|
setError(t('errors.missingSlug', 'Kein Event-Slug angegeben.'));
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const eventData = await getEvent(slug);
|
|
const [eventTasksResponse, libraryTasks] = await Promise.all([
|
|
getEventTasks(eventData.id, 1),
|
|
getTasks({ per_page: 50 }),
|
|
]);
|
|
if (cancelled) return;
|
|
setEvent(eventData);
|
|
const assignedIds = new Set(eventTasksResponse.data.map((task) => task.id));
|
|
setAssignedTasks(eventTasksResponse.data);
|
|
const eventTypeId = eventData.event_type_id ?? null;
|
|
const filteredLibraryTasks = libraryTasks.data.filter((task) => {
|
|
if (assignedIds.has(task.id)) {
|
|
return false;
|
|
}
|
|
if (eventTypeId && task.event_type_id && task.event_type_id !== eventTypeId) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
setAvailableTasks(filteredLibraryTasks);
|
|
setError(null);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('errors.load', 'Event-Tasks konnten nicht geladen werden.'));
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [slug, t]);
|
|
|
|
async function handleAssign() {
|
|
if (!event || selected.length === 0) return;
|
|
setSaving(true);
|
|
try {
|
|
await assignTasksToEvent(event.id, selected);
|
|
const refreshed = await getEventTasks(event.id, 1);
|
|
const assignedIds = new Set(refreshed.data.map((task) => task.id));
|
|
setAssignedTasks(refreshed.data);
|
|
setAvailableTasks((prev) => prev.filter((task) => !assignedIds.has(task.id)));
|
|
setSelected([]);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('errors.assign', 'Tasks konnten nicht zugewiesen werden.'));
|
|
}
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
setSelected((current) => current.filter((taskId) => availableTasks.some((task) => task.id === taskId)));
|
|
}, [availableTasks]);
|
|
|
|
const filteredAssignedTasks = React.useMemo(() => {
|
|
if (!taskSearch.trim()) {
|
|
return assignedTasks;
|
|
}
|
|
const term = taskSearch.toLowerCase();
|
|
return assignedTasks.filter((task) => `${task.title ?? ''} ${task.description ?? ''}`.toLowerCase().includes(term));
|
|
}, [assignedTasks, taskSearch]);
|
|
|
|
const eventTabs = React.useMemo(() => {
|
|
if (!event) {
|
|
return [];
|
|
}
|
|
const translateMenu = (key: string, fallback: string) => t(key, { defaultValue: fallback });
|
|
const taskBadge = loading ? undefined : assignedTasks.length;
|
|
return buildEventTabs(event, translateMenu, {
|
|
photos: event.photo_count ?? undefined,
|
|
tasks: taskBadge,
|
|
});
|
|
}, [event, assignedTasks.length, t, loading]);
|
|
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
setCollectionsLoading(true);
|
|
setCollectionsError(null);
|
|
const eventTypeSlug = event?.event_type?.slug ?? null;
|
|
const query = eventTypeSlug ? { per_page: 6, event_type: eventTypeSlug } : { per_page: 6 };
|
|
|
|
getTaskCollections(query)
|
|
.then((result) => {
|
|
if (cancelled) return;
|
|
setCollections(result.data);
|
|
})
|
|
.catch((err) => {
|
|
if (cancelled) return;
|
|
if (!isAuthError(err)) {
|
|
setCollectionsError(t('collections.error', 'Kollektionen konnten nicht geladen werden.'));
|
|
}
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) {
|
|
setCollectionsLoading(false);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [event?.event_type?.slug, t]);
|
|
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
setEmotionsLoading(true);
|
|
setEmotionsError(null);
|
|
getEmotions()
|
|
.then((list) => {
|
|
if (!cancelled) {
|
|
setEmotions(list);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
if (cancelled) {
|
|
return;
|
|
}
|
|
if (!isAuthError(err)) {
|
|
setEmotionsError(t('tasks.emotions.error', 'Emotionen konnten nicht geladen werden.'));
|
|
}
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) {
|
|
setEmotionsLoading(false);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [t]);
|
|
|
|
const handleImportCollection = React.useCallback(async (collection: TenantTaskCollection) => {
|
|
if (!slug || !event) {
|
|
return;
|
|
}
|
|
setImportingCollectionId(collection.id);
|
|
try {
|
|
await importTaskCollection(collection.id, slug);
|
|
toast.success(
|
|
t('collections.imported', {
|
|
defaultValue: 'Mission Pack "{{name}}" importiert.',
|
|
name: collection.name,
|
|
}),
|
|
);
|
|
await hydrateTasks(event);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
toast.error(t('collections.importFailed', 'Mission Pack konnte nicht importiert werden.'));
|
|
}
|
|
} finally {
|
|
setImportingCollectionId(null);
|
|
}
|
|
}, [event, hydrateTasks, slug, t]);
|
|
|
|
const tasksEnabled = React.useMemo(() => {
|
|
const mode = event?.engagement_mode ?? (event?.settings as any)?.engagement_mode;
|
|
return mode !== 'photo_only';
|
|
}, [event?.engagement_mode, event?.settings]);
|
|
|
|
async function handleModeChange(checked: boolean) {
|
|
if (!event || !slug) return;
|
|
|
|
setModeSaving(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const nextMode = checked ? 'tasks' : 'photo_only';
|
|
const updated = await updateEvent(slug, {
|
|
settings: {
|
|
...(event.settings ?? {}),
|
|
engagement_mode: nextMode,
|
|
},
|
|
});
|
|
setEvent((prev) => ({
|
|
...(prev ?? updated),
|
|
...(updated ?? {}),
|
|
engagement_mode: updated?.engagement_mode ?? nextMode,
|
|
settings: {
|
|
...(prev?.settings ?? {}),
|
|
...(updated?.settings ?? {}),
|
|
engagement_mode: nextMode,
|
|
},
|
|
}));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(
|
|
checked
|
|
? t('errors.photoOnlyEnable', 'Foto-Modus konnte nicht aktiviert werden.')
|
|
: t('errors.photoOnlyDisable', 'Foto-Modus konnte nicht deaktiviert werden.'),
|
|
);
|
|
}
|
|
} finally {
|
|
setModeSaving(false);
|
|
}
|
|
}
|
|
|
|
const actions = (
|
|
<Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
{t('actions.back', 'Zurück zur Übersicht')}
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<AdminLayout
|
|
title={t('title', 'Aufgaben & Missionen')}
|
|
subtitle={t('subtitle', 'Stelle Mission Cards und Aufgaben für dieses Event zusammen.')}
|
|
actions={actions}
|
|
tabs={eventTabs}
|
|
currentTabKey="tasks"
|
|
>
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{tDashboard('alerts.errorTitle', 'Fehler')}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{loading ? (
|
|
<TaskSkeleton />
|
|
) : !event ? (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('alerts.notFoundTitle', 'Event nicht gefunden')}</AlertTitle>
|
|
<AlertDescription>{t('alerts.notFoundDescription', 'Bitte kehre zur Eventliste zurück.')}</AlertDescription>
|
|
</Alert>
|
|
) : (
|
|
<>
|
|
<Tabs value={tab} onValueChange={(value) => setTab(value as 'tasks' | 'packs')} className="space-y-6">
|
|
<TabsList className="grid gap-2 rounded-2xl bg-slate-100/80 p-1 sm:grid-cols-2">
|
|
<TabsTrigger value="tasks">{t('tabs.tasks', 'Aufgaben')}</TabsTrigger>
|
|
<TabsTrigger value="packs">{t('tabs.packs', 'Mission Packs')}</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tasks" className="space-y-6">
|
|
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl text-slate-900">{renderName(event.name, t)}</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">
|
|
{t('eventStatus', {
|
|
status: statusLabels[event.status as keyof typeof statusLabels] ?? event.status,
|
|
})}
|
|
</CardDescription>
|
|
<div className="mt-4 flex flex-col gap-4 rounded-2xl border border-slate-200 bg-white/70 p-4 text-sm text-slate-700">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<p className="text-sm font-semibold text-slate-900">
|
|
{t('modes.title', 'Aufgaben & Foto-Modus')}
|
|
</p>
|
|
<p className="text-xs text-slate-600">
|
|
{tasksEnabled
|
|
? t('modes.tasksHint', 'Aufgaben sind aktiv. Gäste sehen Mission Cards in der App.')
|
|
: t('modes.photoOnlyHint', 'Der Foto-Modus ist aktiv. Gäste können Fotos hochladen, sehen aber keine Aufgaben.')}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs uppercase tracking-wide text-slate-500">
|
|
{tasksEnabled ? t('modes.tasks', 'Aufgaben aktiv') : t('modes.photoOnly', 'Foto-Modus')}
|
|
</span>
|
|
<Switch
|
|
checked={tasksEnabled}
|
|
onCheckedChange={handleModeChange}
|
|
disabled={modeSaving}
|
|
aria-label={t('modes.switchLabel', 'Aufgaben aktivieren/deaktivieren')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{modeSaving ? (
|
|
<div className="flex items-center gap-2 text-xs text-slate-500">
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
{t('modes.updating', 'Einstellung wird gespeichert ...')}
|
|
</div>
|
|
) : null}
|
|
<div className="grid gap-3 text-xs sm:grid-cols-3">
|
|
<SummaryPill
|
|
label={t('summary.assigned', 'Zugeordnete Tasks')}
|
|
value={assignedTasks.length}
|
|
/>
|
|
<SummaryPill
|
|
label={t('summary.library', 'Bibliothek')}
|
|
value={availableTasks.length}
|
|
/>
|
|
<SummaryPill
|
|
label={t('summary.mode', 'Aktiver Modus')}
|
|
value={tasksEnabled ? t('summary.tasksMode', 'Mission Cards') : t('summary.photoOnly', 'Nur Fotos')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pb-0">
|
|
<Alert variant="default" className="rounded-2xl border border-dashed border-emerald-200 bg-emerald-50/60 text-xs text-slate-700">
|
|
<AlertTitle className="text-sm font-semibold text-slate-900">
|
|
{t('library.hintTitle', 'Weitere Vorlagen in der Aufgaben-Bibliothek')}
|
|
</AlertTitle>
|
|
<AlertDescription className="mt-1 flex flex-wrap items-center gap-2">
|
|
<span>
|
|
{t('library.hintCopy', 'Lege eigene Aufgaben, Emotionen oder Mission Packs zentral an und nutze sie in mehreren Events.')}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="mt-1 rounded-full border-emerald-300 text-emerald-700 hover:bg-emerald-100"
|
|
onClick={() => navigate(buildEngagementTabPath('tasks'))}
|
|
>
|
|
{t('library.open', 'Aufgaben-Bibliothek öffnen')}
|
|
</Button>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</CardContent>
|
|
<CardContent className="grid gap-4 lg:grid-cols-2">
|
|
<section className="space-y-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
|
|
<Sparkles className="h-4 w-4 text-pink-500" />
|
|
{t('sections.assigned.title', 'Zugeordnete Tasks')}
|
|
</h3>
|
|
<div className="flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1">
|
|
<Search className="h-4 w-4 text-slate-500" />
|
|
<Input
|
|
value={taskSearch}
|
|
onChange={(event) => setTaskSearch(event.target.value)}
|
|
placeholder={t('sections.assigned.search', 'Aufgaben suchen...')}
|
|
className="h-8 border-0 bg-transparent text-sm focus-visible:ring-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{filteredAssignedTasks.length === 0 ? (
|
|
<EmptyState
|
|
message={
|
|
taskSearch.trim()
|
|
? t('sections.assigned.noResults', 'Keine Aufgaben zum Suchbegriff.')
|
|
: t('sections.assigned.empty', 'Noch keine Tasks zugewiesen.')
|
|
}
|
|
/>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{filteredAssignedTasks.map((task) => (
|
|
<AssignedTaskRow key={task.id} task={task} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="space-y-3">
|
|
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
|
|
<PlusCircle className="h-4 w-4 text-emerald-500" />
|
|
{t('sections.library.title', 'Tasks aus Bibliothek hinzufügen')}
|
|
</h3>
|
|
<div className="space-y-2 rounded-2xl border border-emerald-100 bg-white/90 p-3 shadow-sm max-h-72 overflow-y-auto">
|
|
{availableTasks.length === 0 ? (
|
|
<EmptyState message={t('sections.library.empty', 'Keine Tasks in der Bibliothek gefunden.')} />
|
|
) : (
|
|
availableTasks.map((task) => (
|
|
<label key={task.id} className="flex items-start gap-3 rounded-xl border border-transparent p-2 transition hover:border-emerald-200">
|
|
<Checkbox
|
|
checked={selected.includes(task.id)}
|
|
onCheckedChange={(checked) =>
|
|
setSelected((prev) =>
|
|
checked ? [...prev, task.id] : prev.filter((id) => id !== task.id)
|
|
)
|
|
}
|
|
disabled={!tasksEnabled}
|
|
/>
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-900">{task.title}</p>
|
|
{task.description && <p className="text-xs text-slate-600">{task.description}</p>}
|
|
</div>
|
|
</label>
|
|
))
|
|
)}
|
|
</div>
|
|
<Button
|
|
onClick={() => void handleAssign()}
|
|
disabled={saving || selected.length === 0 || !tasksEnabled}
|
|
>
|
|
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : t('actions.assign', 'Ausgewählte Tasks zuweisen')}
|
|
</Button>
|
|
</section>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<BrandingStoryPanel
|
|
event={event}
|
|
palette={palette}
|
|
emotions={relevantEmotions}
|
|
emotionsLoading={emotionsLoading}
|
|
emotionsError={emotionsError}
|
|
collections={collections}
|
|
onOpenBranding={() => {
|
|
if (!slug) return;
|
|
navigate(ADMIN_EVENT_BRANDING_PATH(slug));
|
|
}}
|
|
onOpenEmotions={() => navigate(buildEngagementTabPath('emotions'))}
|
|
onOpenCollections={() => navigate(buildEngagementTabPath('collections'))}
|
|
/>
|
|
</TabsContent>
|
|
<TabsContent value="packs">
|
|
<MissionPackGrid
|
|
collections={collections}
|
|
loading={collectionsLoading}
|
|
error={collectionsError}
|
|
onImport={handleImportCollection}
|
|
importingId={importingCollectionId}
|
|
onViewAll={() => navigate(buildEngagementTabPath('collections'))}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</>
|
|
)}
|
|
</AdminLayout>
|
|
);
|
|
}
|
|
|
|
function EmptyState({ message }: { message: string }) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-6 text-center">
|
|
<p className="text-xs text-slate-600">{message}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TaskSkeleton() {
|
|
return (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 2 }).map((_, index) => (
|
|
<div key={index} className="h-48 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AssignedTaskRow({ task }: { task: TenantTask }) {
|
|
const { t } = useTranslation('management');
|
|
return (
|
|
<div className="rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-sm">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm font-medium text-slate-900">{task.title}</p>
|
|
<Badge variant="outline" className="border-pink-200 text-pink-600">
|
|
{mapPriority(task.priority, (key, fallback) => t(key, { defaultValue: fallback }))}
|
|
</Badge>
|
|
</div>
|
|
{task.description && <p className="mt-1 text-xs text-slate-600">{task.description}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MissionPackGrid({
|
|
collections,
|
|
loading,
|
|
error,
|
|
onImport,
|
|
importingId,
|
|
onViewAll,
|
|
}: {
|
|
collections: TenantTaskCollection[];
|
|
loading: boolean;
|
|
error: string | null;
|
|
onImport: (collection: TenantTaskCollection) => void;
|
|
importingId: number | null;
|
|
onViewAll: () => void;
|
|
}) {
|
|
const { t } = useTranslation('management', { keyPrefix: 'eventTasks.collections' });
|
|
|
|
return (
|
|
<Card className="border border-slate-200 bg-white/90">
|
|
<CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2 text-base text-slate-900">
|
|
<Layers className="h-5 w-5 text-pink-500" />
|
|
{t('title', 'Mission Packs')}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">
|
|
{t('subtitle', 'Importiere Aufgaben-Kollektionen, die zu deinem Event passen.')}
|
|
</CardDescription>
|
|
</div>
|
|
<Button variant="outline" onClick={onViewAll}>
|
|
{t('viewAll', 'Alle Kollektionen ansehen')}
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{error ? (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('errorTitle', 'Kollektionen nicht verfügbar')}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
|
|
{loading ? (
|
|
<div className="space-y-3">
|
|
{Array.from({ length: 3 }).map((_, index) => (
|
|
<div key={index} className="h-24 animate-pulse rounded-2xl bg-slate-100/60" />
|
|
))}
|
|
</div>
|
|
) : collections.length === 0 ? (
|
|
<EmptyState message={t('empty', 'Keine empfohlenen Kollektionen gefunden.')} />
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{collections.map((collection) => (
|
|
<div key={collection.id} className="flex flex-col rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm">
|
|
<div className="flex flex-1 flex-col gap-1">
|
|
<p className="text-sm font-semibold text-slate-900">{collection.name}</p>
|
|
{collection.description ? (
|
|
<p className="text-xs text-slate-500">{collection.description}</p>
|
|
) : null}
|
|
<Badge variant="outline" className="w-fit border-slate-200 text-slate-600">
|
|
{t('tasksCount', {
|
|
defaultValue: '{{count}} Aufgaben',
|
|
count: collection.tasks_count,
|
|
})}
|
|
</Badge>
|
|
</div>
|
|
<div className="mt-4 flex justify-between text-xs text-slate-500">
|
|
<span>{collection.event_type?.name ?? t('genericType', 'Allgemein')}</span>
|
|
<span>{collection.is_global ? t('global', 'Global') : t('custom', 'Custom')}</span>
|
|
</div>
|
|
<Button
|
|
className="mt-4 rounded-full bg-brand-rose text-white"
|
|
disabled={importingId === collection.id}
|
|
onClick={() => onImport(collection)}
|
|
>
|
|
{importingId === collection.id ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
t('importCta', 'Mission Pack importieren')
|
|
)}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
type BrandingStoryPanelProps = {
|
|
event: TenantEvent;
|
|
palette: ReturnType<typeof extractBrandingPalette>;
|
|
emotions: TenantEmotion[];
|
|
emotionsLoading: boolean;
|
|
emotionsError: string | null;
|
|
collections: TenantTaskCollection[];
|
|
onOpenBranding: () => void;
|
|
onOpenEmotions: () => void;
|
|
onOpenCollections: () => void;
|
|
};
|
|
|
|
function BrandingStoryPanel({
|
|
event,
|
|
palette,
|
|
emotions,
|
|
emotionsLoading,
|
|
emotionsError,
|
|
collections,
|
|
onOpenBranding,
|
|
onOpenEmotions,
|
|
onOpenCollections,
|
|
}: BrandingStoryPanelProps) {
|
|
const { t } = useTranslation('management');
|
|
const fallbackColors = palette.colors.length ? palette.colors : ['#f472b6', '#fde68a', '#312e81'];
|
|
const spotlightEmotions = emotions.slice(0, 4);
|
|
const recommendedCollections = React.useMemo(() => collections.slice(0, 2), [collections]);
|
|
|
|
return (
|
|
<Card className="border-0 bg-white/90 shadow-xl shadow-indigo-100/50">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl text-slate-900">
|
|
{t('tasks.story.title', 'Branding & Story')}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">
|
|
{t('tasks.story.description', 'Verbinde Farben, Emotionen und Mission Packs für ein stimmiges Gäste-Erlebnis.')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4 md:grid-cols-2">
|
|
<div className="rounded-2xl border border-indigo-100 bg-indigo-50/80 p-4 text-sm text-indigo-900 shadow-inner shadow-indigo-100">
|
|
<p className="text-xs uppercase tracking-[0.3em]">
|
|
{t('events.branding.brandingTitle', 'Branding')}
|
|
</p>
|
|
<p className="mt-1 text-base font-semibold">{palette.font ?? t('events.branding.brandingFallback', 'Aktuelle Auswahl')}</p>
|
|
<p className="text-xs text-indigo-900/70">
|
|
{t('events.branding.brandingCopy', 'Passe Farben & Schriftarten im Layout-Editor an.')}
|
|
</p>
|
|
<div className="mt-3 flex gap-2">
|
|
{fallbackColors.slice(0, 4).map((color) => (
|
|
<span key={color} className="h-10 w-10 rounded-xl border border-white/70 shadow" style={{ backgroundColor: color }} />
|
|
))}
|
|
</div>
|
|
<Button size="sm" variant="secondary" className="mt-4 rounded-full bg-white/80 text-indigo-900 hover:bg-white" onClick={onOpenBranding}>
|
|
{t('events.branding.brandingCta', 'Branding anpassen')}
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-4 rounded-2xl border border-rose-100 bg-rose-50/70 p-4 text-sm text-rose-900 shadow-inner shadow-rose-100">
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs uppercase tracking-[0.3em] text-rose-400">
|
|
{t('tasks.story.emotionsTitle', 'Emotionen')}
|
|
</p>
|
|
<Badge variant="outline" className="border-rose-200 text-rose-600">
|
|
{t('tasks.story.emotionsCount', { defaultValue: '{{count}} aktiviert', count: emotions.length })}
|
|
</Badge>
|
|
</div>
|
|
{emotionsLoading ? (
|
|
<div className="mt-3 h-10 animate-pulse rounded-xl bg-white/70" />
|
|
) : emotionsError ? (
|
|
<p className="mt-3 text-xs text-rose-900/70">{emotionsError}</p>
|
|
) : spotlightEmotions.length ? (
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{spotlightEmotions.map((emotion) => (
|
|
<span
|
|
key={emotion.id}
|
|
className="flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold shadow-sm"
|
|
style={{
|
|
backgroundColor: `${emotion.color ?? '#fecdd3'}33`,
|
|
color: emotion.color ?? '#be123c',
|
|
}}
|
|
>
|
|
{emotion.icon ? <span>{emotion.icon}</span> : null}
|
|
{emotion.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="mt-3 text-xs text-rose-900/70">
|
|
{t('tasks.story.emotionsEmpty', 'Aktiviere Emotionen, um Aufgaben zu kategorisieren.')}
|
|
</p>
|
|
)}
|
|
<Button size="sm" variant="ghost" className="mt-3 h-8 px-0 text-rose-700 hover:bg-rose-100/80" onClick={onOpenEmotions}>
|
|
{t('tasks.story.emotionsCta', 'Emotionen verwalten')}
|
|
</Button>
|
|
</div>
|
|
<div className="rounded-xl border border-white/60 bg-white/80 p-3 text-sm text-slate-700">
|
|
<p className="text-xs uppercase tracking-[0.3em] text-slate-500">
|
|
{t('tasks.story.collectionsTitle', 'Mission Packs')}
|
|
</p>
|
|
{recommendedCollections.length ? (
|
|
<div className="mt-3 space-y-2">
|
|
{recommendedCollections.map((collection) => (
|
|
<div key={collection.id} className="flex items-center justify-between rounded-xl border border-slate-200 bg-white/90 px-3 py-2 text-xs">
|
|
<div>
|
|
<p className="text-sm font-semibold text-slate-900">{collection.name}</p>
|
|
{collection.event_type?.name ? (
|
|
<p className="text-[11px] text-slate-500">{collection.event_type.name}</p>
|
|
) : null}
|
|
</div>
|
|
<Badge variant="outline" className="border-slate-200 text-slate-600">
|
|
{t('tasks.story.collectionsCount', { defaultValue: '{{count}} Aufgaben', count: collection.tasks_count })}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="mt-3 text-xs text-slate-500">
|
|
{t('tasks.story.collectionsEmpty', 'Noch keine empfohlenen Mission Packs.')}
|
|
</p>
|
|
)}
|
|
<Button size="sm" variant="outline" className="mt-3 border-rose-200 text-rose-700 hover:bg-rose-50" onClick={onOpenCollections}>
|
|
{t('tasks.story.collectionsCta', 'Mission Packs anzeigen')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function SummaryPill({ label, value }: { label: string; value: string | number }) {
|
|
return (
|
|
<div className="rounded-2xl border border-slate-200 bg-white/80 p-3 text-center">
|
|
<p className="text-xs uppercase tracking-wide text-slate-500">{label}</p>
|
|
<p className="mt-1 text-lg font-semibold text-slate-900">{value}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function mapPriority(priority: TenantTask['priority'], translate: (key: string, defaultValue: string) => string): string {
|
|
switch (priority) {
|
|
case 'low':
|
|
return translate('management.eventTasks.priorities.low', 'Niedrig');
|
|
case 'high':
|
|
return translate('management.eventTasks.priorities.high', 'Hoch');
|
|
case 'urgent':
|
|
return translate('management.eventTasks.priorities.urgent', 'Dringend');
|
|
default:
|
|
return translate('management.eventTasks.priorities.medium', 'Mittel');
|
|
}
|
|
}
|
|
|
|
function renderName(name: TenantEvent['name'], translate: (key: string, defaultValue: string) => string): string {
|
|
if (typeof name === 'string') {
|
|
return name;
|
|
}
|
|
return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? translate('management.members.events.untitled', 'Unbenanntes Event');
|
|
}
|