import { Form, Head, Link, router, usePage } from '@inertiajs/react'; import { Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; type Credential = { id: number; name: string; username: string; connection_type: string; privilege_type: string; is_master: boolean; is_active: boolean; }; type Props = { device: { id: number; name: string; hostname?: string; management_address: string; management_port: number; connection_type: string; connection_ports?: Record; status: string; location?: string; serial_number?: string; firmware_version?: string; software_version?: string; device_facts?: Record; notes?: string; vendor: { name: string; slug: string }; activation_status: string; activation_message?: string; type: { name: string }; model?: { name: string }; creator?: { name: string }; }; credentials: Credential[]; }; export default function DeviceShow({ device, credentials }: Props) { const { auth, errors } = usePage().props; const rows = [ ['Vendor', device.vendor.name], ['Tipe', device.type.name], ['Model', device.model?.name ?? '-'], ['Alamat Management', device.management_address], [ 'Koneksi', Object.entries( device.connection_ports ?? { [device.connection_type]: device.management_port, }, ) .map(([protocol, port]) => `${protocol}: ${port}`) .join(' · '), ], ['Hostname', device.hostname ?? '-'], ['Serial Number', device.serial_number ?? '-'], ['Versi RouterOS', device.software_version ?? '-'], ['Firmware', device.firmware_version ?? '-'], [ 'Board / Model Terdeteksi', device.device_facts?.['board-name'] ?? device.device_facts?.model ?? '-', ], ['Arsitektur', device.device_facts?.['architecture-name'] ?? '-'], ['CPU', device.device_facts?.cpu ?? '-'], ['Jumlah CPU', device.device_facts?.['cpu-count'] ?? '-'], ['Total Memori', device.device_facts?.['total-memory'] ?? '-'], ['Uptime', device.device_facts?.uptime ?? '-'], ['Lokasi', device.location ?? '-'], ['Status', device.status], ['Dibuat Oleh', device.creator?.name ?? '-'], ]; return ( <>

{device.name}

Detail inventaris perangkat

{auth.permissions.includes('device.update') && ( )}
{['mikrotik', 'zte', 'hsgq', 'hisfocus'].includes( device.vendor.slug, ) && ( Aktivasi {device.vendor.name}

Status:{' '} {device.activation_status}

{device.activation_message ?? 'Aktivasi akan menguji koneksi dan membuat Base User management dengan aman.'}

{errors.activation && (

{errors.activation}

)}
{auth.permissions.includes('device.connect') && (
{({ processing }) => ( )}
)} )} Informasi {rows.map(([label, value]) => (
{label}
{value}
))} {device.notes && (
Catatan

{device.notes}

)} {auth.permissions.includes('device.credential.view') && ( Credential Perangkat
{credentials.map((item) => ( ))}
Nama Username Password Protokol Privilege
{item.name} {item.is_master && ( MASTER )} {item.username} •••••••••••• {item.connection_type} {item.privilege_type} {auth.permissions.includes( 'device.credential.delete', ) && ( )}
{credentials.length === 0 && (

Belum ada credential.

)}
{auth.permissions.includes( 'device.credential.create', ) && (
)} )}
); }