Add approve-and-live action for Live Show

resources/js/admin/mobile/EventLiveShowQueuePage.tsx

@@ -9,6 +9,7 @@ import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Pri
 import { MobileSelect } from './components/FormControls';
 import { useEventContext } from '../context/EventContext';
 import {
+  approveAndLiveShowPhoto,
   approveLiveShowPhoto,
   clearLiveShowPhoto,
   getEvents,
@@ -123,6 +124,22 @@ export default function MobileEventLiveShowQueuePage() {
     }
   }
 
+  async function handleApproveAndLive(photo: TenantPhoto) {
+    if (!slug || busyId) return;
+    setBusyId(photo.id);
+    try {
+      const updated = await approveAndLiveShowPhoto(slug, photo.id);
+      setPhotos((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
+      toast.success(t('liveShowQueue.approveAndLiveSuccess', 'Photo approved and added to Live Show'));
+    } catch (err) {
+      if (!isAuthError(err)) {
+        toast.error(t('liveShowQueue.actionFailed', 'Live Show update failed.'));
+      }
+    } finally {
+      setBusyId(null);
+    }
+  }
+
   async function handleReject(photo: TenantPhoto) {
     if (!slug || busyId) return;
     setBusyId(photo.id);
@@ -161,6 +178,17 @@ export default function MobileEventLiveShowQueuePage() {
     return 'muted';
   }
 
+  function resolveGalleryLabel(status?: string | null): string {
+    const fallbackMap: Record<string, string> = {
+      approved: 'Gallery approved',
+      pending: 'Gallery pending',
+      rejected: 'Gallery rejected',
+      hidden: 'Hidden',
+    };
+    const key = status ?? 'pending';
+    return t(`liveShowQueue.galleryStatus.${key}`, fallbackMap[key] ?? key);
+  }
+
   return (
     <MobileShell
       activeTab="home"
@@ -175,7 +203,10 @@ export default function MobileEventLiveShowQueuePage() {
     >
       <MobileCard borderColor={border} backgroundColor="transparent">
         <Text fontSize="$sm" color={muted}>
-          {t('liveShowQueue.galleryApprovedOnly', 'Only gallery-approved photos appear here.')}
+          {t(
+            'liveShowQueue.galleryApprovedOnly',
+            'Gallery and Live Show approvals are separate. Pending photos can be approved here.'
+          )}
         </Text>
         {!online ? (
           <Text fontSize="$sm" color={danger}>
@@ -223,6 +254,11 @@ export default function MobileEventLiveShowQueuePage() {
           {photos.map((photo) => {
             const isBusy = busyId === photo.id;
             const liveStatus = photo.live_status ?? 'pending';
+            const galleryStatus = photo.status ?? 'pending';
+            const canApproveGallery = galleryStatus === 'pending';
+            const canApproveLiveOnly = galleryStatus === 'approved';
+            const canApproveLive = canApproveGallery || canApproveLiveOnly;
+            const showApproveAction = liveStatus !== 'approved';
             return (
               <MobileCard key={photo.id}>
                 <XStack space="$3" alignItems="center">
@@ -241,8 +277,8 @@ export default function MobileEventLiveShowQueuePage() {
                   ) : null}
                   <YStack flex={1} space="$2">
                     <XStack alignItems="center" space="$2">
-                      <PillBadge tone="success">
-                        {t('liveShowQueue.galleryApproved', 'Gallery approved')}
+                      <PillBadge tone={resolveStatusTone(galleryStatus)}>
+                        {resolveGalleryLabel(galleryStatus)}
                       </PillBadge>
                       <PillBadge tone={resolveStatusTone(liveStatus)}>
                         {t(`liveShowQueue.status.${liveStatus}`, liveStatus)}
@@ -254,11 +290,25 @@ export default function MobileEventLiveShowQueuePage() {
                   </YStack>
                 </XStack>
                 <XStack space="$2" marginTop="$2">
-                  {liveStatus !== 'approved' ? (
+                  {showApproveAction ? (
                     <CTAButton
-                      label={t('liveShowQueue.approve', 'Approve for Live Show')}
-                      onPress={() => handleApprove(photo)}
-                      disabled={!online}
+                      label={
+                        canApproveGallery
+                          ? t('liveShowQueue.approveAndLive', 'Approve + Live')
+                          : canApproveLiveOnly
+                            ? t('liveShowQueue.approve', 'Approve for Live Show')
+                            : t('liveShowQueue.notEligible', 'Not eligible')
+                      }
+                      onPress={() => {
+                        if (canApproveGallery) {
+                          void handleApproveAndLive(photo);
+                          return;
+                        }
+                        if (canApproveLiveOnly) {
+                          void handleApprove(photo);
+                        }
+                      }}
+                      disabled={!online || !canApproveLive}
                       loading={isBusy}
                       tone="primary"
                     />