feat: improve requester combobox and admin cleanup flows

components/shadcn-studio/input/input-41.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { MinusIcon, PlusIcon } from 'lucide-react'
+
+import { Button, Group, Input, Label, NumberField } from 'react-aria-components'
+
+const InputWithEndButtonsDemo = () => {
+  return (
+    <NumberField defaultValue={1024} minValue={0} className='w-full max-w-xs space-y-2'>
+      <Label className='flex items-center gap-2 text-sm leading-none font-medium select-none'>
+        Input with end buttons
+      </Label>
+      <Group className='dark:bg-input/30 border-input data-focus-within:border-ring data-focus-within:ring-ring/50 data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40 data-focus-within:has-aria-invalid:border-destructive relative inline-flex h-9 w-full min-w-0 items-center overflow-hidden rounded-md border bg-transparent text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-within:ring-[3px] md:text-sm'>
+        <Input className='selection:bg-primary selection:text-primary-foreground w-full grow px-3 py-2 text-center tabular-nums outline-none' />
+        <Button
+          slot='decrement'
+          className='border-input bg-background text-muted-foreground hover:bg-accent hover:text-foreground -me-px flex aspect-square h-[inherit] items-center justify-center border text-sm transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50'
+        >
+          <MinusIcon className='size-4' />
+          <span className='sr-only'>Decrement</span>
+        </Button>
+        <Button
+          slot='increment'
+          className='border-input bg-background text-muted-foreground hover:bg-accent hover:text-foreground -me-px flex aspect-square h-[inherit] items-center justify-center rounded-r-md border text-sm transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50'
+        >
+          <PlusIcon className='size-4' />
+          <span className='sr-only'>Increment</span>
+        </Button>
+      </Group>
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://react-spectrum.adobe.com/react-aria/NumberField.html'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          React Aria
+        </a>
+      </p>
+    </NumberField>
+  )
+}
+
+export default InputWithEndButtonsDemo

components/shadcn-studio/input/input-end-text-addon.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { useId } from 'react'
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const InputEndTextAddOnDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor={id}>Input with end text add-on</Label>
+      <div className='relative'>
+        <Input id={id} type='text' placeholder='shadcnstudio' className='peer pr-13' />
+        <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 text-sm peer-disabled:opacity-50'>
+          .com
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default InputEndTextAddOnDemo

convex/tickets.ts

@@ -1638,6 +1638,41 @@ export const changeRequester = mutation({
   },
 })
 
+export const purgeTicketsForUsers = mutation({
+  args: {
+    tenantId: v.string(),
+    actorId: v.id("users"),
+    userIds: v.array(v.id("users")),
+  },
+  handler: async (ctx, { tenantId, actorId, userIds }) => {
+    await requireAdmin(ctx, actorId, tenantId)
+    if (userIds.length === 0) {
+      return { deleted: 0 }
+    }
+    const uniqueIds = Array.from(new Set(userIds.map((id) => id)))
+    let deleted = 0
+    for (const userId of uniqueIds) {
+      const requesterTickets = await ctx.db
+        .query("tickets")
+        .withIndex("by_tenant_requester", (q) => q.eq("tenantId", tenantId).eq("requesterId", userId))
+        .collect()
+      for (const ticket of requesterTickets) {
+        await ctx.db.delete(ticket._id)
+        deleted += 1
+      }
+      const assigneeTickets = await ctx.db
+        .query("tickets")
+        .withIndex("by_tenant_assignee", (q) => q.eq("tenantId", tenantId).eq("assigneeId", userId))
+        .collect()
+      for (const ticket of assigneeTickets) {
+        await ctx.db.delete(ticket._id)
+        deleted += 1
+      }
+    }
+    return { deleted }
+  },
+})
+
 
 export const changeQueue = mutation({
   args: { ticketId: v.id("tickets"), queueId: v.id("queues"), actorId: v.id("users") },

package.json

@@ -63,6 +63,7 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.64.0",
+    "react-aria-components": "^1.4.0",
     "recharts": "^2.15.4",
     "sanitize-html": "^2.17.0",
     "sonner": "^2.0.7",

src/app/admin/page.tsx

@@ -113,6 +113,8 @@ export default async function AdminPage() {
           roleOptions={ROLE_OPTIONS}
           defaultTenantId={DEFAULT_TENANT_ID}
           viewerRole={viewerRole}
+          visibleTabs={["team", "invites"]}
+          defaultTab="team"
         />
       </div>
     </AppShell>

src/app/api/admin/users/cleanup/route.ts

@@ -0,0 +1,160 @@
+import { NextResponse } from "next/server"
+
+import type { Id } from "@/convex/_generated/dataModel"
+import { api } from "@/convex/_generated/api"
+import { DEFAULT_TENANT_ID } from "@/lib/constants"
+import { assertStaffSession } from "@/lib/auth-server"
+import { isAdmin } from "@/lib/authz"
+import { prisma } from "@/lib/prisma"
+import { createConvexClient } from "@/server/convex-client"
+
+const DEFAULT_KEEP_EMAILS = ["renan.pac@paulicon.com.br"]
+
+type CleanupSummary = {
+  removedPortalUserIds: string[]
+  removedPortalEmails: string[]
+  removedAuthUserIds: string[]
+  removedConvexUserIds: string[]
+  removedTicketIds: string[]
+  convictTicketsDeleted: number
+  keepEmails: string[]
+}
+
+export const runtime = "nodejs"
+
+export async function POST(request: Request) {
+  const session = await assertStaffSession()
+  if (!session) {
+    return NextResponse.json({ error: "Não autorizado" }, { status: 401 })
+  }
+
+  if (!isAdmin(session.user.role)) {
+    return NextResponse.json({ error: "Apenas administradores podem remover dados." }, { status: 403 })
+  }
+
+  const tenantId = session.user.tenantId ?? DEFAULT_TENANT_ID
+  const sessionEmail = session.user.email?.toLowerCase()
+  if (!sessionEmail) {
+    return NextResponse.json({ error: "Administrador sem e-mail associado." }, { status: 400 })
+  }
+
+  const body = await request.json().catch(() => ({})) as { keepEmails?: string[] }
+  const keepEmailsInput = Array.isArray(body.keepEmails) ? body.keepEmails : []
+  const keepEmailsSet = new Set<string>()
+  DEFAULT_KEEP_EMAILS.forEach((email) => keepEmailsSet.add(email.toLowerCase()))
+  keepEmailsInput
+    .map((email) => (typeof email === "string" ? email.trim().toLowerCase() : ""))
+    .filter((email) => email.length > 0)
+    .forEach((email) => keepEmailsSet.add(email))
+
+  keepEmailsSet.add(sessionEmail)
+  const viewerEmail = sessionEmail
+
+  const portalUsers = await prisma.user.findMany({
+    where: { tenantId },
+    select: { id: true, email: true },
+  })
+
+  const portalToRemove = portalUsers.filter((user) => !keepEmailsSet.has(user.email.toLowerCase()))
+  const portalIdsToRemove = portalToRemove.map((user) => user.id)
+  const portalEmailsToRemove = portalToRemove.map((user) => user.email.toLowerCase())
+
+  const responseSummary: CleanupSummary = {
+    removedPortalUserIds: portalIdsToRemove,
+    removedPortalEmails: portalEmailsToRemove,
+    removedAuthUserIds: [],
+    removedConvexUserIds: [],
+    removedTicketIds: [],
+    convictTicketsDeleted: 0,
+    keepEmails: Array.from(keepEmailsSet),
+  }
+
+  if (portalIdsToRemove.length > 0) {
+    const ticketsToRemove = await prisma.ticket.findMany({
+      where: {
+        tenantId,
+        OR: [{ requesterId: { in: portalIdsToRemove } }, { assigneeId: { in: portalIdsToRemove } }],
+      },
+      select: { id: true },
+    })
+    responseSummary.removedTicketIds = ticketsToRemove.map((ticket) => ticket.id)
+
+    await prisma.$transaction(async (tx) => {
+      if (ticketsToRemove.length > 0) {
+        await tx.ticket.deleteMany({
+          where: { id: { in: ticketsToRemove.map((ticket) => ticket.id) } },
+        })
+      }
+
+      if (portalEmailsToRemove.length > 0) {
+        const authUsers = await tx.authUser.findMany({
+          where: { email: { in: portalEmailsToRemove } },
+          select: { id: true },
+        })
+        if (authUsers.length > 0) {
+          const authIds = authUsers.map((item) => item.id)
+          responseSummary.removedAuthUserIds = authIds
+          await tx.authSession.deleteMany({ where: { userId: { in: authIds } } })
+          await tx.authAccount.deleteMany({ where: { userId: { in: authIds } } })
+          await tx.authUser.deleteMany({ where: { id: { in: authIds } } })
+        }
+      }
+
+      await tx.user.deleteMany({
+        where: { id: { in: portalIdsToRemove } },
+      })
+    })
+  }
+
+  try {
+    const client = createConvexClient()
+    const actor =
+      (await client.query(api.users.findByEmail, { tenantId, email: sessionEmail })) ??
+      (await client.mutation(api.users.ensureUser, {
+        tenantId,
+        email: sessionEmail,
+        name: session.user.name ?? sessionEmail,
+      }))
+
+    const actorId = actor?._id as Id<"users"> | undefined
+    if (actorId) {
+      const convexCustomers = await client.query(api.users.listCustomers, {
+        tenantId,
+        viewerId: actorId,
+      })
+
+      const convexToRemove = convexCustomers.filter(
+        (customer) => !keepEmailsSet.has(customer.email.toLowerCase()),
+      )
+
+      const removedConvexIds: Id<"users">[] = []
+      for (const customer of convexToRemove) {
+        const userId = customer.id as Id<"users">
+        try {
+          await client.mutation(api.users.deleteUser, { userId, actorId })
+          removedConvexIds.push(userId)
+        } catch (error) {
+          console.error("[users.cleanup] Falha ao remover usuário do Convex", customer.email, error)
+        }
+      }
+      responseSummary.removedConvexUserIds = removedConvexIds.map((id) => id as unknown as string)
+
+      if (removedConvexIds.length > 0) {
+        try {
+          const result = await client.mutation(api.tickets.purgeTicketsForUsers, {
+            tenantId,
+            actorId,
+            userIds: removedConvexIds,
+          })
+          responseSummary.convictTicketsDeleted = typeof result?.deleted === "number" ? result.deleted : 0
+        } catch (error) {
+          console.error("[users.cleanup] Falha ao remover tickets no Convex", error)
+        }
+      }
+    }
+  } catch (error) {
+    console.error("[users.cleanup] Convex indisponível", error)
+  }
+
+  return NextResponse.json(responseSummary)
+}

src/components/admin/admin-users-manager.tsx

@@ -76,12 +76,16 @@ type CompanyOption = {
   name: string
 }
 
+type AdminUsersTab = "team" | "users" | "invites"
+
 type Props = {
   initialUsers: AdminUser[]
   initialInvites: AdminInvite[]
   roleOptions: readonly AdminRole[]
   defaultTenantId: string
   viewerRole: string
+  visibleTabs?: readonly AdminUsersTab[]
+  defaultTab?: AdminUsersTab
 }
 
 const ROLE_LABELS: Record<string, string> = {
@@ -111,6 +115,9 @@ function machinePersonaBadgeVariant(persona: string | null | undefined) {
   return "outline" as const
 }
 
+const ALL_TABS: AdminUsersTab[] = ["team", "users", "invites"]
+const DEFAULT_KEEP_EMAILS = ["renan.pac@paulicon.com.br"]
+
 // Tenant removido da UI (sem exibição)
 
 function formatDate(dateIso: string) {
@@ -170,8 +177,16 @@ function isRestrictedRole(role?: string | null) {
   return normalized === "admin" || normalized === "agent"
 }
 
-export function AdminUsersManager({ initialUsers, initialInvites, roleOptions, defaultTenantId, viewerRole }: Props) {
+export function AdminUsersManager({
-  const { convexUserId } = useAuth()
+  initialUsers,
+  initialInvites,
+  roleOptions,
+  defaultTenantId,
+  viewerRole,
+  visibleTabs,
+  defaultTab,
+}: Props) {
+  const { convexUserId, session } = useAuth()
   const [users, setUsers] = useState<AdminUser[]>(initialUsers)
   const [invites, setInvites] = useState<AdminInvite[]>(initialInvites)
   const [companies, setCompanies] = useState<CompanyOption[]>([])
@@ -215,6 +230,33 @@ export function AdminUsersManager({ initialUsers, initialInvites, roleOptions, d
   )
   const viewerRoleNormalized = viewerRole?.toLowerCase?.() ?? "agent"
   const viewerIsAdmin = viewerRoleNormalized === "admin"
+  const viewerEmail = session?.user?.email?.toLowerCase() ?? null
+
+  const tabs = useMemo<AdminUsersTab[]>(() => {
+    const source = visibleTabs && visibleTabs.length > 0 ? Array.from(new Set(visibleTabs)) : ALL_TABS
+    return source.filter((value): value is AdminUsersTab => ALL_TABS.includes(value))
+  }, [visibleTabs])
+
+  const initialTabValue = useMemo<AdminUsersTab>(() => {
+    if (tabs.length === 0) {
+      return "team"
+    }
+    if (defaultTab && tabs.includes(defaultTab)) {
+      return defaultTab
+    }
+    if (tabs.includes("team")) {
+      return "team"
+    }
+    return tabs[0]
+  }, [tabs, defaultTab])
+
+  const [tab, setTab] = useState<AdminUsersTab>(initialTabValue)
+
+  useEffect(() => {
+    if (!tabs.includes(tab)) {
+      setTab(tabs[0] ?? "team")
+    }
+  }, [tabs, tab])
   const canManageUser = useCallback((role?: string | null) => viewerIsAdmin || !isRestrictedRole(role), [viewerIsAdmin])
   const canManageInvite = useCallback((role: RoleOption) => viewerIsAdmin || !["admin", "agent"].includes(role), [viewerIsAdmin])
 
@@ -230,6 +272,22 @@ export function AdminUsersManager({ initialUsers, initialInvites, roleOptions, d
     })
     return Array.from(unique)
   }, [normalizedRoles, viewerIsAdmin])
+
+  const buildKeepEmailSet = useCallback(() => {
+    const keep = new Set<string>()
+    DEFAULT_KEEP_EMAILS.forEach((email) => keep.add(email.toLowerCase()))
+    if (viewerEmail) {
+      keep.add(viewerEmail)
+    }
+    cleanupKeepEmails
+      .split(",")
+      .map((entry) => entry.trim().toLowerCase())
+      .filter(Boolean)
+      .forEach((email) => keep.add(email))
+    return keep
+  }, [cleanupKeepEmails, viewerEmail])
+
+  const cleanupPreview = useMemo(() => Array.from(buildKeepEmailSet()).join(", "), [buildKeepEmailSet])
   // Split users: team (admin/agent) and people (manager/collaborator); exclude machines
   const teamUsers = useMemo(
     () => users.filter((user) => user.role !== "machine" && ["admin", "agent"].includes(coerceRole(user.role))),
@@ -269,6 +327,9 @@ export function AdminUsersManager({ initialUsers, initialInvites, roleOptions, d
   })
   const [isCreatingUser, setIsCreatingUser] = useState(false)
   const [createPassword, setCreatePassword] = useState<string | null>(null)
+  const [cleanupDialogOpen, setCleanupDialogOpen] = useState(false)
+  const [cleanupKeepEmails, setCleanupKeepEmails] = useState(DEFAULT_KEEP_EMAILS.join(", "))
+  const [cleanupPending, setCleanupPending] = useState(false)
 
   // Máquinas (para listar vínculos por usuário)
   type MachinesListItem = {
@@ -619,6 +680,46 @@ export function AdminUsersManager({ initialUsers, initialInvites, roleOptions, d
     }
   }
 
+  const handleCleanupConfirm = useCallback(async () => {
+    if (cleanupPending) return
+    const keepSet = buildKeepEmailSet()
+    setCleanupPending(true)
+    toast.loading("Limpando dados antigos...", { id: "cleanup-users" })
+    try {
+      const response = await fetch("/api/admin/users/cleanup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ keepEmails: Array.from(keepSet) }),
+      })
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}))
+        throw new Error(data.error ?? "Não foi possível remover os dados antigos.")
+      }
+      const summary = (await response.json()) as {
+        removedPortalUserIds: string[]
+        removedPortalEmails: string[]
+        removedConvexUserIds: string[]
+        removedTicketIds: string[]
+        keepEmails: string[]
+      }
+      setUsers((previous) => previous.filter((user) => !summary.removedPortalUserIds.includes(user.id)))
+      setUsersSelection((previous) => {
+        if (previous.size === 0) return previous
+        const next = new Set(previous)
+        summary.removedPortalUserIds.forEach((id) => next.delete(id))
+        return next
+      })
+      setCleanupKeepEmails(Array.from(keepSet).join(", "))
+      toast.success("Dados de teste removidos.", { id: "cleanup-users" })
+      setCleanupDialogOpen(false)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Não foi possível remover os dados antigos."
+      toast.error(message, { id: "cleanup-users" })
+    } finally {
+      setCleanupPending(false)
+    }
+  }, [buildKeepEmailSet, cleanupPending, setUsersSelection])
+
   async function handleAssignCompany(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     const normalizedEmail = linkEmail.trim().toLowerCase()
@@ -1002,23 +1103,48 @@ async function handleDeleteUser() {
 
   return (
     <>
-      <Tabs defaultValue="team" className="w-full">
+      <Tabs value={tab} onValueChange={(value) => setTab(value as AdminUsersTab)} className="w-full">
         <TabsList className="h-12 w-full justify-start rounded-xl bg-slate-100 p-1">
-          <TabsTrigger value="team" className="rounded-lg">Equipe</TabsTrigger>
+          {tabs.includes("team") ? (
-          <TabsTrigger value="users" className="rounded-lg">Usuários</TabsTrigger>
+            <TabsTrigger value="team" className="rounded-lg">
-          <TabsTrigger value="invites" className="rounded-lg">Convites</TabsTrigger>
+              Equipe
+            </TabsTrigger>
+          ) : null}
+          {tabs.includes("users") ? (
+            <TabsTrigger value="users" className="rounded-lg">
+              Usuários
+            </TabsTrigger>
+          ) : null}
+          {tabs.includes("invites") ? (
+            <TabsTrigger value="invites" className="rounded-lg">
+              Convites
+            </TabsTrigger>
+          ) : null}
         </TabsList>
 
+        {tabs.includes("team") ? (
         <TabsContent value="team" className="mt-6 space-y-6">
           <div className="flex flex-col gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
             <div className="space-y-1">
               <p className="text-sm font-semibold text-neutral-900">Equipe cadastrada</p>
               <p className="text-xs text-neutral-500">{filteredTeamUsers.length} {filteredTeamUsers.length === 1 ? "membro" : "membros"}</p>
             </div>
-            <Button onClick={handleOpenCreateUser} size="sm" className="gap-2 self-start sm:self-auto">
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
-              <IconUserPlus className="size-4" />
+              <Button onClick={handleOpenCreateUser} size="sm" className="gap-2 self-start sm:self-auto">
-              Novo usuário
+                <IconUserPlus className="size-4" />
-            </Button>
+                Novo usuário
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="gap-2 self-start text-amber-600 hover:bg-amber-50 hover:text-amber-700 sm:self-auto"
+                onClick={() => setCleanupDialogOpen(true)}
+              >
+                <IconAlertTriangle className="size-4" />
+                Limpar dados antigos
+              </Button>
+            </div>
           </div>
           <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm md:grid md:grid-cols-[minmax(0,1fr)_auto_auto_auto_auto] md:items-center md:gap-3">
             <div className="relative w-full md:max-w-sm">
@@ -1291,7 +1417,9 @@ async function handleDeleteUser() {
             </CardContent>
           </Card>
         </TabsContent>
+        ) : null}
 
+        {tabs.includes("users") ? (
         <TabsContent value="users" className="mt-6 space-y-6">
           <div className="flex flex-col gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
             <div className="space-y-1">
@@ -1556,7 +1684,9 @@ async function handleDeleteUser() {
             </CardContent>
           </Card>
         </TabsContent>
+        ) : null}
 
+        {tabs.includes("invites") ? (
         <TabsContent value="invites" className="mt-6 space-y-6">
           <Card>
             <CardHeader>
@@ -1813,7 +1943,51 @@ async function handleDeleteUser() {
             </CardContent>
           </Card>
         </TabsContent>
+        ) : null}
       </Tabs>
+      <Dialog
+        open={cleanupDialogOpen}
+        onOpenChange={(open) => {
+          if (!open && cleanupPending) return
+          setCleanupDialogOpen(open)
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Remover dados de teste</DialogTitle>
+            <DialogDescription>
+              Remove usuários, tickets e acessos que não estiverem na lista de e-mails preservada. Esta ação não pode ser desfeita.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Label htmlFor="cleanup-keep-emails">E-mails a preservar</Label>
+              <Input
+                id="cleanup-keep-emails"
+                value={cleanupKeepEmails}
+                onChange={(event) => setCleanupKeepEmails(event.target.value)}
+                placeholder="email@empresa.com, outro@dominio.com"
+              />
+              <p className="text-xs text-muted-foreground">
+                Sempre preservamos automaticamente: {viewerEmail ?? "seu e-mail atual"} e{" "}
+                {DEFAULT_KEEP_EMAILS.join(", ")}.
+              </p>
+            </div>
+            <div className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-2">
+              <p className="text-xs font-semibold text-neutral-700">Lista final preservada</p>
+              <p className="text-xs text-neutral-500 break-all">{cleanupPreview}</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCleanupDialogOpen(false)} disabled={cleanupPending}>
+              Cancelar
+            </Button>
+            <Button variant="destructive" onClick={handleCleanupConfirm} disabled={cleanupPending}>
+              {cleanupPending ? "Removendo..." : "Remover dados"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
       <Dialog
         open={createDialogOpen}
         onOpenChange={(open) => {

src/components/admin/companies/admin-companies-manager.tsx

@@ -30,7 +30,6 @@ import {
   COMPANY_CONTRACT_TYPES,
   COMPANY_LOCATION_TYPES,
   COMPANY_STATE_REGISTRATION_TYPES,
-  SLA_SEVERITY_LEVELS,
   companyFormSchema,
   type CompanyBusinessHours,
   type CompanyContract,
@@ -119,14 +118,6 @@ const DAY_OPTIONS = [
 ] as const
 
 const EMPTY_SELECT_VALUE = "__empty__"
-
-const SLA_LEVEL_LABEL: Record<(typeof SLA_SEVERITY_LEVELS)[number], string> = {
-  P1: "P1",
-  P2: "P2",
-  P3: "P3",
-  P4: "P4",
-}
-
 function createId(prefix: string) {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return `${prefix}-${crypto.randomUUID()}`
@@ -763,7 +754,6 @@ function TableView({ companies, machineCountsBySlug, onEdit, onDelete }: TableVi
             <TableHead>Empresa</TableHead>
             <TableHead>Contratos ativos</TableHead>
             <TableHead>Contatos</TableHead>
-            <TableHead>SLA</TableHead>
             <TableHead>Máquinas</TableHead>
             <TableHead className="text-right">Ações</TableHead>
           </TableRow>
@@ -771,7 +761,7 @@ function TableView({ companies, machineCountsBySlug, onEdit, onDelete }: TableVi
           <TableBody>
             {companies.length === 0 ? (
             <TableRow>
-              <TableCell colSpan={6}>
+              <TableCell colSpan={5}>
                 <div className="flex flex-col items-center gap-2 py-6 text-sm text-muted-foreground">
                   <IconBuildingSkyscraper className="size-6 text-border" />
                   <p>Nenhuma empresa encontrada com os filtros atuais.</p>
@@ -852,27 +842,6 @@ function TableView({ companies, machineCountsBySlug, onEdit, onDelete }: TableVi
                       </ul>
                     )}
                   </TableCell>
-                  <TableCell className="align-middle text-xs">
-                    {company.sla ? (
-                      <div className="space-y-1 rounded-md border border-border/60 px-2 py-1">
-                        <p className="font-semibold uppercase text-muted-foreground">
-                          {company.sla.calendar.toUpperCase()}
-                        </p>
-                        <ul className="space-y-1">
-                          {company.sla.severities.map((severity) => (
-                            <li key={severity.level} className="flex items-center justify-between text-[11px]">
-                              <span>{SLA_LEVEL_LABEL[severity.level]}</span>
-                              <span>
-                                {severity.responseMinutes}m · {severity.resolutionMinutes}m
-                              </span>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    ) : (
-                      <p className="text-muted-foreground">Sem SLA cadastrado.</p>
-                    )}
-                  </TableCell>
                   <TableCell className="align-middle text-sm">
                     <Badge variant="outline">{machineCount}</Badge>
                   </TableCell>

src/components/admin/users/admin-users-workspace.tsx

@@ -266,65 +266,67 @@ function AccountsTable({ initialAccounts }: { initialAccounts: AdminAccount[] })
         </div>
 
         <div className="overflow-x-auto">
-          <Table className="min-w-[64rem]">
+          <div className="min-w-[64rem] overflow-hidden rounded-lg border">
-            <TableHeader>
+            <Table className="w-full table-fixed text-sm">
-              <TableRow>
+              <TableHeader className="bg-muted">
-                <TableHead>Usuário</TableHead>
-                <TableHead>Empresa</TableHead>
-                <TableHead>Papel</TableHead>
-                <TableHead>Último acesso</TableHead>
-                <TableHead className="text-right">Selecionar</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filteredAccounts.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={5} className="text-center text-sm text-muted-foreground">
+                  <TableHead>Usuário</TableHead>
-                    Nenhum usuário encontrado.
+                  <TableHead>Empresa</TableHead>
-                  </TableCell>
+                  <TableHead>Papel</TableHead>
+                  <TableHead>Último acesso</TableHead>
+                  <TableHead className="text-right">Selecionar</TableHead>
                 </TableRow>
-              ) : (
+              </TableHeader>
-                filteredAccounts.map((account) => {
+              <TableBody>
-                  const initials = account.name
+                {filteredAccounts.length === 0 ? (
-                    .split(" ")
+                  <TableRow>
-                    .filter(Boolean)
+                    <TableCell colSpan={5} className="text-center text-sm text-muted-foreground">
-                    .slice(0, 2)
+                      Nenhum usuário encontrado.
-                    .map((part) => part.charAt(0).toUpperCase())
+                    </TableCell>
-                    .join("")
+                  </TableRow>
-                  return (
+                ) : (
-                    <TableRow key={account.id} className="hover:bg-muted/40">
+                  filteredAccounts.map((account) => {
-                      <TableCell>
+                    const initials = account.name
-                        <div className="flex items-center gap-3">
+                      .split(" ")
-                          <Avatar className="size-9 border border-border/60">
+                      .filter(Boolean)
-                            <AvatarFallback>{initials || account.email.charAt(0).toUpperCase()}</AvatarFallback>
+                      .slice(0, 2)
-                          </Avatar>
+                      .map((part) => part.charAt(0).toUpperCase())
-                          <div className="min-w-0 space-y-1">
+                      .join("")
-                            <p className="font-semibold text-foreground">{account.name}</p>
+                    return (
-                            <p className="text-xs text-muted-foreground">{account.email}</p>
+                      <TableRow key={account.id} className="hover:bg-muted/40">
+                        <TableCell>
+                          <div className="flex items-center gap-3">
+                            <Avatar className="size-9 border border-border/60">
+                              <AvatarFallback>{initials || account.email.charAt(0).toUpperCase()}</AvatarFallback>
+                            </Avatar>
+                            <div className="min-w-0 space-y-1">
+                              <p className="font-semibold text-foreground">{account.name}</p>
+                              <p className="text-xs text-muted-foreground">{account.email}</p>
+                            </div>
                           </div>
-                        </div>
+                        </TableCell>
-                      </TableCell>
+                        <TableCell className="text-sm text-muted-foreground">
-                      <TableCell className="text-sm text-muted-foreground">
+                          {account.companyName ?? <span className="italic text-muted-foreground/70">Sem empresa</span>}
-                        {account.companyName ?? <span className="italic text-muted-foreground/70">Sem empresa</span>}
+                        </TableCell>
-                      </TableCell>
+                        <TableCell className="text-sm">
-                      <TableCell className="text-sm">
+                          <Badge variant="secondary">{ROLE_LABEL[account.role]}</Badge>
-                        <Badge variant="secondary">{ROLE_LABEL[account.role]}</Badge>
+                        </TableCell>
-                      </TableCell>
+                        <TableCell className="text-xs text-muted-foreground">{formatDate(account.lastSeenAt)}</TableCell>
-                      <TableCell className="text-xs text-muted-foreground">{formatDate(account.lastSeenAt)}</TableCell>
+                        <TableCell className="text-right">
-                      <TableCell className="text-right">
+                          <Checkbox
-                        <Checkbox
+                            checked={rowSelection[account.id] ?? false}
-                          checked={rowSelection[account.id] ?? false}
+                            onCheckedChange={(checked) =>
-                          onCheckedChange={(checked) =>
+                              setRowSelection((prev) => ({ ...prev, [account.id]: Boolean(checked) }))
-                            setRowSelection((prev) => ({ ...prev, [account.id]: Boolean(checked) }))
+                            }
-                          }
+                          />
-                        />
+                        </TableCell>
-                      </TableCell>
+                      </TableRow>
-                    </TableRow>
+                    )
-                  )
+                  })
-                })
+                )}
-              )}
+              </TableBody>
-            </TableBody>
+            </Table>
-          </Table>
+          </div>
         </div>
       </CardContent>
 

src/components/app-sidebar.tsx

@@ -93,7 +93,7 @@ const navigation: NavigationGroup[] = [
     requiredRole: "admin",
     items: [
       {
-        title: "Acessos",
+        title: "Administração",
         url: "/admin",
         icon: UserPlus,
         requiredRole: "admin",

src/components/settings/settings-content.tsx

@@ -60,10 +60,10 @@ const SETTINGS_ACTIONS: SettingsAction[] = [
     icon: Layers3,
   },
   {
-    title: "Acessos",
+    title: "Equipe e convites",
-    description: "Convide novos usuários, revise papéis e acompanhe quem tem acesso ao workspace.",
+    description: "Convide novos usuários, gerencie papéis e acompanhe quem tem acesso ao workspace.",
     href: "/admin",
-    cta: "Abrir painel",
+    cta: "Abrir administração",
     requiredRole: "admin",
     icon: UserPlus,
   },

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

@@ -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 {
+import { PriorityIcon, priorityStyles } from "@/components/tickets/priority-select"
-  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__"
+function getInitials(name: string | null | undefined, fallback: string): string {
-const NO_COMPANY_VALUE = "__no_company__"
+  const normalizedName = (name ?? "").trim()
-const NO_REQUESTER_VALUE = "__no_requester__"
+  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"
+type RequesterPreviewProps = {
-import { cn } from "@/lib/utils"
+  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 base: Array<{ id: string; name: string; isAvulso?: boolean; keywords: string[] }> = [
-    const result: Array<{ id: string; name: string; isAvulso?: boolean }> = [
+      { id: NO_COMPANY_VALUE, name: "Sem empresa", keywords: ["sem empresa", "nenhuma"], isAvulso: false },
-      { 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]
+    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
+                      <SearchableCombobox
-                        value={companyValue}
+                        value={companyValue === AUTO_COMPANY_VALUE ? null : companyValue}
-                        onValueChange={(value) => {
+                        onValueChange={(nextValue) => {
-                          form.setValue("companyId", value, {
+                          const normalizedValue = nextValue ?? AUTO_COMPANY_VALUE
-                            shouldDirty: value !== companyValue,
+                          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) {
-                      >
-                        <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 {
+                          } else if (!nextCustomers.some((customer) => customer.id === requesterValue)) {
-                            form.setValue("requesterId", value, {
+                            const fallbackRequester = nextCustomers[0]
+                            form.setValue("requesterId", fallbackRequester.id, {
                               shouldDirty: true,
                               shouldTouch: true,
                               shouldValidate: form.formState.isSubmitted,
                             })
                           }
                         }}
-                        disabled={filteredCustomers.length === 0}
+                        options={companyComboboxOptions}
-                      >
+                        placeholder="Selecionar empresa"
-                        <SelectTrigger className={selectTriggerClass}>
+                        allowClear
-                          <SelectValue
+                        clearLabel="Qualquer empresa"
-                            placeholder={filteredCustomers.length === 0 ? "Nenhum usuário disponível" : "Selecionar solicitante"}
+                        renderValue={(option) =>
-                          />
+                          option ? (
-                        </SelectTrigger>
+                            <span className="truncate">{option.label}</span>
-                        <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) => (
+                            <span className="text-muted-foreground">Selecionar empresa</span>
-                              <SelectItem key={customer.id} value={customer.id} className={selectItemClass}>
+                          )
-                                <div className="flex flex-col">
+                        }
-                                  <span className="font-medium">{customer.name}</span>
+                        renderOption={(option) => {
-                                  <span className="text-xs text-neutral-500">{customer.email}</span>
+                          const meta = companyOptionMap.get(option.value)
-                                </div>
+                          return (
-                              </SelectItem>
+                            <div className="flex items-center justify-between gap-3">
-                            ))
+                              <div className="flex flex-col">
-                          )}
+                                <span className="font-medium text-foreground">{option.label}</span>
-                        </SelectContent>
+                                {meta?.keywords?.length ? (
-                      </Select>
+                                  <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}

src/components/ui/searchable-combobox.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import { ChevronsUpDown, Check, X } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
+
+export type SearchableComboboxOption = {
+  value: string
+  label: string
+  description?: string
+  keywords?: string[]
+  disabled?: boolean
+}
+
+type SearchableComboboxProps = {
+  value: string | null
+  onValueChange: (value: string | null) => void
+  options: SearchableComboboxOption[]
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  className?: string
+  disabled?: boolean
+  allowClear?: boolean
+  clearLabel?: string
+  renderValue?: (option: SearchableComboboxOption | null) => React.ReactNode
+  renderOption?: (option: SearchableComboboxOption, active: boolean) => React.ReactNode
+}
+
+export function SearchableCombobox({
+  value,
+  onValueChange,
+  options,
+  placeholder = "Selecionar...",
+  searchPlaceholder = "Buscar...",
+  emptyText = "Nenhuma opção encontrada.",
+  className,
+  disabled,
+  allowClear = false,
+  clearLabel = "Limpar seleção",
+  renderValue,
+  renderOption,
+}: SearchableComboboxProps) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState("")
+
+  const selected = useMemo(() => {
+    if (value === null) return null
+    return options.find((option) => option.value === value) ?? null
+  }, [options, value])
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase()
+    if (!term) {
+      return options
+    }
+    return options.filter((option) => {
+      const labelMatch = option.label.toLowerCase().includes(term)
+      const descriptionMatch = option.description?.toLowerCase().includes(term) ?? false
+      const keywordMatch = option.keywords?.some((keyword) => keyword.toLowerCase().includes(term)) ?? false
+      return labelMatch || descriptionMatch || keywordMatch
+    })
+  }, [options, search])
+
+  useEffect(() => {
+    if (!open) {
+      setSearch("")
+    }
+  }, [open])
+
+  const handleSelect = (nextValue: string) => {
+    if (nextValue === value) {
+      setOpen(false)
+      return
+    }
+    onValueChange(nextValue)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "flex h-9 w-full items-center justify-between rounded-full border border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm transition focus-visible:ring-2 focus-visible:ring-ring",
+            className,
+          )}
+        >
+          <span className="truncate text-left">
+            {renderValue ? renderValue(selected) : selected?.label ?? <span className="text-muted-foreground">{placeholder}</span>}
+          </span>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="z-50 w-[var(--radix-popover-trigger-width)] p-0">
+        <div className="border-b border-border/80 p-2">
+          <Input
+            autoFocus
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={searchPlaceholder}
+            className="h-9"
+          />
+        </div>
+        {allowClear ? (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                onValueChange(null)
+                setOpen(false)
+              }}
+              className={cn(
+                "flex w-full items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-muted-foreground transition hover:bg-muted",
+                selected === null ? "text-foreground" : "",
+              )}
+            >
+              <span>{clearLabel}</span>
+              <X className="size-4 opacity-60" />
+            </button>
+            <Separator />
+          </>
+        ) : null}
+        <ScrollArea className="max-h-60">
+          {filtered.length === 0 ? (
+            <div className="px-3 py-4 text-sm text-muted-foreground">{emptyText}</div>
+          ) : (
+            <div className="py-1">
+              {filtered.map((option) => {
+                const isActive = option.value === value
+                const content = renderOption ? (
+                  renderOption(option, isActive)
+                ) : (
+                  <div className="flex flex-col">
+                    <span className="font-medium text-foreground">{option.label}</span>
+                    {option.description ? <span className="text-xs text-muted-foreground">{option.description}</span> : null}
+                  </div>
+                )
+                return (
+                  <button
+                    type="button"
+                    key={option.value}
+                    disabled={option.disabled}
+                    onClick={() => handleSelect(option.value)}
+                    className={cn(
+                      "flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition",
+                      option.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted",
+                      isActive ? "bg-muted" : "",
+                    )}
+                  >
+                    {content}
+                    <Check className={cn("size-4 shrink-0 text-primary", isActive ? "opacity-100" : "opacity-0")} />
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  )
+}
+