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

feat(admin-pwa): modernize dashboard KPI section with unified glass strip

Browse Source
This commit is contained in:
Codex Agent
2026-01-18 11:02:04 +01:00
parent 5a974b25b6
commit cb8e119ef1
4 changed files with 124 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,7 @@ import { buildLimitWarnings } from '../lib/limitWarnings';
import { withAlpha } from './components/colors';
import { useEventReadiness } from './hooks/useEventReadiness';
import { SetupChecklist } from './components/SetupChecklist';
import { KpiStrip } from './components/Primitives';
// --- HELPERS ---
@@ -386,27 +387,29 @@ function PulseStrip({ event, stats }: any) {
const pendingCount = stats?.pending_photos ?? event?.pending_photo_count ?? 0;
return (
<XStack space="$3" paddingVertical="$1">
<PulseItem icon={ImageIcon} value={uploadCount} label={t('management:events.list.stats.photos', 'Fotos')} />
<YStack width={1} backgroundColor={theme.border} marginVertical={4} />
<PulseItem icon={Users} value={guestCount} label={t('management:events.list.stats.guests', 'Gäste')} />
<YStack width={1} backgroundColor={theme.border} marginVertical={4} />
<PulseItem icon={Bell} value={pendingCount} label={t('management:photos.filters.pending', 'Pending')} tone={pendingCount > 0 ? 'warning' : 'neutral'} />
</XStack>
);
}
function PulseItem({ icon: Icon, value, label, tone = 'neutral' }: any) {
const theme = useAdminTheme();
const color = tone === 'warning' ? theme.warningText : theme.textStrong;
return (
<XStack alignItems="center" space="$2" flex={1} justifyContent="center">
<Icon size={16} color={theme.muted} />
<YStack>
<Text fontSize="$md" fontWeight="800" color={color} lineHeight="$xs">{value}</Text>
<Text fontSize={10} color={theme.muted} textTransform="uppercase" fontWeight="600">{label}</Text>
</YStack>
</XStack>
<YStack paddingVertical="$1">
<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>
);
}