rearranged tenant admin layout, invite layouts now visible and manageable

2025-10-29 12:36:34 +01:00
parent a7bbf230fd
commit d781448914
31 changed files with 2190 additions and 1685 deletions
--- a/resources/js/admin/pages/EngagementPage.tsx
+++ b/resources/js/admin/pages/EngagementPage.tsx
@@ -0,0 +1,77 @@
+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>
+  );
+}