diff --git a/components/shadcn-studio/input/input-41.tsx b/components/shadcn-studio/input/input-41.tsx new file mode 100644 index 0000000..4eb3d71 --- /dev/null +++ b/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 ( + + + + + + + +

+ Built with{' '} + + React Aria + +

+ + ) +} + +export default InputWithEndButtonsDemo diff --git a/components/shadcn-studio/input/input-end-text-addon.tsx b/components/shadcn-studio/input/input-end-text-addon.tsx new file mode 100644 index 0000000..c96081b --- /dev/null +++ b/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 ( +
+ +
+ + + .com + +
+
+ ) +} + +export default InputEndTextAddOnDemo diff --git a/convex/tickets.ts b/convex/tickets.ts index 83bf349..4958139 100644 --- a/convex/tickets.ts +++ b/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") }, diff --git a/package.json b/package.json index 7af0e28..c93fa0e 100644 --- a/package.json +++ b/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", diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 29156a9..8217ac7 100644 --- a/src/app/admin/page.tsx +++ b/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" /> diff --git a/src/app/api/admin/users/cleanup/route.ts b/src/app/api/admin/users/cleanup/route.ts new file mode 100644 index 0000000..64d173c --- /dev/null +++ b/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() + 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) +} diff --git a/src/components/admin/admin-users-manager.tsx b/src/components/admin/admin-users-manager.tsx index e6b0a79..3ea7001 100644 --- a/src/components/admin/admin-users-manager.tsx +++ b/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 = { @@ -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) { - const { convexUserId } = useAuth() +export function AdminUsersManager({ + initialUsers, + initialInvites, + roleOptions, + defaultTenantId, + viewerRole, + visibleTabs, + defaultTab, +}: Props) { + const { convexUserId, session } = useAuth() const [users, setUsers] = useState(initialUsers) const [invites, setInvites] = useState(initialInvites) const [companies, setCompanies] = useState([]) @@ -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(() => { + 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(() => { + 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(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() + 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(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) { event.preventDefault() const normalizedEmail = linkEmail.trim().toLowerCase() @@ -1002,23 +1103,48 @@ async function handleDeleteUser() { return ( <> - + setTab(value as AdminUsersTab)} className="w-full"> - Equipe - Usuários - Convites + {tabs.includes("team") ? ( + + Equipe + + ) : null} + {tabs.includes("users") ? ( + + Usuários + + ) : null} + {tabs.includes("invites") ? ( + + Convites + + ) : null} + {tabs.includes("team") ? (

Equipe cadastrada

{filteredTeamUsers.length} {filteredTeamUsers.length === 1 ? "membro" : "membros"}

- +
+ + +
@@ -1291,7 +1417,9 @@ async function handleDeleteUser() { + ) : null} + {tabs.includes("users") ? (
@@ -1556,7 +1684,9 @@ async function handleDeleteUser() { + ) : null} + {tabs.includes("invites") ? ( @@ -1813,7 +1943,51 @@ async function handleDeleteUser() { + ) : null} + { + if (!open && cleanupPending) return + setCleanupDialogOpen(open) + }} + > + + + Remover dados de teste + + Remove usuários, tickets e acessos que não estiverem na lista de e-mails preservada. Esta ação não pode ser desfeita. + + +
+
+ + setCleanupKeepEmails(event.target.value)} + placeholder="email@empresa.com, outro@dominio.com" + /> +

+ Sempre preservamos automaticamente: {viewerEmail ?? "seu e-mail atual"} e{" "} + {DEFAULT_KEEP_EMAILS.join(", ")}. +

+
+
+

Lista final preservada

+

{cleanupPreview}

+
+
+ + + + + + { diff --git a/src/components/admin/companies/admin-companies-manager.tsx b/src/components/admin/companies/admin-companies-manager.tsx index edcae59..7fd7d1e 100644 --- a/src/components/admin/companies/admin-companies-manager.tsx +++ b/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 Empresa Contratos ativos Contatos - SLA Máquinas Ações @@ -771,7 +761,7 @@ function TableView({ companies, machineCountsBySlug, onEdit, onDelete }: TableVi {companies.length === 0 ? ( - +

Nenhuma empresa encontrada com os filtros atuais.

@@ -852,27 +842,6 @@ function TableView({ companies, machineCountsBySlug, onEdit, onDelete }: TableVi )} - - {company.sla ? ( -
-

- {company.sla.calendar.toUpperCase()} -

-
    - {company.sla.severities.map((severity) => ( -
  • - {SLA_LEVEL_LABEL[severity.level]} - - {severity.responseMinutes}m · {severity.resolutionMinutes}m - -
    • - ))} -
-
- ) : ( -

Sem SLA cadastrado.

- )} - {machineCount} diff --git a/src/components/admin/users/admin-users-workspace.tsx b/src/components/admin/users/admin-users-workspace.tsx index 23a8353..5cf5fc9 100644 --- a/src/components/admin/users/admin-users-workspace.tsx +++ b/src/components/admin/users/admin-users-workspace.tsx @@ -266,65 +266,67 @@ function AccountsTable({ initialAccounts }: { initialAccounts: AdminAccount[] })
- - - - Usuário - Empresa - Papel - Último acesso - Selecionar - - - - {filteredAccounts.length === 0 ? ( +
+
+ - - Nenhum usuário encontrado. - + Usuário + Empresa + Papel + Último acesso + Selecionar - ) : ( - filteredAccounts.map((account) => { - const initials = account.name - .split(" ") - .filter(Boolean) - .slice(0, 2) - .map((part) => part.charAt(0).toUpperCase()) - .join("") - return ( - - -
- - {initials || account.email.charAt(0).toUpperCase()} - -
-

{account.name}

-

{account.email}

+ + + {filteredAccounts.length === 0 ? ( + + + Nenhum usuário encontrado. + + + ) : ( + filteredAccounts.map((account) => { + const initials = account.name + .split(" ") + .filter(Boolean) + .slice(0, 2) + .map((part) => part.charAt(0).toUpperCase()) + .join("") + return ( + + +
+ + {initials || account.email.charAt(0).toUpperCase()} + +
+

{account.name}

+

{account.email}

+
-
- - - {account.companyName ?? Sem empresa} - - - {ROLE_LABEL[account.role]} - - {formatDate(account.lastSeenAt)} - - - setRowSelection((prev) => ({ ...prev, [account.id]: Boolean(checked) })) - } - /> - - - ) - }) - )} - -
+ + + {account.companyName ?? Sem empresa} + + + {ROLE_LABEL[account.role]} + + {formatDate(account.lastSeenAt)} + + + setRowSelection((prev) => ({ ...prev, [account.id]: Boolean(checked) })) + } + /> + + + ) + }) + )} + + +
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx index 5118f0a..2c65216 100644 --- a/src/components/app-sidebar.tsx +++ b/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", diff --git a/src/components/settings/settings-content.tsx b/src/components/settings/settings-content.tsx index 08beb67..b52b0d2 100644 --- a/src/components/settings/settings-content.tsx +++ b/src/components/settings/settings-content.tsx @@ -60,10 +60,10 @@ const SETTINGS_ACTIONS: SettingsAction[] = [ icon: Layers3, }, { - title: "Acessos", - description: "Convide novos usuários, revise papéis e acompanhe quem tem acesso ao workspace.", + title: "Equipe e convites", + 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, }, diff --git a/src/components/tickets/new-ticket-dialog.tsx b/src/components/tickets/new-ticket-dialog.tsx index cc0ef04..8175197 100644 --- a/src/components/tickets/new-ticket-dialog.tsx +++ b/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 { - PriorityIcon, - priorityStyles, -} from "@/components/tickets/priority-select" +import { PriorityIcon, priorityStyles } from "@/components/tickets/priority-select" import { CategorySelectFields } from "@/components/tickets/category-select" +import { Avatar, AvatarFallback } from "@/components/ui/avatar" +import { Badge } from "@/components/ui/badge" +import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox" +import { useDefaultQueues } from "@/hooks/use-default-queues" +import { cn } from "@/lib/utils" type CustomerOption = { id: string @@ -36,12 +38,58 @@ type CustomerOption = { avatarUrl: string | null } -const ALL_COMPANIES_VALUE = "__all__" -const NO_COMPANY_VALUE = "__no_company__" -const NO_REQUESTER_VALUE = "__no_requester__" +function getInitials(name: string | null | undefined, fallback: string): string { + const normalizedName = (name ?? "").trim() + if (normalizedName.length > 0) { + const parts = normalizedName.split(/\s+/).slice(0, 2) + const initials = parts.map((part) => part.charAt(0).toUpperCase()).join("") + if (initials.length > 0) { + return initials + } + } + const normalizedFallback = (fallback ?? "").trim() + return normalizedFallback.length > 0 ? normalizedFallback.charAt(0).toUpperCase() : "?" +} -import { useDefaultQueues } from "@/hooks/use-default-queues" -import { cn } from "@/lib/utils" +type RequesterPreviewProps = { + customer: CustomerOption | null + company: { id: string; name: string; isAvulso?: boolean } | null +} + +function RequesterPreview({ customer, company }: RequesterPreviewProps) { + if (!customer) { + return ( +
+ Selecione um solicitante para visualizar os detalhes aqui. +
+ ) + } + + const initials = getInitials(customer.name, customer.email) + const companyLabel = customer.companyName ?? company?.name ?? "Sem empresa" + + return ( +
+
+ + {initials} + +
+

{customer.name || customer.email}

+

{customer.email}

+
+
+
+ + {companyLabel} + +
+
+ ) +} + +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() + const map = new Map() companies.forEach((company) => { - map.set(company.id, { id: company.id, name: company.name, isAvulso: false }) + map.set(company.id, { + id: company.id, + name: company.name.trim().length > 0 ? company.name : "Empresa sem nome", + isAvulso: false, + keywords: company.slug ? [company.slug] : [], + }) }) customers.forEach((customer) => { if (customer.companyId && !map.has(customer.companyId)) { map.set(customer.companyId, { id: customer.companyId, - name: customer.companyName ?? "Empresa sem nome", + name: customer.companyName && customer.companyName.trim().length > 0 ? customer.companyName : "Empresa sem nome", isAvulso: customer.companyIsAvulso, + keywords: [], }) } }) - const includeNoCompany = customers.some((customer) => !customer.companyId) - const result: Array<{ id: string; name: string; isAvulso?: boolean }> = [ - { id: ALL_COMPANIES_VALUE, name: "Todas as empresas" }, + const base: Array<{ id: string; name: string; isAvulso?: boolean; keywords: string[] }> = [ + { id: NO_COMPANY_VALUE, name: "Sem empresa", keywords: ["sem empresa", "nenhuma"], isAvulso: false }, ] - if (includeNoCompany) { - result.push({ id: NO_COMPANY_VALUE, name: "Sem empresa" }) - } const sorted = Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name, "pt-BR")) - return [...result, ...sorted] + return [...base, ...sorted] }, [companies, customers]) const filteredCustomers = useMemo(() => { - if (companyValue === ALL_COMPANIES_VALUE) return customers + if (companyValue === AUTO_COMPANY_VALUE) return customers if (companyValue === NO_COMPANY_VALUE) { return customers.filter((customer) => !customer.companyId) } return customers.filter((customer) => customer.companyId === companyValue) }, [companyValue, customers]) + const companyOptionMap = useMemo( + () => new Map(companyOptions.map((option) => [option.id, option])), + [companyOptions], + ) + + const companyComboboxOptions = useMemo( + () => + 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( + () => + 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
Empresa - - - - - Solicitante * - - + Selecionar empresa + ) + } + renderOption={(option) => { + const meta = companyOptionMap.get(option.value) + return ( +
+
+ {option.label} + {meta?.keywords?.length ? ( + {meta.keywords[0]} + ) : null} +
+ {meta?.isAvulso ? ( + + Avulsa + + ) : null} +
+ ) + }} + /> + + + + Solicitante * + + + { + 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 ? ( +
+ {option.label} + {option.description ? ( + {option.description} + ) : null} +
+ ) : ( + Selecionar solicitante + ) + } + renderOption={(option) => { + const record = requesterById.get(option.value) + const initials = getInitials(record?.name, record?.email ?? option.label) + return ( +
+ + {initials} + +
+

{option.label}

+

{record?.email ?? option.description}

+
+ {record?.companyName ? ( + + {record.companyName} + + ) : null} +
+ ) + }} + /> {filteredCustomers.length === 0 ? ( Nenhum colaborador disponível para a empresa selecionada. ) : null} diff --git a/src/components/ui/searchable-combobox.tsx b/src/components/ui/searchable-combobox.tsx new file mode 100644 index 0000000..80a8fb8 --- /dev/null +++ b/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 ( + + + + + +
+ setSearch(event.target.value)} + placeholder={searchPlaceholder} + className="h-9" + /> +
+ {allowClear ? ( + <> + + + + ) : null} + + {filtered.length === 0 ? ( +
{emptyText}
+ ) : ( +
+ {filtered.map((option) => { + const isActive = option.value === value + const content = renderOption ? ( + renderOption(option, isActive) + ) : ( +
+ {option.label} + {option.description ? {option.description} : null} +
+ ) + return ( + + ) + })} +
+ )} + + + + ) +} +