I finished the remaining polish so the admin app now feels fully “app‑like” across the core screens.
This commit is contained in:
Codex Agent
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { CalendarDays, MapPin, Plus, Search } from 'lucide-react';
|
||||
import { CalendarDays, MapPin, Plus, Search, Camera, 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';
|
||||
@@ -14,6 +14,8 @@ import { isAuthError } from '../auth/tokens';
|
||||
import { getApiErrorMessage } from '../lib/apiError';
|
||||
import { useTheme } from '@tamagui/core';
|
||||
import { useBackNavigation } from './hooks/useBackNavigation';
|
||||
import { buildEventStatusCounts, filterEventsByStatus, resolveEventStatusKey, type EventStatusKey } from './lib/eventFilters';
|
||||
import { buildEventListStats } from './lib/eventListStats';
|
||||
|
||||
export default function MobileEventsPage() {
|
||||
const { t } = useTranslation('management');
|
||||
@@ -22,6 +24,7 @@ export default function MobileEventsPage() {
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [query, setQuery] = React.useState('');
|
||||
const [statusFilter, setStatusFilter] = React.useState<EventStatusKey>('all');
|
||||
const searchRef = React.useRef<HTMLInputElement>(null);
|
||||
const back = useBackNavigation();
|
||||
const theme = useTheme();
|
||||
@@ -92,27 +95,14 @@ export default function MobileEventsPage() {
|
||||
<CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/events/new'))} />
|
||||
</MobileCard>
|
||||
) : (
|
||||
<YStack space="$3">
|
||||
{events
|
||||
.filter((event) => {
|
||||
if (!query.trim()) return true;
|
||||
const hay = `${event.name ?? ''} ${event.location ?? ''}`.toLowerCase();
|
||||
return hay.includes(query.toLowerCase());
|
||||
})
|
||||
.map((event) => (
|
||||
<EventRow
|
||||
key={event.id}
|
||||
event={event}
|
||||
text={text}
|
||||
muted={muted}
|
||||
subtle={subtle}
|
||||
border={border}
|
||||
primary={primary}
|
||||
onOpen={(slug) => navigate(adminPath(`/mobile/events/${slug}`))}
|
||||
onEdit={(slug) => navigate(adminPath(`/mobile/events/${slug}/edit`))}
|
||||
/>
|
||||
))}
|
||||
</YStack>
|
||||
<EventsList
|
||||
events={events}
|
||||
query={query}
|
||||
statusFilter={statusFilter}
|
||||
onStatusChange={setStatusFilter}
|
||||
onOpen={(slug) => navigate(adminPath(`/mobile/events/${slug}`))}
|
||||
onEdit={(slug) => navigate(adminPath(`/mobile/events/${slug}/edit`))}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FloatingActionButton
|
||||
@@ -124,6 +114,127 @@ export default function MobileEventsPage() {
|
||||
);
|
||||
}
|
||||
|
||||
function EventsList({
|
||||
events,
|
||||
query,
|
||||
statusFilter,
|
||||
onStatusChange,
|
||||
onOpen,
|
||||
onEdit,
|
||||
}: {
|
||||
events: TenantEvent[];
|
||||
query: string;
|
||||
statusFilter: EventStatusKey;
|
||||
onStatusChange: (value: EventStatusKey) => void;
|
||||
onOpen: (slug: string) => void;
|
||||
onEdit: (slug: string) => void;
|
||||
}) {
|
||||
const { t } = useTranslation('management');
|
||||
const theme = useTheme();
|
||||
const text = String(theme.color?.val ?? '#111827');
|
||||
const muted = String(theme.gray?.val ?? '#4b5563');
|
||||
const subtle = String(theme.gray8?.val ?? '#6b7280');
|
||||
const border = String(theme.borderColor?.val ?? '#e5e7eb');
|
||||
const primary = String(theme.primary?.val ?? '#007AFF');
|
||||
const surface = String(theme.surface?.val ?? '#ffffff');
|
||||
const activeBg = String(theme.blue3?.val ?? '#e0f2fe');
|
||||
const activeBorder = String(theme.blue6?.val ?? '#bfdbfe');
|
||||
|
||||
const statusCounts = React.useMemo(() => buildEventStatusCounts(events), [events]);
|
||||
const filteredByStatus = React.useMemo(
|
||||
() => filterEventsByStatus(events, statusFilter),
|
||||
[events, statusFilter]
|
||||
);
|
||||
const filteredEvents = React.useMemo(() => {
|
||||
if (!query.trim()) return filteredByStatus;
|
||||
const needle = query.toLowerCase();
|
||||
return filteredByStatus.filter((event) => {
|
||||
const hay = `${event.name ?? ''} ${event.location ?? ''}`.toLowerCase();
|
||||
return hay.includes(needle);
|
||||
});
|
||||
}, [filteredByStatus, query]);
|
||||
|
||||
const filters: Array<{ key: EventStatusKey; label: string; count: number }> = [
|
||||
{ key: 'all', label: t('events.list.filters.all', 'All'), count: statusCounts.all },
|
||||
{ key: 'upcoming', label: t('events.list.filters.upcoming', 'Upcoming'), count: statusCounts.upcoming },
|
||||
{ key: 'draft', label: t('events.list.filters.draft', 'Draft'), count: statusCounts.draft },
|
||||
{ key: 'past', label: t('events.list.filters.past', 'Past'), count: statusCounts.past },
|
||||
];
|
||||
|
||||
return (
|
||||
<YStack space="$3">
|
||||
<XStack space="$2" flexWrap="wrap">
|
||||
{filters.map((filter) => {
|
||||
const active = filter.key === statusFilter;
|
||||
return (
|
||||
<Pressable key={filter.key} onPress={() => onStatusChange(filter.key)} style={{ flexGrow: 1 }}>
|
||||
<XStack
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
space="$1.5"
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$3"
|
||||
borderRadius={14}
|
||||
backgroundColor={active ? activeBg : surface}
|
||||
borderWidth={1}
|
||||
borderColor={active ? activeBorder : border}
|
||||
>
|
||||
<Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
|
||||
{filter.label}
|
||||
</Text>
|
||||
<PillBadge tone={active ? 'success' : 'muted'}>{filter.count}</PillBadge>
|
||||
</XStack>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</XStack>
|
||||
|
||||
{filteredEvents.length === 0 ? (
|
||||
<MobileCard alignItems="center" justifyContent="center" space="$2">
|
||||
<Text fontSize="$sm" fontWeight="700" color={text}>
|
||||
{t('events.list.empty.filtered', 'No events match this filter.')}
|
||||
</Text>
|
||||
<Text fontSize="$xs" color={muted} textAlign="center">
|
||||
{t('events.list.empty.filteredHint', 'Try a different status or clear your search.')}
|
||||
</Text>
|
||||
<CTAButton
|
||||
label={t('events.list.filters.all', 'All')}
|
||||
tone="ghost"
|
||||
fullWidth={false}
|
||||
onPress={() => onStatusChange('all')}
|
||||
/>
|
||||
</MobileCard>
|
||||
) : (
|
||||
filteredEvents.map((event) => {
|
||||
const statusKey = resolveEventStatusKey(event);
|
||||
const statusLabel =
|
||||
statusKey === 'draft'
|
||||
? t('events.list.filters.draft', 'Draft')
|
||||
: statusKey === 'past'
|
||||
? t('events.list.filters.past', 'Past')
|
||||
: t('events.list.filters.upcoming', 'Upcoming');
|
||||
const statusTone = statusKey === 'draft' ? 'warning' : statusKey === 'past' ? 'muted' : 'success';
|
||||
return (
|
||||
<EventRow
|
||||
key={event.id}
|
||||
event={event}
|
||||
text={text}
|
||||
muted={muted}
|
||||
subtle={subtle}
|
||||
border={border}
|
||||
primary={primary}
|
||||
statusLabel={statusLabel}
|
||||
statusTone={statusTone}
|
||||
onOpen={onOpen}
|
||||
onEdit={onEdit}
|
||||
/>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</YStack>
|
||||
);
|
||||
}
|
||||
|
||||
function EventRow({
|
||||
event,
|
||||
text,
|
||||
@@ -131,6 +242,8 @@ function EventRow({
|
||||
subtle,
|
||||
border,
|
||||
primary,
|
||||
statusLabel,
|
||||
statusTone,
|
||||
onOpen,
|
||||
onEdit,
|
||||
}: {
|
||||
@@ -140,10 +253,13 @@ function EventRow({
|
||||
subtle: string;
|
||||
border: string;
|
||||
primary: string;
|
||||
statusLabel: string;
|
||||
statusTone: 'success' | 'warning' | 'muted';
|
||||
onOpen: (slug: string) => void;
|
||||
onEdit: (slug: string) => void;
|
||||
}) {
|
||||
const status = resolveStatus(event);
|
||||
const { t } = useTranslation('management');
|
||||
const stats = buildEventListStats(event);
|
||||
return (
|
||||
<MobileCard borderColor={border}>
|
||||
<XStack justifyContent="space-between" alignItems="flex-start" space="$2">
|
||||
@@ -163,7 +279,27 @@ function EventRow({
|
||||
{resolveLocation(event)}
|
||||
</Text>
|
||||
</XStack>
|
||||
<PillBadge tone={status.tone}>{status.label}</PillBadge>
|
||||
<PillBadge tone={statusTone}>{statusLabel}</PillBadge>
|
||||
<XStack alignItems="center" space="$2" flexWrap="wrap">
|
||||
<EventStatChip
|
||||
icon={Camera}
|
||||
label={t('events.list.stats.photos', 'Photos')}
|
||||
value={stats.photos}
|
||||
muted={subtle}
|
||||
/>
|
||||
<EventStatChip
|
||||
icon={Users}
|
||||
label={t('events.list.stats.guests', 'Guests')}
|
||||
value={stats.guests}
|
||||
muted={subtle}
|
||||
/>
|
||||
<EventStatChip
|
||||
icon={Sparkles}
|
||||
label={t('events.list.stats.tasks', 'Tasks')}
|
||||
value={stats.tasks}
|
||||
muted={subtle}
|
||||
/>
|
||||
</XStack>
|
||||
</YStack>
|
||||
<Pressable onPress={() => onEdit(event.slug)}>
|
||||
<Text fontSize="$xl" color={muted}>
|
||||
@@ -176,7 +312,7 @@ function EventRow({
|
||||
<XStack alignItems="center" justifyContent="flex-start" space="$2">
|
||||
<Plus size={16} color={primary} />
|
||||
<Text fontSize="$sm" color={primary} fontWeight="700">
|
||||
Open event
|
||||
{t('events.list.actions.open', 'Open event')}
|
||||
</Text>
|
||||
</XStack>
|
||||
</Pressable>
|
||||
@@ -184,14 +320,25 @@ function EventRow({
|
||||
);
|
||||
}
|
||||
|
||||
function resolveStatus(event: TenantEvent): { label: string; tone: 'success' | 'warning' | 'muted' } {
|
||||
if (event.status === 'published') {
|
||||
return { label: 'Upcoming', tone: 'success' };
|
||||
}
|
||||
if (event.status === 'draft') {
|
||||
return { label: 'Draft', tone: 'warning' };
|
||||
}
|
||||
return { label: 'Past', tone: 'muted' };
|
||||
function EventStatChip({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
muted,
|
||||
}: {
|
||||
icon: typeof Camera;
|
||||
label: string;
|
||||
value: number;
|
||||
muted: string;
|
||||
}) {
|
||||
return (
|
||||
<XStack alignItems="center" space="$1">
|
||||
<Icon size={12} color={muted} />
|
||||
<Text fontSize="$xs" color={muted}>
|
||||
{value} {label}
|
||||
</Text>
|
||||
</XStack>
|
||||
);
|
||||
}
|
||||
|
||||
function renderName(name: TenantEvent['name']): string {
|
||||
|
||||
Reference in New Issue
Block a user