import { Head } from '@inertiajs/react' import SettingsLayout from '~/layouts/SettingsLayout' import { SystemInformationResponse } from '../../../types/system' import { formatBytes } from '~/lib/util' import CircularGauge from '~/components/systeminfo/CircularGauge' import HorizontalBarChart from '~/components/systeminfo/HorizontalBarChart' import InfoCard from '~/components/systeminfo/InfoCard' import { CpuChipIcon, CircleStackIcon, ServerIcon, ComputerDesktopIcon, } from '@heroicons/react/24/outline' import Alert from '~/components/Alert' import { useSystemInfo } from '~/hooks/useSystemInfo' import StatusCard from '~/components/systeminfo/StatusCard' export default function SettingsPage(props: { system: { info: SystemInformationResponse | undefined } }) { const { data: info } = useSystemInfo({ initialData: props.system.info, }) const memoryUsagePercent = info?.mem.total ? ((info.mem.used / info.mem.total) * 100).toFixed(1) : 0 const swapUsagePercent = info?.mem.swaptotal ? ((info.mem.swapused / info.mem.swaptotal) * 100).toFixed(1) : 0 const uptimeMinutes = info?.uptime.uptime ? Math.floor(info.uptime.uptime / 60) : 0 const diskData = info?.disk.map((disk) => { const usedBytes = (disk.size || 0) * 0.65 // Estimate - you'd get this from mount points const usedPercent = disk.size ? (usedBytes / disk.size) * 100 : 0 return { label: disk.name || 'Unknown', value: usedPercent, total: formatBytes(disk.size || 0), used: formatBytes(usedBytes), type: disk.type, } }) return (

System Information

Real-time monitoring and diagnostics • Last updated: {new Date().toLocaleString()} • Refreshing data every 30 seconds

{Number(memoryUsagePercent) > 90 && (
)}

Resource Usage

} />
} />
} />

System Details

} variant="elevated" data={[ { label: 'Distribution', value: info?.os.distro }, { label: 'Kernel Version', value: info?.os.kernel }, { label: 'Architecture', value: info?.os.arch }, { label: 'Hostname', value: info?.os.hostname }, { label: 'Platform', value: info?.os.platform }, ]} /> } variant="elevated" data={[ { label: 'Manufacturer', value: info?.cpu.manufacturer }, { label: 'Brand', value: info?.cpu.brand }, { label: 'Cores', value: info?.cpu.cores }, { label: 'Physical Cores', value: info?.cpu.physicalCores }, { label: 'Virtualization', value: info?.cpu.virtualization ? 'Enabled' : 'Disabled', }, ]} />

Memory Allocation

{formatBytes(info?.mem.total || 0)}
Total RAM
{formatBytes(info?.mem.used || 0)}
RAM in Use
{formatBytes(info?.mem.free || 0)}
Free RAM
{memoryUsagePercent}% Utilized

Storage Devices

{diskData && diskData.length > 0 ? ( ) : (
No storage devices detected
)}

System Status

) }