esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(machines): integrate pulsating dot inside status badge with spacing; add breadcrumbs; Defender badges; Linux lsblk table; search by company name via Convex; refine card heights

Browse source
This commit is contained in:
Esdras Renan 2025-10-10 11:03:06 -03:00
parent f89424c168
commit ea46514da5
8 changed files with 432 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

16
apps/desktop/index.html
View file

@ -3,22 +3,12 @@
<head>
<meta charset="UTF-8" />
<meta name="color-scheme" content="light" />
<link rel="stylesheet" href="/src/styles.css" />
<link rel="stylesheet" href="/src/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sistema de Chamados — Agente Desktop</title>
<script type="module" src="/src/main.ts" defer></script>
<script type="module" src="/src/main.tsx" defer></script>
</head>
<body>
<main id="app-root" class="app-root">
<section class="card">
<header>
<h1>Sistema de Chamados</h1>
<p class="subtitle">Agente desktop para provisionamento de máquinas</p>
</header>
<div id="alert-container" class="alert"></div>
<div id="content"></div>
<p id="status-text" class="status-text"></p>
</section>
</main>
<div id="root"></div>
</body>
</html>

10
apps/desktop/package.json
View file

@ -12,11 +12,15 @@
"dependencies": {
"@tauri-apps/api": "^2",
"@tauri-apps/plugin-opener": "^2",
"@tauri-apps/plugin-store": "^2"
"@tauri-apps/plugin-store": "^2",
"lucide-react": "^0.544.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@tauri-apps/cli": "^2",
"vite": "^6.0.3",
"typescript": "~5.6.2"
"@vitejs/plugin-react": "^4.3.4",
"typescript": "~5.6.2",
"vite": "^6.0.3"
}
}

14
apps/desktop/src/index.css Normal file
View file

@ -0,0 +1,14 @@
@import "tailwindcss";
:root {
color-scheme: light;
}
html, body, #root {
height: 100%;
}
body {
@apply bg-slate-50 text-slate-900;
}

287
apps/desktop/src/main.tsx Normal file
View file

@ -0,0 +1,287 @@
import React, { useEffect, useMemo, useState } from "react"
import { createRoot } from "react-dom/client"
import { invoke } from "@tauri-apps/api/core"
import { Store } from "@tauri-apps/plugin-store"
import { ExternalLink, Eye, EyeOff } from "lucide-react"
type MachineOs = {
name: string
version?: string | null
architecture?: string | null
}
type MachineMetrics = {
collectedAt: string
cpuLogicalCores: number
cpuPhysicalCores?: number | null
cpuUsagePercent: number
memoryTotalBytes: number
memoryUsedBytes: number
memoryUsedPercent: number
uptimeSeconds: number
}
type MachineInventory = {
cpuBrand?: string | null
hostIdentifier?: string | null
}
type MachineProfile = {
hostname: string
os: MachineOs
macAddresses: string[]
serialNumbers: string[]
inventory: MachineInventory
metrics: MachineMetrics
}
type MachineRegisterResponse = {
machineId: string
tenantId?: string | null
companyId?: string | null
companySlug?: string | null
machineToken: string
machineEmail?: string | null
expiresAt?: number | null
}
type AgentConfig = {
machineId: string
tenantId?: string | null
companySlug?: string | null
machineEmail?: string | null
apiBaseUrl: string
appUrl: string
createdAt: number
lastSyncedAt?: number | null
expiresAt?: number | null
heartbeatIntervalSec?: number | null
}
declare global {
interface ImportMetaEnv {
readonly VITE_APP_URL?: string
readonly VITE_API_BASE_URL?: string
}
interface ImportMeta { readonly env: ImportMetaEnv }
}
const STORE_FILENAME = "machine-agent.json"
const DEFAULT_APP_URL = import.meta.env.MODE === "production" ? "https://tickets.esdrasrenan.com.br" : "http://localhost:3000"
function normalizeUrl(value?: string | null, fallback = DEFAULT_APP_URL) {
const trimmed = (value ?? fallback).trim()
if (!trimmed.startsWith("http")) return fallback
return trimmed.replace(/\/+$/, "")
}
const appUrl = normalizeUrl(import.meta.env.VITE_APP_URL, DEFAULT_APP_URL)
const apiBaseUrl = normalizeUrl(import.meta.env.VITE_API_BASE_URL, appUrl)
async function loadStore(): Promise<Store> {
return await Store.load(STORE_FILENAME)
}
async function readToken(store: Store): Promise<string | null> {
return (await store.get<string>("token")) ?? null
}
async function writeToken(store: Store, token: string): Promise<void> {
await store.set("token", token)
await store.save()
}
async function readConfig(store: Store): Promise<AgentConfig | null> {
return (await store.get<AgentConfig>("config")) ?? null
}
async function writeConfig(store: Store, cfg: AgentConfig): Promise<void> {
await store.set("config", cfg)
await store.save()
}
function bytes(n?: number) {
if (!n || !Number.isFinite(n)) return "—"
const u = ["B","KB","MB","GB","TB"]
let v = n; let i = 0
while (v >= 1024 && i < u.length - 1) { v/=1024; i++ }
return `${v.toFixed(v>=10||i===0?0:1)} ${u[i]}`
}
function pct(p?: number) { return !p && p !== 0 ? "—" : `${p.toFixed(0)}%` }
function App() {
const [store, setStore] = useState<Store | null>(null)
const [token, setToken] = useState<string | null>(null)
const [config, setConfig] = useState<AgentConfig | null>(null)
const [profile, setProfile] = useState<MachineProfile | null>(null)
const [error, setError] = useState<string | null>(null)
const [busy, setBusy] = useState(false)
const [showSecret, setShowSecret] = useState(false)
const [provisioningSecret, setProvisioningSecret] = useState("")
const [tenantId, setTenantId] = useState("")
const [company, setCompany] = useState("")
const [collabEmail, setCollabEmail] = useState("")
const [collabName, setCollabName] = useState("")
useEffect(() => {
(async () => {
try {
const s = await loadStore()
setStore(s)
const t = await readToken(s)
setToken(t)
const cfg = await readConfig(s)
setConfig(cfg)
if (!t) {
const p = await invoke<MachineProfile>("collect_machine_profile")
setProfile(p)
}
} catch (err) {
setError("Falha ao carregar estado do agente.")
}
})()
}, [])
async function register() {
if (!profile) return
if (!provisioningSecret.trim()) { setError("Informe o código de provisionamento."); return }
setBusy(true); setError(null)
try {
const payload = {
provisioningSecret: provisioningSecret.trim(),
tenantId: tenantId.trim() || undefined,
companySlug: company.trim() || undefined,
hostname: profile.hostname,
os: profile.os,
macAddresses: profile.macAddresses,
serialNumbers: profile.serialNumbers,
metadata: { inventory: profile.inventory, metrics: profile.metrics, collaborator: collabEmail ? { email: collabEmail.trim(), name: collabName.trim() || undefined } : undefined },
registeredBy: "desktop-agent",
}
const res = await fetch(`${apiBaseUrl}/api/machines/register`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) })
if (!res.ok) {
const text = await res.text()
throw new Error(`Falha no registro (${res.status}): ${text.slice(0,300)}`)
}
const data = (await res.json()) as MachineRegisterResponse
if (!store) throw new Error("Store ausente")
await writeToken(store, data.machineToken)
const cfg: AgentConfig = {
machineId: data.machineId,
tenantId: data.tenantId ?? null,
companySlug: data.companySlug ?? null,
machineEmail: data.machineEmail ?? null,
apiBaseUrl,
appUrl,
createdAt: Date.now(),
lastSyncedAt: Date.now(),
expiresAt: data.expiresAt ?? null,
}
await writeConfig(store, cfg)
setConfig(cfg); setToken(data.machineToken)
await invoke("start_machine_agent", { baseUrl: apiBaseUrl, token: data.machineToken, status: "online", intervalSeconds: 300 })
} catch (err) {
setError(err instanceof Error ? err.message : String(err))
} finally {
setBusy(false)
}
}
async function openSystem() {
if (!token || !config) return
const url = `${config.appUrl}/machines/handshake?token=${encodeURIComponent(token)}`
try {
// open in default browser; fallback to in-webview
const { openUrl } = await import("@tauri-apps/plugin-opener")
await openUrl(url)
} catch {
window.location.replace(url)
}
}
async function reprovision() {
if (!store) return
await store.delete("token"); await store.delete("config"); await store.save()
setToken(null); setConfig(null)
const p = await invoke<MachineProfile>("collect_machine_profile")
setProfile(p)
}
return (
<div className="min-h-screen grid place-items-center p-6">
<div className="w-full max-w-[560px] rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
<h1 className="text-xl font-semibold">Sistema de Chamados — Agente Desktop</h1>
{error ? <p className="mt-3 rounded-md bg-rose-50 p-2 text-sm text-rose-700">{error}</p> : null}
{!token ? (
<div className="mt-4 space-y-3">
<p className="text-sm text-slate-600">Informe os dados para registrar esta máquina.</p>
<div className="grid gap-2">
<label className="text-sm font-medium">Código de provisionamento</label>
<div className="relative">
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 pr-9 text-sm" type={showSecret?"text":"password"} value={provisioningSecret} onChange={(e)=>setProvisioningSecret(e.target.value)} />
<button className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-600" onClick={()=>setShowSecret((v)=>!v)} aria-label="Mostrar/ocultar">
{showSecret ? <EyeOff className="size-4"/> : <Eye className="size-4"/>}
</button>
</div>
</div>
<div className="grid gap-2">
<label className="text-sm font-medium">Empresa (slug opcional)</label>
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="ex.: tenant-atlas" value={company} onChange={(e)=>setCompany(e.target.value)} />
</div>
<div className="grid gap-2">
<label className="text-sm font-medium">Colaborador (e-mail)</label>
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="colaborador@empresa.com" value={collabEmail} onChange={(e)=>setCollabEmail(e.target.value)} />
</div>
<div className="grid gap-2">
<label className="text-sm font-medium">Nome do colaborador (opcional)</label>
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Nome completo" value={collabName} onChange={(e)=>setCollabName(e.target.value)} />
</div>
<div className="grid gap-2">
<label className="text-sm font-medium">Tenant (opcional)</label>
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="tenant-atlas" value={tenantId} onChange={(e)=>setTenantId(e.target.value)} />
</div>
{profile ? (
<div className="mt-2 grid grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs">
<div>
<div className="text-slate-500">Hostname</div>
<div className="font-medium text-slate-900">{profile.hostname}</div>
</div>
<div>
<div className="text-slate-500">Sistema</div>
<div className="font-medium text-slate-900">{profile.os.name}</div>
</div>
<div>
<div className="text-slate-500">CPU</div>
<div className="font-medium text-slate-900">{pct(profile.metrics.cpuUsagePercent)}</div>
</div>
<div>
<div className="text-slate-500">Memória</div>
<div className="font-medium text-slate-900">{bytes(profile.metrics.memoryUsedBytes)} / {bytes(profile.metrics.memoryTotalBytes)}</div>
</div>
</div>
) : null}
<div className="mt-2 flex gap-2">
<button disabled={busy} onClick={register} className="rounded-lg border border-black bg-black px-3 py-2 text-sm font-semibold text-white hover:bg-black/90 disabled:opacity-60">Registrar máquina</button>
</div>
</div>
) : (
<div className="mt-4 space-y-3">
<p className="text-sm text-slate-700">Máquina provisionada.</p>
<div className="grid gap-2">
<button onClick={openSystem} className="inline-flex items-center gap-2 rounded-lg border border-black bg-black px-3 py-2 text-sm font-semibold text-white hover:bg-black/90">
<ExternalLink className="size-4"/> Abrir sistema
</button>
<button onClick={reprovision} className="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-800 hover:bg-slate-50">Reprovisionar</button>
</div>
</div>
)}
</div>
</div>
)
}
const root = document.getElementById("root") || (() => { const el = document.createElement("div"); el.id = "root"; document.body.appendChild(el); return el })()
createRoot(root).render(<App />)

2
apps/desktop/vite.config.ts
View file

@ -1,11 +1,13 @@
// @ts-nocheck
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
const host = process.env.TAURI_DEV_HOST;
// https://vite.dev/config/
export default defineConfig(async () => ({
plugins: [react()],
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
//

3
convex/companies.ts
View file

@ -10,7 +10,6 @@ export const list = query({
.query("companies")
.withIndex("by_tenant", (q) => q.eq("tenantId", tenantId))
.collect()
return companies.map((c) => ({ id: c._id, name: c.name }))
return companies.map((c) => ({ id: c._id, name: c.name, slug: c.slug }))
},
})

11
src/app/admin/machines/[id]/page.tsx
View file

@ -1,3 +1,4 @@
import Link from "next/link"
import { AppShell } from "@/components/app-shell"
import { SiteHeader } from "@/components/site-header"
import { DEFAULT_TENANT_ID } from "@/lib/constants"
@ -13,9 +14,17 @@ export default function AdminMachineDetailsPage({ params }: { params: { id: stri
header={<SiteHeader title="Detalhe da máquina" lead="Inventário e métricas da máquina selecionada." />}
>
<div className="mx-auto w-full max-w-6xl px-4 pb-12 lg:px-6">
<nav className="mb-4 text-sm text-neutral-600">
<ol className="flex items-center gap-2">
<li>
<Link href="/admin/machines" className="underline-offset-4 hover:underline">Máquinas</Link>
</li>
<li className="text-neutral-400">/</li>
<li className="text-neutral-800">Detalhe</li>
</ol>
</nav>
<AdminMachineDetailsClient tenantId={DEFAULT_TENANT_ID} machineId={id} />
</div>
</AppShell>
)
}

127
src/components/admin/machines/admin-machines-overview.tsx
View file

@ -5,7 +5,7 @@ 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 } from "lucide-react"
import { ClipboardCopy, ServerCog, Cpu, MemoryStick, Monitor, HardDrive, Pencil, ShieldCheck, ShieldAlert } from "lucide-react"
import { api } from "@/convex/_generated/api"
import { Badge } from "@/components/ui/badge"
@ -27,6 +27,7 @@ import { Separator } from "@/components/ui/separator"
import { cn } from "@/lib/utils"
import Link from "next/link"
import { useAuth } from "@/lib/auth-client"
import type { Id } from "@/convex/_generated/dataModel"
type MachineMetrics = Record<string, unknown> | null
@ -219,6 +220,16 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
const [osFilter, setOsFilter] = useState<string>("all")
const [companyQuery, setCompanyQuery] = useState<string>("")
const [onlyAlerts, setOnlyAlerts] = useState<boolean>(false)
const { convexUserId } = useAuth()
const companies = useQuery(
convexUserId ? api.companies.list : "skip",
convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : ("skip" as const)
) as Array<{ id: string; name: string; slug?: string }> | undefined
const companyNameBySlug = useMemo(() => {
const map = new Map<string, string>()
;(companies ?? []).forEach((c) => c.slug && map.set(c.slug, c.name))
return map
}, [companies])
const osOptions = useMemo(() => {
const set = new Set<string>()
@ -226,11 +237,7 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
return Array.from(set).sort()
}, [machines])
const companyOptions = useMemo(() => {
const set = new Set<string>()
machines.forEach((m) => m.companySlug && set.add(m.companySlug))
return Array.from(set).sort()
}, [machines])
const companyNameOptions = useMemo(() => (companies ?? []).map((c) => c.name).sort((a,b)=>a.localeCompare(b,"pt-BR")), [companies])
const filteredMachines = useMemo(() => {
const text = q.trim().toLowerCase()
@ -242,8 +249,8 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
}
if (osFilter !== "all" && (m.osName ?? "").toLowerCase() !== osFilter.toLowerCase()) return false
if (companyQuery && companyQuery.trim().length > 0) {
const slug = (m.companySlug ?? "").toLowerCase()
if (!slug.includes(companyQuery.trim().toLowerCase())) return false
const name = companyNameBySlug.get(m.companySlug ?? "")?.toLowerCase() ?? ""
if (!name.includes(companyQuery.trim().toLowerCase())) return false
}
if (!text) return true
const hay = [
@ -296,12 +303,12 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
<Input
value={companyQuery}
onChange={(e) => setCompanyQuery(e.target.value)}
placeholder="Buscar empresa (slug)"
placeholder="Buscar empresa"
className="min-w-[220px]"
/>
{companyQuery && companyOptions.filter((c) => c.toLowerCase().includes(companyQuery.toLowerCase())).slice(0,6).length > 0 ? (
{companyQuery && companyNameOptions.filter((c) => c.toLowerCase().includes(companyQuery.toLowerCase())).slice(0,6).length > 0 ? (
<div className="absolute z-10 mt-1 max-h-52 w-full overflow-auto rounded-md border bg-white p-1 shadow-sm">
{companyOptions
{companyNameOptions
.filter((c) => c.toLowerCase().includes(companyQuery.toLowerCase()))
.slice(0, 8)
.map((c) => (
@ -336,7 +343,40 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
function MachineStatusBadge({ status }: { status?: string | null }) {
const { label, className } = getStatusVariant(status)
return <Badge className={cn("border", className)}>{label}</Badge>
const s = String(status ?? "").toLowerCase()
const colorClass =
s === "online"
? "bg-emerald-500"
: s === "offline"
? "bg-rose-500"
: s === "maintenance"
? "bg-amber-500"
: s === "blocked"
? "bg-orange-500"
: "bg-slate-400"
const ringClass =
s === "online"
? "bg-emerald-400/30"
: s === "offline"
? "bg-rose-400/30"
: s === "maintenance"
? "bg-amber-400/30"
: s === "blocked"
? "bg-orange-400/30"
: "bg-slate-300/30"
const isOnline = s === "online"
return (
<Badge className={cn("inline-flex h-9 items-center gap-2 rounded-full border border-slate-200 px-3 text-sm font-semibold", className)}>
<span className="relative inline-flex items-center">
<span className={cn("size-2 rounded-full", colorClass)} />
{isOnline ? (
<span className={cn("absolute left-1/2 top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full animate-ping", ringClass)} />
) : null}
</span>
{label}
</Badge>
)
}
function EmptyState() {
@ -499,7 +539,7 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
<div className="flex items-start justify-between gap-2">
<div className="space-y-1">
<div className="flex items-center gap-2">
<p className="text-sm font-semibold text-foreground">{machine.hostname}</p>
<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>
@ -755,6 +795,39 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
{/* Linux */}
{linuxExt ? (
<div className="space-y-3">
{Array.isArray((linuxExt as any).lsblk) && (linuxExt as any).lsblk.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>
{((linuxExt as any).lsblk as Array<Record<string, unknown>>).slice(0, 18).map((entry, idx) => {
const name = typeof entry["name"] === "string" ? (entry["name"] as string) : "—"
const mp = typeof entry["mountPoint"] === "string" ? (entry["mountPoint"] as string) : typeof entry["mountpoint"] === "string" ? (entry["mountpoint"] as string) : "—"
const fs = typeof entry["fs"] === "string" ? (entry["fs"] as string) : typeof entry["fstype"] === "string" ? (entry["fstype"] as string) : "—"
const sizeRaw = typeof entry["sizeBytes"] === "number" ? (entry["sizeBytes"] as number) : typeof entry["size"] === "number" ? (entry["size"] as number) : undefined
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}
{Array.isArray(linuxExt.smart) && linuxExt.smart.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>
@ -995,9 +1068,25 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
{windowsExt.defender ? (
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
<p className="text-xs font-semibold uppercase text-slate-500">Defender</p>
<div className="mt-2 grid grid-cols-2 gap-2 text-sm">
<DetailLine label="Antivírus" value={fmtBool(readBool(windowsExt.defender, "AntivirusEnabled"))} />
<DetailLine label="Proteção em tempo real" value={fmtBool(readBool(windowsExt.defender, "RealTimeProtectionEnabled"))} />
<div className="mt-2 flex flex-wrap gap-2 text-xs">
{readBool(windowsExt.defender, "AntivirusEnabled") === true ? (
<Badge className="gap-1 border-emerald-500/20 bg-emerald-500/15 text-emerald-700">
<ShieldCheck className="size-3" /> Antivírus: Ativo
</Badge>
) : (
<Badge className="gap-1 border-rose-500/20 bg-rose-500/15 text-rose-700">
<ShieldAlert className="size-3" /> Antivírus: Inativo
</Badge>
)}
{readBool(windowsExt.defender, "RealTimeProtectionEnabled") === true ? (
<Badge className="gap-1 border-emerald-500/20 bg-emerald-500/15 text-emerald-700">
<ShieldCheck className="size-3" /> Proteção em tempo real: Ativa
</Badge>
) : (
<Badge className="gap-1 border-rose-500/20 bg-rose-500/15 text-rose-700">
<ShieldAlert className="size-3" /> Proteção em tempo real: Inativa
</Badge>
)}
</div>
</div>
) : null}
@ -1165,7 +1254,7 @@ function MachineCard({ machine }: { machine: MachinesQueryItem }) {
return (
<Link href={`/admin/machines/${machine.id}`} className="group">
<Card className="relative overflow-hidden border-slate-200 transition-colors hover:border-slate-300">
<Card className="relative h-full overflow-hidden border-slate-200 transition-colors hover:border-slate-300">
<div className="absolute right-2 top-2">
<span
aria-hidden
@ -1190,7 +1279,7 @@ function MachineCard({ machine }: { machine: MachinesQueryItem }) {
</CardTitle>
<CardDescription className="line-clamp-1 text-xs">{machine.authEmail ?? "—"}</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-3 text-sm">
<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">
{machine.osName ?? "SO"} {machine.osVersion ?? ""}
@ -1218,7 +1307,7 @@ function MachineCard({ machine }: { machine: MachinesQueryItem }) {
</span>
</div>
</div>
<div className="flex items-center justify-between text-xs text-muted-foreground">
<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` : "—"}