Permite selecionar solicitante e empresa nos tickets

src/app/tickets/new/page.tsx

@@ -26,6 +26,22 @@ import {
 } 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__"
+
+
 export default function NewTicketPage() {
   const router = useRouter()
   const { convexUserId, isStaff, role } = useAuth()
@@ -46,6 +62,31 @@ export default function NewTicketPage() {
     [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 [subject, setSubject] = useState("")
   const [summary, setSummary] = useState("")
   const [priority, setPriority] = useState<TicketPriority>("MEDIUM")
@@ -62,9 +103,91 @@ export default function NewTicketPage() {
   const [descriptionError, setDescriptionError] = useState<string | null>(null)
   const [assigneeInitialized, setAssigneeInitialized] = useState(false)
 
+  const [companyFilter, setCompanyFilter] = useState<string>(ALL_COMPANIES_VALUE)
+  const [requesterId, setRequesterId] = useState<string | null>(convexUserId)
+  const [requesterError, setRequesterError] = useState<string | null>(null)
+  const [customersInitialized, setCustomersInitialized] = useState(false)
+
   const queueOptions = useMemo(() => queues.map((q) => q.name), [queues])
   const assigneeSelectValue = assigneeId ?? "NONE"
 
+  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 (companyFilter === ALL_COMPANIES_VALUE) return customers
+    if (companyFilter === NO_COMPANY_VALUE) {
+      return customers.filter((customer) => !customer.companyId)
+    }
+    return customers.filter((customer) => customer.companyId === companyFilter)
+  }, [companyFilter, customers])
+
+  useEffect(() => {
+    if (customersInitialized) return
+    if (!customers.length) return
+    let initialRequester = requesterId
+    if (!initialRequester || !customers.some((customer) => customer.id === initialRequester)) {
+      if (convexUserId && customers.some((customer) => customer.id === convexUserId)) {
+        initialRequester = convexUserId
+      } else {
+        initialRequester = customers[0]?.id ?? null
+      }
+    }
+    if (initialRequester) {
+      setRequesterId(initialRequester)
+      const selected = customers.find((customer) => customer.id === initialRequester)
+      if (selected?.companyId) {
+        setCompanyFilter(selected.companyId)
+      } else if (selected) {
+        setCompanyFilter(NO_COMPANY_VALUE)
+      }
+    }
+    setCustomersInitialized(true)
+  }, [customersInitialized, customers, requesterId, convexUserId])
+
+  useEffect(() => {
+    if (!customersInitialized) return
+    const available = filteredCustomers
+    if (available.length === 0) {
+      if (requesterId !== null) {
+        setRequesterId(null)
+      }
+      return
+    }
+    if (!requesterId || !available.some((customer) => customer.id === requesterId)) {
+      setRequesterId(available[0].id)
+    }
+  }, [filteredCustomers, customersInitialized, requesterId])
+
+  useEffect(() => {
+    if (requesterId && requesterError) {
+      setRequesterError(null)
+    }
+  }, [requesterId, requesterError])
+
+
   useEffect(() => {
     if (assigneeInitialized) return
     if (!convexUserId) return
@@ -112,12 +235,19 @@ export default function NewTicketPage() {
     }
     setDescriptionError(null)
 
+    if (!requesterId) {
+      setRequesterError("Selecione um solicitante.")
+      toast.error("Selecione um solicitante para o chamado.")
+      return
+    }
+
     setLoading(true)
     toast.loading("Criando ticket...", { id: "create-ticket" })
     try {
       const selQueue = queues.find((q) => q.name === queueName)
       const queueId = selQueue ? (selQueue.id as Id<"queues">) : undefined
       const assigneeToSend = assigneeId ? (assigneeId as Id<"users">) : undefined
+      const requesterToSend = requesterId as Id<"users">
       const id = await create({
         actorId: convexUserId as Id<"users">,
         tenantId: DEFAULT_TENANT_ID,
@@ -126,7 +256,7 @@ export default function NewTicketPage() {
         priority,
         channel,
         queueId,
-        requesterId: convexUserId as Id<"users">,
+        requesterId: requesterToSend,
         assigneeId: assigneeToSend,
         categoryId: categoryId as Id<"ticketCategories">,
         subcategoryId: subcategoryId as Id<"ticketSubcategories">,
@@ -210,6 +340,76 @@ export default function NewTicketPage() {
               />
               {descriptionError ? <p className="text-xs font-medium text-red-500">{descriptionError}</p> : null}
             </div>
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-neutral-700" htmlFor="company">
+                  Empresa
+                </label>
+                <Select
+                  value={companyFilter}
+                  onValueChange={(value) => {
+                    setCompanyFilter(value)
+                    setRequesterError(null)
+                  }}
+                >
+                  <SelectTrigger className={selectTriggerClass}>
+                    <SelectValue placeholder="Selecionar empresa" />
+                  </SelectTrigger>
+                  <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-sm">
+                    {companyOptions.map((option) => (
+                      <SelectItem key={option.id} value={option.id} className={selectItemClass}>
+                        {option.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <label className="flex items-center gap-1 text-sm font-medium text-neutral-700" htmlFor="requester">
+                  Solicitante <span className="text-red-500">*</span>
+                </label>
+                <Select
+                  value={requesterId ?? NO_REQUESTER_VALUE}
+                  onValueChange={(value) => {
+                    if (value === NO_REQUESTER_VALUE) {
+                      setRequesterId(null)
+                    } else {
+                      setRequesterId(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-xl border border-slate-200 bg-white text-neutral-800 shadow-sm">
+                    {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 ? (
+                  <p className="text-xs text-neutral-500">
+                    Nenhum colaborador disponível para a empresa selecionada.
+                  </p>
+                ) : null}
+                {requesterError ? <p className="text-xs font-medium text-red-500">{requesterError}</p> : null}
+              </div>
+            </div>
+
             <div className="space-y-2">
               <CategorySelectFields
                 tenantId={DEFAULT_TENANT_ID}