fix: resolve typescript and build errors across admin and guest apps

resources/js/admin/mobile/BillingPage.tsx

@@ -8,16 +8,6 @@ import { Pressable } from '@tamagui/react-native-web-lite';
 import toast from 'react-hot-toast';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
-import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { Package, Receipt, RefreshCcw, Sparkles } 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 toast from 'react-hot-toast';
-import { MobileShell, HeaderActionButton } from './components/MobileShell';
-import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
 import {
   createTenantBillingPortalSession,
   getTenantPackagesOverview,
@@ -235,7 +225,6 @@ export default function MobileBillingPage() {
             ))}
           </YStack>
         )}
-        {null}
       </MobileCard>
 
       <MobileCard space="$2">
@@ -263,7 +252,6 @@ export default function MobileBillingPage() {
             ))}
           </YStack>
         )}
-        {null}
       </MobileCard>
     </MobileShell>
   );
@@ -547,156 +535,4 @@ function formatDate(value: string | null | undefined): string {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return '—';
   return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' });
-}
-
-function renderFeatureBadge(pkg: TenantPackageSummary, t: any, key: string, label: string) {
-  const value = (pkg.package_limits as any)?.[key] ?? (pkg as any)[key];
-  if (value === undefined || value === null) return null;
-  const enabled = value !== false;
-  return <PillBadge tone={enabled ? 'success' : 'muted'}>{enabled ? label : `${label} off`}</PillBadge>;
-}
-
-function UsageBar({ metric }: { metric: PackageUsageMetric }) {
-  const { t } = useTranslation('management');
-  const { muted, textStrong, border, primary, subtle, warningText, danger } = useAdminTheme();
-  const labelMap: Record<PackageUsageMetric['key'], string> = {
-    events: t('mobileBilling.usage.events', 'Events'),
-    guests: t('mobileBilling.usage.guests', 'Guests'),
-    photos: t('mobileBilling.usage.photos', 'Photos'),
-    gallery: t('mobileBilling.usage.gallery', 'Gallery days'),
-  };
-
-  if (!metric.limit) {
-    return null;
-  }
-
-  const status = getUsageState(metric);
-  const hasUsage = metric.used !== null;
-  const valueText = hasUsage
-    ? t('mobileBilling.usage.value', { used: metric.used, limit: metric.limit })
-    : t('mobileBilling.usage.limit', { limit: metric.limit });
-  const remainingText = metric.remaining !== null
-    ? t('mobileBilling.usage.remainingOf', {
-      remaining: metric.remaining,
-      limit: metric.limit,
-      defaultValue: 'Remaining {{remaining}} of {{limit}}',
-    })
-    : null;
-  const fill = usagePercent(metric);
-  const statusLabel =
-    status === 'danger'
-      ? t('mobileBilling.usage.statusDanger', 'Limit reached')
-      : status === 'warning'
-        ? t('mobileBilling.usage.statusWarning', 'Low')
-        : null;
-  const fillColor = status === 'danger' ? danger : status === 'warning' ? warningText : primary;
-
-  return (
-    <YStack space="$1.5">
-      <XStack alignItems="center" justifyContent="space-between">
-        <Text fontSize="$xs" color={muted}>
-          {labelMap[metric.key]}
-        </Text>
-        <XStack alignItems="center" space="$1.5">
-          {statusLabel ? <PillBadge tone={status === 'danger' ? 'danger' : 'warning'}>{statusLabel}</PillBadge> : null}
-          <Text fontSize="$xs" color={textStrong} fontWeight="700">
-            {valueText}
-          </Text>
-        </XStack>
-      </XStack>
-      <YStack height={6} borderRadius={999} backgroundColor={border} overflow="hidden">
-        <YStack height="100%" width={`${fill}%`} backgroundColor={hasUsage ? fillColor : subtle} />
-      </YStack>
-      {remainingText ? (
-        <Text fontSize="$xs" color={muted}>
-          {remainingText}
-        </Text>
-      ) : null}
-    </YStack>
-  );
-}
-
-function formatAmount(value: number | null | undefined, currency: string | null | undefined): string {
-  if (value === null || value === undefined) {
-    return '—';
-  }
-  const cur = currency ?? 'EUR';
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency: cur }).format(value);
-  } catch {
-    return `${value} ${cur}`;
-  }
-}
-
-function AddonRow({ addon }: { addon: TenantAddonHistoryEntry }) {
-  const { t } = useTranslation('management');
-  const navigate = useNavigate();
-  const { border, textStrong, text, muted, subtle, primary } = useAdminTheme();
-  const labels: Record<TenantAddonHistoryEntry['status'], { tone: 'success' | 'warning' | 'muted'; text: string }> = {
-    completed: { tone: 'success', text: t('mobileBilling.status.completed', 'Completed') },
-    pending: { tone: 'warning', text: t('mobileBilling.status.pending', 'Pending') },
-    failed: { tone: 'muted', text: t('mobileBilling.status.failed', 'Failed') },
-  };
-  const status = labels[addon.status];
-  const eventName =
-    (addon.event?.name && typeof addon.event.name === 'string' && addon.event.name) ||
-    (addon.event?.name && typeof addon.event.name === 'object' ? addon.event.name?.en ?? addon.event.name?.de ?? Object.values(addon.event.name)[0] : null) ||
-    null;
-  const eventPath = addon.event?.slug ? ADMIN_EVENT_VIEW_PATH(addon.event.slug) : null;
-  const hasImpact = Boolean(addon.extra_photos || addon.extra_guests || addon.extra_gallery_days);
-  const impactBadges = hasImpact ? (
-    <XStack space="$2" marginTop="$1.5" flexWrap="wrap">
-      {addon.extra_photos ? (
-        <PillBadge tone="muted">{t('mobileBilling.extra.photos', '+{{count}} photos', { count: addon.extra_photos })}</PillBadge>
-      ) : null}
-      {addon.extra_guests ? (
-        <PillBadge tone="muted">{t('mobileBilling.extra.guests', '+{{count}} guests', { count: addon.extra_guests })}</PillBadge>
-      ) : null}
-      {addon.extra_gallery_days ? (
-        <PillBadge tone="muted">{t('mobileBilling.extra.days', '+{{count}} days', { count: addon.extra_gallery_days })}</PillBadge>
-      ) : null}
-    </XStack>
-  ) : null;
-
-  return (
-    <MobileCard borderColor={border} padding="$3" space="$1.5">
-      <XStack alignItems="center" justifyContent="space-between">
-        <Text fontSize="$sm" fontWeight="700" color={textStrong}>
-          {addon.label ?? addon.addon_key}
-        </Text>
-        <PillBadge tone={status.tone}>{status.text}</PillBadge>
-      </XStack>
-      {eventName ? (
-        eventPath ? (
-          <Pressable onPress={() => navigate(eventPath)}>
-            <XStack alignItems="center" justifyContent="space-between">
-              <Text fontSize="$xs" color={textStrong} fontWeight="600">
-                {eventName}
-              </Text>
-              <Text fontSize="$xs" color={primary} fontWeight="700">
-                {t('mobileBilling.openEvent', 'Open event')}
-              </Text>
-            </XStack>
-          </Pressable>
-        ) : (
-          <Text fontSize="$xs" color={subtle}>
-            {eventName}
-          </Text>
-        )
-      ) : null}
-      {impactBadges}
-      <Text fontSize="$sm" color={text} marginTop="$1.5">
-        {formatAmount(addon.amount, addon.currency)}
-      </Text>
-      <Text fontSize="$xs" color={muted}>
-        {formatDate(addon.purchased_at)}
-      </Text>
-    </MobileCard>
-  );
-}
-function formatDate(value: string | null | undefined): string {
-  if (!value) return '—';
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return '—';
-  return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' });
-}
+}