Das Abschalten des Aufgaben-Modus wird nun sauber in der App reflektiert- die UI passt sich an und der Admin erhält einen Hinweis, dass die Aufgabenverwaltung nicht verfügbar ist

2025-12-17 13:20:48 +01:00
parent 03e37d7e23
commit efe697f155
15 changed files with 297 additions and 62 deletions
--- a/resources/js/admin/mobile/DashboardPage.tsx
+++ b/resources/js/admin/mobile/DashboardPage.tsx
@@ -11,7 +11,7 @@ import { MobileCard, CTAButton, KpiTile, ActionTile, PillBadge } from './compone
 import { adminPath } from '../constants';
 import { useEventContext } from '../context/EventContext';
 import { getEventStats, EventStats, TenantEvent, getEvents } from '../api';
-import { formatEventDate, resolveEventDisplayName } from '../lib/events';
+import { formatEventDate, resolveEngagementMode, resolveEventDisplayName } from '../lib/events';
 import { useTheme } from '@tamagui/core';

 export default function MobileDashboardPage() {
@@ -37,6 +37,8 @@ export default function MobileDashboardPage() {
      return await getEventStats(activeEvent.slug);
    },
  });
+  const tasksEnabled =
+    resolveEngagementMode(activeEvent ?? undefined) !== 'photo_only';

  const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
  const { data: dashboardEvents } = useQuery<TenantEvent[]>({
@@ -107,6 +109,7 @@ export default function MobileDashboardPage() {
      subtitle={formatEventDate(activeEvent?.event_date, locale) ?? undefined}
    >
      <FeaturedActions
+        tasksEnabled={tasksEnabled}
        onReviewPhotos={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/photos`))}
        onManageTasks={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/tasks`))}
        onShowQr={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/qr`))}
@@ -120,9 +123,15 @@ export default function MobileDashboardPage() {
        onSettings={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}`))}
      />

-      <KpiStrip event={activeEvent} stats={stats} loading={statsLoading} locale={locale} />
+      <KpiStrip
+        event={activeEvent}
+        stats={stats}
+        loading={statsLoading}
+        locale={locale}
+        tasksEnabled={tasksEnabled}
+      />

-      <AlertsAndHints event={activeEvent} stats={stats} />
+      <AlertsAndHints event={activeEvent} stats={stats} tasksEnabled={tasksEnabled} />
    </MobileShell>
  );
 }
@@ -370,10 +379,12 @@ function EventPickerList({ events, locale, text, muted, border }: { events: Tena
 }

 function FeaturedActions({
+  tasksEnabled,
  onReviewPhotos,
  onManageTasks,
  onShowQr,
 }: {
+  tasksEnabled: boolean;
  onReviewPhotos: () => void;
  onManageTasks: () => void;
  onShowQr: () => void;
@@ -394,7 +405,9 @@ function FeaturedActions({
    {
      key: 'tasks',
      label: t('mobileDashboard.tasksLabel', 'Manage tasks & challenges'),
-      desc: t('mobileDashboard.tasksDesc', 'Assign and track progress'),
+      desc: tasksEnabled
+        ? t('mobileDashboard.tasksDesc', 'Assign and track progress')
+        : t('mobileDashboard.tasksDisabledDesc', 'Guests do not see tasks (task mode off)'),
      icon: ListTodo,
      color: '#22c55e',
      action: onManageTasks,
@@ -522,7 +535,19 @@ function SecondaryGrid({
  );
 }

-function KpiStrip({ event, stats, loading, locale }: { event: TenantEvent | null; stats: EventStats | null | undefined; loading: boolean; locale: string }) {
+function KpiStrip({
+  event,
+  stats,
+  loading,
+  locale,
+  tasksEnabled,
+}: {
+  event: TenantEvent | null;
+  stats: EventStats | null | undefined;
+  loading: boolean;
+  locale: string;
+  tasksEnabled: boolean;
+}) {
  const { t } = useTranslation('management');
  const theme = useTheme();
  const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
@@ -530,11 +555,6 @@ function KpiStrip({ event, stats, loading, locale }: { event: TenantEvent | null
  if (!event) return null;

  const kpis = [
-    {
-      label: t('mobileDashboard.kpiTasks', 'Open tasks'),
-      value: event.tasks_count ?? '—',
-      icon: ListTodo,
-    },
    {
      label: t('mobileDashboard.kpiPhotos', 'Photos'),
      value: stats?.uploads_total ?? event.photo_count ?? '—',
@@ -547,6 +567,14 @@ function KpiStrip({ event, stats, loading, locale }: { event: TenantEvent | null
    },
  ];

+  if (tasksEnabled) {
+    kpis.unshift({
+      label: t('mobileDashboard.kpiTasks', 'Open tasks'),
+      value: event.tasks_count ?? '—',
+      icon: ListTodo,
+    });
+  }
+
  return (
    <YStack space="$2">
      <Text fontSize="$sm" fontWeight="800" color={text}>
@@ -572,7 +600,7 @@ function KpiStrip({ event, stats, loading, locale }: { event: TenantEvent | null
  );
 }

-function AlertsAndHints({ event, stats }: { event: TenantEvent | null; stats: EventStats | null | undefined }) {
+function AlertsAndHints({ event, stats, tasksEnabled }: { event: TenantEvent | null; stats: EventStats | null | undefined; tasksEnabled: boolean }) {
  const { t } = useTranslation('management');
  const theme = useTheme();
  const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
@@ -585,7 +613,7 @@ function AlertsAndHints({ event, stats }: { event: TenantEvent | null; stats: Ev
  if (stats?.pending_photos) {
    alerts.push(t('mobileDashboard.alertPending', '{{count}} new uploads awaiting moderation', { count: stats.pending_photos }));
  }
-  if (event.tasks_count) {
+  if (tasksEnabled && event.tasks_count) {
    alerts.push(t('mobileDashboard.alertTasks', '{{count}} tasks due or open', { count: event.tasks_count }));
  }

--- a/resources/js/admin/mobile/EventDetailPage.tsx
+++ b/resources/js/admin/mobile/EventDetailPage.tsx
@@ -13,7 +13,7 @@ import { isAuthError } from '../auth/tokens';
 import { getApiErrorMessage } from '../lib/apiError';
 import { MobileSheet } from './components/Sheet';
 import { useEventContext } from '../context/EventContext';
-import { formatEventDate, resolveEventDisplayName } from '../lib/events';
+import { formatEventDate, resolveEngagementMode, resolveEventDisplayName } from '../lib/events';
 import { isPastEvent } from './eventDate';

 export default function MobileEventDetailPage() {
@@ -66,12 +66,9 @@ export default function MobileEventDetailPage() {
    })();
  }, [slug, t]);

+  const tasksEnabled = resolveEngagementMode(event ?? activeEvent ?? null) !== 'photo_only';
+
  const kpis = [
-    {
-      label: t('events.detail.kpi.tasks', 'Active Tasks'),
-      value: event?.tasks_count ?? toolkit?.tasks?.summary?.total ?? '—',
-      icon: Sparkles,
-    },
    {
      label: t('events.detail.kpi.guests', 'Guests Registered'),
      value: toolkit?.invites?.summary.total ?? event?.active_invites_count ?? '—',
@@ -84,6 +81,14 @@ export default function MobileEventDetailPage() {
    },
  ];

+  if (tasksEnabled) {
+    kpis.unshift({
+      label: t('events.detail.kpi.tasks', 'Active Tasks'),
+      value: event?.tasks_count ?? toolkit?.tasks?.summary?.total ?? '—',
+      icon: Sparkles,
+    });
+  }
+
  return (
    <MobileShell
      activeTab="home"
@@ -217,7 +222,11 @@ export default function MobileEventDetailPage() {
        <XStack flexWrap="wrap" space="$2">
          <ActionTile
            icon={Sparkles}
-            label={t('events.quick.tasks', 'Tasks & Checklists')}
+            label={
+              tasksEnabled
+                ? t('events.quick.tasks', 'Tasks & Checklists')
+                : `${t('events.quick.tasks', 'Tasks & Checklists')} (${t('common:states.disabled', 'Disabled')})`
+            }
            color="#60a5fa"
            onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/tasks`))}
          />
--- a/resources/js/admin/mobile/EventFormPage.tsx
+++ b/resources/js/admin/mobile/EventFormPage.tsx
@@ -20,6 +20,7 @@ type FormState = {
  location: string;
  published: boolean;
  autoApproveUploads: boolean;
+  tasksEnabled: boolean;
 };

 export default function MobileEventFormPage() {
@@ -37,6 +38,7 @@ export default function MobileEventFormPage() {
    location: '',
    published: false,
    autoApproveUploads: true,
+    tasksEnabled: true,
  });
  const [eventTypes, setEventTypes] = React.useState<TenantEventType[]>([]);
  const [typesLoading, setTypesLoading] = React.useState(false);
@@ -59,6 +61,9 @@ export default function MobileEventFormPage() {
          published: data.status === 'published',
          autoApproveUploads:
            (data.settings?.guest_upload_visibility as string | undefined) === 'immediate',
+          tasksEnabled:
+            (data.settings?.engagement_mode as string | undefined) !== 'photo_only' &&
+            (data.engagement_mode as string | undefined) !== 'photo_only',
        });
        setError(null);
      } catch (err) {
@@ -102,6 +107,7 @@ export default function MobileEventFormPage() {
            settings: {
              location: form.location,
              guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review',
+              engagement_mode: form.tasksEnabled ? 'tasks' : 'photo_only',
            },
          });
          navigate(adminPath(`/mobile/events/${slug}`));
@@ -115,6 +121,7 @@ export default function MobileEventFormPage() {
          settings: {
            location: form.location,
            guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review',
+            engagement_mode: form.tasksEnabled ? 'tasks' : 'photo_only',
          },
        };
        const { event } = await createEvent(payload as any);
@@ -228,6 +235,37 @@ export default function MobileEventFormPage() {
          <Text fontSize="$xs" color="#6b7280">{t('eventForm.fields.publish.help', 'Enable if guests should see the event right away. You can change the status later.')}</Text>
        </Field>

+        <Field label={t('eventForm.fields.tasksMode.label', 'Tasks & challenges')}>
+          <XStack alignItems="center" space="$2">
+            <Switch
+              checked={form.tasksEnabled}
+              onCheckedChange={(checked) =>
+                setForm((prev) => ({ ...prev, tasksEnabled: Boolean(checked) }))
+              }
+              size="$3"
+              aria-label={t('eventForm.fields.tasksMode.label', 'Tasks & challenges')}
+            >
+              <Switch.Thumb />
+            </Switch>
+            <Text fontSize="$sm" color="#111827">
+              {form.tasksEnabled
+                ? t('common:states.enabled', 'Enabled')
+                : t('common:states.disabled', 'Disabled')}
+            </Text>
+          </XStack>
+          <Text fontSize="$xs" color="#6b7280">
+            {form.tasksEnabled
+              ? t(
+                  'eventForm.fields.tasksMode.helpOn',
+                  'Guests can see tasks, challenges and achievements.',
+                )
+              : t(
+                  'eventForm.fields.tasksMode.helpOff',
+                  'Task mode is off: guests only see the photo feed.',
+                )}
+          </Text>
+        </Field>
+
        <Field label={t('eventForm.fields.uploadVisibility.label', 'Uploads visible immediately')}>
          <XStack alignItems="center" space="$2">
            <Switch
--- a/resources/js/admin/mobile/TasksTabPage.tsx
+++ b/resources/js/admin/mobile/TasksTabPage.tsx
@@ -7,7 +7,7 @@ import { Pressable } from '@tamagui/react-native-web-lite';
 import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton } from './components/Primitives';
 import { useEventContext } from '../context/EventContext';
-import { formatEventDate, resolveEventDisplayName } from '../lib/events';
+import { formatEventDate, resolveEngagementMode, resolveEventDisplayName } from '../lib/events';
 import { adminPath } from '../constants';
 import { useTheme } from '@tamagui/core';

@@ -20,11 +20,31 @@ export default function MobileTasksTabPage() {
  const muted = String(theme.gray?.val ?? '#4b5563');
  const border = String(theme.borderColor?.val ?? '#e5e7eb');
  const primary = String(theme.primary?.val ?? '#007AFF');
+  const tasksEnabled = resolveEngagementMode(activeEvent ?? null) !== 'photo_only';

-  if (activeEvent?.slug) {
+  if (activeEvent?.slug && tasksEnabled) {
    return <Navigate to={adminPath(`/mobile/events/${activeEvent.slug}/tasks`)} replace />;
  }

+  if (activeEvent?.slug && !tasksEnabled) {
+    return (
+      <MobileShell activeTab="tasks" title={t('events.tasks.title', 'Tasks')}>
+        <MobileCard alignItems="flex-start" space="$3">
+          <Text fontSize="$lg" fontWeight="800" color={text}>
+            {t('events.tasks.disabledTitle', 'Task mode is off for this event')}
+          </Text>
+          <Text fontSize="$sm" color={muted}>
+            {t('events.tasks.disabledBody', 'Guests see only the photo feed. Enable tasks in the event settings to show them again.')}
+          </Text>
+          <CTAButton
+            label={t('events.actions.settings', 'Event settings')}
+            onPress={() => navigate(adminPath(`/mobile/events/${activeEvent.slug}/edit`))}
+          />
+        </MobileCard>
+      </MobileShell>
+    );
+  }
+
  if (!hasEvents) {
    return (
      <MobileShell activeTab="tasks" title={t('events.tasks.title', 'Tasks')}>