"use client"; import { useState, useEffect } from "react"; import { motion, AnimatePresence, useReducedMotion } 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 [hoveredServer, setHoveredServer] = useState(null); const [selectedServer, setSelectedServer] = useState(null); const shouldReduceMotion = useReducedMotion(); const { theme } = useTheme(); const isDark = theme === "dark"; 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 "bg-muted/40 border border-border/30"; } switch (status) { case "active": return "bg-foreground/60"; case "paused": return "bg-muted-foreground/50"; case "inactive": return "bg-muted-foreground/30"; default: return "bg-foreground/60"; } }; return (

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

))}

{percentage}%

); }; const getStatusBadge = (status: Server["status"]) => { 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-green-500/10 to-transparent"; case "paused": return "from-yellow-500/10 to-transparent"; case "inactive": return "from-red-500/10 to-transparent"; } }; return (

{/* Header */}

{title}

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

{/* Table */} {/* Headers */}

Service Name

Service Location

Due Date

CPU

Status

{/* Server Rows */} {servers.map((server) => ( setHoveredServer(server.id)} onMouseLeave={() => setHoveredServer(null)} onClick={() => 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}

)}

); }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Server Management Table

Created by

Installation

How to use

Dependencies

Server Management Table

Created by

Installation

How to use

Dependencies