GroupsOverviewPage.js wieder hergestellt

frontend/src/App.js

@@ -5,6 +5,7 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import UploadedImage from './Components/Pages/UploadedImagePage';
 import MultiUploadPage from './Components/Pages/MultiUploadPage';
 import SlideshowPage from './Components/Pages/SlideshowPage';
+import GroupsOverviewPage from './Components/Pages/GroupsOverviewPage';
 import ModerationGroupsPage from './Components/Pages/ModerationGroupsPage';
 import ModerationGroupImagesPage from './Components/Pages/ModerationGroupImagesPage';
 import PublicGroupImagesPage from './Components/Pages/PublicGroupImagesPage';
@@ -18,7 +19,7 @@ function App() {
         <Route path="/upload/:image_url" component={UploadedImage} />
         <Route path="/slideshow" component={SlideshowPage} />
   <Route path="/groups/:groupId" component={PublicGroupImagesPage} />
-  {/* Groups overview removed; public group listing is handled elsewhere. */}
+  <Route path="/groups" component={GroupsOverviewPage} />
     <Route path="/moderation" exact component={ModerationGroupsPage} />
     <Route path="/moderation/groups/:groupId" component={ModerationGroupImagesPage} />
         <Route component={FZF} />
@@ -27,4 +28,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

frontend/src/Components/Pages/GroupsOverviewPage.js

@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+import '../Pages/Css/GroupsOverviewPage.css';
+import { 
+  Container, 
+  Card, 
+  CardContent, 
+  Typography, 
+  Button, 
+  Grid,
+  CardMedia,
+  Box,
+  CircularProgress,
+  Chip
+} from '@material-ui/core';
+import { 
+  Slideshow as SlideshowIcon,
+  Add as AddIcon,
+  Home as HomeIcon
+} from '@material-ui/icons';
+import Swal from 'sweetalert2/dist/sweetalert2.js';
+
+// Components
+import Navbar from '../ComponentUtils/Headers/Navbar';
+import Footer from '../ComponentUtils/Footer';
+import GroupCard from '../ComponentUtils/GroupCard';
+
+// Utils
+import { fetchAllGroups, deleteGroup } from '../../Utils/batchUpload';
+
+// Styles
+import '../../App.css';
+
+function GroupsOverviewPage() {
+  // use CSS classes from GroupsOverviewPage.css
+  const history = useHistory();
+  
+  const [groups, setGroups] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    loadGroups();
+  }, []);
+
+  const loadGroups = async () => {
+    try {
+      setLoading(true);
+      const response = await fetchAllGroups();
+      setGroups(response.groups || []);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error('Error loading groups:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleViewSlideshow = (groupId) => {
+    history.push(`/slideshow/${groupId}`);
+  };
+
+  const handleCreateNew = () => {
+    history.push('/multi-upload');
+  };
+
+  const handleGoHome = () => {
+    history.push('/');
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('de-DE', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="allContainer">
+        <Navbar />
+          <Container maxWidth="lg" className="page-container">
+          <div className="loading-container">
+            <CircularProgress size={60} color="primary" />
+            <Typography variant="h6" style={{ marginTop: '20px', color: '#666666' }}>
+              Slideshows werden geladen...
+            </Typography>
+          </div>
+        </Container>
+        <Footer />
+      </div>
+    );
+  }
+
+  return (
+    <div className="allContainer">
+      <Helmet>
+        <title>Gruppenübersicht - Interne Verwaltung</title>
+        <meta name="robots" content="noindex, nofollow, nosnippet, noarchive" />
+        <meta name="googlebot" content="noindex, nofollow" />
+        <meta name="description" content="Interne Gruppenübersicht - Nicht öffentlich zugänglich" />
+      </Helmet>
+      <Navbar />
+      
+  <Container maxWidth="lg" className="page-container">
+        {/* Header */}
+        <Card className="header-card">
+          <Typography className="header-title">
+            Alle Slideshows
+          </Typography>
+          <Typography className="header-subtitle">
+            Verwalte deine hochgeladenen Bildersammlungen
+          </Typography>
+          
+          <div className="action-buttons">
+            <Button
+              className="primary-button"
+              onClick={handleCreateNew}
+              startIcon={<AddIcon />}
+              size="large"
+            >
+              Neue Slideshow erstellen
+            </Button>
+            
+            <Button
+              className="home-button"
+              onClick={handleGoHome}
+              startIcon={<HomeIcon />}
+              size="large"
+            >
+              Zur Startseite
+            </Button>
+          </div>
+        </Card>
+
+        {/* Groups Grid */}
+        {error ? (
+            <div className="empty-state">
+            <Typography variant="h6" style={{ color: '#f44336', marginBottom: '20px' }}>
+              😕 Fehler beim Laden
+            </Typography>
+            <Typography variant="body1" style={{ color: '#666666', marginBottom: '30px' }}>
+              {error}
+            </Typography>
+              <Button onClick={loadGroups} className="primary-button">
+              🔄 Erneut versuchen
+            </Button>
+          </div>
+        ) : groups.length === 0 ? (
+            <div className="empty-state">
+            <Typography variant="h4" style={{ color: '#666666', marginBottom: '20px' }}>
+              📸 Keine Slideshows vorhanden
+            </Typography>
+            <Typography variant="body1" style={{ color: '#999999', marginBottom: '30px' }}>
+              Erstellen Sie Ihre erste Slideshow, indem Sie mehrere Bilder hochladen.
+            </Typography>
+              <Button
+                className="primary-button"
+              onClick={handleCreateNew}
+              size="large"
+            >
+              ➕ Erste Slideshow erstellen
+            </Button>
+          </div>
+        ) : (
+          <>
+            <Box marginBottom={2}>
+              <Typography variant="h6" style={{ color: '#666666' }}>
+                📊 {groups.length} Slideshow{groups.length !== 1 ? 's' : ''} gefunden
+              </Typography>
+            </Box>
+            
+            <div className="groups-grid">
+              {groups.map((group) => (
+                <div key={group.groupId} className="grid-item-stretch">
+                  <GroupCard
+                    group={group}
+                    onApprove={() => { /* no-op on public page */ }}
+                    onViewImages={() => handleViewSlideshow(group.groupId)}
+                    onDelete={() => { /* no-op on public page */ }}
+                    isPending={false}
+                    showActions={false}
+                  />
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </Container>
+
+      <div className="footerContainer">
+        <Footer />
+      </div>
+    </div>
+  );
+}
+
+export default GroupsOverviewPage;