824 lines
38 KiB
TypeScript
824 lines
38 KiB
TypeScript
"use client"
|
|
|
|
import { z } from "zod"
|
|
import { useEffect, useMemo, useState } from "react"
|
|
import type { Doc, Id } from "@/convex/_generated/dataModel"
|
|
import type { TicketPriority, TicketQueueSummary } from "@/lib/schemas/ticket"
|
|
import { useMutation, useQuery } from "convex/react"
|
|
import { api } from "@/convex/_generated/api"
|
|
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { FieldSet, FieldGroup, Field, FieldLabel, FieldError } from "@/components/ui/field"
|
|
import { useForm } from "react-hook-form"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { toast } from "sonner"
|
|
import { Spinner } from "@/components/ui/spinner"
|
|
import { Dropzone } from "@/components/ui/dropzone"
|
|
import { RichTextEditor, sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
|
|
import { PriorityIcon, priorityStyles } from "@/components/tickets/priority-select"
|
|
import { CategorySelectFields } from "@/components/tickets/category-select"
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
|
|
import { useDefaultQueues } from "@/hooks/use-default-queues"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type CustomerOption = {
|
|
id: string
|
|
name: string
|
|
email: string
|
|
role: string
|
|
companyId: string | null
|
|
companyName: string | null
|
|
companyIsAvulso: boolean
|
|
avatarUrl: string | null
|
|
}
|
|
|
|
function getInitials(name: string | null | undefined, fallback: string): string {
|
|
const normalizedName = (name ?? "").trim()
|
|
if (normalizedName.length > 0) {
|
|
const parts = normalizedName.split(/\s+/).slice(0, 2)
|
|
const initials = parts.map((part) => part.charAt(0).toUpperCase()).join("")
|
|
if (initials.length > 0) {
|
|
return initials
|
|
}
|
|
}
|
|
const normalizedFallback = (fallback ?? "").trim()
|
|
return normalizedFallback.length > 0 ? normalizedFallback.charAt(0).toUpperCase() : "?"
|
|
}
|
|
|
|
type RequesterPreviewProps = {
|
|
customer: CustomerOption | null
|
|
company: { id: string; name: string; isAvulso?: boolean } | null
|
|
}
|
|
|
|
function RequesterPreview({ customer, company }: RequesterPreviewProps) {
|
|
if (!customer) {
|
|
return (
|
|
<div className="mb-3 rounded-xl border border-dashed border-border/80 bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
|
|
Selecione um solicitante para visualizar os detalhes aqui.
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const initials = getInitials(customer.name, customer.email)
|
|
const companyLabel = customer.companyName ?? company?.name ?? "Sem empresa"
|
|
|
|
return (
|
|
<div className="mb-3 flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 shadow-sm">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="size-9 border border-border/60 bg-white text-sm font-semibold uppercase">
|
|
<AvatarFallback>{initials}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="min-w-0 space-y-0.5">
|
|
<p className="truncate font-semibold text-foreground">{customer.name || customer.email}</p>
|
|
<p className="truncate text-xs text-muted-foreground">{customer.email}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="outline" className="rounded-full border-slate-200 px-2.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
|
|
{companyLabel}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const NO_COMPANY_VALUE = "__no_company__"
|
|
const AUTO_COMPANY_VALUE = "__auto__"
|
|
|
|
const schema = z.object({
|
|
subject: z.string().default(""),
|
|
summary: z.string().optional(),
|
|
description: z.string().default(""),
|
|
priority: z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).default("MEDIUM"),
|
|
channel: z.enum(["EMAIL", "WHATSAPP", "CHAT", "PHONE", "API", "MANUAL"]).default("MANUAL"),
|
|
queueName: z.string().nullable().optional(),
|
|
assigneeId: z.string().nullable().optional(),
|
|
companyId: z.string().optional(),
|
|
requesterId: z.string().min(1, "Selecione um solicitante"),
|
|
categoryId: z.string().min(1, "Selecione uma categoria"),
|
|
subcategoryId: z.string().min(1, "Selecione uma categoria secundária"),
|
|
})
|
|
|
|
export function NewTicketDialog({ triggerClassName }: { triggerClassName?: string } = {}) {
|
|
const [open, setOpen] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const form = useForm<z.infer<typeof schema>>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: {
|
|
subject: "",
|
|
summary: "",
|
|
description: "",
|
|
priority: "MEDIUM",
|
|
channel: "MANUAL",
|
|
queueName: null,
|
|
assigneeId: null,
|
|
companyId: AUTO_COMPANY_VALUE,
|
|
requesterId: "",
|
|
categoryId: "",
|
|
subcategoryId: "",
|
|
},
|
|
mode: "onTouched",
|
|
})
|
|
const { convexUserId, isStaff, role } = useAuth()
|
|
const queuesEnabled = Boolean(isStaff && convexUserId)
|
|
const queueArgs = queuesEnabled
|
|
? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
|
|
: "skip"
|
|
|
|
useDefaultQueues(DEFAULT_TENANT_ID)
|
|
const queuesRaw = useQuery(
|
|
queuesEnabled ? api.queues.summary : "skip",
|
|
queueArgs
|
|
) as TicketQueueSummary[] | undefined
|
|
const queues = useMemo(() => queuesRaw ?? [], [queuesRaw])
|
|
const create = useMutation(api.tickets.create)
|
|
const addComment = useMutation(api.tickets.addComment)
|
|
const staffRaw = useQuery(api.users.listAgents, { tenantId: DEFAULT_TENANT_ID }) as Doc<"users">[] | undefined
|
|
const staff = useMemo(
|
|
() => (staffRaw ?? []).sort((a, b) => a.name.localeCompare(b.name, "pt-BR")),
|
|
[staffRaw]
|
|
)
|
|
|
|
const directoryQueryEnabled = queuesEnabled && Boolean(convexUserId)
|
|
const companiesRaw = useQuery(
|
|
directoryQueryEnabled ? api.companies.list : "skip",
|
|
directoryQueryEnabled
|
|
? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
|
|
: "skip"
|
|
) as Array<{ id: string; name: string; slug?: string | null }> | undefined
|
|
const companies = useMemo(
|
|
() =>
|
|
(companiesRaw ?? []).map((company) => ({
|
|
id: String(company.id),
|
|
name: company.name,
|
|
slug: company.slug ?? null,
|
|
})),
|
|
[companiesRaw]
|
|
)
|
|
|
|
const customersRaw = useQuery(
|
|
directoryQueryEnabled ? api.users.listCustomers : "skip",
|
|
directoryQueryEnabled
|
|
? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
|
|
: "skip"
|
|
) as CustomerOption[] | undefined
|
|
const customers = useMemo(() => customersRaw ?? [], [customersRaw])
|
|
const [attachments, setAttachments] = useState<Array<{ storageId: string; name: string; size?: number; type?: string }>>([])
|
|
const [customersInitialized, setCustomersInitialized] = useState(false)
|
|
const attachmentsTotalBytes = useMemo(
|
|
() => attachments.reduce((acc, item) => acc + (item.size ?? 0), 0),
|
|
[attachments]
|
|
)
|
|
const priorityValue = form.watch("priority") as TicketPriority
|
|
const channelValue = form.watch("channel")
|
|
const queueValue = form.watch("queueName") ?? "NONE"
|
|
const assigneeValue = form.watch("assigneeId") ?? null
|
|
const assigneeSelectValue = assigneeValue ?? "NONE"
|
|
const companyValue = form.watch("companyId") ?? AUTO_COMPANY_VALUE
|
|
const requesterValue = form.watch("requesterId") ?? ""
|
|
const categoryIdValue = form.watch("categoryId")
|
|
const subcategoryIdValue = form.watch("subcategoryId")
|
|
const isSubmitted = form.formState.isSubmitted
|
|
const companyOptions = useMemo(() => {
|
|
const map = new Map<string, { id: string; name: string; isAvulso?: boolean; keywords: string[] }>()
|
|
companies.forEach((company) => {
|
|
map.set(company.id, {
|
|
id: company.id,
|
|
name: company.name.trim().length > 0 ? company.name : "Empresa sem nome",
|
|
isAvulso: false,
|
|
keywords: company.slug ? [company.slug] : [],
|
|
})
|
|
})
|
|
customers.forEach((customer) => {
|
|
if (customer.companyId && !map.has(customer.companyId)) {
|
|
map.set(customer.companyId, {
|
|
id: customer.companyId,
|
|
name: customer.companyName && customer.companyName.trim().length > 0 ? customer.companyName : "Empresa sem nome",
|
|
isAvulso: customer.companyIsAvulso,
|
|
keywords: [],
|
|
})
|
|
}
|
|
})
|
|
const base: Array<{ id: string; name: string; isAvulso?: boolean; keywords: string[] }> = [
|
|
{ id: NO_COMPANY_VALUE, name: "Sem empresa", keywords: ["sem empresa", "nenhuma"], isAvulso: false },
|
|
]
|
|
const sorted = Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
|
return [...base, ...sorted]
|
|
}, [companies, customers])
|
|
|
|
const filteredCustomers = useMemo(() => {
|
|
if (companyValue === AUTO_COMPANY_VALUE) return customers
|
|
if (companyValue === NO_COMPANY_VALUE) {
|
|
return customers.filter((customer) => !customer.companyId)
|
|
}
|
|
return customers.filter((customer) => customer.companyId === companyValue)
|
|
}, [companyValue, customers])
|
|
|
|
const companyOptionMap = useMemo(
|
|
() => new Map(companyOptions.map((option) => [option.id, option])),
|
|
[companyOptions],
|
|
)
|
|
|
|
const companyComboboxOptions = useMemo<SearchableComboboxOption[]>(
|
|
() =>
|
|
companyOptions.map((option) => ({
|
|
value: option.id,
|
|
label: option.name,
|
|
description: option.isAvulso ? "Empresa avulsa" : undefined,
|
|
keywords: option.keywords,
|
|
})),
|
|
[companyOptions],
|
|
)
|
|
|
|
const selectedCompanyOption = useMemo(() => {
|
|
if (companyValue === AUTO_COMPANY_VALUE) return null
|
|
const key = companyValue === NO_COMPANY_VALUE ? NO_COMPANY_VALUE : companyValue
|
|
return companyOptionMap.get(key) ?? null
|
|
}, [companyOptionMap, companyValue])
|
|
|
|
const requesterById = useMemo(
|
|
() => new Map(customers.map((customer) => [customer.id, customer])),
|
|
[customers],
|
|
)
|
|
|
|
const selectedRequester = requesterById.get(requesterValue) ?? null
|
|
|
|
const requesterComboboxOptions = useMemo<SearchableComboboxOption[]>(
|
|
() =>
|
|
filteredCustomers.map((customer) => ({
|
|
value: customer.id,
|
|
label: customer.name && customer.name.trim().length > 0 ? customer.name : customer.email,
|
|
description: customer.email,
|
|
keywords: [
|
|
customer.email.toLowerCase(),
|
|
customer.companyName?.toLowerCase?.() ?? "",
|
|
customer.name?.toLowerCase?.() ?? "",
|
|
].filter(Boolean),
|
|
})),
|
|
[filteredCustomers],
|
|
)
|
|
|
|
const selectTriggerClass = "flex h-8 w-full items-center justify-between rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
|
|
const selectItemClass = "flex items-center gap-2 rounded-md px-2 py-2 text-sm text-neutral-800 transition data-[state=checked]:bg-[#00e8ff]/15 data-[state=checked]:text-neutral-900 focus:bg-[#00e8ff]/10"
|
|
const [assigneeInitialized, setAssigneeInitialized] = useState(false)
|
|
const allowTicketMentions = useMemo(() => {
|
|
const normalized = (role ?? "").toLowerCase()
|
|
return normalized === "admin" || normalized === "agent" || normalized === "collaborator"
|
|
}, [role])
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
setCustomersInitialized(false)
|
|
form.setValue("companyId", AUTO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
|
form.setValue("requesterId", "", { shouldDirty: false, shouldTouch: false })
|
|
return
|
|
}
|
|
if (customersInitialized) return
|
|
if (!customers.length) return
|
|
let initialRequester = form.getValues("requesterId")
|
|
if (!initialRequester || !customers.some((customer) => customer.id === initialRequester)) {
|
|
if (convexUserId && customers.some((customer) => customer.id === convexUserId)) {
|
|
initialRequester = convexUserId
|
|
} else {
|
|
initialRequester = customers[0].id
|
|
}
|
|
}
|
|
const selected = customers.find((customer) => customer.id === initialRequester) ?? null
|
|
form.setValue("requesterId", initialRequester ?? "", { shouldDirty: false, shouldTouch: false })
|
|
if (selected?.companyId) {
|
|
form.setValue("companyId", selected.companyId, { shouldDirty: false, shouldTouch: false })
|
|
} else {
|
|
form.setValue("companyId", selected ? NO_COMPANY_VALUE : AUTO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
|
}
|
|
setCustomersInitialized(true)
|
|
}, [open, customersInitialized, customers, convexUserId, form])
|
|
|
|
useEffect(() => {
|
|
if (!open || !customersInitialized) return
|
|
const options = filteredCustomers
|
|
if (options.length === 0) {
|
|
if (requesterValue !== "") {
|
|
form.setValue("requesterId", "", {
|
|
shouldDirty: true,
|
|
shouldTouch: true,
|
|
shouldValidate: form.formState.isSubmitted,
|
|
})
|
|
}
|
|
return
|
|
}
|
|
if (!options.some((customer) => customer.id === requesterValue)) {
|
|
form.setValue("requesterId", options[0].id, {
|
|
shouldDirty: true,
|
|
shouldTouch: true,
|
|
shouldValidate: form.formState.isSubmitted,
|
|
})
|
|
}
|
|
}, [open, customersInitialized, filteredCustomers, requesterValue, form])
|
|
|
|
useEffect(() => {
|
|
if (requesterValue && form.formState.errors.requesterId) {
|
|
form.clearErrors("requesterId")
|
|
}
|
|
}, [requesterValue, form])
|
|
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
setAssigneeInitialized(false)
|
|
return
|
|
}
|
|
if (assigneeInitialized) return
|
|
if (!convexUserId) return
|
|
form.setValue("assigneeId", convexUserId, { shouldDirty: false, shouldTouch: false })
|
|
setAssigneeInitialized(true)
|
|
}, [open, assigneeInitialized, convexUserId, form])
|
|
|
|
// Default queue to "Chamados" if available when opening
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const current = form.getValues("queueName")
|
|
if (current) return
|
|
const hasChamados = queues.some((q) => q.name === "Chamados")
|
|
if (hasChamados) {
|
|
form.setValue("queueName", "Chamados", { shouldDirty: false, shouldTouch: false })
|
|
}
|
|
}, [open, queues, form])
|
|
|
|
const handleCategoryChange = (value: string) => {
|
|
const previous = form.getValues("categoryId") ?? ""
|
|
const next = value ?? ""
|
|
form.setValue("categoryId", next, {
|
|
shouldDirty: previous !== next && previous !== "",
|
|
shouldTouch: true,
|
|
shouldValidate: isSubmitted,
|
|
})
|
|
if (!isSubmitted) {
|
|
form.clearErrors("categoryId")
|
|
}
|
|
}
|
|
|
|
const handleSubcategoryChange = (value: string) => {
|
|
const previous = form.getValues("subcategoryId") ?? ""
|
|
const next = value ?? ""
|
|
form.setValue("subcategoryId", next, {
|
|
shouldDirty: previous !== next && previous !== "",
|
|
shouldTouch: true,
|
|
shouldValidate: isSubmitted,
|
|
})
|
|
if (!isSubmitted) {
|
|
form.clearErrors("subcategoryId")
|
|
}
|
|
}
|
|
|
|
async function submit(values: z.infer<typeof schema>) {
|
|
if (!convexUserId) return
|
|
|
|
const subjectTrimmed = (values.subject ?? "").trim()
|
|
if (subjectTrimmed.length < 3) {
|
|
form.setError("subject", { type: "min", message: "Informe um assunto com pelo menos 3 caracteres." })
|
|
return
|
|
}
|
|
|
|
const sanitizedDescription = sanitizeEditorHtml(values.description ?? "")
|
|
const plainDescription = sanitizedDescription.replace(/<[^>]*>/g, "").trim()
|
|
if (plainDescription.length === 0) {
|
|
form.setError("description", { type: "custom", message: "Descreva o contexto do chamado." })
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
toast.loading("Criando ticket…", { id: "new-ticket" })
|
|
try {
|
|
const sel = queues.find((q) => q.name === values.queueName)
|
|
const selectedAssignee = form.getValues("assigneeId") ?? null
|
|
const requesterToSend = values.requesterId as Id<"users">
|
|
const id = await create({
|
|
actorId: convexUserId as Id<"users">,
|
|
tenantId: DEFAULT_TENANT_ID,
|
|
subject: subjectTrimmed,
|
|
summary: values.summary?.trim() || undefined,
|
|
priority: values.priority,
|
|
channel: values.channel,
|
|
queueId: sel?.id as Id<"queues"> | undefined,
|
|
requesterId: requesterToSend,
|
|
assigneeId: selectedAssignee ? (selectedAssignee as Id<"users">) : undefined,
|
|
categoryId: values.categoryId as Id<"ticketCategories">,
|
|
subcategoryId: values.subcategoryId as Id<"ticketSubcategories">,
|
|
})
|
|
const summaryFallback = values.summary?.trim() ?? ""
|
|
const bodyHtml = plainDescription.length > 0 ? sanitizedDescription : summaryFallback
|
|
const MAX_COMMENT_CHARS = 20000
|
|
const plainForLimit = (plainDescription.length > 0 ? plainDescription : summaryFallback).trim()
|
|
if (plainForLimit.length > MAX_COMMENT_CHARS) {
|
|
toast.error(`Descrição muito longa (máx. ${MAX_COMMENT_CHARS} caracteres)`, { id: "new-ticket" })
|
|
setLoading(false)
|
|
return
|
|
}
|
|
if (attachments.length > 0 || bodyHtml.trim().length > 0) {
|
|
const typedAttachments = attachments.map((a) => ({
|
|
storageId: a.storageId as unknown as Id<"_storage">,
|
|
name: a.name,
|
|
size: a.size,
|
|
type: a.type,
|
|
}))
|
|
await addComment({ ticketId: id as Id<"tickets">, authorId: convexUserId as Id<"users">, visibility: "INTERNAL", body: bodyHtml, attachments: typedAttachments })
|
|
}
|
|
toast.success("Ticket criado!", { id: "new-ticket" })
|
|
setOpen(false)
|
|
form.reset({
|
|
subject: "",
|
|
summary: "",
|
|
description: "",
|
|
priority: "MEDIUM",
|
|
channel: "MANUAL",
|
|
queueName: null,
|
|
assigneeId: convexUserId ?? null,
|
|
categoryId: "",
|
|
subcategoryId: "",
|
|
})
|
|
form.clearErrors()
|
|
setAssigneeInitialized(false)
|
|
setAttachments([])
|
|
// Navegar para o ticket recém-criado
|
|
window.location.href = `/tickets/${id}`
|
|
} catch {
|
|
toast.error("Não foi possível criar o ticket.", { id: "new-ticket" })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
size="sm"
|
|
className={cn(
|
|
"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",
|
|
triggerClassName
|
|
)}
|
|
>
|
|
Novo ticket
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-4xl gap-0 overflow-hidden rounded-3xl border border-slate-200 bg-white p-0 shadow-2xl lg:max-w-5xl">
|
|
<div className="max-h-[88vh] overflow-y-auto">
|
|
<div className="space-y-5 px-6 py-7 sm:px-8 md:px-10">
|
|
<form className="space-y-6" onSubmit={form.handleSubmit(submit)}>
|
|
<div className="flex flex-col gap-4 border-b border-slate-200 pb-5 md:flex-row md:items-start md:justify-between">
|
|
<DialogHeader className="gap-1.5 p-0">
|
|
<DialogTitle className="text-xl font-semibold text-neutral-900">Novo ticket</DialogTitle>
|
|
<DialogDescription className="text-sm text-neutral-600">
|
|
Preencha as informações básicas para abrir um chamado.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex justify-end md:min-w-[140px]">
|
|
<Button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="inline-flex items-center gap-2 rounded-lg border border-black bg-black px-4 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 disabled:opacity-60"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Spinner className="me-2" /> Criando…
|
|
</>
|
|
) : (
|
|
"Criar"
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<FieldSet>
|
|
<FieldGroup className="lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
|
|
<div className="space-y-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="subject" className="flex items-center gap-1">
|
|
Assunto <span className="text-destructive">*</span>
|
|
</FieldLabel>
|
|
<Input id="subject" {...form.register("subject")} placeholder="Ex.: Erro 500 no portal" />
|
|
<FieldError errors={form.formState.errors.subject ? [{ message: form.formState.errors.subject.message }] : []} />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="summary">Resumo</FieldLabel>
|
|
<textarea
|
|
id="summary"
|
|
className="min-h-[96px] w-full resize-none overflow-hidden rounded-lg border border-slate-300 bg-background p-3 text-sm shadow-sm focus-visible:border-[#00d6eb] focus-visible:outline-none"
|
|
maxLength={600}
|
|
{...form.register("summary")}
|
|
placeholder="Explique em poucas linhas o contexto do chamado."
|
|
onInput={(e) => {
|
|
const el = e.currentTarget
|
|
el.style.height = 'auto'
|
|
el.style.height = `${el.scrollHeight}px`
|
|
}}
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel className="flex items-center gap-1">
|
|
Descrição <span className="text-destructive">*</span>
|
|
</FieldLabel>
|
|
<RichTextEditor
|
|
value={form.watch("description") || ""}
|
|
onChange={(html) =>
|
|
form.setValue("description", html, {
|
|
shouldDirty: true,
|
|
shouldTouch: true,
|
|
shouldValidate: form.formState.isSubmitted,
|
|
})
|
|
}
|
|
placeholder="Detalhe o problema, passos para reproduzir, links, etc."
|
|
ticketMention={{ enabled: allowTicketMentions }}
|
|
/>
|
|
<FieldError
|
|
errors={
|
|
form.formState.errors.description
|
|
? [{ message: form.formState.errors.description.message }]
|
|
: []
|
|
}
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Anexos</FieldLabel>
|
|
<Dropzone
|
|
onUploaded={(files) => setAttachments((prev) => [...prev, ...files])}
|
|
className="space-y-1.5 [&>div:first-child]:rounded-2xl [&>div:first-child]:p-4 [&>div:first-child]:pb-5 [&>div:first-child]:shadow-sm"
|
|
currentFileCount={attachments.length}
|
|
currentTotalBytes={attachmentsTotalBytes}
|
|
/>
|
|
<FieldError className="mt-1">Formatos comuns de imagem e documentos são aceitos.</FieldError>
|
|
</Field>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<Field>
|
|
<FieldLabel>Empresa</FieldLabel>
|
|
<SearchableCombobox
|
|
value={companyValue === AUTO_COMPANY_VALUE ? null : companyValue}
|
|
onValueChange={(nextValue) => {
|
|
const normalizedValue = nextValue ?? AUTO_COMPANY_VALUE
|
|
const nextCustomers =
|
|
normalizedValue === AUTO_COMPANY_VALUE
|
|
? customers
|
|
: normalizedValue === NO_COMPANY_VALUE
|
|
? customers.filter((customer) => !customer.companyId)
|
|
: customers.filter((customer) => customer.companyId === normalizedValue)
|
|
form.setValue("companyId", normalizedValue, {
|
|
shouldDirty: normalizedValue !== companyValue,
|
|
shouldTouch: true,
|
|
})
|
|
if (nextCustomers.length === 0) {
|
|
form.setValue("requesterId", "", {
|
|
shouldDirty: true,
|
|
shouldTouch: true,
|
|
shouldValidate: form.formState.isSubmitted,
|
|
})
|
|
} else if (!nextCustomers.some((customer) => customer.id === requesterValue)) {
|
|
const fallbackRequester = nextCustomers[0]
|
|
form.setValue("requesterId", fallbackRequester.id, {
|
|
shouldDirty: true,
|
|
shouldTouch: true,
|
|
shouldValidate: form.formState.isSubmitted,
|
|
})
|
|
}
|
|
}}
|
|
options={companyComboboxOptions}
|
|
placeholder="Selecionar empresa"
|
|
allowClear
|
|
clearLabel="Qualquer empresa"
|
|
renderValue={(option) =>
|
|
option ? (
|
|
<span className="truncate">{option.label}</span>
|
|
) : (
|
|
<span className="text-muted-foreground">Selecionar empresa</span>
|
|
)
|
|
}
|
|
renderOption={(option) => {
|
|
const meta = companyOptionMap.get(option.value)
|
|
return (
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex flex-col">
|
|
<span className="font-medium text-foreground">{option.label}</span>
|
|
{meta?.keywords?.length ? (
|
|
<span className="text-xs text-muted-foreground">{meta.keywords[0]}</span>
|
|
) : null}
|
|
</div>
|
|
{meta?.isAvulso ? (
|
|
<Badge variant="outline" className="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide">
|
|
Avulsa
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}}
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel className="flex items-center gap-1">
|
|
Solicitante <span className="text-destructive">*</span>
|
|
</FieldLabel>
|
|
<RequesterPreview customer={selectedRequester} company={selectedCompanyOption} />
|
|
<SearchableCombobox
|
|
value={requesterValue || null}
|
|
onValueChange={(nextValue) => {
|
|
if (nextValue === null) {
|
|
form.setValue("requesterId", "", {
|
|
shouldDirty: true,
|
|
shouldTouch: true,
|
|
shouldValidate: form.formState.isSubmitted,
|
|
})
|
|
return
|
|
}
|
|
if (nextValue !== requesterValue) {
|
|
form.setValue("requesterId", nextValue, {
|
|
shouldDirty: true,
|
|
shouldTouch: true,
|
|
shouldValidate: form.formState.isSubmitted,
|
|
})
|
|
}
|
|
const selection = requesterById.get(nextValue)
|
|
if (selection) {
|
|
const nextCompanyId = selection.companyId ?? NO_COMPANY_VALUE
|
|
if (nextCompanyId !== companyValue) {
|
|
form.setValue("companyId", nextCompanyId, {
|
|
shouldDirty: true,
|
|
shouldTouch: true,
|
|
})
|
|
}
|
|
}
|
|
}}
|
|
options={requesterComboboxOptions}
|
|
placeholder={filteredCustomers.length === 0 ? "Nenhum usuário disponível" : "Selecionar solicitante"}
|
|
searchPlaceholder="Buscar por nome ou e-mail..."
|
|
disabled={filteredCustomers.length === 0}
|
|
renderValue={(option) =>
|
|
option ? (
|
|
<div className="flex flex-col">
|
|
<span className="truncate font-medium text-foreground">{option.label}</span>
|
|
{option.description ? (
|
|
<span className="truncate text-xs text-muted-foreground">{option.description}</span>
|
|
) : null}
|
|
</div>
|
|
) : (
|
|
<span className="text-muted-foreground">Selecionar solicitante</span>
|
|
)
|
|
}
|
|
renderOption={(option) => {
|
|
const record = requesterById.get(option.value)
|
|
const initials = getInitials(record?.name, record?.email ?? option.label)
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="size-8 border border-border/60">
|
|
<AvatarFallback className="text-xs font-semibold uppercase">{initials}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate font-medium text-foreground">{option.label}</p>
|
|
<p className="truncate text-xs text-muted-foreground">{record?.email ?? option.description}</p>
|
|
</div>
|
|
{record?.companyName ? (
|
|
<Badge variant="outline" className="hidden rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide md:inline-flex">
|
|
{record.companyName}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}}
|
|
/>
|
|
{filteredCustomers.length === 0 ? (
|
|
<FieldError className="mt-1">Nenhum colaborador disponível para a empresa selecionada.</FieldError>
|
|
) : null}
|
|
<FieldError
|
|
errors={
|
|
form.formState.errors.requesterId
|
|
? [{ message: form.formState.errors.requesterId.message }]
|
|
: []
|
|
}
|
|
/>
|
|
</Field>
|
|
|
|
<Field>
|
|
<CategorySelectFields
|
|
tenantId={DEFAULT_TENANT_ID}
|
|
categoryId={categoryIdValue || null}
|
|
subcategoryId={subcategoryIdValue || null}
|
|
onCategoryChange={handleCategoryChange}
|
|
onSubcategoryChange={handleSubcategoryChange}
|
|
categoryLabel="Categoria primária *"
|
|
subcategoryLabel="Categoria secundária *"
|
|
layout="stacked"
|
|
/>
|
|
{form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (
|
|
<FieldError className="mt-1 space-y-0.5">
|
|
<>
|
|
{form.formState.errors.categoryId?.message ? <div>{form.formState.errors.categoryId?.message}</div> : null}
|
|
{form.formState.errors.subcategoryId?.message ? <div>{form.formState.errors.subcategoryId?.message}</div> : null}
|
|
</>
|
|
</FieldError>
|
|
) : null}
|
|
</Field>
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1 xl:gap-4">
|
|
<Field>
|
|
<FieldLabel>Prioridade</FieldLabel>
|
|
<Select value={priorityValue} onValueChange={(v) => form.setValue("priority", v as z.infer<typeof schema>["priority"])}>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue placeholder="Escolha a prioridade" />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
|
{(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
|
|
<SelectItem key={option} value={option} className={selectItemClass}>
|
|
<span className="inline-flex items-center gap-2">
|
|
<PriorityIcon value={option} />
|
|
{priorityStyles[option].label}
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Canal</FieldLabel>
|
|
<Select value={channelValue} onValueChange={(v) => form.setValue("channel", v as z.infer<typeof schema>["channel"])}>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue placeholder="Canal" />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
|
<SelectItem value="EMAIL" className={selectItemClass}>
|
|
E-mail
|
|
</SelectItem>
|
|
<SelectItem value="WHATSAPP" className={selectItemClass}>
|
|
WhatsApp
|
|
</SelectItem>
|
|
<SelectItem value="CHAT" className={selectItemClass}>
|
|
Chat
|
|
</SelectItem>
|
|
<SelectItem value="PHONE" className={selectItemClass}>
|
|
Telefone
|
|
</SelectItem>
|
|
<SelectItem value="API" className={selectItemClass}>
|
|
API
|
|
</SelectItem>
|
|
<SelectItem value="MANUAL" className={selectItemClass}>
|
|
Manual
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Fila</FieldLabel>
|
|
<Select value={queueValue} onValueChange={(v) => form.setValue("queueName", v === "NONE" ? null : v)}>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue placeholder="Sem fila" />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
|
<SelectItem value="NONE" className={selectItemClass}>
|
|
Sem fila
|
|
</SelectItem>
|
|
{queues.map((q) => (
|
|
<SelectItem key={q.id} value={q.name} className={selectItemClass}>
|
|
{q.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Responsável</FieldLabel>
|
|
<Select
|
|
value={assigneeSelectValue}
|
|
onValueChange={(value) =>
|
|
form.setValue("assigneeId", value === "NONE" ? null : value, {
|
|
shouldDirty: value !== assigneeValue,
|
|
shouldTouch: true,
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue placeholder={staff.length === 0 ? "Carregando..." : "Selecione o responsável"} />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
|
<SelectItem value="NONE" className={selectItemClass}>
|
|
Sem responsável
|
|
</SelectItem>
|
|
{staff.map((member) => (
|
|
<SelectItem key={member._id} value={member._id} className={selectItemClass}>
|
|
{member.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
</div>
|
|
</div>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|