import AppLayout from '@/Layouts/AppLayout'; import { Head, router } from '@inertiajs/react'; import { motion } from 'framer-motion'; import { Plus, RefreshCw, Server, TestTube, Edit, Trash2, Eye } from 'lucide-react'; import { GlassCard } from '@/Components/ui/GlassCard'; import { StatusBadge } from '@/Components/ui/StatusBadge'; import { Button } from '@/Components/ui/Button'; import { DataTable } from '@/Components/ui/DataTable'; import { timeAgo } from '@/lib/utils'; import { useState } from 'react'; const TYPE_LABELS = { vcenter: 'VMware vCenter', esxi: 'VMware ESXi', proxmox: 'Proxmox VE', 'hyper-v': 'Hyper-V', xen: 'XenServer', kvm: 'KVM', }; const TYPE_COLORS = { vcenter: 'text-blue-400', esxi: 'text-blue-300', proxmox: 'text-orange-400', 'hyper-v': 'text-blue-500', kvm: 'text-green-400', }; export default function HypervisorIndex({ hypervisors }) { const [syncing, setSyncing] = useState(null); const sync = (id) => { setSyncing(id); router.post(`/hypervisors/${id}/sync`, {}, { onFinish: () => setSyncing(null), }); }; const columns = [ { header: 'Name', accessor: 'name', render: row => (

{row.name}

{TYPE_LABELS[row.type] ?? row.type}

)}, { header: 'Host', accessor: 'host', render: row => ( {row.host}:{row.port} )}, { header: 'VMs', key: 'vms', render: row => ( {row.virtual_machines_count ?? 0} )}, { header: 'Status', accessor: 'status', render: row => }, { header: 'Last Sync', accessor: 'last_sync_at', render: row => ( {timeAgo(row.last_sync_at)} )}, { header: '', key: 'actions', render: row => (
e.stopPropagation()}>
)}, ]; return (

Hypervisors

Manage vCenter, Proxmox, ESXi, Hyper-V and more

{/* Summary Cards */}
{[ { label: 'Total', value: hypervisors.total ?? 0, color: 'text-white' }, { label: 'Online', value: hypervisors.data?.filter(h => h.status === 'online').length ?? 0, color: 'text-green-400' }, { label: 'Offline', value: hypervisors.data?.filter(h => h.status === 'offline').length ?? 0, color: 'text-red-400' }, { label: 'Error', value: hypervisors.data?.filter(h => h.status === 'error').length ?? 0, color: 'text-orange-400' }, ].map(s => (

{s.value}

{s.label}

 ))}
router.visit(`/hypervisors/${row.id}`)} emptyMessage="No hypervisors configured. Add your first one!" />
); }