From f9deb408dcf9672db4b3159e60a01dfc82ea235a Mon Sep 17 00:00:00 2001
From: rever-tecnologia <revertecnologia@gmail.com>
Date: Thu, 18 Dec 2025 08:44:57 -0300
Subject: [PATCH] fix: melhora UX de softwares e campos personalizados
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Softwares instalados:
- Corrige contador de paginação (mostra 1-30, 31-60, etc.)
- Remove tooltip do botão de limpar pesquisa

Campos personalizados:
- Adiciona mensagem indicando tipo de dispositivo (desktop/celular)
- Melhora mensagem quando não há campos disponíveis
- Adiciona botão X para limpar valor de campos texto/número

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../admin/devices/admin-devices-overview.tsx  | 32 ++++++++++++++++---
 .../admin/devices/device-software-list.tsx    |  3 +-
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/admin/devices/admin-devices-overview.tsx b/src/components/admin/devices/admin-devices-overview.tsx
index 57c858f..65435bf 100644
--- a/src/components/admin/devices/admin-devices-overview.tsx
+++ b/src/components/admin/devices/admin-devices-overview.tsx
@@ -6013,7 +6013,14 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
               <DialogContent className="max-w-2xl space-y-4">
                 <DialogHeader>
                   <DialogTitle>Campos personalizados — {device.displayName ?? device.hostname ?? "Dispositivo"}</DialogTitle>
-                  <DialogDescription>Adicione e ajuste informações complementares deste dispositivo.</DialogDescription>
+                  <DialogDescription>
+                    Adicione e ajuste informações complementares deste dispositivo.
+                    {device.deviceType && device.deviceType !== "all" && (
+                      <span className="mt-1 block text-xs text-slate-400">
+                        Exibindo campos para {device.deviceType === "mobile" ? "celulares" : device.deviceType === "desktop" ? "desktops" : device.deviceType}.
+                      </span>
+                    )}
+                  </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-3">
                   <div className="flex items-center justify-between">
@@ -6080,7 +6087,10 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
                   ) : null}
 
                   {editableFields.length === 0 ? (
-                    <div className="rounded-md border border-dashed border-slate-200 p-4 text-sm text-muted-foreground">Nenhum campo disponível para este tipo de dispositivo.</div>
+                    <div className="rounded-md border border-dashed border-slate-200 p-4 text-center">
+                      <p className="text-sm text-muted-foreground">Nenhum campo disponível para {device.deviceType === "mobile" ? "celulares" : device.deviceType === "desktop" ? "desktops" : "este tipo de dispositivo"}.</p>
+                      <p className="mt-1 text-xs text-slate-400">Clique em "Novo campo" para criar um campo específico para este dispositivo.</p>
+                    </div>
                   ) : (
                     <div className="grid gap-3">
                       {editableFields.map((field) => {
@@ -6090,9 +6100,23 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
                           <div key={field.id} className="grid gap-1">
                             <label className="text-xs font-semibold uppercase tracking-wide text-neutral-500">{field.label}</label>
                             {field.type === "text" ? (
-                              <Input value={(value as string) ?? ""} onChange={(e) => setValue(e.target.value)} />
+                              <div className="flex items-center gap-2">
+                                <Input value={(value as string) ?? ""} onChange={(e) => setValue(e.target.value)} className="flex-1" />
+                                {value && (
+                                  <Button type="button" variant="ghost" size="icon" onClick={() => setValue("")} className="size-9 shrink-0 text-slate-400 hover:text-slate-600">
+                                    <X className="size-4" />
+                                  </Button>
+                                )}
+                              </div>
                             ) : field.type === "number" ? (
-                              <Input type="number" value={value == null ? "" : String(value)} onChange={(e) => setValue(e.target.value === "" ? null : Number(e.target.value))} />
+                              <div className="flex items-center gap-2">
+                                <Input type="number" value={value == null ? "" : String(value)} onChange={(e) => setValue(e.target.value === "" ? null : Number(e.target.value))} className="flex-1" />
+                                {value != null && (
+                                  <Button type="button" variant="ghost" size="icon" onClick={() => setValue(null)} className="size-9 shrink-0 text-slate-400 hover:text-slate-600">
+                                    <X className="size-4" />
+                                  </Button>
+                                )}
+                              </div>
                             ) : field.type === "date" ? (
                               <DatePicker
                                 value={value ? String(value).slice(0, 10) : null}
diff --git a/src/components/admin/devices/device-software-list.tsx b/src/components/admin/devices/device-software-list.tsx
index 63eaf15..238ea3b 100644
--- a/src/components/admin/devices/device-software-list.tsx
+++ b/src/components/admin/devices/device-software-list.tsx
@@ -105,7 +105,6 @@ export function DeviceSoftwareList({ machineId }: DeviceSoftwareListProps) {
             size="icon"
             onClick={() => handleSearch("")}
             className="size-10 shrink-0"
-            title="Limpar pesquisa"
           >
             <Eraser className="size-4" />
           </Button>
@@ -166,7 +165,7 @@ export function DeviceSoftwareList({ machineId }: DeviceSoftwareListProps) {
 
           <div className="flex items-center justify-between text-xs text-neutral-500">
             <span>
-              Mostrando {result.items.length} de {result.total} softwares
+              Mostrando {pageIndex * 30 + 1}-{Math.min((pageIndex + 1) * 30, result.total)} de {result.total} softwares
             </span>
             <div className="flex gap-1">
               <Button