UI: corrigir duplicidade do Encerrar, padronizar ciano, ajustar tamanho do ícone de tempo; atualizar cabeçalho do login; inverter ordem (Novo ticket à esquerda, Compartilhar à direita) no ticket individual

This commit is contained in:
codex-bot 2025-10-20 17:40:17 -03:00
parent 741a0b5b70
commit 2f798d934a
4 changed files with 47 additions and 45 deletions

View file

@ -55,16 +55,11 @@ export function LoginPageClient() {
<div className="grid min-h-svh lg:grid-cols-2"> <div className="grid min-h-svh lg:grid-cols-2">
<div className="flex flex-col gap-6 p-6 md:p-10"> <div className="flex flex-col gap-6 p-6 md:p-10">
<div className="flex flex-col items-center gap-1.5 text-center"> <div className="flex flex-col items-center gap-1.5 text-center">
<Link href="/" className="flex items-center gap-2 text-xl font-semibold text-neutral-900"> <Link href="/" className="text-xl font-semibold text-neutral-900">
<Image <div className="flex flex-col leading-none items-center">
src="/logo-raven.png" <span>Sistema de chamados</span>
alt="Logotipo Raven" <span className="text-xs text-muted-foreground">Por Rever Tecnologia</span>
width={40} </div>
height={40}
className="h-10 w-auto"
priority
/>
Raven
</Link> </Link>
</div> </div>
<div className="flex flex-1 items-center justify-center"> <div className="flex flex-1 items-center justify-center">

View file

@ -18,8 +18,8 @@ export default async function TicketDetailPage({ params }: TicketDetailPageProps
<SiteHeader <SiteHeader
title={`Ticket #${id}`} title={`Ticket #${id}`}
lead={"Detalhes do ticket"} lead={"Detalhes do ticket"}
secondaryAction={<SiteHeader.SecondaryButton>Compartilhar</SiteHeader.SecondaryButton>} secondaryAction={<NewTicketDialogDeferred />}
primaryAction={<NewTicketDialogDeferred />} primaryAction={<SiteHeader.SecondaryButton>Compartilhar</SiteHeader.SecondaryButton>}
/> />
} }
> >

View file

@ -83,11 +83,13 @@ export function StatusSelect({
value, value,
tenantId, tenantId,
requesterName, requesterName,
showCloseButton = true,
}: { }: {
ticketId: string ticketId: string
value: TicketStatus value: TicketStatus
tenantId: string tenantId: string
requesterName?: string | null requesterName?: string | null
showCloseButton?: boolean
}) { }) {
const { convexUserId } = useAuth() const { convexUserId } = useAuth()
const actorId = (convexUserId ?? null) as Id<"users"> | null const actorId = (convexUserId ?? null) as Id<"users"> | null
@ -104,6 +106,7 @@ export function StatusSelect({
<Badge className={cn(baseBadgeClass, statusStyles[status]?.badgeClass ?? statusStyles.PENDING.badgeClass)}> <Badge className={cn(baseBadgeClass, statusStyles[status]?.badgeClass ?? statusStyles.PENDING.badgeClass)}>
{statusStyles[status]?.label ?? statusStyles.PENDING.label} {statusStyles[status]?.label ?? statusStyles.PENDING.label}
</Badge> </Badge>
{showCloseButton ? (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@ -111,7 +114,7 @@ export function StatusSelect({
size="icon" size="icon"
aria-label="Encerrar ticket" aria-label="Encerrar ticket"
onClick={() => setCloseDialogOpen(true)} onClick={() => setCloseDialogOpen(true)}
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" className="h-9 w-9 rounded-lg border border-[#00d6eb] bg-white text-[#00d6eb] transition hover:bg-[#00d6eb]/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00d6eb]/30"
> >
<CheckCircle2 className="size-4" /> <CheckCircle2 className="size-4" />
</Button> </Button>
@ -120,8 +123,10 @@ export function StatusSelect({
Encerrar ticket Encerrar ticket
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
) : null}
</div> </div>
{/* Dialog control moved to header; keep for status-only contexts */} {/* Dialog control visível apenas quando o botão de encerrar está presente */}
{showCloseButton ? (
<CloseTicketDialog <CloseTicketDialog
open={closeDialogOpen} open={closeDialogOpen}
onOpenChange={(open) => { onOpenChange={(open) => {
@ -136,6 +141,7 @@ export function StatusSelect({
setCloseDialogOpen(false) setCloseDialogOpen(false)
}} }}
/> />
) : null}
</> </>
) )
} }

View file

@ -621,7 +621,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
<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 <Button
type="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" className="inline-flex items-center gap-2 rounded-lg border border-[#00d6eb] bg-white px-3 py-1.5 text-sm font-semibold text-[#00d6eb] transition hover:bg-[#00d6eb]/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00d6eb]/30"
onClick={() => setCloseOpen(true)} onClick={() => setCloseOpen(true)}
> >
<CheckCircle2 className="size-4" /> Encerrar <CheckCircle2 className="size-4" /> Encerrar
@ -633,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" 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" title="Tempo total de atendimento"
> >
<IconClock className="size-4 text-neutral-700" /> {formattedTotalWorked} <IconClock className="size-5 text-neutral-700" /> {formattedTotalWorked}
</Badge> </Badge>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg"> <TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
@ -692,6 +692,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
value={status} value={status}
tenantId={ticket.tenantId} tenantId={ticket.tenantId}
requesterName={ticket.requester?.name ?? ticket.requester?.email ?? null} requesterName={ticket.requester?.name ?? ticket.requester?.email ?? null}
showCloseButton={false}
/> />
{isPlaying ? ( {isPlaying ? (
<Tooltip> <Tooltip>