fix: ESLint-Fehler im Client behoben (unused vars, useCallback, CSSProperties)

client/src/app/admin/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { API_URL } from "@/config";
 import { useSession } from "@/context/session";
@@ -40,17 +40,12 @@ export default function AdminPage() {
     if (user && user.role !== "admin") router.push("/");
   }, [user, router]);
 
-  useEffect(() => {
+  const fetchStats = useCallback(async () => {
-    fetchStats();
-    fetchUsers();
-  }, [page, search]);
-
-  const fetchStats = async () => {
     const res = await fetch(`${API_URL}/v1/admin/stats`, { credentials: "include" });
     if (res.ok) setStats(await res.json());
-  };
+  }, []);
 
-  const fetchUsers = async () => {
+  const fetchUsers = useCallback(async () => {
     const params = new URLSearchParams({ limit: String(limit), offset: String(page * limit) });
     if (search) params.set("search", search);
     const res = await fetch(`${API_URL}/v1/admin/users?${params}`, { credentials: "include" });
@@ -59,7 +54,12 @@ export default function AdminPage() {
       setUsers(data.users);
       setTotal(data.total);
     }
-  };
+  }, [page, search, limit]);
+
+  useEffect(() => {
+    fetchStats();
+    fetchUsers();
+  }, [fetchStats, fetchUsers]);
 
   const toggleBan = async (id: number, banned: boolean) => {
     await fetch(`${API_URL}/v1/admin/users/${id}`, {
@@ -107,7 +107,6 @@ export default function AdminPage() {
     <div className="w-full max-w-6xl py-8 px-4 flex flex-col gap-8">
       <h1 className="text-3xl font-bold">Admin-Panel</h1>
 
-      {/* Stats */}
       {stats && (
         <div className="stats stats-horizontal shadow w-full">
           <div className="stat">
@@ -125,15 +124,10 @@ export default function AdminPage() {
         </div>
       )}
 
-      {/* Update Button */}
       <div className="card bg-base-200 shadow p-6 flex flex-col gap-3">
         <h2 className="text-xl font-semibold">Website aktualisieren</h2>
         <p className="text-sm opacity-70">Führt <code>git pull</code> im App-Verzeichnis aus. Container muss danach neugestartet werden.</p>
-        <button
+        <button className="btn btn-primary w-fit" onClick={triggerUpdate} disabled={updating}>
-          className="btn btn-primary w-fit"
-          onClick={triggerUpdate}
-          disabled={updating}
-        >
           {updating ? <span className="loading loading-spinner loading-sm" /> : null}
           Jetzt aktualisieren
         </button>
@@ -142,7 +136,6 @@ export default function AdminPage() {
         )}
       </div>
 
-      {/* User Management */}
       <div className="card bg-base-200 shadow p-6 flex flex-col gap-4">
         <h2 className="text-xl font-semibold">Nutzerverwaltung</h2>
 
@@ -158,14 +151,7 @@ export default function AdminPage() {
           <table className="table table-zebra w-full text-sm">
             <thead>
               <tr>
-                <th>ID</th>
+                <th>ID</th><th>Name</th><th>E-Mail</th><th>W/L/D</th><th>Rolle</th><th>Status</th><th>Registriert</th><th>Aktionen</th>
-                <th>Name</th>
-                <th>E-Mail</th>
-                <th>W/L/D</th>
-                <th>Rolle</th>
-                <th>Status</th>
-                <th>Registriert</th>
-                <th>Aktionen</th>
               </tr>
             </thead>
             <tbody>
@@ -176,9 +162,7 @@ export default function AdminPage() {
                   <td>{u.email}</td>
                   <td>{u.wins}/{u.losses}/{u.draws}</td>
                   <td>
-                    <span className={`badge badge-sm ${u.role === "admin" ? "badge-warning" : "badge-ghost"}`}>
+                    <span className={`badge badge-sm ${u.role === "admin" ? "badge-warning" : "badge-ghost"}`}>{u.role}</span>
-                      {u.role}
-                    </span>
                   </td>
                   <td>
                     <span className={`badge badge-sm ${u.banned ? "badge-error" : "badge-success"}`}>
@@ -187,24 +171,13 @@ export default function AdminPage() {
                   </td>
                   <td>{new Date(u.created_at).toLocaleDateString("de-DE")}</td>
                   <td className="flex gap-1 flex-wrap">
-                    <button
+                    <button className="btn btn-xs btn-outline" onClick={() => toggleBan(u.id, u.banned)}>
-                      className="btn btn-xs btn-outline"
-                      onClick={() => toggleBan(u.id, u.banned)}
-                    >
                       {u.banned ? "Entsperren" : "Sperren"}
                     </button>
-                    <button
+                    <button className="btn btn-xs btn-outline btn-warning" onClick={() => toggleAdmin(u.id, u.role)} disabled={u.id === (user.id as number)}>
-                      className="btn btn-xs btn-outline btn-warning"
-                      onClick={() => toggleAdmin(u.id, u.role)}
-                      disabled={u.id === (user.id as number)}
-                    >
                       {u.role === "admin" ? "Admin entfernen" : "Admin machen"}
                     </button>
-                    <button
+                    <button className="btn btn-xs btn-outline btn-error" onClick={() => deleteUser(u.id, u.name)} disabled={u.id === (user.id as number)}>
-                      className="btn btn-xs btn-outline btn-error"
-                      onClick={() => deleteUser(u.id, u.name)}
-                      disabled={u.id === (user.id as number)}
-                    >
                       Löschen
                     </button>
                   </td>
@@ -214,19 +187,10 @@ export default function AdminPage() {
           </table>
         </div>
 
-        {/* Pagination */}
         <div className="flex gap-2 items-center">
-          <button className="btn btn-sm" disabled={page === 0} onClick={() => setPage(p => p - 1)}>
+          <button className="btn btn-sm" disabled={page === 0} onClick={() => setPage(p => p - 1)}>&larr; Zurück</button>
-            &larr; Zurück
-          </button>
           <span className="text-sm">Seite {page + 1} &mdash; {total} Nutzer gesamt</span>
-          <button
+          <button className="btn btn-sm" disabled={(page + 1) * limit >= total} onClick={() => setPage(p => p + 1)}>Weiter &rarr;</button>
-            className="btn btn-sm"
-            disabled={(page + 1) * limit >= total}
-            onClick={() => setPage(p => p + 1)}
-          >
-            Weiter &rarr;
-          </button>
         </div>
       </div>
     </div>

client/src/app/ai/page.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback } from "react";
 import { Chessboard } from "react-chessboard";
 import { Chess } from "chess.js";
-import { useRouter } from "next/navigation";
 import { API_URL } from "@/config";
-import { useSession } from "@/context/session";
+import type { CSSProperties } from "react";
 
 const AI_LEVELS = [
   { level: 1, name: "Anfänger" },
@@ -17,8 +16,6 @@ const AI_LEVELS = [
 ];
 
 export default function AiGamePage() {
-  const { user } = useSession();
-  const router = useRouter();
   const [selectedLevel, setSelectedLevel] = useState(3);
   const [gameStarted, setGameStarted] = useState(false);
   const [game, setGame] = useState(new Chess());
@@ -105,7 +102,7 @@ export default function AiGamePage() {
     setStatus("");
   };
 
-  const customSquareStyles: Record<string, React.CSSProperties> = {};
+  const customSquareStyles: Record<string, CSSProperties> = {};
   if (lastMove) {
     customSquareStyles[lastMove.from] = { backgroundColor: "rgba(255, 255, 0, 0.4)" };
     customSquareStyles[lastMove.to] = { backgroundColor: "rgba(255, 255, 0, 0.4)" };