78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
|
|
import { AdminLayout } from '../components/AdminLayout';
|
|
import { TasksSection } from './TasksPage';
|
|
import { TaskCollectionsSection } from './TaskCollectionsPage';
|
|
import { EmotionsSection } from './EmotionsPage';
|
|
|
|
const TAB_KEYS = ['tasks', 'collections', 'emotions'] as const;
|
|
type EngagementTab = (typeof TAB_KEYS)[number];
|
|
|
|
function ensureValidTab(value: string | null): EngagementTab {
|
|
if (value && (TAB_KEYS as readonly string[]).includes(value)) {
|
|
return value as EngagementTab;
|
|
}
|
|
return 'tasks';
|
|
}
|
|
|
|
export default function EngagementPage(): JSX.Element {
|
|
const { t } = useTranslation('management');
|
|
const { t: tc } = useTranslation('common');
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
|
|
const initialTab = React.useMemo(() => ensureValidTab(searchParams.get('tab')), [searchParams]);
|
|
const [activeTab, setActiveTab] = React.useState<EngagementTab>(initialTab);
|
|
|
|
const handleTabChange = React.useCallback(
|
|
(next: string) => {
|
|
const valid = ensureValidTab(next);
|
|
setActiveTab(valid);
|
|
setSearchParams((prev) => {
|
|
const params = new URLSearchParams(prev);
|
|
params.set('tab', valid);
|
|
return params;
|
|
});
|
|
},
|
|
[setSearchParams]
|
|
);
|
|
|
|
const heading = tc('navigation.engagement');
|
|
|
|
return (
|
|
<AdminLayout
|
|
title={heading}
|
|
subtitle={t('engagement.subtitle', 'Bündle Aufgaben, Vorlagen und Emotionen für deine Events.')}
|
|
>
|
|
<Tabs value={activeTab} onValueChange={handleTabChange} className="space-y-6">
|
|
<TabsList className="grid w-full grid-cols-3 bg-white/60 shadow-sm">
|
|
<TabsTrigger value="tasks">{tc('navigation.tasks')}</TabsTrigger>
|
|
<TabsTrigger value="collections">{tc('navigation.collections')}</TabsTrigger>
|
|
<TabsTrigger value="emotions">{tc('navigation.emotions')}</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="tasks" className="space-y-6">
|
|
<TasksSection
|
|
embedded
|
|
onNavigateToCollections={() => handleTabChange('collections')}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="collections" className="space-y-6">
|
|
<TaskCollectionsSection
|
|
embedded
|
|
onNavigateToTasks={() => handleTabChange('tasks')}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="emotions" className="space-y-6">
|
|
<EmotionsSection embedded />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</AdminLayout>
|
|
);
|
|
}
|