1634 lines
68 KiB
TypeScript
1634 lines
68 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
|
import { format, formatDistanceToNow } from "date-fns"
|
|
import { ptBR } from "date-fns/locale"
|
|
import { IconClock, IconDownload, IconLink, IconPlayerPause, IconPlayerPlay, IconPencil } from "@tabler/icons-react"
|
|
import { useMutation, useQuery } from "convex/react"
|
|
import { toast } from "sonner"
|
|
import { api } from "@/convex/_generated/api"
|
|
|
|
import { useAuth } from "@/lib/auth-client"
|
|
import type { Doc, Id } from "@/convex/_generated/dataModel"
|
|
import type { TicketWithDetails, TicketQueueSummary, TicketStatus } from "@/lib/schemas/ticket"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { PrioritySelect } from "@/components/tickets/priority-select"
|
|
import { DeleteTicketDialog } from "@/components/tickets/delete-ticket-dialog"
|
|
import { StatusSelect } from "@/components/tickets/status-select"
|
|
import { CloseTicketDialog, type AdjustWorkSummaryResult } from "@/components/tickets/close-ticket-dialog"
|
|
import { TicketCustomFieldsSection } from "@/components/tickets/ticket-custom-fields"
|
|
import { CheckCircle2 } from "lucide-react"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Spinner } from "@/components/ui/spinner"
|
|
import { useTicketCategories } from "@/hooks/use-ticket-categories"
|
|
import { useDefaultQueues } from "@/hooks/use-default-queues"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
|
|
import {
|
|
deriveServerOffset,
|
|
reconcileLocalSessionStart,
|
|
toServerTimestamp,
|
|
type SessionStartOrigin,
|
|
} from "./ticket-timer.utils"
|
|
import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
|
|
|
|
interface TicketHeaderProps {
|
|
ticket: TicketWithDetails
|
|
}
|
|
|
|
type AgentWorkTotalSnapshot = {
|
|
agentId: string
|
|
agentName: string | null
|
|
agentEmail: string | null
|
|
avatarUrl: string | null
|
|
totalWorkedMs: number
|
|
internalWorkedMs: number
|
|
externalWorkedMs: number
|
|
}
|
|
|
|
type WorkSummarySnapshot = {
|
|
ticketId: Id<"tickets">
|
|
totalWorkedMs: number
|
|
internalWorkedMs: number
|
|
externalWorkedMs: number
|
|
serverNow?: number | null
|
|
activeSession: {
|
|
id: Id<"ticketWorkSessions">
|
|
agentId: string
|
|
startedAt: number
|
|
workType?: string
|
|
} | null
|
|
perAgentTotals: AgentWorkTotalSnapshot[]
|
|
}
|
|
|
|
const cardClass = "relative space-y-4 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"
|
|
const referenceBadgeClass = "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"
|
|
const startButtonClass =
|
|
"inline-flex items-center gap-1 rounded-lg border border-black bg-black px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/30"
|
|
const pauseButtonClass =
|
|
"inline-flex items-center gap-1 rounded-lg border border-black bg-black px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
|
|
const playButtonEnabledClass =
|
|
"inline-flex items-center justify-center rounded-lg border border-black bg-black text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
|
|
const playButtonDisabledClass =
|
|
"inline-flex items-center justify-center rounded-lg border border-slate-300 bg-slate-100 text-neutral-400 cursor-not-allowed"
|
|
const pauseButtonEnabledClass =
|
|
"inline-flex items-center justify-center rounded-lg border border-black bg-black text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
|
|
const pauseButtonDisabledClass =
|
|
"inline-flex items-center justify-center rounded-lg border border-slate-300 bg-slate-100 text-neutral-400 cursor-not-allowed"
|
|
const selectTriggerClass = "h-8 w-full rounded-lg border border-slate-300 bg-white px-3 text-left text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
|
|
const smallSelectTriggerClass = "h-8 w-full rounded-lg border border-slate-300 bg-white px-3 text-left text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
|
|
const sectionLabelClass = "text-xs font-semibold uppercase tracking-wide text-neutral-500"
|
|
const sectionValueClass = "font-medium text-neutral-900"
|
|
const subtleBadgeClass =
|
|
"inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-0.5 text-[11px] font-medium text-neutral-600"
|
|
|
|
const EMPTY_CATEGORY_VALUE = "__none__"
|
|
const EMPTY_SUBCATEGORY_VALUE = "__none__"
|
|
const PAUSE_REASONS = [
|
|
{ value: "NO_CONTACT", label: "Falta de contato" },
|
|
{ value: "WAITING_THIRD_PARTY", label: "Aguardando terceiro" },
|
|
{ value: "IN_PROCEDURE", label: "Em procedimento" },
|
|
{ value: "LUNCH_BREAK", label: "Intervalo de almoço" },
|
|
]
|
|
|
|
type CustomerOption = {
|
|
id: string
|
|
name: string
|
|
email: string
|
|
role: string
|
|
companyId: string | null
|
|
companyName: string | null
|
|
companyIsAvulso: boolean
|
|
avatarUrl: string | null
|
|
}
|
|
|
|
const NO_COMPANY_VALUE = "__no_company__"
|
|
const NO_REQUESTER_VALUE = "__no_requester__"
|
|
|
|
function formatDuration(durationMs: number) {
|
|
if (durationMs <= 0) return "0s"
|
|
const totalSeconds = Math.floor(durationMs / 1000)
|
|
const hours = Math.floor(totalSeconds / 3600)
|
|
const minutes = Math.floor((totalSeconds % 3600) / 60)
|
|
const seconds = totalSeconds % 60
|
|
if (hours > 0) {
|
|
return `${hours}h ${minutes.toString().padStart(2, "0")}m`
|
|
}
|
|
if (minutes > 0) {
|
|
return `${minutes}m ${seconds.toString().padStart(2, "0")}s`
|
|
}
|
|
return `${seconds}s`
|
|
}
|
|
|
|
export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|
const { convexUserId, role, isStaff, session, machineContext } = useAuth()
|
|
const normalizedRole = (role ?? "").toLowerCase()
|
|
const isManager = normalizedRole === "manager"
|
|
const isAdmin = normalizedRole === "admin"
|
|
const canAdjustWork = isAdmin || normalizedRole === "agent"
|
|
const sessionName = session?.user?.name?.trim()
|
|
const machineAssignedName = machineContext?.assignedUserName?.trim()
|
|
const agentName =
|
|
sessionName && sessionName.length > 0
|
|
? sessionName
|
|
: machineAssignedName && machineAssignedName.length > 0
|
|
? machineAssignedName
|
|
: null
|
|
const viewerId = convexUserId ?? null
|
|
const viewerRole = (role ?? "").toLowerCase()
|
|
const [status, setStatus] = useState<TicketStatus>(ticket.status)
|
|
const reopenDeadline = ticket.reopenDeadline ?? null
|
|
const isRequester = Boolean(ticket.requester?.id && viewerId && ticket.requester.id === viewerId)
|
|
const reopenWindowActive = reopenDeadline ? reopenDeadline > Date.now() : false
|
|
const canReopenTicket =
|
|
status === "RESOLVED" && reopenWindowActive && (isStaff || viewerRole === "manager" || isRequester)
|
|
const reopenDeadlineLabel = useMemo(() => {
|
|
if (!reopenDeadline) return null
|
|
try {
|
|
return new Date(reopenDeadline).toLocaleString("pt-BR")
|
|
} catch {
|
|
return null
|
|
}
|
|
}, [reopenDeadline])
|
|
const viewerEmail = session?.user?.email ?? machineContext?.assignedUserEmail ?? null
|
|
const viewerAvatar = session?.user?.avatarUrl ?? null
|
|
const viewerAgentMeta = useMemo(
|
|
() => {
|
|
if (!convexUserId) return null
|
|
return {
|
|
id: String(convexUserId),
|
|
name: agentName ?? viewerEmail ?? null,
|
|
email: viewerEmail,
|
|
avatarUrl: viewerAvatar,
|
|
}
|
|
},
|
|
[convexUserId, agentName, viewerEmail, viewerAvatar]
|
|
)
|
|
useDefaultQueues(ticket.tenantId)
|
|
const changeAssignee = useMutation(api.tickets.changeAssignee)
|
|
const changeQueue = useMutation(api.tickets.changeQueue)
|
|
const changeRequester = useMutation(api.tickets.changeRequester)
|
|
const updateSubject = useMutation(api.tickets.updateSubject)
|
|
const updateSummary = useMutation(api.tickets.updateSummary)
|
|
const startWork = useMutation(api.tickets.startWork)
|
|
const pauseWork = useMutation(api.tickets.pauseWork)
|
|
const updateCategories = useMutation(api.tickets.updateCategories)
|
|
const reopenTicket = useMutation(api.tickets.reopenTicket)
|
|
const agents = (useQuery(api.users.listAgents, { tenantId: ticket.tenantId }) as Doc<"users">[] | undefined) ?? []
|
|
const queuesEnabled = Boolean(isStaff && convexUserId)
|
|
const companiesRemote = useQuery(
|
|
api.companies.list,
|
|
convexUserId ? { tenantId: ticket.tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
|
|
)
|
|
const companies = useMemo(
|
|
() =>
|
|
(Array.isArray(companiesRemote) ? companiesRemote : []).map((company) => ({
|
|
id: String(company.id),
|
|
name: company.name,
|
|
slug: company.slug ?? null,
|
|
})),
|
|
[companiesRemote]
|
|
)
|
|
|
|
const customersRemote = useQuery(
|
|
api.users.listCustomers,
|
|
convexUserId ? { tenantId: ticket.tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
|
|
)
|
|
const customers = useMemo(
|
|
() => (Array.isArray(customersRemote) ? (customersRemote as CustomerOption[]) : []),
|
|
[customersRemote]
|
|
)
|
|
|
|
const queuesResult = useQuery(
|
|
api.queues.summary,
|
|
queuesEnabled ? { tenantId: ticket.tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
|
|
)
|
|
const queues: TicketQueueSummary[] = Array.isArray(queuesResult) ? queuesResult : []
|
|
const { categories, isLoading: categoriesLoading } = useTicketCategories(ticket.tenantId)
|
|
const workSummaryRemote = useQuery(
|
|
api.tickets.workSummary,
|
|
convexUserId
|
|
? { ticketId: ticket.id as Id<"tickets">, viewerId: convexUserId as Id<"users"> }
|
|
: "skip"
|
|
) as
|
|
| {
|
|
ticketId: Id<"tickets">
|
|
totalWorkedMs: number
|
|
internalWorkedMs?: number
|
|
externalWorkedMs?: number
|
|
serverNow?: number
|
|
activeSession: {
|
|
id: Id<"ticketWorkSessions">
|
|
agentId: string
|
|
startedAt: number
|
|
workType?: string
|
|
} | null
|
|
perAgentTotals?: Array<{
|
|
agentId: string
|
|
agentName?: string | null
|
|
agentEmail?: string | null
|
|
avatarUrl?: string | null
|
|
totalWorkedMs: number
|
|
internalWorkedMs?: number
|
|
externalWorkedMs?: number
|
|
}>
|
|
}
|
|
| null
|
|
| undefined
|
|
|
|
const [assigneeState, setAssigneeState] = useState(ticket.assignee ?? null)
|
|
const [editing, setEditing] = useState(false)
|
|
const [subject, setSubject] = useState(ticket.subject)
|
|
const [summary, setSummary] = useState(ticket.summary ?? "")
|
|
const [categorySelection, setCategorySelection] = useState<{ categoryId: string; subcategoryId: string }>(
|
|
{
|
|
categoryId: ticket.category?.id ?? "",
|
|
subcategoryId: ticket.subcategory?.id ?? "",
|
|
}
|
|
)
|
|
const currentAssigneeId = assigneeState?.id ?? ""
|
|
const [assigneeSelection, setAssigneeSelection] = useState(currentAssigneeId)
|
|
const [saving, setSaving] = useState(false)
|
|
const [pauseDialogOpen, setPauseDialogOpen] = useState(false)
|
|
const [isReopening, setIsReopening] = useState(false)
|
|
const [pauseReason, setPauseReason] = useState<string>(PAUSE_REASONS[0]?.value ?? "NO_CONTACT")
|
|
const [pauseNote, setPauseNote] = useState("")
|
|
const [pausing, setPausing] = useState(false)
|
|
const [exportingPdf, setExportingPdf] = useState(false)
|
|
const [closeOpen, setCloseOpen] = useState(false)
|
|
const [assigneeChangeReason, setAssigneeChangeReason] = useState("")
|
|
const [assigneeReasonError, setAssigneeReasonError] = useState<string | null>(null)
|
|
const [companySelection, setCompanySelection] = useState<string>(NO_COMPANY_VALUE)
|
|
const [requesterSelection, setRequesterSelection] = useState<string | null>(ticket.requester.id)
|
|
const [requesterError, setRequesterError] = useState<string | null>(null)
|
|
const [customersInitialized, setCustomersInitialized] = useState(false)
|
|
const selectedCategoryId = categorySelection.categoryId
|
|
const selectedSubcategoryId = categorySelection.subcategoryId
|
|
const dirty = useMemo(
|
|
() => subject !== ticket.subject || (summary ?? "") !== (ticket.summary ?? ""),
|
|
[subject, summary, ticket.subject, ticket.summary]
|
|
)
|
|
const currentCategoryId = ticket.category?.id ?? ""
|
|
const currentSubcategoryId = ticket.subcategory?.id ?? ""
|
|
const categoryDirty = useMemo(() => {
|
|
return selectedCategoryId !== currentCategoryId || selectedSubcategoryId !== currentSubcategoryId
|
|
}, [selectedCategoryId, selectedSubcategoryId, currentCategoryId, currentSubcategoryId])
|
|
const currentQueueName = ticket.queue ?? ""
|
|
const isAvulso = Boolean(((ticket.company ?? null) as { isAvulso?: boolean } | null)?.isAvulso ?? false)
|
|
const resolvedWithSummary = useMemo(() => {
|
|
if (!ticket.resolvedWithTicketId) return null
|
|
const linkedId = String(ticket.resolvedWithTicketId)
|
|
let reference: string | null = null
|
|
let subject: string | null = null
|
|
for (const event of ticket.timeline ?? []) {
|
|
if (!event || event.type !== "TICKET_LINKED") continue
|
|
const payload = (event.payload ?? {}) as {
|
|
linkedTicketId?: unknown
|
|
linkedReference?: unknown
|
|
linkedSubject?: unknown
|
|
}
|
|
if (String(payload.linkedTicketId ?? "") !== linkedId) continue
|
|
if (reference === null) {
|
|
const rawReference = payload.linkedReference
|
|
if (typeof rawReference === "number") {
|
|
reference = rawReference.toString()
|
|
} else if (typeof rawReference === "string" && rawReference.trim().length > 0) {
|
|
reference = rawReference.trim()
|
|
}
|
|
}
|
|
if (subject === null) {
|
|
const rawSubject = payload.linkedSubject
|
|
if (typeof rawSubject === "string" && rawSubject.trim().length > 0) {
|
|
subject = rawSubject.trim()
|
|
}
|
|
}
|
|
if (reference !== null && subject !== null) {
|
|
break
|
|
}
|
|
}
|
|
return { id: linkedId, reference, subject }
|
|
}, [ticket.resolvedWithTicketId, ticket.timeline])
|
|
const [queueSelection, setQueueSelection] = useState(currentQueueName)
|
|
const queueDirty = useMemo(() => queueSelection !== currentQueueName, [queueSelection, currentQueueName])
|
|
const currentRequesterRecord = useMemo(
|
|
() => customers.find((customer) => customer.id === ticket.requester.id) ?? null,
|
|
[customers, ticket.requester.id]
|
|
)
|
|
const currentCompanySelection = useMemo(() => {
|
|
if (currentRequesterRecord?.companyId) return currentRequesterRecord.companyId
|
|
if (ticket.company?.id) return String(ticket.company.id)
|
|
return NO_COMPANY_VALUE
|
|
}, [currentRequesterRecord, ticket.company?.id])
|
|
const companyMeta = useMemo(() => {
|
|
const map = new Map<string, { name: string; isAvulso?: boolean; keywords: string[] }>()
|
|
companies.forEach((company) => {
|
|
const trimmedName = company.name.trim()
|
|
const slugFallback = company.slug?.trim()
|
|
const label =
|
|
trimmedName.length > 0
|
|
? trimmedName
|
|
: slugFallback && slugFallback.length > 0
|
|
? slugFallback
|
|
: `Empresa ${company.id.slice(0, 8)}`
|
|
const keywords = slugFallback ? [slugFallback] : []
|
|
map.set(company.id, { name: label, isAvulso: false, keywords })
|
|
})
|
|
customers.forEach((customer) => {
|
|
if (customer.companyId && !map.has(customer.companyId)) {
|
|
const trimmedName = customer.companyName?.trim() ?? ""
|
|
const label =
|
|
trimmedName.length > 0 ? trimmedName : `Empresa ${customer.companyId.slice(0, 8)}`
|
|
map.set(customer.companyId, {
|
|
name: label,
|
|
isAvulso: customer.companyIsAvulso,
|
|
keywords: [],
|
|
})
|
|
}
|
|
})
|
|
return map
|
|
}, [companies, customers])
|
|
|
|
const companyComboboxOptions = useMemo<SearchableComboboxOption[]>(() => {
|
|
const entries = Array.from(companyMeta.entries())
|
|
.map(([id, meta]) => ({
|
|
value: id,
|
|
label: meta.name,
|
|
keywords: meta.keywords,
|
|
}))
|
|
.sort((a, b) => a.label.localeCompare(b.label, "pt-BR"))
|
|
return [{ value: NO_COMPANY_VALUE, label: "Sem empresa", keywords: ["sem empresa", "nenhuma"] }, ...entries]
|
|
}, [companyMeta])
|
|
|
|
const filteredCustomers = useMemo(() => {
|
|
if (companySelection === NO_COMPANY_VALUE) {
|
|
return customers.filter((customer) => !customer.companyId)
|
|
}
|
|
return customers.filter((customer) => customer.companyId === companySelection)
|
|
}, [companySelection, customers])
|
|
const assigneeDirty = useMemo(() => assigneeSelection !== currentAssigneeId, [assigneeSelection, currentAssigneeId])
|
|
const requesterDirty = useMemo(() => requesterSelection !== ticket.requester.id, [requesterSelection, ticket.requester.id])
|
|
const formDirty = dirty || categoryDirty || queueDirty || assigneeDirty || requesterDirty
|
|
const normalizedAssigneeReason = assigneeChangeReason.trim()
|
|
const assigneeReasonValid = normalizedAssigneeReason.length === 0 || normalizedAssigneeReason.length >= 5
|
|
const saveDisabled = !formDirty || saving || !assigneeReasonValid
|
|
const companyLabel = useMemo(() => {
|
|
if (ticket.company?.name) return ticket.company.name
|
|
if (isAvulso) return "Cliente avulso"
|
|
return "Sem empresa vinculada"
|
|
}, [ticket.company?.name, isAvulso])
|
|
|
|
const activeCategory = useMemo(
|
|
() => categories.find((category) => category.id === selectedCategoryId) ?? null,
|
|
[categories, selectedCategoryId]
|
|
)
|
|
const secondaryOptions = useMemo(() => activeCategory?.secondary ?? [], [activeCategory])
|
|
const hasAssignee = Boolean(currentAssigneeId)
|
|
const isCurrentResponsible = hasAssignee && convexUserId ? currentAssigneeId === convexUserId : false
|
|
const isResolved = status === "RESOLVED"
|
|
const canControlWork = !isResolved && (isAdmin || !hasAssignee || isCurrentResponsible)
|
|
const canPauseWork = !isResolved && (isAdmin || isCurrentResponsible)
|
|
const pauseDisabled = !canPauseWork
|
|
const startDisabled = !canControlWork
|
|
|
|
useEffect(() => {
|
|
if (!customersInitialized) {
|
|
if (customers.length > 0) {
|
|
setRequesterSelection(ticket.requester.id)
|
|
setCompanySelection(currentCompanySelection)
|
|
setCustomersInitialized(true)
|
|
}
|
|
return
|
|
}
|
|
if (!editing) {
|
|
setRequesterSelection(ticket.requester.id)
|
|
setCompanySelection(currentCompanySelection)
|
|
}
|
|
}, [customersInitialized, customers, currentCompanySelection, ticket.requester.id, editing])
|
|
|
|
useEffect(() => {
|
|
if (!editing) return
|
|
const available = filteredCustomers
|
|
if (available.length === 0) {
|
|
if (requesterSelection !== null) {
|
|
setRequesterSelection(null)
|
|
}
|
|
return
|
|
}
|
|
if (!requesterSelection || !available.some((customer) => customer.id === requesterSelection)) {
|
|
setRequesterSelection(available[0].id)
|
|
}
|
|
}, [editing, filteredCustomers, requesterSelection])
|
|
|
|
useEffect(() => {
|
|
if (requesterSelection && requesterError) {
|
|
setRequesterError(null)
|
|
}
|
|
}, [requesterSelection, requesterError])
|
|
|
|
|
|
useEffect(() => {
|
|
setStatus(ticket.status)
|
|
}, [ticket.status])
|
|
|
|
useEffect(() => {
|
|
setAssigneeState(ticket.assignee ?? null)
|
|
}, [ticket.assignee])
|
|
|
|
async function handleSave() {
|
|
if (!convexUserId || !formDirty) {
|
|
setEditing(false)
|
|
return
|
|
}
|
|
|
|
setSaving(true)
|
|
|
|
try {
|
|
if (categoryDirty && !isManager) {
|
|
toast.loading("Atualizando categoria...", { id: "ticket-category" })
|
|
try {
|
|
await updateCategories({
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
categoryId: selectedCategoryId ? (selectedCategoryId as Id<"ticketCategories">) : null,
|
|
subcategoryId: selectedSubcategoryId ? (selectedSubcategoryId as Id<"ticketSubcategories">) : null,
|
|
actorId: convexUserId as Id<"users">,
|
|
})
|
|
toast.success("Categoria atualizada!", { id: "ticket-category" })
|
|
} catch (categoryError) {
|
|
toast.error("Não foi possível atualizar a categoria.", { id: "ticket-category" })
|
|
setCategorySelection({
|
|
categoryId: currentCategoryId,
|
|
subcategoryId: currentSubcategoryId,
|
|
})
|
|
throw categoryError
|
|
}
|
|
} else if (categoryDirty && isManager) {
|
|
setCategorySelection({
|
|
categoryId: currentCategoryId,
|
|
subcategoryId: currentSubcategoryId,
|
|
})
|
|
}
|
|
|
|
if (queueDirty && !isManager) {
|
|
const queue = queues.find((item) => item.name === queueSelection)
|
|
if (!queue) {
|
|
toast.error("Fila selecionada não está disponível.")
|
|
setQueueSelection(currentQueueName)
|
|
throw new Error("Fila inválida")
|
|
}
|
|
toast.loading("Atualizando fila...", { id: "queue" })
|
|
try {
|
|
await changeQueue({
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
queueId: queue.id as Id<"queues">,
|
|
actorId: convexUserId as Id<"users">,
|
|
})
|
|
toast.success("Fila atualizada!", { id: "queue" })
|
|
} catch (queueError) {
|
|
toast.error("Não foi possível atualizar a fila.", { id: "queue" })
|
|
setQueueSelection(currentQueueName)
|
|
throw queueError
|
|
}
|
|
} else if (queueDirty && isManager) {
|
|
setQueueSelection(currentQueueName)
|
|
}
|
|
|
|
if (requesterDirty && !isManager) {
|
|
if (!requesterSelection) {
|
|
setRequesterError("Selecione um solicitante.")
|
|
toast.error("Selecione um solicitante válido.", { id: "requester" })
|
|
throw new Error("invalid-requester")
|
|
}
|
|
toast.loading("Atualizando solicitante...", { id: "requester" })
|
|
try {
|
|
await changeRequester({
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
requesterId: requesterSelection as Id<"users">,
|
|
actorId: convexUserId as Id<"users">,
|
|
})
|
|
toast.success("Solicitante atualizado!", { id: "requester" })
|
|
} catch (requesterError) {
|
|
console.error(requesterError)
|
|
toast.error("Não foi possível atualizar o solicitante.", { id: "requester" })
|
|
setRequesterSelection(ticket.requester.id)
|
|
setCompanySelection(currentCompanySelection)
|
|
throw requesterError
|
|
}
|
|
} else if (requesterDirty && isManager) {
|
|
setRequesterSelection(ticket.requester.id)
|
|
setCompanySelection(currentCompanySelection)
|
|
}
|
|
|
|
if (assigneeDirty && !isManager) {
|
|
if (!assigneeSelection) {
|
|
toast.error("Selecione um responsável válido.", { id: "assignee" })
|
|
setAssigneeSelection(currentAssigneeId)
|
|
throw new Error("invalid-assignee")
|
|
} else {
|
|
if (status === "AWAITING_ATTENDANCE" || workSummary?.activeSession) {
|
|
toast.error("Pause o atendimento antes de reatribuir o chamado.", { id: "assignee" })
|
|
setAssigneeSelection(currentAssigneeId)
|
|
throw new Error("assignee-not-allowed")
|
|
}
|
|
const reasonValue = assigneeChangeReason.trim()
|
|
if (reasonValue.length > 0 && reasonValue.length < 5) {
|
|
setAssigneeReasonError("Descreva o motivo com pelo menos 5 caracteres ou deixe em branco.")
|
|
toast.error("Informe ao menos 5 caracteres no motivo ou deixe o campo vazio.", { id: "assignee" })
|
|
return
|
|
}
|
|
if (reasonValue.length > 1000) {
|
|
setAssigneeReasonError("Use no máximo 1.000 caracteres.")
|
|
toast.error("Reduza o motivo para até 1.000 caracteres.", { id: "assignee" })
|
|
return
|
|
}
|
|
setAssigneeReasonError(null)
|
|
toast.loading("Atualizando responsável...", { id: "assignee" })
|
|
try {
|
|
await changeAssignee({
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
assigneeId: assigneeSelection as Id<"users">,
|
|
actorId: convexUserId as Id<"users">,
|
|
reason: reasonValue.length > 0 ? reasonValue : undefined,
|
|
})
|
|
toast.success("Responsável atualizado!", { id: "assignee" })
|
|
if (assigneeSelection) {
|
|
const next = agents.find((agent) => String(agent._id) === assigneeSelection)
|
|
if (next) {
|
|
setAssigneeState({
|
|
id: String(next._id),
|
|
name: next.name,
|
|
email: next.email,
|
|
avatarUrl: next.avatarUrl ?? undefined,
|
|
teams: Array.isArray(next.teams) ? next.teams.filter((team): team is string => typeof team === "string") : [],
|
|
})
|
|
}
|
|
}
|
|
setAssigneeChangeReason("")
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Não foi possível atualizar o responsável.", { id: "assignee" })
|
|
setAssigneeSelection(currentAssigneeId)
|
|
throw error
|
|
}
|
|
}
|
|
} else if (assigneeDirty && isManager) {
|
|
setAssigneeSelection(currentAssigneeId)
|
|
}
|
|
|
|
if (dirty) {
|
|
toast.loading("Salvando alterações...", { id: "save-header" })
|
|
if (subject !== ticket.subject) {
|
|
await updateSubject({
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
subject: subject.trim(),
|
|
actorId: convexUserId as Id<"users">,
|
|
})
|
|
}
|
|
if ((summary ?? "") !== (ticket.summary ?? "")) {
|
|
await updateSummary({
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
summary: (summary ?? "").trim(),
|
|
actorId: convexUserId as Id<"users">,
|
|
})
|
|
}
|
|
toast.success("Cabeçalho atualizado!", { id: "save-header" })
|
|
}
|
|
setEditing(false)
|
|
} catch {
|
|
toast.error("Não foi possível salvar.", { id: "save-header" })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
function handleCancel() {
|
|
setSubject(ticket.subject)
|
|
setSummary(ticket.summary ?? "")
|
|
setCategorySelection({
|
|
categoryId: currentCategoryId,
|
|
subcategoryId: currentSubcategoryId,
|
|
})
|
|
setQueueSelection(currentQueueName)
|
|
setRequesterSelection(ticket.requester.id)
|
|
setCompanySelection(currentCompanySelection)
|
|
setRequesterError(null)
|
|
setAssigneeSelection(currentAssigneeId)
|
|
setAssigneeChangeReason("")
|
|
setAssigneeReasonError(null)
|
|
setEditing(false)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (editing) return
|
|
setAssigneeChangeReason("")
|
|
setAssigneeReasonError(null)
|
|
setCategorySelection({
|
|
categoryId: ticket.category?.id ?? "",
|
|
subcategoryId: ticket.subcategory?.id ?? "",
|
|
})
|
|
setQueueSelection(ticket.queue ?? "")
|
|
setAssigneeSelection(currentAssigneeId)
|
|
setRequesterSelection(ticket.requester.id)
|
|
setCompanySelection(currentCompanySelection)
|
|
}, [editing, ticket.category?.id, ticket.subcategory?.id, ticket.queue, currentAssigneeId, ticket.requester.id, currentCompanySelection])
|
|
|
|
useEffect(() => {
|
|
if (!editing) return
|
|
if (!selectedCategoryId) {
|
|
if (selectedSubcategoryId) {
|
|
setCategorySelection((prev) => ({ ...prev, subcategoryId: "" }))
|
|
}
|
|
return
|
|
}
|
|
|
|
const stillValid = secondaryOptions.some((option) => option.id === selectedSubcategoryId)
|
|
if (!stillValid && selectedSubcategoryId) {
|
|
setCategorySelection((prev) => ({ ...prev, subcategoryId: "" }))
|
|
}
|
|
}, [editing, secondaryOptions, selectedCategoryId, selectedSubcategoryId])
|
|
|
|
const ticketActiveSession = ticket.workSummary?.activeSession ?? null
|
|
const ticketActiveSessionStartedAtMs = ticketActiveSession ? ticketActiveSession.startedAt.getTime() : undefined
|
|
const ticketActiveSessionWorkType = (ticketActiveSession as { workType?: string } | null)?.workType
|
|
|
|
const initialWorkSummary = useMemo<WorkSummarySnapshot | null>(() => {
|
|
if (!ticket.workSummary) return null
|
|
return {
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
totalWorkedMs: ticket.workSummary.totalWorkedMs ?? 0,
|
|
internalWorkedMs: ticket.workSummary.internalWorkedMs ?? 0,
|
|
externalWorkedMs: ticket.workSummary.externalWorkedMs ?? 0,
|
|
serverNow: typeof ticket.workSummary.serverNow === "number" ? ticket.workSummary.serverNow : null,
|
|
activeSession: ticketActiveSession
|
|
? {
|
|
id: ticketActiveSession.id as Id<"ticketWorkSessions">,
|
|
agentId: String(ticketActiveSession.agentId),
|
|
startedAt: ticketActiveSessionStartedAtMs ?? ticketActiveSession.startedAt.getTime(),
|
|
workType: (ticketActiveSessionWorkType ?? "INTERNAL").toString().toUpperCase(),
|
|
}
|
|
: null,
|
|
perAgentTotals: (ticket.workSummary.perAgentTotals ?? []).map((item) => ({
|
|
agentId: String(item.agentId),
|
|
agentName: item.agentName ?? null,
|
|
agentEmail: item.agentEmail ?? null,
|
|
avatarUrl: item.avatarUrl ?? null,
|
|
totalWorkedMs: item.totalWorkedMs ?? 0,
|
|
internalWorkedMs: item.internalWorkedMs ?? 0,
|
|
externalWorkedMs: item.externalWorkedMs ?? 0,
|
|
})),
|
|
}
|
|
}, [
|
|
ticket.id,
|
|
ticket.workSummary,
|
|
ticketActiveSession,
|
|
ticketActiveSessionStartedAtMs,
|
|
ticketActiveSessionWorkType,
|
|
])
|
|
|
|
const [workSummary, setWorkSummary] = useState<WorkSummarySnapshot | null>(initialWorkSummary)
|
|
const effectiveWorkSummary = workSummary ?? initialWorkSummary
|
|
const serverOffsetRef = useRef<number>(0)
|
|
|
|
const calibrateServerOffset = useCallback(
|
|
(serverNow?: number | Date | null) => {
|
|
if (serverNow === undefined || serverNow === null) return
|
|
const serverMs =
|
|
serverNow instanceof Date ? serverNow.getTime() : Number(serverNow)
|
|
if (!Number.isFinite(serverMs)) return
|
|
serverOffsetRef.current = deriveServerOffset({
|
|
currentOffset: serverOffsetRef.current,
|
|
localNow: Date.now(),
|
|
serverNow: serverMs,
|
|
})
|
|
},
|
|
[]
|
|
)
|
|
|
|
const getServerNow = useCallback(() => toServerTimestamp(Date.now(), serverOffsetRef.current), [])
|
|
|
|
useEffect(() => {
|
|
if (initialWorkSummary?.serverNow) {
|
|
calibrateServerOffset(initialWorkSummary.serverNow)
|
|
}
|
|
setWorkSummary(initialWorkSummary)
|
|
}, [initialWorkSummary, calibrateServerOffset])
|
|
|
|
useEffect(() => {
|
|
if (workSummaryRemote === undefined) return
|
|
if (workSummaryRemote === null) {
|
|
setWorkSummary(null)
|
|
return
|
|
}
|
|
if (typeof workSummaryRemote.serverNow === "number") {
|
|
calibrateServerOffset(workSummaryRemote.serverNow)
|
|
}
|
|
setWorkSummary({
|
|
ticketId: workSummaryRemote.ticketId,
|
|
totalWorkedMs: workSummaryRemote.totalWorkedMs ?? 0,
|
|
internalWorkedMs: workSummaryRemote.internalWorkedMs ?? 0,
|
|
externalWorkedMs: workSummaryRemote.externalWorkedMs ?? 0,
|
|
serverNow: typeof workSummaryRemote.serverNow === "number" ? workSummaryRemote.serverNow : null,
|
|
activeSession: workSummaryRemote.activeSession
|
|
? {
|
|
id: workSummaryRemote.activeSession.id,
|
|
agentId: workSummaryRemote.activeSession.agentId,
|
|
startedAt: workSummaryRemote.activeSession.startedAt,
|
|
workType: (workSummaryRemote.activeSession.workType ?? "INTERNAL").toString().toUpperCase(),
|
|
}
|
|
: null,
|
|
perAgentTotals: (workSummaryRemote.perAgentTotals ?? []).map((item) => ({
|
|
agentId: String(item.agentId),
|
|
agentName: item.agentName ?? null,
|
|
agentEmail: item.agentEmail ?? null,
|
|
avatarUrl: item.avatarUrl ?? null,
|
|
totalWorkedMs: item.totalWorkedMs ?? 0,
|
|
internalWorkedMs: item.internalWorkedMs ?? 0,
|
|
externalWorkedMs: item.externalWorkedMs ?? 0,
|
|
})),
|
|
})
|
|
}, [workSummaryRemote, calibrateServerOffset])
|
|
|
|
const activeSessionId = workSummary?.activeSession?.id ?? null
|
|
const activeSessionStartedAt = workSummary?.activeSession?.startedAt ?? null
|
|
const isPlaying = Boolean(activeSessionId)
|
|
const [now, setNow] = useState(() => Date.now())
|
|
// Guarda um marcador local do início da sessão atual para evitar inflar tempo com
|
|
// timestamps defasados vindos da rede. Escolhemos o MAIOR entre (remoto, local).
|
|
const localStartAtRef = useRef<number>(0)
|
|
const localStartOriginRef = useRef<SessionStartOrigin>("unknown")
|
|
|
|
useEffect(() => {
|
|
if (!activeSessionId) return
|
|
const interval = setInterval(() => {
|
|
setNow(Date.now())
|
|
}, 1000)
|
|
return () => clearInterval(interval)
|
|
}, [activeSessionId])
|
|
|
|
// Sempre que a sessão ativa (id) mudar, sincroniza o ponteiro local
|
|
useEffect(() => {
|
|
if (!activeSessionId) {
|
|
localStartAtRef.current = 0
|
|
localStartOriginRef.current = "unknown"
|
|
return
|
|
}
|
|
const { localStart, origin } = reconcileLocalSessionStart({
|
|
remoteStart: Number(activeSessionStartedAt) || 0,
|
|
localStart: localStartAtRef.current,
|
|
origin: localStartOriginRef.current,
|
|
})
|
|
localStartAtRef.current = localStart
|
|
localStartOriginRef.current = origin
|
|
}, [activeSessionId, activeSessionStartedAt])
|
|
|
|
useEffect(() => {
|
|
if (!pauseDialogOpen) {
|
|
setPauseReason(PAUSE_REASONS[0]?.value ?? "NO_CONTACT")
|
|
setPauseNote("")
|
|
setPausing(false)
|
|
}
|
|
}, [pauseDialogOpen])
|
|
|
|
const currentSessionMs = workSummary?.activeSession
|
|
? (() => {
|
|
const remoteStart = Number(workSummary.activeSession.startedAt) || 0
|
|
const effectiveStart = Math.max(remoteStart, localStartAtRef.current || 0)
|
|
const alignedNow = toServerTimestamp(now, serverOffsetRef.current)
|
|
return Math.max(0, alignedNow - effectiveStart)
|
|
})()
|
|
: 0
|
|
const totalWorkedMs = workSummary ? workSummary.totalWorkedMs + currentSessionMs : 0
|
|
const internalWorkedMs = workSummary
|
|
? workSummary.internalWorkedMs + (workSummary.activeSession?.workType === "INTERNAL" ? currentSessionMs : 0)
|
|
: 0
|
|
const externalWorkedMs = workSummary
|
|
? workSummary.externalWorkedMs + (workSummary.activeSession?.workType === "EXTERNAL" ? currentSessionMs : 0)
|
|
: 0
|
|
|
|
const formattedTotalWorked = useMemo(() => formatDuration(totalWorkedMs), [totalWorkedMs])
|
|
const updatedRelative = useMemo(
|
|
() => formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR }),
|
|
[ticket.updatedAt]
|
|
)
|
|
|
|
const handleStartWork = async (workType: "INTERNAL" | "EXTERNAL") => {
|
|
if (!convexUserId) return
|
|
toast.dismiss("work")
|
|
toast.loading("Iniciando atendimento...", { id: "work" })
|
|
try {
|
|
const result = await startWork({
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
actorId: convexUserId as Id<"users">,
|
|
workType,
|
|
})
|
|
const resultMeta = result as {
|
|
status?: string
|
|
startedAt?: number
|
|
sessionId?: Id<"ticketWorkSessions">
|
|
serverNow?: number
|
|
}
|
|
const startStatus = resultMeta?.status ?? "started"
|
|
if (startStatus === "already_started") {
|
|
toast.info("O atendimento já estava em andamento", { id: "work" })
|
|
} else {
|
|
toast.success("Atendimento iniciado", { id: "work" })
|
|
}
|
|
// Otimização local: garantir startedAt correto imediatamente
|
|
calibrateServerOffset(resultMeta?.serverNow ?? null)
|
|
const startedAtMsRaw = resultMeta?.startedAt
|
|
const startedAtMs =
|
|
typeof startedAtMsRaw === "number" && Number.isFinite(startedAtMsRaw) ? startedAtMsRaw : getServerNow()
|
|
if (typeof startedAtMsRaw === "number") {
|
|
localStartOriginRef.current = "remote"
|
|
} else if (startStatus === "already_started") {
|
|
localStartOriginRef.current = "already-running-fallback"
|
|
} else {
|
|
localStartOriginRef.current = "fresh-local"
|
|
}
|
|
localStartAtRef.current = startedAtMs
|
|
const sessionId = resultMeta?.sessionId
|
|
setWorkSummary((prev) => {
|
|
const base: WorkSummarySnapshot = prev ?? {
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
totalWorkedMs: 0,
|
|
internalWorkedMs: 0,
|
|
externalWorkedMs: 0,
|
|
serverNow: null,
|
|
activeSession: null,
|
|
perAgentTotals: [],
|
|
}
|
|
const actorId = String(convexUserId)
|
|
const existingTotals = base.perAgentTotals ?? []
|
|
const hasActorEntry = existingTotals.some((item) => item.agentId === actorId)
|
|
const updatedTotals = hasActorEntry
|
|
? existingTotals
|
|
: [
|
|
...existingTotals,
|
|
{
|
|
agentId: actorId,
|
|
agentName: viewerAgentMeta?.name ?? null,
|
|
agentEmail: viewerAgentMeta?.email ?? null,
|
|
avatarUrl: viewerAgentMeta?.avatarUrl ?? null,
|
|
totalWorkedMs: 0,
|
|
internalWorkedMs: 0,
|
|
externalWorkedMs: 0,
|
|
},
|
|
]
|
|
return {
|
|
...base,
|
|
serverNow: typeof resultMeta?.serverNow === "number" ? resultMeta.serverNow : getServerNow(),
|
|
activeSession: {
|
|
id: (sessionId as Id<"ticketWorkSessions">) ?? (base.activeSession?.id as Id<"ticketWorkSessions">),
|
|
agentId: actorId,
|
|
startedAt: startedAtMs,
|
|
workType,
|
|
},
|
|
perAgentTotals: updatedTotals,
|
|
}
|
|
})
|
|
|
|
setStatus("AWAITING_ATTENDANCE")
|
|
if (viewerAgentMeta) {
|
|
setAssigneeState((prevAssignee) => {
|
|
if (prevAssignee && prevAssignee.id === viewerAgentMeta.id) {
|
|
return prevAssignee
|
|
}
|
|
return {
|
|
id: viewerAgentMeta.id,
|
|
name: viewerAgentMeta.name ?? prevAssignee?.name ?? "Responsável",
|
|
email: viewerAgentMeta.email ?? prevAssignee?.email ?? "",
|
|
avatarUrl: viewerAgentMeta.avatarUrl ?? prevAssignee?.avatarUrl ?? undefined,
|
|
teams: prevAssignee?.teams ?? [],
|
|
}
|
|
})
|
|
setAssigneeSelection(viewerAgentMeta.id)
|
|
}
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Não foi possível atualizar o atendimento"
|
|
toast.error(message, { id: "work" })
|
|
}
|
|
}
|
|
|
|
const handlePauseConfirm = async () => {
|
|
if (!convexUserId) return
|
|
toast.dismiss("work")
|
|
toast.loading("Pausando atendimento...", { id: "work" })
|
|
setPausing(true)
|
|
try {
|
|
const result = await pauseWork({
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
actorId: convexUserId as Id<"users">,
|
|
reason: pauseReason,
|
|
note: pauseNote.trim() ? pauseNote.trim() : undefined,
|
|
})
|
|
const resultMeta = result as { status?: string; durationMs?: number; serverNow?: number }
|
|
if (resultMeta?.status === "already_paused") {
|
|
toast.info("O atendimento já estava pausado", { id: "work" })
|
|
} else {
|
|
toast.success("Atendimento pausado", { id: "work" })
|
|
}
|
|
setPauseDialogOpen(false)
|
|
// Otimização local: aplicar duração retornada no total e limpar sessão ativa
|
|
calibrateServerOffset(resultMeta?.serverNow ?? null)
|
|
const delta = typeof resultMeta?.durationMs === "number" ? resultMeta.durationMs : 0
|
|
localStartAtRef.current = 0
|
|
localStartOriginRef.current = "unknown"
|
|
setWorkSummary((prev) => {
|
|
if (!prev) return prev
|
|
const workType = prev.activeSession?.workType ?? "INTERNAL"
|
|
const sessionAgentId = prev.activeSession?.agentId ?? (viewerAgentMeta?.id ?? "")
|
|
const internalDelta = workType === "INTERNAL" ? delta : 0
|
|
const externalDelta = workType === "EXTERNAL" ? delta : 0
|
|
const updatedTotals = (() => {
|
|
if (!sessionAgentId) return prev.perAgentTotals
|
|
let found = false
|
|
const mapped = prev.perAgentTotals.map((item) => {
|
|
if (item.agentId !== sessionAgentId) return item
|
|
found = true
|
|
return {
|
|
...item,
|
|
totalWorkedMs: item.totalWorkedMs + delta,
|
|
internalWorkedMs: item.internalWorkedMs + internalDelta,
|
|
externalWorkedMs: item.externalWorkedMs + externalDelta,
|
|
}
|
|
})
|
|
if (found || delta <= 0) {
|
|
return mapped
|
|
}
|
|
return [
|
|
...mapped,
|
|
{
|
|
agentId: sessionAgentId,
|
|
agentName: viewerAgentMeta?.name ?? null,
|
|
agentEmail: viewerAgentMeta?.email ?? null,
|
|
avatarUrl: viewerAgentMeta?.avatarUrl ?? null,
|
|
totalWorkedMs: delta,
|
|
internalWorkedMs: internalDelta,
|
|
externalWorkedMs: externalDelta,
|
|
},
|
|
]
|
|
})()
|
|
return {
|
|
...prev,
|
|
totalWorkedMs: prev.totalWorkedMs + delta,
|
|
internalWorkedMs: prev.internalWorkedMs + internalDelta,
|
|
externalWorkedMs: prev.externalWorkedMs + externalDelta,
|
|
serverNow: typeof resultMeta?.serverNow === "number" ? resultMeta.serverNow : getServerNow(),
|
|
activeSession: null,
|
|
perAgentTotals: updatedTotals,
|
|
}
|
|
})
|
|
setStatus("PAUSED")
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Não foi possível atualizar o atendimento"
|
|
toast.error(message, { id: "work" })
|
|
} finally {
|
|
setPausing(false)
|
|
}
|
|
}
|
|
|
|
const handleWorkSummaryAdjusted = useCallback(
|
|
(result: AdjustWorkSummaryResult) => {
|
|
calibrateServerOffset(result?.serverNow ?? null)
|
|
setWorkSummary((prev) => {
|
|
const fallback: WorkSummarySnapshot = {
|
|
ticketId: ticket.id as Id<"tickets">,
|
|
totalWorkedMs: 0,
|
|
internalWorkedMs: 0,
|
|
externalWorkedMs: 0,
|
|
serverNow: result?.serverNow ?? null,
|
|
activeSession: null,
|
|
perAgentTotals: [],
|
|
}
|
|
const base = prev ?? fallback
|
|
return {
|
|
...base,
|
|
totalWorkedMs: result?.totalWorkedMs ?? base.totalWorkedMs,
|
|
internalWorkedMs: result?.internalWorkedMs ?? base.internalWorkedMs,
|
|
externalWorkedMs: result?.externalWorkedMs ?? base.externalWorkedMs,
|
|
serverNow: result?.serverNow ?? base.serverNow,
|
|
perAgentTotals: result?.perAgentTotals
|
|
? result.perAgentTotals.map((item) => ({
|
|
agentId: item.agentId,
|
|
agentName: item.agentName ?? null,
|
|
agentEmail: item.agentEmail ?? null,
|
|
avatarUrl: item.avatarUrl ?? null,
|
|
totalWorkedMs: item.totalWorkedMs,
|
|
internalWorkedMs: item.internalWorkedMs,
|
|
externalWorkedMs: item.externalWorkedMs,
|
|
}))
|
|
: base.perAgentTotals,
|
|
}
|
|
})
|
|
},
|
|
[calibrateServerOffset, ticket.id],
|
|
)
|
|
|
|
const handleExportPdf = useCallback(async () => {
|
|
try {
|
|
setExportingPdf(true)
|
|
toast.dismiss("ticket-export")
|
|
toast.loading("Gerando PDF...", { id: "ticket-export" })
|
|
const response = await fetch(`/api/tickets/${ticket.id}/export/pdf`, { credentials: "include" })
|
|
if (!response.ok) {
|
|
throw new Error(`failed: ${response.status}`)
|
|
}
|
|
const blob = await response.blob()
|
|
const url = URL.createObjectURL(blob)
|
|
const link = document.createElement("a")
|
|
link.href = url
|
|
link.download = `ticket-${ticket.reference}.pdf`
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
URL.revokeObjectURL(url)
|
|
toast.success("PDF exportado com sucesso!", { id: "ticket-export" })
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Não foi possível exportar o PDF.", { id: "ticket-export" })
|
|
} finally {
|
|
setExportingPdf(false)
|
|
}
|
|
}, [ticket.id, ticket.reference])
|
|
|
|
const handleReopenTicket = useCallback(async () => {
|
|
if (!viewerId) {
|
|
toast.error("Não foi possível identificar o usuário atual.")
|
|
return
|
|
}
|
|
toast.dismiss("ticket-reopen")
|
|
setIsReopening(true)
|
|
toast.loading("Reabrindo ticket...", { id: "ticket-reopen" })
|
|
try {
|
|
await reopenTicket({ ticketId: ticket.id as Id<"tickets">, actorId: viewerId as Id<"users"> })
|
|
toast.success("Ticket reaberto com sucesso!", { id: "ticket-reopen" })
|
|
setStatus("AWAITING_ATTENDANCE")
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Não foi possível reabrir o ticket.", { id: "ticket-reopen" })
|
|
} finally {
|
|
setIsReopening(false)
|
|
}
|
|
}, [reopenTicket, ticket.id, viewerId])
|
|
|
|
return (
|
|
<div id="ticket-summary-header" className={cardClass}>
|
|
<div className="absolute right-6 top-6 flex items-center gap-3">
|
|
<Button
|
|
type="button"
|
|
className="inline-flex items-center gap-2 rounded-lg border border-sidebar-border bg-sidebar-accent px-3 py-1.5 text-sm font-semibold text-sidebar-accent-foreground transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-sidebar-ring hover:bg-sidebar-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sidebar-ring)]/30 active:translate-y-0 active:border-sidebar-ring"
|
|
onClick={() => setCloseOpen(true)}
|
|
>
|
|
<CheckCircle2 className="size-4" /> Encerrar
|
|
</Button>
|
|
{workSummary ? (
|
|
<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 [&>svg]:size-5"
|
|
>
|
|
<IconClock className="size-5 text-neutral-700" /> {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}
|
|
{!editing ? (
|
|
<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
|
|
size="icon"
|
|
variant="outline"
|
|
aria-label="Exportar PDF"
|
|
className="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-800 hover:bg-slate-50"
|
|
onClick={handleExportPdf}
|
|
disabled={exportingPdf}
|
|
title="Exportar PDF"
|
|
>
|
|
{exportingPdf ? <Spinner className="size-4 text-neutral-700" /> : <IconDownload className="size-5" />}
|
|
</Button>
|
|
<DeleteTicketDialog ticketId={ticket.id as Id<"tickets">} />
|
|
</div>
|
|
<CloseTicketDialog
|
|
open={closeOpen}
|
|
onOpenChange={setCloseOpen}
|
|
ticketId={ticket.id as unknown as string}
|
|
tenantId={ticket.tenantId}
|
|
actorId={convexUserId as Id<"users"> | null}
|
|
ticketReference={ticket.reference ?? null}
|
|
requesterName={ticket.requester?.name ?? ticket.requester?.email ?? null}
|
|
agentName={agentName}
|
|
workSummary={
|
|
effectiveWorkSummary
|
|
? {
|
|
totalWorkedMs: effectiveWorkSummary.totalWorkedMs,
|
|
internalWorkedMs: effectiveWorkSummary.internalWorkedMs,
|
|
externalWorkedMs: effectiveWorkSummary.externalWorkedMs,
|
|
}
|
|
: null
|
|
}
|
|
canAdjustTime={canAdjustWork && Boolean(effectiveWorkSummary)}
|
|
onWorkSummaryAdjusted={handleWorkSummaryAdjusted}
|
|
onSuccess={() => setStatus("RESOLVED")}
|
|
/>
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="space-y-3">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Badge className={referenceBadgeClass}>#{ticket.reference}</Badge>
|
|
{isAvulso ? (
|
|
<Badge className="inline-flex h-9 items-center gap-2 rounded-full border border-rose-200 bg-rose-50 px-3 text-sm font-semibold text-rose-700">
|
|
Cliente avulso
|
|
</Badge>
|
|
) : null}
|
|
<PrioritySelect ticketId={ticket.id} value={ticket.priority} />
|
|
<StatusSelect
|
|
ticketId={ticket.id}
|
|
value={status}
|
|
tenantId={ticket.tenantId}
|
|
requesterName={ticket.requester?.name ?? ticket.requester?.email ?? null}
|
|
ticketReference={ticket.reference ?? null}
|
|
showCloseButton={false}
|
|
onStatusChange={setStatus}
|
|
/>
|
|
{canReopenTicket ? (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold text-neutral-700 hover:bg-slate-50"
|
|
onClick={handleReopenTicket}
|
|
disabled={isReopening}
|
|
>
|
|
{isReopening ? <Spinner className="size-4 text-neutral-600" /> : null}
|
|
Reabrir
|
|
</Button>
|
|
) : null}
|
|
{canReopenTicket && reopenDeadlineLabel ? (
|
|
<p className="text-xs text-neutral-500">Prazo para reabrir: {reopenDeadlineLabel}</p>
|
|
) : null}
|
|
{resolvedWithSummary ? (
|
|
<Link
|
|
href={`/tickets/${resolvedWithSummary.id}`}
|
|
className="flex items-center gap-3 rounded-2xl border border-primary/20 bg-primary/5 px-4 py-3 text-sm font-semibold text-primary-700 transition hover:border-primary hover:bg-primary/10 hover:text-primary-800"
|
|
>
|
|
<span className="flex size-9 items-center justify-center rounded-full border border-primary/30 bg-white text-primary">
|
|
<IconLink className="size-5" strokeWidth={1.7} />
|
|
</span>
|
|
<span className="flex flex-col">
|
|
<span className="text-xs font-semibold uppercase tracking-wide text-primary/70">Chamado vinculado</span>
|
|
<span className="text-sm font-semibold text-neutral-900">
|
|
{resolvedWithSummary.reference ? `#${resolvedWithSummary.reference}` : "Ver ticket"}
|
|
{resolvedWithSummary.subject ? ` · ${resolvedWithSummary.subject}` : ""}
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
) : null}
|
|
{isPlaying ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span className="inline-flex">
|
|
<Button
|
|
size="icon"
|
|
aria-label="Pausar atendimento"
|
|
className={pauseDisabled ? pauseButtonDisabledClass : pauseButtonEnabledClass}
|
|
onClick={() => {
|
|
if (!convexUserId || pauseDisabled) return
|
|
setPauseDialogOpen(true)
|
|
}}
|
|
disabled={pauseDisabled}
|
|
title="Pausar"
|
|
>
|
|
<IconPlayerPause className={pauseDisabled ? "size-4 text-neutral-500" : "size-4 text-white"} />
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
{pauseDisabled ? (
|
|
<TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
|
|
Apenas o responsável atual ou um administrador pode pausar o atendimento.
|
|
</TooltipContent>
|
|
) : null}
|
|
</Tooltip>
|
|
) : startDisabled ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span className="inline-flex">
|
|
<Button
|
|
size="icon"
|
|
aria-label="Iniciar atendimento"
|
|
className={playButtonDisabledClass}
|
|
disabled
|
|
title="Iniciar"
|
|
>
|
|
<IconPlayerPlay className="size-4 text-neutral-500" />
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
|
|
Apenas o responsável atual ou um administrador pode iniciar este atendimento.
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
aria-label="Iniciar atendimento"
|
|
className={playButtonEnabledClass}
|
|
title="Iniciar"
|
|
>
|
|
<IconPlayerPlay className="size-4 text-white" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
|
<DropdownMenuItem onSelect={() => void handleStartWork("INTERNAL")}>Iniciar (interno)</DropdownMenuItem>
|
|
<DropdownMenuItem onSelect={() => void handleStartWork("EXTERNAL")}>Iniciar (externo)</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
</div>
|
|
{editing ? (
|
|
<div className="space-y-2">
|
|
<Input
|
|
value={subject}
|
|
onChange={(e) => setSubject(e.target.value)}
|
|
className="h-10 rounded-lg border border-slate-300 text-lg font-semibold text-neutral-900"
|
|
/>
|
|
<textarea
|
|
value={summary}
|
|
onChange={(e) => {
|
|
const el = e.currentTarget
|
|
// auto-resize height based on content
|
|
el.style.height = 'auto'
|
|
el.style.height = `${el.scrollHeight}px`
|
|
setSummary(e.target.value)
|
|
}}
|
|
onInput={(e) => {
|
|
const el = e.currentTarget
|
|
el.style.height = 'auto'
|
|
el.style.height = `${el.scrollHeight}px`
|
|
}}
|
|
rows={3}
|
|
maxLength={600}
|
|
className="w-full resize-none overflow-hidden rounded-lg border border-slate-300 bg-white p-3 text-sm text-neutral-800 shadow-sm"
|
|
placeholder="Adicione um resumo opcional"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h1 className="break-words text-2xl font-semibold text-neutral-900">{subject}</h1>
|
|
{ticket.formTemplateLabel || ticket.formTemplate ? (
|
|
<span className="inline-flex items-center rounded-full border border-sky-200 bg-sky-50 px-2.5 py-0.5 text-xs font-semibold text-sky-700">
|
|
{ticket.formTemplateLabel ?? ticket.formTemplate}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{summary ? <p className="max-w-2xl text-sm text-neutral-600">{summary}</p> : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Separator className="bg-slate-200" />
|
|
<div className="grid gap-4 text-sm text-neutral-600 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>Categoria primária</span>
|
|
{editing ? (
|
|
<Select
|
|
disabled={saving || categoriesLoading || isManager}
|
|
value={selectedCategoryId ? selectedCategoryId : EMPTY_CATEGORY_VALUE}
|
|
onValueChange={(value) => {
|
|
if (isManager) return
|
|
if (value === EMPTY_CATEGORY_VALUE) {
|
|
setCategorySelection({ categoryId: "", subcategoryId: "" })
|
|
return
|
|
}
|
|
const category = categories.find((item) => item.id === value)
|
|
setCategorySelection({
|
|
categoryId: value,
|
|
subcategoryId: category?.secondary.find((option) => option.id === selectedSubcategoryId)?.id ?? "",
|
|
})
|
|
}}
|
|
>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue placeholder={categoriesLoading ? "Carregando..." : "Sem categoria"} />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
|
<SelectItem value={EMPTY_CATEGORY_VALUE}>Sem categoria</SelectItem>
|
|
{categories.map((category) => (
|
|
<SelectItem key={category.id} value={category.id}>
|
|
{category.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<span className={sectionValueClass}>{ticket.category?.name ?? "Sem categoria"}</span>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>Categoria secundária</span>
|
|
{editing ? (
|
|
<Select
|
|
disabled={
|
|
saving || categoriesLoading || !selectedCategoryId || isManager
|
|
}
|
|
value={selectedSubcategoryId ? selectedSubcategoryId : EMPTY_SUBCATEGORY_VALUE}
|
|
onValueChange={(value) => {
|
|
if (isManager) return
|
|
if (value === EMPTY_SUBCATEGORY_VALUE) {
|
|
setCategorySelection((prev) => ({ ...prev, subcategoryId: "" }))
|
|
return
|
|
}
|
|
setCategorySelection((prev) => ({ ...prev, subcategoryId: value }))
|
|
}}
|
|
>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue
|
|
placeholder={
|
|
!selectedCategoryId
|
|
? "Selecione uma primária"
|
|
: secondaryOptions.length === 0
|
|
? "Sem subcategoria"
|
|
: "Selecionar"
|
|
}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
|
<SelectItem value={EMPTY_SUBCATEGORY_VALUE}>Sem subcategoria</SelectItem>
|
|
{secondaryOptions.map((option) => (
|
|
<SelectItem key={option.id} value={option.id}>
|
|
{option.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<span className={sectionValueClass}>{ticket.subcategory?.name ?? "Sem subcategoria"}</span>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>Fila</span>
|
|
{editing ? (
|
|
<Select
|
|
disabled={isManager}
|
|
value={queueSelection}
|
|
onValueChange={(value) => {
|
|
if (isManager) return
|
|
setQueueSelection(value)
|
|
}}
|
|
>
|
|
<SelectTrigger className={smallSelectTriggerClass}>
|
|
<SelectValue placeholder="Selecionar" />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
|
{queues.map((queue) => (
|
|
<SelectItem key={queue.id} value={queue.name}>
|
|
{queue.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<span className={sectionValueClass}>{ticket.queue ?? "Sem fila"}</span>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>Empresa</span>
|
|
{editing && !isManager ? (
|
|
<SearchableCombobox
|
|
value={companySelection}
|
|
onValueChange={(value) => {
|
|
setCompanySelection(value ?? NO_COMPANY_VALUE)
|
|
}}
|
|
options={companyComboboxOptions}
|
|
placeholder="Selecionar empresa"
|
|
disabled={isManager}
|
|
renderValue={(option) =>
|
|
option ? (
|
|
<span className="truncate">{option.label}</span>
|
|
) : (
|
|
<span className="text-muted-foreground">Selecionar empresa</span>
|
|
)
|
|
}
|
|
renderOption={(option) => {
|
|
const meta = companyMeta.get(option.value)
|
|
return (
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="font-medium text-foreground">{option.label}</span>
|
|
{meta?.isAvulso ? (
|
|
<Badge variant="outline" className="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide">
|
|
Avulsa
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}}
|
|
/>
|
|
) : (
|
|
<span className={sectionValueClass}>{companyLabel}</span>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>Solicitante</span>
|
|
{editing && !isManager ? (
|
|
<div className="space-y-1.5">
|
|
<Select
|
|
value={requesterSelection ?? NO_REQUESTER_VALUE}
|
|
onValueChange={(value) => {
|
|
if (value === NO_REQUESTER_VALUE) {
|
|
setRequesterSelection(null)
|
|
} else {
|
|
setRequesterSelection(value)
|
|
}
|
|
}}
|
|
disabled={filteredCustomers.length === 0}
|
|
>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue
|
|
placeholder={filteredCustomers.length === 0 ? "Nenhum usuário disponível" : "Selecionar solicitante"}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent className="max-h-64 rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
|
{filteredCustomers.length === 0 ? (
|
|
<SelectItem value={NO_REQUESTER_VALUE} disabled>
|
|
Nenhum usuário disponível
|
|
</SelectItem>
|
|
) : (
|
|
filteredCustomers.map((customer) => (
|
|
<SelectItem key={customer.id} value={customer.id}>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{customer.name}</span>
|
|
<span className="text-xs text-neutral-500">{customer.email}</span>
|
|
</div>
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
{filteredCustomers.length === 0 ? (
|
|
<span className="text-xs text-neutral-500">Nenhum colaborador disponível para a empresa selecionada.</span>
|
|
) : null}
|
|
{requesterError ? <span className="text-xs font-semibold text-rose-600">{requesterError}</span> : null}
|
|
</div>
|
|
) : (
|
|
<span className={sectionValueClass}>{ticket.requester.name}</span>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>Responsável</span>
|
|
{editing ? (
|
|
<Select
|
|
disabled={isManager}
|
|
value={assigneeSelection}
|
|
onValueChange={(value) => {
|
|
if (isManager) return
|
|
setAssigneeSelection(value)
|
|
}}
|
|
>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue placeholder="Selecionar" />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
|
{agents.map((agent) => (
|
|
<SelectItem key={agent._id} value={agent._id}>
|
|
{agent.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<span className={sectionValueClass}>{assigneeState?.name ?? "Não atribuído"}</span>
|
|
)}
|
|
</div>
|
|
{editing && assigneeDirty ? (
|
|
<div className="flex flex-col gap-2 sm:col-span-2 lg:col-span-3">
|
|
<span className={sectionLabelClass}>Motivo da troca</span>
|
|
<Textarea
|
|
value={assigneeChangeReason}
|
|
onChange={(event) => {
|
|
setAssigneeChangeReason(event.target.value)
|
|
if (assigneeReasonError) {
|
|
setAssigneeReasonError(null)
|
|
}
|
|
}}
|
|
placeholder="Explique brevemente por que o chamado será reatribuído..."
|
|
className="min-h-[96px]"
|
|
/>
|
|
<p className="text-xs text-neutral-500">
|
|
O motivo é registrado como comentário interno visível para administradores e agentes.
|
|
</p>
|
|
{assigneeReasonError ? (
|
|
<p className="text-xs font-semibold text-rose-600">{assigneeReasonError}</p>
|
|
) : normalizedAssigneeReason.length > 0 && normalizedAssigneeReason.length < 5 ? (
|
|
<p className="text-xs font-semibold text-rose-600">Descreva o motivo com pelo menos 5 caracteres ou deixe em branco.</p>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>Criado em</span>
|
|
<span className={sectionValueClass}>{format(ticket.createdAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>Atualizado em</span>
|
|
<div className="flex items-center gap-2">
|
|
<span className={sectionValueClass}>{format(ticket.updatedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
|
|
<span className={subtleBadgeClass}>{updatedRelative}</span>
|
|
</div>
|
|
</div>
|
|
{ticket.dueAt ? (
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>SLA até</span>
|
|
<span className={sectionValueClass}>{format(ticket.dueAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
|
|
</div>
|
|
) : null}
|
|
{ticket.slaSnapshot ? (
|
|
<div className="flex flex-col gap-1">
|
|
<span className={sectionLabelClass}>Política</span>
|
|
<span className={sectionValueClass}>{ticket.slaSnapshot.categoryName ?? "Configuração personalizada"}</span>
|
|
</div>
|
|
) : null}
|
|
<TicketCustomFieldsSection ticket={ticket} variant="inline" className="sm:col-span-2 lg:col-span-3" />
|
|
{editing ? (
|
|
<div className="flex items-center justify-end gap-2 sm:col-span-2 lg:col-span-3">
|
|
<Button variant="ghost" size="sm" className="text-sm font-semibold text-neutral-700" onClick={handleCancel}>
|
|
Cancelar
|
|
</Button>
|
|
<Button size="sm" className={startButtonClass} onClick={handleSave} disabled={saveDisabled}>
|
|
Salvar
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<Dialog open={pauseDialogOpen} onOpenChange={setPauseDialogOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Registrar pausa</DialogTitle>
|
|
<DialogDescription>Informe o motivo da pausa para registrar no histórico do chamado.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<div className="space-y-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Motivo</span>
|
|
<Select value={pauseReason} onValueChange={setPauseReason}>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue placeholder="Selecione" />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
|
{PAUSE_REASONS.map((reason) => (
|
|
<SelectItem key={reason.value} value={reason.value}>
|
|
{reason.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Observações</span>
|
|
<Textarea
|
|
value={pauseNote}
|
|
onChange={(event) => setPauseNote(event.target.value)}
|
|
rows={3}
|
|
placeholder="Adicione detalhes opcionais (visível apenas internamente)."
|
|
className="min-h-[96px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setPauseDialogOpen(false)} disabled={pausing}>
|
|
Cancelar
|
|
</Button>
|
|
<Button
|
|
className={pauseButtonClass}
|
|
onClick={handlePauseConfirm}
|
|
disabled={pausing || !pauseReason}
|
|
>
|
|
{pausing ? <Spinner className="size-4 text-white" /> : "Registrar pausa"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|