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

4
src/components/tickets/delete-ticket-dialog.tsx
View file

@ -48,9 +48,9 @@ export function DeleteTicketDialog({ ticketId }: { ticketId: Id<"tickets"> }) {
<Button
size="icon"
aria-label="Excluir ticket"
className="h-9 w-9 rounded-lg border border-transparent bg-transparent text-[#ef4444] transition hover:border-[#fecaca] hover:bg-[#fee2e2] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#fecaca]/50"
className="h-9 w-9 rounded-lg border border-rose-300 bg-white text-rose-600 transition hover:bg-rose-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200"
>
<Trash2 className="size-4 text-current" />
<Trash2 className="size-4" />
</Button>
</DialogTrigger>
<DialogContent className="max-w-md">

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>

3
src/components/tickets/tickets-view.tsx
View file

@ -1,6 +1,7 @@
"use client"
import { useEffect, useMemo, useState } from "react"
import { toast } from "sonner"
import { useQuery } from "convex/react"
import { api } from "@/convex/_generated/api"
import type { Id } from "@/convex/_generated/dataModel"
@ -96,6 +97,7 @@ export function TicketsView({ initialFilters }: TicketsViewProps = {}) {
try {
const key = `tickets:filters:${tenantId}:${String(convexUserId)}`
localStorage.setItem(key, JSON.stringify(filters))
toast.success("Filtro salvo como padrão")
} catch {
// ignore
}
@ -106,6 +108,7 @@ export function TicketsView({ initialFilters }: TicketsViewProps = {}) {
try {
const key = `tickets:filters:${tenantId}:${String(convexUserId)}`
localStorage.removeItem(key)
toast.success("Padrão de filtro limpo")
} catch {
// ignore
}