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

feat(admin): modernize tenant admin PWA with cockpit layout and slate theme

Browse Source 
- Replaced rainbow grid with phase-aware cockpit layout
- Implemented smart lifecycle hero with readiness logic
- Introduced dark command bar header with context pill and search placeholder
- Updated global Tamagui theme to slate/indigo palette
- Refined bottom navigation with minimalist spotlight style
This commit is contained in:
Codex Agent
2026-01-17 14:46:19 +01:00
parent d6ee372671
commit 323ddea72d
12 changed files with 17652 additions and 48608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

@@ -5,27 +5,28 @@ import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { Home, CheckSquare, Image as ImageIcon, User, LayoutDashboard } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { withAlpha } from './colors';
import { useAdminTheme } from '../theme';
import { adminPath } from '../../constants';
const ICON_SIZE = 20;
const ICON_SIZE = 24;
export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
const { t } = useTranslation('mobile');
const location = useLocation();
const { surface, border, primary, accent, muted, subtle, shadow, glassSurfaceStrong, glassBorder, glassShadow } = useAdminTheme();
const surfaceColor = glassSurfaceStrong ?? surface;
const navSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.92);
const navBorder = glassBorder ?? border;
const navShadow = glassShadow ?? shadow;
const theme = useAdminTheme();
// Modern Glass Background
const navSurface = 'rgba(255, 255, 255, 0.85)';
const navBorder = theme.border;
const navShadow = theme.shadow;
const [pressedKey, setPressedKey] = React.useState<NavKey | null>(null);
const isDeepHome = active === 'home' && location.pathname !== adminPath('/mobile/dashboard');
const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string; strokeWidth?: number }>; label: string }> = [
{ key: 'home', icon: isDeepHome ? LayoutDashboard : Home, label: t('nav.home', 'Home') },
{ key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
{ key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
@@ -41,27 +42,29 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
backgroundColor={navSurface}
borderTopWidth={1}
borderColor={navBorder}
paddingVertical="$2"
paddingVertical="$2.5"
paddingHorizontal="$4"
zIndex={50}
shadowColor={navShadow}
shadowOpacity={0.12}
shadowRadius={16}
shadowOffset={{ width: 0, height: -6 }}
// allow for safe-area inset on modern phones
shadowOpacity={0.08}
shadowRadius={20}
shadowOffset={{ width: 0, height: -8 }}
style={{
paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)',
backdropFilter: 'blur(14px)',
WebkitBackdropFilter: 'blur(14px)',
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
}}
>
<XStack width="100%" maxWidth={800} marginHorizontal="auto" justifyContent="space-between" alignItems="center">
<XStack width="100%" maxWidth={800} marginHorizontal="auto" justifyContent="space-around" alignItems="center">
{items.map((item) => {
const activeState = item.key === active;
const isPressed = pressedKey === item.key;
const IconCmp = item.icon;
const activeBg = primary;
const activeShadow = withAlpha(primary, 0.4);
// Dynamic Styles
const color = activeState ? theme.primary : theme.subtle;
const strokeWidth = activeState ? 2.5 : 2;
return (
<Pressable
key={item.key}
@@ -69,48 +72,36 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
onPressIn={() => setPressedKey(item.key)}
onPressOut={() => setPressedKey(null)}
onPointerLeave={() => setPressedKey(null)}
style={{ flex: 1 }}
>
<YStack
flexGrow={1}
flexBasis="0%"
alignItems="center"
justifyContent="center"
space="$1"
position="relative"
minWidth={88}
minHeight={64}
paddingHorizontal="$3"
paddingVertical="$2"
borderRadius={12}
backgroundColor={activeState ? activeBg : 'transparent'}
gap="$1"
minHeight={50}
style={{
boxShadow: activeState ? `0 10px 22px ${activeShadow}` : undefined,
transform: isPressed ? 'scale(0.96)' : 'scale(1)',
opacity: isPressed ? 0.9 : 1,
transition: 'transform 140ms ease, background-color 140ms ease, opacity 140ms ease',
transform: isPressed ? 'scale(0.92)' : (activeState ? 'scale(1.05)' : 'scale(1)'),
transition: 'transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
}}
>
{activeState ? (
<YStack
position="absolute"
top={6}
width={28}
height={3}
borderRadius={999}
backgroundColor={accent}
/>
) : null}
<YStack width={ICON_SIZE} height={ICON_SIZE} alignItems="center" justifyContent="center" shrink={0}>
<IconCmp size={ICON_SIZE} color={activeState ? 'white' : subtle} />
</YStack>
{activeState && (
<YStack
position="absolute"
top={-12}
width={4}
height={4}
borderRadius={2}
backgroundColor={theme.primary}
/>
)}
<IconCmp size={ICON_SIZE} color={color} strokeWidth={strokeWidth} />
<Text
fontSize="$xs"
fontWeight="700"
fontFamily="$body"
color={activeState ? 'white' : muted}
fontSize={10}
fontWeight={activeState ? "700" : "500"}
color={color}
textAlign="center"
flexShrink={1}
>
{item.label}
</Text>
@@ -121,4 +112,4 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
</XStack>
</YStack>
);
}
}

323
resources/js/admin/mobile/components/MobileShell.tsx
View File

@@ -1,9 +1,10 @@
import React, { Suspense } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { ChevronLeft, Bell, QrCode, ChevronsUpDown } from 'lucide-react';
import { ChevronLeft, Bell, QrCode, ChevronsUpDown, Search } 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 { Image } from '@tamagui/image';
import { useTranslation } from 'react-i18next';
import { useEventContext } from '../../context/EventContext';
import { BottomNav, NavKey } from './BottomNav';
@@ -39,37 +40,21 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
const { t } = useTranslation('mobile');
const { count: notificationCount } = useNotificationsBadge();
const online = useOnlineStatus();
const {
background,
surface,
border,
text,
muted,
warningBg,
warningText,
primary,
danger,
shadow,
glassSurfaceStrong,
glassBorder,
glassShadow,
appBackground,
} = useAdminTheme();
const backgroundColor = background;
const surfaceColor = surface;
const borderColor = border;
const textColor = text;
const mutedText = muted;
const headerSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.94);
const headerBorder = glassBorder ?? borderColor;
const actionSurface = glassSurfaceStrong ?? surfaceColor;
const actionBorder = glassBorder ?? borderColor;
const actionShadow = glassShadow ?? shadow;
const theme = useAdminTheme();
const backgroundColor = theme.background;
// --- DARK HEADER ---
const headerSurface = '#0F172A'; // Slate 900
const actionSurface = 'rgba(255, 255, 255, 0.1)';
const actionBorder = 'rgba(255, 255, 255, 0.05)';
const textColor = 'white';
const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
const [loadingEvents, setLoadingEvents] = React.useState(false);
const [attemptedFetch, setAttemptedFetch] = React.useState(false);
const [queuedPhotoCount, setQueuedPhotoCount] = React.useState(0);
const [isCompactHeader, setIsCompactHeader] = React.useState(false);
const effectiveEvents = events.length ? events : fallbackEvents;
const effectiveActive = activeEvent ?? (effectiveEvents.length === 1 ? effectiveEvents[0] : null);
@@ -93,13 +78,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
React.useEffect(() => {
const path = `${location.pathname}${location.search}${location.hash}`;
// Blacklist transient paths from being saved in tab history
const isBlacklisted =
location.pathname.includes('/billing/shop') ||
location.pathname.includes('/welcome');
if (!isBlacklisted) {
if (!location.pathname.includes('/billing/shop') && !location.pathname.includes('/welcome')) {
setTabHistory(activeTab, path);
}
}, [activeTab, location.hash, location.pathname, location.search]);
@@ -116,44 +95,18 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
React.useEffect(() => {
const handleFocus = () => refreshQueuedActions();
window.addEventListener('focus', handleFocus);
return () => {
window.removeEventListener('focus', handleFocus);
};
return () => window.removeEventListener('focus', handleFocus);
}, [refreshQueuedActions]);
React.useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) {
return;
}
const query = window.matchMedia('(max-width: 520px)');
const handleChange = (event: MediaQueryListEvent) => {
setIsCompactHeader(event.matches);
};
setIsCompactHeader(query.matches);
query.addEventListener?.('change', handleChange);
return () => {
query.removeEventListener?.('change', handleChange);
};
}, []);
const pageTitle = title ?? t('header.appName', 'Event Admin');
const eventContext = !isCompactHeader
? effectiveActive
? resolveEventDisplayName(effectiveActive)
: hasMultipleEvents
? t('header.selectEvent', 'Select an event')
: null
: null;
const subtitleText = subtitle ?? eventContext ?? '';
const isEventsIndex = location.pathname === ADMIN_EVENTS_PATH;
const canSwitchEvents = hasMultipleEvents && !isEventsIndex;
const isMember = user?.role === 'member';
const memberPermissions = Array.isArray(effectiveActive?.member_permissions) ? effectiveActive?.member_permissions ?? [] : [];
const allowPermission = (permission: string) => {
if (!isMember) {
return true;
}
if (memberPermissions.includes('*') || memberPermissions.includes(permission)) {
return true;
}
if (!isMember) return true;
if (memberPermissions.includes('*') || memberPermissions.includes(permission)) return true;
if (permission.includes(':')) {
const [prefix] = permission.split(':');
return memberPermissions.includes(`${prefix}:*`);
@@ -161,85 +114,107 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
return false;
};
const showQr = Boolean(effectiveActive?.slug) && allowPermission('join-tokens:manage');
// --- CONTEXT PILL ---
const EventContextPill = () => {
if (!effectiveActive || isEventsIndex) {
return (
<Text fontSize="$md" fontWeight="800" fontFamily="$display" color="white">
{pageTitle}
</Text>
);
}
const displayName = resolveEventDisplayName(effectiveActive);
if (!canSwitchEvents) {
return (
<Text fontSize="$sm" fontWeight="800" color="white" numberOfLines={1} ellipsizeMode="tail">
{displayName}
</Text>
);
}
return (
<Pressable onPress={() => navigate(ADMIN_EVENTS_PATH)}>
<XStack
backgroundColor="rgba(255, 255, 255, 0.12)"
paddingHorizontal="$3"
paddingVertical="$1.5"
borderRadius={999}
alignItems="center"
space="$1.5"
maxWidth={220}
borderWidth={1}
borderColor="rgba(255, 255, 255, 0.08)"
pressStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
>
<Text
fontSize="$sm"
fontWeight="700"
color="white"
numberOfLines={1}
ellipsizeMode="tail"
flexShrink={1}
>
{displayName}
</Text>
<ChevronsUpDown size={14} color="rgba(255,255,255,0.6)" />
</XStack>
</Pressable>
);
};
const headerBackButton = onBack ? (
<HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
<XStack alignItems="center" space="$1.5">
<ChevronLeft size={28} color={primary} strokeWidth={2.5} />
<ChevronLeft size={28} color="white" strokeWidth={2.5} />
</XStack>
</HeaderActionButton>
) : (
<XStack width={28} />
<HeaderActionButton onPress={() => {}} ariaLabel="Search">
<XStack width={36} height={36} borderRadius={10} alignItems="center" justifyContent="center">
<Search size={22} color="rgba(255,255,255,0.8)" strokeWidth={2.5} />
</XStack>
</HeaderActionButton>
);
const headerTitleRight = (
<YStack alignItems="flex-end" maxWidth="100%">
<Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
{pageTitle}
</Text>
{subtitleText ? (
<Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
{subtitleText}
</Text>
) : null}
</YStack>
);
const headerTitleCenter = (
<YStack alignItems="center" maxWidth="100%">
<Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="center" numberOfLines={1}>
{pageTitle}
</Text>
{subtitleText ? (
<Text fontSize="$xs" color={mutedText} textAlign="center" numberOfLines={1} fontFamily="$body">
{subtitleText}
</Text>
) : null}
</YStack>
);
const isEventsIndex = location.pathname === ADMIN_EVENTS_PATH;
const canSwitchEvents = hasMultipleEvents && !isEventsIndex;
const headerActionsRow = (
<XStack alignItems="center" space="$2">
{canSwitchEvents ? (
<HeaderActionButton onPress={() => navigate(ADMIN_EVENTS_PATH)} ariaLabel={t('header.switchEvent', 'Switch event')}>
<XStack alignItems="center" space="$2.5">
{showQr ? (
<HeaderActionButton
onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
ariaLabel={t('header.quickQr', 'Quick QR')}
>
<XStack
width={34}
height={34}
borderRadius={12}
backgroundColor={actionSurface}
borderWidth={1}
borderColor={actionBorder}
width={36}
height={36}
borderRadius={10}
backgroundColor="rgba(255, 255, 255, 0.15)"
alignItems="center"
justifyContent="center"
style={{
boxShadow: `0 10px 18px ${actionShadow}`,
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
}}
>
<ChevronsUpDown size={16} color={textColor} />
<QrCode size={18} color="white" />
</XStack>
</HeaderActionButton>
) : null}
<HeaderActionButton
onPress={() => navigate(adminPath('/mobile/notifications'))}
ariaLabel={t('mobile.notifications', 'Notifications')}
>
<XStack
width={34}
height={34}
borderRadius={12}
width={36}
height={36}
borderRadius={10}
backgroundColor={actionSurface}
borderWidth={1}
borderColor={actionBorder}
alignItems="center"
justifyContent="center"
position="relative"
style={{
boxShadow: `0 10px 18px ${actionShadow}`,
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
}}
>
<Bell size={16} color={textColor} />
<Bell size={18} color="white" />
{notificationCount > 0 ? (
<YStack
position="absolute"
@@ -249,9 +224,11 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
height={18}
paddingHorizontal={6}
borderRadius={999}
backgroundColor={danger}
backgroundColor={theme.accent}
alignItems="center"
justifyContent="center"
borderWidth={2}
borderColor={headerSurface}
>
<Text fontSize={10} color="white" fontWeight="700">
{notificationCount > 9 ? '9+' : notificationCount}
@@ -260,24 +237,26 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
) : null}
</XStack>
</HeaderActionButton>
{showQr ? (
<HeaderActionButton
onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
ariaLabel={t('header.quickQr', 'Quick QR')}
{/* User Avatar */}
<Pressable onPress={() => navigate(adminPath('/mobile/profile'))}>
<XStack
width={36} height={36} borderRadius={18}
backgroundColor={actionSurface}
overflow="hidden"
alignItems="center" justifyContent="center"
borderWidth={1} borderColor={actionBorder}
>
<XStack
width={34}
height={34}
borderRadius={12}
backgroundColor={primary}
alignItems="center"
justifyContent="center"
style={{ boxShadow: `0 10px 18px ${withAlpha(primary, 0.32)}` }}
>
<QrCode size={16} color="white" />
</XStack>
</HeaderActionButton>
) : null}
{user?.avatar_url ? (
<Image source={{ uri: user.avatar_url }} width={36} height={36} resizeMode="cover" />
) : (
<Text fontSize="$xs" fontWeight="700" color="white">
{user?.name?.charAt(0).toUpperCase() ?? 'U'}
</Text>
)}
</XStack>
</Pressable>
{headerActions ?? null}
</XStack>
);
@@ -287,19 +266,12 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
backgroundColor={backgroundColor}
minHeight="100vh"
alignItems="center"
style={{ background: appBackground }}
>
<YStack
backgroundColor={headerSurface}
borderBottomWidth={1}
borderColor={headerBorder}
paddingHorizontal="$4"
paddingTop="$4"
paddingBottom="$3"
shadowColor={actionShadow}
shadowOpacity={0.08}
shadowRadius={14}
shadowOffset={{ width: 0, height: 8 }}
width="100%"
maxWidth={800}
position="sticky"
@@ -307,37 +279,19 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
zIndex={60}
style={{
paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
}}
>
{isCompactHeader ? (
<XStack
alignItems="center"
justifyContent="space-between"
minHeight={48}
space="$3"
flexWrap="wrap"
>
<XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$2">
{headerBackButton}
<XStack flex={1} minWidth={120} justifyContent="center">
{headerTitleCenter}
<XStack flex={1} justifyContent="center" alignItems="center">
<EventContextPill />
</XStack>
<XStack justifyContent="flex-end" flexShrink={0} style={{ marginLeft: 'auto' }}>
<XStack justifyContent="flex-end" minWidth={28}>
{headerActionsRow}
</XStack>
</XStack>
) : (
<XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
{headerBackButton}
<XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end" minWidth={0}>
<XStack flex={1} minWidth={0} justifyContent="flex-end">
{headerTitleRight}
</XStack>
{headerActionsRow}
</XStack>
</XStack>
)}
</XStack>
</YStack>
<YStack
@@ -350,25 +304,18 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
style={{ paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)' }}
>
{!online ? (
<XStack
alignItems="center"
justifyContent="center"
borderRadius={12}
backgroundColor={warningBg}
paddingVertical="$2"
paddingHorizontal="$3"
>
<Text fontSize="$xs" fontWeight="700" color={warningText}>
<XStack alignItems="center" justifyContent="center" borderRadius={12} backgroundColor={theme.warningBg} paddingVertical="$2" paddingHorizontal="$3">
<Text fontSize="$xs" fontWeight="700" color={theme.warningText}>
{t('status.offline', 'Offline mode: changes will sync when you are back online.')}
</Text>
</XStack>
) : null}
{queuedPhotoCount > 0 ? (
<MobileCard space="$2">
<Text fontSize="$sm" fontWeight="700" color={textColor}>
<Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
{t('status.queueTitle', 'Photo actions pending')}
</Text>
<Text fontSize="$xs" color={mutedText}>
<Text fontSize="$xs" color={theme.muted}>
{online
? t('status.queueBodyOnline', '{{count}} actions ready to sync.', { count: queuedPhotoCount })
: t('status.queueBodyOffline', '{{count}} actions saved offline.', { count: queuedPhotoCount })}
@@ -387,7 +334,6 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
</YStack>
<BottomNav active={activeTab} onNavigate={go} />
</YStack>
);
}
@@ -418,17 +364,4 @@ export function HeaderActionButton({
{children}
</Pressable>
);
}
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';
}
}

90
resources/js/admin/mobile/hooks/useEventReadiness.ts Normal file
View File

@@ -0,0 +1,90 @@
import { TenantEvent } from '../../api';
import { adminPath } from '../../constants';
export type ReadinessStep = {
id: string;
label: string;
isComplete: boolean;
ctaLabel: string;
targetPath: string;
priority: number; // Lower is higher priority
};
export type ReadinessStatus = {
steps: ReadinessStep[];
totalSteps: number;
completedSteps: number;
progress: number; // 0 to 1
nextStep: ReadinessStep | null;
isReady: boolean;
};
export function useEventReadiness(event: TenantEvent | null): ReadinessStatus {
if (!event) {
return { steps: [], totalSteps: 0, completedSteps: 0, progress: 0, nextStep: null, isReady: false };
}
const settings = (event.settings ?? {}) as Record<string, unknown>;
// 1. Basics: Date & Location
const hasDate = Boolean(event.event_date);
const hasLocation = Boolean(
(settings.location as string) ||
(settings.address as string) ||
(settings.city as string)
);
// 2. Engagement: Tasks (only if tasks are enabled)
const tasksEnabled = event.engagement_mode !== 'photo_only';
const hasTasks = (event.tasks_count ?? 0) > 0;
// 3. Access: QR / Invites
// We consider it "done" if there is at least one active invite token (default is created on event creation usually, but let's check)
const hasInvite = (event.active_invites_count ?? 0) > 0 || (event.total_invites_count ?? 0) > 0;
const steps: ReadinessStep[] = [
{
id: 'basics',
label: 'Date & Location',
isComplete: hasDate && hasLocation,
ctaLabel: 'Set Date & Location',
targetPath: `/mobile/events/${event.slug}/edit`,
priority: 1
},
{
id: 'access',
label: 'QR Codes',
isComplete: hasInvite,
ctaLabel: 'Get QR Code',
targetPath: `/mobile/events/${event.slug}/qr`,
priority: 3 // Access is usually needed after setup
}
];
if (tasksEnabled) {
steps.push({
id: 'tasks',
label: 'Photo Tasks',
isComplete: hasTasks,
ctaLabel: 'Add Photo Tasks',
targetPath: `/mobile/events/${event.slug}/tasks`,
priority: 2 // Content comes before distribution
});
}
// Sort by priority
steps.sort((a, b) => a.priority - b.priority);
const completedSteps = steps.filter(s => s.isComplete).length;
const totalSteps = steps.length;
const nextStep = steps.find(s => !s.isComplete) ?? null;
return {
steps,
totalSteps,
completedSteps,
progress: totalSteps > 0 ? completedSteps / totalSteps : 0,
nextStep,
isReady: !nextStep
};
}

102
resources/js/admin/mobile/theme.ts
View File

@@ -1,48 +1,46 @@
import { useTheme } from '@tamagui/core';
export const ADMIN_COLORS = {
primary: '#FF5C5C',
primaryStrong: '#E63B57',
accent: '#3D5AFE',
accentSoft: '#E8ECFF',
accentWarm: '#FFE3D6',
warning: '#FBBF24',
success: '#22C55E',
danger: '#EF4444',
text: '#0B132B',
textMuted: '#54606E',
textSubtle: '#8C99A8',
border: '#F3D6C9',
primary: '#4F46E5', // Indigo 600
primaryStrong: '#4338CA', // Indigo 700
accent: '#F43F5E', // Rose 500
accentSoft: '#E0E7FF', // Indigo 100
accentWarm: '#FFE4E6', // Rose 100
warning: '#F59E0B', // Amber 500
success: '#10B981', // Emerald 500
danger: '#EF4444', // Red 500
text: '#0F172A', // Slate 900
textMuted: '#475569', // Slate 600
textSubtle: '#64748B', // Slate 500
border: '#E2E8F0', // Slate 200
surface: '#FFFFFF',
surfaceMuted: '#FFF6F0',
backdrop: '#0B132B',
surfaceMuted: '#F8FAFC', // Slate 50
backdrop: '#0F172A',
};
export const ADMIN_ACTION_COLORS = {
settings: '#00C2A8',
tasks: '#FFC857',
qr: '#3D5AFE',
images: '#FF7AB6',
liveShow: '#FF6D00',
liveShowSettings: '#00B0FF',
guests: '#22C55E',
guestMessages: '#FF8A00',
branding: '#00B4D8',
photobooth: '#FF3D71',
settings: '#64748B', // Slate 500
tasks: '#F43F5E', // Rose 500 (Accent)
qr: '#10B981', // Emerald 500
images: '#4F46E5', // Indigo 600 (Primary)
liveShow: '#F59E0B', // Amber 500
liveShowSettings: '#6366F1', // Indigo 500
guests: '#334155', // Slate 700
guestMessages: '#4F46E5',
branding: '#6366F1',
photobooth: '#8B5CF6', // Violet 500
recap: '#94A3B8',
packages: ADMIN_COLORS.primary,
analytics: '#22C55E',
invites: '#3D5AFE',
packages: '#4F46E5',
analytics: '#10B981',
invites: '#10B981',
};
export const ADMIN_GRADIENTS = {
primaryCta: `linear-gradient(135deg, ${ADMIN_COLORS.primary}, #FF9A5C, ${ADMIN_COLORS.accent})`,
softCard: 'linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,245,238,0.92))',
loginBackground: 'linear-gradient(135deg, #0b132b, #162040, #0b132b)',
appBackground:
'radial-gradient(circle at 15% 0%, rgba(255, 92, 92, 0.22), transparent 50%), radial-gradient(circle at 85% 10%, rgba(61, 90, 254, 0.2), transparent 55%), linear-gradient(180deg, #fff4ee 0%, #ffefe4 100%)',
appBackgroundDark:
'radial-gradient(circle at 15% 0%, rgba(255, 92, 92, 0.18), transparent 55%), radial-gradient(circle at 85% 10%, rgba(61, 90, 254, 0.18), transparent 55%), linear-gradient(180deg, #0b132b 0%, #0e1a33 100%)',
primaryCta: `linear-gradient(135deg, ${ADMIN_COLORS.primary}, ${ADMIN_COLORS.primaryStrong})`,
softCard: 'linear-gradient(145deg, rgba(255,255,255,1), rgba(248,250,252,0.95))',
loginBackground: 'linear-gradient(135deg, #0F172A, #1E293B, #0F172A)',
appBackground: 'linear-gradient(180deg, #F1F5F9 0%, #F1F5F9 100%)',
appBackgroundDark: 'linear-gradient(180deg, #0F172A 0%, #1E293B 100%)',
};
export const ADMIN_MOTION = {
@@ -78,7 +76,7 @@ function parseRgb(color: string): Rgb | null {
return null;
}
function withAlpha(color: string, alpha: number): string {
export function withAlpha(color: string, alpha: number): string {
const rgb = parseRgb(color);
if (! rgb) {
return color;
@@ -99,47 +97,47 @@ function isDarkColor(color: string): boolean {
export function useAdminTheme() {
const theme = useTheme();
const background = String(theme.background?.val ?? '#FFF8F5');
const background = String(theme.background?.val ?? ADMIN_COLORS.surfaceMuted);
const surface = String(theme.surface?.val ?? ADMIN_COLORS.surface);
const border = String(theme.borderColor?.val ?? ADMIN_COLORS.border);
const isDark = isDarkColor(background);
const glassSurface = withAlpha(surface, isDark ? 0.96 : 0.98);
const glassSurfaceStrong = withAlpha(surface, isDark ? 1 : 1);
const glassBorder = withAlpha(border, isDark ? 0.85 : 0.95);
const glassShadow = isDark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(11, 19, 43, 0.18)';
const glassShadow = isDark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(15, 23, 42, 0.08)';
const appBackground = isDark ? ADMIN_GRADIENTS.appBackgroundDark : ADMIN_GRADIENTS.appBackground;
return {
theme,
background,
surface,
surfaceMuted: String(theme.gray2?.val ?? ADMIN_COLORS.surfaceMuted),
surfaceMuted: String(theme.muted?.val ?? ADMIN_COLORS.surfaceMuted),
border,
text: String(theme.color?.val ?? ADMIN_COLORS.text),
textStrong: String(theme.color12?.val ?? theme.color?.val ?? ADMIN_COLORS.text),
muted: String(theme.gray?.val ?? ADMIN_COLORS.textMuted),
subtle: String(theme.gray8?.val ?? ADMIN_COLORS.textSubtle),
textStrong: String(theme.text?.val ?? theme.color?.val ?? ADMIN_COLORS.text),
muted: String(theme.muted?.val ?? ADMIN_COLORS.textMuted),
subtle: String(theme.textSubtle?.val ?? ADMIN_COLORS.textSubtle),
primary: String(theme.primary?.val ?? ADMIN_COLORS.primary),
accent: String(theme.blue6?.val ?? theme.accent?.val ?? ADMIN_COLORS.accent),
accent: String(theme.accent?.val ?? ADMIN_COLORS.accent),
accentSoft: String(theme.blue3?.val ?? ADMIN_COLORS.accentSoft),
accentStrong: String(theme.blue10?.val ?? ADMIN_COLORS.primaryStrong),
successBg: String(theme.green3?.val ?? '#DCFCE7'),
accentStrong: String(theme.blue11?.val ?? ADMIN_COLORS.primaryStrong),
successBg: String(theme.backgroundStrong?.val ?? '#DCFCE7'),
successText: String(theme.green10?.val ?? '#166534'),
dangerBg: String(theme.red3?.val ?? '#FEE2E2'),
dangerText: String(theme.red11?.val ?? ADMIN_COLORS.danger),
warningBg: String(theme.yellow3?.val ?? '#FFF7ED'),
warningBorder: String(theme.yellow6?.val ?? '#FED7AA'),
warningText: String(theme.yellow11?.val ?? '#92400E'),
warningBg: String(theme.yellow3?.val ?? '#FEF3C7'),
warningBorder: String(theme.yellow6?.val ?? '#FCD34D'),
warningText: String(theme.yellow11?.val ?? '#B45309'),
infoBg: String(theme.blue3?.val ?? ADMIN_COLORS.accentSoft),
infoText: String(theme.blue10?.val ?? ADMIN_COLORS.primaryStrong),
danger: String(theme.red10?.val ?? ADMIN_COLORS.danger),
backdrop: String(theme.gray12?.val ?? ADMIN_COLORS.backdrop),
overlay: withAlpha(String(theme.gray12?.val ?? ADMIN_COLORS.backdrop), 0.6),
shadow: String(theme.shadowColor?.val ?? 'rgba(15, 23, 42, 0.12)'),
danger: String(theme.danger?.val ?? ADMIN_COLORS.danger),
backdrop: String(theme.backgroundStrong?.val ?? ADMIN_COLORS.backdrop),
overlay: withAlpha(String(theme.backgroundStrong?.val ?? ADMIN_COLORS.backdrop), 0.6),
shadow: String(theme.shadowColor?.val ?? 'rgba(15, 23, 42, 0.08)'),
glassSurface,
glassSurfaceStrong,
glassBorder,
glassShadow,
appBackground,
};
}
}