-
-
+
+
+
+
+
+ {trend && (
+
0 ? "bg-emerald-500/10 text-emerald-500" : "bg-destructive/10 text-destructive")}>
+ {trend > 0 ? '+' : ''}{trend}%
+
+ )}
-
-
{label}
-
-
{value}
-
{unit}
+
+
+ {label}
+
+ {value}
+ {unit}
-
-
+
+
);
+// ============================================================================
+// SERVER MANAGEMENT PAGE
+// ============================================================================
+
+interface DevServer {
+ id: string;
+ name: string;
+ description: string;
+ workerId: string;
+ storageId: string;
+ encryptedRcon: string; // E2EE blob
+ mockActive: boolean;
+ createdAt: string;
+}
+
+interface DevNode {
+ id: string;
+ name: string;
+ type: string;
+ status: string;
+}
+
+const apiHeaders = () => ({
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${localStorage.getItem('auth_token') ?? ''}`,
+});
+
+const EditServerDialog: React.FC<{
+ server: DevServer | null;
+ nodes: DevNode[];
+ open: boolean;
+ onOpenChange: (o: boolean) => void;
+ onSave: () => void;
+}> = ({ server, nodes, open, onOpenChange, onSave }) => {
+ const { encrypt, decrypt } = useVault();
+ const [loading, setLoading] = useState(false);
+ const [formData, setFormData] = useState({
+ name: '',
+ description: '',
+ workerId: '',
+ storageId: '',
+ rconAddress: '',
+ rconPort: 2302,
+ rconPass: '',
+ });
+
+ useEffect(() => {
+ const loadEncryptedData = async () => {
+ if (server) {
+ let rconDetails = { address: '', port: 2302, pass: '' };
+
+ if (server.encryptedRcon) {
+ try {
+ const decrypted = await decrypt(base64ToUint8Array(server.encryptedRcon));
+ rconDetails = JSON.parse(decrypted);
+ } catch (e) {
+ console.error('Failed to decrypt RCON credentials', e);
+ }
+ }
+
+ setFormData({
+ name: server.name,
+ description: server.description || '',
+ workerId: server.workerId || '',
+ storageId: server.storageId || '',
+ rconAddress: rconDetails.address || '',
+ rconPort: rconDetails.port || 2302,
+ rconPass: '', // Keep pass hidden
+ });
+ }
+ };
+
+ if (open) loadEncryptedData();
+ }, [server, open, decrypt]);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!server) return;
+ setLoading(true);
+ try {
+ // 1. Bundle RCON details
+ const rconData = JSON.stringify({
+ address: formData.rconAddress,
+ port: formData.rconPort,
+ pass: formData.rconPass || '',
+ });
+
+ // 2. Encrypt with Community Master Key (E2EE)
+ const encrypted = await encrypt(rconData);
+ const encryptedBlob = uint8ArrayToBase64(encrypted);
+
+ // 3. Transmit to backend
+ const res = await fetch('/api/servers', {
+ method: 'PUT',
+ headers: apiHeaders(),
+ body: JSON.stringify({
+ id: server.id,
+ name: formData.name,
+ description: formData.description,
+ workerId: formData.workerId,
+ storageId: formData.storageId,
+ encryptedRcon: encryptedBlob
+ }),
+ });
+ if (!res.ok) throw new Error('Update failed');
+ onSave();
+ onOpenChange(false);
+ } catch (err) {
+ console.error(err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const workers = nodes.filter(n => n.type === 'worker');
+ const storages = nodes.filter(n => n.type === 'storage');
+
+ return (
+
+ );
+};
+
+const ServersPage: React.FC = () => {
+ const { encrypt } = useVault();
+ const [servers, setServers] = useState
([]);
+ const [nodes, setNodes] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [newName, setNewName] = useState('');
+ const [newDesc, setNewDesc] = useState('');
+ const [newWorkerId, setNewWorkerId] = useState('');
+ const [newStorageId, setNewStorageId] = useState('');
+ const [newRconAddr, setNewRconAddr] = useState('');
+ const [newRconPort, setNewRconPort] = useState(2302);
+ const [newRconPass, setNewRconPass] = useState('');
+ const [adding, setAdding] = useState(false);
+ const [addError, setAddError] = useState(null);
+ const [showForm, setShowForm] = useState(false);
+
+ // Edit/Migrate State
+ const [editServer, setEditServer] = useState(null);
+ const [editOpen, setEditOpen] = useState(false);
+
+ const fetchServers = async () => {
+ try {
+ const res = await fetch('/api/servers', { headers: apiHeaders() });
+ const data = await res.json();
+ setServers(data.servers ?? []);
+ } catch {
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const fetchNodes = async () => {
+ try {
+ const res = await fetch('/api/nodes', { headers: apiHeaders() });
+ const data = await res.json();
+ setNodes(data.nodes ?? []);
+ } catch {}
+ };
+
+ useEffect(() => {
+ fetchServers();
+ fetchNodes();
+ }, []);
+
+ const handleAdd = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setAddError(null);
+ setAdding(true);
+ try {
+ // 1. Encrypt RCON data for provisioning
+ const rconData = JSON.stringify({
+ address: newRconAddr,
+ port: newRconPort,
+ pass: newRconPass,
+ });
+ const encrypted = await encrypt(rconData);
+ const encryptedBlob = uint8ArrayToBase64(encrypted);
+
+ const res = await fetch('/api/servers', {
+ method: 'POST',
+ headers: apiHeaders(),
+ body: JSON.stringify({
+ name: newName,
+ description: newDesc,
+ workerId: newWorkerId,
+ storageId: newStorageId,
+ encryptedRcon: encryptedBlob,
+ }),
+ });
+ const data = await res.json();
+ if (!res.ok) throw new Error(data.error ?? 'Failed to add server');
+ setServers(prev => [...prev, data]);
+ setNewName('');
+ setNewDesc('');
+ setNewWorkerId('');
+ setNewStorageId('');
+ setNewRconAddr('');
+ setNewRconPort(2302);
+ setNewRconPass('');
+ setShowForm(false);
+ } catch (err) {
+ setAddError((err as Error).message);
+ } finally {
+ setAdding(false);
+ }
+ };
+
+ const handleDelete = async (id: string) => {
+ try {
+ await fetch(`/api/servers?id=${id}`, { method: 'DELETE', headers: apiHeaders() });
+ setServers(prev => prev.filter(s => s.id !== id));
+ } catch {}
+ };
+
+ const workers = nodes.filter(n => n.type === 'worker');
+ const storages = nodes.filter(n => n.type === 'storage');
+
+ return (
+
+
+
+
Operational Fleet
+
Deploy and orchestrate distributed game nodes
+
+
+
+
+ {showForm && (
+
+
+
+ Provision New Node
+ Initialize operational parameters and node assignment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initial RCON Protocol Security (E2EE)
+
+
+
+
+
+
+
+
+ )}
+
+ {loading ? (
+
+
+
Synchronizing Fleet Ingress...
+
+ ) : servers.length === 0 ? (
+
+
+
+
+
+
No Active Node Assets
+
+ Deployment queue empty. Initialize your first node asset to begin monitoring.
+
+
+ ) : (
+
+ {servers.map(server => (
+
+
+
+
+
+
+
+
+
+
+
+ {server.name}
+ {server.description && (
+ {server.description}
+ )}
+
+
+
+
Worker Node
+
+
+
{nodes.find(n => n.id === server.workerId)?.name || 'UNASSIGNED'}
+
+
+
+
Storage Cluster
+
+
+
{nodes.find(n => n.id === server.storageId)?.name || 'UNASSIGNED'}
+
+
+
+
+ {server.mockActive ? (
+
+
+ OPERATIONAL
+
+ ) : (
+
+ OFFLINE
+
+ )}
+
+
+
+ ))}
+
+ )}
+
+
+
- {/* Sidebar */}
-