Misc unrelated updates

resources/js/admin/mobile/EventFormPage.tsx

@@ -9,7 +9,7 @@ import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton } from './components/Primitives';
 import { MobileField, MobileInput, MobileSelect, MobileTextArea } from './components/FormControls';
 import { LegalConsentSheet } from './components/LegalConsentSheet';
-import { createEvent, getEvent, updateEvent, getEventTypes, TenantEvent, TenantEventType, trackOnboarding } from '../api';
+import { createEvent, getEvent, updateEvent, getEventTypes, getPackages, Package, TenantEvent, TenantEventType, trackOnboarding } from '../api';
 import { resolveEventSlugAfterUpdate } from './eventFormNavigation';
 import { adminPath } from '../constants';
 import { isAuthError } from '../auth/tokens';
@@ -18,6 +18,7 @@ import toast from 'react-hot-toast';
 import { useBackNavigation } from './hooks/useBackNavigation';
 import { useAdminTheme } from './theme';
 import { withAlpha } from './components/colors';
+import { useAuth } from '../auth/context';
 
 type FormState = {
   name: string;
@@ -28,6 +29,7 @@ type FormState = {
   published: boolean;
   autoApproveUploads: boolean;
   tasksEnabled: boolean;
+  packageId: number | null;
 };
 
 export default function MobileEventFormPage() {
@@ -36,7 +38,9 @@ export default function MobileEventFormPage() {
   const isEdit = Boolean(slug);
   const navigate = useNavigate();
   const { t } = useTranslation(['management', 'common']);
+  const { user } = useAuth();
   const { text, muted, subtle, danger, border, surface, primary } = useAdminTheme();
+  const isSuperAdmin = user?.role === 'super_admin' || user?.role === 'superadmin';
 
   const [form, setForm] = React.useState<FormState>({
     name: '',
@@ -47,9 +51,12 @@ export default function MobileEventFormPage() {
     published: false,
     autoApproveUploads: true,
     tasksEnabled: true,
+    packageId: null,
   });
   const [eventTypes, setEventTypes] = React.useState<TenantEventType[]>([]);
   const [typesLoading, setTypesLoading] = React.useState(false);
+  const [packages, setPackages] = React.useState<Package[]>([]);
+  const [packagesLoading, setPackagesLoading] = React.useState(false);
   const [loading, setLoading] = React.useState(isEdit);
   const [saving, setSaving] = React.useState(false);
   const [consentOpen, setConsentOpen] = React.useState(false);
@@ -76,6 +83,7 @@ export default function MobileEventFormPage() {
           tasksEnabled:
             (data.settings?.engagement_mode as string | undefined) !== 'photo_only' &&
             (data.engagement_mode as string | undefined) !== 'photo_only',
+          packageId: null,
         });
         setError(null);
       } catch (err) {
@@ -106,6 +114,31 @@ export default function MobileEventFormPage() {
     })();
   }, []);
 
+  React.useEffect(() => {
+    if (!isSuperAdmin || isEdit) {
+      return;
+    }
+
+    (async () => {
+      setPackagesLoading(true);
+      try {
+        const data = await getPackages('endcustomer');
+        setPackages(data);
+        setForm((prev) => {
+          if (prev.packageId) {
+            return prev;
+          }
+          const preferred = data.find((pkg) => pkg.id === 3) ?? data[0] ?? null;
+          return { ...prev, packageId: preferred?.id ?? null };
+        });
+      } catch {
+        setPackages([]);
+      } finally {
+        setPackagesLoading(false);
+      }
+    })();
+  }, [isSuperAdmin, isEdit]);
+
   async function handleSubmit() {
     setSaving(true);
     setError(null);
@@ -131,6 +164,7 @@ export default function MobileEventFormPage() {
           event_type_id: form.eventTypeId ?? undefined,
           event_date: form.date || undefined,
           status: form.published ? 'published' : 'draft',
+          package_id: isSuperAdmin ? form.packageId ?? undefined : undefined,
           settings: {
             location: form.location,
             guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review',
@@ -153,6 +187,7 @@ export default function MobileEventFormPage() {
           event_type_id: form.eventTypeId ?? undefined,
           event_date: form.date || undefined,
           status: form.published ? 'published' : 'draft',
+          package_id: isSuperAdmin ? form.packageId ?? undefined : undefined,
           settings: {
             location: form.location,
             guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review',
@@ -223,6 +258,31 @@ export default function MobileEventFormPage() {
           />
         </MobileField>
 
+        {isSuperAdmin && !isEdit ? (
+          <MobileField label={t('eventForm.fields.package.label', 'Package')}>
+            {packagesLoading ? (
+              <Text fontSize="$sm" color={muted}>{t('eventForm.fields.package.loading', 'Loading packages…')}</Text>
+            ) : packages.length === 0 ? (
+              <Text fontSize="$sm" color={muted}>{t('eventForm.fields.package.empty', 'No packages available yet.')}</Text>
+            ) : (
+              <MobileSelect
+                value={form.packageId ?? ''}
+                onChange={(e) => setForm((prev) => ({ ...prev, packageId: Number(e.target.value) }))}
+              >
+                <option value="">{t('eventForm.fields.package.placeholder', 'Select package')}</option>
+                {packages.map((pkg) => (
+                  <option key={pkg.id} value={pkg.id}>
+                    {pkg.name || `#${pkg.id}`}
+                  </option>
+                ))}
+              </MobileSelect>
+            )}
+            <Text fontSize="$xs" color={muted}>
+              {t('eventForm.fields.package.help', 'This controls the event’s premium limits.')}
+            </Text>
+          </MobileField>
+        ) : null}
+
         <MobileField label={t('eventForm.fields.date.label', 'Date & time')}>
           <XStack alignItems="center" space="$2">
             <NativeDateTimeInput