Refine dashboard overview layout

2026-01-22 16:24:48 +01:00
parent 4f3503e3f4
commit 8aa2efdd9a
3 changed files with 155 additions and 116 deletions
--- a/resources/js/admin/mobile/DashboardPage.tsx
+++ b/resources/js/admin/mobile/DashboardPage.tsx
@@ -35,19 +35,25 @@ function translateLimits(t: any) {

 // --- TAMAGUI-ALIGNED PRIMITIVES ---

-function DashboardCard({ children, style, ...rest }: React.ComponentProps<typeof Card>) {
+function DashboardCard({
+  children,
+  style,
+  variant = 'default',
+  ...rest
+}: React.ComponentProps<typeof Card> & { variant?: 'default' | 'embedded' }) {
  const theme = useAdminTheme();
+  const isEmbedded = variant === 'embedded';
  return (
    <Card
      backgroundColor={theme.surface}
-      borderRadius={20}
+      borderRadius={isEmbedded ? 16 : 20}
      borderWidth={1}
      borderColor={theme.border}
      padding="$3.5"
      shadowColor={theme.shadow}
-      shadowOpacity={0.16}
-      shadowRadius={16}
-      shadowOffset={{ width: 0, height: 10 }}
+      shadowOpacity={isEmbedded ? 0 : 0.16}
+      shadowRadius={isEmbedded ? 0 : 16}
+      shadowOffset={isEmbedded ? { width: 0, height: 0 } : { width: 0, height: 10 }}
      style={style}
      {...rest}
    >
@@ -60,26 +66,33 @@ function SectionHeader({
  title,
  subtitle,
  action,
+  showSeparator = true,
+  compact = false,
 }: {
  title: string;
  subtitle?: string;
  action?: React.ReactNode;
+  showSeparator?: boolean;
+  compact?: boolean;
 }) {
  const theme = useAdminTheme();
+  const titleSize = compact ? '$md' : '$lg';
+  const subtitleSize = compact ? '$xs' : '$sm';
+  const spacing = compact ? '$1' : '$1.5';
  return (
-    <YStack space="$1.5">
+    <YStack space={spacing}>
      <XStack alignItems="center" justifyContent="space-between">
-        <Text fontSize="$lg" fontWeight="800" color={theme.textStrong}>
+        <Text fontSize={titleSize} fontWeight="800" color={theme.textStrong}>
          {title}
        </Text>
        {action ?? null}
      </XStack>
      {subtitle ? (
-        <Text fontSize="$sm" color={theme.muted}>
+        <Text fontSize={subtitleSize} color={theme.muted}>
          {subtitle}
        </Text>
      ) : null}
-      <Separator backgroundColor={theme.border} opacity={0.6} />
+      {showSeparator ? <Separator backgroundColor={theme.border} opacity={0.6} /> : null}
    </YStack>
  );
 }
@@ -104,6 +117,7 @@ export default function MobileDashboardPage() {
  const { t, i18n } = useTranslation(['management', 'dashboard', 'mobile']);
  const { events, activeEvent, hasEvents, isLoading, selectEvent } = useEventContext();
  const { user } = useAuth();
+  const theme = useAdminTheme();
  const isMember = user?.role === 'member';

  // --- LOGIC ---
@@ -184,30 +198,40 @@ export default function MobileDashboardPage() {

  return (
    <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 */}
-      <LifecycleHero
-        event={activeEvent}
-        stats={stats}
-        locale={locale}
-        navigate={navigate}
-        readiness={readiness}
-      />
+      <DashboardCard padding="$0">
+        <YStack padding="$3.5" space="$2">
+          <SectionHeader
+            title={t('dashboard:overview.title', 'At a glance')}
+            subtitle={t('dashboard:overview.description', 'Key customer metrics at a glance.')}
+            showSeparator={false}
+            compact
+          />
+        </YStack>
+        <Separator backgroundColor={theme.border} opacity={0.6} />
+        <YStack padding="$3.5" space="$2.5">
+          {/* 1. LIFECYCLE HERO */}
+          <LifecycleHero
+            event={activeEvent}
+            stats={stats}
+            locale={locale}
+            navigate={navigate}
+            readiness={readiness}
+            variant="embedded"
+          />

-      {/* 1b. SETUP CHECKLIST */}
-      {phase === 'setup' && (
-         <SetupChecklist 
-            steps={readiness.steps} 
-            title={t('management:photobooth.checklist.title', 'Checklist')} 
-         />
-      )}
+          {/* 1b. SETUP CHECKLIST */}
+          {phase === 'setup' && (
+            <SetupChecklist
+              steps={readiness.steps}
+              title={t('management:photobooth.checklist.title', 'Checklist')}
+              variant="embedded"
+            />
+          )}

-      {/* 2. PULSE STRIP */}
-      <PulseStrip event={activeEvent} stats={stats} />
+          {/* 2. PULSE STRIP */}
+          <PulseStrip event={activeEvent} stats={stats} />
+        </YStack>
+      </DashboardCard>

      {/* 3. ALERTS */}
      <AlertsSection event={activeEvent} stats={stats} t={t} />
@@ -250,9 +274,12 @@ function getEventPhase(event: TenantEvent): EventPhase {
  return 'setup';
 }

-function LifecycleHero({ event, stats, locale, navigate, readiness }: any) {
+function LifecycleHero({ event, stats, locale, navigate, readiness, variant = 'default' }: any) {
  const theme = useAdminTheme();
  const { t } = useTranslation(['management', 'dashboard']);
+  const isEmbedded = variant === 'embedded';
+  const cardVariant = isEmbedded ? 'embedded' : 'default';
+  const cardPadding = isEmbedded ? '$3' : '$3.5';
  
  if (!event) return null;
  const phase = getEventPhase(event);
@@ -275,11 +302,13 @@ function LifecycleHero({ event, stats, locale, navigate, readiness }: any) {
      <YStack space="$2">
        <Header />
        <DashboardCard
+          variant={cardVariant}
+          padding={cardPadding}
          backgroundColor={theme.primary}
          borderColor="transparent"
          style={{ backgroundImage: 'linear-gradient(135deg, #4F46E5 0%, #4338CA 100%)' }}
        >
-          <YStack space="$3">
+          <YStack space={isEmbedded ? '$2.5' : '$3'}>
            <XStack alignItems="center" justifyContent="space-between">
              <YStack space="$1">
                <XStack alignItems="center" space="$2">
@@ -321,8 +350,8 @@ function LifecycleHero({ event, stats, locale, navigate, readiness }: any) {
     return (
        <YStack space="$2">
          <Header />
-          <DashboardCard>
-            <YStack space="$3">
+          <DashboardCard variant={cardVariant} padding={cardPadding}>
+            <YStack space={isEmbedded ? '$2.5' : '$3'}>
              <XStack alignItems="center" space="$2.5">
                <YStack width={40} height={40} borderRadius={20} backgroundColor={theme.success} alignItems="center" justifyContent="center">
                  <CheckCircle2 size={20} color="white" />
@@ -379,8 +408,8 @@ function LifecycleHero({ event, stats, locale, navigate, readiness }: any) {
  return (
    <YStack space="$2">
      <Header />
-      <DashboardCard>
-        <YStack space="$3">
+      <DashboardCard variant={cardVariant} padding={cardPadding}>
+        <YStack space={isEmbedded ? '$2.5' : '$3'}>
          <XStack alignItems="center" justifyContent="space-between">
            <YStack>
              <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase">
@@ -437,30 +466,27 @@ function PulseStrip({ event, stats }: any) {
  const pendingCount = stats?.pending_photos ?? event?.pending_photo_count ?? 0;

  return (
-    <YStack space="$2">
-       <SectionHeader title={t('management:eventMenu.summary', 'Overview')} />
-       <KpiStrip items={[
-         {
-            icon: ImageIcon,
-            value: uploadCount,
-            label: t('management:events.list.stats.photos', 'Photos'),
-            color: theme.primary
-         },
-         {
-            icon: Users,
-            value: guestCount,
-            label: t('management:events.list.stats.guests', 'Guests'),
-            color: theme.textStrong
-         },
-         {
-            icon: ShieldCheck,
-            value: pendingCount,
-            label: t('management:photos.filters.pending', 'Pending'),
-            note: pendingCount > 0 ? t('management:common.actionNeeded', 'Review') : undefined,
-            color: pendingCount > 0 ? '#8B5CF6' : theme.textMuted
-         }
-       ]} />
-    </YStack>
+    <KpiStrip items={[
+      {
+        icon: ImageIcon,
+        value: uploadCount,
+        label: t('management:events.list.stats.photos', 'Photos'),
+        color: theme.primary,
+      },
+      {
+        icon: Users,
+        value: guestCount,
+        label: t('management:events.list.stats.guests', 'Guests'),
+        color: theme.textStrong,
+      },
+      {
+        icon: ShieldCheck,
+        value: pendingCount,
+        label: t('management:photos.filters.pending', 'Pending'),
+        note: pendingCount > 0 ? t('management:common.actionNeeded', 'Review') : undefined,
+        color: pendingCount > 0 ? '#8B5CF6' : theme.textMuted,
+      },
+    ]} />
  );
 }

--- a/resources/js/admin/mobile/tests/DashboardPage.test.tsx
+++ b/resources/js/admin/mobile/tests/DashboardPage.test.tsx
@@ -259,6 +259,8 @@ vi.mock('../theme', () => ({
  useAdminTheme: () => ({
    textStrong: '#0f172a',
    text: '#0f172a',
+    textMuted: '#94a3b8',
+    accent: '#7c3aed',
    muted: '#64748b',
    border: '#e2e8f0',
    surface: '#ffffff',
--- a/resources/js/admin/mobile/components/SetupChecklist.tsx
+++ b/resources/js/admin/mobile/components/SetupChecklist.tsx
@@ -1,33 +1,50 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Card } from '@tamagui/card';
+import { YGroup } from '@tamagui/group';
+import { ListItem } from '@tamagui/list-item';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { CheckCircle2, Circle, ChevronDown, ChevronUp } from 'lucide-react';
+import { Separator } from 'tamagui';
 import { useAdminTheme } from '../theme';
 import { ReadinessStep } from '../hooks/useEventReadiness';
 import { adminPath } from '../../constants';
+import { PillBadge } from './Primitives';

-export function SetupChecklist({ steps, title }: { steps: ReadinessStep[]; title: string }) {
+export function SetupChecklist({
+  steps,
+  title,
+  variant = 'card',
+}: {
+  steps: ReadinessStep[];
+  title: string;
+  variant?: 'card' | 'embedded';
+}) {
  const theme = useAdminTheme();
  const navigate = useNavigate();
  const isAllComplete = steps.every(s => s.isComplete);
  const [collapsed, setCollapsed] = React.useState(isAllComplete);
+  const isEmbedded = variant === 'embedded';

  const completedCount = steps.filter(s => s.isComplete).length;

  return (
-    <YStack
+    <Card
      backgroundColor={theme.surface}
-      borderRadius={16}
+      borderRadius={isEmbedded ? 16 : 20}
      borderWidth={1}
      borderColor={theme.border}
      padding="$0"
      overflow="hidden"
-      style={{ boxShadow: `0 2px 8px ${theme.shadow}` }}
+      shadowColor={theme.shadow}
+      shadowOpacity={isEmbedded ? 0 : 0.16}
+      shadowRadius={isEmbedded ? 0 : 16}
+      shadowOffset={isEmbedded ? { width: 0, height: 0 } : { width: 0, height: 10 }}
    >
      <Pressable onPress={() => setCollapsed(!collapsed)}>
-        <XStack padding="$3.5" paddingVertical="$3" alignItems="center" justifyContent="space-between">
+        <XStack padding="$3" paddingVertical="$2.5" alignItems="center" justifyContent="space-between">
           <XStack alignItems="center" space="$2">
             <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
                {title}
@@ -48,60 +65,54 @@ export function SetupChecklist({ steps, title }: { steps: ReadinessStep[]; title

      {!collapsed && (
        <YStack>
-          {steps.map((step, index) => {
-            const isNext = !step.isComplete && steps.slice(0, index).every(s => s.isComplete);
-            
-            return (
-              <Pressable 
-                 key={step.id} 
-                 onPress={() => navigate(adminPath(step.targetPath))}
-                 style={{
-                    backgroundColor: isNext ? theme.surface : 'transparent',
-                 }}
-              >
-                 <XStack 
-                    paddingHorizontal="$3.5" 
-                    paddingVertical="$3" 
-                    alignItems="center" 
-                    space="$3"
-                    borderTopWidth={1}
-                    borderColor={theme.border}
-                 >
-                    {step.isComplete ? (
-                       <CheckCircle2 size={20} color={theme.successText} />
-                    ) : isNext ? (
-                       <Circle size={20} color={theme.primary} strokeWidth={2.5} />
-                    ) : (
-                       <Circle size={20} color={theme.border} />
-                    )}
+          <Separator backgroundColor={theme.border} opacity={0.6} />
+          <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: theme.border, overflow: "hidden" } as any)}>
+            {steps.map((step, index) => {
+              const isNext = !step.isComplete && steps.slice(0, index).every(s => s.isComplete);

-                    <YStack flex={1} space="$0.5">
-                       <Text 
-                          fontSize="$sm" 
-                          fontWeight={isNext ? "700" : "500"} 
+              return (
+                <YGroup.Item key={step.id}>
+                  <ListItem
+                    hoverTheme
+                    pressTheme
+                    paddingVertical="$2"
+                    paddingHorizontal="$3"
+                    backgroundColor={isNext ? theme.surfaceMuted : 'transparent'}
+                    onPress={() => navigate(adminPath(step.targetPath))}
+                    title={
+                      <XStack alignItems="center" space="$2.5">
+                        {step.isComplete ? (
+                          <CheckCircle2 size={18} color={theme.successText} />
+                        ) : isNext ? (
+                          <Circle size={18} color={theme.primary} strokeWidth={2.5} />
+                        ) : (
+                          <Circle size={18} color={theme.border} />
+                        )}
+                        <Text
+                          fontSize="$sm"
+                          fontWeight={isNext ? '700' : '500'}
                          color={step.isComplete ? theme.muted : theme.textStrong}
                          textDecorationLine={step.isComplete ? 'line-through' : 'none'}
-                       >
+                        >
                          {step.label}
-                       </Text>
-                       {step.description && !step.isComplete && (
-                          <Text fontSize="$xs" color={theme.muted}>
-                             {step.description}
-                          </Text>
-                       )}
-                    </YStack>
-
-                    {isNext && (
-                       <YStack backgroundColor={theme.primary} borderRadius={999} paddingHorizontal="$2.5" paddingVertical="$1.5">
-                          <Text fontSize="$xs" color="white" fontWeight="700">Start</Text>
-                       </YStack>
-                    )}
-                 </XStack>
-              </Pressable>
-            );
-          })}
+                        </Text>
+                      </XStack>
+                    }
+                    subTitle={
+                      step.description && !step.isComplete ? (
+                        <Text fontSize="$xs" color={theme.muted}>
+                          {step.description}
+                        </Text>
+                      ) : undefined
+                    }
+                    iconAfter={isNext ? <PillBadge tone="success">Start</PillBadge> : undefined}
+                  />
+                </YGroup.Item>
+              );
+            })}
+          </YGroup>
        </YStack>
      )}
-    </YStack>
+    </Card>
  );
-}
+}