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

neues Admin UI Layout eingeführt. Alle Tests auf den neusten Stand gebracht.

Browse Source
This commit is contained in:
Codex Agent
2025-12-30 10:24:06 +01:00
parent 902e78cae9
commit efe2f25b3e
85 changed files with 95235 additions and 19197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
resources/js/admin/mobile/welcome/WelcomePackagesPage.tsx
View File

@@ -11,10 +11,12 @@ import { MobileCard, CTAButton, PillBadge } from '../components/Primitives';
import { getPackages, getTenantPackagesOverview, Package, trackOnboarding } from '../../api';
import { ADMIN_WELCOME_BASE_PATH, ADMIN_WELCOME_EVENT_PATH, ADMIN_WELCOME_SUMMARY_PATH, adminPath } from '../../constants';
import { getSelectedPackageId, setSelectedPackageId } from '../lib/onboardingSelection';
import { useAdminTheme } from '../theme';
export default function WelcomePackagesPage() {
const navigate = useNavigate();
const { t } = useTranslation('onboarding');
const { muted } = useAdminTheme();
const [selectedId, setSelectedId] = React.useState<number | null>(() => getSelectedPackageId());
const { data: overview } = useQuery({
@@ -60,7 +62,7 @@ export default function WelcomePackagesPage() {
>
{isLoading ? (
<MobileCard>
<Text fontSize="$sm" color="#6b7280">
<Text fontSize="$sm" color={muted}>
{t('packages.state.loading', 'Loading packages …')}
</Text>
</MobileCard>
@@ -69,7 +71,7 @@ export default function WelcomePackagesPage() {
<Text fontSize="$sm" fontWeight="700">
{t('packages.state.errorTitle', 'Failed to load')}
</Text>
<Text fontSize="$sm" color="#6b7280">
<Text fontSize="$sm" color={muted}>
{t('packages.state.errorDescription', 'Please try again or contact support.')}
</Text>
</MobileCard>
@@ -78,7 +80,7 @@ export default function WelcomePackagesPage() {
<Text fontSize="$sm" fontWeight="700">
{t('packages.state.emptyTitle', 'Catalogue is empty')}
</Text>
<Text fontSize="$sm" color="#6b7280">
<Text fontSize="$sm" color={muted}>
{t('packages.state.emptyDescription', 'No packages are currently available. Reach out to support to enable new offers.')}
</Text>
</MobileCard>
@@ -99,7 +101,7 @@ export default function WelcomePackagesPage() {
<Text fontSize="$sm" fontWeight="800">
{t('packages.step.title', 'Activate the right plan')}
</Text>
<Text fontSize="$sm" color="#6b7280">
<Text fontSize="$sm" color={muted}>
{t('packages.step.description', 'Secure capacity for your next event. Upgrade at any time – only pay for what you need.')}
</Text>
</MobileCard>
@@ -132,6 +134,7 @@ function PackageCard({
onSelect: () => void;
}) {
const { t } = useTranslation('onboarding');
const { primary, border, accentSoft, muted } = useAdminTheme();
const badges = [
t('packages.card.badges.photos', { count: pkg.max_photos ?? t('summary.details.infinity', '∞') }),
t('packages.card.badges.guests', { count: pkg.max_guests ?? t('summary.details.infinity', '∞') }),
@@ -140,17 +143,17 @@ function PackageCard({
return (
<Pressable onPress={onSelect}>
<MobileCard borderColor={selected ? '#2563eb' : '#e5e7eb'} space="$2">
<MobileCard borderColor={selected ? primary : border} space="$2">
<XStack alignItems="center" justifyContent="space-between">
<XStack alignItems="center" space="$2">
<XStack width={36} height={36} borderRadius={12} backgroundColor="#e0f2fe" alignItems="center" justifyContent="center">
<PackageIcon size={18} color="#0ea5e9" />
<XStack width={36} height={36} borderRadius={12} backgroundColor={accentSoft} alignItems="center" justifyContent="center">
<PackageIcon size={18} color={primary} />
</XStack>
<YStack>
<Text fontSize="$sm" fontWeight="800">
{pkg.name}
</Text>
<Text fontSize="$xs" color="#6b7280">
<Text fontSize="$xs" color={muted}>
{t('packages.card.description', 'Ready for your next event right away.')}
</Text>
</YStack>
@@ -168,8 +171,8 @@ function PackageCard({
</XStack>
{selected ? (
<XStack alignItems="center" space="$1">
<Check size={14} color="#2563eb" />
<Text fontSize="$xs" color="#2563eb" fontWeight="700">
<Check size={14} color={primary} />
<Text fontSize="$xs" color={primary} fontWeight="700">
{t('packages.card.selected', 'Selected')}
</Text>
</XStack>