palworld added

gsm-frontend/src/pages/Dashboard.jsx

@@ -3,9 +3,9 @@ import { useNavigate } from 'react-router-dom'
 import { getServers } from '../api'
 import { useUser } from '../context/UserContext'
 import ServerCard from '../components/ServerCard'
-import SettingsModal from '../components/SettingsModal'
 import UserManagement from '../components/UserManagement'
 import LoginModal from '../components/LoginModal'
+import ActivityLog from '../components/ActivityLog'
 
 export default function Dashboard({ onLogin, onLogout }) {
   const navigate = useNavigate()
@@ -13,9 +13,10 @@ export default function Dashboard({ onLogin, onLogout }) {
   const [servers, setServers] = useState([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
-  const [showSettings, setShowSettings] = useState(false)
   const [showUserMgmt, setShowUserMgmt] = useState(false)
   const [showLogin, setShowLogin] = useState(false)
+  const [showActivityLog, setShowActivityLog] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   const isAuthenticated = !!token
 
@@ -30,7 +31,7 @@ export default function Dashboard({ onLogin, onLogout }) {
           onLogout()
         }
       } else {
-        setError('Failed to connect to server')
+        setError('Verbindung zum Server fehlgeschlagen')
       }
     } finally {
       setLoading(false)
@@ -46,15 +47,15 @@ export default function Dashboard({ onLogin, onLogout }) {
   }, [token, userLoading])
 
   const roleLabels = {
-    user: 'Viewer',
-    moderator: 'Operator',
+    user: 'Zuschauer',
+    moderator: 'Moderator',
     superadmin: 'Admin'
   }
 
   if (userLoading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <div className="text-neutral-400">Loading...</div>
+        <div className="text-neutral-400">Laden...</div>
       </div>
     )
   }
@@ -70,7 +71,7 @@ export default function Dashboard({ onLogin, onLogout }) {
         <div className="container-main py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
-              <a href="https://zeasy.software" target="_blank" rel="noopener noreferrer" className="relative block group"><img src="/navbarlogograuer.png" alt="Logo" className="h-8 transition-opacity duration-300 group-hover:opacity-0" /><img src="/navbarlogoweiß.png" alt="Logo" className="h-8 absolute top-0 left-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100" /></a>
+              <a href="https://zeasy.software" target="_blank" rel="noopener noreferrer" className="relative block group"><img src="/navbarlogoweiß.png" alt="Logo" className="h-8 transition-opacity duration-300 group-hover:opacity-0" /><img src="/navbarlogograuer.png" alt="Logo" className="h-8 absolute top-0 left-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100" /></a>
               <span className="text-xl font-semibold text-white hidden sm:inline">Gameserver Management</span>
             </div>
             <div className="hidden md:flex items-center gap-4 text-sm text-neutral-400">
@@ -79,47 +80,125 @@ export default function Dashboard({ onLogin, onLogout }) {
               </span>
               <span className="text-neutral-600">|</span>
               <span>
-                <span className="text-white font-medium">{totalPlayers}</span> players
+                <span className="text-white font-medium">{totalPlayers}</span> Spieler
               </span>
             </div>
             <div className="flex items-center gap-3">
               {isAuthenticated ? (
                 <>
-                  <div className="hidden sm:block text-right mr-2">
-                    <div className="text-sm text-white">{user?.username}</div>
-                    <div className="text-xs text-neutral-500">{roleLabels[role]}</div>
-                  </div>
-                  {isSuperadmin && (
+                  {/* Desktop Navigation */}
+                  <div className="hidden md:flex items-center gap-6">
+                    {user?.avatar && user?.discordId && (
+                      <img
+                        src={`https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`}
+                        alt="Avatar"
+                        className="w-8 h-8 rounded-full"
+                      />
+                    )}
+                    <div className="text-right mr-2">
+                      <div className="text-sm text-white">{user?.username}</div>
+                      <div className="text-xs text-neutral-500">{roleLabels[role]}</div>
+                    </div>
+                    {isSuperadmin && (
+                      <>
+                        <button
+                          onClick={() => setShowUserMgmt(true)}
+                          className="btn btn-ghost"
+                        >
+                          Benutzer
+                        </button>
+                        <button
+                          onClick={() => setShowActivityLog(true)}
+                          className="btn btn-ghost"
+                        >
+                          Logs
+                        </button>
+                      </>
+                    )}
                     <button
-                      onClick={() => setShowUserMgmt(true)}
-                      className="btn btn-ghost"
+                      onClick={onLogout}
+                      className="btn btn-outline"
                     >
-                      Users
+                      Abmelden
                     </button>
-                  )}
-                  <button
-                    onClick={() => setShowSettings(true)}
-                    className="btn btn-ghost"
-                  >
-                    Settings
-                  </button>
-                  <button
-                    onClick={onLogout}
-                    className="btn btn-outline"
-                  >
-                    Sign out
-                  </button>
+                  </div>
+
+                  {/* Mobile Burger Button */}
+                  <div className="md:hidden">
+                    <button
+                      onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                      className="btn btn-ghost p-2"
+                      aria-label="Menu"
+                    >
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      {mobileMenuOpen ? (
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      ) : (
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                      )}
+                    </svg>
+                    </button>
+                  </div>
                 </>
               ) : (
                 <button
                   onClick={() => setShowLogin(true)}
                   className="btn btn-primary"
                 >
-                  Sign in
+                  Anmelden
                 </button>
               )}
             </div>
           </div>
+
+          {/* Mobile Dropdown Menu */}
+          {mobileMenuOpen && isAuthenticated && (
+            <div className="md:hidden border-t border-neutral-800 py-4 mt-4 animate-slideDown">
+              <div className="flex items-center justify-between mb-3 px-1">
+                <div className="flex items-center gap-3">
+                  {user?.avatar && user?.discordId && (
+                    <img
+                      src={`https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`}
+                      alt="Avatar"
+                      className="w-8 h-8 rounded-full"
+                    />
+                  )}
+                  <div>
+                    <div className="text-sm text-white">{user?.username}</div>
+                    <div className="text-xs text-neutral-500">{roleLabels[role]}</div>
+                  </div>
+                </div>
+                <div className="text-sm text-neutral-400 text-right">
+                  <div><span className="text-white font-medium">{onlineCount}</span>/{servers.length} online</div>
+                  <div><span className="text-white font-medium">{totalPlayers}</span> Spieler</div>
+                </div>
+              </div>
+              <div className="flex flex-col gap-2">
+                {isSuperadmin && (
+                  <>
+                    <button
+                      onClick={() => { setShowUserMgmt(true); setMobileMenuOpen(false); }}
+                      className="btn btn-ghost justify-start"
+                    >
+                      Benutzer
+                    </button>
+                    <button
+                      onClick={() => { setShowActivityLog(true); setMobileMenuOpen(false); }}
+                      className="btn btn-ghost justify-start"
+                    >
+                      Logs
+                    </button>
+                  </>
+                )}
+                <button
+                  onClick={() => { onLogout(); setMobileMenuOpen(false); }}
+                  className="btn btn-outline justify-start"
+                >
+                  Abmelden
+                </button>
+              </div>
+            </div>
+          )}
         </div>
       </header>
 
@@ -132,7 +211,7 @@ export default function Dashboard({ onLogin, onLogout }) {
         )}
         {loading ? (
           <div className="text-center py-12">
-            <div className="text-neutral-400">Loading servers...</div>
+            <div className="text-neutral-400">Lade Server...</div>
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -154,12 +233,12 @@ export default function Dashboard({ onLogin, onLogout }) {
       </main>
 
       {/* Modals */}
-      {showSettings && (
-        <SettingsModal onClose={() => setShowSettings(false)} />
-      )}
       {showUserMgmt && (
         <UserManagement onClose={() => setShowUserMgmt(false)} />
       )}
+      {showActivityLog && (
+        <ActivityLog onClose={() => setShowActivityLog(false)} />
+      )}
       {showLogin && (
         <LoginModal onLogin={onLogin} onClose={() => setShowLogin(false)} />
       )}