esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: header cleanup (edit icon, time tooltip), delete button style; filters: server-side assignee + company mapping; UX: toasts on save/clear default filter

Browse source
This commit is contained in:
codex-bot 2025-10-20 16:40:27 -03:00
parent f5b3abd277
commit 9b31a47f82
4 changed files with 38 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/tickets/ticket-summary-header.tsx
View file

@ -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 } from "@tabler/icons-react"
import { IconClock, IconDownload, IconInfoCircle, IconPlayerPause, IconPlayerPlay, IconPencil } from "@tabler/icons-react"
import { useMutation, useQuery } from "convex/react"
import { toast } from "sonner"
import { api } from "@/convex/_generated/api"
@ -617,10 +617,16 @@ 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">
{!editing ? (
<Button size="sm" className={editButtonClass} onClick={() => setEditing(true)}>
Editar
<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
@ -635,28 +641,22 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
{exportingPdf ? <Spinner className="size-4 text-neutral-700" /> : <IconDownload className="size-5" />}
</Button>
{workSummary ? (
<div className="flex items-center gap-2">
<Badge className="inline-flex h-9 items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-sm font-semibold text-neutral-700">
<IconClock className="size-4 text-neutral-700" /> Tempo total: {formattedTotalWorked}
</Badge>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 bg-white text-neutral-600 transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00d6eb]/30"
aria-label="Ver detalhamento das horas internas e externas"
>
<IconInfoCircle 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">
<div className="flex flex-col gap-1">
<span>Horas internas: {formatDuration(internalWorkedMs)}</span>
<span>Horas externas: {formatDuration(externalWorkedMs)}</span>
</div>
</TooltipContent>
</Tooltip>
</div>
<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>