Refresh device cards layout

This commit is contained in:
Esdras Renan 2025-11-19 11:17:07 -03:00
parent 2c975edd09
commit 188518e06c

View file

@ -5743,9 +5743,11 @@ function DeviceCard({ device, companyName }: { device: DevicesQueryItem; company
) : null}
</div>
<CardHeader className="pb-2">
<CardTitle className="line-clamp-1 flex items-center gap-2 text-base font-semibold">
<DeviceIcon className="size-4 text-slate-500" /> {deviceLabel}
<CardTitle className="flex items-center gap-2 text-base font-semibold">
<DeviceIcon className="size-4 text-slate-500" />
<span className="line-clamp-1">{deviceLabel}</span>
</CardTitle>
<div className="flex flex-col gap-1">
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
<span>{deviceTypeLabel}</span>
{device.devicePlatform ? (
@ -5757,18 +5759,26 @@ function DeviceCard({ device, companyName }: { device: DevicesQueryItem; company
{device.authEmail ? (
<>
<span className="text-slate-300"></span>
<span>{device.authEmail}</span>
<span className="truncate max-w-[140px]" title={device.authEmail}>
{device.authEmail}
</span>
</>
) : null}
</div>
{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}
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
<div className="flex flex-col rounded-lg border border-slate-200 bg-slate-50 px-3 py-1">
<span className="text-[11px] uppercase text-slate-400">Usuário vinculado</span>
<span className="text-sm font-medium text-slate-800 line-clamp-1" title={collaborator.name ?? collaborator.email}>
{collaborator.name ?? "Usuário"}
</span>
<span className="text-[11px] text-slate-500 line-clamp-1" title={collaborator.email}>
{collaborator.email}
</span>
</div>
<button
type="button"
className="underline underline-offset-4 hover:text-slate-800"
className="text-[11px] font-semibold text-slate-500 underline underline-offset-4 hover:text-slate-800"
onClick={(event) => {
event.preventDefault()
event.stopPropagation()
@ -5779,6 +5789,7 @@ function DeviceCard({ device, companyName }: { device: DevicesQueryItem; company
</button>
</div>
) : null}
</div>
{!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">
Desativado
@ -5800,12 +5811,6 @@ function DeviceCard({ device, companyName }: { device: DevicesQueryItem; company
</Badge>
) : null}
</div>
{collaborator?.email ? (
<p className="text-[11px] text-muted-foreground">
{persona}: {collaborator.name ? `${collaborator.name} · ` : ""}
{collaborator.email}
</p>
) : null}
<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">
{deviceTypeLabel}