Update admin PWA events, branding, and packages

resources/js/admin/mobile/EventFormPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { CalendarDays, ChevronDown, MapPin, Save, Check } from 'lucide-react';
+import { isPast, isSameDay, parseISO, startOfDay } from 'date-fns';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Switch } from '@tamagui/switch';
@@ -71,6 +72,9 @@ export default function MobileEventFormPage() {
     packageId: null,
     servicePackageSlug: null,
   });
+  const [eventMeta, setEventMeta] = React.useState<{ status: TenantEvent['status']; eventDate: string | null } | null>(
+    null,
+  );
   const [eventTypes, setEventTypes] = React.useState<TenantEventType[]>([]);
   const [typesLoading, setTypesLoading] = React.useState(false);
   const [packages, setPackages] = React.useState<Package[]>([]);
@@ -86,11 +90,15 @@ export default function MobileEventFormPage() {
   const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));
 
   React.useEffect(() => {
-    if (!slug) return;
+    if (!slug) {
+      setEventMeta(null);
+      return;
+    }
     (async () => {
       setLoading(true);
       try {
         const data = await getEvent(slug);
+        setEventMeta({ status: data.status, eventDate: data.event_date });
         setForm({
           name: renderName(data.name),
           date: toDateTimeLocal(data.event_date),
@@ -117,6 +125,24 @@ export default function MobileEventFormPage() {
     })();
   }, [slug, t, isEdit]);
 
+  const isEventCompleted = React.useMemo(() => {
+    if (!eventMeta) return false;
+    if (eventMeta.status === 'archived') return true;
+    if (!eventMeta.eventDate) return false;
+    const eventDate = parseISO(eventMeta.eventDate);
+    const today = startOfDay(new Date());
+    if (isSameDay(today, eventDate)) return false;
+    return isPast(eventDate);
+  }, [eventMeta]);
+
+  const handleDateChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (isEventCompleted) return;
+      setForm((prev) => ({ ...prev, date: event.target.value }));
+    },
+    [isEventCompleted],
+  );
+
   React.useEffect(() => {
     (async () => {
       setTypesLoading(true);
@@ -429,8 +455,9 @@ export default function MobileEventFormPage() {
           <XStack alignItems="center" space="$2">
             <MobileDateTimeInput
               value={form.date}
-              onChange={(event) => setForm((prev) => ({ ...prev, date: event.target.value }))}
+              onChange={handleDateChange}
               style={{ flex: 1 }}
+              disabled={isEventCompleted}
             />
             <CalendarDays size={16} color={subtle} />
           </XStack>