Dashboard und Benutzerverwaltung

frontend/athena/app/users/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { api } from "@/lib/api";
+import { User } from "@/types/user";
+
+import UserDialog from "@/components/users/UserDialog";
+import UserTable from "@/components/users/UserTable";
+
+export default function UsersPage() {
+
+    const [users, setUsers] = useState<User[]>([]);
+
+    useEffect(() => {
+        loadUsers();
+    }, []);
+
+    function loadUsers() {
+
+        api
+            .get<User[]>("/users/")
+            .then((res) => {
+
+                console.log("API:", res.data);
+
+                setUsers(res.data);
+
+            })
+            .catch((err) => {
+
+                console.error("API Fehler:", err);
+
+            });
+
+    }
+
+    return (
+
+        <>
+
+            <div className="flex justify-between items-center mb-8">
+
+                <h1 className="text-4xl font-bold">
+
+                    Benutzer
+
+                </h1>
+
+                <UserDialog />
+
+            </div>
+
+            <pre className="mb-6 rounded bg-black p-4 text-green-400 overflow-auto">
+
+                {JSON.stringify(users, null, 2)}
+
+            </pre>
+
+            <UserTable users={users} />
+
+        </>
+
+    );
+
+}