4758 lines
216 KiB
TypeScript
4758 lines
216 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react"
|
|
import type { ReactNode } from "react"
|
|
import { useQuery } from "convex/react"
|
|
import { format, formatDistanceToNowStrict } from "date-fns"
|
|
import { ptBR } from "date-fns/locale"
|
|
import { toast } from "sonner"
|
|
import {
|
|
ClipboardCopy,
|
|
ServerCog,
|
|
Cpu,
|
|
MemoryStick,
|
|
Monitor,
|
|
HardDrive,
|
|
Pencil,
|
|
ShieldCheck,
|
|
ShieldAlert,
|
|
Shield,
|
|
ShieldOff,
|
|
ShieldQuestion,
|
|
Lock,
|
|
Cloud,
|
|
RefreshCcw,
|
|
AlertTriangle,
|
|
Key,
|
|
Globe,
|
|
Apple,
|
|
Terminal,
|
|
Power,
|
|
PlayCircle,
|
|
Download,
|
|
} from "lucide-react"
|
|
|
|
import { api } from "@/convex/_generated/api"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button, buttonVariants } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Spinner } from "@/components/ui/spinner"
|
|
import { Progress } from "@/components/ui/progress"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { ChartContainer } from "@/components/ui/chart"
|
|
import { cn } from "@/lib/utils"
|
|
import { RadialBarChart, RadialBar, PolarAngleAxis } from "recharts"
|
|
import Link from "next/link"
|
|
import { useRouter } from "next/navigation"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
import type { Id } from "@/convex/_generated/dataModel"
|
|
import { TicketStatusBadge } from "@/components/tickets/status-badge"
|
|
import type { TicketPriority, TicketStatus } from "@/lib/schemas/ticket"
|
|
|
|
type MachineMetrics = Record<string, unknown> | null
|
|
|
|
type MachineLabel = {
|
|
id?: number | string
|
|
name?: string
|
|
}
|
|
|
|
type MachineSoftware = {
|
|
name?: string
|
|
version?: string
|
|
source?: string
|
|
}
|
|
|
|
type NormalizedSoftwareEntry = {
|
|
name: string
|
|
version?: string
|
|
publisher?: string
|
|
installDate?: Date | null
|
|
source?: string
|
|
}
|
|
|
|
type MachineAlertEntry = {
|
|
id: string
|
|
kind: string
|
|
message: string
|
|
severity: string
|
|
createdAt: number
|
|
}
|
|
type MachineTicketSummary = {
|
|
id: string
|
|
reference: number
|
|
subject: string
|
|
status: TicketStatus
|
|
priority: TicketPriority
|
|
updatedAt: number
|
|
createdAt: number
|
|
machine: { id: string | null; hostname: string | null } | null
|
|
assignee: { name: string | null; email: string | null } | null
|
|
}
|
|
|
|
type MachineOpenTicketsSummary = {
|
|
totalOpen: number
|
|
hasMore: boolean
|
|
tickets: MachineTicketSummary[]
|
|
}
|
|
|
|
|
|
type DetailLineProps = {
|
|
label: string
|
|
value?: string | number | null
|
|
classNameValue?: string
|
|
layout?: "spread" | "compact"
|
|
}
|
|
|
|
type GpuAdapter = {
|
|
name?: string
|
|
vendor?: string
|
|
driver?: string
|
|
memoryBytes?: number
|
|
}
|
|
|
|
type LinuxLsblkEntry = {
|
|
name?: string
|
|
mountPoint?: string
|
|
mountpoint?: string
|
|
fs?: string
|
|
fstype?: string
|
|
sizeBytes?: number
|
|
size?: number
|
|
}
|
|
|
|
type LinuxSmartEntry = {
|
|
smart_status?: { passed?: boolean }
|
|
model_name?: string
|
|
model_family?: string
|
|
serial_number?: string
|
|
device?: { name?: string }
|
|
}
|
|
|
|
type LinuxExtended = {
|
|
lsblk?: LinuxLsblkEntry[]
|
|
lspci?: string
|
|
lsusb?: string
|
|
pciList?: Array<{ text: string }>
|
|
usbList?: Array<{ text: string }>
|
|
smart?: LinuxSmartEntry[]
|
|
}
|
|
|
|
type WindowsCpuInfo = {
|
|
Name?: string
|
|
Manufacturer?: string
|
|
SocketDesignation?: string
|
|
NumberOfCores?: number
|
|
NumberOfLogicalProcessors?: number
|
|
L2CacheSize?: number
|
|
L3CacheSize?: number
|
|
MaxClockSpeed?: number
|
|
}
|
|
|
|
type WindowsMemoryModule = {
|
|
BankLabel?: string
|
|
Capacity?: number
|
|
Manufacturer?: string
|
|
PartNumber?: string
|
|
SerialNumber?: string
|
|
ConfiguredClockSpeed?: number
|
|
Speed?: number
|
|
ConfiguredVoltage?: number
|
|
}
|
|
|
|
type WindowsVideoController = {
|
|
Name?: string
|
|
AdapterRAM?: number
|
|
DriverVersion?: string
|
|
PNPDeviceID?: string
|
|
}
|
|
|
|
type WindowsDiskEntry = {
|
|
Model?: string
|
|
SerialNumber?: string
|
|
Size?: number
|
|
InterfaceType?: string
|
|
MediaType?: string
|
|
}
|
|
|
|
type WindowsExtended = {
|
|
software?: MachineSoftware[]
|
|
services?: Array<{ name?: string; status?: string; displayName?: string }>
|
|
defender?: Record<string, unknown>
|
|
hotfix?: Array<Record<string, unknown>>
|
|
cpu?: WindowsCpuInfo | WindowsCpuInfo[]
|
|
baseboard?: Record<string, unknown> | Array<Record<string, unknown>>
|
|
bios?: Record<string, unknown> | Array<Record<string, unknown>>
|
|
memoryModules?: WindowsMemoryModule[]
|
|
videoControllers?: WindowsVideoController[]
|
|
disks?: WindowsDiskEntry[]
|
|
osInfo?: WindowsOsInfo
|
|
bitLocker?: Array<Record<string, unknown>> | Record<string, unknown>
|
|
bitlocker?: Array<Record<string, unknown>> | Record<string, unknown>
|
|
tpm?: Record<string, unknown>
|
|
secureBoot?: Record<string, unknown>
|
|
deviceGuard?: Array<Record<string, unknown>> | Record<string, unknown>
|
|
firewallProfiles?: Array<Record<string, unknown>> | Record<string, unknown>
|
|
windowsUpdate?: Record<string, unknown>
|
|
computerSystem?: Record<string, unknown>
|
|
azureAdStatus?: Record<string, unknown>
|
|
}
|
|
|
|
type MacExtended = {
|
|
systemProfiler?: Record<string, unknown>
|
|
packages?: string[]
|
|
launchctl?: string
|
|
}
|
|
|
|
type NetworkInterface = { name?: string; mac?: string; ip?: string }
|
|
|
|
type MachineInventory = {
|
|
hardware?: {
|
|
vendor?: string
|
|
model?: string
|
|
serial?: string
|
|
cpuType?: string
|
|
physicalCores?: number
|
|
logicalCores?: number
|
|
memoryBytes?: number
|
|
memory?: number
|
|
primaryGpu?: GpuAdapter
|
|
gpus?: GpuAdapter[]
|
|
}
|
|
network?: { primaryIp?: string; publicIp?: string; macAddresses?: string[] } | NetworkInterface[]
|
|
software?: MachineSoftware[]
|
|
labels?: MachineLabel[]
|
|
fleet?: {
|
|
id?: number | string
|
|
teamId?: number | string
|
|
detailUpdatedAt?: string
|
|
osqueryVersion?: string
|
|
}
|
|
disks?: Array<{ name?: string; mountPoint?: string; fs?: string; interface?: string | null; serial?: string | null; totalBytes?: number; availableBytes?: number }>
|
|
extended?: { linux?: LinuxExtended; windows?: WindowsExtended; macos?: MacExtended }
|
|
services?: Array<{ name?: string; status?: string; displayName?: string }>
|
|
collaborator?: { email?: string; name?: string; role?: string }
|
|
}
|
|
|
|
type MachineRemoteAccessEntry = {
|
|
id: string | null
|
|
clientId: string
|
|
provider: string | null
|
|
identifier: string | null
|
|
url: string | null
|
|
notes: string | null
|
|
lastVerifiedAt: number | null
|
|
metadata: Record<string, unknown> | null
|
|
}
|
|
|
|
export type MachineRemoteAccess = {
|
|
provider: string | null
|
|
identifier: string | null
|
|
url: string | null
|
|
notes: string | null
|
|
lastVerifiedAt: number | null
|
|
metadata: Record<string, unknown> | null
|
|
}
|
|
|
|
function collectInitials(name: string): string {
|
|
const words = name.split(/\s+/).filter(Boolean)
|
|
if (words.length === 0) return "?"
|
|
if (words.length === 1) return words[0].slice(0, 2).toUpperCase()
|
|
return (words[0][0] + words[1][0]).toUpperCase()
|
|
}
|
|
|
|
function toRecord(value: unknown): Record<string, unknown> | null {
|
|
if (!value || typeof value !== "object") return null
|
|
return value as Record<string, unknown>
|
|
}
|
|
|
|
function readString(record: Record<string, unknown>, ...keys: string[]): string | undefined {
|
|
for (const key of keys) {
|
|
const raw = record[key]
|
|
if (typeof raw === "string" && raw.trim().length > 0) {
|
|
return raw
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function readNumber(record: Record<string, unknown>, ...keys: string[]): number | undefined {
|
|
for (const key of keys) {
|
|
const raw = record[key]
|
|
if (typeof raw === "number" && Number.isFinite(raw)) {
|
|
return raw
|
|
}
|
|
if (typeof raw === "string") {
|
|
const trimmed = raw.trim()
|
|
if (!trimmed) continue
|
|
const parsed = Number(trimmed)
|
|
if (!Number.isNaN(parsed)) return parsed
|
|
const digits = trimmed.replace(/[^0-9.]/g, "")
|
|
if (digits) {
|
|
const fallback = Number(digits)
|
|
if (!Number.isNaN(fallback)) return fallback
|
|
}
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function createRemoteAccessClientId() {
|
|
if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
|
|
return crypto.randomUUID()
|
|
}
|
|
return `ra-${Math.random().toString(36).slice(2, 8)}-${Date.now().toString(36)}`
|
|
}
|
|
|
|
function normalizeMachineRemoteAccessEntry(raw: unknown): MachineRemoteAccessEntry | null {
|
|
if (!raw) return null
|
|
if (typeof raw === "string") {
|
|
const trimmed = raw.trim()
|
|
if (!trimmed) return null
|
|
const isUrl = /^https?:\/\//i.test(trimmed)
|
|
return {
|
|
id: null,
|
|
clientId: createRemoteAccessClientId(),
|
|
provider: null,
|
|
identifier: isUrl ? null : trimmed,
|
|
url: isUrl ? trimmed : null,
|
|
notes: null,
|
|
lastVerifiedAt: null,
|
|
metadata: null,
|
|
}
|
|
}
|
|
const record = toRecord(raw)
|
|
if (!record) return null
|
|
const provider = readString(record, "provider", "tool", "vendor", "name") ?? null
|
|
const identifier =
|
|
readString(record, "identifier", "code", "id", "accessId") ??
|
|
readString(record, "value", "label")
|
|
const url = readString(record, "url", "link", "remoteUrl", "console", "viewer") ?? null
|
|
const notes = readString(record, "notes", "note", "description", "obs") ?? null
|
|
const timestampCandidate =
|
|
readNumber(record, "lastVerifiedAt", "verifiedAt", "checkedAt", "updatedAt") ??
|
|
parseDateish(record["lastVerifiedAt"] ?? record["verifiedAt"] ?? record["checkedAt"] ?? record["updatedAt"])
|
|
const lastVerifiedAt = timestampCandidate instanceof Date ? timestampCandidate.getTime() : timestampCandidate ?? null
|
|
const id = readString(record, "id") ?? null
|
|
return {
|
|
id,
|
|
clientId: id ?? createRemoteAccessClientId(),
|
|
provider,
|
|
identifier: identifier ?? url ?? null,
|
|
url,
|
|
notes,
|
|
lastVerifiedAt,
|
|
metadata: record,
|
|
}
|
|
}
|
|
|
|
export function normalizeMachineRemoteAccess(raw: unknown): MachineRemoteAccess | null {
|
|
const entry = normalizeMachineRemoteAccessEntry(raw)
|
|
if (!entry) return null
|
|
const { provider, identifier, url, notes, lastVerifiedAt, metadata } = entry
|
|
return { provider, identifier, url, notes, lastVerifiedAt, metadata }
|
|
}
|
|
|
|
export function normalizeMachineRemoteAccessList(raw: unknown): MachineRemoteAccessEntry[] {
|
|
if (!raw) return []
|
|
const source = Array.isArray(raw) ? raw : [raw]
|
|
const seen = new Set<string>()
|
|
const entries: MachineRemoteAccessEntry[] = []
|
|
for (const item of source) {
|
|
const entry = normalizeMachineRemoteAccessEntry(item)
|
|
if (!entry) continue
|
|
let clientId = entry.clientId
|
|
while (seen.has(clientId)) {
|
|
clientId = createRemoteAccessClientId()
|
|
}
|
|
seen.add(clientId)
|
|
entries.push(clientId === entry.clientId ? entry : { ...entry, clientId })
|
|
}
|
|
return entries
|
|
}
|
|
|
|
const REMOTE_ACCESS_METADATA_IGNORED_KEYS = new Set([
|
|
"provider",
|
|
"tool",
|
|
"vendor",
|
|
"name",
|
|
"identifier",
|
|
"code",
|
|
"id",
|
|
"accessId",
|
|
"url",
|
|
"link",
|
|
"remoteUrl",
|
|
"console",
|
|
"viewer",
|
|
"notes",
|
|
"note",
|
|
"description",
|
|
"obs",
|
|
"lastVerifiedAt",
|
|
"verifiedAt",
|
|
"checkedAt",
|
|
"updatedAt",
|
|
])
|
|
|
|
function extractRemoteAccessMetadataEntries(metadata: Record<string, unknown> | null | undefined) {
|
|
if (!metadata) return [] as Array<[string, unknown]>
|
|
return Object.entries(metadata).filter(([key, value]) => {
|
|
if (REMOTE_ACCESS_METADATA_IGNORED_KEYS.has(key)) return false
|
|
if (value === null || value === undefined) return false
|
|
if (typeof value === "string" && value.trim().length === 0) return false
|
|
return true
|
|
})
|
|
}
|
|
|
|
function formatRemoteAccessMetadataKey(key: string) {
|
|
return key
|
|
.replace(/[_.-]+/g, " ")
|
|
.replace(/\b\w/g, (char) => char.toUpperCase())
|
|
}
|
|
|
|
function formatRemoteAccessMetadataValue(value: unknown): string {
|
|
if (value === null || value === undefined) return ""
|
|
if (typeof value === "string") return value
|
|
if (typeof value === "number" || typeof value === "boolean") return String(value)
|
|
if (value instanceof Date) return formatAbsoluteDateTime(value)
|
|
try {
|
|
return JSON.stringify(value)
|
|
} catch {
|
|
return String(value)
|
|
}
|
|
}
|
|
|
|
function readText(record: Record<string, unknown>, ...keys: string[]): string | undefined {
|
|
const stringValue = readString(record, ...keys)
|
|
if (stringValue) return stringValue
|
|
const numberValue = readNumber(record, ...keys)
|
|
if (typeof numberValue === "number") return String(numberValue)
|
|
return undefined
|
|
}
|
|
|
|
function parseWindowsInstallDate(value: unknown): Date | null {
|
|
if (!value) return null
|
|
if (value instanceof Date) return value
|
|
if (typeof value === "number" && Number.isFinite(value)) {
|
|
if (value > 10_000_000_000) {
|
|
return new Date(value)
|
|
}
|
|
if (value > 1_000_000_000) {
|
|
return new Date(value * 1000)
|
|
}
|
|
return new Date(value * 1000)
|
|
}
|
|
if (typeof value !== "string") return null
|
|
const trimmed = value.trim()
|
|
if (!trimmed) return null
|
|
|
|
const wmiMatch = trimmed.match(/Date\((\d+)\)/)
|
|
if (wmiMatch) {
|
|
const timestamp = Number(wmiMatch[1])
|
|
return Number.isFinite(timestamp) ? new Date(timestamp) : null
|
|
}
|
|
|
|
const isoValue = Date.parse(trimmed)
|
|
if (!Number.isNaN(isoValue)) return new Date(isoValue)
|
|
|
|
const digitsOnly = trimmed.replace(/[^0-9]/g, "")
|
|
if (digitsOnly.length >= 8) {
|
|
const yyyy = Number(digitsOnly.slice(0, 4))
|
|
const mm = Number(digitsOnly.slice(4, 6))
|
|
const dd = Number(digitsOnly.slice(6, 8))
|
|
const hh = Number(digitsOnly.slice(8, 10) || "0")
|
|
const mi = Number(digitsOnly.slice(10, 12) || "0")
|
|
const ss = Number(digitsOnly.slice(12, 14) || "0")
|
|
if (yyyy > 1900 && mm >= 1 && mm <= 12 && dd >= 1 && dd <= 31) {
|
|
const parsed = new Date(Date.UTC(yyyy, mm - 1, dd, hh, mi, ss))
|
|
if (!Number.isNaN(parsed.getTime())) return parsed
|
|
}
|
|
const dd2 = Number(digitsOnly.slice(0, 2))
|
|
const mm2 = Number(digitsOnly.slice(2, 4))
|
|
const yyyy2 = Number(digitsOnly.slice(4, 8))
|
|
if (yyyy2 > 1900 && mm2 >= 1 && mm2 <= 12 && dd2 >= 1 && dd2 <= 31) {
|
|
const parsed = new Date(Date.UTC(yyyy2, mm2 - 1, dd2))
|
|
if (!Number.isNaN(parsed.getTime())) return parsed
|
|
}
|
|
}
|
|
|
|
const localMatch = trimmed.match(
|
|
/^(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})(?:\s+(\d{1,2}):(\d{2})(?::(\d{2}))?)?$/
|
|
)
|
|
if (localMatch) {
|
|
const dd = Number(localMatch[1])
|
|
const mm = Number(localMatch[2])
|
|
const yyyy = Number(localMatch[3])
|
|
const hh = Number(localMatch[4] || "0")
|
|
const mi = Number(localMatch[5] || "0")
|
|
const ss = Number(localMatch[6] || "0")
|
|
if (yyyy > 1900 && mm >= 1 && mm <= 12 && dd >= 1 && dd <= 31) {
|
|
const parsed = new Date(Date.UTC(yyyy, mm - 1, dd, hh, mi, ss))
|
|
if (!Number.isNaN(parsed.getTime())) return parsed
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
type WindowsOsInfo = {
|
|
productName?: string
|
|
caption?: string
|
|
editionId?: string
|
|
displayVersion?: string
|
|
releaseId?: string
|
|
version?: string
|
|
currentBuild?: string
|
|
currentBuildNumber?: string
|
|
licenseStatus?: number
|
|
isActivated?: boolean
|
|
licenseStatusText?: string
|
|
productId?: string
|
|
partialProductKey?: string
|
|
computerName?: string
|
|
registeredOwner?: string
|
|
installDate?: Date | null
|
|
experience?: string
|
|
}
|
|
|
|
function formatOsVersionDisplay(osName: string | null | undefined, osVersion: string | null | undefined) {
|
|
const name = (osName ?? "").trim()
|
|
const version = (osVersion ?? "").trim()
|
|
if (!version) return ""
|
|
// If Windows and version redundantly starts with the same major (e.g., "11 (26100)"), drop leading major
|
|
const winMatch = name.match(/^windows\s+(\d+)\b/i)
|
|
if (winMatch) {
|
|
const major = winMatch[1]
|
|
const re = new RegExp(`^\\s*${major}(?:\\b|\\.|-_|\\s)+(.*)$`, "i")
|
|
const m = version.match(re)
|
|
if (m) {
|
|
const rest = (m[1] ?? "").trim()
|
|
return rest
|
|
}
|
|
}
|
|
return version
|
|
}
|
|
|
|
function parseWindowsOsInfo(raw: unknown): WindowsOsInfo | null {
|
|
if (!raw) return null
|
|
const parseRecord = (value: Record<string, unknown>) => {
|
|
const read = (k: string, ...alts: string[]) => readString(value, k, ...alts)
|
|
const readNum = (...keys: string[]) => readNumber(value, ...keys)
|
|
const readFlexible = (...keys: string[]) => readText(value, ...keys)
|
|
|
|
const family = read("Family")
|
|
const edition = read("Edition")
|
|
const captionRaw = readFlexible("Caption", "caption")
|
|
const captionNormalized = captionRaw ? captionRaw.replace(/^Microsoft\s+/i, "").trim() : undefined
|
|
|
|
let productName =
|
|
readFlexible("ProductName", "productName", "Name", "name") ??
|
|
(family && edition ? `${family} ${edition}` : family ?? edition ?? undefined)
|
|
if (captionNormalized && /windows/i.test(captionNormalized)) {
|
|
productName = captionNormalized
|
|
}
|
|
|
|
const editionId =
|
|
readFlexible("EditionID", "editionId", "Edition", "edition", "SkuEdition", "skuEdition", "CompositionEditionID", "compositionEditionId") ??
|
|
undefined
|
|
|
|
const displayVersion = readFlexible("DisplayVersion", "displayVersion")
|
|
const versionValue =
|
|
readFlexible("Version", "version", "ReleaseId", "releaseId") ?? displayVersion
|
|
|
|
const baseBuild =
|
|
readFlexible("CurrentBuildNumber", "currentBuildNumber", "CurrentBuild", "currentBuild", "OSBuild", "osBuild", "BuildNumber", "buildNumber") ??
|
|
undefined
|
|
const ubrRaw = readFlexible("UBR")
|
|
const licenseStatus = readNum("LicenseStatus", "licenseStatus")
|
|
const licenseStatusTextRaw = readFlexible(
|
|
"LicenseStatusDescription",
|
|
"licenseStatusDescription",
|
|
"StatusDescription",
|
|
"statusDescription",
|
|
"Status",
|
|
"status"
|
|
)
|
|
const licenseStatusText = licenseStatusTextRaw ? licenseStatusTextRaw.trim() : undefined
|
|
const currentBuildNumber =
|
|
baseBuild && ubrRaw && /^\d+$/.test(ubrRaw) ? `${baseBuild}.${ubrRaw}` : baseBuild ?? readFlexible("BuildNumber", "buildNumber")
|
|
const currentBuild = baseBuild
|
|
|
|
const isActivatedRaw = value["IsActivated"] ?? value["isActivated"]
|
|
const isLicensedRaw = value["IsLicensed"] ?? value["isLicensed"]
|
|
const isActivated =
|
|
typeof isActivatedRaw === "boolean"
|
|
? isActivatedRaw
|
|
: typeof isActivatedRaw === "number"
|
|
? isActivatedRaw === 1
|
|
: typeof isActivatedRaw === "string"
|
|
? isActivatedRaw.toLowerCase() === "true"
|
|
: typeof isLicensedRaw === "boolean"
|
|
? isLicensedRaw
|
|
: typeof isLicensedRaw === "number"
|
|
? isLicensedRaw === 1
|
|
: typeof isLicensedRaw === "string"
|
|
? ["1", "true", "licensed", "license", "activated"].includes(isLicensedRaw.toLowerCase())
|
|
: licenseStatus === 1 || Boolean(licenseStatusText && /licensed|activated|licenciado/i.test(licenseStatusText))
|
|
|
|
const installDate =
|
|
parseWindowsInstallDate(value["InstallDate"]) ??
|
|
parseWindowsInstallDate(value["InstallationDate"]) ??
|
|
parseWindowsInstallDate(value["InstallDateTime"]) ??
|
|
parseWindowsInstallDate(value["InstalledOn"])
|
|
|
|
const experience = (() => {
|
|
const exp = readFlexible("Experience", "experience")
|
|
if (exp) return exp
|
|
const pack = readFlexible("FeatureExperiencePack", "featureExperiencePack")
|
|
if (pack) {
|
|
const trimmed = pack.trim()
|
|
if (trimmed) return `Pacote de experiência ${trimmed}`
|
|
}
|
|
return currentBuildNumber ? `OS Build ${currentBuildNumber}` : undefined
|
|
})()
|
|
|
|
const productId = readFlexible("ProductID", "productID", "ProductId", "productId", "ProductKeyId", "productKeyId")
|
|
const partialProductKey = readFlexible("PartialProductKey", "partialProductKey")
|
|
const computerName = readFlexible("DeviceName", "deviceName", "ComputerName", "computerName", "CSName", "csName", "HostName", "hostName")
|
|
const registeredOwner = readFlexible("RegisteredOwner", "registeredOwner", "RegisteredOrganization", "registeredOrganization")
|
|
|
|
return {
|
|
productName,
|
|
editionId,
|
|
displayVersion,
|
|
version: versionValue,
|
|
releaseId: read("ReleaseId", "releaseId"),
|
|
currentBuild,
|
|
currentBuildNumber,
|
|
licenseStatus,
|
|
isActivated,
|
|
licenseStatusText,
|
|
productId,
|
|
partialProductKey,
|
|
computerName,
|
|
registeredOwner,
|
|
installDate,
|
|
experience,
|
|
caption: captionNormalized ?? captionRaw ?? undefined,
|
|
}
|
|
}
|
|
|
|
if (Array.isArray(raw)) {
|
|
for (const entry of raw) {
|
|
const record = toRecord(entry)
|
|
if (record) {
|
|
return parseRecord(record)
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
if (typeof raw === "string") {
|
|
return { productName: raw }
|
|
}
|
|
const record = toRecord(raw)
|
|
if (!record) return null
|
|
return parseRecord(record)
|
|
}
|
|
|
|
function normalizeWindowsSoftwareEntry(value: unknown): NormalizedSoftwareEntry | null {
|
|
const record = toRecord(value)
|
|
if (!record) return null
|
|
|
|
const name =
|
|
readString(record, "DisplayName", "displayName", "Name", "name") ??
|
|
readText(record, "Title", "title") ??
|
|
""
|
|
if (!name) return null
|
|
|
|
const version = readString(record, "DisplayVersion", "displayVersion", "Version", "version") ?? undefined
|
|
const publisher = readString(record, "Publisher", "publisher", "Vendor", "vendor") ?? undefined
|
|
const installDate =
|
|
parseWindowsInstallDate(record["InstallDate"]) ??
|
|
parseWindowsInstallDate(record["InstallDateUTC"]) ??
|
|
parseWindowsInstallDate(record["InstallDateTime"]) ??
|
|
parseWindowsInstallDate(record["InstallDateFromRegistry"]) ??
|
|
parseWindowsInstallDate(record["InstallDateFromRegistryUTC"]) ??
|
|
parseWindowsInstallDate(record["InstalledDate"]) ??
|
|
parseWindowsInstallDate(record["InstalledOn"]) ??
|
|
null
|
|
|
|
const source = readString(record, "ParentDisplayName", "ParentKeyName", "SystemComponent") ?? undefined
|
|
|
|
return {
|
|
name,
|
|
version,
|
|
publisher,
|
|
installDate,
|
|
source,
|
|
}
|
|
}
|
|
|
|
function parseBytesLike(value: unknown): number | undefined {
|
|
if (typeof value === "number" && Number.isFinite(value)) return value
|
|
if (typeof value === "string") {
|
|
const trimmed = value.trim()
|
|
if (!trimmed) return undefined
|
|
const normalized = trimmed.replace(",", ".")
|
|
const match = normalized.match(/^([\d.]+)\s*(ti|tb|tib|gb|gib|mb|mib|kb|kib|b)?$/i)
|
|
if (match) {
|
|
const amount = Number(match[1])
|
|
if (Number.isNaN(amount)) return undefined
|
|
const unit = match[2]?.toLowerCase()
|
|
const base = 1024
|
|
const unitMap: Record<string, number> = {
|
|
b: 1,
|
|
kb: base,
|
|
kib: base,
|
|
mb: base ** 2,
|
|
mib: base ** 2,
|
|
gb: base ** 3,
|
|
gib: base ** 3,
|
|
tb: base ** 4,
|
|
tib: base ** 4,
|
|
ti: base ** 4,
|
|
}
|
|
if (unit) {
|
|
const multiplier = unitMap[unit]
|
|
if (multiplier) {
|
|
return amount * multiplier
|
|
}
|
|
}
|
|
return amount
|
|
}
|
|
const digits = normalized.replace(/[^0-9.]/g, "")
|
|
if (digits) {
|
|
const fallback = Number(digits)
|
|
if (!Number.isNaN(fallback)) return fallback
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function deriveVendor(record: Record<string, unknown>): string | undefined {
|
|
const direct = readString(record, "vendor", "Vendor", "AdapterCompatibility")
|
|
if (direct) return direct
|
|
const pnp = readString(record, "PNPDeviceID")
|
|
if (!pnp) return undefined
|
|
const match = pnp.match(/VEN_([0-9A-F]{4})/i)
|
|
if (match) {
|
|
const vendorCode = match[1].toUpperCase()
|
|
const vendorMap: Record<string, string> = {
|
|
"10DE": "NVIDIA",
|
|
"1002": "AMD",
|
|
"1022": "AMD",
|
|
"8086": "Intel",
|
|
"8087": "Intel",
|
|
"1AF4": "Red Hat",
|
|
}
|
|
return vendorMap[vendorCode] ?? `VEN_${vendorCode}`
|
|
}
|
|
const segments = pnp.split("\\")
|
|
const last = segments.pop()
|
|
return last && last.trim().length > 0 ? last : pnp
|
|
}
|
|
|
|
function normalizeGpuSource(value: unknown): GpuAdapter | null {
|
|
if (typeof value === "string") {
|
|
const name = value.trim()
|
|
return name ? { name } : null
|
|
}
|
|
const record = toRecord(value)
|
|
if (!record) return null
|
|
const name = readString(record, "name", "Name", "_name", "AdapterCompatibility")
|
|
const vendor = deriveVendor(record)
|
|
const driver = readString(record, "driver", "DriverVersion", "driverVersion")
|
|
const memoryBytes =
|
|
readNumber(record, "memoryBytes", "MemoryBytes", "AdapterRAM", "VRAM", "vramBytes") ??
|
|
parseBytesLike(record["AdapterRAM"] ?? record["VRAM"] ?? record["vram"])
|
|
if (!name && !vendor && !driver && memoryBytes === undefined) {
|
|
return null
|
|
}
|
|
return { name, vendor, driver, memoryBytes }
|
|
}
|
|
|
|
function uniqueBy<T>(items: T[], keyFn: (item: T) => string): T[] {
|
|
const seen = new Set<string>()
|
|
const result: T[] = []
|
|
items.forEach((item) => {
|
|
const key = keyFn(item)
|
|
if (key && !seen.has(key)) {
|
|
seen.add(key)
|
|
result.push(item)
|
|
}
|
|
})
|
|
return result
|
|
}
|
|
|
|
export type MachinesQueryItem = {
|
|
id: string
|
|
tenantId: string
|
|
hostname: string
|
|
companyId: string | null
|
|
companySlug: string | null
|
|
companyName: string | null
|
|
osName: string | null
|
|
osVersion: string | null
|
|
architecture: string | null
|
|
macAddresses: string[]
|
|
serialNumbers: string[]
|
|
authUserId: string | null
|
|
authEmail: string | null
|
|
persona: string | null
|
|
assignedUserId: string | null
|
|
assignedUserEmail: string | null
|
|
assignedUserName: string | null
|
|
assignedUserRole: string | null
|
|
status: string | null
|
|
isActive: boolean
|
|
lastHeartbeatAt: number | null
|
|
heartbeatAgeMs: number | null
|
|
registeredBy: string | null
|
|
createdAt: number
|
|
updatedAt: number
|
|
token: {
|
|
expiresAt: number
|
|
lastUsedAt: number | null
|
|
usageCount: number
|
|
} | null
|
|
metrics: MachineMetrics
|
|
inventory: MachineInventory | null
|
|
postureAlerts?: Array<Record<string, unknown>> | null
|
|
lastPostureAt?: number | null
|
|
linkedUsers?: Array<{ id: string; email: string; name: string }>
|
|
remoteAccessEntries: MachineRemoteAccessEntry[]
|
|
}
|
|
|
|
export function normalizeMachineItem(raw: Record<string, unknown>): MachinesQueryItem {
|
|
const { remoteAccess, ...rest } = raw as Record<string, unknown> & { remoteAccess?: unknown }
|
|
return {
|
|
...(rest as MachinesQueryItem),
|
|
remoteAccessEntries: normalizeMachineRemoteAccessList(remoteAccess),
|
|
}
|
|
}
|
|
|
|
function useMachinesQuery(tenantId: string): { machines: MachinesQueryItem[]; isLoading: boolean } {
|
|
const result = useQuery(api.machines.listByTenant, {
|
|
tenantId,
|
|
includeMetadata: true,
|
|
}) as Array<Record<string, unknown>> | undefined
|
|
const machines = useMemo(() => (result ?? []).map((item) => normalizeMachineItem(item)), [result])
|
|
return {
|
|
machines,
|
|
isLoading: result === undefined,
|
|
}
|
|
}
|
|
|
|
const DEFAULT_OFFLINE_THRESHOLD_MS = 10 * 60 * 1000
|
|
const DEFAULT_STALE_THRESHOLD_MS = DEFAULT_OFFLINE_THRESHOLD_MS * 12
|
|
|
|
function parseThreshold(raw: string | undefined, fallback: number) {
|
|
if (!raw) return fallback
|
|
const parsed = Number(raw)
|
|
if (!Number.isFinite(parsed) || parsed <= 0) return fallback
|
|
return parsed
|
|
}
|
|
|
|
const MACHINE_OFFLINE_THRESHOLD_MS = parseThreshold(process.env.NEXT_PUBLIC_MACHINE_OFFLINE_THRESHOLD_MS, DEFAULT_OFFLINE_THRESHOLD_MS)
|
|
const MACHINE_STALE_THRESHOLD_MS = parseThreshold(process.env.NEXT_PUBLIC_MACHINE_STALE_THRESHOLD_MS, DEFAULT_STALE_THRESHOLD_MS)
|
|
|
|
const statusLabels: Record<string, string> = {
|
|
online: "Online",
|
|
offline: "Offline",
|
|
stale: "Sem sinal",
|
|
maintenance: "Manutenção",
|
|
blocked: "Bloqueada",
|
|
deactivated: "Desativada",
|
|
unknown: "Desconhecida",
|
|
}
|
|
|
|
const TICKET_PRIORITY_META: Record<string, { label: string; badgeClass: string }> = {
|
|
LOW: { label: "Baixa", badgeClass: "border border-slate-200 bg-slate-100 text-slate-600" },
|
|
MEDIUM: { label: "Média", badgeClass: "border border-sky-200 bg-sky-100 text-sky-700" },
|
|
HIGH: { label: "Alta", badgeClass: "border border-amber-200 bg-amber-50 text-amber-700" },
|
|
URGENT: { label: "Urgente", badgeClass: "border border-rose-200 bg-rose-50 text-rose-700" },
|
|
}
|
|
|
|
function getTicketPriorityMeta(priority: TicketPriority | string | null | undefined) {
|
|
if (!priority) {
|
|
return { label: "Sem prioridade", badgeClass: "border border-slate-200 bg-slate-100 text-neutral-600" }
|
|
}
|
|
const normalized = priority.toUpperCase()
|
|
|
|
return (
|
|
TICKET_PRIORITY_META[normalized] ?? {
|
|
label: priority.charAt(0).toUpperCase() + priority.slice(1).toLowerCase(),
|
|
badgeClass: "border border-slate-200 bg-slate-100 text-neutral-600",
|
|
}
|
|
)
|
|
}
|
|
|
|
const statusClasses: Record<string, string> = {
|
|
online: "border-emerald-200 text-emerald-600",
|
|
offline: "border-rose-200 text-rose-600",
|
|
stale: "border-amber-200 text-amber-600",
|
|
maintenance: "border-amber-300 text-amber-700",
|
|
blocked: "border-orange-200 text-orange-600",
|
|
deactivated: "border-slate-200 bg-slate-50 text-slate-500",
|
|
unknown: "border-slate-200 text-slate-600",
|
|
}
|
|
|
|
const REMOTE_ACCESS_PROVIDERS = [
|
|
{ value: "TEAMVIEWER", label: "TeamViewer" },
|
|
{ value: "ANYDESK", label: "AnyDesk" },
|
|
{ value: "SUPREMO", label: "Supremo" },
|
|
{ value: "RUSTDESK", label: "RustDesk" },
|
|
{ value: "QUICKSUPPORT", label: "TeamViewer QS" },
|
|
{ value: "CHROME_REMOTE_DESKTOP", label: "Chrome Remote Desktop" },
|
|
{ value: "DW_SERVICE", label: "DWService" },
|
|
{ value: "OTHER", label: "Outro" },
|
|
] as const
|
|
|
|
type RemoteAccessProviderValue = (typeof REMOTE_ACCESS_PROVIDERS)[number]["value"]
|
|
|
|
const POSTURE_ALERT_LABELS: Record<string, string> = {
|
|
CPU_HIGH: "CPU alta",
|
|
SERVICE_DOWN: "Serviço indisponível",
|
|
SMART_FAIL: "Falha SMART",
|
|
}
|
|
|
|
function formatPostureAlertKind(raw?: string | null): string {
|
|
if (!raw) return "Alerta"
|
|
const normalized = raw.toUpperCase()
|
|
if (POSTURE_ALERT_LABELS[normalized]) {
|
|
return POSTURE_ALERT_LABELS[normalized]
|
|
}
|
|
return raw
|
|
.toLowerCase()
|
|
.replace(/_/g, " ")
|
|
.replace(/\b\w/g, (char) => char.toUpperCase())
|
|
}
|
|
|
|
function postureSeverityClass(severity?: string | null) {
|
|
return (severity ?? "warning").toLowerCase() === "critical"
|
|
? "border-rose-500/20 bg-rose-500/10"
|
|
: "border-amber-500/20 bg-amber-500/10"
|
|
}
|
|
|
|
function formatRelativeTime(date?: Date | null) {
|
|
if (!date) return "Nunca"
|
|
try {
|
|
return formatDistanceToNowStrict(date, { addSuffix: true, locale: ptBR })
|
|
} catch {
|
|
return "—"
|
|
}
|
|
}
|
|
|
|
function formatInstallDate(date?: Date | null) {
|
|
if (!date) return null
|
|
return `${formatAbsoluteDateTime(date)} (${formatRelativeTime(date)})`
|
|
}
|
|
|
|
function formatDate(date?: Date | null) {
|
|
if (!date) return "—"
|
|
return format(date, "dd/MM/yyyy HH:mm")
|
|
}
|
|
|
|
function formatAbsoluteDateTime(date?: Date | null) {
|
|
if (!date) return "—"
|
|
return new Intl.DateTimeFormat("pt-BR", {
|
|
dateStyle: "long",
|
|
timeStyle: "short",
|
|
}).format(date)
|
|
}
|
|
|
|
function parseDateish(value: unknown): Date | null {
|
|
if (!value) return null
|
|
if (value instanceof Date && !Number.isNaN(value.getTime())) return value
|
|
if (typeof value === "number" && Number.isFinite(value)) {
|
|
const numeric = value > 1e12 ? value : value > 1e9 ? value * 1000 : value
|
|
const date = new Date(numeric)
|
|
return Number.isNaN(date.getTime()) ? null : date
|
|
}
|
|
if (typeof value === "string") {
|
|
const trimmed = value.trim()
|
|
if (!trimmed) return null
|
|
const numericValue = Number(trimmed)
|
|
if (Number.isFinite(numericValue)) {
|
|
const asMs = trimmed.length >= 13 ? numericValue : numericValue * 1000
|
|
const date = new Date(asMs)
|
|
if (!Number.isNaN(date.getTime())) return date
|
|
}
|
|
const date = new Date(trimmed)
|
|
if (!Number.isNaN(date.getTime())) return date
|
|
}
|
|
return null
|
|
}
|
|
|
|
function getMetricsTimestamp(metrics: MachineMetrics): Date | null {
|
|
if (!metrics || typeof metrics !== "object") return null
|
|
const data = metrics as Record<string, unknown>
|
|
const candidates = [
|
|
data["collectedAt"],
|
|
data["collected_at"],
|
|
data["collected_at_iso"],
|
|
data["collected_at_ms"],
|
|
data["timestamp"],
|
|
data["updatedAt"],
|
|
data["updated_at"],
|
|
data["createdAt"],
|
|
data["created_at"],
|
|
]
|
|
for (const candidate of candidates) {
|
|
const parsed = parseDateish(candidate)
|
|
if (parsed) return parsed
|
|
}
|
|
return null
|
|
}
|
|
|
|
function formatBytes(bytes?: number | null) {
|
|
if (!bytes || Number.isNaN(bytes)) return "—"
|
|
const units = ["B", "KB", "MB", "GB", "TB"]
|
|
let value = bytes
|
|
let unitIndex = 0
|
|
while (value >= 1024 && unitIndex < units.length - 1) {
|
|
value /= 1024
|
|
unitIndex += 1
|
|
}
|
|
return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
|
|
}
|
|
|
|
function formatPercent(value?: number | null) {
|
|
if (value === null || value === undefined || Number.isNaN(value)) return "—"
|
|
const normalized = value > 1 ? value : value * 100
|
|
return `${normalized.toFixed(0)}%`
|
|
}
|
|
|
|
const BADGE_POSITIVE = "gap-1 border-emerald-500/20 bg-emerald-500/15 text-emerald-700"
|
|
const BADGE_WARNING = "gap-1 border-amber-500/20 bg-amber-100 text-amber-700"
|
|
const BADGE_NEUTRAL = "gap-1 border-slate-300 bg-slate-100 text-slate-600"
|
|
|
|
function parseBooleanLike(value: unknown): boolean | undefined {
|
|
if (typeof value === "boolean") return value
|
|
if (typeof value === "number") {
|
|
if (value === 1) return true
|
|
if (value === 0) return false
|
|
}
|
|
if (typeof value === "string") {
|
|
const normalized = value.trim().toLowerCase()
|
|
if (["yes", "sim", "true", "enabled", "on", "ativo", "active", "y", "1"].includes(normalized)) return true
|
|
if (["no", "não", "nao", "false", "disabled", "off", "inativo", "not joined", "n", "0"].includes(normalized)) return false
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function toNumberArray(value: unknown): number[] {
|
|
if (!value) return []
|
|
if (Array.isArray(value)) {
|
|
return value
|
|
.map((item) => {
|
|
if (typeof item === "number") return item
|
|
if (typeof item === "string") {
|
|
const parsed = Number(item)
|
|
return Number.isNaN(parsed) ? null : parsed
|
|
}
|
|
return null
|
|
})
|
|
.filter((item): item is number => item !== null)
|
|
}
|
|
if (typeof value === "number") return [value]
|
|
if (typeof value === "string" && value.trim().length > 0) {
|
|
return value
|
|
.replace(/[^\d,]/g, " ")
|
|
.split(/[,\s]+/)
|
|
.map((part) => Number(part))
|
|
.filter((num) => !Number.isNaN(num))
|
|
}
|
|
return []
|
|
}
|
|
|
|
function describeDomainRole(role?: number | null): string | null {
|
|
if (role === null || role === undefined) return null
|
|
const map: Record<number, string> = {
|
|
0: "Estação isolada",
|
|
1: "Estação em domínio",
|
|
2: "Servidor isolado",
|
|
3: "Servidor em domínio",
|
|
4: "Controlador de domínio (backup)",
|
|
5: "Controlador de domínio (primário)",
|
|
}
|
|
return map[role] ?? `Função ${role}`
|
|
}
|
|
|
|
function describePcSystemType(code?: number | null): string | null {
|
|
if (code === null || code === undefined) return null
|
|
const map: Record<number, string> = {
|
|
0: "Não especificado",
|
|
1: "Desktop",
|
|
2: "Portátil / Laptop",
|
|
3: "Workstation",
|
|
4: "Servidor corporativo",
|
|
5: "Servidor SOHO",
|
|
8: "Tablet / Slate",
|
|
9: "Conversível",
|
|
10: "Sistema baseado em detecção",
|
|
}
|
|
return map[code] ?? `Tipo ${code}`
|
|
}
|
|
|
|
function describeDeviceGuardService(code: number): string {
|
|
const map: Record<number, string> = {
|
|
1: "Credential Guard",
|
|
2: "HVCI (Kernel Integrity)",
|
|
3: "Secure Boot com DMA",
|
|
4: "Hypervisor com Device Guard",
|
|
5: "Aplicação protegida",
|
|
}
|
|
return map[code] ?? `Serviço ${code}`
|
|
}
|
|
|
|
function describeVbsStatus(code?: number | null): string | null {
|
|
switch (code) {
|
|
case 0:
|
|
return "VBS desabilitado"
|
|
case 1:
|
|
return "VBS habilitado (inativo)"
|
|
case 2:
|
|
return "VBS ativo (sem serviços)"
|
|
case 3:
|
|
return "VBS ativo com proteções"
|
|
default:
|
|
return code != null ? `VBS status ${code}` : null
|
|
}
|
|
}
|
|
|
|
function describeAuOption(value?: number | null): string | null {
|
|
switch (value ?? -1) {
|
|
case 1:
|
|
return "Não configurado"
|
|
case 2:
|
|
return "Notificar antes de baixar"
|
|
case 3:
|
|
return "Baixar automático e notificar"
|
|
case 4:
|
|
return "Baixar e instalar automaticamente"
|
|
case 5:
|
|
return "Administrador local define"
|
|
default:
|
|
return value != null ? `Opção ${value}` : null
|
|
}
|
|
}
|
|
|
|
function describeScheduledDay(value?: number | null): string | null {
|
|
if (value === null || value === undefined) return null
|
|
if (value === 0) return "Todos os dias"
|
|
const map = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"]
|
|
return map[value - 1] ?? `Dia ${value}`
|
|
}
|
|
|
|
function getStatusVariant(status?: string | null) {
|
|
if (!status) return { label: statusLabels.unknown, className: statusClasses.unknown }
|
|
const normalized = status.toLowerCase()
|
|
return {
|
|
label: statusLabels[normalized] ?? status,
|
|
className: statusClasses[normalized] ?? statusClasses.unknown,
|
|
}
|
|
}
|
|
|
|
function resolveMachineStatus(machine: { status?: string | null; lastHeartbeatAt?: number | null; isActive?: boolean | null }): string {
|
|
if (machine.isActive === false) return "deactivated"
|
|
const manualStatus = (machine.status ?? "").toLowerCase()
|
|
if (["maintenance", "blocked"].includes(manualStatus)) {
|
|
return manualStatus
|
|
}
|
|
const heartbeat = machine.lastHeartbeatAt
|
|
if (typeof heartbeat === "number" && Number.isFinite(heartbeat) && heartbeat > 0) {
|
|
const age = Date.now() - heartbeat
|
|
if (age <= MACHINE_OFFLINE_THRESHOLD_MS) return "online"
|
|
if (age <= MACHINE_STALE_THRESHOLD_MS) return "offline"
|
|
return "stale"
|
|
}
|
|
return machine.status ?? "unknown"
|
|
}
|
|
|
|
function OsIcon({ osName }: { osName?: string | null }) {
|
|
const name = (osName ?? "").toLowerCase()
|
|
if (name.includes("mac") || name.includes("darwin") || name.includes("macos")) return <Apple className="size-4 text-black" />
|
|
if (name.includes("linux")) return <Terminal className="size-4 text-black" />
|
|
// fallback para Windows/outros como monitor genérico
|
|
return <Monitor className="size-4 text-black" />
|
|
}
|
|
|
|
export function AdminMachinesOverview({ tenantId, initialCompanyFilterSlug = "all" }: { tenantId: string; initialCompanyFilterSlug?: string }) {
|
|
const { machines, isLoading } = useMachinesQuery(tenantId)
|
|
const [q, setQ] = useState("")
|
|
const [statusFilter, setStatusFilter] = useState<string>("all")
|
|
const [companyFilterSlug, setCompanyFilterSlug] = useState<string>(initialCompanyFilterSlug)
|
|
const [companySearch, setCompanySearch] = useState<string>("")
|
|
const [isCompanyPopoverOpen, setIsCompanyPopoverOpen] = useState(false)
|
|
const [onlyAlerts, setOnlyAlerts] = useState<boolean>(false)
|
|
const [isExportDialogOpen, setIsExportDialogOpen] = useState(false)
|
|
const [exportSelection, setExportSelection] = useState<string[]>([])
|
|
const [isExporting, setIsExporting] = useState(false)
|
|
const [exportProgress, setExportProgress] = useState(0)
|
|
const [exportError, setExportError] = useState<string | null>(null)
|
|
const { convexUserId } = useAuth()
|
|
const companies = useQuery(
|
|
convexUserId ? api.companies.list : undefined,
|
|
convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : undefined
|
|
) as Array<{ id: string; name: string; slug?: string }> | undefined
|
|
const companyNameBySlug = useMemo(() => {
|
|
const map = new Map<string, string>()
|
|
machines.forEach((m) => {
|
|
if (m.companySlug && m.companyName) {
|
|
map.set(m.companySlug, m.companyName)
|
|
}
|
|
})
|
|
;(companies ?? []).forEach((c) => {
|
|
if (c.slug) {
|
|
map.set(c.slug, c.name)
|
|
}
|
|
})
|
|
return map
|
|
}, [machines, companies])
|
|
|
|
const companyOptions = useMemo(() => {
|
|
if (companies && companies.length > 0) {
|
|
return companies
|
|
.map((c) => ({ slug: c.slug ?? c.id, name: c.name }))
|
|
.sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
|
}
|
|
const fallback = new Map<string, string>()
|
|
machines.forEach((m) => {
|
|
if (m.companySlug) {
|
|
fallback.set(m.companySlug, m.companyName ?? m.companySlug)
|
|
}
|
|
})
|
|
return Array.from(fallback.entries())
|
|
.map(([slug, name]) => ({ slug, name }))
|
|
.sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
|
}, [companies, machines])
|
|
|
|
const filteredMachines = useMemo(() => {
|
|
const text = q.trim().toLowerCase()
|
|
return machines.filter((m) => {
|
|
if (onlyAlerts && !(Array.isArray(m.postureAlerts) && m.postureAlerts.length > 0)) return false
|
|
if (statusFilter !== "all") {
|
|
const s = resolveMachineStatus(m).toLowerCase()
|
|
if (s !== statusFilter) return false
|
|
}
|
|
if (companyFilterSlug !== "all" && (m.companySlug ?? "") !== companyFilterSlug) return false
|
|
if (!text) return true
|
|
const hay = [
|
|
m.hostname,
|
|
m.authEmail ?? "",
|
|
(m.macAddresses ?? []).join(" "),
|
|
(m.serialNumbers ?? []).join(" "),
|
|
]
|
|
.join(" ")
|
|
.toLowerCase()
|
|
return hay.includes(text)
|
|
})
|
|
}, [machines, q, statusFilter, companyFilterSlug, onlyAlerts])
|
|
const handleOpenExportDialog = useCallback(() => {
|
|
if (filteredMachines.length === 0) {
|
|
toast.info("Não há máquinas para exportar com os filtros atuais.")
|
|
return
|
|
}
|
|
setExportSelection(filteredMachines.map((m) => m.id))
|
|
setExportProgress(0)
|
|
setExportError(null)
|
|
setIsExporting(false)
|
|
setIsExportDialogOpen(true)
|
|
}, [filteredMachines])
|
|
|
|
const handleExportDialogOpenChange = useCallback((open: boolean) => {
|
|
if (!open && isExporting) return
|
|
setIsExportDialogOpen(open)
|
|
}, [isExporting])
|
|
|
|
useEffect(() => {
|
|
if (!isExportDialogOpen) {
|
|
setExportSelection([])
|
|
setExportProgress(0)
|
|
setExportError(null)
|
|
setIsExporting(false)
|
|
}
|
|
}, [isExportDialogOpen])
|
|
|
|
useEffect(() => {
|
|
if (!isExportDialogOpen) return
|
|
const allowed = new Set(filteredMachines.map((m) => m.id))
|
|
setExportSelection((prev) => {
|
|
const next = prev.filter((id) => allowed.has(id))
|
|
return next.length === prev.length ? prev : next
|
|
})
|
|
}, [filteredMachines, isExportDialogOpen])
|
|
|
|
const handleToggleMachineSelection = useCallback((machineId: string, checked: boolean) => {
|
|
setExportSelection((prev) => {
|
|
if (checked) {
|
|
if (prev.includes(machineId)) return prev
|
|
return [...prev, machineId]
|
|
}
|
|
return prev.filter((id) => id !== machineId)
|
|
})
|
|
}, [])
|
|
|
|
const handleSelectAllMachines = useCallback((checked: boolean) => {
|
|
if (checked) {
|
|
setExportSelection(filteredMachines.map((m) => m.id))
|
|
} else {
|
|
setExportSelection([])
|
|
}
|
|
}, [filteredMachines])
|
|
|
|
const handleConfirmExport = useCallback(async () => {
|
|
const orderedSelection = filteredMachines.map((m) => m.id).filter((id) => exportSelection.includes(id))
|
|
if (orderedSelection.length === 0) {
|
|
toast.info("Selecione ao menos uma máquina para exportar.")
|
|
return
|
|
}
|
|
|
|
setIsExporting(true)
|
|
setExportError(null)
|
|
setExportProgress(5)
|
|
|
|
try {
|
|
const params = new URLSearchParams()
|
|
if (companyFilterSlug !== "all") {
|
|
params.set("companyId", companyFilterSlug)
|
|
}
|
|
orderedSelection.forEach((id) => params.append("machineId", id))
|
|
const qs = params.toString()
|
|
const url = `/api/reports/machines-inventory.xlsx${qs ? `?${qs}` : ""}`
|
|
|
|
const response = await fetch(url)
|
|
if (!response.ok) {
|
|
throw new Error(`Export failed with status ${response.status}`)
|
|
}
|
|
|
|
const contentLengthHeader = response.headers.get("Content-Length")
|
|
const totalBytes = contentLengthHeader ? parseInt(contentLengthHeader, 10) : Number.NaN
|
|
const hasLength = Number.isFinite(totalBytes) && totalBytes > 0
|
|
const disposition = response.headers.get("Content-Disposition")
|
|
const filenameMatch = disposition?.match(/filename="?([^";]+)"?/i)
|
|
const filename = filenameMatch?.[1] ?? `machines-inventory-${new Date().toISOString().slice(0, 10)}.xlsx`
|
|
|
|
let blob: Blob
|
|
if (!response.body || typeof response.body.getReader !== "function") {
|
|
blob = await response.blob()
|
|
setExportProgress(100)
|
|
} else {
|
|
const reader = response.body.getReader()
|
|
const chunks: ArrayBuffer[] = []
|
|
let received = 0
|
|
|
|
while (true) {
|
|
const { value, done } = await reader.read()
|
|
if (done) break
|
|
if (value) {
|
|
chunks.push(value.buffer.slice(value.byteOffset, value.byteOffset + value.byteLength))
|
|
received += value.length
|
|
if (hasLength) {
|
|
const percent = Math.min(99, Math.round((received / totalBytes) * 100))
|
|
setExportProgress(percent)
|
|
} else {
|
|
setExportProgress((prev) => (prev >= 95 ? prev : prev + 5))
|
|
}
|
|
}
|
|
}
|
|
|
|
blob = new Blob(chunks, { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" })
|
|
setExportProgress(100)
|
|
}
|
|
|
|
const downloadUrl = window.URL.createObjectURL(blob)
|
|
const link = document.createElement("a")
|
|
link.href = downloadUrl
|
|
link.download = filename
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
link.remove()
|
|
window.URL.revokeObjectURL(downloadUrl)
|
|
|
|
toast.success(`Exportação gerada para ${orderedSelection.length} máquina${orderedSelection.length === 1 ? "" : "s"}.`)
|
|
setIsExporting(false)
|
|
setIsExportDialogOpen(false)
|
|
} catch (error) {
|
|
console.error("Failed to export machines inventory", error)
|
|
setIsExporting(false)
|
|
setExportProgress(0)
|
|
setExportError("Não foi possível gerar o arquivo. Tente novamente.")
|
|
}
|
|
}, [companyFilterSlug, exportSelection, filteredMachines])
|
|
|
|
const exportableCount = filteredMachines.length
|
|
const selectedCount = exportSelection.length
|
|
const selectAllState: boolean | "indeterminate" = exportableCount === 0
|
|
? false
|
|
: selectedCount === exportableCount
|
|
? true
|
|
: selectedCount > 0
|
|
? "indeterminate"
|
|
: false
|
|
|
|
|
|
|
|
return (
|
|
<div className="grid gap-6">
|
|
<Card className="border-slate-200">
|
|
<CardHeader>
|
|
<CardTitle>Máquinas registradas</CardTitle>
|
|
<CardDescription>Sincronizadas via agente local ou Fleet. Atualiza em tempo real.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="overflow-hidden">
|
|
<div className="mb-3 flex flex-wrap items-center gap-2">
|
|
<div className="min-w-[220px] flex-1">
|
|
<Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar hostname, e-mail, MAC, serial..." />
|
|
</div>
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="min-w-36">
|
|
<SelectValue placeholder="Status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos status</SelectItem>
|
|
<SelectItem value="online">Online</SelectItem>
|
|
<SelectItem value="offline">Offline</SelectItem>
|
|
<SelectItem value="stale">Sem sinal</SelectItem>
|
|
<SelectItem value="unknown">Desconhecido</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Popover open={isCompanyPopoverOpen} onOpenChange={setIsCompanyPopoverOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" className="min-w-56 justify-between">
|
|
{(() => {
|
|
if (companyFilterSlug === "all") return "Todas empresas"
|
|
const found = companyOptions.find((c) => c.slug === companyFilterSlug)
|
|
return found?.name ?? companyFilterSlug
|
|
})()}
|
|
<span className="ml-2 text-slate-400">▾</span>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-72 p-2" align="start">
|
|
<div className="space-y-2">
|
|
<Input
|
|
value={companySearch}
|
|
onChange={(e) => setCompanySearch(e.target.value)}
|
|
placeholder="Buscar empresa..."
|
|
/>
|
|
<div className="max-h-64 overflow-auto rounded-md border border-slate-200">
|
|
<button
|
|
type="button"
|
|
onClick={() => { setCompanyFilterSlug("all"); setCompanySearch(""); setIsCompanyPopoverOpen(false) }}
|
|
className="block w-full px-3 py-2 text-left text-sm hover:bg-slate-100"
|
|
>
|
|
Todas empresas
|
|
</button>
|
|
{companyOptions
|
|
.filter((c) => c.name.toLowerCase().includes(companySearch.toLowerCase()))
|
|
.map((c) => (
|
|
<button
|
|
key={c.slug}
|
|
type="button"
|
|
onClick={() => { setCompanyFilterSlug(c.slug); setCompanySearch(""); setIsCompanyPopoverOpen(false) }}
|
|
className="block w-full px-3 py-2 text-left text-sm hover:bg-slate-100"
|
|
>
|
|
{c.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<label className="inline-flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50/80 px-3 py-1.5 text-sm">
|
|
<Checkbox checked={onlyAlerts} onCheckedChange={(v) => setOnlyAlerts(Boolean(v))} />
|
|
<span>Somente com alertas</span>
|
|
</label>
|
|
<Button variant="outline" onClick={() => { setQ(""); setStatusFilter("all"); setCompanyFilterSlug("all"); setCompanySearch(""); setOnlyAlerts(false) }}>Limpar</Button>
|
|
<Button size="sm" variant="outline" className="gap-2" onClick={handleOpenExportDialog}>
|
|
<Download className="size-4" />
|
|
Exportar XLSX
|
|
</Button>
|
|
</div>
|
|
{isLoading ? (
|
|
<LoadingState />
|
|
) : machines.length === 0 ? (
|
|
<EmptyState />
|
|
) : (
|
|
<MachinesGrid machines={filteredMachines} companyNameBySlug={companyNameBySlug} />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
<Dialog open={isExportDialogOpen} onOpenChange={handleExportDialogOpenChange}>
|
|
<DialogContent className="max-w-3xl space-y-5">
|
|
<DialogHeader>
|
|
<DialogTitle>Exportar inventário</DialogTitle>
|
|
<DialogDescription>Revise as máquinas antes de gerar o XLSX.</DialogDescription>
|
|
</DialogHeader>
|
|
{filteredMachines.length === 0 ? (
|
|
<div className="rounded-md border border-dashed border-slate-200 px-4 py-8 text-center text-sm text-muted-foreground">
|
|
Nenhuma máquina disponível para exportar com os filtros atuais.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600">
|
|
<span>
|
|
{selectedCount} de {filteredMachines.length} selecionadas
|
|
</span>
|
|
<label className="inline-flex items-center gap-2 font-medium text-slate-600">
|
|
<Checkbox
|
|
checked={selectAllState}
|
|
onCheckedChange={(value) => handleSelectAllMachines(value === true || value === "indeterminate")}
|
|
disabled={isExporting}
|
|
/>
|
|
<span>Selecionar todas</span>
|
|
</label>
|
|
</div>
|
|
<div className="max-h-80 overflow-y-auto rounded-md border border-slate-200">
|
|
<ul className="divide-y divide-slate-100">
|
|
{filteredMachines.map((machine) => {
|
|
const statusKey = resolveMachineStatus(machine)
|
|
const statusLabel = statusLabels[statusKey] ?? statusKey
|
|
const isChecked = exportSelection.includes(machine.id)
|
|
const osParts = [machine.osName ?? "", machine.osVersion ?? ""].filter(Boolean)
|
|
const osLabel = osParts.join(" ")
|
|
return (
|
|
<li key={machine.id}>
|
|
<label className="flex cursor-pointer items-start gap-3 px-3 py-3 hover:bg-slate-50">
|
|
<Checkbox
|
|
checked={isChecked}
|
|
onCheckedChange={(value) => handleToggleMachineSelection(machine.id, value === true || value === "indeterminate")}
|
|
disabled={isExporting}
|
|
/>
|
|
<div className="flex flex-col gap-1 text-sm">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="font-medium text-slate-900">{machine.hostname || machine.authEmail || "Máquina"}</span>
|
|
<Badge variant="outline" className="text-[11px] font-medium uppercase tracking-wide">
|
|
{statusLabel}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
|
<span>{machine.companyName ?? "Sem empresa"}</span>
|
|
{osLabel ? (
|
|
<>
|
|
<span className="text-slate-300">•</span>
|
|
<span>{osLabel}</span>
|
|
</>
|
|
) : null}
|
|
{machine.architecture ? (
|
|
<>
|
|
<span className="text-slate-300">•</span>
|
|
<span>{machine.architecture}</span>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{isExporting ? (
|
|
<div className="space-y-2 rounded-md border border-slate-200 bg-slate-50 px-4 py-3">
|
|
<div className="flex items-center justify-between text-sm font-medium text-slate-700">
|
|
<span>Gerando planilha...</span>
|
|
<span>{Math.min(100, Math.max(0, Math.round(exportProgress)))}%</span>
|
|
</div>
|
|
<Progress value={exportProgress} className="h-2" />
|
|
</div>
|
|
) : null}
|
|
{exportError ? <p className="text-sm text-destructive">{exportError}</p> : null}
|
|
<DialogFooter className="gap-2 sm:gap-2">
|
|
<Button type="button" variant="outline" onClick={() => handleExportDialogOpenChange(false)} disabled={isExporting}>
|
|
Cancelar
|
|
</Button>
|
|
<Button type="button" onClick={handleConfirmExport} disabled={isExporting || selectedCount === 0} className="gap-2">
|
|
{isExporting ? (
|
|
<>
|
|
<Spinner className="mr-2 size-4" />
|
|
Exportando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download className="size-4" />
|
|
Exportar{selectedCount > 0 ? ` (${selectedCount})` : ""}
|
|
</>
|
|
)}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MachineStatusBadge({ status }: { status?: string | null }) {
|
|
const { label, className } = getStatusVariant(status)
|
|
const s = String(status ?? "").toLowerCase()
|
|
const colorClass =
|
|
s === "online"
|
|
? "bg-emerald-500"
|
|
: s === "offline"
|
|
? "bg-rose-500"
|
|
: s === "stale"
|
|
? "bg-amber-500"
|
|
: s === "maintenance"
|
|
? "bg-amber-500"
|
|
: s === "blocked"
|
|
? "bg-orange-500"
|
|
: s === "deactivated"
|
|
? "bg-slate-500"
|
|
: "bg-slate-400"
|
|
const ringClass =
|
|
s === "online"
|
|
? "bg-emerald-400/30"
|
|
: s === "offline"
|
|
? "bg-rose-400/30"
|
|
: s === "stale"
|
|
? "bg-amber-400/30"
|
|
: s === "maintenance"
|
|
? "bg-amber-400/30"
|
|
: s === "blocked"
|
|
? "bg-orange-400/30"
|
|
: s === "deactivated"
|
|
? "bg-slate-400/40"
|
|
: "bg-slate-300/30"
|
|
|
|
const isOnline = s === "online"
|
|
return (
|
|
<Badge
|
|
variant="outline"
|
|
className={cn(
|
|
"inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-1 text-xs font-semibold text-neutral-600 shadow-sm sm:text-sm",
|
|
className
|
|
)}
|
|
>
|
|
<span className="relative inline-flex size-4 items-center justify-center">
|
|
<span className={cn("size-2.5 rounded-full", colorClass)} />
|
|
{isOnline ? (
|
|
<span
|
|
className={cn(
|
|
"absolute left-1/2 top-1/2 size-5 -translate-x-1/2 -translate-y-1/2 rounded-full animate-ping [animation-duration:2s]",
|
|
ringClass
|
|
)}
|
|
/>
|
|
) : null}
|
|
</span>
|
|
{label}
|
|
</Badge>
|
|
)
|
|
}
|
|
|
|
function EmptyState() {
|
|
return (
|
|
<div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-slate-300 bg-slate-50/50 py-12 text-center">
|
|
<ServerCog className="size-10 text-slate-400" />
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-semibold text-slate-600">Nenhuma máquina registrada ainda</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Execute o agente local ou o webhook do Fleet para registrar as máquinas do tenant.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LoadingState() {
|
|
return (
|
|
<div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-slate-300 bg-slate-50/50 py-12 text-center">
|
|
<div className="inline-flex size-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm">
|
|
<Spinner className="size-6 text-slate-500" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-semibold text-slate-600">Carregando máquinas...</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Sincronizando o inventário em tempo real. Isso leva apenas alguns instantes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type MachineDetailsProps = {
|
|
machine: MachinesQueryItem | null
|
|
}
|
|
|
|
export function MachineDetails({ machine }: MachineDetailsProps) {
|
|
const router = useRouter()
|
|
const { role: viewerRole } = useAuth()
|
|
const normalizedViewerRole = (viewerRole ?? "").toLowerCase()
|
|
const canManageRemoteAccess = normalizedViewerRole === "admin" || normalizedViewerRole === "agent"
|
|
const effectiveStatus = machine ? resolveMachineStatus(machine) : "unknown"
|
|
const [isActiveLocal, setIsActiveLocal] = useState<boolean>(machine?.isActive ?? true)
|
|
const isDeactivated = !isActiveLocal || effectiveStatus === "deactivated"
|
|
const alertsHistory = useQuery(
|
|
machine ? api.machines.listAlerts : undefined,
|
|
machine ? { machineId: machine.id as Id<"machines">, limit: 50 } : undefined
|
|
) as MachineAlertEntry[] | undefined
|
|
const machineAlertsHistory = alertsHistory ?? []
|
|
const openTickets = useQuery(
|
|
machine ? api.machines.listOpenTickets : undefined,
|
|
machine ? { machineId: machine.id as Id<"machines">, limit: 6 } : undefined
|
|
) as MachineOpenTicketsSummary | undefined
|
|
const machineTickets = openTickets?.tickets ?? []
|
|
const totalOpenTickets = openTickets?.totalOpen ?? machineTickets.length
|
|
const displayLimit = 3
|
|
const displayedMachineTickets = machineTickets.slice(0, displayLimit)
|
|
const hasAdditionalOpenTickets = totalOpenTickets > displayedMachineTickets.length
|
|
const machineTicketsHref = machine ? `/admin/machines/${machine.id}/tickets` : null
|
|
const metadata = machine?.inventory ?? null
|
|
const metrics = machine?.metrics ?? null
|
|
const metricsCapturedAt = useMemo(() => getMetricsTimestamp(metrics), [metrics])
|
|
// Live refresh the relative time label every second when we have a capture timestamp
|
|
const [, setRelativeTick] = useState(0)
|
|
useEffect(() => {
|
|
if (!metricsCapturedAt) return
|
|
const id = setInterval(() => setRelativeTick((t) => t + 1), 1000)
|
|
return () => clearInterval(id)
|
|
}, [metricsCapturedAt])
|
|
const lastUpdateRelative = metricsCapturedAt ? formatRelativeTime(metricsCapturedAt) : null
|
|
const hardware = metadata?.hardware
|
|
const network = metadata?.network ?? null
|
|
const networkInterfaces = Array.isArray(network) ? network : null
|
|
const networkSummary = !Array.isArray(network) && network ? network : null
|
|
const software = metadata?.software ?? null
|
|
const labels = metadata?.labels ?? null
|
|
const fleet = metadata?.fleet ?? null
|
|
const disks = Array.isArray(metadata?.disks) ? metadata.disks : []
|
|
const extended = metadata?.extended ?? null
|
|
const linuxExt = extended?.linux ?? null
|
|
const windowsExt = extended?.windows ?? null
|
|
const macosExt = extended?.macos ?? null
|
|
const windowsOsInfo = parseWindowsOsInfo(windowsExt?.osInfo)
|
|
const windowsActivationStatus = windowsOsInfo?.isActivated ?? (typeof windowsOsInfo?.licenseStatus === "number" ? windowsOsInfo.licenseStatus === 1 : null)
|
|
const windowsMemoryModulesRaw = windowsExt?.memoryModules
|
|
const windowsVideoControllersRaw = windowsExt?.videoControllers
|
|
const windowsDiskEntriesRaw = windowsExt?.disks
|
|
const windowsServicesRaw = windowsExt?.services
|
|
const windowsSoftwareRaw = windowsExt?.software
|
|
const windowsBaseboardRaw = windowsExt?.baseboard
|
|
const windowsBaseboard = Array.isArray(windowsBaseboardRaw)
|
|
? windowsBaseboardRaw[0]
|
|
: windowsBaseboardRaw && typeof windowsBaseboardRaw === "object"
|
|
? windowsBaseboardRaw
|
|
: null
|
|
const windowsSerialNumber = windowsBaseboard ? readString(toRecord(windowsBaseboard) ?? {}, "SerialNumber", "serialNumber") : undefined
|
|
const windowsMemoryModules = useMemo(() => {
|
|
if (Array.isArray(windowsMemoryModulesRaw)) return windowsMemoryModulesRaw
|
|
if (windowsMemoryModulesRaw && typeof windowsMemoryModulesRaw === "object") return [windowsMemoryModulesRaw]
|
|
return []
|
|
}, [windowsMemoryModulesRaw])
|
|
const windowsVideoControllers = useMemo(() => {
|
|
if (Array.isArray(windowsVideoControllersRaw)) return windowsVideoControllersRaw
|
|
if (windowsVideoControllersRaw && typeof windowsVideoControllersRaw === "object") return [windowsVideoControllersRaw]
|
|
return []
|
|
}, [windowsVideoControllersRaw])
|
|
const windowsDiskEntries = useMemo(() => {
|
|
if (Array.isArray(windowsDiskEntriesRaw)) return windowsDiskEntriesRaw
|
|
if (windowsDiskEntriesRaw && typeof windowsDiskEntriesRaw === "object") return [windowsDiskEntriesRaw]
|
|
return []
|
|
}, [windowsDiskEntriesRaw])
|
|
const windowsServices = useMemo(() => {
|
|
if (Array.isArray(windowsServicesRaw)) return windowsServicesRaw
|
|
if (windowsServicesRaw && typeof windowsServicesRaw === "object") return [windowsServicesRaw]
|
|
return []
|
|
}, [windowsServicesRaw])
|
|
const windowsSoftware = useMemo(() => {
|
|
if (Array.isArray(windowsSoftwareRaw)) return windowsSoftwareRaw
|
|
if (windowsSoftwareRaw && typeof windowsSoftwareRaw === "object") return [windowsSoftwareRaw]
|
|
return []
|
|
}, [windowsSoftwareRaw])
|
|
const normalizedWindowsSoftware = useMemo(() => {
|
|
return windowsSoftware
|
|
.map((item) => normalizeWindowsSoftwareEntry(item))
|
|
.filter((entry): entry is NormalizedSoftwareEntry => Boolean(entry))
|
|
.sort((a, b) => {
|
|
const aTime = a.installDate ? a.installDate.getTime() : 0
|
|
const bTime = b.installDate ? b.installDate.getTime() : 0
|
|
if (aTime !== bTime) return bTime - aTime
|
|
return a.name.localeCompare(b.name, "pt-BR")
|
|
})
|
|
}, [windowsSoftware])
|
|
const windowsEditionLabel = useMemo(() => {
|
|
const raw =
|
|
windowsOsInfo?.productName ??
|
|
windowsOsInfo?.caption ??
|
|
windowsOsInfo?.editionId ??
|
|
null
|
|
if (!raw) return null
|
|
return raw.replace(/^Microsoft\s+/i, "").trim()
|
|
}, [windowsOsInfo?.productName, windowsOsInfo?.caption, windowsOsInfo?.editionId])
|
|
const windowsVersionLabel = windowsOsInfo?.displayVersion ?? windowsOsInfo?.version ?? windowsOsInfo?.releaseId ?? null
|
|
const windowsBuildLabel = windowsOsInfo?.currentBuildNumber ?? windowsOsInfo?.currentBuild ?? null
|
|
const windowsInstallDateLabel = windowsOsInfo?.installDate ? formatAbsoluteDateTime(windowsOsInfo.installDate) : null
|
|
const windowsExperienceLabel = windowsOsInfo?.experience ?? null
|
|
const windowsProductId = windowsOsInfo?.productId ?? null
|
|
const windowsPartialProductKey = windowsOsInfo?.partialProductKey ?? null
|
|
const windowsComputerName = windowsOsInfo?.computerName ?? hardware?.model ?? machine?.hostname ?? null
|
|
const windowsRegisteredOwner = windowsOsInfo?.registeredOwner ?? null
|
|
const windowsLicenseStatusLabel = (() => {
|
|
if (windowsOsInfo?.licenseStatusText) {
|
|
return windowsOsInfo.licenseStatusText
|
|
}
|
|
switch (windowsOsInfo?.licenseStatus) {
|
|
case 0:
|
|
return "Sem licença"
|
|
case 1:
|
|
return "Licenciado"
|
|
case 2:
|
|
return "Período inicial (OOB Grace)"
|
|
case 3:
|
|
return "Período exposto (OOT Grace)"
|
|
case 4:
|
|
return "Período não genuíno"
|
|
case 5:
|
|
return "Notificação"
|
|
case 6:
|
|
return "Período estendido"
|
|
default:
|
|
return null
|
|
}
|
|
})()
|
|
const windowsBitLockerRaw = windowsExt?.bitLocker ?? windowsExt?.bitlocker ?? null
|
|
const windowsBitLockerVolumes = useMemo(() => {
|
|
if (Array.isArray(windowsBitLockerRaw)) return windowsBitLockerRaw
|
|
if (windowsBitLockerRaw && typeof windowsBitLockerRaw === "object") return [windowsBitLockerRaw]
|
|
return []
|
|
}, [windowsBitLockerRaw])
|
|
const windowsBitLockerSummary = useMemo(() => {
|
|
if (windowsBitLockerVolumes.length === 0) return null
|
|
let protectedCount = 0
|
|
let lockedCount = 0
|
|
windowsBitLockerVolumes.forEach((volume) => {
|
|
const record = toRecord(volume) ?? {}
|
|
const protection = readString(record, "ProtectionStatus", "protectionStatus")?.toLowerCase()
|
|
if (protection && (protection.includes("on") || protection.includes("ativo"))) {
|
|
protectedCount += 1
|
|
}
|
|
const lockStatus = readString(record, "LockStatus", "lockStatus")?.toLowerCase()
|
|
if (lockStatus && (lockStatus.includes("locked") || lockStatus.includes("bloqueado"))) {
|
|
lockedCount += 1
|
|
}
|
|
})
|
|
return { total: windowsBitLockerVolumes.length, protectedCount, lockedCount }
|
|
}, [windowsBitLockerVolumes])
|
|
const windowsTpm = toRecord(windowsExt?.tpm ?? (windowsExt as Record<string, unknown> | undefined)?.["TPM"])
|
|
const windowsSecureBoot = toRecord(windowsExt?.secureBoot ?? (windowsExt as Record<string, unknown> | undefined)?.["secureboot"])
|
|
const windowsDeviceGuardRaw = windowsExt?.deviceGuard ?? (windowsExt as Record<string, unknown> | undefined)?.["deviceguard"] ?? null
|
|
const windowsDeviceGuard = useMemo(() => {
|
|
if (Array.isArray(windowsDeviceGuardRaw)) return windowsDeviceGuardRaw
|
|
if (windowsDeviceGuardRaw && typeof windowsDeviceGuardRaw === "object") return [windowsDeviceGuardRaw]
|
|
return []
|
|
}, [windowsDeviceGuardRaw])
|
|
const windowsDeviceGuardDetails = useMemo(() => {
|
|
if (!windowsDeviceGuard.length) return null
|
|
const primary = toRecord(windowsDeviceGuard[0]) ?? {}
|
|
const configured = toNumberArray(primary?.["SecurityServicesConfigured"])
|
|
const running = toNumberArray(primary?.["SecurityServicesRunning"])
|
|
const required = toNumberArray(primary?.["RequiredSecurityProperties"])
|
|
const available = toNumberArray(primary?.["AvailableSecurityProperties"])
|
|
const vbsRaw = primary?.["VirtualizationBasedSecurityStatus"]
|
|
const vbs =
|
|
typeof vbsRaw === "number"
|
|
? vbsRaw
|
|
: typeof vbsRaw === "string" && vbsRaw.trim().length > 0
|
|
? Number(vbsRaw)
|
|
: undefined
|
|
return { primary, configured, running, required, available, vbs }
|
|
}, [windowsDeviceGuard])
|
|
const deviceGuardConfiguredLabels = windowsDeviceGuardDetails?.configured?.map((code) => describeDeviceGuardService(code)) ?? []
|
|
const deviceGuardRunningLabels = windowsDeviceGuardDetails?.running?.map((code) => describeDeviceGuardService(code)) ?? []
|
|
const windowsFirewallProfilesRaw =
|
|
windowsExt?.firewallProfiles ?? (windowsExt as Record<string, unknown> | undefined)?.["firewallprofiles"] ?? null
|
|
const windowsFirewallProfiles = useMemo(() => {
|
|
if (Array.isArray(windowsFirewallProfilesRaw)) return windowsFirewallProfilesRaw
|
|
if (windowsFirewallProfilesRaw && typeof windowsFirewallProfilesRaw === "object") return [windowsFirewallProfilesRaw]
|
|
return []
|
|
}, [windowsFirewallProfilesRaw])
|
|
const windowsUpdateSettings = toRecord(windowsExt?.windowsUpdate ?? (windowsExt as Record<string, unknown> | undefined)?.["windowsupdate"])
|
|
const windowsUpdateLastSuccess = useMemo(() => {
|
|
if (!windowsUpdateSettings) return null
|
|
const candidates = [
|
|
windowsUpdateSettings["LastSuccessTime"],
|
|
windowsUpdateSettings["lastSuccessTime"],
|
|
windowsUpdateSettings["LastSuccessTimeUtc"],
|
|
windowsUpdateSettings["lastSuccessTimeUtc"],
|
|
]
|
|
for (const candidate of candidates) {
|
|
const parsed = parseDateish(candidate)
|
|
if (parsed) return parsed
|
|
if (typeof candidate === "string" && candidate.trim().length > 0) {
|
|
const parsedIso = new Date(candidate)
|
|
if (!Number.isNaN(parsedIso.getTime())) return parsedIso
|
|
}
|
|
}
|
|
return null
|
|
}, [windowsUpdateSettings])
|
|
const windowsUpdateLastSuccessLabel = windowsUpdateLastSuccess ? formatAbsoluteDateTime(windowsUpdateLastSuccess) : null
|
|
const windowsComputerSystem = toRecord(
|
|
windowsExt?.computerSystem ?? (windowsExt as Record<string, unknown> | undefined)?.["computersystem"]
|
|
)
|
|
const windowsAzureAdStatusRaw = toRecord(
|
|
windowsExt?.azureAdStatus ?? (windowsExt as Record<string, unknown> | undefined)?.["azureadstatus"]
|
|
)
|
|
const windowsAzureAdStatus = useMemo(() => {
|
|
if (!windowsAzureAdStatusRaw) return null
|
|
return Object.entries(windowsAzureAdStatusRaw).reduce<Record<string, Record<string, unknown>>>((acc, [section, value]) => {
|
|
acc[section] = toRecord(value) ?? {}
|
|
return acc
|
|
}, {})
|
|
}, [windowsAzureAdStatusRaw])
|
|
const secureBootSupported = windowsSecureBoot
|
|
? parseBooleanLike(windowsSecureBoot["Supported"] ?? windowsSecureBoot["supported"])
|
|
: undefined
|
|
const secureBootEnabled = windowsSecureBoot
|
|
? parseBooleanLike(windowsSecureBoot["Enabled"] ?? windowsSecureBoot["enabled"])
|
|
: undefined
|
|
const secureBootError = windowsSecureBoot ? readString(windowsSecureBoot, "Error", "error") : undefined
|
|
const tpmPresent = windowsTpm ? parseBooleanLike(windowsTpm["TpmPresent"] ?? windowsTpm["tpmPresent"]) : undefined
|
|
const tpmReady = windowsTpm ? parseBooleanLike(windowsTpm["TpmReady"] ?? windowsTpm["tpmReady"]) : undefined
|
|
const tpmEnabled = windowsTpm ? parseBooleanLike(windowsTpm["TpmEnabled"] ?? windowsTpm["tpmEnabled"]) : undefined
|
|
const tpmActivated = windowsTpm ? parseBooleanLike(windowsTpm["TpmActivated"] ?? windowsTpm["tpmActivated"]) : undefined
|
|
const tpmManufacturer =
|
|
windowsTpm ? readString(windowsTpm, "ManufacturerIdTxt", "manufacturerIdTxt", "ManufacturerId", "manufacturerId") : undefined
|
|
const tpmVersion =
|
|
windowsTpm
|
|
? readString(windowsTpm, "ManufacturerVersionFull20", "manufacturerVersionFull20", "ManufacturerVersion", "manufacturerVersion", "SpecVersion")
|
|
: undefined
|
|
const windowsFirewallNormalized = useMemo(() => {
|
|
return windowsFirewallProfiles.map((profile) => {
|
|
const record = toRecord(profile) ?? {}
|
|
return {
|
|
name: readString(record, "Name", "name") ?? "Perfil",
|
|
enabled: parseBooleanLike(record["Enabled"] ?? record["enabled"]),
|
|
inboundAction: readString(record, "DefaultInboundAction", "defaultInboundAction"),
|
|
outboundAction: readString(record, "DefaultOutboundAction", "defaultOutboundAction"),
|
|
notifyOnListen: parseBooleanLike(record["NotifyOnListen"] ?? record["notifyOnListen"]),
|
|
}
|
|
})
|
|
}, [windowsFirewallProfiles])
|
|
const firewallEnabledCount = windowsFirewallNormalized.filter((profile) => profile.enabled !== false).length
|
|
const windowsUpdateMode = windowsUpdateSettings ? describeAuOption(readNumber(windowsUpdateSettings, "AUOptions", "auOptions")) : null
|
|
const windowsUpdateDay = windowsUpdateSettings
|
|
? describeScheduledDay(readNumber(windowsUpdateSettings, "ScheduledInstallDay", "scheduledInstallDay"))
|
|
: null
|
|
const windowsUpdateHourRaw = windowsUpdateSettings
|
|
? readNumber(windowsUpdateSettings, "ScheduledInstallTime", "scheduledInstallTime")
|
|
: undefined
|
|
const windowsUpdateHour =
|
|
windowsUpdateHourRaw != null ? `${windowsUpdateHourRaw.toString().padStart(2, "0")}h` : null
|
|
const windowsUpdateDisabled = windowsUpdateSettings
|
|
? parseBooleanLike(windowsUpdateSettings["NoAutoUpdate"] ?? windowsUpdateSettings["noAutoUpdate"])
|
|
: undefined
|
|
const windowsUpdateDetectionEnabled = windowsUpdateSettings
|
|
? parseBooleanLike(
|
|
windowsUpdateSettings["DetectionFrequency"] ??
|
|
windowsUpdateSettings["DetectionFrequencyEnabled"] ??
|
|
windowsUpdateSettings["detectionFrequencyEnabled"],
|
|
)
|
|
: undefined
|
|
const windowsUpdateScheduleLabel =
|
|
windowsUpdateDay || windowsUpdateHour
|
|
? `${windowsUpdateDay ?? ""}${windowsUpdateDay && windowsUpdateHour ? ` · ${windowsUpdateHour}` : windowsUpdateHour ?? ""}`.trim()
|
|
: null
|
|
const computerDomain = windowsComputerSystem ? readString(windowsComputerSystem, "Domain", "domain") : undefined
|
|
const computerWorkgroup = windowsComputerSystem ? readString(windowsComputerSystem, "Workgroup", "workgroup") : undefined
|
|
const computerPartOfDomain = windowsComputerSystem
|
|
? parseBooleanLike(windowsComputerSystem["PartOfDomain"] ?? windowsComputerSystem["partOfDomain"])
|
|
: undefined
|
|
const computerDomainRole = windowsComputerSystem
|
|
? readNumber(windowsComputerSystem, "DomainRole", "domainRole")
|
|
: undefined
|
|
const computerManufacturer = windowsComputerSystem
|
|
? readString(windowsComputerSystem, "Manufacturer", "manufacturer")
|
|
: undefined
|
|
const computerModel = windowsComputerSystem ? readString(windowsComputerSystem, "Model", "model") : undefined
|
|
const computerPcType = windowsComputerSystem
|
|
? readNumber(windowsComputerSystem, "PCSystemType", "pcSystemType", "PCSystemTypeEx", "pcSystemTypeEx")
|
|
: undefined
|
|
const computerTotalMemory = windowsComputerSystem
|
|
? readNumber(windowsComputerSystem, "TotalPhysicalMemory", "totalPhysicalMemory")
|
|
: undefined
|
|
const computerDomainRoleLabel = describeDomainRole(computerDomainRole)
|
|
const computerPcTypeLabel = describePcSystemType(computerPcType)
|
|
const computerTotalMemoryLabel = typeof computerTotalMemory === "number" ? formatBytes(computerTotalMemory) : null
|
|
const azureDeviceState = windowsAzureAdStatus ? windowsAzureAdStatus["Device State"] ?? null : null
|
|
const azureTenantDetails = windowsAzureAdStatus ? windowsAzureAdStatus["Tenant Details"] ?? null : null
|
|
const azureUserState = windowsAzureAdStatus ? windowsAzureAdStatus["User State"] ?? null : null
|
|
const azureAdJoined = azureDeviceState ? parseBooleanLike(azureDeviceState["AzureAdJoined"]) : undefined
|
|
const azureDomainJoined = azureDeviceState ? parseBooleanLike(azureDeviceState["DomainJoined"]) : undefined
|
|
const azureEnterpriseJoined = azureDeviceState ? parseBooleanLike(azureDeviceState["EnterpriseJoined"]) : undefined
|
|
const azureTenantName =
|
|
(azureDeviceState ? readString(azureDeviceState, "TenantName") : undefined) ??
|
|
(azureTenantDetails ? readString(azureTenantDetails, "TenantName") : undefined)
|
|
const azureDeviceId =
|
|
(azureDeviceState ? readString(azureDeviceState, "DeviceId") : undefined) ??
|
|
(azureTenantDetails ? readString(azureTenantDetails, "DeviceId") : undefined)
|
|
const azureUserSso = azureUserState
|
|
? readString(azureUserState, "AzureAdPrt") ??
|
|
(azureUserState["AzureAdPrt"] ? String(azureUserState["AzureAdPrt"]) : undefined)
|
|
: undefined
|
|
const windowsDefender = windowsExt?.defender ?? null
|
|
const defenderAntivirus = windowsDefender
|
|
? parseBooleanLike(windowsDefender["AntivirusEnabled"] ?? windowsDefender["antivirusEnabled"])
|
|
: undefined
|
|
const defenderRealtime = windowsDefender
|
|
? parseBooleanLike(windowsDefender["RealTimeProtectionEnabled"] ?? windowsDefender["realTimeProtectionEnabled"])
|
|
: undefined
|
|
const defenderMode = windowsDefender ? readString(windowsDefender, "AMRunningMode", "amRunningMode") : undefined
|
|
const windowsHotfixes = useMemo(() => {
|
|
if (!Array.isArray(windowsExt?.hotfix)) return []
|
|
return windowsExt.hotfix
|
|
.map((entry) => {
|
|
const record = toRecord(entry) ?? {}
|
|
const id =
|
|
readString(record, "HotFixID", "hotFixId", "HotfixId", "Id", "id") ??
|
|
"Atualização"
|
|
const installedAt = parseDateish(record["InstalledOn"] ?? record["installedOn"])
|
|
const installedLabel = installedAt
|
|
? formatAbsoluteDateTime(installedAt)
|
|
: readString(record, "InstalledOn", "installedOn") ?? "—"
|
|
return { id, installedAt, installedLabel }
|
|
})
|
|
.sort((a, b) => {
|
|
if (a.installedAt && b.installedAt) {
|
|
return b.installedAt.getTime() - a.installedAt.getTime()
|
|
}
|
|
if (a.installedAt) return -1
|
|
if (b.installedAt) return 1
|
|
return a.id.localeCompare(b.id)
|
|
})
|
|
}, [windowsExt?.hotfix])
|
|
const osNameDisplay = useMemo(() => {
|
|
const base = machine?.osName?.trim()
|
|
const edition = windowsEditionLabel?.trim()
|
|
if (edition) {
|
|
if (!base) return edition
|
|
const baseLower = base.toLowerCase()
|
|
const editionLower = edition.toLowerCase()
|
|
if (editionLower.includes(baseLower) || baseLower.includes(editionLower)) {
|
|
return edition
|
|
}
|
|
if (baseLower.startsWith("windows") && editionLower.startsWith("windows")) {
|
|
return edition
|
|
}
|
|
return `${base} ${edition}`.replace(/\s+/g, " ").trim()
|
|
}
|
|
return base ?? ""
|
|
}, [machine?.osName, windowsEditionLabel])
|
|
const linuxLsblk = linuxExt?.lsblk ?? []
|
|
const linuxSmartEntries = linuxExt?.smart ?? []
|
|
const normalizedHardwareGpus = Array.isArray(hardware?.gpus)
|
|
? hardware.gpus.map((gpu) => normalizeGpuSource(gpu)).filter((gpu): gpu is GpuAdapter => Boolean(gpu))
|
|
: []
|
|
const hardwarePrimaryGpu = hardware?.primaryGpu ? normalizeGpuSource(hardware.primaryGpu) : null
|
|
|
|
const windowsCpuRaw = windowsExt?.cpu
|
|
const winCpu = windowsCpuRaw
|
|
? (Array.isArray(windowsCpuRaw) ? windowsCpuRaw[0] ?? null : windowsCpuRaw)
|
|
: null
|
|
const winMemTotal = windowsMemoryModules.reduce((acc, module) => acc + (parseBytesLike(module?.Capacity) ?? 0), 0)
|
|
const normalizedWindowsGpus = windowsVideoControllers
|
|
.map((controller) => normalizeGpuSource(controller))
|
|
.filter((gpu): gpu is GpuAdapter => Boolean(gpu))
|
|
const combinedGpus = uniqueBy(
|
|
[
|
|
...(hardwarePrimaryGpu ? [hardwarePrimaryGpu] : []),
|
|
...normalizedHardwareGpus,
|
|
...normalizedWindowsGpus,
|
|
],
|
|
(gpu) => `${gpu.name ?? ""}|${gpu.vendor ?? ""}|${gpu.driver ?? ""}`
|
|
)
|
|
const displayGpus = [...combinedGpus].sort(
|
|
(a, b) => (b.memoryBytes ?? 0) - (a.memoryBytes ?? 0)
|
|
)
|
|
const primaryGpu = hardwarePrimaryGpu ?? displayGpus[0] ?? null
|
|
const windowsPrimaryGpu = [...normalizedWindowsGpus].sort(
|
|
(a, b) => (b.memoryBytes ?? 0) - (a.memoryBytes ?? 0)
|
|
)[0] ?? null
|
|
const windowsCpuDetails = windowsCpuRaw
|
|
? Array.isArray(windowsCpuRaw)
|
|
? windowsCpuRaw
|
|
: [windowsCpuRaw]
|
|
: []
|
|
const winDiskStats = windowsDiskEntries.length > 0
|
|
? {
|
|
count: windowsDiskEntries.length,
|
|
total: windowsDiskEntries.reduce((acc, disk) => acc + (parseBytesLike(disk?.Size) ?? 0), 0),
|
|
}
|
|
: { count: 0, total: 0 }
|
|
|
|
const lastHeartbeatDate = machine?.lastHeartbeatAt ? new Date(machine.lastHeartbeatAt) : null
|
|
const tokenExpiry = machine?.token?.expiresAt ? new Date(machine.token.expiresAt) : null
|
|
const tokenLastUsed = machine?.token?.lastUsedAt ? new Date(machine.token.lastUsedAt) : null
|
|
|
|
const copyEmail = async () => {
|
|
if (!machine?.authEmail) return
|
|
try {
|
|
await navigator.clipboard.writeText(machine.authEmail)
|
|
toast.success("E-mail da máquina copiado.")
|
|
} catch {
|
|
toast.error("Não foi possível copiar o e-mail da máquina.")
|
|
}
|
|
}
|
|
|
|
// collaborator (from machine assignment or metadata)
|
|
type Collaborator = { email?: string; name?: string; role?: string }
|
|
const collaborator: Collaborator | null = useMemo(() => {
|
|
if (machine?.assignedUserEmail) {
|
|
return {
|
|
email: machine.assignedUserEmail ?? undefined,
|
|
name: machine.assignedUserName ?? undefined,
|
|
role: machine.persona ?? machine.assignedUserRole ?? undefined,
|
|
}
|
|
}
|
|
if (!metadata || typeof metadata !== "object") return null
|
|
const inv = metadata as Record<string, unknown>
|
|
const c = inv["collaborator"]
|
|
if (c && typeof c === "object") {
|
|
const base = c as Record<string, unknown>
|
|
return {
|
|
email: typeof base.email === "string" ? base.email : undefined,
|
|
name: typeof base.name === "string" ? base.name : undefined,
|
|
role: typeof base.role === "string" ? (base.role as string) : undefined,
|
|
}
|
|
}
|
|
return null
|
|
}, [machine?.assignedUserEmail, machine?.assignedUserName, machine?.persona, machine?.assignedUserRole, metadata])
|
|
|
|
const primaryLinkedUser: Collaborator | null = useMemo(() => {
|
|
const firstLinked = machine?.linkedUsers?.find((user) => typeof user?.email === "string" && user.email.trim().length > 0)
|
|
if (firstLinked) {
|
|
return {
|
|
email: firstLinked.email,
|
|
name: firstLinked.name ?? undefined,
|
|
role: collaborator?.role ?? machine?.persona ?? undefined,
|
|
}
|
|
}
|
|
if (collaborator?.email) {
|
|
return collaborator
|
|
}
|
|
if (machine?.authEmail) {
|
|
return {
|
|
email: machine.authEmail ?? undefined,
|
|
name: undefined,
|
|
role: machine?.persona ?? undefined,
|
|
}
|
|
}
|
|
return null
|
|
}, [collaborator, machine?.authEmail, machine?.linkedUsers, machine?.persona])
|
|
|
|
const personaRole = (primaryLinkedUser?.role ?? collaborator?.role ?? machine?.persona ?? "").toLowerCase()
|
|
const personaLabel = personaRole === "manager" ? "Gestor" : "Colaborador"
|
|
|
|
const remoteAccessEntries = useMemo(() => machine?.remoteAccessEntries ?? [], [machine?.remoteAccessEntries])
|
|
const hasRemoteAccess = remoteAccessEntries.length > 0
|
|
|
|
const summaryChips = useMemo(() => {
|
|
const chips: Array<{ key: string; label: string; value: string; icon: ReactNode; tone?: "warning" | "muted" }> = []
|
|
const osName = osNameDisplay || "Sistema desconhecido"
|
|
const osVersionRaw = machine?.osVersion ?? windowsVersionLabel ?? ""
|
|
const osVersion = formatOsVersionDisplay(osNameDisplay, osVersionRaw)
|
|
chips.push({
|
|
key: "os",
|
|
label: "Sistema",
|
|
value: [osName, osVersion].filter(Boolean).join(" ").trim(),
|
|
icon: <OsIcon osName={machine?.osName} />,
|
|
})
|
|
if (machine?.architecture) {
|
|
chips.push({
|
|
key: "arch",
|
|
label: "Arquitetura",
|
|
value: machine.architecture.toUpperCase(),
|
|
icon: <Cpu className="size-4 text-neutral-500" />,
|
|
})
|
|
}
|
|
if (windowsBuildLabel) {
|
|
chips.push({
|
|
key: "build",
|
|
label: "Build",
|
|
value: windowsBuildLabel,
|
|
icon: <ServerCog className="size-4 text-neutral-500" />,
|
|
})
|
|
}
|
|
if (windowsActivationStatus !== null && windowsActivationStatus !== undefined) {
|
|
chips.push({
|
|
key: "activation",
|
|
label: "Licença",
|
|
value: windowsActivationStatus ? "Ativada" : "Não ativada",
|
|
icon: windowsActivationStatus ? <ShieldCheck className="size-4 text-emerald-500" /> : <ShieldAlert className="size-4 text-amber-500" />,
|
|
tone: windowsActivationStatus ? undefined : "warning",
|
|
})
|
|
}
|
|
if (primaryLinkedUser?.email) {
|
|
const collaboratorValue = primaryLinkedUser.name ? `${primaryLinkedUser.name} · ${primaryLinkedUser.email}` : primaryLinkedUser.email
|
|
chips.push({
|
|
key: "collaborator",
|
|
label: personaLabel,
|
|
value: collaboratorValue,
|
|
icon: <ShieldCheck className="size-4 text-neutral-500" />,
|
|
})
|
|
}
|
|
const primaryRemoteAccess = remoteAccessEntries[0]
|
|
if (primaryRemoteAccess && (primaryRemoteAccess.identifier || primaryRemoteAccess.url)) {
|
|
const value = primaryRemoteAccess.identifier ?? primaryRemoteAccess.url ?? "—"
|
|
const label = primaryRemoteAccess.provider ? `Acesso (${primaryRemoteAccess.provider})` : "Acesso remoto"
|
|
chips.push({
|
|
key: "remote-access",
|
|
label,
|
|
value,
|
|
icon: <Key className="size-4 text-neutral-500" />,
|
|
})
|
|
}
|
|
return chips
|
|
}, [
|
|
osNameDisplay,
|
|
machine?.osVersion,
|
|
machine?.architecture,
|
|
windowsVersionLabel,
|
|
windowsBuildLabel,
|
|
windowsActivationStatus,
|
|
primaryLinkedUser?.email,
|
|
primaryLinkedUser?.name,
|
|
personaLabel,
|
|
machine?.osName,
|
|
remoteAccessEntries,
|
|
])
|
|
|
|
const companyName = machine?.companyName ?? machine?.companySlug ?? null
|
|
|
|
const [renaming, setRenaming] = useState(false)
|
|
const [newName, setNewName] = useState<string>(machine?.hostname ?? "")
|
|
|
|
const [openDialog, setOpenDialog] = useState(false)
|
|
const [dialogQuery, setDialogQuery] = useState("")
|
|
const [deleteDialog, setDeleteDialog] = useState(false)
|
|
const [deleting, setDeleting] = useState(false)
|
|
const [accessDialog, setAccessDialog] = useState(false)
|
|
const [accessEmail, setAccessEmail] = useState<string>(primaryLinkedUser?.email ?? "")
|
|
const [accessName, setAccessName] = useState<string>(primaryLinkedUser?.name ?? "")
|
|
const [accessRole, setAccessRole] = useState<"collaborator" | "manager">(personaRole === "manager" ? "manager" : "collaborator")
|
|
const [savingAccess, setSavingAccess] = useState(false)
|
|
const [remoteAccessDialog, setRemoteAccessDialog] = useState(false)
|
|
const [editingRemoteAccessClientId, setEditingRemoteAccessClientId] = useState<string | null>(null)
|
|
const [remoteAccessProviderOption, setRemoteAccessProviderOption] = useState<RemoteAccessProviderValue>(
|
|
REMOTE_ACCESS_PROVIDERS[0].value,
|
|
)
|
|
const [remoteAccessCustomProvider, setRemoteAccessCustomProvider] = useState("")
|
|
const [remoteAccessIdentifierInput, setRemoteAccessIdentifierInput] = useState("")
|
|
const [remoteAccessUrlInput, setRemoteAccessUrlInput] = useState("")
|
|
const [remoteAccessNotesInput, setRemoteAccessNotesInput] = useState("")
|
|
const [remoteAccessSaving, setRemoteAccessSaving] = useState(false)
|
|
const editingRemoteAccess = useMemo(
|
|
() => remoteAccessEntries.find((entry) => entry.clientId === editingRemoteAccessClientId) ?? null,
|
|
[editingRemoteAccessClientId, remoteAccessEntries]
|
|
)
|
|
const [togglingActive, setTogglingActive] = useState(false)
|
|
const [showAllWindowsSoftware, setShowAllWindowsSoftware] = useState(false)
|
|
const jsonText = useMemo(() => {
|
|
const payload = {
|
|
id: machine?.id,
|
|
hostname: machine?.hostname,
|
|
status: machine?.status,
|
|
lastHeartbeatAt: machine?.lastHeartbeatAt,
|
|
metrics,
|
|
inventory: metadata,
|
|
postureAlerts: machine?.postureAlerts ?? null,
|
|
lastPostureAt: machine?.lastPostureAt ?? null,
|
|
}
|
|
return JSON.stringify(payload, null, 2)
|
|
}, [machine, metrics, metadata])
|
|
const handleDownloadInventoryJson = useCallback(() => {
|
|
if (!machine) return
|
|
const safeHostname = machine.hostname.replace(/[^a-z0-9_-]/gi, "-").replace(/-{2,}/g, "-").toLowerCase()
|
|
const fileName = `${safeHostname || "machine"}_${machine.id}.json`
|
|
const blob = new Blob([jsonText], { type: "application/json" })
|
|
const url = URL.createObjectURL(blob)
|
|
const link = document.createElement("a")
|
|
link.href = url
|
|
link.download = fileName
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
URL.revokeObjectURL(url)
|
|
}, [jsonText, machine])
|
|
|
|
const filteredJsonHtml = useMemo(() => {
|
|
if (!dialogQuery.trim()) return jsonText
|
|
const q = dialogQuery.trim().toLowerCase()
|
|
// highlight simples
|
|
return jsonText.replace(new RegExp(q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi"), (m) => `__HIGHLIGHT__${m}__END__`)
|
|
}, [jsonText, dialogQuery])
|
|
|
|
// removed copy/export inventory JSON buttons as requested
|
|
useEffect(() => {
|
|
setAccessEmail(primaryLinkedUser?.email ?? "")
|
|
setAccessName(primaryLinkedUser?.name ?? "")
|
|
setAccessRole(personaRole === "manager" ? "manager" : "collaborator")
|
|
}, [machine?.id, primaryLinkedUser?.email, primaryLinkedUser?.name, personaRole])
|
|
|
|
useEffect(() => {
|
|
setIsActiveLocal(machine?.isActive ?? true)
|
|
}, [machine?.isActive])
|
|
|
|
useEffect(() => {
|
|
if (!remoteAccessDialog) return
|
|
const providerName = editingRemoteAccess?.provider ?? ""
|
|
const matched = REMOTE_ACCESS_PROVIDERS.find(
|
|
(option) => option.value !== "OTHER" && option.label.toLowerCase() === providerName.toLowerCase(),
|
|
)
|
|
if (matched) {
|
|
setRemoteAccessProviderOption(matched.value)
|
|
setRemoteAccessCustomProvider("")
|
|
} else {
|
|
setRemoteAccessProviderOption(providerName ? "OTHER" : REMOTE_ACCESS_PROVIDERS[0].value)
|
|
setRemoteAccessCustomProvider(providerName ?? "")
|
|
}
|
|
setRemoteAccessIdentifierInput(editingRemoteAccess?.identifier ?? "")
|
|
setRemoteAccessUrlInput(editingRemoteAccess?.url ?? "")
|
|
setRemoteAccessNotesInput(editingRemoteAccess?.notes ?? "")
|
|
}, [remoteAccessDialog, editingRemoteAccess])
|
|
|
|
useEffect(() => {
|
|
if (remoteAccessDialog) return
|
|
if (!editingRemoteAccessClientId) {
|
|
setRemoteAccessProviderOption(REMOTE_ACCESS_PROVIDERS[0].value)
|
|
setRemoteAccessCustomProvider("")
|
|
setRemoteAccessIdentifierInput("")
|
|
setRemoteAccessUrlInput("")
|
|
setRemoteAccessNotesInput("")
|
|
}
|
|
}, [editingRemoteAccessClientId, remoteAccessDialog])
|
|
|
|
useEffect(() => {
|
|
setShowAllWindowsSoftware(false)
|
|
}, [machine?.id])
|
|
|
|
const displayedWindowsSoftware = useMemo(
|
|
() => (showAllWindowsSoftware ? normalizedWindowsSoftware : normalizedWindowsSoftware.slice(0, 12)),
|
|
[showAllWindowsSoftware, normalizedWindowsSoftware]
|
|
)
|
|
|
|
const handleSaveAccess = async () => {
|
|
if (!machine) return
|
|
if (!accessEmail.trim()) {
|
|
toast.error("Informe o e-mail do colaborador ou gestor.")
|
|
return
|
|
}
|
|
setSavingAccess(true)
|
|
try {
|
|
const response = await fetch("/api/admin/machines/access", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
machineId: machine.id,
|
|
persona: accessRole,
|
|
email: accessEmail.trim(),
|
|
name: accessName.trim() || undefined,
|
|
}),
|
|
})
|
|
if (!response.ok) {
|
|
throw new Error(await response.text())
|
|
}
|
|
toast.success("Perfil de acesso atualizado.")
|
|
setAccessDialog(false)
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Falha ao atualizar acesso da máquina.")
|
|
} finally {
|
|
setSavingAccess(false)
|
|
}
|
|
}
|
|
|
|
const handleSaveRemoteAccess = useCallback(async () => {
|
|
if (!machine) return
|
|
if (!canManageRemoteAccess) {
|
|
toast.error("Você não tem permissão para ajustar o acesso remoto desta máquina.")
|
|
return
|
|
}
|
|
|
|
const providerOption = REMOTE_ACCESS_PROVIDERS.find((option) => option.value === remoteAccessProviderOption)
|
|
const providerName =
|
|
remoteAccessProviderOption === "OTHER"
|
|
? remoteAccessCustomProvider.trim()
|
|
: providerOption?.label ?? ""
|
|
|
|
if (!providerName) {
|
|
toast.error("Informe a ferramenta de acesso remoto.")
|
|
return
|
|
}
|
|
|
|
const identifier = remoteAccessIdentifierInput.trim()
|
|
if (!identifier) {
|
|
toast.error("Informe o ID ou código do acesso remoto.")
|
|
return
|
|
}
|
|
|
|
let normalizedUrl: string | undefined
|
|
const rawUrl = remoteAccessUrlInput.trim()
|
|
if (rawUrl.length > 0) {
|
|
const candidate = /^https?:\/\//i.test(rawUrl) ? rawUrl : `https://${rawUrl}`
|
|
try {
|
|
new URL(candidate)
|
|
normalizedUrl = candidate
|
|
} catch {
|
|
toast.error("Informe uma URL válida (ex: https://example.com).")
|
|
return
|
|
}
|
|
}
|
|
|
|
const notes = remoteAccessNotesInput.trim()
|
|
|
|
toast.dismiss("remote-access")
|
|
toast.loading("Salvando acesso remoto...", { id: "remote-access" })
|
|
setRemoteAccessSaving(true)
|
|
|
|
try {
|
|
if (editingRemoteAccess && !editingRemoteAccess.id) {
|
|
const cleanupPayload: Record<string, unknown> = {
|
|
machineId: machine.id,
|
|
action: "delete",
|
|
}
|
|
if (editingRemoteAccess.provider) cleanupPayload.provider = editingRemoteAccess.provider
|
|
if (editingRemoteAccess.identifier) cleanupPayload.identifier = editingRemoteAccess.identifier
|
|
if (editingRemoteAccess.clientId) cleanupPayload.entryId = editingRemoteAccess.clientId
|
|
await fetch("/api/admin/machines/remote-access", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(cleanupPayload),
|
|
}).catch(() => null)
|
|
}
|
|
|
|
const response = await fetch("/api/admin/machines/remote-access", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
machineId: machine.id,
|
|
provider: providerName,
|
|
identifier,
|
|
url: normalizedUrl,
|
|
notes: notes.length ? notes : undefined,
|
|
action: "upsert",
|
|
entryId: editingRemoteAccess?.id ?? undefined,
|
|
}),
|
|
})
|
|
|
|
const responsePayload = await response.json().catch(() => null)
|
|
if (!response.ok) {
|
|
const message = typeof responsePayload?.error === "string" ? responsePayload.error : "Falha ao atualizar acesso remoto."
|
|
const detailMessage = typeof responsePayload?.detail === "string" ? responsePayload.detail : null
|
|
throw new Error(detailMessage ? `${message}. ${detailMessage}` : message)
|
|
}
|
|
|
|
toast.success("Acesso remoto atualizado.", { id: "remote-access" })
|
|
setRemoteAccessDialog(false)
|
|
setEditingRemoteAccessClientId(null)
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Falha ao atualizar acesso remoto."
|
|
toast.error(message, { id: "remote-access" })
|
|
} finally {
|
|
setRemoteAccessSaving(false)
|
|
}
|
|
}, [
|
|
machine,
|
|
canManageRemoteAccess,
|
|
remoteAccessProviderOption,
|
|
remoteAccessCustomProvider,
|
|
remoteAccessIdentifierInput,
|
|
remoteAccessUrlInput,
|
|
remoteAccessNotesInput,
|
|
editingRemoteAccess,
|
|
])
|
|
|
|
const handleRemoveRemoteAccess = useCallback(async (entry: MachineRemoteAccessEntry) => {
|
|
if (!machine) return
|
|
if (!canManageRemoteAccess) {
|
|
toast.error("Você não tem permissão para ajustar o acesso remoto desta máquina.")
|
|
return
|
|
}
|
|
toast.dismiss("remote-access")
|
|
toast.loading("Removendo acesso remoto...", { id: "remote-access" })
|
|
setRemoteAccessSaving(true)
|
|
try {
|
|
const requestPayload: Record<string, unknown> = {
|
|
machineId: machine.id,
|
|
action: "delete",
|
|
}
|
|
if (entry.id) {
|
|
requestPayload.entryId = entry.id
|
|
} else if (entry.clientId) {
|
|
requestPayload.entryId = entry.clientId
|
|
}
|
|
if (entry.provider) {
|
|
requestPayload.provider = entry.provider
|
|
}
|
|
if (entry.identifier) {
|
|
requestPayload.identifier = entry.identifier
|
|
}
|
|
const response = await fetch("/api/admin/machines/remote-access", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(requestPayload),
|
|
})
|
|
const responsePayload = await response.json().catch(() => null)
|
|
if (!response.ok) {
|
|
const message = typeof responsePayload?.error === "string" ? responsePayload.error : "Falha ao remover acesso remoto."
|
|
const detailMessage = typeof responsePayload?.detail === "string" ? responsePayload.detail : null
|
|
throw new Error(detailMessage ? `${message}. ${detailMessage}` : message)
|
|
}
|
|
toast.success("Acesso remoto removido.", { id: "remote-access" })
|
|
setRemoteAccessDialog(false)
|
|
setEditingRemoteAccessClientId(null)
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Falha ao remover acesso remoto."
|
|
toast.error(message, { id: "remote-access" })
|
|
} finally {
|
|
setRemoteAccessSaving(false)
|
|
}
|
|
}, [machine, canManageRemoteAccess])
|
|
|
|
const handleToggleActive = async () => {
|
|
if (!machine) return
|
|
const nextActive = !isActiveLocal
|
|
setIsActiveLocal(nextActive)
|
|
setTogglingActive(true)
|
|
try {
|
|
const response = await fetch("/api/admin/machines/toggle-active", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ machineId: machine.id, active: nextActive }),
|
|
credentials: "include",
|
|
})
|
|
if (!response.ok) {
|
|
const payload = (await response.json().catch(() => ({}))) as { error?: string }
|
|
throw new Error(payload?.error ?? "Falha ao atualizar status")
|
|
}
|
|
toast.success(nextActive ? "Máquina reativada" : "Máquina desativada")
|
|
} catch (error) {
|
|
console.error(error)
|
|
setIsActiveLocal(!nextActive)
|
|
toast.error("Não foi possível atualizar o status da máquina.")
|
|
} finally {
|
|
setTogglingActive(false)
|
|
}
|
|
}
|
|
|
|
const handleCopyRemoteIdentifier = useCallback(async (identifier: string | null | undefined) => {
|
|
if (!identifier) return
|
|
try {
|
|
await navigator.clipboard.writeText(identifier)
|
|
toast.success("Identificador de acesso remoto copiado.")
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Não foi possível copiar o identificador.")
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<Card className="border-slate-200">
|
|
<CardHeader className="gap-1">
|
|
<CardTitle>Detalhes</CardTitle>
|
|
<CardDescription>Resumo da máquina selecionada</CardDescription>
|
|
{machine ? (
|
|
<CardAction>
|
|
<div className="flex flex-col items-end gap-2 text-xs sm:text-sm">
|
|
{companyName ? (
|
|
<div className="rounded-lg border border-slate-200 bg-white px-3 py-1 font-semibold text-neutral-600 shadow-sm">
|
|
{companyName}
|
|
</div>
|
|
) : null}
|
|
{!isDeactivated ? <MachineStatusBadge status={effectiveStatus} /> : null}
|
|
{!isActiveLocal ? (
|
|
<Badge variant="outline" className="h-7 border-rose-200 bg-rose-50 px-3 font-semibold uppercase text-rose-700">
|
|
Máquina desativada
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
</CardAction>
|
|
) : null}
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{!machine ? (
|
|
<p className="text-sm text-muted-foreground">Selecione uma máquina para visualizar detalhes.</p>
|
|
) : (
|
|
<div className="space-y-6">
|
|
<section className="space-y-3">
|
|
<div className="flex flex-wrap items-start gap-2">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="break-words text-2xl font-semibold text-neutral-900">{machine.hostname}</h1>
|
|
<Button size="icon" variant="ghost" className="size-7" onClick={() => { setNewName(machine.hostname); setRenaming(true) }}>
|
|
<Pencil className="size-4" />
|
|
<span className="sr-only">Renomear máquina</span>
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{machine.authEmail ?? "E-mail não definido"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* ping integrado na badge de status */}
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
{summaryChips.map((chip) => (
|
|
<InfoChip key={chip.key} label={chip.label} value={chip.value} icon={chip.icon} tone={chip.tone} />
|
|
))}
|
|
</div>
|
|
<div className="rounded-2xl border border-[color:var(--accent)] bg-[color:var(--accent)]/80 px-4 py-4">
|
|
<div className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-center">
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<h4 className="text-sm font-semibold text-accent-foreground">Tickets abertos por esta máquina</h4>
|
|
{machineTicketsHref ? (
|
|
<Link
|
|
href={machineTicketsHref}
|
|
className="text-xs font-semibold text-accent-foreground underline-offset-4 transition hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent-foreground)] focus-visible:ring-offset-2"
|
|
>
|
|
Ver todos
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
{totalOpenTickets === 0 ? (
|
|
<p className="text-xs text-[color:var(--accent-foreground)]/80">
|
|
Nenhum chamado em aberto registrado diretamente por esta máquina.
|
|
</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{hasAdditionalOpenTickets ? (
|
|
<p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-[color:var(--accent-foreground)]/70">
|
|
Mostrando últimos {Math.min(displayLimit, totalOpenTickets)} de {totalOpenTickets} chamados
|
|
em aberto
|
|
</p>
|
|
) : null}
|
|
<ul className="space-y-2">
|
|
{displayedMachineTickets.map((ticket) => {
|
|
const priorityMeta = getTicketPriorityMeta(ticket.priority)
|
|
return (
|
|
<li key={ticket.id}>
|
|
<Link
|
|
href={`/tickets/${ticket.id}`}
|
|
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[color:var(--accent)] bg-white px-3 py-2 text-sm shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] focus-visible:ring-offset-2"
|
|
>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate font-medium text-neutral-900">
|
|
#{ticket.reference} · {ticket.subject}
|
|
</p>
|
|
<p className="text-xs text-neutral-500">
|
|
Atualizado {formatRelativeTime(new Date(ticket.updatedAt))}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge className={cn("rounded-full px-3 py-1 text-xs font-semibold", priorityMeta.badgeClass)}>
|
|
{priorityMeta.label}
|
|
</Badge>
|
|
<TicketStatusBadge status={ticket.status} className="h-7 px-3 text-xs font-semibold" />
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="self-center justify-self-end">
|
|
<div className="flex h-12 min-w-[72px] items-center justify-center rounded-2xl border border-[color:var(--accent)] bg-white px-5 shadow-sm sm:min-w-[88px]">
|
|
<span className="text-2xl font-semibold leading-none text-accent-foreground tabular-nums sm:text-3xl">
|
|
{totalOpenTickets}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{machine.authEmail ? (
|
|
<Button size="sm" variant="outline" onClick={copyEmail} className="gap-2 border-dashed">
|
|
<ClipboardCopy className="size-4" />
|
|
Copiar e-mail
|
|
</Button>
|
|
) : null}
|
|
<Button size="sm" variant="outline" className="gap-2 border-dashed" onClick={() => { setAccessDialog(true) }}>
|
|
<ShieldCheck className="size-4" />
|
|
Ajustar acesso
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant={isActiveLocal ? "outline" : "default"}
|
|
className={cn(
|
|
"gap-2 border-dashed",
|
|
!isActiveLocal && "bg-emerald-600 text-white hover:bg-emerald-600/90"
|
|
)}
|
|
onClick={handleToggleActive}
|
|
disabled={togglingActive}
|
|
>
|
|
{isActiveLocal ? <Power className="size-4" /> : <PlayCircle className="size-4" />}
|
|
{isActiveLocal ? (togglingActive ? "Desativando..." : "Desativar") : togglingActive ? "Reativando..." : "Reativar"}
|
|
</Button>
|
|
{machine.registeredBy ? (
|
|
<span
|
|
className={cn(
|
|
buttonVariants({ variant: "outline", size: "sm" }),
|
|
"gap-2 border-dashed border-slate-200 bg-background cursor-default select-text text-neutral-700 hover:bg-background hover:text-neutral-700 focus-visible:outline-none"
|
|
)}
|
|
>
|
|
Registrada via {machine.registeredBy}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h4 className="text-sm font-semibold">Acesso remoto</h4>
|
|
{hasRemoteAccess ? (
|
|
<Badge variant="outline" className="border-slate-200 bg-slate-100 text-[11px] font-semibold text-slate-700">
|
|
{remoteAccessEntries.length === 1
|
|
? remoteAccessEntries[0].provider ?? "Configuração única"
|
|
: `${remoteAccessEntries.length} acessos`}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
{canManageRemoteAccess ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="gap-2 border-dashed"
|
|
onClick={() => {
|
|
setEditingRemoteAccessClientId(null)
|
|
setRemoteAccessDialog(true)
|
|
}}
|
|
>
|
|
<Key className="size-4" />
|
|
{hasRemoteAccess ? "Adicionar acesso" : "Cadastrar acesso"}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
{hasRemoteAccess ? (
|
|
<div className="space-y-3">
|
|
{remoteAccessEntries.map((entry) => {
|
|
const metadataEntries = extractRemoteAccessMetadataEntries(entry.metadata)
|
|
const lastVerifiedDate =
|
|
entry.lastVerifiedAt && Number.isFinite(entry.lastVerifiedAt)
|
|
? new Date(entry.lastVerifiedAt)
|
|
: null
|
|
return (
|
|
<div key={entry.clientId} className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-xs sm:text-sm text-slate-700">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{entry.provider ? (
|
|
<Badge variant="outline" className="border-slate-200 bg-white text-[11px] font-semibold text-slate-700">
|
|
{entry.provider}
|
|
</Badge>
|
|
) : null}
|
|
{entry.identifier ? (
|
|
<span className="font-semibold text-neutral-800">{entry.identifier}</span>
|
|
) : null}
|
|
{entry.identifier ? (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 gap-2 border border-transparent px-2 text-slate-600 transition-colors hover:border-slate-300 hover:bg-slate-100 hover:text-slate-900"
|
|
onClick={() => handleCopyRemoteIdentifier(entry.identifier)}
|
|
>
|
|
<ClipboardCopy className="size-3.5" /> Copiar ID
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
{entry.url ? (
|
|
<a
|
|
href={entry.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center gap-2 text-slate-600 underline-offset-4 hover:text-slate-900 hover:underline"
|
|
>
|
|
Abrir console remoto
|
|
</a>
|
|
) : null}
|
|
{entry.notes ? (
|
|
<p className="whitespace-pre-wrap text-[11px] text-slate-600">{entry.notes}</p>
|
|
) : null}
|
|
{lastVerifiedDate ? (
|
|
<p className="text-[11px] text-slate-500">
|
|
Atualizado {formatRelativeTime(lastVerifiedDate)}{" "}
|
|
<span className="text-slate-400">({formatAbsoluteDateTime(lastVerifiedDate)})</span>
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
{canManageRemoteAccess ? (
|
|
<div className="flex items-start gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="gap-2 border-slate-300"
|
|
onClick={() => {
|
|
setEditingRemoteAccessClientId(entry.clientId)
|
|
setRemoteAccessDialog(true)
|
|
}}
|
|
>
|
|
<Pencil className="size-3.5" /> Editar
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="gap-2 text-rose-600 hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700"
|
|
onClick={() => void handleRemoveRemoteAccess(entry)}
|
|
disabled={remoteAccessSaving}
|
|
>
|
|
<ShieldOff className="size-3.5" /> Remover
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{metadataEntries.length ? (
|
|
<details className="mt-3 rounded-lg border border-slate-200 bg-white/70 px-3 py-2 text-[11px] text-slate-600">
|
|
<summary className="cursor-pointer font-semibold text-slate-700 outline-none transition-colors hover:text-slate-900">
|
|
Metadados adicionais
|
|
</summary>
|
|
<div className="mt-2 grid gap-2 sm:grid-cols-2">
|
|
{metadataEntries.map(([key, value]) => (
|
|
<div key={`${entry.clientId}-${key}`} className="flex items-center justify-between gap-3 rounded-md border border-slate-200 bg-white px-2 py-1 shadow-sm">
|
|
<span className="font-semibold text-slate-700">{formatRemoteAccessMetadataKey(key)}</span>
|
|
<span className="truncate text-right text-slate-600">{formatRemoteAccessMetadataValue(value)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</details>
|
|
) : null}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-4 py-3 text-xs sm:text-sm text-slate-600">
|
|
Nenhum identificador de acesso remoto cadastrado. Registre o ID do TeamViewer, AnyDesk ou outra ferramenta para agilizar o suporte.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Usuários vinculados</h4>
|
|
<div className="space-y-2">
|
|
{primaryLinkedUser?.email ? (
|
|
<div className="flex flex-wrap items-center gap-2 rounded-md border border-slate-200 bg-slate-50/80 px-3 py-2 text-sm">
|
|
<ShieldCheck className="size-4 text-slate-500" />
|
|
<span className="font-medium text-neutral-800">{primaryLinkedUser.name || primaryLinkedUser.email}</span>
|
|
<span className="text-neutral-500">{primaryLinkedUser.name ? `· ${primaryLinkedUser.email}` : ""}</span>
|
|
<span className="ml-2 rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-slate-600">Principal</span>
|
|
</div>
|
|
) : null}
|
|
{Array.isArray(machine.linkedUsers) && machine.linkedUsers.length > 0 ? (
|
|
<ul className="divide-y divide-slate-200 overflow-hidden rounded-md border border-slate-200 bg-slate-50/60">
|
|
{machine.linkedUsers.map((u) => (
|
|
<li key={`lu-${u.id}`} className="flex items-center gap-2 px-3 py-2 text-sm">
|
|
<span className="font-medium text-neutral-800">{u.name || u.email}</span>
|
|
<span className="text-neutral-500">{u.name ? `· ${u.email}` : ''}</span>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
|
|
onClick={async () => {
|
|
try {
|
|
const res = await fetch(`/api/admin/machines/links?machineId=${machine.id}&userId=${u.id}`, { method: 'DELETE', credentials: 'include' })
|
|
if (!res.ok) throw new Error('HTTP ' + res.status)
|
|
toast.success('Vínculo removido')
|
|
} catch (e) {
|
|
console.error(e)
|
|
toast.error('Falha ao remover vínculo')
|
|
}
|
|
}}
|
|
>
|
|
Remover
|
|
</Button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
{!primaryLinkedUser?.email && (!machine.linkedUsers || machine.linkedUsers.length === 0) ? (
|
|
<p className="text-xs text-neutral-500">Nenhum usuário vinculado.</p>
|
|
) : null}
|
|
<div className="mt-2 flex flex-wrap items-center gap-2">
|
|
<Input
|
|
value={accessEmail}
|
|
onChange={(e) => setAccessEmail(e.target.value)}
|
|
placeholder="e-mail do usuário para vincular"
|
|
className="max-w-xs"
|
|
type="email"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
onClick={async () => {
|
|
if (!accessEmail.trim()) {
|
|
toast.error('Informe um e-mail para vincular')
|
|
return
|
|
}
|
|
try {
|
|
const res = await fetch('/api/admin/machines/links', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({ machineId: machine.id, email: accessEmail.trim() }),
|
|
})
|
|
if (!res.ok) throw new Error('HTTP ' + res.status)
|
|
toast.success('Usuário vinculado')
|
|
setAccessEmail('')
|
|
} catch (e) {
|
|
console.error(e)
|
|
toast.error('Falha ao vincular usuário')
|
|
}
|
|
}}
|
|
>
|
|
Adicionar vínculo
|
|
</Button>
|
|
<span className="text-xs text-neutral-500">Somente colaboradores/gestores.</span>
|
|
<Link href="/admin/users" className="text-xs underline underline-offset-4">Gerenciar usuários</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Renomear máquina */}
|
|
<Dialog open={renaming} onOpenChange={setRenaming}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Renomear máquina</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="grid gap-3 py-2">
|
|
<Input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="Novo hostname" />
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setRenaming(false)}>Cancelar</Button>
|
|
<Button
|
|
onClick={async () => {
|
|
if (!machine) return
|
|
const name = (newName ?? "").trim()
|
|
if (name.length < 2) {
|
|
toast.error("Informe um nome válido")
|
|
return
|
|
}
|
|
try {
|
|
const res = await fetch("/api/admin/machines/rename", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ machineId: machine.id, hostname: name }),
|
|
})
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
toast.success("Máquina renomeada")
|
|
setRenaming(false)
|
|
} catch (err) {
|
|
console.error(err)
|
|
toast.error("Falha ao renomear máquina")
|
|
}
|
|
}}
|
|
>
|
|
Salvar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={accessDialog} onOpenChange={setAccessDialog}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Ajustar acesso da máquina</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="grid gap-3 py-2">
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">Perfil</label>
|
|
<Select value={accessRole} onValueChange={(value) => setAccessRole((value as "collaborator" | "manager") ?? "collaborator")}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Selecione o perfil" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="collaborator">Colaborador (portal)</SelectItem>
|
|
<SelectItem value="manager">Gestor (painel completo)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">E-mail</label>
|
|
<Input type="email" value={accessEmail} onChange={(e) => setAccessEmail(e.target.value)} placeholder="colaborador@empresa.com" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">Nome (opcional)</label>
|
|
<Input value={accessName} onChange={(e) => setAccessName(e.target.value)} placeholder="Nome completo" />
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setAccessDialog(false)} disabled={savingAccess}>Cancelar</Button>
|
|
<Button onClick={handleSaveAccess} disabled={savingAccess || !accessEmail.trim()}>
|
|
{savingAccess ? "Salvando..." : "Salvar"}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
open={remoteAccessDialog}
|
|
onOpenChange={(open) => {
|
|
setRemoteAccessDialog(open)
|
|
if (!open) {
|
|
setRemoteAccessSaving(false)
|
|
setEditingRemoteAccessClientId(null)
|
|
}
|
|
}}
|
|
>
|
|
<DialogContent className="max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>{editingRemoteAccess ? "Editar acesso remoto" : "Adicionar acesso remoto"}</DialogTitle>
|
|
<DialogDescription>
|
|
Registre os detalhes do acesso remoto utilizado por esta máquina.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<form
|
|
onSubmit={(event) => {
|
|
event.preventDefault()
|
|
void handleSaveRemoteAccess()
|
|
}}
|
|
className="space-y-4"
|
|
>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">Ferramenta</label>
|
|
<Select
|
|
value={remoteAccessProviderOption}
|
|
onValueChange={(value) => setRemoteAccessProviderOption(value as RemoteAccessProviderValue)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Selecione o provedor" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{REMOTE_ACCESS_PROVIDERS.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{remoteAccessProviderOption === "OTHER" ? (
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">Nome da ferramenta</label>
|
|
<Input
|
|
value={remoteAccessCustomProvider}
|
|
onChange={(event) => setRemoteAccessCustomProvider(event.target.value)}
|
|
placeholder="Ex: Supremo, Zoho Assist..."
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">ID / código</label>
|
|
<Input
|
|
value={remoteAccessIdentifierInput}
|
|
onChange={(event) => setRemoteAccessIdentifierInput(event.target.value)}
|
|
placeholder="Ex: 123 456 789"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">Link (opcional)</label>
|
|
<Input
|
|
value={remoteAccessUrlInput}
|
|
onChange={(event) => setRemoteAccessUrlInput(event.target.value)}
|
|
placeholder="https://"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">Observações</label>
|
|
<Textarea
|
|
value={remoteAccessNotesInput}
|
|
onChange={(event) => setRemoteAccessNotesInput(event.target.value)}
|
|
rows={3}
|
|
placeholder="Credencial compartilhada, PIN adicional, instruções..."
|
|
/>
|
|
</div>
|
|
<DialogFooter className="flex flex-wrap items-center justify-between gap-2">
|
|
{editingRemoteAccess ? (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
|
|
onClick={() => editingRemoteAccess && void handleRemoveRemoteAccess(editingRemoteAccess)}
|
|
disabled={remoteAccessSaving}
|
|
>
|
|
Remover acesso
|
|
</Button>
|
|
) : (
|
|
<span />
|
|
)}
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => setRemoteAccessDialog(false)}
|
|
disabled={remoteAccessSaving}
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button type="submit" disabled={remoteAccessSaving}>
|
|
{remoteAccessSaving ? "Salvando..." : editingRemoteAccess ? "Atualizar" : "Salvar"}
|
|
</Button>
|
|
</div>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Sincronização</h4>
|
|
<div className="grid gap-2 text-sm text-muted-foreground">
|
|
<div className="flex justify-between gap-4">
|
|
<span>Último heartbeat</span>
|
|
<span className="text-right font-medium text-foreground">
|
|
{formatRelativeTime(lastHeartbeatDate)}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Criada em</span>
|
|
<span className="text-right font-medium text-foreground">{formatDate(new Date(machine.createdAt))}</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Atualizada em</span>
|
|
<span className="text-right font-medium text-foreground">{formatDate(new Date(machine.updatedAt))}</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Token expira</span>
|
|
<span className="text-right font-medium text-foreground">
|
|
{tokenExpiry ? formatRelativeTime(tokenExpiry) : "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Token usado por último</span>
|
|
<span className="text-right font-medium text-foreground">
|
|
{tokenLastUsed ? formatRelativeTime(tokenLastUsed) : "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Uso do token</span>
|
|
<span className="text-right font-medium text-foreground">{machine.token?.usageCount ?? 0} trocas</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h4 className="text-sm font-semibold">Métricas recentes</h4>
|
|
{lastUpdateRelative ? (
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Última atualização {lastUpdateRelative}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<MetricsGrid metrics={metrics} hardware={hardware} disks={disks} />
|
|
</section>
|
|
|
|
{hardware || network || (labels && labels.length > 0) ? (
|
|
<section className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-semibold">Inventário</h4>
|
|
<p className="text-xs text-muted-foreground">
|
|
Dados sincronizados via agente ou Fleet.
|
|
</p>
|
|
</div>
|
|
<div className="space-y-3 text-sm text-muted-foreground">
|
|
{hardware ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Hardware</p>
|
|
<div className="mt-2 grid gap-1">
|
|
<DetailLine label="Fabricante" value={hardware.vendor} />
|
|
<DetailLine label="Modelo" value={hardware.model} />
|
|
<DetailLine label="Número de série" value={hardware.serial} />
|
|
<DetailLine label="CPU" value={hardware.cpuType} />
|
|
<DetailLine
|
|
label="Núcleos"
|
|
value={`${hardware.physicalCores ?? "?"} físicos / ${hardware.logicalCores ?? "?"} lógicos`}
|
|
/>
|
|
<DetailLine label="Memória" value={formatBytes(Number(hardware.memoryBytes ?? hardware.memory))} />
|
|
{displayGpus.length > 0 ? (
|
|
<div className="mt-2 space-y-1 text-xs text-muted-foreground">
|
|
<p className="font-semibold uppercase text-slate-500">GPUs</p>
|
|
<ul className="space-y-1">
|
|
{displayGpus.slice(0, 3).map((gpu, idx) => {
|
|
const { name, memoryBytes, driver, vendor } = gpu
|
|
return (
|
|
<li key={`gpu-${idx}`}>
|
|
<span className="font-medium text-foreground">{name ?? "Adaptador de vídeo"}</span>
|
|
{memoryBytes ? <span className="ml-1 text-muted-foreground">{formatBytes(memoryBytes)}</span> : null}
|
|
{vendor ? <span className="ml-1 text-muted-foreground">· {vendor}</span> : null}
|
|
{driver ? <span className="ml-1 text-muted-foreground">· Driver {driver}</span> : null}
|
|
</li>
|
|
)
|
|
})}
|
|
{displayGpus.length > 3 ? (
|
|
<li className="text-muted-foreground">+{displayGpus.length - 3} adaptadores adicionais</li>
|
|
) : null}
|
|
</ul>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{networkInterfaces ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Rede (interfaces)</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Interface</TableHead>
|
|
<TableHead className="text-xs text-slate-500">MAC</TableHead>
|
|
<TableHead className="text-xs text-slate-500">IP</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{networkInterfaces.map((iface, idx) => (
|
|
<TableRow key={`iface-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{iface?.name ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{iface?.mac ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{iface?.ip ?? "—"}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : networkSummary ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Rede</p>
|
|
<div className="mt-2 grid gap-1">
|
|
<DetailLine label="IP primário" value={networkSummary.primaryIp} />
|
|
<DetailLine label="IP público" value={networkSummary.publicIp} />
|
|
<DetailLine
|
|
label="MAC addresses"
|
|
value={
|
|
Array.isArray(networkSummary.macAddresses)
|
|
? networkSummary.macAddresses.join(", ")
|
|
: machine?.macAddresses.join(", ")
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{labels && labels.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Labels</p>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{labels.slice(0, 12).map((label, index) => (
|
|
<Badge key={String(label.id ?? `${label.name ?? "label"}-${index}`)} variant="outline">
|
|
{label.name ?? `Label ${index + 1}`}
|
|
</Badge>
|
|
))}
|
|
{labels.length > 12 ? (
|
|
<Badge variant="outline">+{labels.length - 12} outras</Badge>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{/* Discos (agente) */}
|
|
{disks.length > 0 ? (
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Discos e partições</h4>
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Nome</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Mount</TableHead>
|
|
<TableHead className="text-xs text-slate-500">FS</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Capacidade</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Livre</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{disks.map((d, idx) => (
|
|
<TableRow key={`disk-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{d.name ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{d.mountPoint ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{d.fs ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-foreground">{formatBytes(Number(d.totalBytes))}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{formatBytes(Number(d.availableBytes))}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{/* Inventário estendido por SO */}
|
|
{extended ? (
|
|
<section className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-semibold">Inventário estendido</h4>
|
|
<p className="text-xs text-muted-foreground">Dados ricos coletados pelo agente, variam por sistema operacional.</p>
|
|
</div>
|
|
|
|
{/* Linux */}
|
|
{linuxExt ? (
|
|
<div className="space-y-3">
|
|
{linuxLsblk.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Montagens (lsblk)</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Nome</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Ponto de montagem</TableHead>
|
|
<TableHead className="text-xs text-slate-500">FS</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Tamanho</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{linuxLsblk.slice(0, 18).map((entry, idx) => {
|
|
const name = entry.name ?? "—"
|
|
const mp = entry.mountPoint ?? entry.mountpoint ?? "—"
|
|
const fs = entry.fs ?? entry.fstype ?? "—"
|
|
const sizeRaw = typeof entry.sizeBytes === "number" ? entry.sizeBytes : entry.size
|
|
return (
|
|
<TableRow key={`lsblk-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm text-foreground">{name}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{mp || "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{fs || "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{typeof sizeRaw === "number" ? formatBytes(sizeRaw) : "—"}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{linuxSmartEntries.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-emerald-50/40 p-3 dark:bg-emerald-900/10">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">SMART</p>
|
|
<div className="mt-2 grid gap-2">
|
|
{linuxSmartEntries.map((smartEntry, idx) => {
|
|
const ok = smartEntry.smart_status?.passed !== false
|
|
const model = smartEntry.model_name ?? smartEntry.model_family ?? "Disco"
|
|
const serial = smartEntry.serial_number ?? smartEntry.device?.name ?? "—"
|
|
return (
|
|
<div
|
|
key={`smart-${idx}`}
|
|
className={cn(
|
|
"flex items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm",
|
|
ok
|
|
? "border-emerald-500/20 bg-emerald-500/15 text-emerald-700"
|
|
: "border-rose-500/20 bg-rose-500/15 text-rose-700"
|
|
)}
|
|
>
|
|
<span className="font-medium text-foreground">
|
|
{model} <span className="text-muted-foreground">({serial})</span>
|
|
</span>
|
|
<Badge variant="outline" className="text-xs uppercase">
|
|
{ok ? "OK" : "ALERTA"}
|
|
</Badge>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{linuxExt.lspci ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">PCI</p>
|
|
<pre className="mt-2 whitespace-pre-wrap break-words text-xs text-muted-foreground">{linuxExt.lspci}</pre>
|
|
</div>
|
|
) : null}
|
|
{linuxExt.lsusb ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">USB</p>
|
|
<pre className="mt-2 whitespace-pre-wrap break-words text-xs text-muted-foreground">{linuxExt.lsusb}</pre>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{/* Windows */}
|
|
{windowsExt ? (
|
|
<div className="space-y-4">
|
|
{/* Cards resumidos: CPU / RAM / GPU / Discos */}
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
|
|
<Card className="border-slate-200">
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<Cpu className="size-5 text-slate-500" />
|
|
<div className="min-w-0">
|
|
<p className="text-xs text-muted-foreground">CPU</p>
|
|
<p className="break-words text-sm font-semibold text-foreground">{winCpu?.Name ?? "—"}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-slate-200">
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<MemoryStick className="size-5 text-slate-500" />
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">Memória total</p>
|
|
<p className="text-sm font-semibold text-foreground">{formatBytes(winMemTotal)}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-slate-200">
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<Terminal className="size-5 text-slate-500" />
|
|
<div className="min-w-0 space-y-0.5">
|
|
<p className="text-xs text-muted-foreground">Windows</p>
|
|
<p className="break-words text-sm font-semibold text-foreground">
|
|
{windowsEditionLabel ?? machine?.osName ?? "—"}
|
|
</p>
|
|
<p className="break-words text-xs text-muted-foreground">
|
|
{windowsVersionLabel ?? windowsBuildLabel ?? "Versão desconhecida"}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-slate-200">
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<Monitor className="size-5 text-slate-500" />
|
|
<div className="min-w-0 space-y-0.5">
|
|
<p className="text-xs text-muted-foreground">GPU</p>
|
|
<p className="break-words text-sm font-semibold text-foreground">
|
|
{(windowsPrimaryGpu ?? primaryGpu)?.name ?? "—"}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-slate-200">
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<HardDrive className="size-5 text-slate-500" />
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">Discos</p>
|
|
<p className="text-sm font-semibold text-foreground">{winDiskStats.count} · {formatBytes(winDiskStats.total)}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div className="grid gap-3 lg:grid-cols-2">
|
|
<Card className="border-slate-200">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
|
<Monitor className="size-4 text-slate-500" />
|
|
Sistema operacional
|
|
</CardTitle>
|
|
<CardDescription>Build, licença e data de instalação</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-sm">
|
|
<div className="flex flex-wrap gap-2">
|
|
{windowsVersionLabel ? (
|
|
<Badge className={BADGE_NEUTRAL}>
|
|
<RefreshCcw className="size-3" />
|
|
{windowsVersionLabel}
|
|
</Badge>
|
|
) : null}
|
|
{windowsBuildLabel ? (
|
|
<Badge className={BADGE_NEUTRAL}>Build {windowsBuildLabel}</Badge>
|
|
) : null}
|
|
{windowsLicenseStatusLabel ? (
|
|
<Badge className={windowsActivationStatus ? BADGE_POSITIVE : BADGE_WARNING}>
|
|
{windowsActivationStatus ? <ShieldCheck className="size-3" /> : <ShieldAlert className="size-3" />}
|
|
{windowsLicenseStatusLabel}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<DetailLine label="Nome do dispositivo" value={windowsComputerName ?? machine?.hostname ?? "—"} classNameValue="break-words" />
|
|
<DetailLine label="Edição" value={windowsEditionLabel ?? windowsOsInfo?.productName ?? "—"} classNameValue="break-words" />
|
|
<DetailLine label="Experiência" value={windowsExperienceLabel ?? "—"} />
|
|
<DetailLine label="Instalação" value={windowsInstallDateLabel ?? "—"} />
|
|
<DetailLine label="ID do produto" value={windowsProductId ?? "—"} classNameValue="break-words" />
|
|
<DetailLine label="Chave parcial" value={windowsPartialProductKey ?? "—"} classNameValue="break-words" />
|
|
<DetailLine label="Proprietário registrado" value={windowsRegisteredOwner ?? "—"} classNameValue="break-words" />
|
|
<DetailLine label="Número de série" value={windowsSerialNumber ?? "—"} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-slate-200">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
|
<Globe className="size-4 text-slate-500" />
|
|
Identidade e dispositivo
|
|
</CardTitle>
|
|
<CardDescription>Associação a domínio, Azure AD e detalhes físicos</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-sm">
|
|
<div className="grid gap-2">
|
|
<DetailLine label="Fabricante" value={computerManufacturer ?? "—"} />
|
|
<DetailLine label="Modelo" value={computerModel ?? "—"} />
|
|
<DetailLine label="Tipo de sistema" value={computerPcTypeLabel ?? "—"} />
|
|
<DetailLine label="Domínio" value={computerDomain ?? "—"} />
|
|
<DetailLine label="Workgroup" value={computerWorkgroup ?? "—"} />
|
|
<DetailLine label="Função" value={computerDomainRoleLabel ?? "—"} />
|
|
<DetailLine label="Memória física" value={computerTotalMemoryLabel ?? "—"} />
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 text-xs">
|
|
{computerPartOfDomain !== undefined ? (
|
|
<Badge className={computerPartOfDomain ? BADGE_POSITIVE : BADGE_WARNING}>
|
|
{computerPartOfDomain ? <ShieldCheck className="size-3" /> : <ShieldQuestion className="size-3" />}
|
|
{computerPartOfDomain ? `Domínio ativo${computerDomain ? ` (${computerDomain})` : ""}` : "Fora de domínio"}
|
|
</Badge>
|
|
) : null}
|
|
{azureAdJoined !== undefined ? (
|
|
<Badge className={azureAdJoined ? BADGE_POSITIVE : BADGE_NEUTRAL}>
|
|
<Cloud className="size-3" />
|
|
{azureAdJoined ? "Azure AD conectado" : "Azure AD não conectado"}
|
|
</Badge>
|
|
) : null}
|
|
{azureDomainJoined !== undefined ? (
|
|
<Badge className={BADGE_NEUTRAL}>
|
|
<ShieldQuestion className="size-3" />
|
|
Domínio local: {azureDomainJoined ? "Sim" : "Não"}
|
|
</Badge>
|
|
) : null}
|
|
{azureEnterpriseJoined !== undefined ? (
|
|
<Badge className={BADGE_NEUTRAL}>
|
|
<ShieldQuestion className="size-3" />
|
|
Enterprise: {azureEnterpriseJoined ? "Sim" : "Não"}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
{azureTenantName ? (
|
|
<p className="text-xs text-muted-foreground">Tenant: {azureTenantName}</p>
|
|
) : null}
|
|
{azureDeviceId ? (
|
|
<p className="break-words text-xs text-muted-foreground">Device ID: {azureDeviceId}</p>
|
|
) : null}
|
|
{azureUserSso ? (
|
|
<p className="text-xs text-muted-foreground">Usuário SSO: {azureUserSso}</p>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-slate-200 lg:col-span-2">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
|
<RefreshCcw className="size-4 text-slate-500" />
|
|
Atualizações do Windows
|
|
</CardTitle>
|
|
<CardDescription>Configurações automáticas e histórico recente</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4 text-sm lg:flex-row lg:items-start lg:gap-8">
|
|
<div className="flex-1 space-y-3">
|
|
<div className="flex flex-wrap gap-2 text-xs">
|
|
{windowsUpdateDisabled !== undefined ? (
|
|
<Badge className={windowsUpdateDisabled ? BADGE_WARNING : BADGE_POSITIVE}>
|
|
{windowsUpdateDisabled ? <ShieldOff className="size-3" /> : <ShieldCheck className="size-3" />}
|
|
{windowsUpdateDisabled ? "Atualizações desativadas" : "Atualizações automáticas"}
|
|
</Badge>
|
|
) : null}
|
|
{windowsUpdateDetectionEnabled === false ? (
|
|
<Badge className={BADGE_WARNING}>
|
|
<AlertTriangle className="size-3" />
|
|
Sem detecção automática
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<DetailLine label="Modo" value={windowsUpdateMode ?? "—"} layout="compact" />
|
|
<DetailLine label="Agendamento" value={windowsUpdateScheduleLabel ?? "—"} layout="compact" />
|
|
<DetailLine label="Último sucesso" value={windowsUpdateLastSuccessLabel ?? "—"} layout="compact" />
|
|
</div>
|
|
</div>
|
|
{windowsHotfixes.length > 0 ? (
|
|
<div className="w-full rounded-md border border-slate-200 bg-slate-50/80 p-3 lg:ml-auto lg:w-[320px] lg:basis-[320px] lg:flex-shrink-0 lg:self-stretch">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Atualizações recentes</p>
|
|
<ul className="mt-2 space-y-1 text-xs text-muted-foreground">
|
|
{windowsHotfixes.slice(0, 3).map((fix) => (
|
|
<li key={fix.id} className="flex flex-col gap-1 border-b border-slate-200 pb-1 last:border-b-0 last:pb-0">
|
|
<span className="font-medium text-foreground">{fix.id}</span>
|
|
<span className="text-[11px] uppercase tracking-wide text-slate-500">{fix.installedLabel}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-slate-200 lg:col-span-2">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
|
<Shield className="size-4 text-slate-500" />
|
|
Segurança do dispositivo
|
|
</CardTitle>
|
|
<CardDescription>Proteções do Windows, criptografia e firewall</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4 text-sm">
|
|
<div className="flex flex-wrap gap-2 text-xs">
|
|
{windowsActivationStatus !== null && windowsActivationStatus !== undefined ? (
|
|
<Badge className={windowsActivationStatus ? BADGE_POSITIVE : BADGE_WARNING}>
|
|
{windowsActivationStatus ? <ShieldCheck className="size-3" /> : <ShieldAlert className="size-3" />}
|
|
{windowsActivationStatus ? "Licença ativada" : "Licença pendente"}
|
|
</Badge>
|
|
) : null}
|
|
{defenderAntivirus !== undefined ? (
|
|
<Badge className={defenderAntivirus ? BADGE_POSITIVE : BADGE_WARNING}>
|
|
{defenderAntivirus ? <ShieldCheck className="size-3" /> : <ShieldAlert className="size-3" />}
|
|
Antivírus {defenderAntivirus ? "ativo" : "inativo"}
|
|
</Badge>
|
|
) : null}
|
|
{defenderRealtime !== undefined ? (
|
|
<Badge className={defenderRealtime ? BADGE_POSITIVE : BADGE_WARNING}>
|
|
{defenderRealtime ? <ShieldCheck className="size-3" /> : <ShieldAlert className="size-3" />}
|
|
Tempo real {defenderRealtime ? "ativo" : "inativo"}
|
|
</Badge>
|
|
) : null}
|
|
{secureBootSupported !== undefined ? (
|
|
<Badge
|
|
className={
|
|
secureBootEnabled === true
|
|
? BADGE_POSITIVE
|
|
: secureBootSupported
|
|
? BADGE_WARNING
|
|
: BADGE_NEUTRAL
|
|
}
|
|
>
|
|
{secureBootEnabled
|
|
? <Shield className="size-3" />
|
|
: secureBootSupported
|
|
? <ShieldQuestion className="size-3" />
|
|
: <ShieldOff className="size-3" />}
|
|
{secureBootSupported
|
|
? secureBootEnabled === true
|
|
? "Secure Boot ativo"
|
|
: "Secure Boot desabilitado"
|
|
: "Secure Boot não suportado"}
|
|
</Badge>
|
|
) : null}
|
|
{windowsBitLockerSummary ? (
|
|
<Badge
|
|
className={
|
|
windowsBitLockerSummary.protectedCount === windowsBitLockerSummary.total
|
|
? BADGE_POSITIVE
|
|
: BADGE_WARNING
|
|
}
|
|
>
|
|
<Lock className="size-3" />
|
|
{windowsBitLockerSummary.protectedCount}/{windowsBitLockerSummary.total} BitLocker
|
|
</Badge>
|
|
) : null}
|
|
{tpmPresent !== undefined ? (
|
|
<Badge className={tpmPresent ? BADGE_POSITIVE : BADGE_WARNING}>
|
|
<Key className="size-3" />
|
|
{tpmPresent ? (tpmReady ? "TPM pronto" : "TPM detectado") : "TPM ausente"}
|
|
</Badge>
|
|
) : null}
|
|
{windowsDeviceGuardDetails ? (
|
|
<Badge className={windowsDeviceGuardDetails.vbs === 3 ? BADGE_POSITIVE : BADGE_NEUTRAL}>
|
|
<ShieldQuestion className="size-3" />
|
|
{describeVbsStatus(windowsDeviceGuardDetails.vbs) ?? "VBS desconhecido"}
|
|
</Badge>
|
|
) : null}
|
|
{windowsFirewallNormalized.length > 0 ? (
|
|
<Badge
|
|
className={
|
|
firewallEnabledCount === windowsFirewallNormalized.length ? BADGE_POSITIVE : BADGE_WARNING
|
|
}
|
|
>
|
|
<Shield className="size-3" />
|
|
Firewall {firewallEnabledCount}/{windowsFirewallNormalized.length}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
|
|
{windowsDefender ? (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Defender</p>
|
|
<div className="mt-1 grid gap-1 text-xs text-muted-foreground">
|
|
<span>Modo: {defenderMode ?? "—"}</span>
|
|
<span>
|
|
Antivírus: {defenderAntivirus === undefined ? "—" : defenderAntivirus ? "Ativo" : "Inativo"}
|
|
</span>
|
|
<span>
|
|
Tempo real: {defenderRealtime === undefined ? "—" : defenderRealtime ? "Ativo" : "Inativo"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{secureBootError ? (
|
|
<div className="flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-700">
|
|
<AlertTriangle className="mt-0.5 size-3 shrink-0" />
|
|
<span>{secureBootError}</span>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsBitLockerVolumes.length > 0 ? (
|
|
<div>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">BitLocker</p>
|
|
<Badge variant="outline" className="text-[11px] text-slate-600">
|
|
{windowsBitLockerSummary
|
|
? `${windowsBitLockerSummary.protectedCount}/${windowsBitLockerSummary.total} protegidos`
|
|
: `${windowsBitLockerVolumes.length} volumes`}
|
|
</Badge>
|
|
</div>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Volume</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Proteção</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Bloqueio</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Método</TableHead>
|
|
<TableHead className="text-xs text-slate-500">% Cript.</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{windowsBitLockerVolumes.map((volume, idx) => {
|
|
const record = toRecord(volume) ?? {}
|
|
const mount = readString(record, "MountPoint", "mountPoint") ?? "—"
|
|
const protection = readString(record, "ProtectionStatus", "protectionStatus") ?? "—"
|
|
const lock = readString(record, "LockStatus", "lockStatus") ?? "—"
|
|
const method = readString(record, "EncryptionMethod", "encryptionMethod") ?? "—"
|
|
const percent = readNumber(record, "EncryptionPercentage", "encryptionPercentage")
|
|
return (
|
|
<TableRow key={`bit-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{mount}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{protection}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{lock}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{method}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{percent != null ? formatPercent(percent) : "—"}
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsTpm ? (
|
|
<div className="grid gap-1 text-xs text-muted-foreground">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">TPM</p>
|
|
<span>Fabricante: {tpmManufacturer ?? "—"}</span>
|
|
<span>Versão: {tpmVersion ?? "—"}</span>
|
|
<span>
|
|
Status:{" "}
|
|
{tpmPresent === undefined
|
|
? "—"
|
|
: [
|
|
tpmPresent ? "Presente" : "Ausente",
|
|
tpmEnabled ? "Habilitado" : "Desabilitado",
|
|
tpmReady ? "Pronto" : "Não pronto",
|
|
tpmActivated ? "Ativado" : "Inativo",
|
|
].join(" · ")}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground">
|
|
TPM: não foi possível coletar informações (requer privilégios administrativos na máquina).
|
|
</p>
|
|
)}
|
|
|
|
{windowsDeviceGuardDetails ? (
|
|
<div className="grid gap-1 text-xs text-muted-foreground">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Device Guard</p>
|
|
<span>{describeVbsStatus(windowsDeviceGuardDetails.vbs) ?? "—"}</span>
|
|
{deviceGuardConfiguredLabels.length > 0 ? (
|
|
<span>Configurado: {deviceGuardConfiguredLabels.join(", ")}</span>
|
|
) : null}
|
|
{deviceGuardRunningLabels.length > 0 ? (
|
|
<span>Em execução: {deviceGuardRunningLabels.join(", ")}</span>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsFirewallNormalized.length > 0 ? (
|
|
<div>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Perfis de firewall</p>
|
|
<Badge variant="outline" className="text-[11px] text-slate-600">
|
|
{firewallEnabledCount}/{windowsFirewallNormalized.length} ativos
|
|
</Badge>
|
|
</div>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Perfil</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Entrada</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Saída</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{windowsFirewallNormalized.map((profile, idx) => (
|
|
<TableRow key={`fw-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{profile.name}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{profile.inboundAction ?? "—"}
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{profile.outboundAction ?? "—"}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{windowsCpuDetails.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">CPU</p>
|
|
{windowsCpuDetails.slice(0, 1).map((cpuRecord, idx) => (
|
|
<div key={`cpu-${idx}`} className="mt-2 grid gap-1 text-sm text-muted-foreground">
|
|
<DetailLine label="Modelo" value={cpuRecord?.Name ?? "—"} classNameValue="break-words" />
|
|
<DetailLine label="Fabricante" value={cpuRecord?.Manufacturer ?? "—"} />
|
|
<DetailLine label="Socket" value={cpuRecord?.SocketDesignation ?? "—"} />
|
|
<DetailLine label="Núcleos" value={cpuRecord?.NumberOfCores != null ? `${cpuRecord.NumberOfCores}` : "—"} />
|
|
<DetailLine label="Threads" value={cpuRecord?.NumberOfLogicalProcessors != null ? `${cpuRecord.NumberOfLogicalProcessors}` : "—"} />
|
|
<DetailLine label="L2" value={cpuRecord?.L2CacheSize != null ? `${cpuRecord.L2CacheSize} KB` : "—"} />
|
|
<DetailLine label="L3" value={cpuRecord?.L3CacheSize != null ? `${cpuRecord.L3CacheSize} KB` : "—"} />
|
|
<DetailLine label="Clock máx" value={cpuRecord?.MaxClockSpeed != null ? `${cpuRecord.MaxClockSpeed} MHz` : "—"} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsExt.baseboard || windowsExt.bios ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Placa-mãe / BIOS</p>
|
|
<div className="mt-2 grid gap-1 text-sm text-muted-foreground">
|
|
{(() => {
|
|
const b = Array.isArray(windowsExt.baseboard) ? windowsExt.baseboard[0] : windowsExt.baseboard
|
|
const bios = Array.isArray(windowsExt.bios) ? windowsExt.bios[0] : windowsExt.bios
|
|
return (
|
|
<>
|
|
<DetailLine label="Board" value={b ? `${String(b?.["Manufacturer"] ?? "")} ${String(b?.["Product"] ?? "")}`.trim() : "—"} />
|
|
<DetailLine label="Board SN" value={b ? String(b?.["SerialNumber"] ?? "—") : "—"} />
|
|
<DetailLine label="BIOS" value={bios ? `${String(bios?.["Manufacturer"] ?? "")} ${String(bios?.["SMBIOSBIOSVersion"] ?? "")}`.trim() : "—"} />
|
|
</>
|
|
)
|
|
})()}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{windowsServices.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Serviços</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Nome</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Exibição</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{windowsServices.slice(0, 10).map((service, index) => {
|
|
const record = toRecord(service) ?? {}
|
|
const name = readString(record, "Name", "name") ?? "—"
|
|
const displayName = readString(record, "DisplayName", "displayName") ?? "—"
|
|
const status = readString(record, "Status", "status") ?? "—"
|
|
return (
|
|
<TableRow key={`svc-${index}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{name}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{displayName}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{status}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{normalizedWindowsSoftware.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Aplicativos instalados</p>
|
|
{normalizedWindowsSoftware.length > 12 ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-xs text-slate-600 hover:bg-slate-200/60"
|
|
onClick={() => setShowAllWindowsSoftware((prev) => !prev)}
|
|
>
|
|
{showAllWindowsSoftware ? "Mostrar menos" : `Ver todos (${normalizedWindowsSoftware.length})`}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
<ul className="mt-2 space-y-2">
|
|
{displayedWindowsSoftware.map((softwareItem, index) => {
|
|
const initials = collectInitials(softwareItem.name)
|
|
const installedAt = formatInstallDate(softwareItem.installDate)
|
|
return (
|
|
<li key={`sw-${index}`} className="flex items-start gap-3 rounded-md border border-slate-200 bg-white px-3 py-2">
|
|
<span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-200 text-xs font-semibold uppercase text-slate-700">
|
|
{initials}
|
|
</span>
|
|
<div className="flex-1 space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-sm font-semibold text-foreground">{softwareItem.name}</span>
|
|
{softwareItem.version ? (
|
|
<Badge variant="outline" className="border-slate-300 bg-slate-100 text-[11px] text-slate-700">
|
|
{softwareItem.version}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
|
|
{softwareItem.publisher ? <span>{softwareItem.publisher}</span> : null}
|
|
{installedAt ? <span>Instalado em {installedAt}</span> : null}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsMemoryModules.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Módulos de memória</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Banco</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Capacidade</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Fabricante</TableHead>
|
|
<TableHead className="text-xs text-slate-500">PartNumber</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Clock</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{windowsMemoryModules.map((module, idx) => {
|
|
const record = toRecord(module) ?? {}
|
|
const bank = readString(record, "BankLabel", "bankLabel") ?? "—"
|
|
const capacityBytes =
|
|
parseBytesLike(record["Capacity"]) ?? parseBytesLike(record["capacity"]) ?? 0
|
|
const manufacturer = readString(record, "Manufacturer", "manufacturer") ?? "—"
|
|
const partNumber = readString(record, "PartNumber", "partNumber") ?? "—"
|
|
const clockValue = readNumber(
|
|
record,
|
|
"ConfiguredClockSpeed",
|
|
"configuredClockSpeed",
|
|
"Speed",
|
|
"speed"
|
|
)
|
|
const clockLabel =
|
|
typeof clockValue === "number" && Number.isFinite(clockValue)
|
|
? `${clockValue} MHz`
|
|
: "—"
|
|
return (
|
|
<TableRow key={`mem-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{bank}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{capacityBytes > 0 ? formatBytes(capacityBytes) : "—"}
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{manufacturer}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{partNumber}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{clockLabel}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsVideoControllers.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Adaptadores de vídeo</p>
|
|
<ul className="mt-2 grid gap-1 text-xs text-muted-foreground">
|
|
{windowsVideoControllers.map((controller, idx) => {
|
|
const record = toRecord(controller) ?? {}
|
|
const normalized = normalizeGpuSource(record)
|
|
const name =
|
|
normalized?.name ??
|
|
readString(record, "Name", "name") ??
|
|
"—"
|
|
const ram =
|
|
normalized?.memoryBytes ??
|
|
parseBytesLike(record["AdapterRAM"]) ??
|
|
undefined
|
|
const driver = normalized?.driver ?? readString(record, "DriverVersion", "driverVersion")
|
|
const vendor = normalized?.vendor ?? readString(record, "AdapterCompatibility")
|
|
return (
|
|
<li key={`vid-${idx}`}>
|
|
<span className="font-medium text-foreground">{name}</span>
|
|
{typeof ram === "number" && ram > 0 ? <span className="ml-1">{formatBytes(ram)}</span> : null}
|
|
{vendor ? <span className="ml-1 text-muted-foreground">· {vendor}</span> : null}
|
|
{driver ? <span className="ml-1">· Driver {driver}</span> : null}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsDiskEntries.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Discos físicos</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Modelo</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Tamanho</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Interface</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Tipo</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Serial</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{windowsDiskEntries.map((disk, idx) => {
|
|
const record = toRecord(disk) ?? {}
|
|
const model = readString(record, "Model", "model")
|
|
const serial = readString(record, "SerialNumber", "serialNumber")
|
|
const size = parseBytesLike(record["Size"])
|
|
const iface = readString(record, "InterfaceType", "interfaceType")
|
|
const media = readString(record, "MediaType", "mediaType")
|
|
return (
|
|
<TableRow key={`diskp-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{model ?? serial ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{typeof size === "number" && size > 0 ? formatBytes(size) : "—"}
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{iface ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{media ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{serial ?? "—"}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
</div>
|
|
) : null}
|
|
|
|
{/* macOS */}
|
|
{macosExt ? (
|
|
<div className="space-y-3">
|
|
{Array.isArray(macosExt.packages) && macosExt.packages.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Pacotes</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{macosExt.packages.slice(0, 8).join(", ")}</p>
|
|
</div>
|
|
) : null}
|
|
{macosExt.launchctl ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Launchctl</p>
|
|
<pre className="mt-2 whitespace-pre-wrap break-words text-xs text-muted-foreground">{macosExt.launchctl}</pre>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
) : null}
|
|
|
|
{/* Postura/Alertas */}
|
|
{Array.isArray(machine?.postureAlerts) && machine?.postureAlerts?.length ? (
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Alertas de postura</h4>
|
|
<div className="space-y-2">
|
|
{machine?.postureAlerts?.map((a: { kind?: string; message?: string; severity?: string }, i: number) => (
|
|
<div
|
|
key={`alert-${i}`}
|
|
className={cn(
|
|
"flex items-center justify-between rounded-md border px-3 py-2 text-sm",
|
|
postureSeverityClass(a?.severity)
|
|
)}
|
|
>
|
|
<span className="font-medium text-foreground">{a?.message ?? formatPostureAlertKind(a?.kind)}</span>
|
|
<Badge variant="outline">{formatPostureAlertKind(a?.kind)}</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Última avaliação: {machine?.lastPostureAt ? formatRelativeTime(new Date(machine.lastPostureAt)) : "—"}
|
|
</p>
|
|
</section>
|
|
) : null}
|
|
|
|
<section className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<h4 className="text-sm font-semibold">Histórico de alertas</h4>
|
|
{machineAlertsHistory.length > 0 ? (
|
|
<span className="text-xs text-muted-foreground">
|
|
Últimos {machineAlertsHistory.length} {machineAlertsHistory.length === 1 ? "evento" : "eventos"}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{machineAlertsHistory.length > 0 ? (
|
|
<div className="relative max-h-64 overflow-y-auto pr-2">
|
|
<div className="absolute left-3 top-3 bottom-3 w-px bg-slate-200" />
|
|
<ol className="space-y-3 pl-6">
|
|
{machineAlertsHistory.map((alert) => {
|
|
const date = new Date(alert.createdAt)
|
|
return (
|
|
<li key={alert.id} className="relative rounded-md border border-slate-200/80 bg-white px-3 py-2 text-xs shadow-sm">
|
|
<span className="absolute -left-5 top-3 inline-flex size-3 items-center justify-center rounded-full border border-white bg-slate-200 ring-2 ring-white" />
|
|
<div className={cn("flex items-center justify-between", postureSeverityClass(alert.severity))}>
|
|
<span className="text-xs font-medium uppercase tracking-wide text-slate-600">{formatPostureAlertKind(alert.kind)}</span>
|
|
<span className="text-xs text-slate-500">{formatRelativeTime(date)}</span>
|
|
</div>
|
|
<p className="mt-1 text-sm text-foreground">{alert.message ?? formatPostureAlertKind(alert.kind)}</p>
|
|
<p className="mt-1 text-[11px] text-muted-foreground">{format(date, "dd/MM/yyyy HH:mm:ss")}</p>
|
|
</li>
|
|
)
|
|
})}
|
|
</ol>
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground">Nenhum alerta registrado para esta máquina.</p>
|
|
)}
|
|
</section>
|
|
|
|
<div className="flex flex-wrap gap-2 pt-2">
|
|
{Array.isArray(software) && software.length > 0 ? (
|
|
<Button size="sm" variant="outline" onClick={() => exportCsv(software, "softwares.csv")}>Softwares CSV</Button>
|
|
) : null}
|
|
{Array.isArray(metadata?.services) && metadata.services.length > 0 ? (
|
|
<Button size="sm" variant="outline" onClick={() => exportCsv(metadata.services as Array<Record<string, unknown>>, "servicos.csv")}>Serviços CSV</Button>
|
|
) : null}
|
|
</div>
|
|
{fleet ? (
|
|
<section className="space-y-2 text-sm text-muted-foreground">
|
|
<Separator />
|
|
<div className="flex items-center justify-between">
|
|
<span>ID Fleet</span>
|
|
<span className="font-medium text-foreground">{fleet.id ?? "—"}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span>Team ID</span>
|
|
<span className="font-medium text-foreground">{fleet.teamId ?? "—"}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span>Detalhes atualizados</span>
|
|
<span className="font-medium text-foreground">
|
|
{fleet.detailUpdatedAt ? formatDate(new Date(String(fleet.detailUpdatedAt))) : "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span>Versão osquery</span>
|
|
<span className="font-medium text-foreground">{fleet.osqueryVersion ?? "—"}</span>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{software && software.length > 0 ? (
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Softwares detectados</h4>
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Nome</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Versão</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Fonte</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{software.slice(0, 6).map((item, index) => (
|
|
<TableRow key={`${item.name ?? "software"}-${index}`} className="border-slate-100">
|
|
<TableCell className="text-sm text-foreground">{item.name ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{item.version ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{item.source ?? "—"}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
{software.length > 6 ? (
|
|
<p className="px-3 py-2 text-xs text-muted-foreground">
|
|
+{software.length - 6} softwares adicionais sincronizados via Fleet.
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{machine ? (
|
|
<section className="space-y-2 rounded-md border border-rose-200 bg-rose-50/60 p-3">
|
|
<div className="space-y-1">
|
|
<h4 className="text-sm font-semibold text-rose-700">Zona perigosa</h4>
|
|
<p className="text-xs text-rose-600">
|
|
Excluir a máquina revoga o token atual e remove os dados de inventário sincronizados.
|
|
</p>
|
|
</div>
|
|
<Button variant="destructive" size="sm" onClick={() => setDeleteDialog(true)}>Excluir máquina</Button>
|
|
</section>
|
|
) : null}
|
|
|
|
<Dialog open={openDialog} onOpenChange={setOpenDialog}>
|
|
<div className="flex flex-wrap items-center justify-end gap-2">
|
|
{machine ? (
|
|
<Button size="sm" variant="outline" asChild className="inline-flex items-center gap-2">
|
|
<a href={`/api/admin/machines/${machine.id}/inventory.xlsx`} download>
|
|
<Download className="size-4" /> Exportar planilha
|
|
</a>
|
|
</Button>
|
|
) : null}
|
|
<DialogTrigger asChild>
|
|
<Button size="sm" variant="outline" onClick={() => setOpenDialog(true)}>Inventário completo</Button>
|
|
</DialogTrigger>
|
|
</div>
|
|
<DialogContent className="max-w-3xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Inventário completo — {machine.hostname}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-2">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<Input
|
|
placeholder="Buscar no JSON"
|
|
value={dialogQuery}
|
|
onChange={(e) => setDialogQuery(e.target.value)}
|
|
className="sm:flex-1"
|
|
/>
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleDownloadInventoryJson}
|
|
className="inline-flex items-center gap-2"
|
|
>
|
|
<Download className="size-4" /> Baixar JSON
|
|
</Button>
|
|
{machine ? (
|
|
<Button type="button" variant="outline" size="sm" asChild className="inline-flex items-center gap-2">
|
|
<a href={`/api/admin/machines/${machine.id}/inventory.xlsx`} download>
|
|
<Download className="size-4" /> Baixar planilha
|
|
</a>
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="max-h-[60vh] overflow-auto rounded-md border border-slate-200 bg-slate-50/60 p-3 text-xs">
|
|
<pre className="whitespace-pre-wrap break-words text-muted-foreground" dangerouslySetInnerHTML={{ __html: filteredJsonHtml
|
|
.replaceAll("__HIGHLIGHT__", '<mark class="bg-yellow-200 text-foreground">')
|
|
.replaceAll("__END__", '</mark>')
|
|
}} />
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={deleteDialog} onOpenChange={(open) => { if (!open) setDeleting(false); setDeleteDialog(open) }}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Excluir máquina</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-3 text-sm text-muted-foreground">
|
|
<p>Tem certeza que deseja excluir <span className="font-semibold text-foreground">{machine?.hostname}</span>? Esta ação não pode ser desfeita.</p>
|
|
<p>Os tokens ativos serão revogados e o inventário deixará de aparecer no painel.</p>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setDeleteDialog(false)} disabled={deleting}>Cancelar</Button>
|
|
<Button
|
|
variant="destructive"
|
|
disabled={deleting}
|
|
onClick={async () => {
|
|
if (!machine) return
|
|
setDeleting(true)
|
|
try {
|
|
const res = await fetch("/api/admin/machines/delete", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ machineId: machine.id }),
|
|
credentials: "include",
|
|
})
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
toast.success("Máquina excluída")
|
|
setDeleteDialog(false)
|
|
router.push("/admin/machines")
|
|
} catch (err) {
|
|
console.error(err)
|
|
toast.error("Falha ao excluir máquina")
|
|
} finally {
|
|
setDeleting(false)
|
|
}
|
|
}}
|
|
>
|
|
{deleting ? "Excluindo..." : "Excluir máquina"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function MachinesGrid({ machines, companyNameBySlug }: { machines: MachinesQueryItem[]; companyNameBySlug: Map<string, string> }) {
|
|
if (!machines || machines.length === 0) return <EmptyState />
|
|
return (
|
|
<div className="grid grid-cols-1 gap-3 [@supports(display:grid)]:grid-cols-[repeat(auto-fit,minmax(280px,1fr))]">
|
|
{machines.map((m) => (
|
|
<MachineCard
|
|
key={m.id}
|
|
machine={m}
|
|
companyName={m.companyName ?? (m.companySlug ? companyNameBySlug.get(m.companySlug) ?? m.companySlug : null)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MachineCard({ machine, companyName }: { machine: MachinesQueryItem; companyName?: string | null }) {
|
|
const effectiveStatus = resolveMachineStatus(machine)
|
|
const isActive = machine.isActive
|
|
const lastHeartbeat = machine.lastHeartbeatAt ? new Date(machine.lastHeartbeatAt) : null
|
|
type AgentMetrics = {
|
|
memoryUsedBytes?: number
|
|
memoryTotalBytes?: number
|
|
memoryUsedPercent?: number
|
|
cpuUsagePercent?: number
|
|
}
|
|
const mm = (machine.metrics ?? null) as unknown as AgentMetrics | null
|
|
const memUsed = mm?.memoryUsedBytes ?? NaN
|
|
const memTotal = mm?.memoryTotalBytes ?? NaN
|
|
const memPct = mm?.memoryUsedPercent ?? (Number.isFinite(memUsed) && Number.isFinite(memTotal) ? (Number(memUsed) / Number(memTotal)) * 100 : NaN)
|
|
const cpuPct = mm?.cpuUsagePercent ?? NaN
|
|
const collaborator = (() => {
|
|
if (machine.assignedUserEmail) {
|
|
return {
|
|
email: machine.assignedUserEmail ?? undefined,
|
|
name: machine.assignedUserName ?? undefined,
|
|
role: machine.persona ?? machine.assignedUserRole ?? undefined,
|
|
}
|
|
}
|
|
const inv = machine.inventory as unknown
|
|
if (!inv || typeof inv !== "object") return null
|
|
const raw = (inv as Record<string, unknown>).collaborator
|
|
if (!raw || typeof raw !== "object") return null
|
|
const obj = raw as Record<string, unknown>
|
|
const email = typeof obj.email === "string" ? obj.email : undefined
|
|
if (!email) return null
|
|
return {
|
|
email,
|
|
name: typeof obj.name === "string" ? obj.name : undefined,
|
|
role: typeof obj.role === "string" ? (obj.role as string) : undefined,
|
|
}
|
|
})()
|
|
const persona = collaborator?.role === "manager" ? "Gestor" : "Colaborador"
|
|
const companyLabel = companyName ?? machine.companySlug ?? null
|
|
|
|
return (
|
|
<Link href={`/admin/machines/${machine.id}`} className="group">
|
|
<Card className={cn("relative h-full overflow-hidden border-slate-200 transition-colors hover:border-slate-300", !isActive && "border-slate-300 bg-slate-50") }>
|
|
<div className="absolute right-2 top-2">
|
|
<span
|
|
aria-hidden
|
|
className={cn(
|
|
"relative block size-2 rounded-full",
|
|
effectiveStatus === "online"
|
|
? "bg-emerald-500"
|
|
: effectiveStatus === "offline"
|
|
? "bg-rose-500"
|
|
: effectiveStatus === "maintenance"
|
|
? "bg-amber-500"
|
|
: effectiveStatus === "blocked"
|
|
? "bg-orange-500"
|
|
: effectiveStatus === "deactivated"
|
|
? "bg-slate-500"
|
|
: "bg-slate-400"
|
|
)}
|
|
/>
|
|
{effectiveStatus === "online" ? (
|
|
<span className="absolute left-1/2 top-1/2 -z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400/30 animate-ping" />
|
|
) : null}
|
|
</div>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="line-clamp-1 flex items-center gap-2 text-base font-semibold">
|
|
<Monitor className="size-4 text-slate-500" /> {machine.hostname}
|
|
</CardTitle>
|
|
<CardDescription className="line-clamp-1 text-xs">{machine.authEmail ?? "—"}</CardDescription>
|
|
{collaborator?.email ? (
|
|
<div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-600">
|
|
<span className="rounded-full border border-slate-300 bg-slate-100 px-2 py-0.5">
|
|
Usuário vinculado: {collaborator.name ? `${collaborator.name} · ` : ""}{collaborator.email}
|
|
</span>
|
|
<Link href="/admin/users" className="underline underline-offset-4">Gerenciar usuários</Link>
|
|
</div>
|
|
) : null}
|
|
{!isActive ? (
|
|
<Badge variant="outline" className="mt-2 w-fit border-rose-200 bg-rose-50 text-[10px] font-semibold uppercase tracking-wide text-rose-700">
|
|
Desativada
|
|
</Badge>
|
|
) : null}
|
|
</CardHeader>
|
|
<CardContent className="flex grow flex-col gap-3 text-sm">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="outline" className="border-slate-300 bg-slate-100 text-xs font-medium text-slate-700">
|
|
{(() => {
|
|
const name = machine.osName ?? "SO"
|
|
const ver = formatOsVersionDisplay(machine.osName, machine.osVersion)
|
|
return [name, ver].filter(Boolean).join(" ").trim()
|
|
})()}
|
|
</Badge>
|
|
{machine.architecture ? (
|
|
<Badge variant="outline" className="border-slate-300 bg-slate-100 text-xs font-medium text-slate-700">
|
|
{machine.architecture.toUpperCase()}
|
|
</Badge>
|
|
) : null}
|
|
{companyLabel ? (
|
|
<Badge variant="outline" className="text-xs">{companyLabel}</Badge>
|
|
) : null}
|
|
</div>
|
|
{collaborator?.email ? (
|
|
<p className="text-[11px] text-muted-foreground">
|
|
{persona}: {collaborator.name ? `${collaborator.name} · ` : ""}
|
|
{collaborator.email}
|
|
</p>
|
|
) : null}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50/80 px-2 py-1.5">
|
|
<Cpu className="size-4 text-slate-500" />
|
|
<span className="text-xs font-medium text-slate-800">{formatPercent(cpuPct)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50/80 px-2 py-1.5">
|
|
<MemoryStick className="size-4 text-slate-500" />
|
|
<span className="text-xs font-medium text-slate-800">
|
|
{Number.isFinite(memUsed) && Number.isFinite(memTotal)
|
|
? `${formatBytes(memUsed)} / ${formatBytes(memTotal)}`
|
|
: formatPercent(memPct)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="mt-auto flex items-center justify-between text-xs text-muted-foreground">
|
|
<span className="flex items-center gap-1.5">
|
|
<HardDrive className="size-3.5 text-slate-500" />
|
|
{Array.isArray(machine.inventory?.disks) ? `${machine.inventory?.disks?.length ?? 0} discos` : "—"}
|
|
</span>
|
|
<span>
|
|
{lastHeartbeat ? formatRelativeTime(lastHeartbeat) : "sem heartbeat"}
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
function DetailLine({ label, value, classNameValue, layout = "spread" }: DetailLineProps) {
|
|
if (value === null || value === undefined) return null
|
|
if (typeof value === "string" && (value.trim() === "" || value === "undefined" || value === "null")) {
|
|
return null
|
|
}
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"items-center",
|
|
layout === "compact"
|
|
? "grid grid-cols-[auto_minmax(0,1fr)] gap-3"
|
|
: "flex justify-between gap-4"
|
|
)}
|
|
>
|
|
<span>{label}</span>
|
|
<span
|
|
className={cn(
|
|
"font-medium text-foreground",
|
|
layout === "compact" ? "text-left" : "text-right",
|
|
classNameValue
|
|
)}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function InfoChip({ label, value, icon, tone = "default" }: { label: string; value: string; icon?: ReactNode; tone?: "default" | "warning" | "muted" }) {
|
|
const toneClasses =
|
|
tone === "warning"
|
|
? "border-amber-200 bg-amber-50 text-amber-700"
|
|
: tone === "muted"
|
|
? "border-slate-200 bg-slate-50 text-neutral-600"
|
|
: "border-slate-200 bg-white text-neutral-800"
|
|
|
|
return (
|
|
<div className={cn("flex items-center gap-3 rounded-xl border px-3 py-2 shadow-sm", toneClasses)}>
|
|
{icon ? <span className="text-neutral-500">{icon}</span> : null}
|
|
<div className="min-w-0 leading-tight">
|
|
<p className="text-xs uppercase text-neutral-500">{label}</p>
|
|
<p className="truncate text-sm font-semibold">{value}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function clampPercent(raw: number): number {
|
|
if (!Number.isFinite(raw)) return 0
|
|
const normalized = raw > 1 && raw <= 100 ? raw : raw <= 1 ? raw * 100 : raw
|
|
return Math.max(0, Math.min(100, normalized))
|
|
}
|
|
|
|
function deriveUsageMetrics({
|
|
metrics,
|
|
hardware,
|
|
disks,
|
|
}: {
|
|
metrics: MachineMetrics
|
|
hardware?: MachineInventory["hardware"]
|
|
disks?: MachineInventory["disks"]
|
|
}) {
|
|
const data = (metrics ?? {}) as Record<string, unknown>
|
|
|
|
const cpuRaw = Number(
|
|
data.cpuUsagePercent ?? data.cpuUsage ?? data.cpu_percent ?? data.cpu ?? NaN
|
|
)
|
|
const cpuPercent = Number.isFinite(cpuRaw) ? clampPercent(cpuRaw) : null
|
|
|
|
const totalCandidates = [
|
|
data.memoryTotalBytes,
|
|
data.memory_total,
|
|
data.memoryTotal,
|
|
hardware?.memoryBytes,
|
|
hardware?.memory,
|
|
]
|
|
let memoryTotalBytes: number | null = null
|
|
for (const candidate of totalCandidates) {
|
|
const parsed = parseBytesLike(candidate)
|
|
if (parsed && Number.isFinite(parsed) && parsed > 0) {
|
|
memoryTotalBytes = parsed
|
|
break
|
|
}
|
|
const numeric = Number(candidate)
|
|
if (Number.isFinite(numeric) && numeric > 0) {
|
|
memoryTotalBytes = numeric
|
|
break
|
|
}
|
|
}
|
|
|
|
const usedCandidates = [
|
|
data.memoryUsedBytes,
|
|
data.memoryBytes,
|
|
data.memory_used,
|
|
data.memory,
|
|
]
|
|
let memoryUsedBytes: number | null = null
|
|
for (const candidate of usedCandidates) {
|
|
const parsed = parseBytesLike(candidate)
|
|
if (parsed !== undefined && Number.isFinite(parsed)) {
|
|
memoryUsedBytes = parsed
|
|
break
|
|
}
|
|
const numeric = Number(candidate)
|
|
if (Number.isFinite(numeric)) {
|
|
memoryUsedBytes = numeric
|
|
break
|
|
}
|
|
}
|
|
|
|
const memoryPercentRaw = Number(data.memoryUsedPercent ?? data.memory_percent ?? NaN)
|
|
let memoryPercent = Number.isFinite(memoryPercentRaw) ? clampPercent(memoryPercentRaw) : null
|
|
if (memoryTotalBytes && memoryUsedBytes === null && memoryPercent !== null) {
|
|
memoryUsedBytes = (memoryPercent / 100) * memoryTotalBytes
|
|
} else if (memoryTotalBytes && memoryUsedBytes !== null) {
|
|
memoryPercent = clampPercent((memoryUsedBytes / memoryTotalBytes) * 100)
|
|
}
|
|
|
|
let diskTotalBytes: number | null = null
|
|
let diskUsedBytes: number | null = null
|
|
let diskPercent: number | null = null
|
|
if (Array.isArray(disks) && disks.length > 0) {
|
|
let total = 0
|
|
let available = 0
|
|
disks.forEach((disk) => {
|
|
const totalParsed = parseBytesLike(disk?.totalBytes)
|
|
if (typeof totalParsed === "number" && Number.isFinite(totalParsed) && totalParsed > 0) {
|
|
total += totalParsed
|
|
}
|
|
const availableParsed = parseBytesLike(disk?.availableBytes)
|
|
if (typeof availableParsed === "number" && Number.isFinite(availableParsed) && availableParsed >= 0) {
|
|
available += availableParsed
|
|
}
|
|
})
|
|
if (total > 0) {
|
|
diskTotalBytes = total
|
|
const used = Math.max(0, total - available)
|
|
diskUsedBytes = used
|
|
diskPercent = clampPercent((used / total) * 100)
|
|
}
|
|
}
|
|
if (diskPercent === null) {
|
|
const diskMetric = Number(
|
|
data.diskUsage ?? data.disk ?? data.diskUsedPercent ?? data.storageUsedPercent ?? NaN
|
|
)
|
|
if (Number.isFinite(diskMetric)) {
|
|
diskPercent = clampPercent(diskMetric)
|
|
}
|
|
}
|
|
|
|
const gpuMetric = Number(
|
|
data.gpuUsagePercent ?? data.gpuUsage ?? data.gpu_percent ?? data.gpu ?? NaN
|
|
)
|
|
const gpuPercent = Number.isFinite(gpuMetric) ? clampPercent(gpuMetric) : null
|
|
|
|
return {
|
|
cpuPercent,
|
|
memoryUsedBytes,
|
|
memoryTotalBytes,
|
|
memoryPercent,
|
|
diskPercent,
|
|
diskUsedBytes,
|
|
diskTotalBytes,
|
|
gpuPercent,
|
|
}
|
|
}
|
|
|
|
function MetricsGrid({ metrics, hardware, disks }: { metrics: MachineMetrics; hardware?: MachineInventory["hardware"]; disks?: MachineInventory["disks"] }) {
|
|
const derived = useMemo(
|
|
() => deriveUsageMetrics({ metrics, hardware, disks }),
|
|
[metrics, hardware, disks]
|
|
)
|
|
|
|
const cards = [
|
|
{
|
|
key: "cpu",
|
|
label: "CPU",
|
|
percent: derived.cpuPercent,
|
|
primaryText: derived.cpuPercent !== null ? formatPercent(derived.cpuPercent) : "Sem dados",
|
|
secondaryText: derived.cpuPercent !== null ? "Uso instantâneo" : "Sem leituras recentes",
|
|
icon: <Cpu className="size-4 text-neutral-500" />,
|
|
color: "var(--chart-1)",
|
|
},
|
|
{
|
|
key: "memory",
|
|
label: "Memória",
|
|
percent: derived.memoryPercent,
|
|
primaryText:
|
|
derived.memoryUsedBytes !== null && derived.memoryTotalBytes !== null
|
|
? `${formatBytes(derived.memoryUsedBytes)} / ${formatBytes(derived.memoryTotalBytes)}`
|
|
: derived.memoryPercent !== null
|
|
? formatPercent(derived.memoryPercent)
|
|
: "Sem dados",
|
|
secondaryText: derived.memoryPercent !== null ? `${Math.round(derived.memoryPercent)}% em uso` : null,
|
|
icon: <MemoryStick className="size-4 text-neutral-500" />,
|
|
color: "var(--chart-2)",
|
|
},
|
|
{
|
|
key: "disk",
|
|
label: "Disco",
|
|
percent: derived.diskPercent,
|
|
primaryText:
|
|
derived.diskUsedBytes !== null && derived.diskTotalBytes !== null
|
|
? `${formatBytes(derived.diskUsedBytes)} / ${formatBytes(derived.diskTotalBytes)}`
|
|
: derived.diskPercent !== null
|
|
? formatPercent(derived.diskPercent)
|
|
: "Sem dados",
|
|
secondaryText: derived.diskPercent !== null ? `${Math.round(derived.diskPercent)}% utilizado` : null,
|
|
icon: <HardDrive className="size-4 text-neutral-500" />,
|
|
color: "var(--chart-3)",
|
|
},
|
|
] as Array<{ key: string; label: string; percent: number | null; primaryText: string; secondaryText?: string | null; icon: ReactNode; color: string }>
|
|
|
|
if (derived.gpuPercent !== null) {
|
|
cards.push({
|
|
key: "gpu",
|
|
label: "GPU",
|
|
percent: derived.gpuPercent,
|
|
primaryText: formatPercent(derived.gpuPercent),
|
|
secondaryText: null,
|
|
icon: <Monitor className="size-4 text-neutral-500" />,
|
|
color: "var(--chart-4)",
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
{cards.map((card) => {
|
|
const percentValue = Number.isFinite(card.percent ?? NaN) ? Math.max(0, Math.min(100, card.percent ?? 0)) : 0
|
|
const percentLabel = card.percent !== null ? `${Math.round(card.percent)}%` : "—"
|
|
return (
|
|
<div key={card.key} className="flex items-center gap-4 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
|
|
<div className="relative h-24 w-24">
|
|
<ChartContainer
|
|
config={{ usage: { label: card.label, color: card.color } }}
|
|
className="h-24 w-24 aspect-square"
|
|
>
|
|
<RadialBarChart
|
|
data={[{ name: card.label, value: percentValue }]}
|
|
innerRadius="68%"
|
|
outerRadius="100%"
|
|
startAngle={90}
|
|
endAngle={-270}
|
|
>
|
|
<PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
|
|
<RadialBar dataKey="value" cornerRadius={10} fill="var(--color-usage)" background />
|
|
</RadialBarChart>
|
|
</ChartContainer>
|
|
<div className="pointer-events-none absolute inset-[18%] flex items-center justify-center rounded-full bg-white/70 text-sm font-semibold text-neutral-900">
|
|
{percentLabel}
|
|
</div>
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-1">
|
|
<div className="flex items-center gap-2 text-sm font-semibold text-neutral-900">
|
|
{card.icon}
|
|
{card.label}
|
|
</div>
|
|
<div className="text-sm text-neutral-700">{card.primaryText}</div>
|
|
{card.secondaryText ? (
|
|
<div className="text-xs text-neutral-500">{card.secondaryText}</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function exportCsv(items: Array<Record<string, unknown>>, filename: string) {
|
|
if (!Array.isArray(items) || items.length === 0) return
|
|
const headersSet = new Set<string>()
|
|
items.forEach((it) => Object.keys(it ?? {}).forEach((k) => headersSet.add(k)))
|
|
const headers = Array.from(headersSet)
|
|
const csv = [headers.join(",")]
|
|
for (const it of items) {
|
|
const row = headers
|
|
.map((h) => {
|
|
const v = (it as Record<string, unknown>)[h]
|
|
if (v === undefined || v === null) return ""
|
|
const s = typeof v === "string" ? v : JSON.stringify(v)
|
|
return `"${s.replace(/"/g, '""')}"`
|
|
})
|
|
.join(",")
|
|
csv.push(row)
|
|
}
|
|
const blob = new Blob([csv.join("\n")], { type: "text/csv;charset=utf-8;" })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement("a")
|
|
a.href = url
|
|
a.download = filename
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
a.remove()
|
|
URL.revokeObjectURL(url)
|
|
}
|