fixed tenants and eventpurchaseresource, changed lightbox in gallery

resources/js/components/ui/dialog.tsx

@@ -47,8 +47,9 @@ function DialogOverlay({
 function DialogContent({
   className,
   children,
+  hideClose = false,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+}: React.ComponentProps<typeof DialogPrimitive.Content> & { hideClose?: boolean }) {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
@@ -61,10 +62,12 @@ function DialogContent({
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          <XIcon />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+        {!hideClose && (
+          <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   )

resources/js/guest/components/GalleryPreview.tsx

@@ -97,7 +97,7 @@ export default function GalleryPreview({ slug }: Props) {
       )}
       <div className="grid grid-cols-2 gap-3">
         {items.map((p: any) => (
-          <Link key={p.id} to={`/e/${slug}/photo/${p.id}`} state={{ photo: p }} className="block">
+          <Link key={p.id} to={`/e/${slug}/gallery?photoId=${p.id}`} className="block">
             <div className="relative">
               <img
                 src={p.thumbnail_path || p.file_path}

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>
   );
 }

resources/js/guest/pages/PhotoLightbox.tsx

@@ -1,65 +1,133 @@
-import React from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Heart } from 'lucide-react';
+import { Heart, ChevronLeft, ChevronRight, X } from 'lucide-react';
 import { likePhoto } from '../services/photosApi';
 
-type Photo = { 
-  id: number; 
-  file_path?: string; 
-  thumbnail_path?: string; 
-  likes_count?: number; 
-  created_at?: string; 
-  task_id?: number 
+type Photo = {
+  id: number;
+  file_path?: string;
+  thumbnail_path?: string;
+  likes_count?: number;
+  created_at?: string;
+  task_id?: number;
+  task_title?: string;
 };
 
 type Task = { id: number; title: string };
 
-export default function PhotoLightbox() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { photoId } = useParams();
-  
-  const [photo, setPhoto] = React.useState<Photo | null>(null);
-  const [task, setTask] = React.useState<Task | null>(null);
-  const [taskLoading, setTaskLoading] = React.useState(false);
-  const [likes, setLikes] = React.useState<number | null>(null);
-  const [liked, setLiked] = React.useState(false);
+interface Props {
+  photos?: Photo[];
+  currentIndex?: number;
+  onClose?: () => void;
+  onIndexChange?: (index: number) => void;
+  slug?: string;
+}
 
-  // Extract event slug from URL path
-  const getEventSlug = () => {
-    const path = window.location.pathname;
-    const match = path.match(/^\/e\/([^\/]+)\/photo\/[^\/]+$/);
-    return match ? match[1] : null;
+export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexChange, slug }: Props) {
+  const params = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const photoId = params.photoId;
+  const eventSlug = params.slug || slug;
+
+  const [standalonePhoto, setStandalonePhoto] = useState<Photo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [task, setTask] = useState<Task | null>(null);
+  const [taskLoading, setTaskLoading] = useState(false);
+  const [likes, setLikes] = useState<number>(0);
+  const [liked, setLiked] = useState(false);
+
+  // Determine mode and photo
+  const isStandalone = !photos || photos.length === 0;
+  const currentPhotos = isStandalone ? (standalonePhoto ? [standalonePhoto] : []) : photos || [];
+  const currentIndexVal = isStandalone ? 0 : (currentIndex || 0);
+  const photo = currentPhotos[currentIndexVal];
+
+  // Fallback onClose for standalone
+  const handleClose = onClose || (() => navigate(-1));
+
+  // Fetch single photo for standalone mode
+  useEffect(() => {
+    if (isStandalone && photoId && !standalonePhoto && eventSlug) {
+      const fetchPhoto = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+          const res = await fetch(`/api/v1/photos/${photoId}`);
+          if (res.ok) {
+            const fetchedPhoto: Photo = await res.json();
+            setStandalonePhoto(fetchedPhoto);
+            // Check state for initial photo
+            if (location.state?.photo) {
+              setStandalonePhoto(location.state.photo);
+            }
+          } else {
+            setError('Foto nicht gefunden');
+          }
+        } catch (err) {
+          setError('Fehler beim Laden des Fotos');
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      fetchPhoto();
+    } else if (!isStandalone) {
+      setLoading(false);
+    }
+  }, [isStandalone, photoId, eventSlug, standalonePhoto, location.state]);
+
+  // Update likes when photo changes
+  React.useEffect(() => {
+    if (photo) {
+      setLikes(photo.likes_count ?? 0);
+      // Check if liked from localStorage
+      try {
+        const raw = localStorage.getItem('liked-photo-ids');
+        const likedIds = raw ? JSON.parse(raw) : [];
+        setLiked(likedIds.includes(photo.id));
+      } catch {
+        setLiked(false);
+      }
+    }
+  }, [photo]);
+
+  const touchRef = React.useRef<HTMLDivElement>(null);
+  const startX = React.useRef(0);
+  const currentX = React.useRef(0);
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    startX.current = e.touches[0].clientX;
   };
 
-  const slug = getEventSlug();
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (!touchRef.current) return;
+    currentX.current = e.touches[0].clientX;
+    const deltaX = currentX.current - startX.current;
+    touchRef.current.style.transform = `translateX(${deltaX}px)`;
+  };
 
-  // Load photo if not passed via state
-  React.useEffect(() => {
-    const statePhoto = (location.state as any)?.photo;
-    if (statePhoto) {
-      setPhoto(statePhoto);
-      setLikes(statePhoto.likes_count ?? 0);
-      return;
-    }
+  const handleTouchEnd = () => {
+    if (!touchRef.current) return;
+    const deltaX = currentX.current - startX.current;
+    const threshold = 50; // pixels
 
-    if (!photoId) return;
+    touchRef.current.style.transform = 'translateX(0)';
 
-    (async () => {
-      try {
-        const res = await fetch(`/api/v1/photos/${photoId}`);
-        if (res.ok) {
-          const photoData = await res.json();
-          setPhoto(photoData);
-          setLikes(photoData.likes_count ?? 0);
-        }
-      } catch (error) {
-        console.error('Failed to load photo:', error);
+    if (Math.abs(deltaX) > threshold) {
+      if (deltaX > 0 && currentIndexVal > 0) {
+        // Swipe right - previous
+        onIndexChange?.(currentIndexVal - 1);
+      } else if (deltaX < 0 && currentIndexVal < currentPhotos.length - 1) {
+        // Swipe left - next
+        onIndexChange?.(currentIndexVal + 1);
       }
-    })();
-  }, [photoId, location.state]);
+    }
+  };
+
 
   // Load task info if photo has task_id and slug is available
   React.useEffect(() => {
@@ -79,27 +147,27 @@ export default function PhotoLightbox() {
           const tasks = await res.json();
           const foundTask = tasks.find((t: any) => t.id === taskId);
           if (foundTask) {
-            setTask({ 
-              id: foundTask.id, 
-              title: foundTask.title || `Aufgabe ${taskId}` 
+            setTask({
+              id: foundTask.id,
+              title: foundTask.title || `Aufgabe ${taskId}`
             });
           } else {
-            setTask({ 
-              id: taskId, 
-              title: `Unbekannte Aufgabe ${taskId}` 
+            setTask({
+              id: taskId,
+              title: `Unbekannte Aufgabe ${taskId}`
             });
           }
         } else {
-          setTask({ 
-            id: taskId, 
-            title: `Unbekannte Aufgabe ${taskId}` 
+          setTask({
+            id: taskId,
+            title: `Unbekannte Aufgabe ${taskId}`
           });
         }
       } catch (error) {
         console.error('Failed to load task:', error);
-        setTask({ 
-          id: taskId, 
-          title: `Unbekannte Aufgabe ${taskId}` 
+        setTask({
+          id: taskId,
+          title: `Unbekannte Aufgabe ${taskId}`
         });
       } finally {
         setTaskLoading(false);
@@ -113,6 +181,14 @@ export default function PhotoLightbox() {
     try {
       const count = await likePhoto(photo.id);
       setLikes(count);
+      // Update localStorage
+      try {
+        const raw = localStorage.getItem('liked-photo-ids');
+        const arr: number[] = raw ? JSON.parse(raw) : [];
+        if (!arr.includes(photo.id)) {
+          localStorage.setItem('liked-photo-ids', JSON.stringify([...arr, photo.id]));
+        }
+      } catch {}
     } catch (error) {
       console.error('Like failed:', error);
       setLiked(false);
@@ -120,37 +196,60 @@ export default function PhotoLightbox() {
   }
 
   function onOpenChange(open: boolean) {
-    if (!open) navigate(-1);
-  }
-
-  if (!photo && !photoId) {
-    return null;
+    if (!open) handleClose();
   }
 
   return (
     <Dialog open={true} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl border-0 bg-black p-0 text-white">
+      <DialogContent hideClose className="max-w-5xl border-0 bg-black p-0 text-white">
         {/* Header with controls */}
         <div className="flex items-center justify-between p-2">
           <div className="flex items-center gap-2">
-            <Button 
-              variant="secondary" 
-              size="sm" 
-              onClick={onLike} 
-              disabled={liked || !photo}
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={onLike}
+              disabled={liked}
             >
-              <Heart className={`mr-1 h-4 w-4 ${liked ? 'fill-red-400 text-red-400' : ''}`} /> 
-              {likes ?? 0}
+              <Heart className={`mr-1 h-4 w-4 ${liked ? 'fill-red-400 text-red-400' : ''}`} />
+              {likes}
             </Button>
           </div>
-          <Button variant="secondary" size="sm" onClick={() => navigate(-1)}>
-            Schließen
-          </Button>
+          <div className="flex items-center gap-1">
+            {currentIndexVal > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onIndexChange?.(currentIndexVal - 1)}
+                className="h-8 w-8 p-0"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClose}
+              className="h-8 w-8 p-0"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+            {currentIndexVal < currentPhotos.length - 1 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onIndexChange?.(currentIndexVal + 1)}
+                className="h-8 w-8 p-0"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
         </div>
 
         {/* Task Info Overlay */}
         {task && (
-          <div className="absolute top-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
+          <div className="absolute bottom-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
             <div className="text-sm">
               <div className="font-semibold mb-1 text-white">Task: {task.title}</div>
               {taskLoading && (
@@ -161,23 +260,22 @@ export default function PhotoLightbox() {
         )}
 
         {/* Photo Display */}
-        <div className="flex items-center justify-center min-h-[60vh] p-4">
-          {photo ? (
-            <img 
-              src={photo.file_path || photo.thumbnail_path} 
-              alt="Foto" 
-              className="max-h-[80vh] max-w-full object-contain" 
-              onError={(e) => {
-                console.error('Image load error:', e);
-                (e.target as HTMLImageElement).style.display = 'none';
-              }}
-            />
-          ) : (
-            <div className="p-6 text-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
-              <div>Lade Foto...</div>
-            </div>
-          )}
+        <div
+          ref={touchRef}
+          className="flex items-center justify-center min-h-[60vh] p-4 relative overflow-hidden"
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+        >
+          <img
+            src={photo?.file_path || photo?.thumbnail_path}
+            alt={`Foto ${photo?.id || ''}${photo?.task_title ? ` - ${photo.task_title}` : ''}`}
+            className="max-h-[80vh] max-w-full object-contain transition-transform duration-200"
+            onError={(e) => {
+              console.error('Image load error:', e);
+              (e.target as HTMLImageElement).style.display = 'none';
+            }}
+          />
         </div>
 
         {/* Loading state for task */}

resources/js/src/images/wedding-lights-background.svg

@@ -0,0 +1,44 @@
+<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="light" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#gradient)"/>
+  <g opacity="0.3">
+    <!-- Soft gradient background -->
+    <rect width="100%" height="100%" fill="url(#bgGradient)"/>
+    
+    <!-- Decorative lights -->
+    <circle cx="100" cy="100" r="3" fill="#ffd700" opacity="0.7">
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="200" cy="150" r="2" fill="#ff69b4" opacity="0.6">
+      <animate attributeName="opacity" values="0.3;0.8;0.3" dur="4s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="300" cy="80" r="4" fill="#87cefa" opacity="0.5">
+      <animate attributeName="opacity" values="0.4;0.9;0.4" dur="5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="400" cy="120" r="2.5" fill="#98fb98" opacity="0.7">
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="3.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="500" cy="90" r="3.5" fill="#dda0dd" opacity="0.6">
+      <animate attributeName="opacity" values="0.4;0.9;0.4" dur="4.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="600" cy="140" r="2" fill="#f0e68c" opacity="0.8">
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="2.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="700" cy="110" r="3" fill="#ff6347" opacity="0.7">
+      <animate attributeName="opacity" values="0.3;0.8;0.3" dur="3s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+  
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#fff0f5" />
+      <stop offset="50%" stop-color="#ffe4e1" />
+      <stop offset="100%" stop-color="#e6e6fa" />
+    </linearGradient>
+  </defs>
+</svg>