ui: ajustar layout do prazo de reabertura abaixo da linha de acoes
This commit is contained in:
Esdras Renan
parent
4d4a2e3aaf
commit
16bbd1e4b8
1 changed files with 50 additions and 50 deletions
|
|
@ -1096,17 +1096,17 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="ticket-summary-header" className={cardClass}>
|
<div id="ticket-summary-header" className={cardClass}>
|
||||||
<div className="absolute right-6 top-6 flex items-center gap-3">
|
<div className="absolute right-6 top-6 flex flex-col items-end gap-1">
|
||||||
{status !== "RESOLVED" ? (
|
<div className="flex items-center gap-3">
|
||||||
<Button
|
{status !== "RESOLVED" ? (
|
||||||
type="button"
|
<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"
|
type="button"
|
||||||
onClick={() => setCloseOpen(true)}
|
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>
|
<CheckCircle2 className="size-4" /> Encerrar
|
||||||
) : canReopenTicket ? (
|
</Button>
|
||||||
<div className="flex flex-col items-end gap-1">
|
) : canReopenTicket ? (
|
||||||
<Button
|
<Button
|
||||||
type="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"
|
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" />}
|
{isReopening ? <Spinner className="size-4 text-neutral-600" /> : <RotateCcw className="size-4" />}
|
||||||
Reabrir
|
Reabrir
|
||||||
</Button>
|
</Button>
|
||||||
{reopenDeadlineLabel ? (
|
) : null}
|
||||||
<p className="text-[11px] text-neutral-500">Prazo para reabrir: {reopenDeadlineLabel}</p>
|
{workSummary ? (
|
||||||
) : null}
|
<Tooltip>
|
||||||
</div>
|
<TooltipTrigger asChild>
|
||||||
) : null}
|
<Badge
|
||||||
{workSummary ? (
|
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"
|
||||||
<Tooltip>
|
>
|
||||||
<TooltipTrigger asChild>
|
<IconClock className="size-5 text-neutral-700" /> {formattedTotalWorked}
|
||||||
<Badge
|
</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"
|
</TooltipTrigger>
|
||||||
>
|
<TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
|
||||||
<IconClock className="size-5 text-neutral-700" /> {formattedTotalWorked}
|
<div className="flex flex-col gap-1">
|
||||||
</Badge>
|
<span>Horas internas: {formatDuration(internalWorkedMs)}</span>
|
||||||
</TooltipTrigger>
|
<span>Horas externas: {formatDuration(externalWorkedMs)}</span>
|
||||||
<TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
|
</div>
|
||||||
<div className="flex flex-col gap-1">
|
</TooltipContent>
|
||||||
<span>Horas internas: {formatDuration(internalWorkedMs)}</span>
|
</Tooltip>
|
||||||
<span>Horas externas: {formatDuration(externalWorkedMs)}</span>
|
) : null}
|
||||||
</div>
|
{!editing ? (
|
||||||
</TooltipContent>
|
<Button
|
||||||
</Tooltip>
|
size="icon"
|
||||||
) : null}
|
aria-label="Editar"
|
||||||
{!editing ? (
|
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
|
<Button
|
||||||
size="icon"
|
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"
|
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)}
|
onClick={handleExportPdf}
|
||||||
title="Editar"
|
disabled={exportingPdf}
|
||||||
|
title="Exportar PDF"
|
||||||
>
|
>
|
||||||
<IconPencil className="size-5" />
|
{exportingPdf ? <Spinner className="size-4 text-neutral-700" /> : <IconDownload className="size-5" />}
|
||||||
</Button>
|
</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}
|
) : 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>
|
</div>
|
||||||
<CloseTicketDialog
|
<CloseTicketDialog
|
||||||
open={closeOpen}
|
open={closeOpen}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue