deckkezeles, es deckek eltarolasa

SerpentRace_Frontend/src/api/deckApi.js

@@ -10,6 +10,16 @@ export const createDeck = async (deck) => {
   }
 }
 
+// Get paginated decks (authenticated)
+export const getDecksPage = async (from = 0, to = 49) => {
+  try {
+    const response = await apiClient.get(`/decks/page/${from}/${to}`)
+    return response.data
+  } catch (err) {
+    throw err
+  }
+}
+
 export default {
   createDeck
 }

SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 import {
   FaPlus,
@@ -20,19 +20,7 @@ const deckTypes = [
   { label: "Fun", color: "var(--color-fun)" },
 ]
 
-const mockDecks = [
+// initial state will be fetched from backend
-  // Just for visual mockup
-  { id: 1, name: "Party Luck", type: "Luck", created: "2025-07-01", origin: "Vállalati" },
-  { id: 2, name: "Quiz Night", type: "Question", created: "2025-07-02", origin: "Saját" },
-  { id: 3, name: "Fun Times", type: "Fun", created: "2025-07-03", origin: "Vállalati" },
-  { id: 4, name: "Corporate Challenge", type: "Question", created: "2025-07-04", origin: "Vállalati" },
-  { id: 5, name: "Randomizer", type: "Luck", created: "2025-07-05", origin: "Saját" },
-  { id: 6, name: "Afterwork luck", type: "Luck", created: "2025-07-06", origin: "Saját" },
-  { id: 7, name: "Serpent Quiz", type: "Question", created: "2025-07-07", origin: "Vállalati" },
-  { id: 8, name: "Green Fortune", type: "Luck", created: "2025-07-08", origin: "Vállalati" },
-  { id: 9, name: "Team Builder", type: "Fun", created: "2025-07-09", origin: "Saját" },
-  { id: 10, name: "Knowledge Race", type: "Question", created: "2025-07-10", origin: "Saját" },
-]
 
 const origins = ["Mind", "Vállalati", "Saját"]
 
@@ -82,9 +70,39 @@ const DeckManager = () => {
   const [search, setSearch] = useState("")
   const [showSortHelp, setShowSortHelp] = useState(false)
   const [selectedDeck, setSelectedDeck] = useState(null)
+  const [decks, setDecks] = useState([])
+  const [loading, setLoading] = useState(false)
 
-  // Filter logic (mock)
+  useEffect(() => {
-  let filteredDecks = mockDecks.filter((deck) => {
+    let mounted = true
+    const load = async () => {
+      setLoading(true)
+      try {
+        const result = await import('../../api/deckApi').then(m => m.getDecksPage(0, 49))
+        if (!mounted) return
+        // map backend deck shape to UI shape
+        const mapped = result.decks.map(d => ({
+          id: d.id,
+          name: d.name,
+          type: d.type === 2 ? 'Question' : d.type === 1 ? 'Joker' : 'Luck',
+          created: d.creationdate ? new Date(d.creationdate).toLocaleDateString() : '',
+          origin: d.ctype === 2 ? 'Vállalati' : d.ctype === 0 ? 'Mind' : 'Saját',
+          raw: d
+        }))
+        setDecks(mapped)
+      } catch (err) {
+        console.error('Failed to load decks', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+    return () => { mounted = false }
+  }, [])
+
+  // Filter logic
+  const sourceDecks = decks
+  let filteredDecks = sourceDecks.filter((deck) => {
     const typeMatch = selectedType === "All" || deck.type === selectedType
     const originMatch = selectedOrigin === "Mind" || deck.origin === selectedOrigin
     const searchMatch = !search || deck.name.toLowerCase().includes(search.toLowerCase())
@@ -107,9 +125,9 @@ const DeckManager = () => {
 
   return (
     <div className="w-full flex flex-col bg-[color:var(--color-background)]">
-      <div className="w-full max-w-[1200px] mx-auto px-4 py-10">
+      <div className="w-full max-w-6xl mx-auto px-4 py-10">
         {/* Filters */}
-        <div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
+        <div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
           <div className="flex gap-2 items-center w-full md:w-auto">
             <SearchBox
               value={search}
@@ -249,14 +267,20 @@ const DeckManager = () => {
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
           {/* Create New Deck (Mockup) */}
           <div 
-            onClick={() => navigate("/deck-creator")}
+            onClick={() => navigate('/deck-creator')}
             className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
           >
             <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
             <span className="text-[color:var(--color-text)] font-semibold">Új pakli létrehozása</span>
           </div>
-          {/* Existing Decks (Mockup) */}
+          {/* Existing Decks (from backend) */}
-          {filteredDecks.map((deck) => {
+          {loading && (
+            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Betöltés...</div>
+          )}
+          {!loading && filteredDecks.length === 0 && (
+            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Nincsenek mentett paklik.</div>
+          )}
+          {!loading && filteredDecks.map((deck) => {
             const deckType = deckTypes.find((t) => t.label === deck.type)
             const borderColor = deckType ? deckType.color : "var(--color-success)"
             return (
@@ -296,7 +320,12 @@ const DeckManager = () => {
       </div>
       
       {/* Deck Info Popup */}
-      {selectedDeck && <DeckInfoPopUp deck={selectedDeck} onClose={() => setSelectedDeck(null)} />}
+      {selectedDeck && (
+        <DeckInfoPopUp 
+          deck={selectedDeck} 
+          onClose={() => setSelectedDeck(null)} 
+        />
+      )}
     </div>
   )
 }

SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx

@@ -8,9 +8,6 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
   const [joinCode, setJoinCode] = useState("")
   const [error, setError] = useState("")
 
-  // gyors username kiolvasás (ha a parent objektum user={ { name: ... } } küldi)
-  const username = user?.name ?? null
-
   const handleJoin = () => {
     if (!joinCode.trim()) {
       setError("Add meg a játék kódját!")
@@ -24,19 +21,9 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
     onCreateGame()
   }
 
-  // egyszerű segéd az inicialishez
-  const initials = username
-    ? username
-        .split(" ")
-        .map((s) => s[0])
-        .join("")
-        .slice(0, 2)
-        .toUpperCase()
-    : ""
-
   return (
     <section
-      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl overflow-hidden"
+      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl min-h-[60vh] overflow-hidden"
       style={{
         background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
       }}
@@ -45,10 +32,10 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
       <div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
         <LogoCard
           imageSrc={logoImg}
-          containerHeight="420px"
+          containerHeight="450px"
-          containerWidth="420px"
+          containerWidth="450px"
-          imageHeight="420px"
+          imageHeight="450px"
-          imageWidth="420px"
+          imageWidth="450px"
           rotateAmplitude={7}
           scaleOnHover={1.03}
           showMobileWarning={false}
@@ -56,41 +43,12 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
           displayOverlayContent={false}
         />
       </div>
-
       {/* Jobb oldali panel */}
-      <div className="flex-1 w-full flex items-center justify-center px-6 md:px-12 py-8">
+      <div className="flex-1 w-full flex flex-col items-center justify-center px-4 md:px-12 py-10">
-        <div
+        <div className="w-full max-w-md rounded-2xl p-8 flex flex-col gap-8">
-          className="w-full max-w-md rounded-2xl p-6 md:p-8 flex flex-col gap-6"
-          style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }}
-        >
-          <div className="flex items-center justify-between">
           <div>
-              {username ? (
+            <h2 className="text-lg font-semibold mb-2 text-text">Csatlakozás játékhoz</h2>
-                <div className="flex items-center gap-3">
+            <div className={`${error ? "border border-error rounded-lg" : ""}`}>
-                  {/* opcionális kis info ikon helye, ha később kell */}
-                  <div
-                    className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
-                    style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
-                  >
-                    {initials}
-                  </div>
-                  <div className="text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
-                    {" "}
-                    <span className="font-medium" style={{ color: "var(--color-text, #fff)" }}>
-                      {username}
-                    </span>
-                  </div>
-                </div>
-              ) : (
-                <div className="text-sm text-gray-300">Nincs bejelentkezve</div>
-              )}
-            </div>
-            {/* opcionális kis info ikon helye, ha később kell */}
-          </div>
-
-          <div>
-            <h2 className="text-xl font-semibold mb-3 text-text">Csatlakozás játékhoz</h2>
-            <div className={`${error ? "border border-error rounded-lg p-2" : ""}`}>
               <InputBoxDark
                 type="text"
                 placeholder="Játék kódja"
@@ -99,22 +57,19 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
                 width="w-full"
               />
             </div>
-            {error && <div className="text-xs mt-2 text-error">{error}</div>}
+            {error && <div className="text-xs mt-1 text-error">{error}</div>}
             <div className="mt-4">
               <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
             </div>
           </div>
-
+          {user && (
-          <div className="border-t border-white/10 pt-4">
-            {username && (
             <div>
-                <h3 className="text-lg font-semibold mb-3 text-text">Új játék létrehozása</h3>
+              <h2 className="text-lg font-semibold mb-2 text-text">Új játék létrehozása</h2>
               <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
             </div>
           )}
         </div>
       </div>
-      </div>
     </section>
   )
 }

SerpentRace_Frontend/src/components/Navbar/Navbar.jsx

@@ -1,83 +1,41 @@
 import React, { useState } from "react"
 import Logo from "../../assets/pictures/Logo"
-import { Link, useNavigate } from "react-router-dom"
+import About from "../../pages/About/About"
+import Home from "../../pages/Landing/Home"
 
 const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false)
-  const navigate = useNavigate()
-  // Check if authLevel and username exist in localStorage
-  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
-
-  // Logout function: töröljük az adatokat és navigálunk a /login-ra (SPA, nincs reload)
-  const handleLogout = () => {
-    localStorage.removeItem("authLevel")
-    localStorage.removeItem("username")
-    navigate("/login")
-  }
 
   return (
+  
     <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between h-16 items-center">
           {/* Logo */}
           <div className="flex-shrink-0 flex items-center gap-2">
-            <Link to="/" className="flex items-center mt-1 h-9">
+            <a href="/" className="flex items-center mt-1 h-9">
               <Logo size={36} />
-            </Link>
+            </a>
-            <Link to="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
+            <a href="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
               SerpentRace
-            </Link>
+            </a>
           </div>
           {/* Desktop Menu */}
-          <div className="hidden md:flex space-x-8 items-center">
+          <div className="hidden md:flex space-x-8">
-            {isLoggedIn ? (
+            <a href="/home" className={navLinkClass}>
-              <>
-                <Link to="/home" className={navLinkClass}>
               Home
-                </Link>
+            </a>
-                <Link to="/decks" className={navLinkClass}>
+            <a href="/report" className={navLinkClass}>
-                  Decks
-                </Link>
-                <Link to="/report" className={navLinkClass}>
               Stats
-                </Link>
+            </a>
-              </>
+            <a href="/about" className={navLinkClass}>
-            ) : (
-              <Link to="/" className={navLinkClass}>
-                Home
-              </Link>
-            )}
-            <Link to="/about" className={navLinkClass}>
               About
-            </Link>
+            </a>
-            <Link to="/companies" className={navLinkClass}>
+            <a href="/companies" className={navLinkClass}>
               Contact
-            </Link>
+            </a>
-            {isLoggedIn && (
-              <button
-                onClick={handleLogout}
-                className="ml-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
-                title="Logout"
-              >
-                {/* Simple logout icon */}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6 text-white"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
-                  />
-                </svg>
-              </button>
-            )}
           </div>
           {/* Mobile Hamburger */}
           <div className="md:hidden flex items-center">
@@ -111,48 +69,18 @@ const Navbar = () => {
       {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          {isLoggedIn ? (
+          <a href="#" className={navLinkClass}>
-            <Link to="/home" className={navLinkClass}>
             Home
-            </Link>
+          </a>
-          ) : (
+          <a href="#" className={navLinkClass}>
-            <Link to="/" className={navLinkClass}>
-              Home
-            </Link>
-          )}
-          <Link to="/leaderboard" className={navLinkClass}>
             Leaderboard
-          </Link>
+          </a>
-          <Link to="/about" className={navLinkClass}>
+          <a href="#" className={navLinkClass}>
             About
-          </Link>
+          </a>
-          <Link to="/companies" className={navLinkClass}>
+          <a href="#" className={navLinkClass}>
             Contact
-          </Link>
+          </a>
-          {isLoggedIn && (
-            <div className="flex justify-end px-2 pb-2">
-              <button
-                onClick={handleLogout}
-                className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
-                title="Logout"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6 text-white"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
-                  />
-                </svg>
-              </button>
-            </div>
-          )}
         </div>
       )}
     </nav>

SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx

@@ -14,6 +14,10 @@ import {
 export default function DeckInfoPopUp({ deck, onClose }) {
   if (!deck) return null
 
+  // Debug: Log the deck structure to see what we're working with
+  console.log('Deck in popup:', deck)
+  console.log('Cards:', deck.cards)
+
   // Scroll blokkolás amikor a popup nyitva van
   useEffect(() => {
     // Scroll letiltása
@@ -33,13 +37,25 @@ export default function DeckInfoPopUp({ deck, onClose }) {
 
   const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
 
-  // Mock data - ezeket majd a backend adatokra cseréljük
+  // Use real deck data with safe fallbacks
+  const creator = deck.creatorName || deck.creator || (deck.user && deck.user.name) || "Ismeretlen"
+  const privacy = deck.origin === "Vállalati" || deck.ctype === 1 || deck.privacy === 'public' ? "Publikus" : "Privát"
+
+  // Get data from raw if available
+  const rawData = deck.raw || deck
+  
+  // Use played number from raw data for answers count
+  const questionsCount = rawData.cardCount || 0
+  const answersCount = rawData.playedNumber || 0
+
+  console.log('Calculated counts:', { questionsCount, answersCount, rawData })
+
   const mockData = {
-    creator: "John Doe",
+    ...deck,
-    privacy: deck.origin === "Vállalati" ? "Publikus" : "Privát", 
+    creator,
-    questionsCount: Math.floor(Math.random() * 50) + 10,
+    privacy,
-    answersCount: Math.floor(Math.random() * 200) + 50,
+    questionsCount,
-    ...deck
+    answersCount
   }
 
   const formatDate = (dateString) => {

SerpentRace_Frontend/src/hooks/useRequireAuth.jsx

@@ -1,43 +0,0 @@
-import { useState, useEffect } from "react"
-import { useNavigate } from "react-router-dom"
-
-export function requireAuthSync({ key = "username", redirectTo = "/login", replace = true } = {}) {
-  const value = localStorage.getItem(key)
-  if (!value) {
-    if (replace) window.location.replace(redirectTo)
-    else window.location.assign(redirectTo)
-    return false
-  }
-  return true
-}
-
-// Default hook: ad vissza egy [value, setValue] párt, szinkronizálja localStorage-t és átirányít, ha nincs érték
-export default function useRequireAuth({ key = "username", redirectTo = "/login" } = {}) {
-  const navigate = useNavigate()
-  const [value, setValue] = useState(() => {
-    try {
-      return localStorage.getItem(key)
-    } catch {
-      return null
-    }
-  })
-
-  // Ha nincs érték, átirányítjuk (komponens mount-oláskor)
-  useEffect(() => {
-    if (!value) {
-      navigate(redirectTo)
-    }
-  }, [navigate, value, redirectTo])
-
-  // Szinkronizáljuk a localStorage-t amikor a state változik
-  useEffect(() => {
-    try {
-      if (value == null) localStorage.removeItem(key)
-      else localStorage.setItem(key, value)
-    } catch {
-      // fail silently
-    }
-  }, [key, value])
-
-  return [value, setValue]
-}

SerpentRace_Frontend/src/pages/Decks/DeckManagerPage.jsx

@@ -1,7 +1,7 @@
 // src/pages/Decks/DeckManagerPage.jsx
 // Deck Management Page (with Navbar, no Footer)
 
-import DeckManager from "../../components/DeckCreator/DeckManager.jsx"
+import DeckManager from "../../components/Landingpage/DeckManager.jsx"
 import Navbar from "../../components/Navbar/Navbar.jsx"
 
 export default function DeckManagerPage() {

SerpentRace_Frontend/src/pages/Home/Home.jsx

@@ -0,0 +1,46 @@
+// src/pages/Home/Home.jsx
+// Régi PlayMenu-s oldal, "Home" néven
+
+import { useState, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
+import Navbar from "../../components/Navbar/Navbar"
+import Footer from "../../components/Footer/Footer.jsx"
+import Background from "../../assets/backgrounds/Background.jsx"
+import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
+
+export default function Home() {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const username = localStorage.getItem("username")
+    const authLevel = localStorage.getItem("authLevel")
+    if (!username || !authLevel) {
+      navigate("/login")
+    }
+  }, [navigate])
+
+  // Dummy callbackok és user példa
+  const handleJoinGame = (code) => {
+    alert(`Csatlakozás játékhoz: ${code}`)
+  }
+  const handleCreateGame = () => {
+    alert("Új játék létrehozása")
+  }
+  const user = { name: localStorage.getItem("username") }
+
+  return (
+    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
+      <div className="fixed inset-0 -z-10 pointer-events-none">
+        <Background />
+      </div>
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <Navbar />
+      </div>
+      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
+        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
+        {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
+      </main>
+      <Footer />
+    </div>
+  )
+}

SerpentRace_Frontend/src/pages/Landing/Home.jsx

@@ -1,17 +1,13 @@
 // src/pages/Home/Home.jsx
 // Régi PlayMenu-s oldal, "Home" néven
 
-import { useEffect } from "react"
+import { useState } from "react"
-import useRequireAuth from "../../hooks/useRequireAuth"
+import Navbar from "../../components/Navbar/Navbar.jsx"
-import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
 
 export default function Home() {
-  // a hook inicializálja a user-t a localStorage-ból és visszaadja a state-et + settert
-  const [user, setUser] = useRequireAuth()
-
   // Dummy callbackok és user példa
   const handleJoinGame = (code) => {
     alert(`Csatlakozás játékhoz: ${code}`)
@@ -19,9 +15,7 @@ export default function Home() {
   const handleCreateGame = () => {
     alert("Új játék létrehozása")
   }
-  const userObj = { name: user }
+  const user = { name: "Teszt Elek" }
-
-  // ha szükséges a user módosítása máshol: setUser("újnév") automatikusan menti localStorage-be
 
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -32,7 +26,7 @@ export default function Home() {
         <Navbar />
       </div>
       <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
-        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={userObj} />
+        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
         {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
       </main>
       <Footer />

SerpentRace_Frontend/src/pages/Report/Reports.jsx

@@ -4,11 +4,8 @@ import Navbar from "../../components/Navbar/Navbar.jsx"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import { getUserStats } from "../../api/userApi.js"
-import useRequireAuth from "../../hooks/useRequireAuth.jsx"
 
 export default function Reports() {
-  const [username] = useRequireAuth({ key: "username", redirectTo: "/login" })
-
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
       {/* Háttér */}
@@ -27,8 +24,9 @@ export default function Reports() {
           {/* Fejléc */}
           <div className="text-center mb-8">
             <h2 className="text-3xl font-bold text-white">Játék Riportok</h2>
-            <p className="text-gray-300 mt-2">Áttekintés a legutóbbi játékokról és statisztikákról</p>
+            <p className="text-gray-300 mt-2">
-            {username && <p className="text-sm text-gray-400 mt-1">Bejelentkezett: {username}</p>}
+              Áttekintés a legutóbbi játékokról és statisztikákról
+            </p>
           </div>
 
           {/* Statisztikai kártyák */}