feat: improve requester combobox and admin cleanup flows
This commit is contained in:
Esdras Renan
parent
788f6928a1
commit
37c32149a6
13 changed files with 923 additions and 180 deletions
|
|
@ -19,11 +19,13 @@ 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 { 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
|
||||
|
|
@ -36,12 +38,58 @@ type CustomerOption = {
|
|||
avatarUrl: string | null
|
||||
}
|
||||
|
||||
const ALL_COMPANIES_VALUE = "__all__"
|
||||
const NO_COMPANY_VALUE = "__no_company__"
|
||||
const NO_REQUESTER_VALUE = "__no_requester__"
|
||||
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() : "?"
|
||||
}
|
||||
|
||||
import { useDefaultQueues } from "@/hooks/use-default-queues"
|
||||
import { cn } from "@/lib/utils"
|
||||
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(""),
|
||||
|
|
@ -70,7 +118,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
channel: "MANUAL",
|
||||
queueName: null,
|
||||
assigneeId: null,
|
||||
companyId: ALL_COMPANIES_VALUE,
|
||||
companyId: AUTO_COMPANY_VALUE,
|
||||
requesterId: "",
|
||||
categoryId: "",
|
||||
subcategoryId: "",
|
||||
|
|
@ -132,44 +180,90 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
const queueValue = form.watch("queueName") ?? "NONE"
|
||||
const assigneeValue = form.watch("assigneeId") ?? null
|
||||
const assigneeSelectValue = assigneeValue ?? "NONE"
|
||||
const companyValue = form.watch("companyId") ?? ALL_COMPANIES_VALUE
|
||||
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 }>()
|
||||
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, isAvulso: false })
|
||||
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 ?? "Empresa sem nome",
|
||||
name: customer.companyName && customer.companyName.trim().length > 0 ? customer.companyName : "Empresa sem nome",
|
||||
isAvulso: customer.companyIsAvulso,
|
||||
keywords: [],
|
||||
})
|
||||
}
|
||||
})
|
||||
const includeNoCompany = customers.some((customer) => !customer.companyId)
|
||||
const result: Array<{ id: string; name: string; isAvulso?: boolean }> = [
|
||||
{ id: ALL_COMPANIES_VALUE, name: "Todas as empresas" },
|
||||
const base: Array<{ id: string; name: string; isAvulso?: boolean; keywords: string[] }> = [
|
||||
{ id: NO_COMPANY_VALUE, name: "Sem empresa", keywords: ["sem empresa", "nenhuma"], isAvulso: false },
|
||||
]
|
||||
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]
|
||||
return [...base, ...sorted]
|
||||
}, [companies, customers])
|
||||
|
||||
const filteredCustomers = useMemo(() => {
|
||||
if (companyValue === ALL_COMPANIES_VALUE) return customers
|
||||
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)
|
||||
|
|
@ -181,7 +275,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
useEffect(() => {
|
||||
if (!open) {
|
||||
setCustomersInitialized(false)
|
||||
form.setValue("companyId", ALL_COMPANIES_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
form.setValue("companyId", AUTO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
form.setValue("requesterId", "", { shouldDirty: false, shouldTouch: false })
|
||||
return
|
||||
}
|
||||
|
|
@ -199,10 +293,8 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
form.setValue("requesterId", initialRequester ?? "", { shouldDirty: false, shouldTouch: false })
|
||||
if (selected?.companyId) {
|
||||
form.setValue("companyId", selected.companyId, { shouldDirty: false, shouldTouch: false })
|
||||
} else if (selected) {
|
||||
form.setValue("companyId", NO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
} else {
|
||||
form.setValue("companyId", ALL_COMPANIES_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
form.setValue("companyId", selected ? NO_COMPANY_VALUE : AUTO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
}
|
||||
setCustomersInitialized(true)
|
||||
}, [open, customersInitialized, customers, convexUserId, form])
|
||||
|
|
@ -465,72 +557,137 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
<div className="space-y-4">
|
||||
<Field>
|
||||
<FieldLabel>Empresa</FieldLabel>
|
||||
<Select
|
||||
value={companyValue}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("companyId", value, {
|
||||
shouldDirty: value !== companyValue,
|
||||
<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,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue placeholder="Selecionar empresa" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
{companyOptions.map((option) => (
|
||||
<SelectItem key={option.id} value={option.id} className={selectItemClass}>
|
||||
{option.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel className="flex items-center gap-1">
|
||||
Solicitante <span className="text-destructive">*</span>
|
||||
</FieldLabel>
|
||||
<Select
|
||||
value={requesterValue || NO_REQUESTER_VALUE}
|
||||
onValueChange={(value) => {
|
||||
if (value === NO_REQUESTER_VALUE) {
|
||||
if (nextCustomers.length === 0) {
|
||||
form.setValue("requesterId", "", {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
shouldValidate: form.formState.isSubmitted,
|
||||
})
|
||||
} else {
|
||||
form.setValue("requesterId", value, {
|
||||
} 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,
|
||||
})
|
||||
}
|
||||
}}
|
||||
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-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
{filteredCustomers.length === 0 ? (
|
||||
<SelectItem value={NO_REQUESTER_VALUE} disabled className={selectItemClass}>
|
||||
Nenhum usuário disponível
|
||||
</SelectItem>
|
||||
options={companyComboboxOptions}
|
||||
placeholder="Selecionar empresa"
|
||||
allowClear
|
||||
clearLabel="Qualquer empresa"
|
||||
renderValue={(option) =>
|
||||
option ? (
|
||||
<span className="truncate">{option.label}</span>
|
||||
) : (
|
||||
filteredCustomers.map((customer) => (
|
||||
<SelectItem key={customer.id} value={customer.id} className={selectItemClass}>
|
||||
<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>
|
||||
<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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue