die eventphotospage funktioniert nun zuverlässig

resources/js/admin/api.ts

@@ -1300,16 +1300,51 @@ export async function getEventTypes(): Promise<TenantEventType[]> {
     .filter((row): row is TenantEventType => Boolean(row));
 }
 
-export async function getEventPhotos(slug: string): Promise<{ photos: TenantPhoto[]; limits: EventLimitSummary | null }> {
-  const response = await authorizedFetch(`${eventEndpoint(slug)}/photos`);
-  const data = await jsonOrThrow<{ data?: TenantPhoto[]; limits?: EventLimitSummary | null }>(
+export type GetEventPhotosOptions = {
+  page?: number;
+  perPage?: number;
+  sort?: 'asc' | 'desc';
+  search?: string;
+  status?: string;
+  featured?: boolean;
+  ingestSource?: string;
+  visibility?: 'visible' | 'hidden' | 'all';
+};
+
+export async function getEventPhotos(
+  slug: string,
+  options: GetEventPhotosOptions = {}
+): Promise<{ photos: TenantPhoto[]; limits: EventLimitSummary | null; meta: PaginationMeta }> {
+  const params = new URLSearchParams();
+  if (options.page) params.set('page', String(options.page));
+  if (options.perPage) params.set('per_page', String(options.perPage));
+  if (options.sort) params.set('sort', options.sort);
+  if (options.search) params.set('search', options.search);
+  if (options.status) params.set('status', options.status);
+  if (options.featured) params.set('featured', '1');
+  if (options.ingestSource) params.set('ingest_source', options.ingestSource);
+  if (options.visibility) params.set('visibility', options.visibility);
+
+  const response = await authorizedFetch(`${eventEndpoint(slug)}/photos${params.toString() ? `?${params.toString()}` : ''}`);
+  const data = await jsonOrThrow<{
+    data?: TenantPhoto[];
+    limits?: EventLimitSummary | null;
+    meta?: Partial<PaginationMeta>;
+    current_page?: number;
+    last_page?: number;
+    per_page?: number;
+    total?: number;
+  }>(
     response,
     'Failed to load photos'
   );
 
+  const meta = buildPagination(data as unknown as JsonValue, options.perPage ?? 40);
+
   return {
     photos: (data.data ?? []).map(normalizePhoto),
     limits: (data.limits ?? null) as EventLimitSummary | null,
+    meta,
   };
 }
 
@@ -1328,8 +1363,12 @@ export async function unfeaturePhoto(slug: string, id: number): Promise<TenantPh
 export async function deletePhoto(slug: string, id: number): Promise<void> {
   const response = await authorizedFetch(`${eventEndpoint(slug)}/photos/${id}`, { method: 'DELETE' });
   if (!response.ok) {
-    await safeJson(response);
-    throw new Error('Failed to delete photo');
+    const payload = await safeJson(response);
+    if (response.status === 404) {
+      // Treat missing files as idempotent deletes to keep the UI in sync.
+      return;
+    }
+    throw new Error(typeof payload?.message === 'string' ? payload.message : 'Failed to delete photo');
   }
 }
 

resources/js/admin/lib/eventTabs.ts

@@ -12,7 +12,6 @@ import {
 export type EventTabCounts = Partial<{
   photos: number;
   tasks: number;
-  invites: number;
 }>;
 
 type Translator = (key: string, fallback: string) => string;
@@ -26,7 +25,7 @@ export function buildEventTabs(event: TenantEvent, translate: Translator, counts
   const hasPassed = eventDate ? eventDate.getTime() <= Date.now() : false;
 
   const formatBadge = (value?: number | null): number | undefined => {
-    if (typeof value === 'number' && Number.isFinite(value)) {
+    if (typeof value === 'number' && Number.isFinite(value) && value > 0) {
       return value;
     }
     return undefined;
@@ -42,19 +41,18 @@ export function buildEventTabs(event: TenantEvent, translate: Translator, counts
       key: 'photos',
       label: translate('eventMenu.photos', 'Uploads'),
       href: ADMIN_EVENT_PHOTOS_PATH(event.slug),
-      badge: formatBadge(counts.photos ?? event.photo_count ?? event.pending_photo_count ?? null),
+      badge: formatBadge(counts.photos),
     },
     {
       key: 'tasks',
       label: translate('eventMenu.tasks', 'Aufgaben'),
       href: ADMIN_EVENT_TASKS_PATH(event.slug),
-      badge: formatBadge(counts.tasks ?? event.tasks_count ?? null),
+      badge: formatBadge(counts.tasks),
     },
     {
       key: 'invites',
       label: translate('eventMenu.invites', 'Einladungen'),
       href: ADMIN_EVENT_INVITES_PATH(event.slug),
-      badge: formatBadge(counts.invites ?? event.active_invites_count ?? event.total_invites_count ?? null),
     },
     {
       key: 'branding',

resources/js/admin/main.tsx

@@ -1,6 +1,7 @@
 import React, { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
+import { Toaster } from 'react-hot-toast';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AuthProvider } from './auth/context';
 import { router } from './router';
@@ -55,6 +56,7 @@ createRoot(rootEl).render(
           </OnboardingProgressProvider>
         </EventProvider>
       </AuthProvider>
+      <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
       {enableDevSwitcher ? (
         <Suspense fallback={null}>
           <DevTenantSwitcher />

resources/js/admin/pages/EventDetailPage.tsx

@@ -217,7 +217,6 @@ export default function EventDetailPage() {
     const counts = {
       photos: stats?.uploads_total ?? event.photo_count ?? undefined,
       tasks: toolkitData?.tasks?.summary?.total ?? event.tasks_count ?? undefined,
-      invites: event.active_invites_count ?? event.total_invites_count ?? undefined,
     };
     return buildEventTabs(event, translateMenu, counts);
   }, [event, stats?.uploads_total, toolkitData?.tasks?.summary?.total, t]);

resources/js/admin/pages/EventInvitesPage.tsx

@@ -284,7 +284,6 @@ export default function EventInvitesPage(): React.ReactElement {
     }
     const translateMenu = (key: string, fallback: string) => t(key, { defaultValue: fallback });
     return buildEventTabs(event, translateMenu, {
-      invites: state.invites.length,
       photos: event.photo_count ?? event.pending_photo_count ?? undefined,
       tasks: event.tasks_count ?? undefined,
     });

resources/js/admin/pages/EventPhotoboothPage.tsx

@@ -186,7 +186,6 @@ export default function EventPhotoboothPage() {
     }
     const translateMenu = (key: string, fallback: string) => t(key, { defaultValue: fallback });
     return buildEventTabs(event, translateMenu, {
-      invites: event.active_invites_count ?? event.total_invites_count ?? undefined,
       photos: event.photo_count ?? event.pending_photo_count ?? undefined,
       tasks: event.tasks_count ?? undefined,
     });

resources/js/admin/pages/EventPhotosPage.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import {
   AlertTriangle,
   Camera,
+  Check,
   Copy,
   Eye,
   EyeOff,
@@ -21,13 +22,16 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import toast from 'react-hot-toast';
 import { AddonsPicker } from '../components/Addons/AddonsPicker';
 import { AddonSummaryList } from '../components/Addons/AddonSummaryList';
 import { getAddonCatalog, type EventAddonCatalogItem, type EventAddonSummary } from '../api';
 
 import { AdminLayout } from '../components/AdminLayout';
-import { createEventAddonCheckout, deletePhoto, featurePhoto, getEvent, getEventPhotos, TenantEvent, TenantPhoto, unfeaturePhoto } from '../api';
+import { createEventAddonCheckout, deletePhoto, featurePhoto, getEvent, getEventPhotos, TenantEvent, TenantPhoto, unfeaturePhoto, updatePhotoVisibility, type PaginationMeta } from '../api';
 import { isAuthError } from '../auth/tokens';
 import { getApiErrorMessage } from '../lib/apiError';
 import { buildLimitWarnings, type EventLimitSummary } from '../lib/limitWarnings';
@@ -36,6 +40,7 @@ import { ADMIN_EVENTS_PATH, ADMIN_EVENT_VIEW_PATH, ADMIN_EVENT_PHOTOBOOTH_PATH }
 import { buildEventTabs } from '../lib/eventTabs';
 
 export default function EventPhotosPage() {
+  const PAGE_SIZE = 40;
   const params = useParams<{ slug?: string }>();
   const [searchParams, setSearchParams] = useSearchParams();
   const slug = params.slug ?? searchParams.get('slug') ?? null;
@@ -59,6 +64,25 @@ export default function EventPhotosPage() {
   const [statusFilter, setStatusFilter] = React.useState<'all' | 'featured' | 'hidden' | 'photobooth'>('all');
   const [selectedIds, setSelectedIds] = React.useState<number[]>([]);
   const [bulkBusy, setBulkBusy] = React.useState(false);
+  const [showSearch, setShowSearch] = React.useState(false);
+  const [sortOrder, setSortOrder] = React.useState<'desc' | 'asc'>('desc');
+  const [page, setPage] = React.useState(1);
+  const [pagination, setPagination] = React.useState<PaginationMeta | null>(null);
+  const [pendingDelete, setPendingDelete] = React.useState<TenantPhoto | null>(null);
+  const [skipDeleteConfirm, setSkipDeleteConfirm] = React.useState(() =>
+    typeof window !== 'undefined' ? window.sessionStorage.getItem(DELETE_CONFIRM_SKIP_KEY) === '1' : false,
+  );
+  const updateSkipDeleteConfirm = React.useCallback((value: boolean) => {
+    setSkipDeleteConfirm(value);
+    if (typeof window === 'undefined') {
+      return;
+    }
+    if (value) {
+      window.sessionStorage.setItem(DELETE_CONFIRM_SKIP_KEY, '1');
+    } else {
+      window.sessionStorage.removeItem(DELETE_CONFIRM_SKIP_KEY);
+    }
+  }, []);
   const photoboothUploads = React.useMemo(
     () => photos.filter((photo) => photo.ingest_source === 'photobooth').length,
     [photos],
@@ -69,12 +93,12 @@ export default function EventPhotosPage() {
       return [];
     }
     const translateMenu = (key: string, fallback: string) => t(key, { defaultValue: fallback });
+    const photoBadge = !loading ? event.photo_count ?? pagination?.total : undefined;
     return buildEventTabs(event, translateMenu, {
-      photos: photos.length,
-      tasks: event.tasks_count ?? 0,
-      invites: event.active_invites_count ?? event.total_invites_count ?? 0,
+      photos: photoBadge,
+      tasks: event.tasks_count ?? undefined,
     });
-  }, [event, photos.length, slug, t]);
+  }, [event, slug, t, loading, pagination?.total]);
 
   const load = React.useCallback(async () => {
     if (!slug) {
@@ -84,15 +108,29 @@ export default function EventPhotosPage() {
     setLoading(true);
     setError(undefined);
     try {
+      const visibility = statusFilter === 'hidden' ? 'hidden' : 'visible';
       const [photoResult, eventData, catalog] = await Promise.all([
-        getEventPhotos(slug),
+        getEventPhotos(slug, {
+          page,
+          perPage: PAGE_SIZE,
+          sort: sortOrder,
+          search: search.trim() || undefined,
+          status: statusFilter === 'hidden' ? 'hidden' : undefined,
+          featured: statusFilter === 'featured',
+          ingestSource: statusFilter === 'photobooth' ? 'photobooth' : undefined,
+          visibility,
+        }),
         getEvent(slug),
         getAddonCatalog(),
       ]);
       setPhotos(photoResult.photos);
       setLimits(photoResult.limits ?? null);
+      setPagination(photoResult.meta ?? null);
       setEventAddons(eventData.addons ?? []);
-      setEvent(eventData);
+      setEvent({
+        ...eventData,
+        photo_count: photoResult.meta?.total ?? eventData.photo_count,
+      });
       setAddons(catalog);
     } catch (err) {
       if (!isAuthError(err)) {
@@ -101,7 +139,7 @@ export default function EventPhotosPage() {
     } finally {
       setLoading(false);
     }
-  }, [slug]);
+  }, [slug, page, sortOrder, search, statusFilter]);
 
   React.useEffect(() => {
     load();
@@ -142,55 +180,83 @@ export default function EventPhotosPage() {
     try {
       await deletePhoto(slug, photo.id);
       setPhotos((prev) => prev.filter((entry) => entry.id !== photo.id));
+      toast.success(t('photos.actions.deleteSuccess', 'Foto gelöscht'));
     } catch (err) {
       if (!isAuthError(err)) {
         setError(getApiErrorMessage(err, 'Foto konnte nicht entfernt werden.'));
+        toast.error(t('photos.actions.deleteFailed', 'Foto konnte nicht entfernt werden.'));
       }
     } finally {
       setBusyId(null);
     }
   }
 
+  const requestDelete = React.useCallback(
+    (photo: TenantPhoto) => {
+      if (skipDeleteConfirm) {
+        void handleDelete(photo);
+        return;
+      }
+      setPendingDelete(photo);
+    },
+    [skipDeleteConfirm, handleDelete],
+  );
+
+  const confirmDelete = React.useCallback(() => {
+    if (!pendingDelete) return;
+    void handleDelete(pendingDelete);
+    setPendingDelete(null);
+  }, [pendingDelete, handleDelete]);
+
+  const cancelDelete = React.useCallback(() => {
+    setPendingDelete(null);
+  }, []);
+
   async function handleToggleVisibility(photo: TenantPhoto, visible: boolean) {
-    // No dedicated visibility endpoint available; emulate by filtering locally.
-    setPhotos((prev) =>
-      prev.map((entry) =>
-        entry.id === photo.id ? { ...entry, status: visible ? 'visible' : 'hidden' } : entry,
-      ),
-    );
-    setSelectedIds((prev) => prev.filter((id) => id !== photo.id));
+    if (!slug) return;
+    const shouldRemove = (!visible && statusFilter !== 'hidden') || (visible && statusFilter === 'hidden');
+    if (shouldRemove) {
+      setPhotos((prev) => prev.filter((entry) => entry.id !== photo.id));
+    }
+    setBusyId(photo.id);
+    try {
+      const updated = await updatePhotoVisibility(slug, photo.id, visible);
+      if (!shouldRemove) {
+        setPhotos((prev) => prev.map((entry) => (entry.id === photo.id ? updated : entry)));
+      }
+      setSelectedIds((prev) => prev.filter((id) => id !== photo.id));
+      toast.success(
+        visible
+          ? t('photos.actions.showSuccess', 'Foto eingeblendet')
+          : t('photos.actions.hideSuccess', 'Foto versteckt')
+      );
+      void load();
+    } catch (err) {
+      if (!isAuthError(err)) {
+        setError(getApiErrorMessage(err, 'Sichtbarkeit konnte nicht geändert werden.'));
+        toast.error(t('photos.actions.hideFailed', 'Sichtbarkeit konnte nicht geändert werden.'));
+      }
+    } finally {
+      setBusyId(null);
+    }
   }
 
-  const filteredPhotos = React.useMemo(() => {
-    const term = search.trim().toLowerCase();
-    return photos.filter((photo) => {
-      const matchesSearch =
-        term.length === 0 ||
-        (photo.original_name ?? '').toLowerCase().includes(term) ||
-        (photo.filename ?? '').toLowerCase().includes(term);
-      if (!matchesSearch) {
-        return false;
-      }
-      if (statusFilter === 'featured') {
-        return Boolean(photo.is_featured);
-      }
-      if (statusFilter === 'hidden') {
-        return photo.status === 'hidden';
-      }
-      if (statusFilter === 'photobooth') {
-        return photo.ingest_source === 'photobooth';
-      }
-      return true;
-    });
-  }, [photos, search, statusFilter]);
+  React.useEffect(() => {
+    setPage(1);
+  }, [search, statusFilter, sortOrder]);
+
+  const pageCount = pagination?.last_page ?? 1;
+  const currentPage = Math.min(page, pageCount || 1);
+  const paginatedPhotos = photos;
+  const totalCount = pagination?.total ?? photos.length;
 
   const toggleSelect = React.useCallback((photoId: number) => {
     setSelectedIds((prev) => (prev.includes(photoId) ? prev.filter((id) => id !== photoId) : [...prev, photoId]));
   }, []);
 
   const selectAllVisible = React.useCallback(() => {
-    setSelectedIds(filteredPhotos.map((photo) => photo.id));
-  }, [filteredPhotos]);
+    setSelectedIds(paginatedPhotos.map((photo) => photo.id));
+  }, [paginatedPhotos]);
 
   const clearSelection = React.useCallback(() => {
     setSelectedIds([]);
@@ -203,35 +269,62 @@ export default function EventPhotosPage() {
 
   const handleBulkVisibility = React.useCallback(
     async (visible: boolean) => {
-      if (!selectedPhotos.length) return;
+      if (!slug || !selectedPhotos.length) return;
       setBulkBusy(true);
-      await Promise.all(selectedPhotos.map((photo) => handleToggleVisibility(photo, visible)));
-      setBulkBusy(false);
+      const shouldRemove = (!visible && statusFilter !== 'hidden') || (visible && statusFilter === 'hidden');
+      if (shouldRemove) {
+        setPhotos((prev) => prev.filter((entry) => !selectedPhotos.find((item) => item.id === entry.id)));
+      }
+      try {
+        const updates = await Promise.all(
+          selectedPhotos.map(async (photo) => updatePhotoVisibility(slug, photo.id, visible)),
+        );
+        if (!shouldRemove) {
+          setPhotos((prev) => prev.map((entry) => updates.find((item) => item.id === entry.id) ?? entry));
+        }
+        setSelectedIds([]);
+        toast.success(
+          visible
+            ? t('photos.actions.bulkShowSuccess', 'Ausgewählte Fotos eingeblendet')
+            : t('photos.actions.bulkHideSuccess', 'Ausgewählte Fotos versteckt')
+        );
+        void load();
+      } catch (err) {
+        if (!isAuthError(err)) {
+          setError(getApiErrorMessage(err, 'Sichtbarkeit konnte nicht geändert werden.'));
+          toast.error(t('photos.actions.hideFailed', 'Sichtbarkeit konnte nicht geändert werden.'));
+        }
+      } finally {
+        setBulkBusy(false);
+      }
     },
-    [selectedPhotos],
+    [selectedPhotos, slug],
   );
 
   const handleBulkFeature = React.useCallback(
     async (featured: boolean) => {
       if (!slug || !selectedPhotos.length) return;
       setBulkBusy(true);
-      for (const photo of selectedPhotos) {
-        setBusyId(photo.id);
-        try {
-          const updated = featured
-            ? await featurePhoto(slug, photo.id)
-            : await unfeaturePhoto(slug, photo.id);
-          setPhotos((prev) => prev.map((entry) => (entry.id === photo.id ? updated : entry)));
-        } catch (err) {
-          if (!isAuthError(err)) {
-            setError(getApiErrorMessage(err, 'Feature-Aktion fehlgeschlagen.'));
+      try {
+        for (const photo of selectedPhotos) {
+          setBusyId(photo.id);
+          try {
+            const updated = featured
+              ? await featurePhoto(slug, photo.id)
+              : await unfeaturePhoto(slug, photo.id);
+            setPhotos((prev) => prev.map((entry) => (entry.id === photo.id ? updated : entry)));
+          } catch (err) {
+            if (!isAuthError(err)) {
+              setError(getApiErrorMessage(err, 'Feature-Aktion fehlgeschlagen.'));
+            }
+          } finally {
+            setBusyId(null);
           }
-        } finally {
-          setBusyId(null);
         }
+        setSelectedIds([]);
+      } finally {
+        setBulkBusy(false);
       }
-      setSelectedIds([]);
-      setBulkBusy(false);
     },
     [selectedPhotos, slug],
   );
@@ -309,7 +402,10 @@ export default function EventPhotosPage() {
             onSearch={setSearch}
             statusFilter={statusFilter}
             onStatusFilterChange={setStatusFilter}
-            totalCount={filteredPhotos.length}
+            totalCount={totalCount}
+            page={currentPage}
+            pageCount={pageCount}
+            onPageChange={setPage}
             selectionCount={selectedIds.length}
             onSelectAll={selectAllVisible}
             onClearSelection={clearSelection}
@@ -318,22 +414,26 @@ export default function EventPhotosPage() {
             onBulkFeature={() => { void handleBulkFeature(true); }}
             onBulkUnfeature={() => { void handleBulkFeature(false); }}
             busy={bulkBusy}
+            sortOrder={sortOrder}
+            onSortOrderChange={setSortOrder}
+            showSearch={showSearch}
+            onToggleSearch={() => setShowSearch((prev) => !prev)}
           />
           {loading ? (
             <GallerySkeleton />
-          ) : filteredPhotos.length === 0 ? (
+          ) : totalCount === 0 ? (
             <EmptyGallery
               title={t('photos.gallery.emptyTitle', 'Noch keine Fotos vorhanden')}
               description={t('photos.gallery.emptyDescription', 'Motiviere deine Gäste zum Hochladen - hier erscheint anschließend die Galerie.')}
             />
           ) : (
             <PhotoGrid
-              photos={filteredPhotos}
+              photos={paginatedPhotos}
               selectedIds={selectedIds}
               onToggleSelect={toggleSelect}
               onToggleFeature={(photo) => { void handleToggleFeature(photo); }}
               onToggleVisibility={(photo, visible) => { void handleToggleVisibility(photo, visible); }}
-              onDelete={(photo) => { void handleDelete(photo); }}
+              onRequestDelete={(photo) => { requestDelete(photo); }}
               busyId={busyId}
             />
           )}
@@ -355,11 +455,21 @@ export default function EventPhotosPage() {
           </CardContent>
         </Card>
       )}
+
+      <DeletePhotoDialog
+        open={Boolean(pendingDelete)}
+        photo={pendingDelete}
+        onCancel={cancelDelete}
+        onConfirm={confirmDelete}
+        skipConfirm={skipDeleteConfirm}
+        onSkipChange={updateSkipDeleteConfirm}
+      />
     </AdminLayout>
   );
 }
 
 const LIMIT_WARNING_DISMISS_KEY = 'tenant-admin:dismissed-limit-warnings';
+const DELETE_CONFIRM_SKIP_KEY = 'tenant-admin:skip-photo-delete-confirm';
 
 function readDismissedLimitWarnings(): Set<string> {
   if (typeof window === 'undefined') {
@@ -536,9 +646,14 @@ function EmptyGallery({ title, description }: { title: string; description: stri
 function GalleryToolbar({
   search,
   onSearch,
+  showSearch,
+  onToggleSearch,
   statusFilter,
   onStatusFilterChange,
   totalCount,
+  page,
+  pageCount,
+  onPageChange,
   selectionCount,
   onSelectAll,
   onClearSelection,
@@ -546,13 +661,20 @@ function GalleryToolbar({
   onBulkShow,
   onBulkFeature,
   onBulkUnfeature,
+  sortOrder,
+  onSortOrderChange,
   busy,
 }: {
   search: string;
   onSearch: (value: string) => void;
+  showSearch: boolean;
+  onToggleSearch: () => void;
   statusFilter: 'all' | 'featured' | 'hidden' | 'photobooth';
   onStatusFilterChange: (value: 'all' | 'featured' | 'hidden' | 'photobooth') => void;
   totalCount: number;
+  page: number;
+  pageCount: number;
+  onPageChange: (page: number) => void;
   selectionCount: number;
   onSelectAll: () => void;
   onClearSelection: () => void;
@@ -560,6 +682,8 @@ function GalleryToolbar({
   onBulkShow: () => void;
   onBulkFeature: () => void;
   onBulkUnfeature: () => void;
+  sortOrder: 'desc' | 'asc';
+  onSortOrderChange: (value: 'desc' | 'asc') => void;
   busy: boolean;
 }) {
   const { t } = useTranslation('management');
@@ -573,27 +697,53 @@ function GalleryToolbar({
   return (
     <div className="mb-4 space-y-4">
       <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-        <div className="flex flex-1 items-center gap-2 rounded-full border border-slate-200 px-3 py-1">
-          <Search className="h-4 w-4 text-slate-500" />
-          <Input
-            value={search}
-            onChange={(event) => onSearch(event.target.value)}
-            placeholder={t('photos.filters.search', 'Uploads durchsuchen …')}
-            className="h-8 border-0 bg-transparent text-sm focus-visible:ring-0"
-          />
-        </div>
-        <div className="flex flex-wrap gap-2">
-          {filters.map((filter) => (
-            <Button
-              key={filter.key}
-              variant={statusFilter === filter.key ? 'secondary' : 'outline'}
-              className="rounded-full"
-              onClick={() => onStatusFilterChange(filter.key)}
-              size="sm"
-            >
-              {filter.label}
+        <div className="flex flex-1 flex-wrap items-center gap-2">
+          {showSearch ? (
+            <div className="flex min-w-[240px] flex-1 items-center gap-2 rounded-full border border-slate-200 px-3 py-1">
+              <Search className="h-4 w-4 text-slate-500" />
+              <Input
+                autoFocus
+                value={search}
+                onChange={(event) => onSearch(event.target.value)}
+                placeholder={t('photos.filters.search', 'Uploads durchsuchen …')}
+                className="h-8 border-0 bg-transparent text-sm focus-visible:ring-0"
+              />
+              <Button variant="ghost" size="icon" className="text-slate-500" onClick={onToggleSearch}>
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          ) : (
+            <Button variant="outline" size="sm" className="rounded-full" onClick={onToggleSearch}>
+              <Search className="mr-2 h-4 w-4" />
+              {t('photos.filters.searchOpen', 'Suche öffnen')}
             </Button>
-          ))}
+          )}
+          <div className="flex flex-wrap gap-2">
+            {filters.map((filter) => (
+              <Button
+                key={filter.key}
+                variant={statusFilter === filter.key ? 'secondary' : 'outline'}
+                className="rounded-full"
+                onClick={() => onStatusFilterChange(filter.key)}
+                size="sm"
+              >
+                {filter.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm text-slate-600">
+          <span className="hidden lg:inline">{t('photos.filters.sort', 'Sortierung')}</span>
+          <Button
+            variant="outline"
+            size="sm"
+            className="rounded-full"
+            onClick={() => onSortOrderChange(sortOrder === 'desc' ? 'asc' : 'desc')}
+          >
+            {sortOrder === 'desc'
+              ? t('photos.filters.sortDesc', 'Neueste zuerst')
+              : t('photos.filters.sortAsc', 'Älteste zuerst')}
+          </Button>
         </div>
       </div>
       <div className="flex flex-wrap items-center gap-3 text-xs text-slate-500">
@@ -631,6 +781,27 @@ function GalleryToolbar({
             {t('photos.filters.selectAll', 'Alle auswählen')}
           </Button>
         )}
+        <div className="ml-auto flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page <= 1}
+            onClick={() => onPageChange(Math.max(1, page - 1))}
+          >
+            {t('photos.filters.prev', 'Zurück')}
+          </Button>
+          <span className="text-slate-600">
+            {page} / {pageCount}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= pageCount}
+            onClick={() => onPageChange(Math.min(pageCount, page + 1))}
+          >
+            {t('photos.filters.next', 'Weiter')}
+          </Button>
+        </div>
       </div>
     </div>
   );
@@ -642,7 +813,7 @@ function PhotoGrid({
   onToggleSelect,
   onToggleFeature,
   onToggleVisibility,
-  onDelete,
+  onRequestDelete,
   busyId,
 }: {
   photos: TenantPhoto[];
@@ -650,7 +821,7 @@ function PhotoGrid({
   onToggleSelect: (id: number) => void;
   onToggleFeature: (photo: TenantPhoto) => void;
   onToggleVisibility: (photo: TenantPhoto, visible: boolean) => void;
-  onDelete: (photo: TenantPhoto) => void;
+  onRequestDelete: (photo: TenantPhoto) => void;
   busyId: number | null;
 }) {
   return (
@@ -663,7 +834,7 @@ function PhotoGrid({
           onToggleSelect={() => onToggleSelect(photo.id)}
           onToggleFeature={() => onToggleFeature(photo)}
           onToggleVisibility={(visible) => onToggleVisibility(photo, visible)}
-          onDelete={() => onDelete(photo)}
+          onRequestDelete={() => onRequestDelete(photo)}
           busy={busyId === photo.id}
         />
       ))}
@@ -677,7 +848,7 @@ function PhotoCard({
   onToggleSelect,
   onToggleFeature,
   onToggleVisibility,
-  onDelete,
+  onRequestDelete,
   busy,
 }: {
   photo: TenantPhoto;
@@ -685,11 +856,20 @@ function PhotoCard({
   onToggleSelect: () => void;
   onToggleFeature: () => void;
   onToggleVisibility: (visible: boolean) => void;
-  onDelete: () => void;
+  onRequestDelete: () => void;
   busy: boolean;
 }) {
   const { t } = useTranslation('management');
   const hidden = photo.status === 'hidden';
+  const [copied, setCopied] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!copied) {
+      return;
+    }
+    const timeout = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(timeout);
+  }, [copied]);
 
   return (
     <div className="rounded-2xl border border-slate-200 bg-white/90 p-4 shadow-sm">
@@ -720,7 +900,7 @@ function PhotoCard({
           <span>{t('photos.gallery.uploader', 'Uploader: {{name}}', { name: photo.uploader_name ?? 'Unbekannt' })}</span>
         </div>
         <div className="flex flex-wrap gap-2">
-          <Button variant="outline" size="sm" disabled={busy} onClick={() => onToggleVisibility(!hidden)}>
+          <Button variant="outline" size="sm" disabled={busy} onClick={() => onToggleVisibility(hidden ? true : false)}>
             {busy ? (
               <Loader2 className="h-4 w-4 animate-spin" />
             ) : hidden ? (
@@ -751,24 +931,104 @@ function PhotoCard({
               </>
             )}
           </Button>
-          <Button variant="destructive" size="sm" onClick={onDelete} disabled={busy}>
+          <Button variant="destructive" size="sm" onClick={onRequestDelete} disabled={busy}>
             {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
             {t('photos.actions.delete', 'Löschen')}
           </Button>
           <Button
             variant="ghost"
             size="sm"
-            onClick={() => {
-              if (!photo.url) return;
-              navigator.clipboard.writeText(photo.url).then(() => {
-                toast.success(t('photos.actions.copySuccess', 'Link kopiert'));
-              });
+            onClick={async () => {
+              if (!photo.url) {
+                toast.error(t('photos.actions.copyMissing', 'Kein Link verfügbar'));
+                return;
+              }
+              const successMessage = t('photos.actions.copySuccess', 'Link kopiert');
+              try {
+                if (!navigator.clipboard || !navigator.clipboard.writeText) {
+                  throw new Error('clipboard_unavailable');
+                }
+                await navigator.clipboard.writeText(photo.url);
+                toast.success(successMessage);
+                setCopied(true);
+              } catch (err) {
+                // Fallback for unsichere Kontexte: zeige den Link zum manuellen Kopieren.
+                const promptValue = window.prompt(t('photos.actions.copyPrompt', 'Link zum Kopieren'), photo.url);
+                if (promptValue !== null) {
+                  toast.success(successMessage);
+                  setCopied(true);
+                } else {
+                  toast.error(t('photos.actions.copyFailed', 'Kopieren nicht möglich. Bitte manuell kopieren.'));
+                }
+              }
             }}
           >
-            <Copy className="h-4 w-4" /> {t('photos.actions.copy', 'Link kopieren')}
+            {copied ? (
+              <span className="flex items-center gap-1 text-emerald-600">
+                <Check className="h-4 w-4" /> {t('photos.actions.copyDone', 'Kopiert!')}
+              </span>
+            ) : (
+              <>
+                <Copy className="h-4 w-4" /> {t('photos.actions.copy', 'Link kopieren')}
+              </>
+            )}
           </Button>
         </div>
       </div>
     </div>
   );
 }
+
+function DeletePhotoDialog({
+  open,
+  photo,
+  onCancel,
+  onConfirm,
+  skipConfirm,
+  onSkipChange,
+}: {
+  open: boolean;
+  photo: TenantPhoto | null;
+  onCancel: () => void;
+  onConfirm: () => void;
+  skipConfirm: boolean;
+  onSkipChange: (value: boolean) => void;
+}) {
+  const { t } = useTranslation('management');
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onCancel(); }}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('photos.deleteDialog.title', 'Foto löschen?')}</DialogTitle>
+          <DialogDescription>
+            {t('photos.deleteDialog.description', 'Dieses Foto wird dauerhaft entfernt. Diese Aktion kann nicht rückgängig gemacht werden.')}
+          </DialogDescription>
+        </DialogHeader>
+        {photo ? (
+          <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm text-slate-700">
+            {photo.original_name ?? t('photos.deleteDialog.fallbackName', 'Unbenanntes Foto')}
+          </div>
+        ) : null}
+        <div className="flex items-center gap-2 rounded-lg bg-slate-50/70 p-3 text-sm">
+          <Checkbox
+            id="skip-delete-confirm"
+            checked={skipConfirm}
+            onCheckedChange={(checked) => onSkipChange(Boolean(checked))}
+          />
+          <Label htmlFor="skip-delete-confirm" className="text-slate-700">
+            {t('photos.deleteDialog.skip', 'Nicht erneut in dieser Sitzung nachfragen')}
+          </Label>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            {t('photos.actions.cancel', 'Abbrechen')}
+          </Button>
+          <Button variant="destructive" onClick={onConfirm}>
+            {t('photos.actions.delete', 'Löschen')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/admin/pages/EventRecapPage.tsx

@@ -211,8 +211,7 @@ export default function EventRecapPage() {
   const eventTabs = event
     ? buildEventTabs(event, (key, fallback) => t(key, { defaultValue: fallback }), {
         photos: stats?.uploads_total ?? event.photo_count ?? undefined,
-        tasks: stats?.uploads_total ?? event.tasks_count ?? undefined,
-        invites: event.active_invites_count ?? event.total_invites_count ?? undefined,
+        tasks: event.tasks_count ?? undefined,
       })
     : [];
 

resources/js/admin/pages/EventTasksPage.tsx

@@ -171,12 +171,12 @@ export default function EventTasksPage() {
       return [];
     }
     const translateMenu = (key: string, fallback: string) => t(key, { defaultValue: fallback });
+    const taskBadge = loading ? undefined : assignedTasks.length;
     return buildEventTabs(event, translateMenu, {
-      photos: event.photo_count ?? 0,
-      tasks: assignedTasks.length,
-      invites: event.active_invites_count ?? event.total_invites_count ?? 0,
+      photos: event.photo_count ?? undefined,
+      tasks: taskBadge,
     });
-  }, [event, assignedTasks.length, t]);
+  }, [event, assignedTasks.length, t, loading]);
 
   React.useEffect(() => {
     let cancelled = false;