453 lines
16 KiB
TypeScript
453 lines
16 KiB
TypeScript
import React from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import { CalendarDays, Image as ImageIcon, ListTodo, QrCode, Settings, Users, Sparkles } from 'lucide-react';
|
||
import { YStack, XStack } from '@tamagui/stacks';
|
||
import { SizableText as Text } from '@tamagui/text';
|
||
import { Pressable } from '@tamagui/react-native-web-lite';
|
||
import { MobileShell, renderEventLocation } from './components/MobileShell';
|
||
import { MobileCard, CTAButton, KpiTile, ActionTile, PillBadge } from './components/Primitives';
|
||
import { adminPath } from '../constants';
|
||
import { useEventContext } from '../context/EventContext';
|
||
import { getEventStats, EventStats, TenantEvent, getEvents } from '../api';
|
||
import { formatEventDate, resolveEventDisplayName } from '../lib/events';
|
||
import { useTheme } from '@tamagui/core';
|
||
|
||
export default function MobileDashboardPage() {
|
||
const navigate = useNavigate();
|
||
const { t, i18n } = useTranslation('management');
|
||
const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading, selectEvent } = useEventContext();
|
||
const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
|
||
const [fallbackLoading, setFallbackLoading] = React.useState(false);
|
||
const [fallbackAttempted, setFallbackAttempted] = React.useState(false);
|
||
const theme = useTheme();
|
||
const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
|
||
const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#cbd5e1');
|
||
const border = String(theme.borderColor?.val ?? '#334155');
|
||
const surface = String(theme.surface?.val ?? '#ffffff');
|
||
const accentSoft = String(theme.blue3?.val ?? '#e0f2fe');
|
||
const accentText = String(theme.primary?.val ?? '#3b82f6');
|
||
|
||
const { data: stats, isLoading: statsLoading } = useQuery<EventStats | null>({
|
||
queryKey: ['mobile', 'dashboard', 'stats', activeEvent?.slug],
|
||
enabled: Boolean(activeEvent?.slug),
|
||
queryFn: async () => {
|
||
if (!activeEvent?.slug) return null;
|
||
return await getEventStats(activeEvent.slug);
|
||
},
|
||
});
|
||
|
||
const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
|
||
const { data: dashboardEvents } = useQuery<TenantEvent[]>({
|
||
queryKey: ['mobile', 'dashboard', 'events'],
|
||
queryFn: () => getEvents({ force: true }),
|
||
staleTime: 60_000,
|
||
});
|
||
const effectiveEvents = events.length ? events : dashboardEvents?.length ? dashboardEvents : fallbackEvents;
|
||
const effectiveHasEvents = hasEvents || Boolean(dashboardEvents?.length) || fallbackEvents.length > 0;
|
||
const effectiveMultiple =
|
||
hasMultipleEvents || (dashboardEvents?.length ?? 0) > 1 || fallbackEvents.length > 1;
|
||
|
||
React.useEffect(() => {
|
||
if (events.length || isLoading || fallbackLoading || fallbackAttempted) {
|
||
return;
|
||
}
|
||
setFallbackAttempted(true);
|
||
setFallbackLoading(true);
|
||
getEvents({ force: true })
|
||
.then((list: TenantEvent[]) => {
|
||
setFallbackEvents(list ?? []);
|
||
if (list?.length === 1 && !activeEvent) {
|
||
selectEvent(list[0]?.slug ?? null);
|
||
}
|
||
})
|
||
.catch(() => {
|
||
setFallbackEvents([]);
|
||
})
|
||
.finally(() => setFallbackLoading(false));
|
||
}, [events.length, isLoading, activeEvent, selectEvent, fallbackLoading, fallbackAttempted]);
|
||
|
||
if (isLoading || fallbackLoading) {
|
||
return (
|
||
<MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
|
||
<YStack space="$2">
|
||
{Array.from({ length: 3 }).map((_, idx) => (
|
||
<MobileCard key={`sk-${idx}`} height={110} opacity={0.6} />
|
||
))}
|
||
</YStack>
|
||
</MobileShell>
|
||
);
|
||
}
|
||
|
||
if (!effectiveHasEvents) {
|
||
return (
|
||
<MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
|
||
<OnboardingEmptyState />
|
||
</MobileShell>
|
||
);
|
||
}
|
||
|
||
if (effectiveMultiple && !activeEvent) {
|
||
return (
|
||
<MobileShell
|
||
activeTab="home"
|
||
title={t('mobileDashboard.title', 'Dashboard')}
|
||
subtitle={t('mobileDashboard.selectEvent', 'Select an event to continue')}
|
||
>
|
||
<EventPickerList events={effectiveEvents} locale={locale} text={text} muted={muted} border={border} />
|
||
</MobileShell>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<MobileShell
|
||
activeTab="home"
|
||
title={resolveEventDisplayName(activeEvent ?? undefined)}
|
||
subtitle={formatEventDate(activeEvent?.event_date, locale) ?? undefined}
|
||
>
|
||
<FeaturedActions
|
||
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`))}
|
||
/>
|
||
|
||
<SecondaryGrid
|
||
event={activeEvent}
|
||
onGuests={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/members`))}
|
||
onPrint={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/qr`))}
|
||
onInvites={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/members`))}
|
||
onSettings={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}`))}
|
||
/>
|
||
|
||
<KpiStrip event={activeEvent} stats={stats} loading={statsLoading} locale={locale} />
|
||
|
||
<AlertsAndHints event={activeEvent} stats={stats} />
|
||
</MobileShell>
|
||
);
|
||
}
|
||
|
||
function OnboardingEmptyState() {
|
||
const { t } = useTranslation('management');
|
||
const navigate = useNavigate();
|
||
const theme = useTheme();
|
||
const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
|
||
const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#cbd5e1');
|
||
return (
|
||
<YStack space="$3">
|
||
<MobileCard alignItems="flex-start" space="$3">
|
||
<Text fontSize="$lg" fontWeight="800" color={text}>
|
||
{t('mobileDashboard.emptyTitle', 'Create your first event')}
|
||
</Text>
|
||
<Text fontSize="$sm" color={muted}>
|
||
{t('mobileDashboard.emptyBody', 'Start an event to manage tasks, QR posters and uploads.')}
|
||
</Text>
|
||
<CTAButton label={t('mobileDashboard.ctaCreate', 'Create event')} onPress={() => navigate(adminPath('/mobile/events/new'))} />
|
||
<CTAButton label={t('mobileDashboard.ctaDemo', 'View demo')} tone="ghost" onPress={() => navigate(adminPath('/mobile/events'))} />
|
||
</MobileCard>
|
||
<MobileCard space="$2">
|
||
<Text fontSize="$sm" fontWeight="800" color={text}>
|
||
{t('mobileDashboard.highlightsTitle', 'What you can do')}
|
||
</Text>
|
||
<YStack space="$1.5">
|
||
{[
|
||
t('mobileDashboard.highlightImages', 'Review photos & uploads'),
|
||
t('mobileDashboard.highlightTasks', 'Assign tasks & challenges'),
|
||
t('mobileDashboard.highlightQr', 'Share QR posters'),
|
||
t('mobileDashboard.highlightGuests', 'Invite helpers & guests'),
|
||
].map((item) => (
|
||
<XStack key={item} alignItems="center" space="$2">
|
||
<PillBadge tone="muted">{item}</PillBadge>
|
||
</XStack>
|
||
))}
|
||
</YStack>
|
||
</MobileCard>
|
||
</YStack>
|
||
);
|
||
}
|
||
|
||
function EventPickerList({ events, locale, text, muted, border }: { events: TenantEvent[]; locale: string; text: string; muted: string; border: string }) {
|
||
const { t } = useTranslation('management');
|
||
const { selectEvent } = useEventContext();
|
||
const navigate = useNavigate();
|
||
const [localEvents, setLocalEvents] = React.useState<TenantEvent[]>(events);
|
||
const [loading, setLoading] = React.useState(false);
|
||
|
||
React.useEffect(() => {
|
||
setLocalEvents(events);
|
||
}, [events]);
|
||
|
||
React.useEffect(() => {
|
||
if (events.length > 0 || loading) {
|
||
return;
|
||
}
|
||
setLoading(true);
|
||
getEvents({ force: true })
|
||
.then((list) => setLocalEvents(list ?? []))
|
||
.catch(() => setLocalEvents([]))
|
||
.finally(() => setLoading(false));
|
||
}, [events.length, loading]);
|
||
|
||
return (
|
||
<YStack space="$2">
|
||
<Text fontSize="$sm" color={text} fontWeight="700">
|
||
{t('mobileDashboard.pickEvent', 'Select an event')}
|
||
</Text>
|
||
{localEvents.map((event) => (
|
||
<Pressable
|
||
key={event.slug}
|
||
onPress={() => {
|
||
selectEvent(event.slug ?? null);
|
||
if (event.slug) {
|
||
navigate(adminPath(`/mobile/events/${event.slug}`));
|
||
}
|
||
}}
|
||
>
|
||
<MobileCard borderColor={border} space="$2">
|
||
<XStack alignItems="center" justifyContent="space-between">
|
||
<YStack space="$1">
|
||
<Text fontSize="$md" fontWeight="800" color={text}>
|
||
{resolveEventDisplayName(event)}
|
||
</Text>
|
||
<Text fontSize="$xs" color={muted}>
|
||
{formatEventDate(event.event_date, locale) ?? t('mobileDashboard.status.draft', 'Draft')}
|
||
</Text>
|
||
</YStack>
|
||
<PillBadge tone={event.status === 'published' ? 'success' : 'warning'}>
|
||
{event.status === 'published'
|
||
? t('mobileDashboard.status.published', 'Live')
|
||
: t('mobileDashboard.status.draft', 'Draft')}
|
||
</PillBadge>
|
||
</XStack>
|
||
</MobileCard>
|
||
</Pressable>
|
||
))}
|
||
</YStack>
|
||
);
|
||
}
|
||
|
||
function FeaturedActions({
|
||
onReviewPhotos,
|
||
onManageTasks,
|
||
onShowQr,
|
||
}: {
|
||
onReviewPhotos: () => void;
|
||
onManageTasks: () => void;
|
||
onShowQr: () => void;
|
||
}) {
|
||
const { t } = useTranslation('management');
|
||
const theme = useTheme();
|
||
const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
|
||
const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#cbd5e1');
|
||
const cards = [
|
||
{
|
||
key: 'photos',
|
||
label: t('mobileDashboard.photosLabel', 'Review photos'),
|
||
desc: t('mobileDashboard.photosDesc', 'Moderate uploads and highlights'),
|
||
icon: ImageIcon,
|
||
color: '#0ea5e9',
|
||
action: onReviewPhotos,
|
||
},
|
||
{
|
||
key: 'tasks',
|
||
label: t('mobileDashboard.tasksLabel', 'Manage tasks & challenges'),
|
||
desc: t('mobileDashboard.tasksDesc', 'Assign and track progress'),
|
||
icon: ListTodo,
|
||
color: '#22c55e',
|
||
action: onManageTasks,
|
||
},
|
||
{
|
||
key: 'qr',
|
||
label: t('mobileDashboard.qrLabel', 'Show / share QR code'),
|
||
desc: t('mobileDashboard.qrDesc', 'Posters, cards, and links'),
|
||
icon: QrCode,
|
||
color: '#f59e0b',
|
||
action: onShowQr,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<YStack space="$2">
|
||
{cards.map((card) => (
|
||
<Pressable key={card.key} onPress={card.action}>
|
||
<MobileCard borderColor={`${card.color}44`} backgroundColor={`${card.color}0f`} space="$2.5">
|
||
<XStack alignItems="center" space="$3">
|
||
<XStack width={44} height={44} borderRadius={14} backgroundColor={card.color} alignItems="center" justifyContent="center">
|
||
<card.icon size={20} color="white" />
|
||
</XStack>
|
||
<YStack space="$1" flex={1}>
|
||
<Text fontSize="$md" fontWeight="800" color={text}>
|
||
{card.label}
|
||
</Text>
|
||
<Text fontSize="$xs" color={muted}>
|
||
{card.desc}
|
||
</Text>
|
||
</YStack>
|
||
<Text fontSize="$xl" color={String(theme.gray9?.val ?? '#94a3b8')}>
|
||
˃
|
||
</Text>
|
||
</XStack>
|
||
</MobileCard>
|
||
</Pressable>
|
||
))}
|
||
</YStack>
|
||
);
|
||
}
|
||
|
||
function SecondaryGrid({
|
||
event,
|
||
onGuests,
|
||
onPrint,
|
||
onInvites,
|
||
onSettings,
|
||
}: {
|
||
event: TenantEvent | null;
|
||
onGuests: () => void;
|
||
onPrint: () => void;
|
||
onInvites: () => void;
|
||
onSettings: () => void;
|
||
}) {
|
||
const { t } = useTranslation('management');
|
||
const theme = useTheme();
|
||
const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
|
||
const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#cbd5e1');
|
||
const border = String(theme.borderColor?.val ?? '#334155');
|
||
const surface = String(theme.surface?.val ?? '#0b1220');
|
||
const tiles = [
|
||
{
|
||
icon: Users,
|
||
label: t('mobileDashboard.shortcutGuests', 'Guest management'),
|
||
color: '#60a5fa',
|
||
action: onGuests,
|
||
},
|
||
{
|
||
icon: QrCode,
|
||
label: t('mobileDashboard.shortcutPrints', 'Print & poster downloads'),
|
||
color: '#fbbf24',
|
||
action: onPrint,
|
||
},
|
||
{
|
||
icon: Sparkles,
|
||
label: t('mobileDashboard.shortcutInvites', 'Team / helper invites'),
|
||
color: '#a855f7',
|
||
action: onInvites,
|
||
},
|
||
{
|
||
icon: Settings,
|
||
label: t('mobileDashboard.shortcutSettings', 'Event settings'),
|
||
color: '#10b981',
|
||
action: onSettings,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<YStack space="$2" marginTop="$2">
|
||
<Text fontSize="$sm" fontWeight="800" color={text}>
|
||
{t('mobileDashboard.shortcutsTitle', 'Shortcuts')}
|
||
</Text>
|
||
<XStack flexWrap="wrap" space="$2">
|
||
{tiles.map((tile) => (
|
||
<ActionTile key={tile.label} icon={tile.icon} label={tile.label} color={tile.color} onPress={tile.action} />
|
||
))}
|
||
</XStack>
|
||
{event ? (
|
||
<MobileCard backgroundColor={surface} borderColor={border} space="$1.5">
|
||
<Text fontSize="$sm" fontWeight="700" color={text}>
|
||
{resolveEventDisplayName(event)}
|
||
</Text>
|
||
<Text fontSize="$xs" color={muted}>
|
||
{renderEventLocation(event)}
|
||
</Text>
|
||
</MobileCard>
|
||
) : null}
|
||
</YStack>
|
||
);
|
||
}
|
||
|
||
function KpiStrip({ event, stats, loading, locale }: { event: TenantEvent | null; stats: EventStats | null | undefined; loading: boolean; locale: string }) {
|
||
const { t } = useTranslation('management');
|
||
const theme = useTheme();
|
||
const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
|
||
const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#cbd5e1');
|
||
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 ?? '—',
|
||
icon: ImageIcon,
|
||
},
|
||
{
|
||
label: t('mobileDashboard.kpiGuests', 'Guests'),
|
||
value: event.active_invites_count ?? event.total_invites_count ?? '—',
|
||
icon: Users,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<YStack space="$2">
|
||
<Text fontSize="$sm" fontWeight="800" color={text}>
|
||
{t('mobileDashboard.kpiTitle', 'Key performance indicators')}
|
||
</Text>
|
||
{loading ? (
|
||
<XStack space="$2" flexWrap="wrap">
|
||
{Array.from({ length: 3 }).map((_, idx) => (
|
||
<MobileCard key={`kpi-${idx}`} height={90} width="32%" />
|
||
))}
|
||
</XStack>
|
||
) : (
|
||
<XStack space="$2" flexWrap="wrap">
|
||
{kpis.map((kpi) => (
|
||
<KpiTile key={kpi.label} icon={kpi.icon} label={kpi.label} value={kpi.value ?? '—'} />
|
||
))}
|
||
</XStack>
|
||
)}
|
||
<Text fontSize="$xs" color={muted}>
|
||
{formatEventDate(event.event_date, locale) ?? ''}
|
||
</Text>
|
||
</YStack>
|
||
);
|
||
}
|
||
|
||
function AlertsAndHints({ event, stats }: { event: TenantEvent | null; stats: EventStats | null | undefined }) {
|
||
const { t } = useTranslation('management');
|
||
const theme = useTheme();
|
||
const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
|
||
const warningBg = String(theme.yellow3?.val ?? '#fff7ed');
|
||
const warningBorder = String(theme.yellow6?.val ?? '#fed7aa');
|
||
const warningText = String(theme.yellow11?.val ?? '#9a3412');
|
||
if (!event) return null;
|
||
|
||
const alerts: string[] = [];
|
||
if (stats?.pending_photos) {
|
||
alerts.push(t('mobileDashboard.alertPending', '{{count}} new uploads awaiting moderation', { count: stats.pending_photos }));
|
||
}
|
||
if (event.tasks_count) {
|
||
alerts.push(t('mobileDashboard.alertTasks', '{{count}} tasks due or open', { count: event.tasks_count }));
|
||
}
|
||
|
||
if (alerts.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<YStack space="$1.5">
|
||
<Text fontSize="$sm" fontWeight="800" color={text}>
|
||
{t('mobileDashboard.alertsTitle', 'Alerts')}
|
||
</Text>
|
||
{alerts.map((alert) => (
|
||
<MobileCard key={alert} backgroundColor={warningBg} borderColor={warningBorder} space="$2">
|
||
<Text fontSize="$sm" color={warningText}>
|
||
{alert}
|
||
</Text>
|
||
</MobileCard>
|
||
))}
|
||
</YStack>
|
||
);
|
||
}
|