ui(header): reorder tempo total before edit icon; status close as icon with tooltip

src/components/tickets/status-select.tsx

@@ -8,6 +8,8 @@ import type { TicketStatus } from "@/lib/schemas/ticket"
 import { useAuth } from "@/lib/auth-client"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { CheckCircle2 } from "lucide-react"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Spinner } from "@/components/ui/spinner"
 import { RichTextEditor } from "@/components/ui/rich-text-editor"
@@ -105,15 +107,22 @@ export function StatusSelect({
         <Badge className={cn(baseBadgeClass, statusStyles[status]?.badgeClass ?? statusStyles.PENDING.badgeClass)}>
           {statusStyles[status]?.label ?? statusStyles.PENDING.label}
         </Badge>
-        <Button
+        <Tooltip>
-          type="button"
+          <TooltipTrigger asChild>
-          variant="outline"
+            <Button
-          size="sm"
+              type="button"
-          onClick={() => setCloseDialogOpen(true)}
+              size="icon"
-          className="h-8 rounded-full border-slate-300 bg-white px-3 text-xs font-medium text-neutral-800"
+              aria-label="Encerrar ticket"
-        >
+              onClick={() => setCloseDialogOpen(true)}
-          Encerrar
+              className="h-9 w-9 rounded-lg border border-emerald-300 bg-white text-emerald-700 transition hover:bg-emerald-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-200"
-        </Button>
+            >
+              <CheckCircle2 className="size-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
+            Encerrar ticket
+          </TooltipContent>
+        </Tooltip>
       </div>
       <CloseTicketDialog
         open={closeDialogOpen}

src/components/tickets/ticket-summary-header.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { format, formatDistanceToNow } from "date-fns"
 import { ptBR } from "date-fns/locale"
-import { IconClock, IconDownload, IconInfoCircle, IconPlayerPause, IconPlayerPlay, IconPencil } from "@tabler/icons-react"
+import { IconClock, IconDownload, IconPlayerPause, IconPlayerPlay, IconPencil } from "@tabler/icons-react"
 import { useMutation, useQuery } from "convex/react"
 import { toast } from "sonner"
 import { api } from "@/convex/_generated/api"
@@ -62,8 +62,6 @@ const startButtonClass =
   "inline-flex items-center gap-1 rounded-lg border border-black bg-black px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/30"
 const pauseButtonClass =
   "inline-flex items-center gap-1 rounded-lg border border-black bg-black px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
-const editButtonClass =
-  "inline-flex items-center gap-1 rounded-lg border border-black bg-black px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
 const selectTriggerClass = "h-8 w-full rounded-lg border border-slate-300 bg-white px-3 text-left text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
 const smallSelectTriggerClass = "h-8 w-full rounded-lg border border-slate-300 bg-white px-3 text-left text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
 const sectionLabelClass = "text-xs font-semibold uppercase tracking-wide text-neutral-500"
@@ -618,6 +616,24 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
   return (
     <div className={cardClass}>
   <div className="absolute right-6 top-6 flex items-center gap-3">
+        {workSummary ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge
+                className="inline-flex h-9 cursor-help items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-sm font-semibold text-neutral-700"
+                title="Tempo total de atendimento"
+              >
+                <IconClock className="size-4 text-neutral-700" /> Tempo total: {formattedTotalWorked}
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
+              <div className="flex flex-col gap-1">
+                <span>Horas internas: {formatDuration(internalWorkedMs)}</span>
+                <span>Horas externas: {formatDuration(externalWorkedMs)}</span>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        ) : null}
         {!editing ? (
           <Button
             size="icon"
@@ -640,24 +656,6 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
         >
           {exportingPdf ? <Spinner className="size-4 text-neutral-700" /> : <IconDownload className="size-5" />}
         </Button>
-        {workSummary ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Badge
-                className="inline-flex h-9 cursor-help items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-sm font-semibold text-neutral-700"
-                title="Tempo total de atendimento"
-              >
-                <IconClock className="size-4 text-neutral-700" /> Tempo total: {formattedTotalWorked}
-              </Badge>
-            </TooltipTrigger>
-            <TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
-              <div className="flex flex-col gap-1">
-                <span>Horas internas: {formatDuration(internalWorkedMs)}</span>
-                <span>Horas externas: {formatDuration(externalWorkedMs)}</span>
-              </div>
-            </TooltipContent>
-          </Tooltip>
-        ) : null}
         <DeleteTicketDialog ticketId={ticket.id as Id<"tickets">} />
       </div>
       <div className="flex flex-wrap items-start justify-between gap-3">