+
{(displayAvatarUrl || pendingAvatarFile) && !pendingRemoveAvatar && (
)}
diff --git a/src/components/tickets/close-ticket-dialog.tsx b/src/components/tickets/close-ticket-dialog.tsx
index 06eb632..e6a7c9a 100644
--- a/src/components/tickets/close-ticket-dialog.tsx
+++ b/src/components/tickets/close-ticket-dialog.tsx
@@ -939,7 +939,6 @@ export function CloseTicketDialog({
type="button"
variant="outline"
size="icon"
- title="Limpar mensagem"
aria-label="Limpar mensagem"
onClick={() => {
setMessage("")
diff --git a/src/components/tickets/new-ticket-dialog.tsx b/src/components/tickets/new-ticket-dialog.tsx
index f8d1627..d5c5203 100644
--- a/src/components/tickets/new-ticket-dialog.tsx
+++ b/src/components/tickets/new-ticket-dialog.tsx
@@ -1416,7 +1416,6 @@ export function NewTicketDialog({
onClick={() =>
setAppliedChecklistTemplateIds((prev) => prev.filter((id) => id !== String(tpl.id)))
}
- title="Remover template"
>
×
@@ -1482,7 +1481,6 @@ export function NewTicketDialog({
size="icon"
className="h-9 w-9 text-slate-500 hover:bg-red-50 hover:text-red-700"
onClick={() => setManualChecklist((prev) => prev.filter((row) => row.id !== item.id))}
- title="Remover"
>
diff --git a/src/components/tickets/ticket-checklist-card.tsx b/src/components/tickets/ticket-checklist-card.tsx
index 45c4655..328d728 100644
--- a/src/components/tickets/ticket-checklist-card.tsx
+++ b/src/components/tickets/ticket-checklist-card.tsx
@@ -16,7 +16,6 @@ import { Checkbox } from "@/components/ui/checkbox"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Progress } from "@/components/ui/progress"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@@ -391,38 +390,39 @@ export function TicketChecklistCard({
)}
{isQuestion && options.length > 0 && (
-
{
- if (!actorId || !canToggle) return
- try {
- await setChecklistItemAnswer({
- ticketId: ticket.id as Id<"tickets">,
- actorId,
- itemId: item.id,
- answer: value,
- })
- } catch (error) {
- toast.error(error instanceof Error ? error.message : "Falha ao responder pergunta.")
- }
- }}
- disabled={!canToggle || !actorId}
- className="flex flex-wrap items-center gap-4"
- >
- {options.map((option) => (
-
- ))}
-
+
+ {options.map((option) => {
+ const isSelected = item.answer === option
+ return (
+
+ )
+ })}
+
)}
@@ -476,7 +476,6 @@ export function TicketChecklistCard({
variant="ghost"
size="icon"
className="h-9 w-9 text-slate-500 hover:bg-red-50 hover:text-red-700"
- title="Remover"
onClick={() => setDeleteTarget(item)}
>
diff --git a/src/components/tickets/ticket-comments.rich.tsx b/src/components/tickets/ticket-comments.rich.tsx
index ce095ff..9f8b44b 100644
--- a/src/components/tickets/ticket-comments.rich.tsx
+++ b/src/components/tickets/ticket-comments.rich.tsx
@@ -3,8 +3,8 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { formatDistanceToNow } from "date-fns"
import { ptBR } from "date-fns/locale"
-import { IconLock, IconMessage, IconFileText } from "@tabler/icons-react"
-import { Download, FileCode, FileIcon, Image as ImageIcon, PencilLine, Trash2, X, ClipboardCopy } from "lucide-react"
+import { IconMessage, IconFileText, IconPencil } from "@tabler/icons-react"
+import { Download, FileCode, FileIcon, Image as ImageIcon, Trash2, X, ClipboardCopy } from "lucide-react"
import { useAction, useMutation, useQuery } from "convex/react"
import { api } from "@/convex/_generated/api"
import { useAuth } from "@/lib/auth-client"
@@ -30,13 +30,15 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
import { Spinner } from "@/components/ui/spinner"
+import { cn } from "@/lib/utils"
interface TicketCommentsProps {
ticket: TicketWithDetails
}
-const badgeInternal = "gap-1 rounded-full border border-slate-300 bg-neutral-900 px-2 py-0.5 text-xs font-semibold tracking-wide text-white"
-const selectTriggerClass = "h-8 w-[140px] 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 badgeInternal = "rounded-full border border-slate-300 bg-neutral-900 px-2.5 py-0.5 text-xs font-semibold text-white"
+const badgePublic = "rounded-full border border-[#00d6eb]/40 bg-[#00e8ff]/15 px-2.5 py-0.5 text-xs font-semibold text-neutral-900"
+const selectTriggerClass = "h-8 w-[140px] 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-slate-400"
const submitButtonClass =
"inline-flex items-center gap-2 rounded-lg border border-black bg-black px-3 py-2 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
@@ -45,6 +47,64 @@ const COMMENT_ATTACHMENT_MAX_FILE_SIZE = 5 * 1024 * 1024
type CommentsOrder = "descending" | "ascending"
+// Detecta e parseia comentários automáticos de sistema
+interface SystemCommentData {
+ type: "assignee_change" | "status_change" | "priority_change" | "queue_change"
+ field: string
+ from: string
+ to: string
+ reason?: string
+}
+
+function parseSystemComment(html: string): SystemCommentData | null {
+ // Padrões de comentários automáticos
+ const patterns = [
+ { regex: /
Responsável atualizado:<\/strong>\s*([^→<]+)\s*→\s*([^<]+)/i, type: "assignee_change" as const, field: "Responsável" },
+ { regex: /Status atualizado:<\/strong>\s*([^→<]+)\s*→\s*([^<]+)/i, type: "status_change" as const, field: "Status" },
+ { regex: /Prioridade atualizada:<\/strong>\s*([^→<]+)\s*→\s*([^<]+)/i, type: "priority_change" as const, field: "Prioridade" },
+ { regex: /Fila atualizada:<\/strong>\s*([^→<]+)\s*→\s*([^<]+)/i, type: "queue_change" as const, field: "Fila" },
+ ]
+
+ for (const pattern of patterns) {
+ const match = html.match(pattern.regex)
+ if (match) {
+ // Extrair motivo se existir
+ const reasonMatch = html.match(/Motivo da troca:<\/strong><\/p>\s*([^<]+)/i)
+ return {
+ type: pattern.type,
+ field: pattern.field,
+ from: match[1].trim(),
+ to: match[2].trim(),
+ reason: reasonMatch ? reasonMatch[1].trim() : undefined,
+ }
+ }
+ }
+
+ return null
+}
+
+function SystemCommentContent({ data }: { data: SystemCommentData }) {
+ return (
+
+
+ {data.field}:
+
+ {data.from}
+
+ →
+
+ {data.to}
+
+
+ {data.reason && (
+
+ Motivo: {data.reason}
+
+ )}
+
-
-
- {initials}
-
-
-
-
{comment.author.name}
- {comment.visibility === "INTERNAL" && canSeeInternalComments ? (
-
- Interno
-
- ) : null}
-
- {formatDistanceToNow(comment.createdAt, { addSuffix: true, locale: ptBR })}
-
+
+ {/* Header */}
+
+
+
+
+ {initials}
+
+
+
+ {comment.author.name}
+ {isInternal ? (
+ Interno
+ ) : isPublic ? (
+ Público
+ ) : null}
+
+
+ {formatDistanceToNow(comment.createdAt, { addSuffix: true, locale: ptBR })}
+
+
- {isInternal ? (
-
- Comentário interno — visível apenas para administradores e agentes
-
- ) : comment.visibility === "PUBLIC" ? (
-
- Comentário visível para o cliente
-
- ) : null}
- {isEditing ? (
-
startEditingComment(commentId, storedBody)}
+ className="inline-flex size-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-600 opacity-0 transition hover:bg-slate-50 hover:text-neutral-900 group-hover/comment:opacity-100"
+ aria-label="Editar comentário"
>
+
+
+ ) : null}
+
+
+ {/* Conteúdo */}
+
+ {isEditing ? (
+
@@ -478,12 +541,14 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
disabled={savingCommentId === commentId}
placeholder="Edite o comentário..."
ticketMention={{ enabled: allowTicketMentions }}
+ className="rounded-xl border border-slate-200"
/>
-
+
- {canEdit ? (
-
- ) : null}
-
-
{
+ const systemData = parseSystemComment(storedBody)
+ if (systemData) {
+ return
}
+ return
+ })()
+ ) : canEdit ? (
+
+
{comment.attachments.map((attachment) => (
+
Atribua um responsável ao chamado para que a equipe técnica possa comentar.
)}
diff --git a/src/components/tickets/ticket-details-panel.tsx b/src/components/tickets/ticket-details-panel.tsx
index 67ab17e..563e4a9 100644
--- a/src/components/tickets/ticket-details-panel.tsx
+++ b/src/components/tickets/ticket-details-panel.tsx
@@ -1,16 +1,25 @@
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
+import { useMutation, useQuery } from "convex/react"
+import { toast } from "sonner"
+import { MonitorSmartphone } from "lucide-react"
+import { api } from "@/convex/_generated/api"
+import type { Id } from "@/convex/_generated/dataModel"
import type { TicketWithDetails } from "@/lib/schemas/ticket"
+import { useAuth } from "@/lib/auth-client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { getTicketStatusLabel, getTicketStatusSummaryTone } from "@/lib/ticket-status-style"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
import { getSlaDisplayStatus, getSlaDueDate, type SlaDisplayStatus } from "@/lib/sla-utils"
import { Button } from "@/components/ui/button"
-import { MonitorSmartphone } from "lucide-react"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useTicketRemoteAccess } from "@/hooks/use-ticket-remote-access"
+import { PrioritySelect } from "@/components/tickets/priority-select"
+import { StatusSelect } from "@/components/tickets/status-select"
interface TicketDetailsPanelProps {
ticket: TicketWithDetails
@@ -84,6 +93,7 @@ type SummaryChipConfig = {
}
export function TicketDetailsPanel({ ticket }: TicketDetailsPanelProps) {
+ const { convexUserId, isStaff } = useAuth()
const {
canShowRemoteAccess,
primaryRemoteAccess,
@@ -91,6 +101,91 @@ export function TicketDetailsPanel({ ticket }: TicketDetailsPanelProps) {
hostname: remoteHostname,
} = useTicketRemoteAccess(ticket)
+ const canEdit = isStaff && !!convexUserId
+
+ // Mutations para edição
+ const updateStatus = useMutation(api.tickets.updateStatus)
+ const updatePriority = useMutation(api.tickets.updatePriority)
+ const changeQueue = useMutation(api.tickets.changeQueue)
+ const changeAssignee = useMutation(api.tickets.changeAssignee)
+
+ // Queries para opções (só carrega se usuário é staff e pode editar)
+ const queues = useQuery(
+ api.queues.listForStaff,
+ canEdit && convexUserId ? { tenantId: ticket.tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
+ )
+ const agents = useQuery(
+ api.users.listAgents,
+ canEdit ? { tenantId: ticket.tenantId } : "skip"
+ )
+
+ // Estados para popovers
+ const [statusOpen, setStatusOpen] = useState(false)
+ const [priorityOpen, setPriorityOpen] = useState(false)
+ const [queueOpen, setQueueOpen] = useState(false)
+ const [assigneeOpen, setAssigneeOpen] = useState(false)
+
+ // Handlers de edição
+ const handleStatusChange = async (newStatus: string) => {
+ if (!convexUserId) return
+ try {
+ await updateStatus({
+ ticketId: ticket.id as Id<"tickets">,
+ actorId: convexUserId as Id<"users">,
+ status: newStatus,
+ })
+ setStatusOpen(false)
+ toast.success("Status atualizado")
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : "Erro ao atualizar status")
+ }
+ }
+
+ const handlePriorityChange = async (newPriority: string) => {
+ if (!convexUserId) return
+ try {
+ await updatePriority({
+ ticketId: ticket.id as Id<"tickets">,
+ actorId: convexUserId as Id<"users">,
+ priority: newPriority,
+ })
+ setPriorityOpen(false)
+ toast.success("Prioridade atualizada")
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : "Erro ao atualizar prioridade")
+ }
+ }
+
+ const handleQueueChange = async (newQueue: string) => {
+ if (!convexUserId) return
+ try {
+ await changeQueue({
+ ticketId: ticket.id as Id<"tickets">,
+ actorId: convexUserId as Id<"users">,
+ queueId: newQueue === "__none__" ? undefined : (newQueue as Id<"queues">),
+ })
+ setQueueOpen(false)
+ toast.success("Fila atualizada")
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : "Erro ao atualizar fila")
+ }
+ }
+
+ const handleAssigneeChange = async (newAssignee: string) => {
+ if (!convexUserId) return
+ try {
+ await changeAssignee({
+ ticketId: ticket.id as Id<"tickets">,
+ actorId: convexUserId as Id<"users">,
+ assigneeId: newAssignee === "__none__" ? undefined : (newAssignee as Id<"users">),
+ })
+ setAssigneeOpen(false)
+ toast.success("Responsável atualizado")
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : "Erro ao atualizar responsável")
+ }
+ }
+
const isAvulso = Boolean(ticket.company?.isAvulso)
const companyLabel = ticket.company?.name ?? (isAvulso ? "Cliente avulso" : "Sem empresa vinculada")
const responseStatus = getSlaDisplayStatus(ticket, "response")
@@ -177,9 +272,153 @@ export function TicketDetailsPanel({ ticket }: TicketDetailsPanelProps) {
Resumo
- {summaryChips.map(({ key, label, value, tone, labelClassName }) => (
-
- ))}
+ {/* Fila - editável */}
+ {canEdit ? (
+
+
+
+
+
+
+
Alterar fila
+
+
+ ) : (
+
+ )}
+
+ {/* Empresa - não editável */}
+
+
+ {/* Status - editável */}
+ {canEdit ? (
+
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+ {/* Prioridade - editável */}
+ {canEdit ? (
+
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+ {/* Responsável - editável */}
+ {canEdit ? (
+
+
+
+
+
+
+
Alterar responsavel
+
+
+ ) : (
+
+ )}
+
+ {/* Fluxo - não editável */}
+ {ticket.formTemplateLabel && (
+
+ )}
+
diff --git a/src/lib/auth-client.tsx b/src/lib/auth-client.tsx
index 37e3202..d78d96d 100644
--- a/src/lib/auth-client.tsx
+++ b/src/lib/auth-client.tsx
@@ -87,7 +87,21 @@ export function useAuth() {
return useContext(AuthContext)
}
-export const { signIn, signOut, useSession } = authClient
+export const { signIn, signOut, useSession, $Infer, getSession, ...authClientRest } = authClient
+
+/**
+ * Força atualização da sessão (útil após alterar dados do usuário como avatar)
+ * Retorna a nova sessão ou null
+ */
+export async function refreshSession(): Promise
{
+ try {
+ // getSession do Better Auth busca a sessão atualizada do servidor
+ const result = await getSession({ fetchOptions: { cache: "no-store" } })
+ return result?.data ?? null
+ } catch {
+ return null
+ }
+}
export function AuthProvider({ children }: { children: React.ReactNode }) {
const devBypass = process.env.NODE_ENV !== "production" && process.env.NEXT_PUBLIC_DEV_BYPASS_AUTH === "1"