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

Implemented a shared mobile shell and navigation aligned to the new architecture, plus refactored the dashboard and

Browse Source 
tab flows.

  - Added a dynamic MobileShell with sticky header (notification bell with badge, quick QR when an event is
    active, event switcher for multi-event users) and stabilized bottom tabs (home, tasks, uploads, profile)
    driven by useMobileNav (resources/js/admin/mobile/components/MobileShell.tsx, components/BottomNav.tsx, hooks/
    useMobileNav.ts).
  - Centralized event handling now supports 0/1/many-event states without auto-selecting in multi-tenant mode and
    exposes helper flags/activeSlug for consumers (resources/js/admin/context/EventContext.tsx).
  - Rebuilt the mobile dashboard into explicit states: onboarding/no-event, single-event focus, and multi-event picker
    with featured/secondary actions, KPI strip, and alerts (resources/js/admin/mobile/DashboardPage.tsx).
  - Introduced tab entry points that respect event context and prompt selection when needed (resources/js/admin/
    mobile/TasksTabPage.tsx, UploadsTabPage.tsx). Refreshed tasks/uploads detail screens to use the new shell and sync
    event selection (resources/js/admin/mobile/EventTasksPage.tsx, EventPhotosPage.tsx).
  - Updated mobile routes and existing screens to the new tab keys and header/footer behavior (resources/js/admin/
    router.tsx, mobile/* pages, i18n nav/header strings).
This commit is contained in:
Codex Agent
2025-12-10 16:13:44 +01:00
parent 9930b272ca
commit 73e550ee87
19 changed files with 840 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
resources/js/admin/context/EventContext.tsx
View File

@@ -11,6 +11,9 @@ export interface EventContextValue {
isLoading: boolean;
isError: boolean;
activeEvent: TenantEvent | null;
activeSlug: string | null;
hasEvents: boolean;
hasMultipleEvents: boolean;
selectEvent: (slug: string | null) => void;
refetch: () => void;
}
@@ -58,11 +61,16 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
const hasStored = Boolean(storedSlug);
const slugExists = hasStored && events.some((event) => event.slug === storedSlug);
const fallbackSlug = events[0]?.slug;
if (!slugExists && fallbackSlug) {
if (!slugExists) {
const shouldAutoselect = events.length === 1;
const fallbackSlug = shouldAutoselect ? events[0]?.slug : null;
setStoredSlug(fallbackSlug);
window.localStorage.setItem(STORAGE_KEY, fallbackSlug);
if (fallbackSlug) {
window.localStorage.setItem(STORAGE_KEY, fallbackSlug);
} else {
window.localStorage.removeItem(STORAGE_KEY);
}
}
}, [events, storedSlug]);
@@ -76,10 +84,20 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
return matched;
}
// Fallback to the first event if the stored slug is missing or stale.
return events[0];
// Only auto-select the single available event. When multiple events exist and
// no stored slug is present we intentionally return null to let the UI prompt
// for a selection.
if (events.length === 1) {
return events[0];
}
return null;
}, [events, storedSlug]);
const hasEvents = events.length > 0;
const hasMultipleEvents = events.length > 1;
const activeSlug = activeEvent?.slug ?? null;
const selectEvent = React.useCallback((slug: string | null) => {
setStoredSlug(slug);
if (typeof window !== 'undefined') {
@@ -97,10 +115,13 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
isLoading,
isError,
activeEvent,
activeSlug,
hasEvents,
hasMultipleEvents,
selectEvent,
refetch,
}),
[events, isLoading, isError, activeEvent, selectEvent, refetch]
[events, isLoading, isError, activeEvent, activeSlug, hasEvents, hasMultipleEvents, selectEvent, refetch]
);
return <EventContext.Provider value={value}>{children}</EventContext.Provider>;

20
resources/js/admin/i18n/locales/de/mobile.json
View File

@@ -1,14 +1,28 @@
{
"nav": {
"dashboard": "Übersicht",
"events": "Events",
"home": "Start",
"tasks": "Aufgaben",
"uploads": "Uploads",
"profile": "Profil",
"alerts": "Alerts",
"profile": "Profil"
"events": "Events"
},
"actions": {
"back": "Zurück",
"close": "Schließen",
"refresh": "Aktualisieren"
},
"header": {
"appName": "Event Admin",
"selectEvent": "Wähle ein Event, um fortzufahren",
"empty": "Lege dein erstes Event an, um zu starten",
"eventSwitcher": "Event auswählen",
"noEventsTitle": "Erstes Event erstellen",
"noEventsBody": "Starte ein Event, um Aufgaben, Uploads und QR-Poster zu nutzen.",
"createEvent": "Event erstellen",
"noDate": "Datum folgt",
"active": "Aktiv",
"quickQr": "QR öffnen",
"clearSelection": "Auswahl entfernen"
}
}

20
resources/js/admin/i18n/locales/en/mobile.json
View File

@@ -1,14 +1,28 @@
{
"nav": {
"dashboard": "Dashboard",
"events": "Events",
"home": "Home",
"tasks": "Tasks",
"uploads": "Uploads",
"profile": "Profile",
"alerts": "Alerts",
"profile": "Profile"
"events": "Events"
},
"actions": {
"back": "Back",
"close": "Close",
"refresh": "Refresh"
},
"header": {
"appName": "Event Admin",
"selectEvent": "Select an event to continue",
"empty": "Create your first event to get started",
"eventSwitcher": "Choose an event",
"noEventsTitle": "Create your first event",
"noEventsBody": "Start an event to access tasks, uploads, QR posters and more.",
"createEvent": "Create event",
"noDate": "Date tbd",
"active": "Active",
"quickQr": "Quick QR",
"clearSelection": "Clear selection"
}
}

2
resources/js/admin/mobile/AlertsPage.tsx
View File

@@ -93,7 +93,7 @@ export default function MobileAlertsPage() {
</Pressable>
}
footer={
<BottomNav active="alerts" onNavigate={go} />
<BottomNav active="home" onNavigate={go} />
}
>
{error ? (

2
resources/js/admin/mobile/BrandingPage.tsx
View File

@@ -117,7 +117,7 @@ export default function MobileBrandingPage() {
</Pressable>
}
footer={
<BottomNav active="events" onNavigate={go} />
<BottomNav active="home" onNavigate={go} />
}
>
{error ? (

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

@@ -1,204 +1,365 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { CalendarDays, MapPin, Settings, Plus, Bell, ListTodo, Image as ImageIcon } from 'lucide-react';
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 { MobileScaffold } from './components/Scaffold';
import { MobileCard, PillBadge, CTAButton, KpiTile, ActionTile } from './components/Primitives';
import { BottomNav } from './components/BottomNav';
import { getEvents, TenantEvent } from '../api';
import { MobileShell, renderEventLocation } from './components/MobileShell';
import { MobileCard, CTAButton, KpiTile, ActionTile, PillBadge } from './components/Primitives';
import { adminPath } from '../constants';
import { isAuthError } from '../auth/tokens';
import { getApiErrorMessage } from '../lib/apiError';
import { useMobileNav } from './hooks/useMobileNav';
import { getEventStats, EventStats } from '../api';
import { useEventContext } from '../context/EventContext';
import { getEventStats, EventStats, TenantEvent } from '../api';
import { formatEventDate, resolveEventDisplayName } from '../lib/events';
export default function MobileDashboardPage() {
const navigate = useNavigate();
const { t } = useTranslation('management');
const [events, setEvents] = React.useState<TenantEvent[]>([]);
const [stats, setStats] = React.useState<Record<string, EventStats>>({});
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState<string | null>(null);
const { go } = useMobileNav();
const { t, i18n } = useTranslation('management');
const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading } = useEventContext();
React.useEffect(() => {
(async () => {
try {
setEvents(await getEvents());
const fetched: Record<string, EventStats> = {};
const list = await getEvents();
await Promise.all(
(list || []).map(async (ev) => {
if (!ev.slug) return;
try {
fetched[ev.slug] = await getEventStats(ev.slug);
} catch {
// ignore per-event stat failures
}
})
);
setStats(fetched);
setError(null);
} catch (err) {
if (!isAuthError(err)) {
setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Events konnten nicht geladen werden.')));
}
} finally {
setLoading(false);
}
})();
}, [t]);
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);
},
});
return (
<MobileScaffold
title={t('events.list.dashboardTitle', 'All Events Dashboard')}
onBack={() => navigate(-1)}
rightSlot={
<Pressable onPress={() => navigate(adminPath('/settings'))}>
<Settings size={18} color="#0f172a" />
</Pressable>
}
footer={
<BottomNav active="events" onNavigate={go} />
}
>
{error ? (
<MobileCard>
<Text fontWeight="700" color="#b91c1c">
{error}
</Text>
</MobileCard>
) : null}
const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
<CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/mobile/events/new'))} />
{loading ? (
if (isLoading) {
return (
<MobileShell activeTab="home" title={t('events.list.dashboardTitle', 'Dashboard')}>
<YStack space="$2">
{Array.from({ length: 3 }).map((_, idx) => (
<MobileCard key={`sk-${idx}`} height={90} opacity={0.6} />
<MobileCard key={`sk-${idx}`} height={110} opacity={0.6} />
))}
</YStack>
) : events.length === 0 ? (
<MobileCard alignItems="center" justifyContent="center" space="$2">
<Text fontSize="$md" fontWeight="700" color="#111827">
{t('events.list.empty.title', 'Noch kein Event angelegt')}
</Text>
<Text fontSize="$sm" color="#4b5563" textAlign="center">
{t('events.list.empty.description', 'Starte jetzt mit deinem ersten Event.')}
</Text>
<CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/mobile/events/new'))} />
</MobileCard>
) : (
<YStack space="$3">
<MobileCard space="$3">
<Text fontSize="$md" fontWeight="800" color="#111827">
{t('dashboard.kpis', 'Key Performance Indicators')}
</Text>
<XStack space="$2" flexWrap="wrap">
<KpiTile icon={ListTodo} label={t('events.detail.kpi.tasks', 'Tasks Completed')} value="—" />
<KpiTile icon={Bell} label={t('events.detail.kpi.guests', 'Guests Registered')} value="—" />
<KpiTile icon={ImageIcon} label={t('events.detail.kpi.photos', 'Images Uploaded')} value="—" />
</XStack>
</MobileCard>
{events.map((event) => (
<MobileCard key={event.id} borderColor="#e2e8f0" space="$2">
<XStack justifyContent="space-between" alignItems="flex-start" space="$2">
<YStack space="$1.5">
<Text fontSize="$lg" fontWeight="800" color="#111827">
{renderName(event.name)}
</Text>
<XStack alignItems="center" space="$2">
<CalendarDays size={14} color="#6b7280" />
<Text fontSize="$sm" color="#4b5563">
{formatDate(event.event_date)}
</Text>
</XStack>
<XStack alignItems="center" space="$2">
<MapPin size={14} color="#6b7280" />
<Text fontSize="$sm" color="#4b5563">
{resolveLocation(event)}
</Text>
</XStack>
<PillBadge tone={resolveTone(event)}>{resolveStatus(event, t)}</PillBadge>
</YStack>
<Pressable onPress={() => navigate(adminPath(`/mobile/events/${event.slug}`))}>
<Text fontSize="$xl" color="#9ca3af">
˅
</Text>
</Pressable>
</XStack>
</MobileShell>
);
}
<XStack marginTop="$2" space="$2" flexWrap="wrap">
<ActionTile
icon={ListTodo}
label={t('events.quick.tasks', 'Tasks')}
color="#60a5fa"
onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/tasks`))}
width="32%"
/>
<ActionTile
icon={ImageIcon}
label={t('events.quick.images', 'Images')}
color="#a855f7"
onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/photos`))}
width="32%"
/>
<ActionTile
icon={Bell}
label={t('alerts.title', 'Alerts')}
color="#fbbf24"
onPress={() => navigate(adminPath(`/mobile/alerts?event=${event.slug}`))}
width="32%"
/>
</XStack>
</MobileCard>
))}
</YStack>
)}
</MobileScaffold>
if (!hasEvents) {
return (
<MobileShell activeTab="home" title={t('events.list.dashboardTitle', 'Dashboard')}>
<OnboardingEmptyState />
</MobileShell>
);
}
if (hasMultipleEvents && !activeEvent) {
return (
<MobileShell activeTab="home" title={t('events.list.dashboardTitle', 'Dashboard')}>
<EventPickerList events={events} locale={locale} />
</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 renderName(name: TenantEvent['name']): string {
if (typeof name === 'string') return name;
if (name && typeof name === 'object') {
return name.de ?? name.en ?? Object.values(name)[0] ?? 'Unbenanntes Event';
function OnboardingEmptyState() {
const { t } = useTranslation('management');
const navigate = useNavigate();
return (
<YStack space="$3">
<MobileCard alignItems="flex-start" space="$3">
<Text fontSize="$lg" fontWeight="800" color="#111827">
{t('events.list.empty.title', 'Create your first event')}
</Text>
<Text fontSize="$sm" color="#4b5563">
{t('events.list.empty.description', 'Start an event to manage tasks, QR posters and uploads.')}
</Text>
<CTAButton label={t('events.actions.create', 'Create Event')} onPress={() => navigate(adminPath('/mobile/events/new'))} />
<CTAButton label={t('events.actions.preview', 'View Demo')} tone="ghost" onPress={() => navigate(adminPath('/mobile/events'))} />
</MobileCard>
<MobileCard space="$2">
<Text fontSize="$sm" fontWeight="800" color="#111827">
{t('events.list.empty.highlights', 'What you can do')}
</Text>
<YStack space="$1.5">
{[
t('events.quick.images', 'Review photos & uploads'),
t('events.quick.tasks', 'Assign tasks & challenges'),
t('events.quick.qr', 'Share QR posters'),
t('events.quick.guests', '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 }: { events: TenantEvent[]; locale: string }) {
const { t } = useTranslation('management');
const { selectEvent } = useEventContext();
return (
<YStack space="$2">
<Text fontSize="$sm" color="#111827" fontWeight="700">
{t('events.detail.pickEvent', 'Select an event')}
</Text>
{events.map((event) => (
<Pressable
key={event.slug}
onPress={() => selectEvent(event.slug ?? null)}
>
<MobileCard borderColor="#e5e7eb" space="$2">
<XStack alignItems="center" justifyContent="space-between">
<YStack space="$1">
<Text fontSize="$md" fontWeight="800" color="#111827">
{resolveEventDisplayName(event)}
</Text>
<Text fontSize="$xs" color="#6b7280">
{formatEventDate(event.event_date, locale) ?? t('events.status.draft', 'Draft')}
</Text>
</YStack>
<PillBadge tone={event.status === 'published' ? 'success' : 'warning'}>
{event.status === 'published' ? t('events.status.published', 'Live') : t('events.status.draft', 'Draft')}
</PillBadge>
</XStack>
</MobileCard>
</Pressable>
))}
</YStack>
);
}
function FeaturedActions({
onReviewPhotos,
onManageTasks,
onShowQr,
}: {
onReviewPhotos: () => void;
onManageTasks: () => void;
onShowQr: () => void;
}) {
const { t } = useTranslation('management');
const cards = [
{
key: 'photos',
label: t('events.quick.images', 'Review Photos'),
desc: t('events.quick.images.desc', 'Moderate uploads and highlights'),
icon: ImageIcon,
color: '#0ea5e9',
action: onReviewPhotos,
},
{
key: 'tasks',
label: t('events.quick.tasks', 'Manage Tasks & Challenges'),
desc: t('events.quick.tasks.desc', 'Assign and track progress'),
icon: ListTodo,
color: '#22c55e',
action: onManageTasks,
},
{
key: 'qr',
label: t('events.quick.qr', 'Show / Share QR Code'),
desc: t('events.quick.qr.desc', '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="#111827">
{card.label}
</Text>
<Text fontSize="$xs" color="#334155">
{card.desc}
</Text>
</YStack>
<Text fontSize="$xl" color="#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 tiles = [
{
icon: Users,
label: t('events.quick.guests', 'Guest management'),
color: '#60a5fa',
action: onGuests,
},
{
icon: QrCode,
label: t('events.quick.prints', 'Print & poster downloads'),
color: '#fbbf24',
action: onPrint,
},
{
icon: Sparkles,
label: t('events.quick.invites', 'Team / helper invites'),
color: '#a855f7',
action: onInvites,
},
{
icon: Settings,
label: t('events.quick.settings', 'Event settings'),
color: '#10b981',
action: onSettings,
},
];
return (
<YStack space="$2" marginTop="$2">
<Text fontSize="$sm" fontWeight="800" color="#111827">
{t('events.quick.more', '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="#f8fafc" borderColor="#e2e8f0" space="$1.5">
<Text fontSize="$sm" fontWeight="700" color="#0f172a">
{resolveEventDisplayName(event)}
</Text>
<Text fontSize="$xs" color="#475569">
{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');
if (!event) return null;
const kpis = [
{
label: t('events.detail.kpi.tasks', 'Open tasks'),
value: event.tasks_count ?? '—',
icon: ListTodo,
},
{
label: t('events.detail.kpi.photos', 'Photos'),
value: stats?.uploads_total ?? event.photo_count ?? '—',
icon: ImageIcon,
},
{
label: t('events.detail.kpi.guests', 'Guests'),
value: event.active_invites_count ?? event.total_invites_count ?? '—',
icon: Users,
},
];
return (
<YStack space="$2">
<Text fontSize="$sm" fontWeight="800" color="#111827">
{t('dashboard.kpis', '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="#94a3b8">
{formatEventDate(event.event_date, locale) ?? ''}
</Text>
</YStack>
);
}
function AlertsAndHints({ event, stats }: { event: TenantEvent | null; stats: EventStats | null | undefined }) {
const { t } = useTranslation('management');
if (!event) return null;
const alerts: string[] = [];
if (stats?.pending_photos) {
alerts.push(t('events.alerts.pendingPhotos', '{{count}} new uploads awaiting moderation', { count: stats.pending_photos }));
}
return 'Unbenanntes Event';
}
function formatDate(iso: string | null): string {
if (!iso) return 'Date tbd';
const date = new Date(iso);
if (Number.isNaN(date.getTime())) {
return 'Date tbd';
if (event.tasks_count) {
alerts.push(t('events.alerts.tasksOpen', '{{count}} tasks due or open', { count: event.tasks_count }));
}
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
}
function resolveLocation(event: TenantEvent): string {
const settings = (event.settings ?? {}) as Record<string, unknown>;
const candidate =
(settings.location as string | undefined) ??
(settings.address as string | undefined) ??
(settings.city as string | undefined);
if (candidate && candidate.trim()) {
return candidate;
if (alerts.length === 0) {
return null;
}
return 'Location';
}
function resolveStatus(event: TenantEvent, t: ReturnType<typeof useTranslation>['t']): string {
if (event.status === 'published') return t('events.status.published', 'Upcoming');
if (event.status === 'draft') return t('events.status.draft', 'Draft');
return t('events.status.archived', 'Past');
}
function resolveTone(event: TenantEvent): 'success' | 'warning' | 'muted' {
if (event.status === 'published') return 'success';
if (event.status === 'draft') return 'warning';
return 'muted';
return (
<YStack space="$1.5">
<Text fontSize="$sm" fontWeight="800" color="#111827">
{t('alerts.title', 'Alerts')}
</Text>
{alerts.map((alert) => (
<MobileCard key={alert} backgroundColor="#fff7ed" borderColor="#fed7aa" space="$2">
<Text fontSize="$sm" color="#9a3412">
{alert}
</Text>
</MobileCard>
))}
</YStack>
);
}

2
resources/js/admin/mobile/EventDetailPage.tsx
View File

@@ -92,7 +92,7 @@ export default function MobileEventDetailPage() {
</XStack>
}
footer={
<BottomNav active="events" onNavigate={go} />
<BottomNav active="home" onNavigate={go} />
}
>
{error ? (

2
resources/js/admin/mobile/EventFormPage.tsx
View File

@@ -106,7 +106,7 @@ export default function MobileEventFormPage() {
title={isEdit ? t('events.form.editTitle', 'Edit Event') : t('events.form.createTitle', 'Create New Event')}
onBack={() => navigate(-1)}
footer={
<BottomNav active="events" onNavigate={go} />
<BottomNav active="home" onNavigate={go} />
}
>
{error ? (

2
resources/js/admin/mobile/EventMembersPage.tsx
View File

@@ -105,7 +105,7 @@ export default function MobileEventMembersPage() {
</Pressable>
}
footer={
<BottomNav active="events" onNavigate={go} />
<BottomNav active="home" onNavigate={go} />
}
>
{error ? (

24
resources/js/admin/mobile/EventPhotosPage.tsx
View File

@@ -5,21 +5,21 @@ import { Image as ImageIcon, RefreshCcw, Search, Filter } 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 { MobileScaffold } from './components/Scaffold';
import { MobileShell } from './components/MobileShell';
import { MobileCard, PillBadge, CTAButton } from './components/Primitives';
import { BottomNav } from './components/BottomNav';
import { getEventPhotos, updatePhotoVisibility, featurePhoto, unfeaturePhoto, TenantPhoto } from '../api';
import toast from 'react-hot-toast';
import { isAuthError } from '../auth/tokens';
import { getApiErrorMessage } from '../lib/apiError';
import { useMobileNav } from './hooks/useMobileNav';
import { MobileSheet } from './components/Sheet';
import { useEventContext } from '../context/EventContext';
type FilterKey = 'all' | 'featured' | 'hidden';
export default function MobileEventPhotosPage() {
const { slug: slugParam } = useParams<{ slug?: string }>();
const slug = slugParam ?? null;
const { activeEvent, selectEvent } = useEventContext();
const slug = slugParam ?? activeEvent?.slug ?? null;
const navigate = useNavigate();
const { t } = useTranslation('management');
@@ -31,13 +31,17 @@ export default function MobileEventPhotosPage() {
const [busyId, setBusyId] = React.useState<number | null>(null);
const [totalCount, setTotalCount] = React.useState<number>(0);
const [hasMore, setHasMore] = React.useState(false);
const { go } = useMobileNav(slug);
const [search, setSearch] = React.useState('');
const [showFilters, setShowFilters] = React.useState(false);
const [uploaderFilter, setUploaderFilter] = React.useState('');
const [onlyFeatured, setOnlyFeatured] = React.useState(false);
const [onlyHidden, setOnlyHidden] = React.useState(false);
const [lightbox, setLightbox] = React.useState<TenantPhoto | null>(null);
React.useEffect(() => {
if (slugParam && activeEvent?.slug !== slugParam) {
selectEvent(slugParam);
}
}, [slugParam, activeEvent?.slug, selectEvent]);
const load = React.useCallback(async () => {
if (!slug) return;
@@ -117,10 +121,11 @@ export default function MobileEventPhotosPage() {
}
return (
<MobileScaffold
<MobileShell
activeTab="uploads"
title={t('events.photos.title', 'Photo Moderation')}
onBack={() => navigate(-1)}
rightSlot={
headerActions={
<XStack space="$3">
<Pressable onPress={() => setShowFilters(true)}>
<Filter size={18} color="#0f172a" />
@@ -130,9 +135,6 @@ export default function MobileEventPhotosPage() {
</Pressable>
</XStack>
}
footer={
<BottomNav active="events" onNavigate={go} />
}
>
{error ? (
<MobileCard>
@@ -334,6 +336,6 @@ export default function MobileEventPhotosPage() {
/>
</YStack>
</MobileSheet>
</MobileScaffold>
</MobileShell>
);
}

24
resources/js/admin/mobile/EventTasksPage.tsx
View File

@@ -6,9 +6,8 @@ import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { ListItem } from '@tamagui/list-item';
import { Pressable } from '@tamagui/react-native-web-lite';
import { MobileScaffold } from './components/Scaffold';
import { MobileShell } from './components/MobileShell';
import { MobileCard, CTAButton } from './components/Primitives';
import { BottomNav } from './components/BottomNav';
import {
getEvent,
getEventTasks,
@@ -33,7 +32,7 @@ import { getApiErrorMessage } from '../lib/apiError';
import toast from 'react-hot-toast';
import { MobileSheet } from './components/Sheet';
import { Tag } from './components/Tag';
import { useMobileNav } from './hooks/useMobileNav';
import { useEventContext } from '../context/EventContext';
const inputStyle: React.CSSProperties = {
width: '100%',
@@ -51,7 +50,8 @@ function InlineSeparator() {
export default function MobileEventTasksPage() {
const { slug: slugParam } = useParams<{ slug?: string }>();
const slug = slugParam ?? null;
const { activeEvent, selectEvent } = useEventContext();
const slug = slugParam ?? activeEvent?.slug ?? null;
const navigate = useNavigate();
const { t } = useTranslation('management');
@@ -67,7 +67,6 @@ export default function MobileEventTasksPage() {
const [busyId, setBusyId] = React.useState<number | null>(null);
const [assigningId, setAssigningId] = React.useState<number | null>(null);
const [eventId, setEventId] = React.useState<number | null>(null);
const { go } = useMobileNav(slug);
const [searchTerm, setSearchTerm] = React.useState('');
const [emotionFilter, setEmotionFilter] = React.useState<string>('');
const [expandedLibrary, setExpandedLibrary] = React.useState(false);
@@ -79,6 +78,11 @@ export default function MobileEventTasksPage() {
const [editingEmotion, setEditingEmotion] = React.useState<TenantEmotion | null>(null);
const [emotionForm, setEmotionForm] = React.useState({ name: '', color: '#e5e7eb' });
const [savingEmotion, setSavingEmotion] = React.useState(false);
React.useEffect(() => {
if (slugParam && activeEvent?.slug !== slugParam) {
selectEvent(slugParam);
}
}, [slugParam, activeEvent?.slug, selectEvent]);
const load = React.useCallback(async () => {
if (!slug) {
@@ -273,10 +277,11 @@ export default function MobileEventTasksPage() {
}
return (
<MobileScaffold
<MobileShell
activeTab="tasks"
title={t('events.tasks.title', 'Tasks & Checklists')}
onBack={() => navigate(-1)}
rightSlot={
headerActions={
<XStack space="$2">
<Pressable onPress={() => load()}>
<RefreshCcw size={18} color="#0f172a" />
@@ -286,9 +291,6 @@ export default function MobileEventTasksPage() {
</Pressable>
</XStack>
}
footer={
<BottomNav active="tasks" onNavigate={go} />
}
>
{error ? (
<MobileCard>
@@ -734,7 +736,7 @@ export default function MobileEventTasksPage() {
>
<Plus size={20} color="#ffffff" />
</Pressable>
</MobileScaffold>
</MobileShell>
);
}

2
resources/js/admin/mobile/EventsPage.tsx
View File

@@ -47,7 +47,7 @@ export default function MobileEventsPage() {
</Pressable>
}
footer={
<BottomNav active="events" onNavigate={go} />
<BottomNav active="home" onNavigate={go} />
}
>
{error ? (

2
resources/js/admin/mobile/QrPrintPage.tsx
View File

@@ -68,7 +68,7 @@ export default function MobileQrPrintPage() {
</Pressable>
}
footer={
<BottomNav active="events" onNavigate={go} />
<BottomNav active="home" onNavigate={go} />
}
>
{error ? (

79
resources/js/admin/mobile/TasksTabPage.tsx Normal file
View File

@@ -0,0 +1,79 @@
import React from 'react';
import { Navigate, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
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 { adminPath } from '../constants';
export default function MobileTasksTabPage() {
const { events, activeEvent, hasEvents, selectEvent } = useEventContext();
const { t, i18n } = useTranslation('management');
const navigate = useNavigate();
if (activeEvent?.slug) {
return <Navigate to={adminPath(`/mobile/events/${activeEvent.slug}/tasks`)} replace />;
}
if (!hasEvents) {
return (
<MobileShell activeTab="tasks" title={t('events.tasks.title', 'Tasks')}>
<MobileCard alignItems="flex-start" space="$3">
<Text fontSize="$lg" fontWeight="800" color="#111827">
{t('events.tasks.emptyTitle', 'Create an event first')}
</Text>
<Text fontSize="$sm" color="#4b5563">
{t('events.tasks.emptyBody', 'Start an event to add tasks, challenges, and checklists.')}
</Text>
<CTAButton
label={t('events.actions.create', 'Create Event')}
onPress={() => navigate(adminPath('/mobile/events/new'))}
/>
</MobileCard>
</MobileShell>
);
}
const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
return (
<MobileShell activeTab="tasks" title={t('events.tasks.title', 'Tasks')}>
<YStack space="$2">
<Text fontSize="$sm" color="#111827" fontWeight="700">
{t('events.tasks.pickEvent', 'Pick an event to manage tasks')}
</Text>
{events.map((event) => (
<Pressable
key={event.slug}
onPress={() => {
selectEvent(event.slug ?? null);
if (event.slug) {
navigate(adminPath(`/mobile/events/${event.slug}/tasks`));
}
}}
>
<MobileCard borderColor="#e5e7eb" space="$2">
<XStack alignItems="center" justifyContent="space-between">
<YStack space="$1">
<Text fontSize="$md" fontWeight="800" color="#111827">
{resolveEventDisplayName(event)}
</Text>
<Text fontSize="$xs" color="#6b7280">
{formatEventDate(event.event_date, locale) ?? t('events.status.draft', 'Draft')}
</Text>
</YStack>
<Text fontSize="$sm" color="#007AFF" fontWeight="700">
{t('events.actions.open', 'Open')}
</Text>
</XStack>
</MobileCard>
</Pressable>
))}
</YStack>
</MobileShell>
);
}

79
resources/js/admin/mobile/UploadsTabPage.tsx Normal file
View File

@@ -0,0 +1,79 @@
import React from 'react';
import { Navigate, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
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 { adminPath } from '../constants';
export default function MobileUploadsTabPage() {
const { events, activeEvent, hasEvents, selectEvent } = useEventContext();
const { t, i18n } = useTranslation('management');
const navigate = useNavigate();
if (activeEvent?.slug) {
return <Navigate to={adminPath(`/mobile/events/${activeEvent.slug}/photos`)} replace />;
}
if (!hasEvents) {
return (
<MobileShell activeTab="uploads" title={t('events.photos.title', 'Uploads')}>
<MobileCard alignItems="flex-start" space="$3">
<Text fontSize="$lg" fontWeight="800" color="#111827">
{t('events.photos.emptyTitle', 'Create an event first')}
</Text>
<Text fontSize="$sm" color="#4b5563">
{t('events.photos.emptyBody', 'Add your first event to review uploads and manage QR sharing.')}
</Text>
<CTAButton
label={t('events.actions.create', 'Create Event')}
onPress={() => navigate(adminPath('/mobile/events/new'))}
/>
</MobileCard>
</MobileShell>
);
}
const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
return (
<MobileShell activeTab="uploads" title={t('events.photos.title', 'Uploads')}>
<YStack space="$2">
<Text fontSize="$sm" color="#111827" fontWeight="700">
{t('events.photos.pickEvent', 'Pick an event to manage uploads')}
</Text>
{events.map((event) => (
<Pressable
key={event.slug}
onPress={() => {
selectEvent(event.slug ?? null);
if (event.slug) {
navigate(adminPath(`/mobile/events/${event.slug}/photos`));
}
}}
>
<MobileCard borderColor="#e5e7eb" space="$2">
<XStack alignItems="center" justifyContent="space-between">
<YStack space="$1">
<Text fontSize="$md" fontWeight="800" color="#111827">
{resolveEventDisplayName(event)}
</Text>
<Text fontSize="$xs" color="#6b7280">
{formatEventDate(event.event_date, locale) ?? t('events.status.draft', 'Draft')}
</Text>
</YStack>
<Text fontSize="$sm" color="#007AFF" fontWeight="700">
{t('events.actions.open', 'Open')}
</Text>
</XStack>
</MobileCard>
</Pressable>
))}
</YStack>
</MobileShell>
);
}

28
resources/js/admin/mobile/components/BottomNav.tsx
View File

@@ -2,21 +2,19 @@ import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { Home, CheckSquare, Bell, User } from 'lucide-react';
import { Home, CheckSquare, Image as ImageIcon, User } from 'lucide-react';
import { useTheme } from '@tamagui/core';
import { useTranslation } from 'react-i18next';
import { useAlertsBadge } from '../hooks/useAlertsBadge';
export type NavKey = 'events' | 'tasks' | 'alerts' | 'profile';
export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
const { t } = useTranslation('mobile');
const theme = useTheme();
const { count: alertCount } = useAlertsBadge();
const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
{ key: 'events', icon: Home, label: t('nav.events', 'Events') },
{ key: 'home', icon: Home, label: t('nav.home', 'Home') },
{ key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
{ key: 'alerts', icon: Bell, label: t('nav.alerts', 'Alerts') },
{ key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
{ key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
];
@@ -50,24 +48,6 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
<Text fontSize="$xs" color={activeState ? '$primary' : '#6b7280'}>
{item.label}
</Text>
{item.key === 'alerts' && alertCount > 0 ? (
<XStack
position="absolute"
top={-6}
right={-12}
minWidth={18}
height={18}
paddingHorizontal={6}
borderRadius={999}
backgroundColor="#ef4444"
alignItems="center"
justifyContent="center"
>
<Text fontSize={10} color="white" fontWeight="700">
{alertCount > 9 ? '9+' : alertCount}
</Text>
</XStack>
) : null}
</YStack>
</Pressable>
);

231
resources/js/admin/mobile/components/MobileShell.tsx Normal file
View File

@@ -0,0 +1,231 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ChevronDown, ChevronLeft, Bell, QrCode } 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 { useTranslation } from 'react-i18next';
import { useEventContext } from '../../context/EventContext';
import { BottomNav, NavKey } from './BottomNav';
import { useMobileNav } from '../hooks/useMobileNav';
import { adminPath } from '../../constants';
import { MobileSheet } from './Sheet';
import { MobileCard, PillBadge } from './Primitives';
import { useAlertsBadge } from '../hooks/useAlertsBadge';
import { formatEventDate, resolveEventDisplayName } from '../../lib/events';
import { TenantEvent } from '../../api';
type MobileShellProps = {
title?: string;
subtitle?: string;
children: React.ReactNode;
activeTab: NavKey;
onBack?: () => void;
headerActions?: React.ReactNode;
};
export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
const { events, activeEvent, hasMultipleEvents, hasEvents, selectEvent } = useEventContext();
const { go } = useMobileNav(activeEvent?.slug);
const navigate = useNavigate();
const { t, i18n } = useTranslation('mobile');
const { count: alertCount } = useAlertsBadge();
const [pickerOpen, setPickerOpen] = React.useState(false);
const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
const eventTitle = title ?? (activeEvent ? resolveEventDisplayName(activeEvent) : t('header.appName', 'Event Admin'));
const subtitleText =
subtitle ??
(activeEvent?.event_date
? formatEventDate(activeEvent.event_date, locale) ?? ''
: hasEvents
? t('header.selectEvent', 'Select an event to continue')
: t('header.empty', 'Create your first event to get started'));
const showEventSwitcher = hasMultipleEvents;
const showQr = Boolean(activeEvent?.slug);
return (
<YStack backgroundColor="#f7f8fb" minHeight="100vh">
<YStack
backgroundColor="white"
borderBottomWidth={1}
borderColor="#e5e7eb"
paddingHorizontal="$4"
paddingTop="$4"
paddingBottom="$3"
shadowColor="#0f172a"
shadowOpacity={0.06}
shadowRadius={10}
shadowOffset={{ width: 0, height: 4 }}
>
<XStack alignItems="center" justifyContent="space-between" space="$3">
<XStack alignItems="center" space="$2">
{onBack ? (
<Pressable onPress={onBack}>
<XStack alignItems="center" space="$1.5">
<ChevronLeft size={18} color="#007AFF" />
<Text fontSize="$sm" color="#007AFF" fontWeight="600">
{t('actions.back', 'Back')}
</Text>
</XStack>
</Pressable>
) : null}
<Pressable
disabled={!showEventSwitcher}
onPress={() => setPickerOpen(true)}
style={{ alignItems: 'flex-start' }}
>
<Text fontSize="$lg" fontWeight="800" color="#111827">
{eventTitle}
</Text>
{subtitleText ? (
<Text fontSize="$xs" color="#6b7280">
{subtitleText}
</Text>
) : null}
</Pressable>
{showEventSwitcher ? <ChevronDown size={14} color="#111827" /> : null}
</XStack>
<XStack alignItems="center" space="$2.5">
<Pressable onPress={() => navigate(adminPath('/mobile/alerts'))}>
<XStack
width={34}
height={34}
borderRadius={12}
backgroundColor="#f4f5f7"
alignItems="center"
justifyContent="center"
position="relative"
>
<Bell size={16} color="#111827" />
{alertCount > 0 ? (
<YStack
position="absolute"
top={-4}
right={-4}
minWidth={18}
height={18}
paddingHorizontal={6}
borderRadius={999}
backgroundColor="#ef4444"
alignItems="center"
justifyContent="center"
>
<Text fontSize={10} color="white" fontWeight="700">
{alertCount > 9 ? '9+' : alertCount}
</Text>
</YStack>
) : null}
</XStack>
</Pressable>
{showQr ? (
<Pressable onPress={() => navigate(adminPath(`/mobile/events/${activeEvent?.slug}/qr`))}>
<XStack
height={34}
paddingHorizontal="$3"
borderRadius={12}
backgroundColor="#0ea5e9"
alignItems="center"
justifyContent="center"
space="$1.5"
>
<QrCode size={16} color="white" />
<Text fontSize="$xs" fontWeight="800" color="white">
{t('header.quickQr', 'Quick QR')}
</Text>
</XStack>
</Pressable>
) : null}
{headerActions ?? null}
</XStack>
</XStack>
</YStack>
<YStack flex={1} padding="$4" paddingBottom="$10" space="$3">
{children}
</YStack>
<BottomNav active={activeTab} onNavigate={go} />
<MobileSheet
open={pickerOpen}
onClose={() => setPickerOpen(false)}
title={t('header.eventSwitcher', 'Choose an event')}
footer={null}
bottomOffsetPx={110}
>
<YStack space="$2">
{events.length === 0 ? (
<MobileCard alignItems="flex-start" space="$2">
<Text fontSize="$sm" color="#111827" fontWeight="700">
{t('header.noEventsTitle', 'Create your first event')}
</Text>
<Text fontSize="$xs" color="#4b5563">
{t('header.noEventsBody', 'Start an event to access tasks, uploads, QR posters and more.')}
</Text>
<Pressable onPress={() => navigate(adminPath('/mobile/events/new'))}>
<XStack alignItems="center" space="$2">
<Text fontSize="$sm" color="#007AFF" fontWeight="700">
{t('header.createEvent', 'Create event')}
</Text>
</XStack>
</Pressable>
</MobileCard>
) : (
events.map((event) => (
<Pressable
key={event.slug}
onPress={() => {
selectEvent(event.slug ?? null);
setPickerOpen(false);
}}
>
<XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
<YStack space="$0.5">
<Text fontSize="$sm" fontWeight="700" color="#111827">
{resolveEventDisplayName(event)}
</Text>
<Text fontSize="$xs" color="#6b7280">
{formatEventDate(event.event_date, locale) ?? t('header.noDate', 'Date tbd')}
</Text>
</YStack>
<PillBadge tone={event.slug === activeEvent?.slug ? 'success' : 'muted'}>
{event.slug === activeEvent?.slug
? t('header.active', 'Active')
: (event.status ?? '—')}
</PillBadge>
</XStack>
</Pressable>
))
)}
{activeEvent ? (
<Pressable
onPress={() => {
selectEvent(null);
setPickerOpen(false);
}}
>
<Text fontSize="$xs" color="#6b7280" textAlign="center">
{t('header.clearSelection', 'Clear selection')}
</Text>
</Pressable>
) : null}
</YStack>
</MobileSheet>
</YStack>
);
}
export function renderEventLocation(event?: TenantEvent | null): string {
if (!event) return 'Location';
const settings = (event.settings ?? {}) as Record<string, unknown>;
const candidate =
(settings.location as string | undefined) ??
(settings.address as string | undefined) ??
(settings.city as string | undefined);
if (candidate && candidate.trim()) {
return candidate;
}
return 'Location';
}

18
resources/js/admin/mobile/hooks/useMobileNav.ts
View File

@@ -11,20 +11,24 @@ export function useMobileNav(currentSlug?: string | null) {
const go = React.useCallback(
(key: NavKey) => {
if (key === 'events') {
navigate(adminPath('/mobile/events'));
return;
}
if (key === 'tasks') {
if (slug) {
navigate(adminPath(`/mobile/events/${slug}/tasks`));
} else {
navigate(adminPath('/mobile/events'));
navigate(adminPath('/mobile/tasks'));
}
return;
}
if (key === 'alerts') {
navigate(adminPath('/mobile/alerts'));
if (key === 'uploads') {
if (slug) {
navigate(adminPath(`/mobile/events/${slug}/photos`));
} else {
navigate(adminPath('/mobile/uploads'));
}
return;
}
if (key === 'home') {
navigate(adminPath('/mobile/dashboard'));
return;
}
if (key === 'profile') {

4
resources/js/admin/router.tsx
View File

@@ -35,6 +35,8 @@ const MobileAlertsPage = React.lazy(() => import('./mobile/AlertsPage'));
const MobileProfilePage = React.lazy(() => import('./mobile/ProfilePage'));
const MobileLoginPage = React.lazy(() => import('./mobile/LoginPage'));
const MobileDashboardPage = React.lazy(() => import('./mobile/DashboardPage'));
const MobileTasksTabPage = React.lazy(() => import('./mobile/TasksTabPage'));
const MobileUploadsTabPage = React.lazy(() => import('./mobile/UploadsTabPage'));
const EngagementPage = React.lazy(() => import('./pages/EngagementPage'));
const BillingPage = React.lazy(() => import('./pages/BillingPage'));
const TasksPage = React.lazy(() => import('./pages/TasksPage'));
@@ -137,6 +139,8 @@ export const router = createBrowserRouter([
{ path: 'mobile/alerts', element: <MobileAlertsPage /> },
{ path: 'mobile/profile', element: <RequireAdminAccess><MobileProfilePage /></RequireAdminAccess> },
{ path: 'mobile/dashboard', element: <MobileDashboardPage /> },
{ path: 'mobile/tasks', element: <MobileTasksTabPage /> },
{ path: 'mobile/uploads', element: <MobileUploadsTabPage /> },
{ path: 'engagement', element: <EngagementPage /> },
{ path: 'tasks', element: <TasksPage /> },
{ path: 'task-collections', element: <TaskCollectionsPage /> },