feat: improve requester combobox and admin cleanup flows
This commit is contained in:
Esdras Renan
parent
788f6928a1
commit
37c32149a6
13 changed files with 923 additions and 180 deletions
45
components/shadcn-studio/input/input-41.tsx
Normal file
45
components/shadcn-studio/input/input-41.tsx
Normal file
|
|
@ -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
|
||||
24
components/shadcn-studio/input/input-end-text-addon.tsx
Normal file
24
components/shadcn-studio/input/input-end-text-addon.tsx
Normal file
|
|
@ -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
|
||||
|
|
@ -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") },
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
160
src/app/api/admin/users/cleanup/route.ts
Normal file
160
src/app/api/admin/users/cleanup/route.ts
Normal file
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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) {
|
||||
const { convexUserId } = useAuth()
|
||||
export function AdminUsersManager({
|
||||
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>
|
||||
<TabsTrigger value="users" className="rounded-lg">Usuários</TabsTrigger>
|
||||
<TabsTrigger value="invites" className="rounded-lg">Convites</TabsTrigger>
|
||||
{tabs.includes("team") ? (
|
||||
<TabsTrigger value="team" className="rounded-lg">
|
||||
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>
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
|
||||
<Button onClick={handleOpenCreateUser} size="sm" className="gap-2 self-start sm:self-auto">
|
||||
<IconUserPlus className="size-4" />
|
||||
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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -266,8 +266,9 @@ function AccountsTable({ initialAccounts }: { initialAccounts: AdminAccount[] })
|
|||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="min-w-[64rem]">
|
||||
<TableHeader>
|
||||
<div className="min-w-[64rem] overflow-hidden rounded-lg border">
|
||||
<Table className="w-full table-fixed text-sm">
|
||||
<TableHeader className="bg-muted">
|
||||
<TableRow>
|
||||
<TableHead>Usuário</TableHead>
|
||||
<TableHead>Empresa</TableHead>
|
||||
|
|
@ -326,6 +327,7 @@ function AccountsTable({ initialAccounts }: { initialAccounts: AdminAccount[] })
|
|||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<Dialog open={deleteDialogIds.length > 0} onOpenChange={(open) => (!open ? closeDeleteDialog() : null)}>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ const navigation: NavigationGroup[] = [
|
|||
requiredRole: "admin",
|
||||
items: [
|
||||
{
|
||||
title: "Acessos",
|
||||
title: "Administração",
|
||||
url: "/admin",
|
||||
icon: UserPlus,
|
||||
requiredRole: "admin",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,11 +19,13 @@ import { toast } from "sonner"
|
|||
import { Spinner } from "@/components/ui/spinner"
|
||||
import { Dropzone } from "@/components/ui/dropzone"
|
||||
import { RichTextEditor, sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
|
||||
import {
|
||||
PriorityIcon,
|
||||
priorityStyles,
|
||||
} from "@/components/tickets/priority-select"
|
||||
import { PriorityIcon, priorityStyles } from "@/components/tickets/priority-select"
|
||||
import { CategorySelectFields } from "@/components/tickets/category-select"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
|
||||
import { useDefaultQueues } from "@/hooks/use-default-queues"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type CustomerOption = {
|
||||
id: string
|
||||
|
|
@ -36,12 +38,58 @@ type CustomerOption = {
|
|||
avatarUrl: string | null
|
||||
}
|
||||
|
||||
const ALL_COMPANIES_VALUE = "__all__"
|
||||
const NO_COMPANY_VALUE = "__no_company__"
|
||||
const NO_REQUESTER_VALUE = "__no_requester__"
|
||||
function getInitials(name: string | null | undefined, fallback: string): string {
|
||||
const normalizedName = (name ?? "").trim()
|
||||
if (normalizedName.length > 0) {
|
||||
const parts = normalizedName.split(/\s+/).slice(0, 2)
|
||||
const initials = parts.map((part) => part.charAt(0).toUpperCase()).join("")
|
||||
if (initials.length > 0) {
|
||||
return initials
|
||||
}
|
||||
}
|
||||
const normalizedFallback = (fallback ?? "").trim()
|
||||
return normalizedFallback.length > 0 ? normalizedFallback.charAt(0).toUpperCase() : "?"
|
||||
}
|
||||
|
||||
import { useDefaultQueues } from "@/hooks/use-default-queues"
|
||||
import { cn } from "@/lib/utils"
|
||||
type RequesterPreviewProps = {
|
||||
customer: CustomerOption | null
|
||||
company: { id: string; name: string; isAvulso?: boolean } | null
|
||||
}
|
||||
|
||||
function RequesterPreview({ customer, company }: RequesterPreviewProps) {
|
||||
if (!customer) {
|
||||
return (
|
||||
<div className="mb-3 rounded-xl border border-dashed border-border/80 bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
|
||||
Selecione um solicitante para visualizar os detalhes aqui.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const initials = getInitials(customer.name, customer.email)
|
||||
const companyLabel = customer.companyName ?? company?.name ?? "Sem empresa"
|
||||
|
||||
return (
|
||||
<div className="mb-3 flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="size-9 border border-border/60 bg-white text-sm font-semibold uppercase">
|
||||
<AvatarFallback>{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0 space-y-0.5">
|
||||
<p className="truncate font-semibold text-foreground">{customer.name || customer.email}</p>
|
||||
<p className="truncate text-xs text-muted-foreground">{customer.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="rounded-full border-slate-200 px-2.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
|
||||
{companyLabel}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const NO_COMPANY_VALUE = "__no_company__"
|
||||
const AUTO_COMPANY_VALUE = "__auto__"
|
||||
|
||||
const schema = z.object({
|
||||
subject: z.string().default(""),
|
||||
|
|
@ -70,7 +118,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
channel: "MANUAL",
|
||||
queueName: null,
|
||||
assigneeId: null,
|
||||
companyId: ALL_COMPANIES_VALUE,
|
||||
companyId: AUTO_COMPANY_VALUE,
|
||||
requesterId: "",
|
||||
categoryId: "",
|
||||
subcategoryId: "",
|
||||
|
|
@ -132,44 +180,90 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
const queueValue = form.watch("queueName") ?? "NONE"
|
||||
const assigneeValue = form.watch("assigneeId") ?? null
|
||||
const assigneeSelectValue = assigneeValue ?? "NONE"
|
||||
const companyValue = form.watch("companyId") ?? ALL_COMPANIES_VALUE
|
||||
const companyValue = form.watch("companyId") ?? AUTO_COMPANY_VALUE
|
||||
const requesterValue = form.watch("requesterId") ?? ""
|
||||
const categoryIdValue = form.watch("categoryId")
|
||||
const subcategoryIdValue = form.watch("subcategoryId")
|
||||
const isSubmitted = form.formState.isSubmitted
|
||||
const companyOptions = useMemo(() => {
|
||||
const map = new Map<string, { id: string; name: string; isAvulso?: boolean }>()
|
||||
const map = new Map<string, { id: string; name: string; isAvulso?: boolean; keywords: string[] }>()
|
||||
companies.forEach((company) => {
|
||||
map.set(company.id, { id: company.id, name: company.name, isAvulso: false })
|
||||
map.set(company.id, {
|
||||
id: company.id,
|
||||
name: company.name.trim().length > 0 ? company.name : "Empresa sem nome",
|
||||
isAvulso: false,
|
||||
keywords: company.slug ? [company.slug] : [],
|
||||
})
|
||||
})
|
||||
customers.forEach((customer) => {
|
||||
if (customer.companyId && !map.has(customer.companyId)) {
|
||||
map.set(customer.companyId, {
|
||||
id: customer.companyId,
|
||||
name: customer.companyName ?? "Empresa sem nome",
|
||||
name: customer.companyName && customer.companyName.trim().length > 0 ? customer.companyName : "Empresa sem nome",
|
||||
isAvulso: customer.companyIsAvulso,
|
||||
keywords: [],
|
||||
})
|
||||
}
|
||||
})
|
||||
const includeNoCompany = customers.some((customer) => !customer.companyId)
|
||||
const result: Array<{ id: string; name: string; isAvulso?: boolean }> = [
|
||||
{ id: ALL_COMPANIES_VALUE, name: "Todas as empresas" },
|
||||
const base: Array<{ id: string; name: string; isAvulso?: boolean; keywords: string[] }> = [
|
||||
{ id: NO_COMPANY_VALUE, name: "Sem empresa", keywords: ["sem empresa", "nenhuma"], isAvulso: false },
|
||||
]
|
||||
if (includeNoCompany) {
|
||||
result.push({ id: NO_COMPANY_VALUE, name: "Sem empresa" })
|
||||
}
|
||||
const sorted = Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
||||
return [...result, ...sorted]
|
||||
return [...base, ...sorted]
|
||||
}, [companies, customers])
|
||||
|
||||
const filteredCustomers = useMemo(() => {
|
||||
if (companyValue === ALL_COMPANIES_VALUE) return customers
|
||||
if (companyValue === AUTO_COMPANY_VALUE) return customers
|
||||
if (companyValue === NO_COMPANY_VALUE) {
|
||||
return customers.filter((customer) => !customer.companyId)
|
||||
}
|
||||
return customers.filter((customer) => customer.companyId === companyValue)
|
||||
}, [companyValue, customers])
|
||||
|
||||
const companyOptionMap = useMemo(
|
||||
() => new Map(companyOptions.map((option) => [option.id, option])),
|
||||
[companyOptions],
|
||||
)
|
||||
|
||||
const companyComboboxOptions = useMemo<SearchableComboboxOption[]>(
|
||||
() =>
|
||||
companyOptions.map((option) => ({
|
||||
value: option.id,
|
||||
label: option.name,
|
||||
description: option.isAvulso ? "Empresa avulsa" : undefined,
|
||||
keywords: option.keywords,
|
||||
})),
|
||||
[companyOptions],
|
||||
)
|
||||
|
||||
const selectedCompanyOption = useMemo(() => {
|
||||
if (companyValue === AUTO_COMPANY_VALUE) return null
|
||||
const key = companyValue === NO_COMPANY_VALUE ? NO_COMPANY_VALUE : companyValue
|
||||
return companyOptionMap.get(key) ?? null
|
||||
}, [companyOptionMap, companyValue])
|
||||
|
||||
const requesterById = useMemo(
|
||||
() => new Map(customers.map((customer) => [customer.id, customer])),
|
||||
[customers],
|
||||
)
|
||||
|
||||
const selectedRequester = requesterById.get(requesterValue) ?? null
|
||||
|
||||
const requesterComboboxOptions = useMemo<SearchableComboboxOption[]>(
|
||||
() =>
|
||||
filteredCustomers.map((customer) => ({
|
||||
value: customer.id,
|
||||
label: customer.name && customer.name.trim().length > 0 ? customer.name : customer.email,
|
||||
description: customer.email,
|
||||
keywords: [
|
||||
customer.email.toLowerCase(),
|
||||
customer.companyName?.toLowerCase?.() ?? "",
|
||||
customer.name?.toLowerCase?.() ?? "",
|
||||
].filter(Boolean),
|
||||
})),
|
||||
[filteredCustomers],
|
||||
)
|
||||
|
||||
const selectTriggerClass = "flex h-8 w-full items-center justify-between rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
|
||||
const selectItemClass = "flex items-center gap-2 rounded-md px-2 py-2 text-sm text-neutral-800 transition data-[state=checked]:bg-[#00e8ff]/15 data-[state=checked]:text-neutral-900 focus:bg-[#00e8ff]/10"
|
||||
const [assigneeInitialized, setAssigneeInitialized] = useState(false)
|
||||
|
|
@ -181,7 +275,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
useEffect(() => {
|
||||
if (!open) {
|
||||
setCustomersInitialized(false)
|
||||
form.setValue("companyId", ALL_COMPANIES_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
form.setValue("companyId", AUTO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
form.setValue("requesterId", "", { shouldDirty: false, shouldTouch: false })
|
||||
return
|
||||
}
|
||||
|
|
@ -199,10 +293,8 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
form.setValue("requesterId", initialRequester ?? "", { shouldDirty: false, shouldTouch: false })
|
||||
if (selected?.companyId) {
|
||||
form.setValue("companyId", selected.companyId, { shouldDirty: false, shouldTouch: false })
|
||||
} else if (selected) {
|
||||
form.setValue("companyId", NO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
} else {
|
||||
form.setValue("companyId", ALL_COMPANIES_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
form.setValue("companyId", selected ? NO_COMPANY_VALUE : AUTO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
}
|
||||
setCustomersInitialized(true)
|
||||
}, [open, customersInitialized, customers, convexUserId, form])
|
||||
|
|
@ -465,72 +557,137 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
<div className="space-y-4">
|
||||
<Field>
|
||||
<FieldLabel>Empresa</FieldLabel>
|
||||
<Select
|
||||
value={companyValue}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("companyId", value, {
|
||||
shouldDirty: value !== companyValue,
|
||||
<SearchableCombobox
|
||||
value={companyValue === AUTO_COMPANY_VALUE ? null : companyValue}
|
||||
onValueChange={(nextValue) => {
|
||||
const normalizedValue = nextValue ?? AUTO_COMPANY_VALUE
|
||||
const nextCustomers =
|
||||
normalizedValue === AUTO_COMPANY_VALUE
|
||||
? customers
|
||||
: normalizedValue === NO_COMPANY_VALUE
|
||||
? customers.filter((customer) => !customer.companyId)
|
||||
: customers.filter((customer) => customer.companyId === normalizedValue)
|
||||
form.setValue("companyId", normalizedValue, {
|
||||
shouldDirty: normalizedValue !== companyValue,
|
||||
shouldTouch: true,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue placeholder="Selecionar empresa" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
{companyOptions.map((option) => (
|
||||
<SelectItem key={option.id} value={option.id} className={selectItemClass}>
|
||||
{option.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel className="flex items-center gap-1">
|
||||
Solicitante <span className="text-destructive">*</span>
|
||||
</FieldLabel>
|
||||
<Select
|
||||
value={requesterValue || NO_REQUESTER_VALUE}
|
||||
onValueChange={(value) => {
|
||||
if (value === NO_REQUESTER_VALUE) {
|
||||
if (nextCustomers.length === 0) {
|
||||
form.setValue("requesterId", "", {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
shouldValidate: form.formState.isSubmitted,
|
||||
})
|
||||
} else {
|
||||
form.setValue("requesterId", value, {
|
||||
} else if (!nextCustomers.some((customer) => customer.id === requesterValue)) {
|
||||
const fallbackRequester = nextCustomers[0]
|
||||
form.setValue("requesterId", fallbackRequester.id, {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
shouldValidate: form.formState.isSubmitted,
|
||||
})
|
||||
}
|
||||
}}
|
||||
disabled={filteredCustomers.length === 0}
|
||||
>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue
|
||||
placeholder={filteredCustomers.length === 0 ? "Nenhum usuário disponível" : "Selecionar solicitante"}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-64 rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
{filteredCustomers.length === 0 ? (
|
||||
<SelectItem value={NO_REQUESTER_VALUE} disabled className={selectItemClass}>
|
||||
Nenhum usuário disponível
|
||||
</SelectItem>
|
||||
options={companyComboboxOptions}
|
||||
placeholder="Selecionar empresa"
|
||||
allowClear
|
||||
clearLabel="Qualquer empresa"
|
||||
renderValue={(option) =>
|
||||
option ? (
|
||||
<span className="truncate">{option.label}</span>
|
||||
) : (
|
||||
filteredCustomers.map((customer) => (
|
||||
<SelectItem key={customer.id} value={customer.id} className={selectItemClass}>
|
||||
<span className="text-muted-foreground">Selecionar empresa</span>
|
||||
)
|
||||
}
|
||||
renderOption={(option) => {
|
||||
const meta = companyOptionMap.get(option.value)
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{customer.name}</span>
|
||||
<span className="text-xs text-neutral-500">{customer.email}</span>
|
||||
<span className="font-medium text-foreground">{option.label}</span>
|
||||
{meta?.keywords?.length ? (
|
||||
<span className="text-xs text-muted-foreground">{meta.keywords[0]}</span>
|
||||
) : null}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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}
|
||||
|
|
|
|||
174
src/components/ui/searchable-combobox.tsx
Normal file
174
src/components/ui/searchable-combobox.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue