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

refine queue metrics and devices ui

Browse source
This commit is contained in:
Esdras Renan 2025-11-04 19:53:54 -03:00
parent 1e45324460
commit c2acd65764
11 changed files with 181 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/admin/devices/admin-devices-overview.tsx
View file

@ -3520,13 +3520,13 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
<p className="flex items-center gap-2 text-xs text-muted-foreground">
<span>{device.authEmail ?? "E-mail não definido"}</span>
{device.authEmail ? (
<button
type="button"
onClick={copyEmail}
className="inline-flex items-center rounded p-1 text-neutral-500 transition hover:bg-slate-100 hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300"
title="Copiar e-mail do dispositivo"
aria-label="Copiar e-mail do dispositivo"
>
<button
type="button"
onClick={copyEmail}
className="inline-flex items-center rounded-md p-1 text-neutral-500 transition hover:bg-[#00d6eb]/15 hover:text-[#0a4760] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00d6eb]/40 focus-visible:ring-offset-2"
title="Copiar e-mail do dispositivo"
aria-label="Copiar e-mail do dispositivo"
>
<ClipboardCopy className="size-3.5" />
</button>
) : null}
@ -3541,12 +3541,17 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
</div>
{/* Campos personalizados (posicionado logo após métricas) */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h4 className="text-sm font-semibold text-neutral-900">Campos personalizados</h4>
<Badge variant="outline" className="rounded-full px-2.5 py-0.5 text-[11px] font-semibold">
{(device.customFields ?? []).length}
</Badge>
<div className="flex flex-wrap items-start justify-between gap-3">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2">
<h4 className="text-sm font-semibold text-neutral-900">Campos personalizados</h4>
<Badge variant="outline" className="rounded-full px-2.5 py-0.5 text-[11px] font-semibold">
{(device.customFields ?? []).length}
</Badge>
</div>
{(!device.customFields || device.customFields.length === 0) ? (
<p className="text-xs text-neutral-500">Nenhum campo personalizado definido para este dispositivo.</p>
) : null}
</div>
<div className="flex items-center gap-2">
<Button size="sm" variant="outline" className="gap-2" onClick={() => setCustomFieldsEditorOpen(true)}>
@ -3564,9 +3569,7 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
</div>
))}
</div>
) : (
<p className="text-xs text-neutral-500">Nenhum campo personalizado definido para este dispositivo.</p>
)}
) : null}
</div>
<div className="rounded-2xl border border-[color:var(--accent)] bg-[color:var(--accent)]/80 px-4 py-4">
@ -3587,18 +3590,10 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
</p>
)}
</div>
<div className="flex items-center gap-2">
<div className="flex items-center">
<div className="flex h-10 min-w-[56px] items-center justify-center rounded-xl border border-[color:var(--accent)] bg-white px-3 text-[color:var(--accent-foreground)] shadow-sm">
<span className="text-lg font-semibold leading-none tabular-nums">{totalOpenTickets}</span>
</div>
{deviceTicketsHref ? (
<Link
href={deviceTicketsHref}
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>
</div>
{totalOpenTickets > 0 ? (
@ -3630,6 +3625,16 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
})}
</div>
) : null}
{deviceTicketsHref ? (
<div className="mt-4">
<Link
href={deviceTicketsHref}
className="text-xs font-semibold text-[color:var(--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>
</div>
) : null}
</div>
<div className="flex flex-wrap gap-2">