Refina métricas de tempo e filtros de alertas

This commit is contained in:
Esdras Renan 2025-10-07 23:10:16 -03:00
parent ef25cbe799
commit b880aa3ea6
3 changed files with 36 additions and 22 deletions

View file

@ -3,7 +3,7 @@
import { useCallback, useEffect, useMemo, useState } from "react"
import { format, formatDistanceToNow } from "date-fns"
import { ptBR } from "date-fns/locale"
import { IconClock, IconFileTypePdf, IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react"
import { IconClock, IconDownload, IconInfoCircle, IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react"
import { useMutation, useQuery } from "convex/react"
import { toast } from "sonner"
import { api } from "@/convex/_generated/api"
@ -30,6 +30,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
interface TicketHeaderProps {
ticket: TicketWithDetails
@ -447,19 +448,6 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
return (
<div className={cardClass}>
<div className="absolute right-6 top-6 flex items-center gap-3">
{workSummary ? (
<>
<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" /> Interno: {formatDuration(internalWorkedMs)}
</Badge>
<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" /> Externo: {formatDuration(externalWorkedMs)}
</Badge>
<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" /> Total: {formattedTotalWorked}
</Badge>
</>
) : null}
{!editing ? (
<Button size="sm" className={editButtonClass} onClick={() => setEditing(true)}>
Editar
@ -474,8 +462,32 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
disabled={exportingPdf}
title="Exportar PDF"
>
{exportingPdf ? <Spinner className="size-4 text-neutral-700" /> : <IconFileTypePdf className="size-5" />}
{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>
) : null}
<DeleteTicketDialog ticketId={ticket.id as Id<"tickets">} />
</div>
<div className="flex flex-wrap items-start justify-between gap-3">