Expand package limit and feature details

resources/js/admin/mobile/DashboardPage.tsx

@@ -17,7 +17,7 @@ import { useAdminPushSubscription } from './hooks/useAdminPushSubscription';
 import { useDevicePermissions } from './hooks/useDevicePermissions';
 import { useInstallPrompt } from './hooks/useInstallPrompt';
 import { getTourSeen, resolveTourStepKeys, setTourSeen, type TourStepKey } from './lib/mobileTour';
-import { formatPackageLimit, getPackageFeatureLabel } from './lib/packageSummary';
+import { collectPackageFeatures, formatPackageLimit, getPackageFeatureLabel, getPackageLimitEntries } from './lib/packageSummary';
 import { trackOnboarding } from '../api';
 import { useAuth } from '../auth/context';
 import { ADMIN_ACTION_COLORS, ADMIN_MOTION, useAdminTheme } from './theme';
@@ -508,7 +508,14 @@ function PackageSummarySheet({
   const maxPhotos = (limits as Record<string, number | null> | null)?.max_photos ?? null;
   const maxGuests = (limits as Record<string, number | null> | null)?.max_guests ?? null;
   const galleryDays = (limits as Record<string, number | null> | null)?.gallery_days ?? null;
-  const hasFeatures = Array.isArray(features) && features.length > 0;
+  const resolvedFeatures = collectPackageFeatures({
+    features,
+    package_limits: limits,
+    branding_allowed: (limits as any)?.branding_allowed ?? null,
+    watermark_allowed: (limits as any)?.watermark_allowed ?? null,
+  } as any);
+  const limitEntries = getPackageLimitEntries(limits, t);
+  const hasFeatures = resolvedFeatures.length > 0;
 
   const formatDate = (value?: string | null) => formatEventDate(value, locale) ?? t('mobileDashboard.packageSummary.unknown', 'Unknown');
 
@@ -539,13 +546,26 @@ function PackageSummarySheet({
           </YStack>
         </MobileCard>
 
-          {hasFeatures ? (
+        {limitEntries.length ? (
+          <MobileCard space="$2" borderColor={border} backgroundColor={surface}>
+            <Text fontSize="$sm" fontWeight="800" color={text}>
+              {t('mobileDashboard.packageSummary.limitsTitle', 'Limits')}
+            </Text>
+            <YStack space="$1.5" marginTop="$2">
+              {limitEntries.map((entry) => (
+                <SummaryRow key={entry.key} label={entry.label} value={entry.value} />
+              ))}
+            </YStack>
+          </MobileCard>
+        ) : null}
+
+        {hasFeatures ? (
           <MobileCard space="$2" borderColor={border} backgroundColor={surface}>
             <Text fontSize="$sm" fontWeight="800" color={text}>
               {t('mobileDashboard.packageSummary.featuresTitle', 'Included features')}
             </Text>
             <YStack space="$1.5" marginTop="$2">
-              {features?.map((feature) => (
+              {resolvedFeatures.map((feature) => (
                 <XStack key={feature} alignItems="center" space="$2">
                   <XStack width={24} height={24} borderRadius={8} backgroundColor={accentSoft} alignItems="center" justifyContent="center">
                     <Sparkles size={14} color={primary} />