73e550ee87
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).
59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
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, Image as ImageIcon, User } from 'lucide-react';
|
|
import { useTheme } from '@tamagui/core';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
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 items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
|
|
{ key: 'home', icon: Home, label: t('nav.home', 'Home') },
|
|
{ key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
|
|
{ key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
|
|
{ key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
|
|
];
|
|
|
|
return (
|
|
<YStack
|
|
position="fixed"
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
backgroundColor="white"
|
|
borderTopWidth={1}
|
|
borderColor="#e5e7eb"
|
|
paddingVertical="$2"
|
|
paddingHorizontal="$4"
|
|
zIndex={50}
|
|
shadowColor="#0f172a"
|
|
shadowOpacity={0.08}
|
|
shadowRadius={12}
|
|
shadowOffset={{ width: 0, height: -4 }}
|
|
// allow for safe-area inset on modern phones
|
|
style={{ paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)' }}
|
|
>
|
|
<XStack justifyContent="space-between" alignItems="center">
|
|
{items.map((item) => {
|
|
const activeState = item.key === active;
|
|
const IconCmp = item.icon;
|
|
return (
|
|
<Pressable key={item.key} onPress={() => onNavigate(item.key)}>
|
|
<YStack alignItems="center" space="$1" position="relative">
|
|
<IconCmp size={20} color={activeState ? String(theme.primary?.val ?? '#007AFF') : '#94a3b8'} />
|
|
<Text fontSize="$xs" color={activeState ? '$primary' : '#6b7280'}>
|
|
{item.label}
|
|
</Text>
|
|
</YStack>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</XStack>
|
|
</YStack>
|
|
);
|
|
}
|