inital

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,203 @@
+import { useState, useEffect } from 'react';
+import {
+  Container,
+  Box,
+  Typography,
+  Grid,
+  Fade,
+} from '@mui/material';
+import {
+  People,
+  Warning,
+  EventNote,
+  LocalFireDepartment,
+} from '@mui/icons-material';
+import { useAuth } from '../contexts/AuthContext';
+import DashboardLayout from '../components/dashboard/DashboardLayout';
+import SkeletonCard from '../components/shared/SkeletonCard';
+import UserProfile from '../components/dashboard/UserProfile';
+import NextcloudCard from '../components/dashboard/NextcloudCard';
+import VikunjaCard from '../components/dashboard/VikunjaCard';
+import BookstackCard from '../components/dashboard/BookstackCard';
+import StatsCard from '../components/dashboard/StatsCard';
+import ActivityFeed from '../components/dashboard/ActivityFeed';
+
+function Dashboard() {
+  const { user } = useAuth();
+  const [dataLoading, setDataLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate loading data
+    const timer = setTimeout(() => {
+      setDataLoading(false);
+    }, 800);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <DashboardLayout>
+      <Container maxWidth="lg">
+        <Grid container spacing={3}>
+          {/* Welcome Message */}
+          <Grid item xs={12}>
+            {dataLoading ? (
+              <SkeletonCard variant="basic" />
+            ) : (
+              <Fade in={true} timeout={600}>
+                <Box>
+                  <Typography variant="h4" gutterBottom>
+                    Willkommen zurück, {user?.given_name || user?.name.split(' ')[0]}!
+                  </Typography>
+                </Box>
+              </Fade>
+            )}
+          </Grid>
+
+          {/* User Profile Card */}
+          {user && (
+            <Grid item xs={12}>
+              {dataLoading ? (
+                <SkeletonCard variant="detailed" />
+              ) : (
+                <Fade in={true} timeout={600} style={{ transitionDelay: '100ms' }}>
+                  <Box>
+                    <UserProfile user={user} />
+                  </Box>
+                </Fade>
+              )}
+            </Grid>
+          )}
+
+          {/* Stats Cards Row */}
+          <Grid item xs={12} sm={6} md={3}>
+            {dataLoading ? (
+              <SkeletonCard variant="basic" />
+            ) : (
+              <Fade in={true} timeout={600} style={{ transitionDelay: '200ms' }}>
+                <Box>
+                  <StatsCard
+                    title="Aktive Mitglieder"
+                    value="24"
+                    icon={People}
+                    color="primary.main"
+                  />
+                </Box>
+              </Fade>
+            )}
+          </Grid>
+          <Grid item xs={12} sm={6} md={3}>
+            {dataLoading ? (
+              <SkeletonCard variant="basic" />
+            ) : (
+              <Fade in={true} timeout={600} style={{ transitionDelay: '250ms' }}>
+                <Box>
+                  <StatsCard
+                    title="Einsätze (Jahr)"
+                    value="18"
+                    icon={Warning}
+                    color="error.main"
+                  />
+                </Box>
+              </Fade>
+            )}
+          </Grid>
+          <Grid item xs={12} sm={6} md={3}>
+            {dataLoading ? (
+              <SkeletonCard variant="basic" />
+            ) : (
+              <Fade in={true} timeout={600} style={{ transitionDelay: '300ms' }}>
+                <Box>
+                  <StatsCard
+                    title="Offene Aufgaben"
+                    value="7"
+                    icon={EventNote}
+                    color="warning.main"
+                  />
+                </Box>
+              </Fade>
+            )}
+          </Grid>
+          <Grid item xs={12} sm={6} md={3}>
+            {dataLoading ? (
+              <SkeletonCard variant="basic" />
+            ) : (
+              <Fade in={true} timeout={600} style={{ transitionDelay: '350ms' }}>
+                <Box>
+                  <StatsCard
+                    title="Fahrzeuge"
+                    value="5"
+                    icon={LocalFireDepartment}
+                    color="success.main"
+                  />
+                </Box>
+              </Fade>
+            )}
+          </Grid>
+
+          {/* Service Integration Cards */}
+          <Grid item xs={12}>
+            <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
+              Dienste und Integrationen
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} md={4}>
+            {dataLoading ? (
+              <SkeletonCard variant="basic" />
+            ) : (
+              <Fade in={true} timeout={600} style={{ transitionDelay: '400ms' }}>
+                <Box>
+                  <NextcloudCard
+                    onClick={() => console.log('Nextcloud clicked')}
+                  />
+                </Box>
+              </Fade>
+            )}
+          </Grid>
+          <Grid item xs={12} md={4}>
+            {dataLoading ? (
+              <SkeletonCard variant="basic" />
+            ) : (
+              <Fade in={true} timeout={600} style={{ transitionDelay: '450ms' }}>
+                <Box>
+                  <VikunjaCard
+                    onClick={() => console.log('Vikunja clicked')}
+                  />
+                </Box>
+              </Fade>
+            )}
+          </Grid>
+          <Grid item xs={12} md={4}>
+            {dataLoading ? (
+              <SkeletonCard variant="basic" />
+            ) : (
+              <Fade in={true} timeout={600} style={{ transitionDelay: '500ms' }}>
+                <Box>
+                  <BookstackCard
+                    onClick={() => console.log('Bookstack clicked')}
+                  />
+                </Box>
+              </Fade>
+            )}
+          </Grid>
+
+          {/* Activity Feed */}
+          <Grid item xs={12}>
+            {dataLoading ? (
+              <SkeletonCard variant="detailed" />
+            ) : (
+              <Fade in={true} timeout={600} style={{ transitionDelay: '550ms' }}>
+                <Box>
+                  <ActivityFeed />
+                </Box>
+              </Fade>
+            )}
+          </Grid>
+        </Grid>
+      </Container>
+    </DashboardLayout>
+  );
+}
+
+export default Dashboard;