diff --git a/src/components/admin/devices/admin-devices-overview.tsx b/src/components/admin/devices/admin-devices-overview.tsx index 98b03ae..8a36ca6 100644 --- a/src/components/admin/devices/admin-devices-overview.tsx +++ b/src/components/admin/devices/admin-devices-overview.tsx @@ -3137,7 +3137,7 @@ export function DeviceDetails({ device }: DeviceDetailsProps) { const hasRemoteAccess = remoteAccessEntries.length > 0 const summaryChips = useMemo(() => { - const chips: Array<{ key: string; label: string; value: string; icon: ReactNode; tone?: "warning" | "muted"; onClick?: () => void }> = [] + const chips: Array<{ key: string; label: string; value: string; icon: ReactNode; tone?: "warning" | "muted"; onClick?: () => void; statusBadge?: { text: string; variant: "default" | "success" | "warning" | "error" } }> = [] const osName = osNameDisplay || "Sistema desconhecido" const osVersionRaw = device?.osVersion ?? windowsVersionLabel ?? "" const osVersion = formatOsVersionDisplay(osNameDisplay, osVersionRaw) @@ -3193,20 +3193,34 @@ export function DeviceDetails({ device }: DeviceDetailsProps) { } const statusLabels: Record = { PENDING: "Pendente", + APPLYING: "Aplicando", APPLIED: "Aplicado", FAILED: "Falhou", } + const statusBadgeVariants: Record = { + PENDING: "warning", + APPLYING: "warning", + APPLIED: "success", + FAILED: "error", + } const currentPolicy = device?.usbPolicy ?? "ALLOW" const policyLabel = policyLabels[currentPolicy] ?? currentPolicy - const statusLabel = device?.usbPolicyStatus ? ` (${statusLabels[device.usbPolicyStatus] ?? device.usbPolicyStatus})` : "" const isPending = device?.usbPolicyStatus === "PENDING" + const isApplying = device?.usbPolicyStatus === "APPLYING" const isFailed = device?.usbPolicyStatus === "FAILED" + const statusBadge = device?.usbPolicyStatus + ? { + text: statusLabels[device.usbPolicyStatus] ?? device.usbPolicyStatus, + variant: statusBadgeVariants[device.usbPolicyStatus] ?? "default" as const, + } + : undefined chips.push({ key: "usb-policy", label: "USB", - value: `${policyLabel}${statusLabel}`, - icon: , - tone: isFailed ? "warning" : isPending ? "warning" : undefined, + value: policyLabel, + icon: , + tone: isFailed ? "warning" : isPending || isApplying ? "warning" : undefined, + statusBadge, }) } return chips @@ -3917,6 +3931,7 @@ export function DeviceDetails({ device }: DeviceDetailsProps) { value={chip.value} icon={chip.icon} tone={chip.tone} + statusBadge={chip.statusBadge} /> ))} @@ -6176,7 +6191,7 @@ function DetailLine({ label, value, classNameValue, layout = "spread" }: DetailL ) } -function InfoChip({ label, value, icon, tone = "default", onClick }: { label: string; value: string; icon?: ReactNode; tone?: "default" | "warning" | "muted"; onClick?: () => void }) { +function InfoChip({ label, value, icon, tone = "default", onClick, statusBadge }: { label: string; value: string; icon?: ReactNode; tone?: "default" | "warning" | "muted"; onClick?: () => void; statusBadge?: { text: string; variant: "default" | "success" | "warning" | "error" } }) { const toneClasses = tone === "warning" ? "border-amber-200 bg-amber-50 text-amber-700" @@ -6186,6 +6201,13 @@ function InfoChip({ label, value, icon, tone = "default", onClick }: { label: st const clickableClasses = onClick ? "cursor-pointer hover:ring-2 hover:ring-blue-200 transition-all" : "" + const badgeVariantClasses = { + default: "border-slate-200 bg-slate-100 text-slate-600", + success: "border-emerald-200 bg-emerald-50 text-emerald-700", + warning: "border-amber-200 bg-amber-50 text-amber-700", + error: "border-red-200 bg-red-50 text-red-700", + } + return (
{icon} : null}

{label}

-

{value}

+
+

{value}

+ {statusBadge && ( + + {statusBadge.text} + + )} +
)