Initial commit: Homelab documentation

- infrastructure.md: Network topology, server overview, credentials
- gsm.md: Gameserver Monitor detailed documentation
- todo.md: Project roadmap and completed tasks
- CLAUDE.md: AI assistant context
- temp/: Frontend component backups

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

temp/App.jsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { UserProvider } from './context/UserContext'
+import Login from './pages/Login'
+import Dashboard from './pages/Dashboard'
+import ServerDetail from './pages/ServerDetail'
+
+function App() {
+  const [token, setToken] = useState(localStorage.getItem('token'))
+
+  const handleLogin = (newToken) => {
+    localStorage.setItem('token', newToken)
+    setToken(newToken)
+  }
+
+  const handleLogout = () => {
+    localStorage.removeItem('token')
+    setToken(null)
+  }
+
+  if (!token) {
+    return <Login onLogin={handleLogin} />
+  }
+
+  return (
+    <UserProvider token={token} onLogout={handleLogout}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Dashboard onLogout={handleLogout} />} />
+          <Route path="/server/:serverId" element={<ServerDetail />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </BrowserRouter>
+    </UserProvider>
+  )
+}
+
+export default App

temp/Dashboard.jsx

@@ -0,0 +1,147 @@
+import { useState, useEffect } from 'react'
+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'
+
+export default function Dashboard({ onLogout }) {
+  const navigate = useNavigate()
+  const { user, token, loading: userLoading, isSuperadmin, role } = useUser()
+  const [servers, setServers] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showSettings, setShowSettings] = useState(false)
+  const [showUserMgmt, setShowUserMgmt] = useState(false)
+
+  const fetchServers = async () => {
+    try {
+      const data = await getServers(token)
+      setServers(data)
+      setError('')
+    } catch (err) {
+      setError('Failed to connect to server')
+      if (err.message.includes('401') || err.message.includes('403')) {
+        onLogout()
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!userLoading) {
+      fetchServers()
+      const interval = setInterval(fetchServers, 10000)
+      return () => clearInterval(interval)
+    }
+  }, [token, userLoading])
+
+  const roleLabels = {
+    user: 'Viewer',
+    moderator: 'Operator',
+    superadmin: 'Admin'
+  }
+
+  if (userLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-neutral-400">Loading...</div>
+      </div>
+    )
+  }
+
+  const onlineCount = servers.filter(s => s.running).length
+  const totalPlayers = servers.reduce((sum, s) => sum + (s.players?.online || 0), 0)
+
+  return (
+    <div className="min-h-screen">
+      {/* Header */}
+      <header className="border-b border-neutral-800 bg-neutral-900/50 backdrop-blur-sm sticky top-0 z-10">
+        <div className="container-main py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-6">
+              <h1 className="text-xl font-semibold text-white">
+                Gameserver Monitor
+              </h1>
+              <div className="hidden md:flex items-center gap-4 text-sm text-neutral-400">
+                <span>
+                  <span className="text-white font-medium">{onlineCount}</span>/{servers.length} online
+                </span>
+                <span className="text-neutral-600">|</span>
+                <span>
+                  <span className="text-white font-medium">{totalPlayers}</span> players
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <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 && (
+                <button
+                  onClick={() => setShowUserMgmt(true)}
+                  className="btn btn-ghost"
+                >
+                  Users
+                </button>
+              )}
+
+              <button
+                onClick={() => setShowSettings(true)}
+                className="btn btn-ghost"
+              >
+                Settings
+              </button>
+
+              <button
+                onClick={onLogout}
+                className="btn btn-outline"
+              >
+                Sign out
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="container-main py-8">
+        {error && (
+          <div className="mb-6 bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-md text-sm">
+            {error}
+          </div>
+        )}
+
+        {loading ? (
+          <div className="text-center py-12">
+            <div className="text-neutral-400">Loading servers...</div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {servers.map((server) => (
+              <ServerCard
+                key={server.id}
+                server={server}
+                onClick={() => navigate('/server/' + server.id)}
+              />
+            ))}
+          </div>
+        )}
+      </main>
+
+      {/* Modals */}
+      {showSettings && (
+        <SettingsModal onClose={() => setShowSettings(false)} />
+      )}
+
+      {showUserMgmt && (
+        <UserManagement onClose={() => setShowUserMgmt(false)} />
+      )}
+    </div>
+  )
+}

temp/Dashboard_current.jsx

@@ -0,0 +1,196 @@
+import { useState, useEffect } from 'react'
+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'
+
+export default function Dashboard({ onLogout }) {
+  const navigate = useNavigate()
+  const { user, token, loading: userLoading, isSuperadmin, role } = useUser()
+  const [servers, setServers] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showSettings, setShowSettings] = useState(false)
+  const [showUserMgmt, setShowUserMgmt] = useState(false)
+  const [currentTime, setCurrentTime] = useState(new Date())
+
+  const fetchServers = async () => {
+    try {
+      const data = await getServers(token)
+      setServers(data)
+      setError('')
+    } catch (err) {
+      setError('CONNECTION_FAILED: Unable to reach server cluster')
+      if (err.message.includes('401') || err.message.includes('403')) {
+        onLogout()
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!userLoading) {
+      fetchServers()
+      const interval = setInterval(fetchServers, 10000)
+      return () => clearInterval(interval)
+    }
+  }, [token, userLoading])
+
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000)
+    return () => clearInterval(timer)
+  }, [])
+
+  const roleLabels = {
+    user: 'VIEWER',
+    moderator: 'OPERATOR',
+    superadmin: 'SYSADMIN'
+  }
+
+  if (userLoading) {
+    return (
+      <div className="min-h-screen bg-[#0d0d0d] flex items-center justify-center">
+        <div className="text-[#00ff41] glow-green text-xl">INITIALIZING SYSTEM...</div>
+      </div>
+    )
+  }
+
+  const onlineCount = servers.filter(s => s.running).length
+  const totalPlayers = servers.reduce((sum, s) => sum + (s.players?.online || 0), 0)
+
+  return (
+    <div className="min-h-screen bg-[#0d0d0d] hex-grid relative overflow-x-hidden">
+      {/* Matrix rain overlay */}
+      <div className="matrix-bg" />
+
+      {/* Header */}
+      <header className="relative z-10 border-b border-[#00ff41]/30 bg-black/80 backdrop-blur-sm">
+        <div className="container-main py-4">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center gap-6">
+              <h1 className="text-xl md:text-2xl font-bold text-[#00ff41] glow-green font-mono">
+                GAMESERVER_MONITOR
+              </h1>
+              <div className="hidden md:flex items-center gap-4 text-[#00ff41]/60 text-sm font-mono">
+                <span className="flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full status-online"></span>
+                  {onlineCount}/{servers.length} NODES
+                </span>
+                <span>|</span>
+                <span>{totalPlayers} USERS_CONNECTED</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <div className="hidden sm:block text-[#00ff41]/60 font-mono text-sm">
+                {currentTime.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+              </div>
+
+              <div className="flex items-center gap-2">
+                <div className="text-right hidden sm:block">
+                  <div className="text-[#00ff41] font-mono text-sm">{user?.username?.toUpperCase()}</div>
+                  <div className="text-[#00ff41]/50 text-xs">[{roleLabels[role]}]</div>
+                </div>
+
+                {isSuperadmin && (
+                  <button
+                    onClick={() => setShowUserMgmt(true)}
+                    className="btn-matrix px-3 py-1.5 text-sm font-mono"
+                  >
+                    USERS
+                  </button>
+                )}
+
+                <button
+                  onClick={() => setShowSettings(true)}
+                  className="btn-matrix px-3 py-1.5 text-sm font-mono"
+                >
+                  SETTINGS
+                </button>
+
+                <button
+                  onClick={onLogout}
+                  className="btn-matrix px-3 py-1.5 text-sm font-mono"
+                >
+                  DISCONNECT
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="relative z-10 container-main py-8">
+        {/* System Status Bar */}
+        <div className="mb-8 p-4 border border-[#00ff41]/30 bg-black/60 backdrop-blur-sm rounded font-mono text-sm">
+          <div className="flex items-center gap-2 text-[#00ff41]/80">
+            <span className="text-[#00ff41]">&gt;</span>
+            <span>SYSTEM_STATUS: {error ? 'ERROR' : 'OPERATIONAL'}</span>
+          </div>
+          {error && (
+            <div className="mt-2 text-red-500 flex items-center gap-2">
+              <span className="animate-pulse">!</span>
+              {error}
+            </div>
+          )}
+        </div>
+
+        {loading ? (
+          <div className="text-center py-12">
+            <div className="text-[#00ff41] glow-green text-xl animate-pulse">
+              LOADING_NODES...
+            </div>
+            <div className="mt-4 flex justify-center gap-1">
+              {[...Array(5)].map((_, i) => (
+                <div
+                  key={i}
+                  className="w-3 h-8 bg-[#00ff41]/30"
+                  style={{
+                    animation: `pulse 1s ease-in-out ${i * 0.1}s infinite`
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {servers.map((server, index) => (
+              <div
+                key={server.id}
+                className="opacity-0 fade-in-up"
+                style={{ animationDelay: `${index * 0.1}s` }}
+              >
+                <ServerCard
+                  server={server}
+                  onClick={() => navigate(`/server/${server.id}`)}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Footer Stats */}
+        <div className="mt-12 pt-6 border-t border-[#00ff41]/20">
+          <div className="flex flex-wrap justify-center gap-6 text-[#00ff41]/50 font-mono text-xs">
+            <span>REFRESH_RATE: 10s</span>
+            <span>PROTOCOL: RCON/SSH</span>
+            <span>METRICS: PROMETHEUS</span>
+            <span>BUILD: v2.0.0-matrix</span>
+          </div>
+        </div>
+      </main>
+
+      {/* Modals */}
+      {showSettings && (
+        <SettingsModal onClose={() => setShowSettings(false)} />
+      )}
+
+      {showUserMgmt && (
+        <UserManagement onClose={() => setShowUserMgmt(false)} />
+      )}
+    </div>
+  )
+}

temp/Login.jsx

@@ -0,0 +1,86 @@
+import { useState } from 'react'
+import { login } from '../api'
+
+export default function Login({ onLogin }) {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    try {
+      const { token } = await login(username, password)
+      onLogin(token)
+    } catch (err) {
+      setError('Invalid username or password')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-semibold text-white">Gameserver Monitor</h1>
+          <p className="text-neutral-400 mt-2">Sign in to your account</p>
+        </div>
+
+        <div className="card p-6">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-md text-sm">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label className="block text-sm font-medium text-neutral-300 mb-2">
+                Username
+              </label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="input"
+                placeholder="Enter your username"
+                required
+                autoFocus
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-neutral-300 mb-2">
+                Password
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="input"
+                placeholder="Enter your password"
+                required
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn btn-primary w-full"
+            >
+              {loading ? 'Signing in...' : 'Sign in'}
+            </button>
+          </form>
+        </div>
+
+        <p className="text-center text-neutral-500 text-sm mt-6">
+          Gameserver Monitor v2.0
+        </p>
+      </div>
+    </div>
+  )
+}

temp/MetricsChart.jsx

@@ -0,0 +1,192 @@
+import { useState, useEffect } from 'react'
+import { AreaChart, Area, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { getMetricsHistory } from '../api'
+import { useUser } from '../context/UserContext'
+
+const GRAFANA_URL = 'https://grafana.dimension47.de'
+
+export default function MetricsChart({ serverId, serverName, expanded = false }) {
+  const { token } = useUser()
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [range, setRange] = useState('1h')
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const metrics = await getMetricsHistory(token, serverId, range)
+        setData(metrics)
+      } catch (err) {
+        console.error('Failed to fetch metrics:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchData()
+    const interval = setInterval(fetchData, 60000)
+    return () => clearInterval(interval)
+  }, [token, serverId, range])
+
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp)
+    return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+  }
+
+  const formatBytes = (bytes) => {
+    if (bytes < 1024) return bytes.toFixed(0) + ' B/s'
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB/s'
+    return (bytes / 1024 / 1024).toFixed(1) + ' MB/s'
+  }
+
+  if (loading) {
+    return (
+      <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
+        <div className="h-20 flex items-center justify-center">
+          <span className="text-[#00ff41]/50 font-mono text-sm animate-pulse">LOADING_METRICS...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (!data || data.cpu.length === 0) {
+    return (
+      <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
+        <div className="h-20 flex items-center justify-center">
+          <span className="text-[#00ff41]/30 font-mono text-sm">NO_DATA_AVAILABLE</span>
+        </div>
+      </div>
+    )
+  }
+
+  const combinedData = data.cpu.map((point, i) => ({
+    timestamp: point.timestamp,
+    cpu: point.value,
+    memory: data.memory[i]?.value || 0,
+    networkRx: data.networkRx[i]?.value || 0,
+    networkTx: data.networkTx[i]?.value || 0
+  }))
+
+  const CustomTooltip = ({ active, payload, label }) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-black/95 border border-[#00ff41]/50 rounded p-3 font-mono text-xs">
+          <div className="text-[#00ff41]/60 mb-2">{formatTime(label)}</div>
+          {payload.map((entry, i) => (
+            <div key={i} className="flex justify-between gap-4" style={{ color: entry.color }}>
+              <span>{entry.name}:</span>
+              <span className="font-bold">
+                {entry.name.includes('Network') ? formatBytes(entry.value) : entry.value.toFixed(1) + '%'}
+              </span>
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return null
+  }
+
+  const ChartCard = ({ title, dataKey, color, domain, formatter }) => (
+    <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
+      <div className="flex justify-between items-center mb-3">
+        <span className="text-[#00ff41]/60 font-mono text-xs">{title}</span>
+        <span className="text-[#00ff41] font-mono text-sm font-bold">
+          {formatter
+            ? formatter(combinedData[combinedData.length - 1]?.[dataKey] || 0)
+            : (combinedData[combinedData.length - 1]?.[dataKey] || 0).toFixed(1) + '%'
+          }
+        </span>
+      </div>
+      <ResponsiveContainer width="100%" height={expanded ? 150 : 80}>
+        <AreaChart data={combinedData}>
+          <defs>
+            <linearGradient id={`gradient-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor={color} stopOpacity={0.4}/>
+              <stop offset="95%" stopColor={color} stopOpacity={0.05}/>
+            </linearGradient>
+          </defs>
+          {expanded && (
+            <>
+              <XAxis
+                dataKey="timestamp"
+                tickFormatter={formatTime}
+                tick={{ fill: '#00ff41', fontSize: 10, opacity: 0.5 }}
+                axisLine={{ stroke: '#00ff41', opacity: 0.2 }}
+                tickLine={false}
+                minTickGap={50}
+              />
+              <YAxis
+                domain={domain || [0, 'auto']}
+                tick={{ fill: '#00ff41', fontSize: 10, opacity: 0.5 }}
+                axisLine={{ stroke: '#00ff41', opacity: 0.2 }}
+                tickLine={false}
+                width={40}
+                tickFormatter={formatter ? (v) => formatBytes(v).split(' ')[0] : (v) => v.toFixed(0)}
+              />
+              <Tooltip content={<CustomTooltip />} />
+            </>
+          )}
+          <Area
+            type="monotone"
+            dataKey={dataKey}
+            name={title}
+            stroke={color}
+            strokeWidth={2}
+            fill={`url(#gradient-${dataKey})`}
+            isAnimationActive={true}
+            animationDuration={500}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <span className="text-[#00ff41]/60 font-mono text-xs">
+          // METRICS_HISTORY
+        </span>
+        <div className="flex items-center gap-3">
+          <select
+            value={range}
+            onChange={(e) => setRange(e.target.value)}
+            className="input-matrix px-3 py-1 rounded font-mono text-xs"
+          >
+            <option value="15m">15 MIN</option>
+            <option value="1h">1 HOUR</option>
+            <option value="6h">6 HOURS</option>
+            <option value="24h">24 HOURS</option>
+          </select>
+          <a
+            href={`${GRAFANA_URL}/d/rYdddlPWk/node-exporter-full?var-job=${serverId}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn-matrix px-3 py-1 text-xs font-mono flex items-center gap-2"
+          >
+            <span>📊</span>
+            GRAFANA
+          </a>
+        </div>
+      </div>
+
+      {/* Charts */}
+      {expanded ? (
+        <div className="space-y-4">
+          <ChartCard title="CPU_USAGE" dataKey="cpu" color="#00ff41" domain={[0, 100]} />
+          <ChartCard title="RAM_USAGE" dataKey="memory" color="#00ffff" domain={[0, 100]} />
+          <div className="grid grid-cols-2 gap-4">
+            <ChartCard title="NETWORK_RX" dataKey="networkRx" color="#ff00ff" formatter={formatBytes} />
+            <ChartCard title="NETWORK_TX" dataKey="networkTx" color="#ffff00" formatter={formatBytes} />
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-3">
+          <ChartCard title="CPU" dataKey="cpu" color="#00ff41" domain={[0, 100]} />
+          <ChartCard title="RAM" dataKey="memory" color="#00ffff" domain={[0, 100]} />
+        </div>
+      )}
+    </div>
+  )
+}

temp/ServerCard.jsx

@@ -0,0 +1,96 @@
+export default function ServerCard({ server, onClick }) {
+  const formatUptime = (seconds) => {
+    const hours = Math.floor(seconds / 3600)
+    if (hours > 24) {
+      const days = Math.floor(hours / 24)
+      return days + 'd ' + (hours % 24) + 'h'
+    }
+    const minutes = Math.floor((seconds % 3600) / 60)
+    return hours + 'h ' + minutes + 'm'
+  }
+
+  const cpuPercent = Math.min(server.metrics.cpu, 100)
+  const memPercent = Math.min(server.metrics.memory, 100)
+
+  const getProgressColor = (percent) => {
+    if (percent > 80) return 'progress-bar-danger'
+    if (percent > 60) return 'progress-bar-warning'
+    return 'progress-bar-success'
+  }
+
+  return (
+    <div
+      className="card card-clickable p-5"
+      onClick={onClick}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-white">
+          {server.name}
+        </h3>
+        <span className={server.running ? 'badge badge-success' : 'badge badge-destructive'}>
+          {server.running ? 'Online' : 'Offline'}
+        </span>
+      </div>
+
+      {/* Metrics */}
+      <div className="space-y-3">
+        {/* CPU */}
+        <div>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-neutral-400">CPU</span>
+            <span className="text-white">{server.metrics.cpu.toFixed(1)}%</span>
+          </div>
+          <div className="progress">
+            <div
+              className={'progress-bar ' + getProgressColor(cpuPercent)}
+              style={{ width: cpuPercent + '%' }}
+            />
+          </div>
+        </div>
+
+        {/* RAM */}
+        <div>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-neutral-400">Memory</span>
+            <span className="text-white">
+              {server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
+            </span>
+          </div>
+          <div className="progress">
+            <div
+              className={'progress-bar ' + getProgressColor(memPercent)}
+              style={{ width: memPercent + '%' }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Footer Stats */}
+      <div className="flex items-center justify-between mt-4 pt-4 border-t border-neutral-800 text-sm">
+        <div className="text-neutral-400">
+          <span className="text-white font-medium">{server.players.online}</span>
+          {server.players.max ? ' / ' + server.players.max : ''} players
+        </div>
+        {server.running && (
+          <div className="text-neutral-400">
+            Uptime: <span className="text-white">{formatUptime(server.metrics.uptime)}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Players List */}
+      {server.players?.list?.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-neutral-800">
+          <div className="flex flex-wrap gap-1.5">
+            {server.players.list.map((player, i) => (
+              <span key={i} className="badge badge-secondary">
+                {player}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

temp/ServerCard_new.jsx

@@ -0,0 +1,109 @@
+import { useState } from 'react'
+
+export default function ServerCard({ server, onClick }) {
+  const [isHovered, setIsHovered] = useState(false)
+
+  const formatUptime = (seconds) => {
+    const hours = Math.floor(seconds / 3600)
+    if (hours > 24) {
+      const days = Math.floor(hours / 24)
+      return days + 'd ' + (hours % 24) + 'h'
+    }
+    const minutes = Math.floor((seconds % 3600) / 60)
+    return hours + 'h ' + minutes + 'm'
+  }
+
+  const cpuPercent = Math.min(server.metrics.cpu, 100)
+  const memPercent = Math.min(server.metrics.memory, 100)
+
+  return (
+    <div
+      className="card-matrix rounded-lg p-6 cursor-pointer transition-all duration-300 border border-[#00ff41]/30 hover:border-[#00ff41]/60 hover:bg-[#00ff41]/5"
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-5">
+        <h2 className="text-xl font-bold text-[#00ff41] font-mono">
+          {server.name.toUpperCase()}
+        </h2>
+        <div className="flex items-center gap-2">
+          <span className={`w-2 h-2 rounded-full ${server.running ? 'status-online' : 'status-offline'}`} />
+          <span className={`text-sm font-mono ${server.running ? 'text-[#00ff41]' : 'text-red-500'}`}>
+            {server.running ? 'ONLINE' : 'OFFLINE'}
+          </span>
+        </div>
+      </div>
+
+      {/* CPU & RAM Bars */}
+      <div className="space-y-4 mb-5">
+        {/* CPU */}
+        <div>
+          <div className="flex justify-between text-sm font-mono mb-1">
+            <span className="text-[#00ff41]/60">CPU</span>
+            <span className="text-[#00ff41]">{server.metrics.cpu.toFixed(1)}%</span>
+          </div>
+          <div className="h-2 bg-black/50 rounded-full border border-[#00ff41]/20">
+            <div
+              className="h-full rounded-full bg-gradient-to-r from-[#008f11] to-[#00ff41] transition-all duration-500"
+              style={{ width: cpuPercent + '%', boxShadow: '0 0 8px #00ff41' }}
+            />
+          </div>
+        </div>
+
+        {/* RAM */}
+        <div>
+          <div className="flex justify-between text-sm font-mono mb-1">
+            <span className="text-[#00ff41]/60">RAM</span>
+            <span className="text-[#00ff41]">
+              {server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
+            </span>
+          </div>
+          <div className="h-2 bg-black/50 rounded-full border border-[#00ff41]/20">
+            <div
+              className="h-full rounded-full bg-gradient-to-r from-[#008f11] to-[#00ff41] transition-all duration-500"
+              style={{ width: memPercent + '%', boxShadow: '0 0 8px #00ff41' }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Stats Row */}
+      <div className="flex justify-between font-mono text-sm border-t border-[#00ff41]/20 pt-4">
+        <div className="text-center">
+          <div className="text-[#00ff41] text-lg font-bold">{server.players.online}</div>
+          <div className="text-[#00ff41]/50 text-xs">PLAYERS</div>
+        </div>
+        {server.running && (
+          <div className="text-center">
+            <div className="text-[#00ff41] text-lg font-bold">{formatUptime(server.metrics.uptime)}</div>
+            <div className="text-[#00ff41]/50 text-xs">UPTIME</div>
+          </div>
+        )}
+        <div className="text-center">
+          <div className="text-[#00ff41] text-lg font-bold">{server.metrics.cpuCores}</div>
+          <div className="text-[#00ff41]/50 text-xs">CORES</div>
+        </div>
+      </div>
+
+      {/* Players List */}
+      {server.players?.list?.length > 0 && (
+        <div className="mt-4 pt-4 border-t border-[#00ff41]/20">
+          <div className="flex flex-wrap gap-2">
+            {server.players.list.map((player, i) => (
+              <span key={i} className="bg-[#00ff41]/10 text-[#00ff41] px-2 py-1 rounded font-mono text-xs">
+                {player}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Click Indicator */}
+      <div className={`mt-4 text-center text-[#00ff41]/40 text-xs font-mono transition-opacity duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
+        CLICK FOR DETAILS
+      </div>
+    </div>
+  )
+}

temp/ServerDetail.jsx

@@ -0,0 +1,323 @@
+import { useState, useEffect, useRef } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { getServers, serverAction, sendRcon, getServerLogs } from '../api'
+import { useUser } from '../context/UserContext'
+import MetricsChart from '../components/MetricsChart'
+
+export default function ServerDetail() {
+  const { serverId } = useParams()
+  const navigate = useNavigate()
+  const { token, isModerator } = useUser()
+  const [server, setServer] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [actionLoading, setActionLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState('overview')
+  const [rconCommand, setRconCommand] = useState('')
+  const [rconHistory, setRconHistory] = useState([])
+  const [logs, setLogs] = useState('')
+  const logsRef = useRef(null)
+  const rconRef = useRef(null)
+
+  const fetchServer = async () => {
+    try {
+      const servers = await getServers(token)
+      const found = servers.find(s => s.id === serverId)
+      if (found) {
+        setServer(found)
+      } else {
+        navigate('/')
+      }
+    } catch (err) {
+      console.error(err)
+      navigate('/')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchServer()
+    const interval = setInterval(fetchServer, 10000)
+    return () => clearInterval(interval)
+  }, [token, serverId])
+
+  const handleAction = async (action) => {
+    setActionLoading(true)
+    try {
+      await serverAction(token, server.id, action)
+      setTimeout(() => {
+        fetchServer()
+        setActionLoading(false)
+      }, 2000)
+    } catch (err) {
+      console.error(err)
+      setActionLoading(false)
+    }
+  }
+
+  const handleRcon = async (e) => {
+    e.preventDefault()
+    if (!rconCommand.trim()) return
+    const cmd = rconCommand
+    setRconCommand('')
+    try {
+      const { response } = await sendRcon(token, server.id, cmd)
+      setRconHistory([...rconHistory, { cmd, res: response, time: new Date() }])
+    } catch (err) {
+      setRconHistory([...rconHistory, { cmd, res: 'Error: ' + err.message, time: new Date(), error: true }])
+    }
+  }
+
+  const fetchLogs = async () => {
+    try {
+      const data = await getServerLogs(token, server.id, 20)
+      setLogs(data.logs || '')
+      if (logsRef.current) {
+        logsRef.current.scrollTop = logsRef.current.scrollHeight
+      }
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  useEffect(() => {
+    if (activeTab === 'logs' && isModerator && server) {
+      fetchLogs()
+      const interval = setInterval(fetchLogs, 5000)
+      return () => clearInterval(interval)
+    }
+  }, [activeTab, isModerator, server])
+
+  useEffect(() => {
+    if (rconRef.current) {
+      rconRef.current.scrollTop = rconRef.current.scrollHeight
+    }
+  }, [rconHistory])
+
+  const formatUptime = (seconds) => {
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    if (days > 0) return days + 'd ' + hours + 'h ' + minutes + 'm'
+    return hours + 'h ' + minutes + 'm'
+  }
+
+  const tabs = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'metrics', label: 'Metrics' },
+    ...(isModerator ? [
+      { id: 'console', label: 'Console' },
+      { id: 'logs', label: 'Logs' },
+    ] : []),
+  ]
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-neutral-400">Loading...</div>
+      </div>
+    )
+  }
+
+  if (!server) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-neutral-400">Server not found</div>
+      </div>
+    )
+  }
+
+  const cpuPercent = Math.min(server.metrics.cpu, 100)
+  const memPercent = Math.min(server.metrics.memory, 100)
+
+  return (
+    <div className="min-h-screen">
+      {/* Header */}
+      <header className="border-b border-neutral-800 bg-neutral-900/50 backdrop-blur-sm sticky top-0 z-10">
+        <div className="container-main py-4">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => navigate('/')}
+              className="btn btn-ghost"
+            >
+              Back
+            </button>
+            <div className="flex-1">
+              <div className="flex items-center gap-3">
+                <h1 className="text-xl font-semibold text-white">{server.name}</h1>
+                <span className={server.running ? 'badge badge-success' : 'badge badge-destructive'}>
+                  {server.running ? 'Online' : 'Offline'}
+                </span>
+              </div>
+              {server.running && (
+                <p className="text-sm text-neutral-400 mt-1">
+                  Uptime: {formatUptime(server.metrics.uptime)}
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Tabs */}
+          <div className="tabs mt-4">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={'tab ' + (activeTab === tab.id ? 'tab-active' : '')}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </header>
+
+      {/* Content */}
+      <main className="container-main py-6">
+        {/* Overview Tab */}
+        {activeTab === 'overview' && (
+          <div className="space-y-6">
+            {/* Stats Grid */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="card p-4">
+                <div className="text-sm text-neutral-400">CPU Usage</div>
+                <div className="text-2xl font-semibold text-white mt-1">{server.metrics.cpu.toFixed(1)}%</div>
+                <div className="progress mt-2">
+                  <div className="progress-bar" style={{ width: cpuPercent + '%' }} />
+                </div>
+              </div>
+              <div className="card p-4">
+                <div className="text-sm text-neutral-400">Memory</div>
+                <div className="text-2xl font-semibold text-white mt-1">
+                  {server.metrics.memoryUsed?.toFixed(1)} {server.metrics.memoryUnit}
+                </div>
+                <div className="text-xs text-neutral-500 mt-1">
+                  of {server.metrics.memoryTotal?.toFixed(1)} {server.metrics.memoryUnit}
+                </div>
+              </div>
+              <div className="card p-4">
+                <div className="text-sm text-neutral-400">Players</div>
+                <div className="text-2xl font-semibold text-white mt-1">{server.players.online}</div>
+                <div className="text-xs text-neutral-500 mt-1">
+                  {server.players.max ? 'of ' + server.players.max + ' max' : 'No limit'}
+                </div>
+              </div>
+              <div className="card p-4">
+                <div className="text-sm text-neutral-400">CPU Cores</div>
+                <div className="text-2xl font-semibold text-white mt-1">{server.metrics.cpuCores}</div>
+              </div>
+            </div>
+
+            {/* Players List */}
+            {server.players?.list?.length > 0 && (
+              <div className="card p-4">
+                <h3 className="text-sm font-medium text-neutral-300 mb-3">Online Players</h3>
+                <div className="flex flex-wrap gap-2">
+                  {server.players.list.map((player, i) => (
+                    <span key={i} className="badge badge-secondary">{player}</span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Power Controls */}
+            {isModerator && (
+              <div className="card p-4">
+                <h3 className="text-sm font-medium text-neutral-300 mb-3">Server Controls</h3>
+                <div className="flex flex-wrap gap-3">
+                  {server.running ? (
+                    <>
+                      <button
+                        onClick={() => handleAction('stop')}
+                        disabled={actionLoading}
+                        className="btn btn-destructive"
+                      >
+                        {actionLoading ? 'Processing...' : 'Stop Server'}
+                      </button>
+                      <button
+                        onClick={() => handleAction('restart')}
+                        disabled={actionLoading}
+                        className="btn btn-secondary"
+                      >
+                        {actionLoading ? 'Processing...' : 'Restart Server'}
+                      </button>
+                    </>
+                  ) : (
+                    <button
+                      onClick={() => handleAction('start')}
+                      disabled={actionLoading}
+                      className="btn btn-primary"
+                    >
+                      {actionLoading ? 'Processing...' : 'Start Server'}
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Metrics Tab */}
+        {activeTab === 'metrics' && (
+          <MetricsChart serverId={server.id} serverName={server.name} expanded={true} />
+        )}
+
+        {/* Console Tab */}
+        {activeTab === 'console' && isModerator && (
+          <div className="space-y-4">
+            <div
+              ref={rconRef}
+              className="terminal p-4 h-80 overflow-y-auto"
+            >
+              <div className="text-neutral-500 text-sm mb-2">RCON Console - {server.name}</div>
+              {rconHistory.length === 0 && (
+                <div className="text-neutral-600 text-sm">Waiting for commands...</div>
+              )}
+              {rconHistory.map((entry, i) => (
+                <div key={i} className="mb-2 text-sm">
+                  <div className="text-neutral-400">
+                    <span className="text-neutral-600">[{entry.time.toLocaleTimeString()}]</span> &gt; {entry.cmd}
+                  </div>
+                  <div className={'whitespace-pre-wrap pl-4 ' + (entry.error ? 'text-red-400' : 'text-neutral-300')}>
+                    {entry.res}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <form onSubmit={handleRcon} className="flex gap-2">
+              <input
+                type="text"
+                value={rconCommand}
+                onChange={(e) => setRconCommand(e.target.value)}
+                placeholder="Enter command..."
+                className="input flex-1"
+              />
+              <button type="submit" className="btn btn-primary">
+                Send
+              </button>
+            </form>
+          </div>
+        )}
+
+        {/* Logs Tab */}
+        {activeTab === 'logs' && isModerator && (
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <span className="text-sm text-neutral-400">Last 20 lines</span>
+              <button onClick={fetchLogs} className="btn btn-secondary">
+                Refresh
+              </button>
+            </div>
+            <div
+              ref={logsRef}
+              className="terminal p-4 logs-container text-xs text-neutral-300 whitespace-pre-wrap"
+            >
+              {logs || 'Loading...'}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

temp/ServerDetailModal.jsx

@@ -0,0 +1,326 @@
+import { useState, useEffect, useRef } from 'react'
+import { serverAction, sendRcon, getServerLogs } from '../api'
+import { useUser } from '../context/UserContext'
+import MetricsChart from './MetricsChart'
+
+export default function ServerDetailModal({ server, onClose, onUpdate }) {
+  const { token, isModerator } = useUser()
+  const [loading, setLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState('overview')
+  const [rconCommand, setRconCommand] = useState('')
+  const [rconHistory, setRconHistory] = useState([])
+  const [logs, setLogs] = useState('')
+  const logsRef = useRef(null)
+  const rconRef = useRef(null)
+
+  const typeIcons = {
+    minecraft: '⛏️',
+    factorio: '⚙️'
+  }
+
+  const handleAction = async (action) => {
+    setLoading(true)
+    try {
+      await serverAction(token, server.id, action)
+      setTimeout(() => {
+        onUpdate()
+        setLoading(false)
+      }, 2000)
+    } catch (err) {
+      console.error(err)
+      setLoading(false)
+    }
+  }
+
+  const handleRcon = async (e) => {
+    e.preventDefault()
+    if (!rconCommand.trim()) return
+
+    const cmd = rconCommand
+    setRconCommand('')
+
+    try {
+      const { response } = await sendRcon(token, server.id, cmd)
+      setRconHistory([...rconHistory, { cmd, res: response, time: new Date() }])
+    } catch (err) {
+      setRconHistory([...rconHistory, { cmd, res: 'ERROR: ' + err.message, time: new Date(), error: true }])
+    }
+  }
+
+  const fetchLogs = async () => {
+    try {
+      const data = await getServerLogs(token, server.id, 100)
+      setLogs(data.logs || '')
+      if (logsRef.current) {
+        logsRef.current.scrollTop = logsRef.current.scrollHeight
+      }
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  useEffect(() => {
+    if (activeTab === 'logs' && isModerator) {
+      fetchLogs()
+      const interval = setInterval(fetchLogs, 5000)
+      return () => clearInterval(interval)
+    }
+  }, [activeTab, isModerator])
+
+  useEffect(() => {
+    if (rconRef.current) {
+      rconRef.current.scrollTop = rconRef.current.scrollHeight
+    }
+  }, [rconHistory])
+
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', handleEsc)
+    return () => window.removeEventListener('keydown', handleEsc)
+  }, [onClose])
+
+  const formatUptime = (seconds) => {
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    if (days > 0) return `${days}d ${hours}h ${minutes}m`
+    return `${hours}h ${minutes}m`
+  }
+
+  const tabs = [
+    { id: 'overview', label: 'OVERVIEW', icon: '📊' },
+    { id: 'metrics', label: 'METRICS', icon: '📈' },
+    ...(isModerator ? [
+      { id: 'console', label: 'CONSOLE', icon: '💻' },
+      { id: 'logs', label: 'LOGS', icon: '📜' },
+    ] : []),
+  ]
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 modal-backdrop"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-4xl max-h-[90vh] overflow-hidden bg-black/95 border border-[#00ff41]/50 rounded-lg glow-box fade-in-up">
+        {/* Header */}
+        <div className="border-b border-[#00ff41]/30 bg-[#00ff41]/5 p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <span className="text-4xl">{typeIcons[server.type] || '🎮'}</span>
+              <div>
+                <h2 className="text-2xl font-bold text-[#00ff41] font-mono tracking-wider glow-green">
+                  {server.name.toUpperCase()}
+                </h2>
+                <div className="flex items-center gap-3 mt-1">
+                  <span className={`flex items-center gap-2 text-sm font-mono ${server.running ? 'text-[#00ff41]' : 'text-red-500'}`}>
+                    <span className={`w-2 h-2 rounded-full ${server.running ? 'status-online' : 'status-offline'}`} />
+                    {server.running ? 'ONLINE' : 'OFFLINE'}
+                  </span>
+                  <span className="text-[#00ff41]/50 text-sm font-mono">|</span>
+                  <span className="text-[#00ff41]/50 text-sm font-mono">
+                    UPTIME: {formatUptime(server.metrics.uptime)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <button
+              onClick={onClose}
+              className="text-[#00ff41]/60 hover:text-[#00ff41] transition-colors p-2"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex gap-1 mt-4">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`px-4 py-2 font-mono text-sm transition-all duration-300 rounded-t ${
+                  activeTab === tab.id
+                    ? 'bg-[#00ff41]/20 text-[#00ff41] border-t border-l border-r border-[#00ff41]/50'
+                    : 'text-[#00ff41]/50 hover:text-[#00ff41] hover:bg-[#00ff41]/5'
+                }`}
+              >
+                <span className="mr-2">{tab.icon}</span>
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 overflow-y-auto max-h-[calc(90vh-200px)]">
+          {/* Overview Tab */}
+          {activeTab === 'overview' && (
+            <div className="space-y-6">
+              {/* Stats Grid */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <StatBox label="CPU" value={`${server.metrics.cpu.toFixed(1)}%`} sub={`${server.metrics.cpuCores} cores`} />
+                <StatBox label="RAM" value={`${server.metrics.memoryUsed?.toFixed(1)} ${server.metrics.memoryUnit}`} sub={`/ ${server.metrics.memoryTotal?.toFixed(1)} ${server.metrics.memoryUnit}`} />
+                <StatBox label="PLAYERS" value={`${server.players.online}`} sub={server.players.max ? `/ ${server.players.max}` : 'unlimited'} />
+                <StatBox label="TYPE" value={server.type.toUpperCase()} sub={server.id} />
+              </div>
+
+              {/* Players List */}
+              {server.players?.list?.length > 0 && (
+                <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
+                  <h3 className="text-[#00ff41] font-mono text-sm mb-3">CONNECTED_USERS:</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {server.players.list.map((player, i) => (
+                      <span
+                        key={i}
+                        className="bg-[#00ff41]/10 border border-[#00ff41]/30 text-[#00ff41] px-3 py-1 rounded font-mono text-sm"
+                      >
+                        {player}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Power Controls */}
+              {isModerator && (
+                <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
+                  <h3 className="text-[#00ff41] font-mono text-sm mb-3">POWER_CONTROLS:</h3>
+                  <div className="flex gap-3">
+                    {server.running ? (
+                      <>
+                        <button
+                          onClick={() => handleAction('stop')}
+                          disabled={loading}
+                          className="btn-matrix px-6 py-2 text-red-500 border-red-500 hover:bg-red-500/20 disabled:opacity-50"
+                        >
+                          {loading ? 'PROCESSING...' : 'STOP'}
+                        </button>
+                        <button
+                          onClick={() => handleAction('restart')}
+                          disabled={loading}
+                          className="btn-matrix px-6 py-2 text-yellow-500 border-yellow-500 hover:bg-yellow-500/20 disabled:opacity-50"
+                        >
+                          {loading ? 'PROCESSING...' : 'RESTART'}
+                        </button>
+                      </>
+                    ) : (
+                      <button
+                        onClick={() => handleAction('start')}
+                        disabled={loading}
+                        className="btn-matrix-solid px-6 py-2 disabled:opacity-50"
+                      >
+                        {loading ? 'PROCESSING...' : 'START'}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Metrics Tab */}
+          {activeTab === 'metrics' && (
+            <div className="space-y-4">
+              <MetricsChart serverId={server.id} serverName={server.name} expanded={true} />
+            </div>
+          )}
+
+          {/* Console Tab */}
+          {activeTab === 'console' && isModerator && server.hasRcon && (
+            <div className="space-y-4">
+              <div
+                ref={rconRef}
+                className="terminal rounded h-80 overflow-y-auto p-4"
+              >
+                <div className="text-[#00ff41]/60 font-mono text-sm mb-2">
+                  // RCON Terminal - {server.name}
+                </div>
+                {rconHistory.length === 0 && (
+                  <div className="text-[#00ff41]/40 font-mono text-sm">
+                    Waiting for commands...
+                  </div>
+                )}
+                {rconHistory.map((entry, i) => (
+                  <div key={i} className="mb-2">
+                    <div className="text-[#00ff41] font-mono text-sm">
+                      <span className="text-[#00ff41]/50">[{entry.time.toLocaleTimeString()}]</span> &gt; {entry.cmd}
+                    </div>
+                    <div className={`font-mono text-sm whitespace-pre-wrap pl-4 ${entry.error ? 'text-red-500' : 'text-[#00ff41]/70'}`}>
+                      {entry.res}
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <form onSubmit={handleRcon} className="flex gap-2">
+                <span className="text-[#00ff41] font-mono py-2">&gt;</span>
+                <input
+                  type="text"
+                  value={rconCommand}
+                  onChange={(e) => setRconCommand(e.target.value)}
+                  placeholder="Enter RCON command..."
+                  className="input-matrix flex-1 px-4 py-2 rounded font-mono text-sm"
+                />
+                <button
+                  type="submit"
+                  className="btn-matrix-solid px-6 py-2 font-mono text-sm"
+                >
+                  EXECUTE
+                </button>
+              </form>
+            </div>
+          )}
+
+          {/* Logs Tab */}
+          {activeTab === 'logs' && isModerator && (
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <span className="text-[#00ff41]/60 font-mono text-sm">
+                  // Server Logs - Last 100 lines
+                </span>
+                <button
+                  onClick={fetchLogs}
+                  className="btn-matrix px-4 py-1 text-sm font-mono"
+                >
+                  REFRESH
+                </button>
+              </div>
+              <div
+                ref={logsRef}
+                className="terminal rounded h-96 overflow-y-auto p-4 font-mono text-xs text-[#00ff41]/80 whitespace-pre-wrap"
+              >
+                {logs || 'Loading...'}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-[#00ff41]/30 bg-[#00ff41]/5 px-6 py-3">
+          <div className="flex justify-between items-center text-[#00ff41]/40 font-mono text-xs">
+            <span>SERVER_ID: {server.id}</span>
+            <span>PRESS [ESC] TO CLOSE</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatBox({ label, value, sub }) {
+  return (
+    <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4 text-center">
+      <div className="text-[#00ff41]/50 font-mono text-xs mb-1">{label}</div>
+      <div className="text-[#00ff41] font-mono text-2xl font-bold glow-green metric-value">{value}</div>
+      <div className="text-[#00ff41]/40 font-mono text-xs mt-1">{sub}</div>
+    </div>
+  )
+}

temp/index.css

@@ -0,0 +1,291 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #404040 #171717;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #171717;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #404040;
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: #525252;
+}
+
+body {
+  background-color: #0a0a0a;
+  color: #fafafa;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Buttons */
+button {
+  background: transparent;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  transition: all 0.15s ease;
+  cursor: pointer;
+  border: none;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background-color: #fafafa;
+  color: #0a0a0a;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: #e5e5e5;
+}
+
+.btn-secondary {
+  background-color: #262626;
+  color: #fafafa;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: #363636;
+}
+
+.btn-destructive {
+  background-color: #dc2626;
+  color: #fafafa;
+}
+
+.btn-destructive:hover:not(:disabled) {
+  background-color: #b91c1c;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid #404040;
+  color: #fafafa;
+}
+
+.btn-outline:hover:not(:disabled) {
+  background-color: #262626;
+  border-color: #525252;
+}
+
+.btn-ghost {
+  background: transparent;
+  color: #a3a3a3;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background-color: #262626;
+  color: #fafafa;
+}
+
+/* Cards */
+.card {
+  background-color: #171717;
+  border: 1px solid #262626;
+  border-radius: 0.5rem;
+}
+
+.card:hover {
+  border-color: #404040;
+}
+
+.card-clickable {
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.card-clickable:hover {
+  background-color: #1c1c1c;
+  border-color: #404040;
+}
+
+/* Inputs */
+.input {
+  display: flex;
+  width: 100%;
+  border-radius: 0.375rem;
+  border: 1px solid #404040;
+  background-color: #171717;
+  color: #fafafa;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #737373;
+  box-shadow: 0 0 0 2px rgba(115, 115, 115, 0.2);
+}
+
+.input::placeholder {
+  color: #737373;
+}
+
+/* Badges */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.badge-success {
+  background-color: #14532d;
+  color: #86efac;
+}
+
+.badge-destructive {
+  background-color: #450a0a;
+  color: #fca5a5;
+}
+
+.badge-secondary {
+  background-color: #262626;
+  color: #a3a3a3;
+}
+
+/* Progress */
+.progress {
+  height: 0.5rem;
+  background-color: #262626;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #fafafa;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+.progress-bar-success {
+  background-color: #22c55e;
+}
+
+.progress-bar-warning {
+  background-color: #eab308;
+}
+
+.progress-bar-danger {
+  background-color: #ef4444;
+}
+
+/* Tabs */
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid #262626;
+}
+
+.tab {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #737373;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: transparent;
+}
+
+.tab:hover {
+  color: #a3a3a3;
+}
+
+.tab-active {
+  color: #fafafa;
+  border-bottom-color: #fafafa;
+}
+
+/* Status */
+.status-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+}
+
+.status-online {
+  background-color: #22c55e;
+}
+
+.status-offline {
+  background-color: #ef4444;
+}
+
+/* Terminal/Logs */
+.terminal {
+  background-color: #0a0a0a;
+  border: 1px solid #262626;
+  border-radius: 0.375rem;
+  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+}
+
+.logs-container {
+  height: 320px;
+  max-height: 320px;
+  min-height: 320px;
+  overflow-y: scroll;
+}
+
+/* Layout */
+.container-main {
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+/* Utilities */
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  animation: fadeIn 0.2s ease-out;
+}
+
+/* Modal */
+.modal-backdrop {
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+}