Dashboard und Benutzerverwaltung

frontend/athena/components/users/UserDialog.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import { api } from "@/lib/api";
+
+export default function UserDialog() {
+
+  const [open, setOpen] = useState(false);
+
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  async function saveUser() {
+
+  console.log("Speichern geklickt");
+
+  try {
+
+    const response = await api.post("/users/", {
+      username,
+      email,
+      password,
+    });
+
+    console.log(response.data);
+
+    setOpen(false);
+
+    window.location.reload();
+
+  } catch (error) {
+
+    console.error(error);
+
+  }
+
+}
+
+  return (
+
+    <>
+
+      <Button onClick={() => setOpen(true)}>
+
+        + Neuer Benutzer
+
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+
+        <DialogContent>
+
+          <DialogHeader>
+
+            <DialogTitle>
+
+              Neuer Benutzer
+
+            </DialogTitle>
+
+          </DialogHeader>
+
+          <div className="space-y-4">
+
+            <div>
+
+              <Label>Benutzername</Label>
+
+              <Input
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+
+            </div>
+
+            <div>
+
+              <Label>E-Mail</Label>
+
+              <Input
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+
+            </div>
+
+            <div>
+
+              <Label>Passwort</Label>
+
+              <Input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+
+            </div>
+
+          </div>
+
+          <DialogFooter>
+
+            <Button onClick={saveUser}>
+
+              Speichern
+
+            </Button>
+
+          </DialogFooter>
+
+        </DialogContent>
+
+      </Dialog>
+
+    </>
+
+  );
+
+}

frontend/athena/components/users/UserForm.tsx

@@ -0,0 +1,7 @@
+export default function UserForm() {
+  return (
+    <div>
+      UserForm
+    </div>
+  );
+}

frontend/athena/components/users/UserTable.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { User } from "@/types/user";
+
+type Props = {
+  users: User[];
+};
+
+export default function UserTable({ users }: Props) {
+  return (
+    <div className="overflow-hidden rounded-xl border bg-white shadow">
+
+      <table className="w-full">
+
+        <thead className="bg-slate-100">
+
+          <tr>
+
+            <th className="p-4 text-left">ID</th>
+            <th className="p-4 text-left">Benutzername</th>
+            <th className="p-4 text-left">E-Mail</th>
+            <th className="p-4 text-center">Aktionen</th>
+
+          </tr>
+
+        </thead>
+
+        <tbody>
+
+          {users.map((user) => (
+
+            <tr
+              key={user.id}
+              className="border-t hover:bg-slate-50"
+            >
+
+              <td className="p-4">{user.id}</td>
+              <td className="p-4">{user.username}</td>
+              <td className="p-4">{user.email}</td>
+
+              <td className="p-4 text-center">
+
+                <button className="mr-3 rounded bg-blue-600 px-3 py-1 text-white hover:bg-blue-700">
+                  Bearbeiten
+                </button>
+
+                <button className="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700">
+                  Löschen
+                </button>
+
+              </td>
+
+            </tr>
+
+          ))}
+
+        </tbody>
+
+      </table>
+
+    </div>
+  );
+}