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/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.total - info.mem.available) / 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 // Build storage display items - fall back to fsSize when disk array is empty // (Same approach as Easy Setup wizard fix from PR #90) const validDisks = info?.disk?.filter((d) => d.totalSize > 0) || [] let storageItems: { label: string; value: number; total: string; used: string; subtext: string }[] = [] if (validDisks.length > 0) { storageItems = validDisks.map((disk) => ({ label: disk.name || 'Unknown', value: disk.percentUsed || 0, total: disk.totalSize ? formatBytes(disk.totalSize) : 'N/A', used: disk.totalUsed ? formatBytes(disk.totalUsed) : 'N/A', subtext: `${formatBytes(disk.totalUsed || 0)} / ${formatBytes(disk.totalSize || 0)}`, })) } else if (info?.fsSize && info.fsSize.length > 0) { // Deduplicate by size (same physical disk mounted in multiple places shows identical sizes) const seen = new Set() const uniqueFs = info.fsSize.filter((fs) => { if (fs.size <= 0 || seen.has(fs.size)) return false seen.add(fs.size) return true }) // Prefer real block devices (/dev/), exclude virtual filesystems (efivarfs, tmpfs, etc.) const realDevices = uniqueFs.filter((fs) => fs.fs.startsWith('/dev/')) const displayFs = realDevices.length > 0 ? realDevices : uniqueFs storageItems = displayFs.map((fs) => ({ label: fs.fs || 'Unknown', value: fs.use || 0, total: formatBytes(fs.size), used: formatBytes(fs.used), subtext: `${formatBytes(fs.used)} / ${formatBytes(fs.size)}`, })) } 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)}
Used RAM
{formatBytes(info?.mem.free || 0)}
Free RAM
{memoryUsagePercent}% Utilized

Storage Devices

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

System Status

) }