"use client"; function getBjorkTablePalette(isDark: boolean) { return { container: isDark ? "border-[#232323] bg-[#111]" : "border-[#ded7ca] bg-[#eee9df]", header: isDark ? "border-[#232323] bg-[#181818] text-[#ededed]/42" : "border-[#ded7ca] bg-[#e5ded1] text-[#171717]/46", row: isDark ? "border-[#232323] hover:bg-[#181818]/70" : "border-[#ded7ca] hover:bg-[#e7e1d5]/70", selectedRow: isDark ? "border-[#2a2a2a] bg-[#181818]" : "border-[#d6cdbc] bg-[#e7e1d5]", control: isDark ? "border-[#232323] bg-[#181818] text-[#ededed]/70 hover:bg-[#202020]" : "border-[#d8d3c7] bg-[#eee9df] text-[#171717]/68 hover:bg-[#e4ded3]", menu: isDark ? "border-[#232323] bg-[#181818] text-[#ededed]/76 shadow-[0_18px_60px_rgba(0,0,0,0.42)]" : "border-[#d8d3c7] bg-[#eee9df] text-[#171717]/76 shadow-[0_18px_60px_rgba(62,52,38,0.14)]", menuItem: isDark ? "hover:bg-[#232323]" : "hover:bg-[#e4ded3]", menuActive: isDark ? "bg-[#232323]" : "bg-[#e4ded3]", divider: isDark ? "border-[#232323]" : "border-[#d8d3c7]", primaryText: isDark ? "text-[#ededed]/90" : "text-[#171717]/86", secondaryText: isDark ? "text-[#ededed]/38" : "text-[#171717]/46", mutedSurface: isDark ? "bg-[#181818]" : "bg-[#e7e1d5]", popover: isDark ? "bg-[#111] text-[#ededed]" : "bg-[#eee9df] text-[#171717]", accent: isDark ? "text-[#d86a2c]" : "text-[#bd4514]", accentBg: isDark ? "bg-[#ec5c13]/12" : "bg-[#ec5c13]/14", accentBorder: isDark ? "border-[#ec5c13]/24" : "border-[#bd4514]/22", checkboxAccent: isDark ? "#d86a2c" : "#bd4514", }; } function getBjorkSignalPalette( tone: "green" | "red" | "orange" | "neutral", isDark: boolean ) { const palettes = { green: { bgColor: isDark ? "bg-[#3e6f52]/18" : "bg-[#dce8dc]", borderColor: isDark ? "border-[#5f9f78]/28" : "border-[#bad0bd]", textColor: isDark ? "text-[#77b58b]" : "text-[#47785c]", dotColor: isDark ? "bg-[#77b58b]" : "bg-[#47785c]", color: isDark ? "#77b58b" : "#47785c", }, red: { bgColor: isDark ? "bg-[#87463f]/18" : "bg-[#eadad5]", borderColor: isDark ? "border-[#c46a61]/28" : "border-[#d7bcb4]", textColor: isDark ? "text-[#cf7c72]" : "text-[#9d5149]", dotColor: isDark ? "bg-[#cf7c72]" : "bg-[#9d5149]", color: isDark ? "#cf7c72" : "#9d5149", }, orange: { bgColor: isDark ? "bg-[#ec5c13]/14" : "bg-[#ead9cb]", borderColor: isDark ? "border-[#ec5c13]/28" : "border-[#d5b59f]", textColor: isDark ? "text-[#d86a2c]" : "text-[#9f4317]", dotColor: isDark ? "bg-[#d86a2c]" : "bg-[#9f4317]", color: isDark ? "#d86a2c" : "#9f4317", }, neutral: { bgColor: isDark ? "bg-[#ededed]/8" : "bg-[#ded7ca]", borderColor: isDark ? "border-[#ededed]/14" : "border-[#cfc6b7]", textColor: isDark ? "text-[#ededed]/58" : "text-[#171717]/58", dotColor: isDark ? "bg-[#ededed]/45" : "bg-[#171717]/42", color: isDark ? "#a3a3a3" : "#706b62", }, } as const; return palettes[tone]; } import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { useTheme } from "next-themes"; import { X, Power, Pause, Play, RotateCcw } from "lucide-react"; export interface Server { id: string; number: string; serviceName: string; osType: "windows" | "linux" | "ubuntu"; serviceLocation: string; countryCode: "de" | "us" | "fr" | "jp"; ip: string; dueDate: string; cpuPercentage: number; status: "active" | "paused" | "inactive"; } interface ServerManagementTableProps { title?: string; servers?: Server[]; onStatusChange?: (serverId: string, newStatus: Server["status"]) => void; className?: string; } const defaultServers: Server[] = [ { id: "1", number: "01", serviceName: "VPS-2 (Windows)", osType: "windows", serviceLocation: "Frankfurt, Germany", countryCode: "de", ip: "198.51.100.211", dueDate: "14 Oct 2027", cpuPercentage: 80, status: "active" }, { id: "2", number: "02", serviceName: "VPS-1 (Windows)", osType: "windows", serviceLocation: "Frankfurt, Germany", countryCode: "de", ip: "203.0.113.158", dueDate: "14 Oct 2027", cpuPercentage: 90, status: "active" }, { id: "3", number: "03", serviceName: "VPS-1 (Ubuntu)", osType: "ubuntu", serviceLocation: "Paris, France", countryCode: "fr", ip: "192.0.2.37", dueDate: "27 Jun 2027", cpuPercentage: 50, status: "paused" }, { id: "4", number: "04", serviceName: "Cloud Server (Ubuntu)", osType: "ubuntu", serviceLocation: "California, US West", countryCode: "us", ip: "198.51.100.23", dueDate: "30 May 2030", cpuPercentage: 95, status: "active" }, { id: "5", number: "05", serviceName: "Dedicated Server (Windows)", osType: "windows", serviceLocation: "Virginia, US East", countryCode: "us", ip: "203.0.113.45", dueDate: "15 Dec 2026", cpuPercentage: 25, status: "inactive" } ]; export function ServerManagementTable({ title = "Active Services", servers: initialServers = defaultServers, onStatusChange, className = "" }: ServerManagementTableProps = {}) { const [servers, setServers] = useState(initialServers); const [selectedServer, setSelectedServer] = useState(null); const { resolvedTheme } = useTheme(); const isDark = resolvedTheme !== "light"; const palette = getBjorkTablePalette(isDark); const handleStatusChange = (serverId: string, newStatus: Server["status"]) => { if (onStatusChange) { onStatusChange(serverId, newStatus); } setServers(prev => prev.map(server => server.id === serverId ? { ...server, status: newStatus } : server )); }; const openServerModal = (server: Server) => { setSelectedServer(server); }; const closeServerModal = () => { setSelectedServer(null); }; // Update selected server when servers change (for real-time updates) useEffect(() => { if (selectedServer) { const updatedServer = servers.find(s => s.id === selectedServer.id); if (updatedServer) { setSelectedServer(updatedServer); } } }, [servers, selectedServer]); const getOSIcon = (osType: Server["osType"]) => { switch (osType) { case "windows": return (

); case "ubuntu": return (

); case "linux": return (

); } }; const getCountryFlag = (countryCode: Server["countryCode"]) => { switch (countryCode) { case "de": return ( ); case "us": return ( ); case "fr": return ( ); case "jp": return ( ); } }; const getCPUBars = (percentage: number, status: Server["status"]) => { const filledBars = Math.round((percentage / 100) * 10); const getBarColor = (index: number) => { if (index >= filledBars) { return isDark ? "border border-[#232323] bg-[#181818]" : "border border-[#d8d3c7] bg-[#ded7ca]"; } switch (status) { case "active": return "bg-[#d86a2c]"; case "paused": return isDark ? "bg-[#ededed]/38" : "bg-[#171717]/34"; case "inactive": return isDark ? "bg-[#ededed]/20" : "bg-[#171717]/18"; default: return "bg-foreground/60"; } }; return (

{Array.from({ length: 10 }).map((_, index) => (

))}

{percentage}%

); }; const getStatusBadge = (status: Server["status"]) => { const active = getBjorkSignalPalette("green", isDark); const paused = getBjorkSignalPalette("orange", isDark); const inactive = getBjorkSignalPalette("red", isDark); switch (status) { case "active": return (

Active

); case "paused": return (

Paused

); case "inactive": return (

Inactive

); } }; const getStatusGradient = (status: Server["status"]) => { switch (status) { case "active": return "from-[#77b58b]/10 to-transparent"; case "paused": return "from-[#ec5c13]/12 to-transparent"; case "inactive": return "from-[#cf7c72]/10 to-transparent"; } }; return (

{/* Header */}

{title}

{servers.filter(s => s.status === "active").length} active • {servers.filter(s => s.status === "paused").length} paused • {servers.filter(s => s.status === "inactive").length} inactive

{/* Table */}

{/* Headers */}

Service Name

Service Location

Due Date

CPU

Status

{/* Server Rows */} {servers.map((server) => ( openServerModal(server)} > {/* Status gradient overlay */}

{/* Grid Content */}

{/* Number */}

{server.number}

{/* Service Name */}

{getOSIcon(server.osType)} {server.serviceName}

{/* Service Location */}

{getCountryFlag(server.countryCode)}

{server.serviceLocation}

{/* IP */}

{server.ip}

{/* Due Date */}

{server.dueDate}

{/* CPU */}

{getCPUBars(server.cpuPercentage, server.status)}

{/* Status */}

{getStatusBadge(server.status)}

))}

{/* Server Management Overlay - Inside Card */} {selectedServer && ( {/* Header with Actions */}

{selectedServer.number}

{getOSIcon(selectedServer.osType)}

{selectedServer.serviceName}

{getCountryFlag(selectedServer.countryCode)}

{selectedServer.serviceLocation}

{/* Action Buttons in Header */}

{/* Start/Stop */} {selectedServer.status === "active" ? ( handleStatusChange(selectedServer.id, "inactive")} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} > Stop ) : ( handleStatusChange(selectedServer.id, "active")} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} > Start )} {/* Pause/Resume */} {selectedServer.status === "paused" ? ( handleStatusChange(selectedServer.id, "active")} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} > Resume ) : ( handleStatusChange(selectedServer.id, "paused")} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} > Pause )} {/* Restart */} { handleStatusChange(selectedServer.id, "inactive"); setTimeout(() => handleStatusChange(selectedServer.id, "active"), 1000); }} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} > Restart {/* Close Button */}

{/* Content */}

{/* Server Stats Grid */}

{/* IP Address */}

IP Address

{selectedServer.ip}

{/* Due Date */}

Due Date

{selectedServer.dueDate}

{/* Status */}

Status

{getStatusBadge(selectedServer.status)}

{/* CPU Usage */}

CPU Usage {getCPUBars(selectedServer.cpuPercentage, selectedServer.status)}

{/* Server Logs Preview */}

Recent Activity

[15:42:31] Server started successfully

[15:42:25] System health check passed

[15:41:18] CPU usage: {selectedServer.cpuPercentage}%

[15:40:05] Connection from {selectedServer.ip}

)}

); }