ui: ajustar layout do prazo de reabertura abaixo da linha de acoes

This commit is contained in:
Esdras Renan 2025-11-14 11:17:51 -03:00
parent 4d4a2e3aaf
commit 16bbd1e4b8

View file

@ -1096,17 +1096,17 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
return (
<div id="ticket-summary-header" className={cardClass}>
<div className="absolute right-6 top-6 flex items-center gap-3">
{status !== "RESOLVED" ? (
<Button
type="button"
className="inline-flex items-center gap-2 rounded-lg border border-sidebar-border bg-sidebar-accent px-3 py-1.5 text-sm font-semibold text-sidebar-accent-foreground transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-sidebar-ring hover:bg-sidebar-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sidebar-ring)]/30 active:translate-y-0 active:border-sidebar-ring"
onClick={() => setCloseOpen(true)}
>
<CheckCircle2 className="size-4" /> Encerrar
</Button>
) : canReopenTicket ? (
<div className="flex flex-col items-end gap-1">
<div className="absolute right-6 top-6 flex flex-col items-end gap-1">
<div className="flex items-center gap-3">
{status !== "RESOLVED" ? (
<Button
type="button"
className="inline-flex items-center gap-2 rounded-lg border border-sidebar-border bg-sidebar-accent px-3 py-1.5 text-sm font-semibold text-sidebar-accent-foreground transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-sidebar-ring hover:bg-sidebar-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sidebar-ring)]/30 active:translate-y-0 active:border-sidebar-ring"
onClick={() => setCloseOpen(true)}
>
<CheckCircle2 className="size-4" /> Encerrar
</Button>
) : canReopenTicket ? (
<Button
type="button"
className="inline-flex items-center gap-2 rounded-lg border border-sidebar-border bg-white px-3 py-1.5 text-sm font-semibold text-neutral-800 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-sidebar-ring hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sidebar-ring)]/30 active:translate-y-0 active:border-sidebar-ring"
@ -1116,51 +1116,51 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
{isReopening ? <Spinner className="size-4 text-neutral-600" /> : <RotateCcw className="size-4" />}
Reabrir
</Button>
{reopenDeadlineLabel ? (
<p className="text-[11px] text-neutral-500">Prazo para reabrir: {reopenDeadlineLabel}</p>
) : null}
</div>
) : null}
{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 [&>svg]:size-5"
>
<IconClock className="size-5 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">
<div className="flex flex-col gap-1">
<span>Horas internas: {formatDuration(internalWorkedMs)}</span>
<span>Horas externas: {formatDuration(externalWorkedMs)}</span>
</div>
</TooltipContent>
</Tooltip>
) : null}
{!editing ? (
) : null}
{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 [&>svg]:size-5"
>
<IconClock className="size-5 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">
<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"
aria-label="Editar"
className="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-800 hover:bg-slate-50"
onClick={() => setEditing(true)}
title="Editar"
>
<IconPencil className="size-5" />
</Button>
) : null}
<Button
size="icon"
aria-label="Editar"
variant="outline"
aria-label="Exportar PDF"
className="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-800 hover:bg-slate-50"
onClick={() => setEditing(true)}
title="Editar"
onClick={handleExportPdf}
disabled={exportingPdf}
title="Exportar PDF"
>
<IconPencil className="size-5" />
{exportingPdf ? <Spinner className="size-4 text-neutral-700" /> : <IconDownload className="size-5" />}
</Button>
<DeleteTicketDialog ticketId={ticket.id as Id<"tickets">} />
</div>
{status === "RESOLVED" && canReopenTicket && reopenDeadlineLabel ? (
<p className="text-[11px] text-neutral-500">Prazo para reabrir: {reopenDeadlineLabel}</p>
) : null}
<Button
size="icon"
variant="outline"
aria-label="Exportar PDF"
className="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-800 hover:bg-slate-50"
onClick={handleExportPdf}
disabled={exportingPdf}
title="Exportar PDF"
>
{exportingPdf ? <Spinner className="size-4 text-neutral-700" /> : <IconDownload className="size-5" />}
</Button>
<DeleteTicketDialog ticketId={ticket.id as Id<"tickets">} />
</div>
<CloseTicketDialog
open={closeOpen}