Permite selecionar solicitante e empresa nos tickets

src/components/tickets/new-ticket-dialog.tsx

@@ -24,6 +24,22 @@ import {
   priorityStyles,
 } from "@/components/tickets/priority-select"
 import { CategorySelectFields } from "@/components/tickets/category-select"
+
+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__"
+
 import { useDefaultQueues } from "@/hooks/use-default-queues"
 import { cn } from "@/lib/utils"
 
@@ -35,6 +51,8 @@ const schema = z.object({
   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"),
 })
@@ -52,6 +70,8 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
       channel: "MANUAL",
       queueName: null,
       assigneeId: null,
+      companyId: ALL_COMPANIES_VALUE,
+      requesterId: "",
       categoryId: "",
       subcategoryId: "",
     },
@@ -76,7 +96,33 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
     () => (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]
@@ -86,9 +132,44 @@ 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 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 }>()
+    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 (companyValue === ALL_COMPANIES_VALUE) return customers
+    if (companyValue === NO_COMPANY_VALUE) {
+      return customers.filter((customer) => !customer.companyId)
+    }
+    return customers.filter((customer) => customer.companyId === companyValue)
+  }, [companyValue, customers])
+
   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)
@@ -97,6 +178,64 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
     return normalized === "admin" || normalized === "agent" || normalized === "collaborator"
   }, [role])
 
+  useEffect(() => {
+    if (!open) {
+      setCustomersInitialized(false)
+      form.setValue("companyId", ALL_COMPANIES_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 if (selected) {
+      form.setValue("companyId", NO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
+    } else {
+      form.setValue("companyId", ALL_COMPANIES_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)
@@ -166,6 +305,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
     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,
@@ -174,7 +314,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
         priority: values.priority,
         channel: values.channel,
         queueId: sel?.id as Id<"queues"> | undefined,
-        requesterId: convexUserId as Id<"users">,
+        requesterId: requesterToSend,
         assigneeId: selectedAssignee ? (selectedAssignee as Id<"users">) : undefined,
         categoryId: values.categoryId as Id<"ticketCategories">,
         subcategoryId: values.subcategoryId as Id<"ticketSubcategories">,
@@ -323,6 +463,86 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
                     </Field>
                   </div>
                   <div className="space-y-4">
+                    <Field>
+                      <FieldLabel>Empresa</FieldLabel>
+                      <Select
+                        value={companyValue}
+                        onValueChange={(value) => {
+                          form.setValue("companyId", value, {
+                            shouldDirty: value !== 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) {
+                            form.setValue("requesterId", "", {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: form.formState.isSubmitted,
+                            })
+                          } else {
+                            form.setValue("requesterId", value, {
+                              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>
+                          ) : (
+                            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>
+                      {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}

src/components/tickets/ticket-summary-header.tsx

@@ -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>

src/components/tickets/ticket-timeline.tsx

@@ -41,6 +41,7 @@ const timelineIcons: Record<string, ComponentType<{ className?: string }>> = {
   PRIORITY_CHANGED: IconSquareCheck,
   ATTACHMENT_REMOVED: IconPaperclip,
   CATEGORY_CHANGED: IconFolders,
+  REQUESTER_CHANGED: IconUserCircle,
   MANAGER_NOTIFIED: IconUserCircle,
   VISIT_SCHEDULED: IconCalendar,
   CSAT_RECEIVED: IconStar,
@@ -256,6 +257,19 @@ export function TicketTimeline({ ticket }: TicketTimelineProps) {
                   if (entry.type === "QUEUE_CHANGED" && (payload.queueName || payload.queueId)) {
                     message = "Fila alterada" + (payload.queueName ? " para " + payload.queueName : "")
                   }
+                  if (entry.type === "REQUESTER_CHANGED") {
+                    const name = payload.requesterName || payload.requesterEmail || payload.requesterId
+                    const company = payload.companyName
+                    if (name && company) {
+                      message = `Solicitante alterado para ${name} (${company})`
+                    } else if (name) {
+                      message = `Solicitante alterado para ${name}`
+                    } else if (company) {
+                      message = `Solicitante associado à empresa ${company}`
+                    } else {
+                      message = "Solicitante alterado"
+                    }
+                  }
                   if (entry.type === "PRIORITY_CHANGED" && (payload.toLabel || payload.to)) {
                     message = "Prioridade alterada para " + (payload.toLabel || payload.to)
                   }
@@ -354,4 +368,4 @@ export function TicketTimeline({ ticket }: TicketTimelineProps) {
       </CardContent>
     </Card>
   )
-}
+}