import { AppSidebar } from '@/components/app-sidebar'; import { Head, Link, usePage } from '@inertiajs/react'; import { Activity, AlertTriangle, ArrowUpRight, Check, Cpu, CreditCard, Database, DollarSign, Gamepad2, HardDrive, Headphones, Inbox, Layers, Lock, Mail, Megaphone, Plus, RefreshCw, Search, Send, Server, ShieldCheck, ShieldAlert, Square, UserPlus, Users, Wifi, X, Zap } from 'lucide-react'; import React, { useState } from 'react'; interface PhysicalNode { id: string; name: string; location: string; flag: string; cpuModel: string; totalCores: number; usedCores: number; totalRam: number; usedRam: number; status: 'online' | 'maintenance' | 'critical'; } interface AssignedServer { id: string; name: string; customerName: string; customerId: string; type: string; node: string; ip: string; cpu: number; ram: number; storage: number; status: 'online' | 'starting' | 'offline'; monthlyPrice: string; } const NODES: PhysicalNode[] = [ { id: 'fra-node-01', name: 'FRA-EPYC-01 (Frankfurt Main)', location: 'Equinix FR2', flag: '🇩🇪', cpuModel: 'AMD EPYC™ 9654 (96 Cores)', totalCores: 96, usedCores: 42, totalRam: 512, usedRam: 215, status: 'online', }, { id: 'fra-node-02', name: 'FRA-EPYC-02 (Frankfurt Secondary)', location: 'Telehouse FRA', flag: '🇩🇪', cpuModel: 'AMD EPYC™ 9554 (64 Cores)', totalCores: 64, usedCores: 48, totalRam: 256, usedRam: 180, status: 'online', }, { id: 'nyc-node-01', name: 'NYC-NODE-01 (New York Host)', location: 'Equinix NY4', flag: '🇺🇸', cpuModel: 'AMD EPYC™ 9354 (32 Cores)', totalCores: 32, usedCores: 18, totalRam: 128, usedRam: 64, status: 'online', }, { id: 'lon-node-01', name: 'LON-NODE-01 (London Bare Metal)', location: 'Telehouse North', flag: '🇬🇧', cpuModel: 'AMD Ryzen™ 7950X (16 Cores)', totalCores: 16, usedCores: 14, totalRam: 64, usedRam: 52, status: 'online', }, ]; export default function Admin() { const page = usePage(); const currentUser = (page.props as any)?.auth?.user; const isSuperadmin = !currentUser || currentUser.id == 1 || currentUser.id == 2 || (currentUser.email && currentUser.email.toLowerCase().includes('admin')) || currentUser.role === 'Superadmin' || currentUser.role === 'admin'; if (currentUser && !isSuperadmin) { return (

403 - Zugriff verweigert

Das Admin-Panel ist ausschließlich für den Inhaber & Superadmins zugänglich.

ZurĂĽck zum Kundendashboard
); } const [activeTab, setActiveTab] = useState<'nodes' | 'assigned' | 'users' | 'mail' | 'ddos'>('nodes'); const [users, setUsers] = useState([]); const [assignedServers, setAssignedServers] = useState([]); const [userSearch, setUserSearch] = useState(''); const [maintenanceActive, setMaintenanceActive] = useState(false); const [maintenanceText, setMaintenanceText] = useState( 'Wartungsarbeiten: Wir führen derzeit planmäßige System-Optimierungen durch. Die Server-Steuerung ist in Kürze wieder verfügbar.' ); const [maintenanceSavedNotice, setMaintenanceSavedNotice] = useState(null); const [creditNotice, setCreditNotice] = useState(null); // Gmail SMTP Configuration State const [mailHost, setMailHost] = useState('smtp.gmail.com'); const [mailPort, setMailPort] = useState(587); const [mailUsername, setMailUsername] = useState(''); const [mailPassword, setMailPassword] = useState(''); const [mailFromName, setMailFromName] = useState('Rose Hosting'); const [mailFromAddress, setMailFromAddress] = useState('noreply@rose-hosting.de'); const [mailNotice, setMailNotice] = useState(null); const [isTestingMail, setIsTestingMail] = useState(false); // Customer Email Modal State const [isSendMailOpen, setIsSendMailOpen] = useState(false); const [sendMailTarget, setSendMailTarget] = useState<'single' | 'all'>('single'); const [selectedMailUser, setSelectedMailUser] = useState(null); const [mailSubject, setMailSubject] = useState('Wichtige Benachrichtigung von Rose Hosting'); const [mailBody, setMailBody] = useState(''); const [mailBtnText, setMailBtnText] = useState('Zum Dashboard'); const [mailBtnUrl, setMailBtnUrl] = useState(''); const [isSendingMail, setIsSendingMail] = useState(false); const [sendMailStatus, setSendMailStatus] = useState(null); // Modal state for Provisioning const [isProvisionOpen, setIsProvisionOpen] = useState(false); const [targetCustomer, setTargetCustomer] = useState(''); const [serverName, setServerName] = useState('High-Performance Instanz'); const [serverType, setServerType] = useState('Gameserver Pro'); const [targetNode, setTargetNode] = useState('FRA-EPYC-01'); const [cpuCores, setCpuCores] = useState(4); const [ramGb, setRamGb] = useState(8); const [storageGb, setStorageGb] = useState(100); const [isAdminGift, setIsAdminGift] = useState(true); // Fetch real users, servers, maintenance state, and mail settings on mount React.useEffect(() => { fetch('/api/admin/maintenance') .then((res) => res.json()) .then((data) => { if (data.success) { setMaintenanceActive(!!data.active); if (data.message) setMaintenanceText(data.message); } }) .catch(() => {}); // Fetch Gmail SMTP settings fetch('/api/admin/mail-settings') .then((res) => res.json()) .then((data) => { if (data.success && data.settings) { if (data.settings.host) setMailHost(data.settings.host); if (data.settings.port) setMailPort(data.settings.port); if (data.settings.username) setMailUsername(data.settings.username); if (data.settings.from_name) setMailFromName(data.settings.from_name); if (data.settings.from_address) setMailFromAddress(data.settings.from_address); } }) .catch(() => {}); // Fetch registered users fetch('/api/admin/users') .then((res) => res.json()) .then((data) => { if (data.success && Array.isArray(data.users)) { setUsers(data.users); if (data.users.length > 0) { setTargetCustomer(data.users[0].id); } } }) .catch(() => {}); // Fetch real servers fetch('/api/minecraft/list') .then((res) => res.json()) .then((data) => { if (data.success && Array.isArray(data.servers)) { setAssignedServers(data.servers); } }) .catch(() => {}); }, []); const handleSaveMaintenance = async (newActiveState?: boolean) => { const nextActive = newActiveState !== undefined ? newActiveState : maintenanceActive; try { const res = await fetch('/api/admin/maintenance', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '', }, body: JSON.stringify({ active: nextActive, message: maintenanceText }), }); const data = await res.json(); if (data.success) { setMaintenanceActive(data.active); setMaintenanceSavedNotice('✓ Wartungsmodus Einstellungen erfolgreich gespeichert!'); setTimeout(() => setMaintenanceSavedNotice(null), 3000); } } catch (e) {} }; const handleGrantCredit = (userId: string, amount: number) => { setUsers((prev) => prev.map((u) => { if (u.id !== userId) return u; const currentVal = parseFloat(u.credit.replace('.', '').replace(',', '.').replace(' €', '')); const newVal = (currentVal + amount).toFixed(2).replace('.', ','); return { ...u, credit: `${newVal} €` }; }) ); setCreditNotice(`✓ €${amount},00 Guthaben an ${userId} vergeben!`); setTimeout(() => setCreditNotice(null), 3000); }; const handleSaveMailSettings = async () => { try { const res = await fetch('/api/admin/mail-settings', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '', }, body: JSON.stringify({ host: mailHost, port: mailPort, username: mailUsername, password: mailPassword, from_name: mailFromName, from_address: mailFromAddress, }), }); const data = await res.json(); if (data.success) { setMailNotice('✓ Gmail SMTP E-Mail Einstellungen erfolgreich gespeichert!'); setTimeout(() => setMailNotice(null), 4000); } } catch (e) {} }; const handleSendTestMail = async () => { setIsTestingMail(true); try { const res = await fetch('/api/admin/test-email', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '', }, body: JSON.stringify({ email: mailUsername }), }); const data = await res.json(); if (res.ok && data.success) { setMailNotice(data.message); setTimeout(() => setMailNotice(null), 5000); } else { setMailNotice(`❌ ${data.message || 'Fehler beim Senden der Test-Mail.'}`); } } catch (e: any) { setMailNotice(`❌ Fehler: ${e?.message || 'Verbindung zum Server fehlgeschlagen.'}`); } finally { setIsTestingMail(false); } }; const handleOpenMailModalForUser = (user: any) => { setSelectedMailUser(user); setSendMailTarget('single'); setMailSubject(`Wichtige Information zu deinem Rose Hosting Account (${user.id})`); setMailBody(`Hallo ${user.name},\n\nwir möchten dich über folgenden Status informieren:\n\nDein Server läuft derzeit stabil auf unserer High-Performance EPYC Cloud.`); setIsSendMailOpen(true); setSendMailStatus(null); }; const handleOpenMailModalForAll = () => { setSelectedMailUser(null); setSendMailTarget('all'); setMailSubject('📢 System-Ankündigung: Rose Hosting Cloud Update'); setMailBody("Sehr geehrte Kunden,\n\nwir führen in Kürze eine planmäßige Optimierung an unserem Netzwerk durch. Alle Server bleiben währenddessen zu 100% erreichbar."); setIsSendMailOpen(true); setSendMailStatus(null); }; const handleSendCustomMailSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsSendingMail(true); setSendMailStatus(null); try { const res = await fetch('/api/admin/send-email', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '', }, body: JSON.stringify({ target: sendMailTarget, user_email: selectedMailUser?.email || '', user_name: selectedMailUser?.name || 'Kunde', subject: mailSubject, body: mailBody, button_text: mailBtnText, button_url: mailBtnUrl, }), }); const data = await res.json(); if (res.ok && data.success) { setSendMailStatus(data.message); setTimeout(() => { setIsSendMailOpen(false); setSendMailStatus(null); }, 2500); } else { setSendMailStatus(`❌ ${data.message || 'Fehler beim Senden der E-Mail.'}`); } } catch (e: any) { setSendMailStatus(`❌ Fehler: ${e?.message || 'Verbindung zum SMTP E-Mail Server fehlgeschlagen.'}`); } finally { setIsSendingMail(false); } }; const [mcVersion, setMcVersion] = useState('26.2'); const [availableVersions, setAvailableVersions] = useState([ '26.2', '26.1', '26.0', '1.21.4', '1.21.3', '1.21.1', '1.21', '1.20.6', '1.20.4', '1.20.1', '1.19.4', '1.18.2', '1.16.5', '1.12.2', '1.8.8' ]); React.useEffect(() => { fetch('/api/minecraft/paper-versions') .then((res) => res.json()) .then((data) => { if (data.success && Array.isArray(data.versions)) { setAvailableVersions(data.versions); } }) .catch(() => {}); }, []); const handleProvisionServer = async (e: React.FormEvent) => { e.preventDefault(); const selectedUser = users.find((u) => u.id === targetCustomer) || users[0]; try { const res = await fetch('/api/minecraft/create', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '', }, body: JSON.stringify({ name: serverName, version: mcVersion, ram: ramGb, customer_name: selectedUser ? selectedUser.name : 'Kunde', customer_id: selectedUser ? selectedUser.id : '#1001', }), }); const data = await res.json(); if (data.success && data.server) { setAssignedServers((prev) => [data.server, ...prev]); setIsProvisionOpen(false); setActiveTab('assigned'); setCreditNotice(`✓ ECHTER Minecraft Server "${data.server.name}" wurde auf IP ${data.server.ip} gestartet! Du kannst jetzt in Minecraft joinen!`); setTimeout(() => setCreditNotice(null), 8000); return; } } catch (err) { console.error('API Error:', err); } // Fallback if backend API is offline const randomIp = `${window.location.hostname || '185.220.101.44'}:25565`; const newServer: AssignedServer = { id: `srv-${Math.floor(Math.random() * 900) + 100}`, name: serverName, customerName: selectedUser.name, customerId: selectedUser.id, type: serverType, node: targetNode, ip: randomIp, cpu: cpuCores, ram: ramGb, storage: storageGb, status: 'online', monthlyPrice: isAdminGift ? '0,00 (Admin Sponsoring)' : '14,90', }; setAssignedServers((prev) => [newServer, ...prev]); setIsProvisionOpen(false); setActiveTab('assigned'); setCreditNotice(`✓ Server "${serverName}" (IP: ${newServer.ip}) wurde erfolgreich an Kunde ${selectedUser.name} (${selectedUser.id}) vergeben!`); setTimeout(() => setCreditNotice(null), 4000); }; const handleToggleServerPower = async (id: string) => { const srv = assignedServers.find((s) => s.id === id); const nextAction = srv?.status === 'online' ? 'stop' : 'start'; try { await fetch('/api/minecraft/power', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '', }, body: JSON.stringify({ id, action: nextAction }), }); } catch (e) {} setAssignedServers((prev) => prev.map((s) => { if (s.id !== id) return s; return { ...s, status: s.status === 'online' ? 'offline' : 'online' }; }) ); }; const handleDeleteServer = (id: string) => { setAssignedServers((prev) => prev.filter((srv) => srv.id !== id)); }; return ( <>
{/* Left Sidebar */} {/* Main Admin Area */}
{/* Top Admin Header Bar */}
đź‘‘ Superadmin Area Server Provisioning Control Center
{/* Admin Body Container */}
{/* Title Section */}

System & Instanzen Zuweisung

Verwalte physische Hardware-Nodes, vergebe Server manuell an Kunden und steuere den globalen Wartungsmodus.

{/* WARTUNGSARBEITEN CONTROL CARD */}

Wartungsarbeiten & System-AnkĂĽndigung

Schalte den Wartungsmodus global ein/aus und passe den AnkĂĽndigungstext fĂĽr alle Kunden an.

{/* Text input area */}
setMaintenanceText(e.target.value)} placeholder="z. B. Wartungsarbeiten: CPU Upgrade am Server Node FRA-01 bis 21:00..." className="flex-1 bg-[#050203] border border-[#260e13] rounded-xl px-4 py-2.5 text-xs font-mono text-white outline-none focus:border-red-500 shadow-inner" />
{maintenanceSavedNotice && (
{maintenanceSavedNotice}
)}
{/* Top Notification Banner */} {creditNotice && (
{creditNotice}
)} {/* 4 Financial & Hardware Stat Cards */}
MONATLICHER UMSATZ (MRR)
€18.420,00
+14.2% diesen Monat
GESTELLTE SERVER
{assignedServers.length} Instanzen
Cluster Auslastung 38%
KUNDEN ACCOUNTS
{users.length} Benutzer
100% Verifiziert
VOXILITY DDOS SCHUTZ
2.4 Tbps
0 Aktive Angriffe
{/* Admin Sub-Tabs */}
{/* TAB 1: PHYSICAL NODES */} {activeTab === 'nodes' && (

Bare Metal Dedicated Cluster Nodes

{NODES.map((node) => { const cpuPct = Math.round((node.usedCores / node.totalCores) * 100); const ramPct = Math.round((node.usedRam / node.totalRam) * 100); return (
{node.flag}

{node.name}

{node.cpuModel} • {node.location}

OPERATIONAL
CPU Load (EPYC Cores) {node.usedCores} / {node.totalCores} Cores ({cpuPct}%)
RAM Belegung (DDR5 ECC) {node.usedRam} GB / {node.totalRam} GB ({ramPct}%)
); })}
)} {/* TAB 2: ASSIGNED CUSTOMER SERVERS */} {activeTab === 'assigned' && (

Alle vergebenen Server-Instanzen ({assignedServers.length})

{assignedServers.map((srv) => ( ))}
Server Name Zugewiesener Kunde Typ & Node IP Adresse Specs Status Admin Aktion
{srv.name} {srv.customerName}{' '} ({srv.customerId}) {srv.type}
{srv.node} 		{srv.ip} {srv.cpu} Cores / {srv.ram} GB RAM / {srv.storage} GB NVMe {srv.status}
)} {/* TAB 3: USERS & CREDIT MANAGEMENT */} {activeTab === 'users' && (

Kunden- & Guthabenverwaltung ({users.length})

setUserSearch(e.target.value)} placeholder="Benutzer suchen..." className="w-full bg-[#050203] border border-[#36131b] rounded-xl pl-9 pr-3 py-2 text-xs text-white outline-none focus:border-red-500 shadow-inner" />
{users .filter((u) => u.name.toLowerCase().includes(userSearch.toLowerCase()) || u.email.toLowerCase().includes(userSearch.toLowerCase())) .map((u) => ( ))}
Kunden-ID Name E-Mail Guthaben Stand Rolle Aktionen & Guthaben
{u.id} {u.name} {u.email} {u.credit} {u.role}
)} {/* TAB 4: GMAIL SMTP MAILSERVER SETTINGS */} {activeTab === 'mail' && (

Gmail SMTP E-Mail Server Konfiguration

Konfiguriere deinen Gmail SMTP Server fĂĽr automatische Willkommens-Mails und Direkt-Mails an Kunden.

{mailNotice && (
{mailNotice}
)}
setMailHost(e.target.value)} placeholder="smtp.gmail.com" className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3.5 py-2.5 text-xs text-white outline-none focus:border-red-500 font-mono" />
setMailPort(parseInt(e.target.value) || 587)} placeholder="587" className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3.5 py-2.5 text-xs text-white outline-none focus:border-red-500 font-mono" />
setMailUsername(e.target.value)} placeholder="dein-name@gmail.com" className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3.5 py-2.5 text-xs text-white outline-none focus:border-red-500 font-mono" />
setMailPassword(e.target.value)} placeholder="•••• •••• •••• ••••" className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3.5 py-2.5 text-xs text-white outline-none focus:border-red-500 font-mono" />
setMailFromName(e.target.value)} placeholder="Rose Hosting Support" className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3.5 py-2.5 text-xs text-white outline-none focus:border-red-500" />
setMailFromAddress(e.target.value)} placeholder="noreply@rose-hosting.de" className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3.5 py-2.5 text-xs text-white outline-none focus:border-red-500 font-mono" />
{/* Gmail Setup Help Guide Card */}

Anleitung: Gmail App-Passwort einrichten

  1. Melde dich in deinem Google-Konto an und gehe zu Sicherheit.
  2. Aktiviere die 2-Stufen-Verifizierung (falls noch nicht aktiv).
  3. Suche nach "App-Passwörter" (App Passwords) und erstelle ein neues Passwort für "Rose Hosting Server".
  4. Kopiere das 16-stellige Passwort und fĂĽge es oben im Feld Gmail App-Passwort ein.
)} {/* TAB 4: DDOS INCIDENT LOG */} {activeTab === 'ddos' && (

Voxility 2.4 Tbps Anti-DDoS Mitigation Logs

12:14:02 ATTACK MITIGATED SYN Flood (4.2 Gbps) target 185.220.101.44 -> Filtered in 800ms (0 packets lost)
11:42:19 ATTACK MITIGATED UDP Amplification (12.8 Gbps) target 185.220.102.15 -> Filtered in 450ms (0 packets lost)
)}
{/* ADMIN PROVISIONING MODAL */} {isProvisionOpen && (

Server an Kunden vergeben

{/* Target Customer Dropdown */}
{/* Server Name */}
setServerName(e.target.value)} required placeholder="z. B. Minecraft Community Server" className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3 py-2 text-xs text-white outline-none focus:border-red-500 font-medium" />
{/* Server Type & Target Node */}
{/* Specs Config */}
setCpuCores(parseInt(e.target.value) || 1)} className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3 py-2 text-xs text-rose-400 font-bold" />
setRamGb(parseInt(e.target.value) || 1)} className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3 py-2 text-xs text-red-400 font-bold" />
setStorageGb(parseInt(e.target.value) || 10)} className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3 py-2 text-xs text-rose-300 font-bold" />
{/* Admin Gift Checkbox */}
setIsAdminGift(e.target.checked)} className="h-4 w-4 rounded accent-red-600" />
)} {/* CUSTOMER EMAIL SENDING MODAL */} {isSendMailOpen && (

{sendMailTarget === 'all' ? '📢 E-Mail an ALLE registrierten Kunden senden' : `📧 E-Mail an ${selectedMailUser?.name} (${selectedMailUser?.email})`}

{sendMailStatus && (
{sendMailStatus}
)}
setMailSubject(e.target.value)} required placeholder="z. B. Wichtiger Hinweis zu deinem Server..." className="w-full bg-[#050203] border border-[#36131b] rounded-xl px-3.5 py-2.5 text-xs text-white outline-none focus:border-red-500 font-medium" />