Added gallery

src/admin/AdminDashboard.tsx

@@ -19,7 +19,6 @@ const AdminDashboard = () => {
       </div>
 
       <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {/* Jeder Benutzer darf News verwalten */}
         <Link to="/admin/news">
           <Card className="hover:shadow-lg transition-shadow cursor-pointer">
             <CardContent className="p-6 text-center">
@@ -29,7 +28,6 @@ const AdminDashboard = () => {
           </Card>
         </Link>
 
-        {/* Nur Admins sehen diese Card */}
         {isAdmin && (
           <Link to="/admin/users">
             <Card className="hover:shadow-lg transition-shadow cursor-pointer">
@@ -58,6 +56,16 @@ const AdminDashboard = () => {
             </CardContent>
           </Card>
         </Link>
+
+        {/* 🎉 Neue Galerie-Kachel */}
+        <Link to="/admin/gallery">
+          <Card className="hover:shadow-lg transition-shadow cursor-pointer">
+            <CardContent className="p-6 text-center">
+              <CardTitle className="text-frog-600">Galerie verwalten</CardTitle>
+              <p className="text-gray-600 mt-2 text-sm">Bilder hochladen & löschen</p>
+            </CardContent>
+          </Card>
+        </Link>
       </div>
     </div>
   );

src/admin/GalleryManager.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { toast } from "sonner";
+
+const apiBase = import.meta.env.VITE_API_URL;
+
+type GalleryImage = {
+  id: number;
+  image_url: string;
+};
+
+const GalleryManager = () => {
+  const [images, setImages] = useState<GalleryImage[]>([]);
+  const [uploading, setUploading] = useState(false);
+
+  const fetchImages = async () => {
+    try {
+      const res = await fetch(`${apiBase}/api/gallery`);
+      const data = await res.json();
+      setImages(data);
+    } catch (err) {
+      console.error("Fehler beim Laden der Galerie:", err);
+    }
+  };
+
+  useEffect(() => {
+    fetchImages();
+  }, []);
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append("image", file);
+
+    setUploading(true);
+    try {
+      const res = await fetch(`${apiBase}/api/gallery`, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!res.ok) throw new Error("Fehler beim Hochladen");
+      toast.success("Bild erfolgreich hochgeladen!");
+      await fetchImages();
+    } catch (err) {
+      toast.error("Fehler beim Hochladen des Bildes");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm("Bist du sicher, dass du dieses Bild löschen willst?")) return;
+
+    try {
+      const res = await fetch(`${apiBase}/api/gallery/${id}`, {
+        method: "DELETE",
+      });
+
+      if (!res.ok) throw new Error("Fehler beim Löschen");
+      toast.success("Bild gelöscht");
+      await fetchImages();
+    } catch (err) {
+      toast.error("Fehler beim Löschen des Bildes");
+    }
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto py-12 px-4">
+      <h1 className="text-3xl font-bold text-frog-600 mb-6">Galerie verwalten</h1>
+
+      <div className="mb-8">
+        <input type="file" accept="image/*" onChange={handleUpload} />
+        {uploading && <p className="text-sm text-gray-500 mt-2">Bild wird hochgeladen...</p>}
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
+        {images.map((img) => (
+          <Card key={img.id}>
+            <CardContent className="p-2">
+              <img
+                src={`${apiBase}${img.image_url}`}
+                alt="Galeriebild"
+                className="w-full h-48 object-cover rounded-md mb-2"
+              />
+              <Button
+                variant="destructive"
+                className="w-full"
+                onClick={() => handleDelete(img.id)}
+              >
+                Löschen
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default GalleryManager;