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

Align ticket status colors across views

Browse source
This commit is contained in:
codex-bot 2025-10-24 16:48:24 -03:00
parent 296e02cf0c
commit 6702811f4a
6 changed files with 110 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/tickets/ticket-details-panel.tsx
View file

@ -6,6 +6,7 @@ import type { TicketWithDetails } from "@/lib/schemas/ticket"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { getTicketStatusLabel, getTicketStatusSummaryTone } from "@/lib/ticket-status-style"
interface TicketDetailsPanelProps {
ticket: TicketWithDetails
@ -13,20 +14,6 @@ interface TicketDetailsPanelProps {
type SummaryTone = "default" | "info" | "warning" | "success" | "muted" | "danger"
const statusLabel: Record<TicketWithDetails["status"], string> = {
PENDING: "Pendente",
AWAITING_ATTENDANCE: "Em andamento",
PAUSED: "Pausado",
RESOLVED: "Resolvido",
}
const statusTone: Record<TicketWithDetails["status"], SummaryTone> = {
PENDING: "muted",
AWAITING_ATTENDANCE: "info",
PAUSED: "warning",
RESOLVED: "success",
}
const priorityLabel: Record<TicketWithDetails["priority"], string> = {
LOW: "Baixa",
MEDIUM: "Média",
@ -82,8 +69,8 @@ export function TicketDetailsPanel({ ticket }: TicketDetailsPanelProps) {
{
key: "status",
label: "Status",
value: statusLabel[ticket.status] ?? ticket.status,
tone: statusTone[ticket.status] ?? "default",
value: getTicketStatusLabel(ticket.status) ?? ticket.status,
tone: getTicketStatusSummaryTone(ticket.status) as SummaryTone,
},
{
key: "priority",

21
src/components/tickets/tickets-board.tsx
View file

@ -5,30 +5,17 @@ import { formatDistanceToNowStrict } from "date-fns"
import { ptBR } from "date-fns/locale"
import { LayoutGrid } from "lucide-react"
import type { Ticket, TicketStatus } from "@/lib/schemas/ticket"
import type { Ticket } from "@/lib/schemas/ticket"
import { Badge } from "@/components/ui/badge"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty"
import { cn } from "@/lib/utils"
import { TicketPriorityPill } from "@/components/tickets/priority-pill"
import { getTicketStatusChipClass, getTicketStatusLabel } from "@/lib/ticket-status-style"
type TicketsBoardProps = {
tickets: Ticket[]
}
const statusLabel: Record<TicketStatus, string> = {
PENDING: "Pendente",
AWAITING_ATTENDANCE: "Em andamento",
PAUSED: "Pausado",
RESOLVED: "Resolvido",
}
const statusChipClass: Record<TicketStatus, string> = {
PENDING: "bg-amber-100 text-amber-800 ring-1 ring-amber-200",
AWAITING_ATTENDANCE: "bg-sky-100 text-sky-700 ring-1 ring-sky-200",
PAUSED: "bg-violet-100 text-violet-700 ring-1 ring-violet-200",
RESOLVED: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200",
}
function formatUpdated(date: Date) {
return formatDistanceToNowStrict(date, { addSuffix: true, locale: ptBR })
}
@ -71,10 +58,10 @@ export function TicketsBoard({ tickets }: TicketsBoardProps) {
<span
className={cn(
"inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition",
statusChipClass[ticket.status],
getTicketStatusChipClass(ticket.status),
)}
>
{statusLabel[ticket.status]}
{getTicketStatusLabel(ticket.status)}
</span>
</div>
<span className="text-xs font-semibold uppercase tracking-wide text-neutral-400">

24
src/components/tickets/tickets-table.tsx
View file

@ -6,7 +6,7 @@ import { format, formatDistanceToNowStrict } from "date-fns"
import { ptBR } from "date-fns/locale"
import { type LucideIcon, Code, FileText, Mail, MessageCircle, MessageSquare, Phone } from "lucide-react"
import type { Ticket, TicketChannel, TicketStatus } from "@/lib/schemas/ticket"
import type { Ticket, TicketChannel } from "@/lib/schemas/ticket"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
@ -23,6 +23,7 @@ import {
import { PrioritySelect } from "@/components/tickets/priority-select"
import { cn } from "@/lib/utils"
import { deriveServerOffset, toServerTimestamp } from "@/components/tickets/ticket-timer.utils"
import { getTicketStatusLabel, getTicketStatusTextClass } from "@/lib/ticket-status-style"
const channelLabel: Record<TicketChannel, string> = {
EMAIL: "E-mail",
@ -48,20 +49,6 @@ const categoryChipClass = "inline-flex items-center gap-1 rounded-full bg-slate-
const tableRowClass =
"group border-b border-slate-100 text-sm transition-colors hover:bg-slate-100/70 last:border-none"
const statusLabel: Record<TicketStatus, string> = {
PENDING: "Pendente",
AWAITING_ATTENDANCE: "Em andamento",
PAUSED: "Pausado",
RESOLVED: "Resolvido",
}
const statusTone: Record<TicketStatus, string> = {
PENDING: "text-slate-700",
AWAITING_ATTENDANCE: "text-sky-700",
PAUSED: "text-violet-700",
RESOLVED: "text-emerald-700",
}
function formatDuration(ms?: number) {
if (!ms || ms <= 0) return "—"
const totalSeconds = Math.floor(ms / 1000)
@ -267,8 +254,11 @@ export function TicketsTable({ tickets }: TicketsTableProps) {
</TableCell>
<TableCell className={`${cellClass} pl-6 sm:pl-10 xl:pl-14`}>
<div className="flex flex-col gap-1">
<span className={cn("text-sm font-semibold break-words leading-tight max-w-[140px] sm:max-w-[180px] lg:max-w-[210px]", statusTone[ticket.status])}>
{statusLabel[ticket.status]}
<span className={cn(
"text-sm font-semibold break-words leading-tight max-w-[140px] sm:max-w-[180px] lg:max-w-[210px]",
getTicketStatusTextClass(ticket.status)
)}>
{getTicketStatusLabel(ticket.status)}
</span>
{ticket.metrics?.timeWaitingMinutes ? (
<span className="text-xs text-neutral-500">