import { Form, Head, Link, router, usePage } from '@inertiajs/react'; import { Eye, Pencil, Plus, 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'; type Device = { id: number; name: string; management_address: string; management_port: number; connection_type: string; connection_ports?: Record; status: string; location?: string; vendor: { name: string }; type: { name: string }; model?: { name: string }; creator?: { name: string }; user_assignments_count: number; }; type Props = { devices: { data: Device[]; links: { url: string | null; label: string; active: boolean }[]; }; vendors: { id: number; name: string }[]; filters: { search?: string; vendor?: string; status?: string }; policy: { tenant_user_can_create: boolean; tenant_user_can_update_own: boolean; tenant_user_can_delete_own: boolean; }; isTenantAdmin: boolean; }; export default function DeviceIndex({ devices, vendors, filters, policy, isTenantAdmin, }: Props) { const { auth } = usePage().props; const canCreate = auth.permissions.includes('device.create') && (isTenantAdmin || policy.tenant_user_can_create); const search = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); router.get('/devices', Object.fromEntries(data), { preserveState: true, }); }; return ( <>

Perangkat Jaringan

Inventaris perangkat tenant yang terisolasi dan aman.

{canCreate && ( )}
{isTenantAdmin && ( Aturan Tenant User
{[ [ 'tenant_user_can_create', 'Boleh menambah perangkat', ], [ 'tenant_user_can_update_own', 'Boleh mengubah perangkat sendiri', ], [ 'tenant_user_can_delete_own', 'Boleh menghapus perangkat sendiri', ], ].map(([name, label]) => ( ))}
)}
{devices.data.map((device) => ( ))}
Perangkat Alamat User Vendor / Tipe Lokasi Status Aksi
{device.name}
{device.model?.name ?? 'Model belum ditentukan'}
{device.management_address}
{Object.entries( device.connection_ports ?? { [device.connection_type]: device.management_port, }, ) .map( ([ protocol, port, ]) => `${protocol}:${port}`, ) .join(' · ')}
{ device.user_assignments_count }{' '} user {device.vendor.name} ·{' '} {device.type.name} {device.location ?? '-'} {device.status}
{auth.permissions.includes( 'device.update', ) && ( )} {auth.permissions.includes( 'device.delete', ) && ( )}
{devices.data.length === 0 && (
Belum ada perangkat.
)}
); }