ui: keep close dialog content unchanged; refactor to shared component; layout tweaks per request

This commit is contained in:
codex-bot 2025-10-20 17:16:29 -03:00
parent 040965b148
commit 741a0b5b70
3 changed files with 249 additions and 171 deletions

View file

@ -16,6 +16,8 @@ import { Separator } from "@/components/ui/separator"
import { PrioritySelect } from "@/components/tickets/priority-select"
import { DeleteTicketDialog } from "@/components/tickets/delete-ticket-dialog"
import { StatusSelect } from "@/components/tickets/status-select"
import { CloseTicketDialog } from "@/components/tickets/close-ticket-dialog"
import { CheckCircle2 } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
@ -154,6 +156,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
const [pauseNote, setPauseNote] = useState("")
const [pausing, setPausing] = useState(false)
const [exportingPdf, setExportingPdf] = useState(false)
const [closeOpen, setCloseOpen] = useState(false)
const selectedCategoryId = categorySelection.categoryId
const selectedSubcategoryId = categorySelection.subcategoryId
const dirty = useMemo(
@ -615,7 +618,14 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
return (
<div className={cardClass}>
<div className="absolute right-6 top-6 flex items-center gap-3">
<div className="absolute right-6 top-6 flex items-center gap-3">
<Button
type="button"
className="inline-flex items-center gap-2 rounded-lg border border-sky-300 bg-white px-3 py-1.5 text-sm font-semibold text-sky-700 transition hover:bg-sky-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200"
onClick={() => setCloseOpen(true)}
>
<CheckCircle2 className="size-4" /> Encerrar
</Button>
{workSummary ? (
<Tooltip>
<TooltipTrigger asChild>
@ -623,7 +633,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
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}
<IconClock className="size-4 text-neutral-700" /> {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">
@ -658,6 +668,15 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
</Button>
<DeleteTicketDialog ticketId={ticket.id as Id<"tickets">} />
</div>
<CloseTicketDialog
open={closeOpen}
onOpenChange={setCloseOpen}
ticketId={ticket.id as unknown as string}
tenantId={ticket.tenantId}
actorId={convexUserId as Id<"users"> | null}
requesterName={ticket.requester?.name ?? ticket.requester?.email ?? null}
onSuccess={() => {}}
/>
<div className="flex flex-wrap items-start justify-between gap-3">
<div className="space-y-3">
<div className="flex flex-wrap items-center gap-3">