fixed tenants and eventpurchaseresource, changed lightbox in gallery

resources/js/guest/pages/GalleryPage.tsx

@@ -1,19 +1,34 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { Page } from './_util';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
 import { Card, CardContent } from '@/components/ui/card';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
-import { Link } from 'react-router-dom';
 import { Heart } from 'lucide-react';
 import { likePhoto } from '../services/photosApi';
+import PhotoLightbox from './PhotoLightbox';
 
 export default function GalleryPage() {
   const { slug } = useParams();
   const { photos, loading, newCount, acknowledgeNew } = usePollGalleryDelta(slug!);
   const [filter, setFilter] = React.useState<GalleryFilter>('latest');
+  const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
+  const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);
+
+  const [searchParams] = useSearchParams();
+  const photoIdParam = searchParams.get('photoId');
+  // Auto-open lightbox if photoId in query params
+  useEffect(() => {
+    if (photoIdParam && photos.length > 0 && currentPhotoIndex === null && !hasOpenedPhoto) {
+      const index = photos.findIndex((photo: any) => photo.id === parseInt(photoIdParam, 10));
+      if (index !== -1) {
+        setCurrentPhotoIndex(index);
+        setHasOpenedPhoto(true);
+      }
+    }
+  }, [photos, photoIdParam, currentPhotoIndex, hasOpenedPhoto]);
 
   const myPhotoIds = React.useMemo(() => {
     try {
@@ -106,7 +121,13 @@ export default function GalleryPage() {
           return (
             <Card key={p.id} className="relative overflow-hidden">
               <CardContent className="p-0">
-                <Link to={`../photo/${p.id}`} state={{ photo: p }}>
+                <div
+                  onClick={() => {
+                    const index = list.findIndex(photo => photo.id === p.id);
+                    setCurrentPhotoIndex(index >= 0 ? index : null);
+                  }}
+                  className="cursor-pointer"
+                >
                   <img
                     src={imageUrl}
                     alt={`Foto ${p.id}${p.task_title ? ` - ${p.task_title}` : ''}`}
@@ -119,7 +140,7 @@ export default function GalleryPage() {
                     onLoad={() => console.log(`✅ Successfully loaded image ${p.id}:`, imageUrl)}
                     loading="lazy"
                   />
-                </Link>
+                </div>
               </CardContent>
               
               {p.task_title && (
@@ -138,6 +159,15 @@ export default function GalleryPage() {
           );
         })}
       </div>
+      {currentPhotoIndex !== null && list.length > 0 && (
+        <PhotoLightbox
+          photos={list}
+          currentIndex={currentPhotoIndex}
+          onClose={() => setCurrentPhotoIndex(null)}
+          onIndexChange={(index: number) => setCurrentPhotoIndex(index)}
+          slug={slug}
+        />
+      )}
     </Page>
   );
 }