import { Head, Link, router, usePage } from '@inertiajs/react'; import { Pencil, Plus, RefreshCw, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; type Assignment = { id: number; group_name: string; sync_status: string; error_code?: string; message?: string; device: { id: number; name: string }; }; type DeviceUser = { id: number; display_name: string; username: string; is_enabled: boolean; assignments: Assignment[]; }; type Props = { deviceUsers: { data: DeviceUser[] }; devices: { id: number; name: string }[]; filters: { search?: string; device_id?: string }; }; const colors: Record = { synced: 'bg-emerald-100 text-emerald-800', pending: 'bg-amber-100 text-amber-800', queued: 'bg-blue-100 text-blue-800', processing: 'bg-blue-100 text-blue-800', failed: 'bg-red-100 text-red-800', unsupported: 'bg-slate-200 text-slate-800', }; export default function DeviceUsers({ deviceUsers, devices, filters }: Props) { const { auth } = usePage().props; const search = (e: React.FormEvent) => { e.preventDefault(); router.get( '/device-users', Object.fromEntries(new FormData(e.currentTarget)), { preserveState: true }, ); }; return ( <>

Users Perangkat

Kelola satu akun pada banyak perangkat dan pantau status sinkronisasinya.

{auth.permissions.includes('device.user.create') && ( )}

{deviceUsers.data.map((user) => (

{user.display_name}

{user.username} ·{' '} {user.is_enabled ? 'Aktif' : 'Nonaktif'}{' '} · password terenkripsi

{auth.permissions.includes( 'device.user.update', ) && ( )} {auth.permissions.includes( 'device.user.delete', ) && ( )}

{user.assignments.map((item) => (

{item.device.name} {item.sync_status}

{item.group_name} {item.error_code ? ` · ${item.error_code}` : ''}

{['pending', 'failed'].includes( item.sync_status, ) && auth.permissions.includes( 'device.user.update', ) && ( )}

))}

))} {deviceUsers.data.length === 0 && (

Belum ada user perangkat.

)}

); }