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.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 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

{info?.disk && info.disk.length > 0 ? ( ({ 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 )}`, }))} progressiveBarColor={true} statuses={[ { label: 'Normal', min_threshold: 0, color_class: 'bg-desert-olive', }, { label: 'Warning - Usage High', min_threshold: 75, color_class: 'bg-desert-orange', }, { label: 'Critical - Disk Almost Full', min_threshold: 90, color_class: 'bg-desert-red', }, ]} /> ) : (
No storage devices detected
)}

System Status

) }