Teamlist

src/admin/AdminDashboard.tsx

@@ -40,6 +40,15 @@ const AdminDashboard = () => {
             </Card>
           </Link>
         )}
+
+        <Link to="/admin/teams">
+          <Card className="hover:shadow-lg transition-shadow cursor-pointer">
+            <CardContent className="p-6 text-center">
+              <CardTitle className="text-frog-600">Teams verwalten</CardTitle>
+              <p className="text-gray-600 mt-2 text-sm">Teams und Spieler pflegen</p>
+            </CardContent>
+          </Card>
+        </Link>
       </div>
     </div>
   );

src/admin/TeamList.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Link } from "react-router-dom";
+
+const apiBase = import.meta.env.VITE_API_URL;
+
+type Team = {
+  id: number;
+  name: string;
+  player_count: number;
+};
+
+const TeamList = () => {
+  const [teams, setTeams] = useState<Team[]>([]);
+
+  const fetchTeams = async () => {
+    try {
+      const res = await fetch(`${apiBase}/api/teams`);
+      const data = await res.json();
+      setTeams(data);
+    } catch (err) {
+      console.error("Fehler beim Laden der Teams:", err);
+    }
+  };
+
+  useEffect(() => {
+    fetchTeams();
+  }, []);
+
+  return (
+    <div className="max-w-5xl mx-auto py-12 px-4">
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold text-frog-600">Teams verwalten</h1>
+        <Button asChild className="bg-frog-500 hover:bg-frog-600 text-white">
+          <Link to="/admin/teams/new">+ Neues Team</Link>
+        </Button>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-6">
+        {teams.map((team) => (
+          <Card key={team.id} className="hover:shadow-md transition-shadow">
+            <CardHeader>
+              <CardTitle className="text-frog-600">{team.name}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-gray-600">Spieler: {team.player_count}</p>
+              <Button
+                asChild
+                className="mt-4 bg-frog-500 hover:bg-frog-600 text-white"
+              >
+                <Link to={`/admin/teams/${team.id}`}>Bearbeiten</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TeamList;

src/main.tsx

@@ -19,6 +19,7 @@ import PrivateRoute from "./components/PrivateRoute";
 import UserManagementPage from "./admin/UserManagementPage";
 import UserCreatePage from "./admin/UserCreatePage";
 import UserEditPage from "./admin/UserEditPage";
+import TeamList from "./admin/TeamList";
 
 
 
@@ -59,6 +60,8 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <Route path="/admin/users" element={<PrivateRoute><Layout><UserManagementPage /></Layout></PrivateRoute>} />
           <Route path="/admin/users/new" element={<PrivateRoute><Layout><UserCreatePage /></Layout></PrivateRoute>} />
           <Route path="/admin/users/edit/:id" element={<PrivateRoute><Layout><UserEditPage /></Layout></PrivateRoute>} />
+          <Route path="/admin/teams" element={<PrivateRoute><Layout><TeamList /></Layout></PrivateRoute>} />
+          
           </Routes>
         </AuthProvider>
       </BrowserRouter>