Initial commit: MSP Monitor Dashboard
- Next.js 14 frontend with dark cyan/navy theme - tRPC API with Prisma ORM - MeshCentral, LibreNMS, Headwind MDM integrations - Multi-tenant architecture - Alert system with email/SMS/webhook notifications - Docker Compose deployment - Complete documentation
This commit is contained in:
MSP Monitor
341
src/components/dashboard/DeviceGrid.tsx
Normal file
341
src/components/dashboard/DeviceGrid.tsx
Normal file
@@ -0,0 +1,341 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
Monitor,
|
||||
Laptop,
|
||||
Server,
|
||||
Smartphone,
|
||||
Tablet,
|
||||
Router,
|
||||
Network,
|
||||
Shield,
|
||||
Wifi,
|
||||
Printer,
|
||||
HelpCircle,
|
||||
MoreVertical,
|
||||
ExternalLink,
|
||||
Power,
|
||||
Terminal,
|
||||
FolderOpen,
|
||||
} from 'lucide-react'
|
||||
import { cn, formatRelativeTime, getStatusColor, getStatusBgColor } from '@/lib/utils'
|
||||
|
||||
interface Device {
|
||||
id: string
|
||||
nombre: string
|
||||
tipo: string
|
||||
estado: string
|
||||
ip?: string | null
|
||||
sistemaOperativo?: string | null
|
||||
lastSeen?: Date | null
|
||||
cpuUsage?: number | null
|
||||
ramUsage?: number | null
|
||||
cliente?: { nombre: string }
|
||||
}
|
||||
|
||||
interface DeviceGridProps {
|
||||
devices: Device[]
|
||||
viewMode?: 'grid' | 'list'
|
||||
onAction?: (deviceId: string, action: string) => void
|
||||
}
|
||||
|
||||
const deviceIcons: Record<string, React.ReactNode> = {
|
||||
PC: <Monitor className="w-8 h-8" />,
|
||||
LAPTOP: <Laptop className="w-8 h-8" />,
|
||||
SERVIDOR: <Server className="w-8 h-8" />,
|
||||
CELULAR: <Smartphone className="w-8 h-8" />,
|
||||
TABLET: <Tablet className="w-8 h-8" />,
|
||||
ROUTER: <Router className="w-8 h-8" />,
|
||||
SWITCH: <Network className="w-8 h-8" />,
|
||||
FIREWALL: <Shield className="w-8 h-8" />,
|
||||
AP: <Wifi className="w-8 h-8" />,
|
||||
IMPRESORA: <Printer className="w-8 h-8" />,
|
||||
OTRO: <HelpCircle className="w-8 h-8" />,
|
||||
}
|
||||
|
||||
export default function DeviceGrid({ devices, viewMode = 'grid', onAction }: DeviceGridProps) {
|
||||
if (viewMode === 'list') {
|
||||
return <DeviceList devices={devices} onAction={onAction} />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{devices.map((device) => (
|
||||
<DeviceCard key={device.id} device={device} onAction={onAction} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceCard({
|
||||
device,
|
||||
onAction,
|
||||
}: {
|
||||
device: Device
|
||||
onAction?: (deviceId: string, action: string) => void
|
||||
}) {
|
||||
const [showMenu, setShowMenu] = useState(false)
|
||||
|
||||
const getDeviceUrl = () => {
|
||||
const type = device.tipo
|
||||
if (['PC', 'LAPTOP', 'SERVIDOR'].includes(type)) return `/equipos/${device.id}`
|
||||
if (['CELULAR', 'TABLET'].includes(type)) return `/celulares/${device.id}`
|
||||
return `/red/${device.id}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'card p-4 transition-all hover:border-primary-500/50 relative group',
|
||||
device.estado === 'ALERTA' && 'border-danger/50'
|
||||
)}
|
||||
>
|
||||
{/* Status indicator */}
|
||||
<div className="absolute top-3 right-3 flex items-center gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
'status-dot',
|
||||
device.estado === 'ONLINE' && 'status-dot-online',
|
||||
device.estado === 'OFFLINE' && 'status-dot-offline',
|
||||
device.estado === 'ALERTA' && 'status-dot-alert',
|
||||
device.estado === 'MANTENIMIENTO' && 'status-dot-maintenance'
|
||||
)}
|
||||
/>
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowMenu(!showMenu)}
|
||||
className="p-1 rounded hover:bg-dark-100 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<MoreVertical className="w-4 h-4 text-gray-500" />
|
||||
</button>
|
||||
|
||||
{showMenu && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40" onClick={() => setShowMenu(false)} />
|
||||
<div className="dropdown right-0 z-50">
|
||||
{['PC', 'LAPTOP', 'SERVIDOR'].includes(device.tipo) && device.estado === 'ONLINE' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
onAction?.(device.id, 'desktop')
|
||||
setShowMenu(false)
|
||||
}}
|
||||
className="dropdown-item flex items-center gap-2"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
Escritorio remoto
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onAction?.(device.id, 'terminal')
|
||||
setShowMenu(false)
|
||||
}}
|
||||
className="dropdown-item flex items-center gap-2"
|
||||
>
|
||||
<Terminal className="w-4 h-4" />
|
||||
Terminal
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onAction?.(device.id, 'files')
|
||||
setShowMenu(false)
|
||||
}}
|
||||
className="dropdown-item flex items-center gap-2"
|
||||
>
|
||||
<FolderOpen className="w-4 h-4" />
|
||||
Archivos
|
||||
</button>
|
||||
<div className="h-px bg-dark-100 my-1" />
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
onAction?.(device.id, 'restart')
|
||||
setShowMenu(false)
|
||||
}}
|
||||
className="dropdown-item flex items-center gap-2 text-warning"
|
||||
>
|
||||
<Power className="w-4 h-4" />
|
||||
Reiniciar
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon and name */}
|
||||
<Link href={getDeviceUrl()} className="block">
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<div className={cn('p-3 rounded-lg', getStatusBgColor(device.estado))}>
|
||||
<span className={getStatusColor(device.estado)}>
|
||||
{deviceIcons[device.tipo] || deviceIcons.OTRO}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium truncate">{device.nombre}</h3>
|
||||
<p className="text-xs text-gray-500">{device.tipo}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Details */}
|
||||
<div className="space-y-2 text-sm">
|
||||
{device.ip && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">IP</span>
|
||||
<span className="font-mono text-gray-300">{device.ip}</span>
|
||||
</div>
|
||||
)}
|
||||
{device.sistemaOperativo && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">OS</span>
|
||||
<span className="text-gray-300 truncate ml-2">{device.sistemaOperativo}</span>
|
||||
</div>
|
||||
)}
|
||||
{device.lastSeen && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Visto</span>
|
||||
<span className="text-gray-400">{formatRelativeTime(device.lastSeen)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Metrics bar */}
|
||||
{device.estado === 'ONLINE' && (device.cpuUsage !== null || device.ramUsage !== null) && (
|
||||
<div className="mt-3 pt-3 border-t border-dark-100 grid grid-cols-2 gap-2">
|
||||
{device.cpuUsage !== null && (
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-gray-500">CPU</span>
|
||||
<span className={cn(device.cpuUsage > 80 ? 'text-danger' : 'text-gray-400')}>
|
||||
{Math.round(device.cpuUsage)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1 bg-dark-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={cn(
|
||||
'h-full rounded-full transition-all',
|
||||
device.cpuUsage > 80 ? 'bg-danger' : device.cpuUsage > 60 ? 'bg-warning' : 'bg-success'
|
||||
)}
|
||||
style={{ width: `${device.cpuUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{device.ramUsage !== null && (
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-gray-500">RAM</span>
|
||||
<span className={cn(device.ramUsage > 80 ? 'text-danger' : 'text-gray-400')}>
|
||||
{Math.round(device.ramUsage)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1 bg-dark-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={cn(
|
||||
'h-full rounded-full transition-all',
|
||||
device.ramUsage > 80 ? 'bg-danger' : device.ramUsage > 60 ? 'bg-warning' : 'bg-success'
|
||||
)}
|
||||
style={{ width: `${device.ramUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceList({
|
||||
devices,
|
||||
onAction,
|
||||
}: {
|
||||
devices: Device[]
|
||||
onAction?: (deviceId: string, action: string) => void
|
||||
}) {
|
||||
return (
|
||||
<div className="card overflow-hidden">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Dispositivo</th>
|
||||
<th>Tipo</th>
|
||||
<th>IP</th>
|
||||
<th>Estado</th>
|
||||
<th>CPU</th>
|
||||
<th>RAM</th>
|
||||
<th>Ultimo contacto</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{devices.map((device) => (
|
||||
<tr key={device.id}>
|
||||
<td>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={getStatusColor(device.estado)}>
|
||||
{deviceIcons[device.tipo] || deviceIcons.OTRO}
|
||||
</span>
|
||||
<div>
|
||||
<div className="font-medium">{device.nombre}</div>
|
||||
{device.cliente && (
|
||||
<div className="text-xs text-gray-500">{device.cliente.nombre}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-gray-400">{device.tipo}</td>
|
||||
<td className="font-mono text-gray-400">{device.ip || '-'}</td>
|
||||
<td>
|
||||
<span
|
||||
className={cn(
|
||||
'badge',
|
||||
device.estado === 'ONLINE' && 'badge-success',
|
||||
device.estado === 'OFFLINE' && 'badge-gray',
|
||||
device.estado === 'ALERTA' && 'badge-danger',
|
||||
device.estado === 'MANTENIMIENTO' && 'badge-warning'
|
||||
)}
|
||||
>
|
||||
{device.estado}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{device.cpuUsage !== null ? (
|
||||
<span className={cn(device.cpuUsage > 80 ? 'text-danger' : 'text-gray-400')}>
|
||||
{Math.round(device.cpuUsage)}%
|
||||
</span>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{device.ramUsage !== null ? (
|
||||
<span className={cn(device.ramUsage > 80 ? 'text-danger' : 'text-gray-400')}>
|
||||
{Math.round(device.ramUsage)}%
|
||||
</span>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</td>
|
||||
<td className="text-gray-500">
|
||||
{device.lastSeen ? formatRelativeTime(device.lastSeen) : '-'}
|
||||
</td>
|
||||
<td>
|
||||
<Link
|
||||
href={`/equipos/${device.id}`}
|
||||
className="btn btn-ghost btn-sm"
|
||||
>
|
||||
Ver
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user