From 06388b368870d03082ebcce802dc2d7b398888f2 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdras@renan.dev>
Date: Sat, 13 Dec 2025 22:22:42 -0300
Subject: [PATCH] =?UTF-8?q?ui:=20ajustes=20de=20layout=20em=20automa=C3=A7?=
 =?UTF-8?q?=C3=B5es=20e=20checklist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reorganiza header da página de automações (título/descrição em cima, filtros embaixo)
- Aumenta espaçamento da badge "quando" na tabela
- Ajusta largura do input de checklist nos tickets para melhor distribuição

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../automations/automations-manager.tsx       | 60 ++++++++++---------
 .../tickets/ticket-checklist-card.tsx         | 22 +++----
 2 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/components/automations/automations-manager.tsx b/src/components/automations/automations-manager.tsx
index 0f42781..9806681 100644
--- a/src/components/automations/automations-manager.tsx
+++ b/src/components/automations/automations-manager.tsx
@@ -11,7 +11,7 @@ import { useAuth } from "@/lib/auth-client"
 import { DEFAULT_TENANT_ID } from "@/lib/constants"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Dialog, DialogTrigger } from "@/components/ui/dialog"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
@@ -152,21 +152,23 @@ export function AutomationsManager() {
 
   return (
     <Card className="border-slate-200">
-      <CardHeader>
-        <CardTitle className="text-lg font-semibold text-neutral-900">Automações</CardTitle>
-        <CardDescription className="text-neutral-600">
-          Crie gatilhos para executar ações automáticas.
-        </CardDescription>
-        <CardAction>
+      <CardHeader className="space-y-4">
+        <div>
+          <CardTitle className="text-lg font-semibold text-neutral-900">Automações</CardTitle>
+          <CardDescription className="mt-1 text-neutral-600">
+            Crie gatilhos para executar ações automáticas nos tickets.
+          </CardDescription>
+        </div>
+        <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
             <Input
               value={queryText}
               onChange={(e) => setQueryText(e.target.value)}
               placeholder="Buscar automação..."
-              className="h-8 w-full text-sm sm:w-64"
+              className="h-8 w-full text-sm sm:w-56"
             />
             <Select value={triggerFilter} onValueChange={setTriggerFilter}>
-              <SelectTrigger size="sm" className="w-full sm:w-52">
+              <SelectTrigger size="sm" className="w-full sm:w-48">
                 <span className="truncate">
                   <span className="text-neutral-500">Quando:</span> <SelectValue />
                 </span>
@@ -182,7 +184,7 @@ export function AutomationsManager() {
               </SelectContent>
             </Select>
             <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger size="sm" className="w-full sm:w-44">
+              <SelectTrigger size="sm" className="w-full sm:w-40">
                 <span className="truncate">
                   <span className="text-neutral-500">Ativação:</span> <SelectValue />
                 </span>
@@ -193,20 +195,20 @@ export function AutomationsManager() {
                 <SelectItem value="inactive">Inativas</SelectItem>
               </SelectContent>
             </Select>
-            <Dialog open={editorOpen} onOpenChange={setEditorOpen}>
-              <DialogTrigger asChild>
-                <Button size="sm" onClick={handleNew} className="gap-2">
-                  <Plus className="size-4" />
-                  Nova automação
-                </Button>
-              </DialogTrigger>
-              <AutomationEditorDialog
-                automation={editing}
-                onClose={() => setEditorOpen(false)}
-              />
-            </Dialog>
           </div>
-        </CardAction>
+          <Dialog open={editorOpen} onOpenChange={setEditorOpen}>
+            <DialogTrigger asChild>
+              <Button size="sm" onClick={handleNew} className="gap-2">
+                <Plus className="size-4" />
+                Nova automação
+              </Button>
+            </DialogTrigger>
+            <AutomationEditorDialog
+              automation={editing}
+              onClose={() => setEditorOpen(false)}
+            />
+          </Dialog>
+        </div>
       </CardHeader>
       <CardContent>
         <Dialog
@@ -240,11 +242,11 @@ export function AutomationsManager() {
           <div className="rounded-3xl border border-slate-200 bg-white/90 shadow-sm overflow-hidden">
             <Table className="w-full table-fixed">
               <colgroup>
-                <col style={{ width: "22%" }} />
-                <col style={{ width: "15%" }} />
+                <col style={{ width: "20%" }} />
+                <col style={{ width: "18%" }} />
                 <col style={{ width: "10%" }} />
                 <col style={{ width: "7%" }} />
-                <col style={{ width: "11%" }} />
+                <col style={{ width: "10%" }} />
                 <col style={{ width: "14%" }} />
                 <col style={{ width: "14%" }} />
                 <col style={{ width: "7%" }} />
@@ -285,13 +287,13 @@ export function AutomationsManager() {
                       <TableCell className="text-center font-semibold text-neutral-900 truncate" title={row.name}>
                         {row.name}
                       </TableCell>
-                      <TableCell className="text-center">
+                      <TableCell className="text-center px-2">
                         <div className="flex items-center justify-center gap-2">
-                          <Badge variant="secondary" className="rounded-full max-w-full truncate">
+                          <Badge variant="secondary" className="rounded-full px-3 max-w-full truncate">
                             {triggerLabel(row.trigger)}
                           </Badge>
                           {row.timing === "DELAYED" && row.delayMs ? (
-                            <Badge variant="outline" className="rounded-full">
+                            <Badge variant="outline" className="rounded-full px-2.5">
                               +{Math.round(row.delayMs / 60000)}m
                             </Badge>
                           ) : null}
diff --git a/src/components/tickets/ticket-checklist-card.tsx b/src/components/tickets/ticket-checklist-card.tsx
index 72b3b66..7cf23a4 100644
--- a/src/components/tickets/ticket-checklist-card.tsx
+++ b/src/components/tickets/ticket-checklist-card.tsx
@@ -428,12 +428,12 @@ export function TicketChecklistCard({
         )}
 
         {canEdit && !isResolved ? (
-          <div className="flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:flex-row sm:items-center">
+          <div className="flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:flex-row sm:items-center sm:justify-between">
             <Input
               value={newText}
               onChange={(e) => setNewText(e.target.value)}
               placeholder="Adicionar item do checklist..."
-              className="h-8 flex-1 bg-white"
+              className="h-8 w-full bg-white sm:max-w-md"
               onKeyDown={(e) => {
                 if (e.key === "Enter") {
                   e.preventDefault()
@@ -441,14 +441,16 @@ export function TicketChecklistCard({
                 }
               }}
             />
-            <label className="flex h-8 items-center gap-2 text-sm text-neutral-700">
-              <Checkbox checked={newRequired} onCheckedChange={(checked) => setNewRequired(Boolean(checked))} />
-              Obrigatório
-            </label>
-            <Button type="button" size="sm" onClick={handleAdd} disabled={adding} className="gap-2">
-              <Plus className="size-4" />
-              Adicionar
-            </Button>
+            <div className="flex items-center gap-4">
+              <label className="flex h-8 items-center gap-2 text-sm text-neutral-700">
+                <Checkbox checked={newRequired} onCheckedChange={(checked) => setNewRequired(Boolean(checked))} />
+                Obrigatório
+              </label>
+              <Button type="button" size="sm" onClick={handleAdd} disabled={adding} className="gap-2">
+                <Plus className="size-4" />
+                Adicionar
+              </Button>
+            </div>
           </div>
         ) : null}
       </CardContent>