Permite selecionar solicitante e empresa nos tickets
This commit is contained in:
codex-bot
parent
25321224a6
commit
4aee7d7719
6 changed files with 817 additions and 11 deletions
|
|
@ -98,6 +98,21 @@ const PAUSE_REASONS = [
|
|||
{ value: "IN_PROCEDURE", label: "Em procedimento" },
|
||||
]
|
||||
|
||||
type CustomerOption = {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
role: string
|
||||
companyId: string | null
|
||||
companyName: string | null
|
||||
companyIsAvulso: boolean
|
||||
avatarUrl: string | null
|
||||
}
|
||||
|
||||
const ALL_COMPANIES_VALUE = "__all__"
|
||||
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)
|
||||
|
|
@ -143,6 +158,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
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)
|
||||
|
|
@ -150,6 +166,30 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
const updateCategories = useMutation(api.tickets.updateCategories)
|
||||
const agents = (useQuery(api.users.listAgents, { tenantId: ticket.tenantId }) as Doc<"users">[] | undefined) ?? []
|
||||
const queuesEnabled = Boolean(isStaff && convexUserId)
|
||||
const companiesRaw = useQuery(
|
||||
convexUserId ? api.companies.list : "skip",
|
||||
convexUserId
|
||||
? { tenantId: ticket.tenantId, 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(
|
||||
convexUserId ? api.users.listCustomers : "skip",
|
||||
convexUserId
|
||||
? { tenantId: ticket.tenantId, viewerId: convexUserId as Id<"users"> }
|
||||
: "skip"
|
||||
) as CustomerOption[] | undefined
|
||||
const customers = useMemo(() => customersRaw ?? [], [customersRaw])
|
||||
|
||||
const queueArgs = queuesEnabled
|
||||
? { tenantId: ticket.tenantId, viewerId: convexUserId as Id<"users"> }
|
||||
: "skip"
|
||||
|
|
@ -210,6 +250,10 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
const [closeOpen, setCloseOpen] = useState(false)
|
||||
const [assigneeChangeReason, setAssigneeChangeReason] = useState("")
|
||||
const [assigneeReasonError, setAssigneeReasonError] = useState<string | null>(null)
|
||||
const [companySelection, setCompanySelection] = useState<string>(ALL_COMPANIES_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(
|
||||
|
|
@ -225,8 +269,48 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
const isAvulso = Boolean(((ticket.company ?? null) as { isAvulso?: boolean } | null)?.isAvulso ?? false)
|
||||
const [queueSelection, setQueueSelection] = useState(currentQueueName)
|
||||
const queueDirty = useMemo(() => queueSelection !== currentQueueName, [queueSelection, currentQueueName])
|
||||
const assigneeDirty = useMemo(() => assigneeSelection !== currentAssigneeId, [assigneeSelection, currentAssigneeId])
|
||||
const formDirty = dirty || categoryDirty || queueDirty || assigneeDirty
|
||||
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 companyOptions = useMemo(() => {
|
||||
const map = new Map<string, { id: string; name: string; isAvulso?: boolean }>()
|
||||
companies.forEach((company) => {
|
||||
map.set(company.id, { id: company.id, name: company.name, isAvulso: false })
|
||||
})
|
||||
customers.forEach((customer) => {
|
||||
if (customer.companyId && !map.has(customer.companyId)) {
|
||||
map.set(customer.companyId, {
|
||||
id: customer.companyId,
|
||||
name: customer.companyName ?? "Empresa sem nome",
|
||||
isAvulso: customer.companyIsAvulso,
|
||||
})
|
||||
}
|
||||
})
|
||||
const includeNoCompany = customers.some((customer) => !customer.companyId)
|
||||
const result: Array<{ id: string; name: string; isAvulso?: boolean }> = [
|
||||
{ id: ALL_COMPANIES_VALUE, name: "Todas as empresas" },
|
||||
]
|
||||
if (includeNoCompany) {
|
||||
result.push({ id: NO_COMPANY_VALUE, name: "Sem empresa" })
|
||||
}
|
||||
const sorted = Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
||||
return [...result, ...sorted]
|
||||
}, [companies, customers])
|
||||
const filteredCustomers = useMemo(() => {
|
||||
if (companySelection === ALL_COMPANIES_VALUE) return customers
|
||||
if (companySelection === NO_COMPANY_VALUE) {
|
||||
return customers.filter((customer) => !customer.companyId)
|
||||
}
|
||||
return customers.filter((customer) => customer.companyId === companySelection)
|
||||
}, [companySelection, customers])
|
||||
const requesterDirty = useMemo(() => requesterSelection !== ticket.requester.id, [requesterSelection, ticket.requester.id])
|
||||
const formDirty = dirty || categoryDirty || queueDirty || assigneeDirty || requesterDirty
|
||||
const companyLabel = useMemo(() => {
|
||||
if (ticket.company?.name) return ticket.company.name
|
||||
if (isAvulso) return "Cliente avulso"
|
||||
|
|
@ -246,6 +330,42 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
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])
|
||||
|
|
@ -312,6 +432,32 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
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" })
|
||||
|
|
@ -402,6 +548,9 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
subcategoryId: currentSubcategoryId,
|
||||
})
|
||||
setQueueSelection(currentQueueName)
|
||||
setRequesterSelection(ticket.requester.id)
|
||||
setCompanySelection(currentCompanySelection)
|
||||
setRequesterError(null)
|
||||
setAssigneeSelection(currentAssigneeId)
|
||||
setAssigneeChangeReason("")
|
||||
setAssigneeReasonError(null)
|
||||
|
|
@ -418,7 +567,9 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
})
|
||||
setQueueSelection(ticket.queue ?? "")
|
||||
setAssigneeSelection(currentAssigneeId)
|
||||
}, [editing, ticket.category?.id, ticket.subcategory?.id, ticket.queue, 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
|
||||
|
|
@ -1084,12 +1235,74 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className={sectionLabelClass}>Solicitante</span>
|
||||
<span className={sectionValueClass}>{ticket.requester.name}</span>
|
||||
<span className={sectionLabelClass}>Empresa</span>
|
||||
{editing && !isManager ? (
|
||||
<Select
|
||||
value={companySelection}
|
||||
onValueChange={(value) => {
|
||||
setCompanySelection(value)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue placeholder="Selecionar" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-64 rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
||||
{companyOptions.map((option) => (
|
||||
<SelectItem key={option.id} value={option.id}>
|
||||
{option.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<span className={sectionValueClass}>{companyLabel}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className={sectionLabelClass}>Empresa</span>
|
||||
<span className={sectionValueClass}>{companyLabel}</span>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue