soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Refactor mobile dashboard layout

Browse Source
This commit is contained in:
Codex Agent
2026-01-22 16:13:22 +01:00
parent 91bb09248a
commit eb8201ec56
2 changed files with 370 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

592
resources/js/admin/mobile/DashboardPage.tsx
View File

@@ -2,11 +2,16 @@ import React from 'react';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { Bell, CalendarDays, Camera, CheckCircle2, Download, Image as ImageIcon, Layout, ListTodo, Megaphone, QrCode, Settings, ShieldCheck, Sparkles, TrendingUp, Tv, Users, ArrowRight, AlertCircle } from 'lucide-react'; import { AlertCircle, Bell, CalendarDays, Camera, CheckCircle2, ChevronRight, Download, Image as ImageIcon, Layout, ListTodo, Megaphone, QrCode, Settings, ShieldCheck, Sparkles, TrendingUp, Tv, Users } from 'lucide-react';
import { Button } from '@tamagui/button';
import { Card } from '@tamagui/card';
import { YGroup } from '@tamagui/group';
import { ListItem } from '@tamagui/list-item';
import { YStack, XStack } from '@tamagui/stacks'; import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text'; import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite'; import { Pressable } from '@tamagui/react-native-web-lite';
import { Image } from '@tamagui/image'; import { Image } from '@tamagui/image';
import { Separator } from 'tamagui';
import { isSameDay, isPast, parseISO, differenceInDays, startOfDay } from 'date-fns'; import { isSameDay, isPast, parseISO, differenceInDays, startOfDay } from 'date-fns';
import { MobileShell } from './components/MobileShell'; import { MobileShell } from './components/MobileShell';
@@ -20,7 +25,7 @@ import { buildLimitWarnings } from '../lib/limitWarnings';
import { withAlpha } from './components/colors'; import { withAlpha } from './components/colors';
import { useEventReadiness } from './hooks/useEventReadiness'; import { useEventReadiness } from './hooks/useEventReadiness';
import { SetupChecklist } from './components/SetupChecklist'; import { SetupChecklist } from './components/SetupChecklist';
import { KpiStrip } from './components/Primitives'; import { KpiStrip, PillBadge } from './components/Primitives';
// --- HELPERS --- // --- HELPERS ---
@@ -28,89 +33,67 @@ function translateLimits(t: any) {
return (key: string, options?: any) => t(`management:limits.${key}`, key, options); return (key: string, options?: any) => t(`management:limits.${key}`, key, options);
} }
// --- MODERN PRIMITIVES --- // --- TAMAGUI-ALIGNED PRIMITIVES ---
function ModernCard({ children, style, ...rest }: any) { function DashboardCard({ children, style, ...rest }: React.ComponentProps<typeof Card>) {
const theme = useAdminTheme(); const theme = useAdminTheme();
return ( return (
<YStack <Card
backgroundColor={theme.surface} backgroundColor={theme.surface}
borderRadius={theme.cardRadius || 16} borderRadius={20}
borderWidth={1} borderWidth={1}
borderColor={theme.border} borderColor={theme.border}
padding="$3.5" padding="$3.5"
space="$2" shadowColor={theme.shadow}
style={{ shadowOpacity={0.16}
boxShadow: `0 2px 8px ${theme.shadow}`, shadowRadius={16}
...style shadowOffset={{ width: 0, height: 10 }}
}} style={style}
{...rest} {...rest}
> >
{children} {children}
</Card>
);
}
function SectionHeader({
title,
subtitle,
action,
}: {
title: string;
subtitle?: string;
action?: React.ReactNode;
}) {
const theme = useAdminTheme();
return (
<YStack space="$1.5">
<XStack alignItems="center" justifyContent="space-between">
<Text fontSize="$lg" fontWeight="800" color={theme.textStrong}>
{title}
</Text>
{action ?? null}
</XStack>
{subtitle ? (
<Text fontSize="$sm" color={theme.muted}>
{subtitle}
</Text>
) : null}
<Separator backgroundColor={theme.border} opacity={0.6} />
</YStack> </YStack>
); );
} }
function ModernButton({ label, onPress, tone = 'primary', fullWidth = true, icon, style }: any) {
const theme = useAdminTheme();
const isPrimary = tone === 'primary';
const isGhost = tone === 'ghost';
const isAccent = tone === 'accent';
const bg = isPrimary ? theme.primary : isAccent ? theme.accent : isGhost ? 'transparent' : theme.surface;
const text = isPrimary || isAccent ? 'white' : isGhost ? theme.text : theme.textStrong;
const border = isPrimary || isAccent || isGhost ? 'transparent' : theme.border;
return (
<Pressable
onPress={onPress}
style={{
width: fullWidth ? '100%' : undefined,
flex: fullWidth ? undefined : 1,
...style
}}
>
<XStack
height={48}
borderRadius={12}
alignItems="center"
justifyContent="center"
backgroundColor={bg}
borderWidth={1}
borderColor={border}
space="$2"
>
{icon}
<Text fontSize="$sm" fontWeight="700" color={text}>
{label}
</Text>
</XStack>
</Pressable>
);
}
function StatusBadge({ status }: { status: string }) { function StatusBadge({ status }: { status: string }) {
const theme = useAdminTheme();
const { t } = useTranslation('management'); const { t } = useTranslation('management');
const config =
{
published: { tone: 'success', label: t('events.status.published', 'Live') },
draft: { tone: 'warning', label: t('events.status.draft', 'Draft') },
archived: { tone: 'muted', label: t('events.status.archived', 'Archived') },
}[status] || { tone: 'muted', label: status };
const config = { return <PillBadge tone={config.tone}>{config.label}</PillBadge>;
published: { bg: '#DCFCE7', text: '#166534', label: t('events.status.published', 'Live') },
draft: { bg: '#FEF3C7', text: '#92400E', label: t('events.status.draft', 'Draft') },
archived: { bg: '#F1F5F9', text: '#475569', label: t('events.status.archived', 'Archived') },
}[status] || { bg: theme.surfaceMuted, text: theme.muted, label: status };
return (
<XStack
paddingHorizontal="$2"
paddingVertical="$1"
borderRadius={6}
backgroundColor={config.bg}
>
<Text fontSize="$xs" fontWeight="700" color={config.text}>
{config.label}
</Text>
</XStack>
);
} }
// --- MAIN PAGE COMPONENT --- // --- MAIN PAGE COMPONENT ---
@@ -119,7 +102,7 @@ export default function MobileDashboardPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const { slug: slugParam } = useParams<{ slug?: string }>(); const { slug: slugParam } = useParams<{ slug?: string }>();
const { t, i18n } = useTranslation(['management', 'dashboard', 'mobile']); const { t, i18n } = useTranslation(['management', 'dashboard', 'mobile']);
const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading, selectEvent } = useEventContext(); const { events, activeEvent, hasEvents, isLoading, selectEvent } = useEventContext();
const { user } = useAuth(); const { user } = useAuth();
const isMember = user?.role === 'member'; const isMember = user?.role === 'member';
@@ -181,7 +164,7 @@ export default function MobileDashboardPage() {
if (isLoading) { if (isLoading) {
return ( return (
<MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}> <MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
<ModernCard height={120} /> <DashboardCard height={120} />
</MobileShell> </MobileShell>
); );
} }
@@ -201,6 +184,10 @@ export default function MobileDashboardPage() {
return ( return (
<MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}> <MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
<SectionHeader
title={t('dashboard:overview.title', 'At a glance')}
subtitle={t('dashboard:overview.description', 'Key customer metrics at a glance.')}
/>
{/* 1. LIFECYCLE HERO */} {/* 1. LIFECYCLE HERO */}
<LifecycleHero <LifecycleHero
@@ -208,8 +195,6 @@ export default function MobileDashboardPage() {
stats={stats} stats={stats}
locale={locale} locale={locale}
navigate={navigate} navigate={navigate}
onSwitch={() => setEventSwitcherOpen(true)}
canSwitch={hasMultipleEvents}
readiness={readiness} readiness={readiness}
/> />
@@ -228,6 +213,10 @@ export default function MobileDashboardPage() {
<AlertsSection event={activeEvent} stats={stats} t={t} /> <AlertsSection event={activeEvent} stats={stats} t={t} />
{/* 4. UNIFIED COMMAND GRID */} {/* 4. UNIFIED COMMAND GRID */}
<SectionHeader
title={t('dashboard:quickActions.title', 'Quick actions')}
subtitle={t('dashboard:quickActions.description', 'Jump straight to the most important actions.')}
/>
<UnifiedToolGrid <UnifiedToolGrid
event={activeEvent} event={activeEvent}
navigate={navigate} navigate={navigate}
@@ -261,7 +250,7 @@ function getEventPhase(event: TenantEvent): EventPhase {
return 'setup'; return 'setup';
} }
function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch, readiness }: any) { function LifecycleHero({ event, stats, locale, navigate, readiness }: any) {
const theme = useAdminTheme(); const theme = useAdminTheme();
const { t } = useTranslation(['management', 'dashboard']); const { t } = useTranslation(['management', 'dashboard']);
@@ -271,48 +260,57 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch, re
// Header Row // Header Row
const Header = () => ( const Header = () => (
<XStack alignItems="center" justifyContent="space-between" marginBottom="$3"> <XStack alignItems="center" justifyContent="space-between">
<YStack> <YStack>
<Text fontSize="$xs" color={theme.muted} fontWeight="600" textTransform="uppercase" letterSpacing={1}> <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase" letterSpacing={1}>
{formatEventDate(event.event_date, locale)} {formatEventDate(event.event_date, locale)}
</Text> </Text>
</YStack> </YStack>
<StatusBadge status={event.status} /> <StatusBadge status={event.status} />
</XStack> </XStack>
); );
if (phase === 'live') { if (phase === 'live') {
return ( return (
<YStack> <YStack space="$2">
<Header /> <Header />
<ModernCard <DashboardCard
backgroundColor={theme.primary} backgroundColor={theme.primary}
borderWidth={0} borderColor="transparent"
style={{ backgroundImage: 'linear-gradient(135deg, #4F46E5 0%, #4338CA 100%)' }} style={{ backgroundImage: 'linear-gradient(135deg, #4F46E5 0%, #4338CA 100%)' }}
> >
<YStack space="$3">
<XStack alignItems="center" justifyContent="space-between"> <XStack alignItems="center" justifyContent="space-between">
<YStack space="$1"> <YStack space="$1">
<XStack alignItems="center" space="$2"> <XStack alignItems="center" space="$2">
<YStack width={8} height={8} borderRadius={4} backgroundColor="#22C55E" /> <YStack width={8} height={8} borderRadius={4} backgroundColor="#22C55E" />
<Text color="white" fontWeight="700" fontSize="$xs" textTransform="uppercase" letterSpacing={1}> <Text color="white" fontWeight="700" fontSize="$xs" textTransform="uppercase" letterSpacing={1}>
{t('dashboard:liveNow.status', 'Happening Now')} {t('dashboard:liveNow.status', 'Happening Now')}
</Text>
</XStack>
<Text color="white" fontSize="$lg" fontWeight="800">
{pendingPhotos > 0 ? `${pendingPhotos} ${t('management:photos.filters.pending', 'Pending')}` : t('dashboard:liveNow.description', 'Event is Running')}
</Text> </Text>
</YStack> </XStack>
{pendingPhotos > 0 && ( <Text color="white" fontSize="$lg" fontWeight="800">
<Pressable onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/control-room`))}> {pendingPhotos > 0
<YStack backgroundColor="white" borderRadius={999} paddingHorizontal="$3" paddingVertical="$2"> ? `${pendingPhotos} ${t('management:photos.filters.pending', 'Pending')}`
<Text fontSize="$xs" fontWeight="800" color={theme.primary}> : t('dashboard:liveNow.description', 'Event is Running')}
{t('management:photos.openModeration', 'Review')} </Text>
</Text> </YStack>
</YStack> {pendingPhotos > 0 ? (
</Pressable> <Button
)} onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/control-room`))}
backgroundColor="white"
borderColor="transparent"
height={36}
borderRadius={999}
paddingHorizontal="$3"
>
<Text fontSize="$xs" fontWeight="800" color={theme.primary}>
{t('management:photos.openModeration', 'Review')}
</Text>
</Button>
) : null}
</XStack> </XStack>
</ModernCard> </YStack>
</DashboardCard>
</YStack> </YStack>
); );
} }
@@ -321,33 +319,54 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch, re
if (phase === 'post') { if (phase === 'post') {
return ( return (
<YStack> <YStack space="$2">
<Header /> <Header />
<ModernCard space="$3"> <DashboardCard>
<YStack space="$3">
<XStack alignItems="center" space="$2.5"> <XStack alignItems="center" space="$2.5">
<YStack width={40} height={40} borderRadius={20} backgroundColor={theme.success} alignItems="center" justifyContent="center"> <YStack width={40} height={40} borderRadius={20} backgroundColor={theme.success} alignItems="center" justifyContent="center">
<CheckCircle2 size={20} color="white" /> <CheckCircle2 size={20} color="white" />
</YStack> </YStack>
<YStack> <YStack>
<Text fontSize="$md" fontWeight="800" color={theme.textStrong}> <Text fontSize="$md" fontWeight="800" color={theme.textStrong}>
{t('events.recap.completedTitle', 'Event completed')} {t('events.recap.completedTitle', 'Event completed')}
</Text> </Text>
<Text fontSize="$xs" color={theme.muted}>{t('events.recap.galleryOpen', 'Gallery online')}</Text> <Text fontSize="$xs" color={theme.muted}>{t('events.recap.galleryOpen', 'Gallery online')}</Text>
</YStack> </YStack>
</XStack> </XStack>
<ModernButton
label={t('events.recap.downloadAll', 'Download photos')} <Button
tone="primary" onPress={() => navigate(adminPath(`/mobile/exports`))}
icon={<Download size={16} color="white" />} backgroundColor={theme.primary}
onPress={() => navigate(adminPath(`/mobile/exports`))} borderColor="transparent"
/> height={48}
<ModernButton borderRadius={16}
label={t('events.recap.openRecap', 'Open recap')} >
tone="ghost" <XStack alignItems="center" space="$2">
icon={<ArrowRight size={16} color={theme.text} />} <Download size={16} color="white" />
<Text fontSize="$sm" fontWeight="800" color="white">
{t('events.recap.downloadAll', 'Download photos')}
</Text>
</XStack>
</Button>
<Button
onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/recap`))} onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/recap`))}
/> backgroundColor="transparent"
</ModernCard> borderColor={theme.border}
borderWidth={1}
height={48}
borderRadius={16}
>
<XStack alignItems="center" space="$2">
<Text fontSize="$sm" fontWeight="800" color={theme.textStrong}>
{t('events.recap.openRecap', 'Open recap')}
</Text>
<ChevronRight size={16} color={theme.muted} />
</XStack>
</Button>
</YStack>
</DashboardCard>
</YStack> </YStack>
); );
} }
@@ -358,43 +377,54 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch, re
const ctaAction = nextStep ? () => navigate(adminPath(nextStep.targetPath)) : undefined; const ctaAction = nextStep ? () => navigate(adminPath(nextStep.targetPath)) : undefined;
return ( return (
<YStack> <YStack space="$2">
<Header /> <Header />
<ModernCard space="$3"> <DashboardCard>
<YStack space="$3">
<XStack alignItems="center" justifyContent="space-between"> <XStack alignItems="center" justifyContent="space-between">
<YStack> <YStack>
<Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase"> <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase">
{t('dashboard:upcoming.status.planning', 'Countdown')} {t('dashboard:upcoming.status.planning', 'Countdown')}
</Text>
<Text fontSize="$2xl" fontWeight="900" color={theme.primary}>
{daysToGo}{' '}
<Text fontSize="$sm" color={theme.muted} fontWeight="500">
{t('management:galleryStatus.daysLabel', 'days')}
</Text> </Text>
<Text fontSize="$2xl" fontWeight="900" color={theme.primary}> </Text>
{daysToGo} <Text fontSize="$sm" color={theme.muted} fontWeight="500">{t('management:galleryStatus.daysLabel', 'days')}</Text> </YStack>
</Text> <YStack width={48} height={48} borderRadius={24} backgroundColor={theme.surfaceMuted} alignItems="center" justifyContent="center">
</YStack> <CalendarDays size={24} color={theme.primary} />
<YStack width={48} height={48} borderRadius={24} backgroundColor={theme.surfaceMuted} alignItems="center" justifyContent="center"> </YStack>
<CalendarDays size={24} color={theme.primary} />
</YStack>
</XStack> </XStack>
<YStack height={1} backgroundColor={theme.border} /> <Separator backgroundColor={theme.border} opacity={0.6} />
{/* Main CTA if not ready */} {!readiness.isReady ? (
{!readiness.isReady && ( <Button
<ModernButton onPress={ctaAction}
label={ctaLabel} backgroundColor={theme.primary}
tone='primary' borderColor="transparent"
icon={<ArrowRight size={16} color="white" />} height={48}
onPress={ctaAction} borderRadius={16}
/> >
)} <XStack alignItems="center" space="$2">
{readiness.isReady && ( <Text fontSize="$sm" fontWeight="800" color="white">
<XStack alignItems="center" space="$2"> {ctaLabel}
<CheckCircle2 size={18} color={theme.successText} />
<Text fontSize="$sm" color={theme.successText} fontWeight="700">
{t('management:mobileDashboard.readyForLiftoff', 'Ready for Liftoff')}
</Text> </Text>
</XStack> <ChevronRight size={16} color="white" />
</XStack>
</Button>
) : (
<XStack alignItems="center" space="$2">
<CheckCircle2 size={18} color={theme.successText} />
<Text fontSize="$sm" color={theme.successText} fontWeight="700">
{t('management:mobileDashboard.readyForLiftoff', 'Ready for Liftoff')}
</Text>
</XStack>
)} )}
</ModernCard> </YStack>
</DashboardCard>
</YStack> </YStack>
); );
} }
@@ -407,7 +437,8 @@ function PulseStrip({ event, stats }: any) {
const pendingCount = stats?.pending_photos ?? event?.pending_photo_count ?? 0; const pendingCount = stats?.pending_photos ?? event?.pending_photo_count ?? 0;
return ( return (
<YStack paddingVertical="$1"> <YStack space="$2">
<SectionHeader title={t('management:eventMenu.summary', 'Overview')} />
<KpiStrip items={[ <KpiStrip items={[
{ {
icon: ImageIcon, icon: ImageIcon,
@@ -475,47 +506,50 @@ function UnifiedToolGrid({ event, navigate, permissions, isMember, isCompleted }
].filter((section) => section.items.length > 0); ].filter((section) => section.items.length > 0);
return ( return (
<YStack space="$4"> <YStack space="$3">
{sections.map((section) => ( {sections.map((section) => (
<YStack key={section.title} space="$2"> <DashboardCard key={section.title} padding="$0">
<Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}> <YStack padding="$3.5" paddingBottom="$2.5" space="$1">
{section.title} <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
</Text> {section.title}
<XStack flexWrap="wrap" gap="$2.5"> </Text>
{section.items.map((item) => ( </YStack>
<Pressable <Separator backgroundColor={theme.border} opacity={0.6} />
key={item.label} <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: theme.border, overflow: "hidden" } as any)}>
onPress={() => navigate(adminPath(item.path))} {section.items.map((item) => {
style={{ width: '48%', flexGrow: 1 }} const iconColor = item.color || theme.textStrong;
> return (
<YStack <YGroup.Item key={item.label}>
backgroundColor={theme.surface} <ListItem
borderRadius={14} hoverTheme
padding="$3" pressTheme
space="$2.5" paddingVertical="$2"
borderWidth={1} paddingHorizontal="$3"
borderColor={theme.border} onPress={() => navigate(adminPath(item.path))}
height={90} title={
justifyContent="space-between" <XStack alignItems="center" space="$2.5">
> <XStack
<XStack justifyContent="space-between" alignItems="flex-start"> width={32}
<YStack height={32}
width={32} height={32} borderRadius={10}
borderRadius={10} backgroundColor={withAlpha(iconColor, 0.12)}
backgroundColor={item.color ? withAlpha(item.color, 0.1) : theme.surfaceMuted} alignItems="center"
alignItems="center" justifyContent="center" justifyContent="center"
> >
<item.icon size={18} color={item.color || theme.textStrong} /> <item.icon size={18} color={iconColor} />
</YStack> </XStack>
<Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
{item.label}
</Text>
</XStack> </XStack>
<Text fontSize="$sm" fontWeight="700" color={theme.textStrong}> }
{item.label} iconAfter={<ChevronRight size={16} color={theme.muted} />}
</Text> />
</YStack> </YGroup.Item>
</Pressable> );
))} })}
</XStack> </YGroup>
</YStack> </DashboardCard>
))} ))}
</YStack> </YStack>
); );
@@ -528,45 +562,52 @@ function RecentPhotosSection({ photos, navigate, slug }: { photos: TenantPhoto[]
if (!photos.length) return null; if (!photos.length) return null;
return ( return (
<YStack space="$2"> <DashboardCard>
<XStack alignItems="center" justifyContent="space-between"> <YStack space="$2">
<Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}> <XStack alignItems="center" justifyContent="space-between">
{t('photos.recentTitle', 'Latest Uploads')} <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
</Text> {t('photos.recentTitle', 'Latest Uploads')}
<Pressable onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}> </Text>
<Text fontSize="$xs" color={theme.primary} fontWeight="600">{t('common.all', 'See all')}</Text> <Button
</Pressable> onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}
</XStack> backgroundColor="transparent"
borderColor="transparent"
height={28}
paddingHorizontal={0}
>
<Text fontSize="$xs" color={theme.primary} fontWeight="700">
{t('common.all', 'See all')}
</Text>
</Button>
</XStack>
<XStack space="$2" overflow="scroll" paddingVertical="$1"> <Separator backgroundColor={theme.border} opacity={0.6} />
<XStack space="$2" overflow="scroll" paddingVertical="$1">
{photos.map((photo) => ( {photos.map((photo) => (
<Pressable key={photo.id} onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}> <Pressable key={photo.id} onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}>
<YStack <YStack
width={80} width={80}
height={80} height={80}
borderRadius={12} borderRadius={12}
overflow="hidden" overflow="hidden"
backgroundColor={theme.surfaceMuted} backgroundColor={theme.surfaceMuted}
borderWidth={1} borderWidth={1}
borderColor={theme.border} borderColor={theme.border}
> >
{photo.thumbnail_url ? ( {photo.thumbnail_url ? (
<Image <Image source={{ uri: photo.thumbnail_url }} width={80} height={80} resizeMode="cover" />
source={{ uri: photo.thumbnail_url }} ) : (
width={80} <YStack flex={1} alignItems="center" justifyContent="center">
height={80} <ImageIcon size={20} color={theme.muted} />
resizeMode="cover" </YStack>
/> )}
) : ( </YStack>
<YStack flex={1} alignItems="center" justifyContent="center"> </Pressable>
<ImageIcon size={20} color={theme.muted} />
</YStack>
)}
</YStack>
</Pressable>
))} ))}
</XStack> </XStack>
</YStack> </YStack>
</DashboardCard>
); );
} }
@@ -577,33 +618,41 @@ function AlertsSection({ event, stats, t }: any) {
if (!limitWarnings.length) return null; if (!limitWarnings.length) return null;
return ( return (
<YStack space="$2"> <DashboardCard>
{limitWarnings.map((w: any, idx: number) => { <YStack space="$2">
const isDanger = w.tone === 'danger'; <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
const bg = isDanger ? theme.dangerBg : theme.warningBg; {t('management:alertsTitle', 'Alerts')}
const border = isDanger ? theme.dangerText : theme.warningBorder; </Text>
const text = isDanger ? theme.dangerText : theme.warningText; <Separator backgroundColor={theme.border} opacity={0.6} />
const Icon = isDanger ? AlertCircle : Bell; <YStack space="$2">
{limitWarnings.map((w: any, idx: number) => {
const isDanger = w.tone === 'danger';
const bg = isDanger ? theme.dangerBg : theme.warningBg;
const border = isDanger ? theme.dangerText : theme.warningBorder;
const text = isDanger ? theme.dangerText : theme.warningText;
const Icon = isDanger ? AlertCircle : Bell;
return ( return (
<XStack <XStack
key={idx} key={idx}
backgroundColor={bg} backgroundColor={bg}
padding="$3" padding="$3"
borderRadius={12} borderRadius={12}
borderWidth={1} borderWidth={1}
borderColor={border} borderColor={border}
alignItems="center" alignItems="center"
space="$2" space="$2"
> >
<Icon size={16} color={text} /> <Icon size={16} color={text} />
<Text fontSize="$sm" color={text} fontWeight="600"> <Text fontSize="$sm" color={text} fontWeight="600">
{w.message} {w.message}
</Text> </Text>
</XStack> </XStack>
); );
})} })}
</YStack> </YStack>
</YStack>
</DashboardCard>
); );
} }
@@ -619,7 +668,20 @@ function EmptyState({ canManage, onCreate }: any) {
<Text fontSize="$sm" color={theme.muted} textAlign="center"> <Text fontSize="$sm" color={theme.muted} textAlign="center">
{t('mobile:header.noEventsBody', 'Create your first event.')} {t('mobile:header.noEventsBody', 'Create your first event.')}
</Text> </Text>
{canManage && <ModernButton label={t('management:events.list.actions.create', 'Create Event')} onPress={onCreate} />} {canManage ? (
<Button
onPress={onCreate}
backgroundColor={theme.primary}
borderColor="transparent"
height={48}
borderRadius={16}
paddingHorizontal="$4"
>
<Text fontSize="$sm" fontWeight="800" color="white">
{t('management:events.list.actions.create', 'Create Event')}
</Text>
</Button>
) : null}
</YStack> </YStack>
); );
} }

40
resources/js/admin/mobile/__tests__/DashboardPage.test.tsx
View File

@@ -194,6 +194,38 @@ vi.mock('@tamagui/stacks', () => ({
XStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>, XStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
})); }));
vi.mock('@tamagui/button', () => ({
Button: ({ children, onPress }: { children: React.ReactNode; onPress?: () => void }) => (
<button type="button" onClick={onPress}>
{children}
</button>
),
}));
vi.mock('@tamagui/list-item', () => ({
ListItem: ({
title,
subTitle,
iconAfter,
onPress,
}: {
title?: React.ReactNode;
subTitle?: React.ReactNode;
iconAfter?: React.ReactNode;
onPress?: () => void;
}) => (
<button type="button" onClick={onPress}>
{title}
{subTitle}
{iconAfter}
</button>
),
}));
vi.mock('tamagui', () => ({
Separator: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
}));
vi.mock('@tamagui/text', () => ({ vi.mock('@tamagui/text', () => ({
SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>, SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
})); }));
@@ -226,6 +258,7 @@ vi.mock('../theme', () => ({
}, },
useAdminTheme: () => ({ useAdminTheme: () => ({
textStrong: '#0f172a', textStrong: '#0f172a',
text: '#0f172a',
muted: '#64748b', muted: '#64748b',
border: '#e2e8f0', border: '#e2e8f0',
surface: '#ffffff', surface: '#ffffff',
@@ -233,6 +266,13 @@ vi.mock('../theme', () => ({
primary: '#ff5a5f', primary: '#ff5a5f',
surfaceMuted: '#f8fafc', surfaceMuted: '#f8fafc',
shadow: 'rgba(15,23,42,0.12)', shadow: 'rgba(15,23,42,0.12)',
success: '#16a34a',
successText: '#166534',
dangerBg: '#fee2e2',
dangerText: '#b91c1c',
warningBg: '#fef9c3',
warningBorder: '#fef08a',
warningText: '#92400e',
}), }),
})); }));