diff --git a/AppImage/components/hardware.tsx b/AppImage/components/hardware.tsx index 0400c4c..f60b25b 100644 --- a/AppImage/components/hardware.tsx +++ b/AppImage/components/hardware.tsx @@ -1,22 +1,948 @@ -// Declare the variables before using them -const v0 = "some value" -const no = "some value" -const op = "some value" -const code = "some value" -const block = "some value" -const prefix = "some value" +"use client" -// Existing code block -function HardwareComponent() { - // Use the declared variables here - console.log(v0, no, op, code, block, prefix) +import { Card } from "@/components/ui/card" +import { Badge } from "@/components/ui/badge" +import { Progress } from "@/components/ui/progress" +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" +import { + Thermometer, + CpuIcon, + Zap, + HardDrive, + Network, + FanIcon, + PowerIcon, + Battery, + Cpu, + MemoryStick, + Cpu as Gpu, + Info, +} from "lucide-react" +import useSWR from "swr" +import { useState } from "react" +import { type HardwareData, type GPU, type PCIDevice, type StorageDevice, fetcher } from "../types/hardware" + +const getDeviceTypeColor = (type: string): string => { + const lowerType = type.toLowerCase() + if (lowerType.includes("storage") || lowerType.includes("sata") || lowerType.includes("raid")) { + return "bg-orange-500/10 text-orange-500 border-orange-500/20" + } + if (lowerType.includes("usb")) { + return "bg-purple-500/10 text-purple-500 border-purple-500/20" + } + if (lowerType.includes("network") || lowerType.includes("ethernet")) { + return "bg-blue-500/10 text-blue-500 border-blue-500/20" + } + if (lowerType.includes("graphics") || lowerType.includes("vga") || lowerType.includes("display")) { + return "bg-green-500/10 text-green-500 border-green-500/20" + } + return "bg-gray-500/10 text-gray-500 border-gray-500/20" +} + +export default function Hardware() { + const { data: hardwareData, error } = useSWR("/api/hardware", fetcher, { + refreshInterval: 5000, + }) + + const [selectedGPU, setSelectedGPU] = useState(null) + const [selectedPCIDevice, setSelectedPCIDevice] = useState(null) + const [selectedDisk, setSelectedDisk] = useState(null) + const [selectedNetwork, setSelectedNetwork] = useState(null) return ( -
- {/* Render hardware components here */} -

Hardware Component

+
+ {/* System Information - CPU & Motherboard */} + {(hardwareData?.cpu || hardwareData?.motherboard) && ( + +
+ +

System Information

+
+ +
+ {/* CPU Info */} + {hardwareData?.cpu && Object.keys(hardwareData.cpu).length > 0 && ( +
+
+ +

CPU

+
+
+ {hardwareData.cpu.model && ( +
+ Model + {hardwareData.cpu.model} +
+ )} + {hardwareData.cpu.cores_per_socket && hardwareData.cpu.sockets && ( +
+ Cores + + {hardwareData.cpu.sockets} × {hardwareData.cpu.cores_per_socket} ={" "} + {hardwareData.cpu.sockets * hardwareData.cpu.cores_per_socket} cores + +
+ )} + {hardwareData.cpu.total_threads && ( +
+ Threads + {hardwareData.cpu.total_threads} +
+ )} + {hardwareData.cpu.l3_cache && ( +
+ L3 Cache + {hardwareData.cpu.l3_cache} +
+ )} + {hardwareData.cpu.virtualization && ( +
+ Virtualization + {hardwareData.cpu.virtualization} +
+ )} +
+
+ )} + + {/* Motherboard Info */} + {hardwareData?.motherboard && Object.keys(hardwareData.motherboard).length > 0 && ( +
+
+ +

Motherboard

+
+
+ {hardwareData.motherboard.manufacturer && ( +
+ Manufacturer + {hardwareData.motherboard.manufacturer} +
+ )} + {hardwareData.motherboard.model && ( +
+ Model + {hardwareData.motherboard.model} +
+ )} + {hardwareData.motherboard.bios?.vendor && ( +
+ BIOS + {hardwareData.motherboard.bios.vendor} +
+ )} + {hardwareData.motherboard.bios?.version && ( +
+ Version + {hardwareData.motherboard.bios.version} +
+ )} + {hardwareData.motherboard.bios?.date && ( +
+ Date + {hardwareData.motherboard.bios.date} +
+ )} +
+
+ )} +
+ + )} + + {/* Memory Modules */} + {hardwareData?.memory_modules && hardwareData.memory_modules.length > 0 && ( + +
+ +

Memory Modules

+ + {hardwareData.memory_modules.length} installed + +
+ +
+ {hardwareData.memory_modules.map((module, index) => ( +
+
{module.slot}
+
+ {module.size && ( +
+ Size + {module.size} +
+ )} + {module.type && ( +
+ Type + {module.type} +
+ )} + {module.speed && ( +
+ Speed + {module.speed} +
+ )} + {module.manufacturer && ( +
+ Manufacturer + {module.manufacturer} +
+ )} +
+
+ ))} +
+ + )} + + {/* Thermal Monitoring */} + {hardwareData?.temperatures && hardwareData.temperatures.length > 0 && ( + +
+ +

Thermal Monitoring

+ + {hardwareData.temperatures.length} sensors + +
+ +
+ {hardwareData.temperatures.map((temp, index) => { + const percentage = temp.critical > 0 ? (temp.current / temp.critical) * 100 : (temp.current / 100) * 100 + const isHot = temp.current > (temp.high || 80) + const isCritical = temp.current > (temp.critical || 90) + + return ( +
+
+ {temp.name} + + {temp.current.toFixed(1)}°C + +
+
+
+
+ {temp.adapter && {temp.adapter}} +
+ ) + })} +
+ + )} + + {/* GPU Information - Enhanced with modal */} + {hardwareData?.gpus && hardwareData.gpus.length > 0 && ( + +
+ +

Graphics Cards

+ + {hardwareData.gpus.length} GPU{hardwareData.gpus.length > 1 ? "s" : ""} + +
+ +
+ {hardwareData.gpus.map((gpu, index) => ( +
setSelectedGPU(gpu)} + className="cursor-pointer rounded-lg border border-border/30 bg-background/50 p-4 transition-colors hover:bg-background/80" + > +
+ {gpu.name} + {gpu.vendor} +
+ +
+
+ Type + {gpu.type} +
+ + {gpu.driver_version && ( +
+ Driver + {gpu.driver_version} +
+ )} + + {gpu.temperature !== undefined && gpu.temperature > 0 && ( +
+
+ Temperature + {gpu.temperature}°C +
+
+
+
+
+ )} + + {gpu.memory_total && ( +
+ Memory + + {gpu.memory_used} / {gpu.memory_total} + +
+ )} + + {gpu.utilization_gpu !== undefined && ( +
+
+ GPU Usage + {gpu.utilization_gpu}% +
+
+
+
+
+ )} + + {gpu.power_draw && gpu.power_draw !== "N/A" && ( +
+ Power + {gpu.power_draw} +
+ )} +
+ +
+ + Click for detailed information +
+
+ ))} +
+ + )} + + {/* GPU Detail Modal */} + setSelectedGPU(null)}> + + + {selectedGPU?.name} + Detailed GPU Information + + + {selectedGPU && ( +
+ {/* Basic Info */} +
+

Basic Information

+
+
+ Vendor + {selectedGPU.vendor} +
+
+ Type + {selectedGPU.type} +
+
+ PCI Slot + {selectedGPU.slot} +
+ {selectedGPU.driver_version && ( +
+ Driver Version + {selectedGPU.driver_version} +
+ )} + {selectedGPU.pcie_gen && ( +
+ PCIe Generation + Gen {selectedGPU.pcie_gen} +
+ )} + {selectedGPU.pcie_width && ( +
+ PCIe Width + {selectedGPU.pcie_width} +
+ )} +
+
+ + {/* Memory Info */} + {selectedGPU.memory_total && ( +
+

Memory

+
+
+ Total + {selectedGPU.memory_total} +
+
+ Used + {selectedGPU.memory_used} +
+
+ Free + {selectedGPU.memory_free} +
+ {selectedGPU.utilization_memory !== undefined && ( +
+
+ Memory Utilization + {selectedGPU.utilization_memory}% +
+ +
+ )} +
+
+ )} + + {/* Performance */} +
+

Performance

+
+ {selectedGPU.temperature !== undefined && selectedGPU.temperature > 0 && ( +
+
+ Temperature + {selectedGPU.temperature}°C +
+ +
+ )} + {selectedGPU.utilization_gpu !== undefined && ( +
+
+ GPU Utilization + {selectedGPU.utilization_gpu}% +
+ +
+ )} + {selectedGPU.power_draw && selectedGPU.power_draw !== "N/A" && ( +
+ Power Draw + {selectedGPU.power_draw} +
+ )} + {selectedGPU.power_limit && ( +
+ Power Limit + {selectedGPU.power_limit} +
+ )} + {selectedGPU.fan_speed && ( +
+ Fan Speed + + {selectedGPU.fan_speed} {selectedGPU.fan_unit} + +
+ )} +
+
+ + {/* Clock Speeds */} + {(selectedGPU.clock_graphics || selectedGPU.clock_memory) && ( +
+

Clock Speeds

+
+ {selectedGPU.clock_graphics && ( +
+ Graphics Clock + {selectedGPU.clock_graphics} +
+ )} + {selectedGPU.clock_memory && ( +
+ Memory Clock + {selectedGPU.clock_memory} +
+ )} +
+
+ )} + + {/* Running Processes */} + {selectedGPU.processes && selectedGPU.processes.length > 0 && ( +
+

Running Processes

+
+ {selectedGPU.processes.map((proc, idx) => ( +
+
+ PID: {proc.pid} + {proc.memory} +
+

{proc.name}

+
+ ))} +
+
+ )} + + {selectedGPU.note && ( +
+

{selectedGPU.note}

+
+ )} +
+ )} + + + + {/* PCI Devices - Changed to modal */} + {hardwareData?.pci_devices && hardwareData.pci_devices.length > 0 && ( + +
+ +

PCI Devices

+ + {hardwareData.pci_devices.length} devices + +
+ +
+ {hardwareData.pci_devices.map((device, index) => ( +
setSelectedPCIDevice(device)} + className="cursor-pointer rounded-lg border border-border/30 bg-background/50 p-3 transition-colors hover:bg-background/80" + > +
+ {device.type} + {device.slot} +
+

{device.device}

+

{device.vendor}

+ {device.driver &&

Driver: {device.driver}

} +
+ ))} +
+ + )} + + {/* PCI Device Detail Modal */} + setSelectedPCIDevice(null)}> + + + {selectedPCIDevice?.device} + PCI Device Information + + + {selectedPCIDevice && ( +
+
+ Device Type + {selectedPCIDevice.type} +
+ +
+ PCI Slot + {selectedPCIDevice.slot} +
+ +
+ Device Name + {selectedPCIDevice.device} +
+ +
+ Vendor + {selectedPCIDevice.vendor} +
+ +
+ Class + {selectedPCIDevice.class} +
+ + {selectedPCIDevice.driver && ( +
+ Driver + {selectedPCIDevice.driver} +
+ )} + + {selectedPCIDevice.kernel_module && ( +
+ Kernel Module + {selectedPCIDevice.kernel_module} +
+ )} +
+ )} + + + + {/* Power Consumption */} + {hardwareData?.power_meter && ( + +
+ +

Power Consumption

+
+ +
+
+
+

{hardwareData.power_meter.name}

+ {hardwareData.power_meter.adapter && ( +

{hardwareData.power_meter.adapter}

+ )} +
+
+

{hardwareData.power_meter.watts.toFixed(1)} W

+

Current Draw

+
+
+
+ + )} + + {/* Fans */} + {hardwareData?.fans && hardwareData.fans.length > 0 && ( + +
+ +

System Fans

+ + {hardwareData.fans.length} fans + +
+ +
+ {hardwareData.fans.map((fan, index) => { + const maxRPM = 5000 + const percentage = Math.min((fan.speed / maxRPM) * 100, 100) + + return ( +
+
+ {fan.name} + + {fan.speed.toFixed(0)} {fan.unit} + +
+
+
+
+ {fan.adapter && {fan.adapter}} +
+ ) + })} +
+ + )} + + {/* Power Supplies */} + {hardwareData?.power_supplies && hardwareData.power_supplies.length > 0 && ( + +
+ +

Power Supplies

+ + {hardwareData.power_supplies.length} PSUs + +
+ +
+ {hardwareData.power_supplies.map((psu, index) => ( +
+
+ {psu.name} + {psu.status && ( + {psu.status} + )} +
+

{psu.watts} W

+

Current Output

+
+ ))} +
+ + )} + + {/* UPS */} + {hardwareData?.ups && Object.keys(hardwareData.ups).length > 0 && hardwareData.ups.model && ( + +
+ +

UPS Status

+
+ +
+
+
+ {hardwareData.ups.model} + + {hardwareData.ups.status} + +
+ +
+ {hardwareData.ups.battery_charge && ( +
+
+ Battery Charge + {hardwareData.ups.battery_charge} +
+ +
+ )} + + {hardwareData.ups.load_percent && ( +
+
+ Load + {hardwareData.ups.load_percent} +
+ +
+ )} + + {hardwareData.ups.time_left && ( +
+ Runtime +

{hardwareData.ups.time_left}

+
+ )} + + {hardwareData.ups.line_voltage && ( +
+ Input Voltage +

{hardwareData.ups.line_voltage}

+
+ )} +
+
+
+ + )} + + {/* Network Summary - Clickable */} + {hardwareData?.pci_devices && + hardwareData.pci_devices.filter((d) => d.type.toLowerCase().includes("network")).length > 0 && ( + +
+ +

Network Summary

+ + {hardwareData.pci_devices.filter((d) => d.type.toLowerCase().includes("network")).length} interfaces + +
+ +
+ {hardwareData.pci_devices + .filter((d) => d.type.toLowerCase().includes("network")) + .map((device, index) => ( +
setSelectedNetwork(device)} + className="cursor-pointer rounded-lg border border-border/30 bg-background/50 p-3 transition-colors hover:bg-background/80" + > +
+ {device.device} + Ethernet +
+

{device.vendor}

+ {device.driver &&

Driver: {device.driver}

} +
+ ))} +
+

Click on an interface for detailed information

+ + )} + + {/* Network Detail Modal */} + setSelectedNetwork(null)}> + + + {selectedNetwork?.device} + Network Interface Information + + + {selectedNetwork && ( +
+
+ Device Type + {selectedNetwork.type} +
+ +
+ PCI Slot + {selectedNetwork.slot} +
+ +
+ Vendor + {selectedNetwork.vendor} +
+ +
+ Class + {selectedNetwork.class} +
+ + {selectedNetwork.driver && ( +
+ Driver + {selectedNetwork.driver} +
+ )} + + {selectedNetwork.kernel_module && ( +
+ Kernel Module + {selectedNetwork.kernel_module} +
+ )} +
+ )} + + + + {/* Storage Summary - Clickable */} + {hardwareData?.storage_devices && hardwareData.storage_devices.length > 0 && ( + +
+ +

Storage Summary

+ + {hardwareData.storage_devices.length} devices + +
+ +
+ {hardwareData.storage_devices.map((device, index) => ( +
setSelectedDisk(device)} + className="cursor-pointer rounded-lg border border-border/30 bg-background/50 p-3 transition-colors hover:bg-background/80" + > +
+ {device.name} + {device.type} +
+ {device.size &&

{device.size}

} + {device.model &&

{device.model}

} + {device.driver &&

Driver: {device.driver}

} +
+ ))} +
+

Click on a device for detailed hardware information

+ + )} + + {/* Disk Detail Modal */} + setSelectedDisk(null)}> + + + {selectedDisk?.name} + Storage Device Hardware Information + + + {selectedDisk && ( +
+
+ Device Name + {selectedDisk.name} +
+ + {selectedDisk.type && ( +
+ Type + {selectedDisk.type} +
+ )} + + {selectedDisk.size && ( +
+ Capacity + {selectedDisk.size} +
+ )} + + {selectedDisk.model && ( +
+ Model + {selectedDisk.model} +
+ )} + + {selectedDisk.family && ( +
+ Family + {selectedDisk.family} +
+ )} + + {selectedDisk.serial && ( +
+ Serial Number + {selectedDisk.serial} +
+ )} + + {selectedDisk.firmware && ( +
+ Firmware + {selectedDisk.firmware} +
+ )} + + {selectedDisk.interface && ( +
+ Interface + {selectedDisk.interface} +
+ )} + + {selectedDisk.driver && ( +
+ Driver + {selectedDisk.driver} +
+ )} + + {selectedDisk.rotation_rate && ( +
+ Rotation Rate + {selectedDisk.rotation_rate} +
+ )} + + {selectedDisk.form_factor && ( +
+ Form Factor + {selectedDisk.form_factor} +
+ )} + + {selectedDisk.sata_version && ( +
+ SATA Version + {selectedDisk.sata_version} +
+ )} +
+ )} + +
) } - -export default HardwareComponent