esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): ajustes em automações e checklist

Browse source
This commit is contained in:
esdrasrenan 2025-12-13 22:03:35 -03:00
parent aa3c1855b2
commit 7c82ef18b3
5 changed files with 218 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

196
src/components/automations/automation-editor-dialog.tsx
View file

@ -15,7 +15,7 @@ import { Checkbox } from "@/components/ui/checkbox"
import { DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Select, SelectContent, SelectEmptyState, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
@ -689,11 +689,19 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
{(companies ?? []).map((company) => (
<SelectItem key={company.id} value={String(company.id)}>
{company.name}
</SelectItem>
))}
{(companies ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhuma empresa disponível"
createLabel="Gerenciar empresas"
createHref="/admin/companies"
/>
) : (
(companies ?? []).map((company) => (
<SelectItem key={company.id} value={String(company.id)}>
{company.name}
</SelectItem>
))
)}
</SelectContent>
</Select>
) : c.field === "queueId" ? (
@ -707,11 +715,19 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
{(queues ?? []).map((queue) => (
<SelectItem key={queue.id} value={String(queue.id)}>
{queue.name}
</SelectItem>
))}
{(queues ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhuma fila disponível"
createLabel="Gerenciar filas"
createHref="/settings/queues"
/>
) : (
(queues ?? []).map((queue) => (
<SelectItem key={queue.id} value={String(queue.id)}>
{queue.name}
</SelectItem>
))
)}
</SelectContent>
</Select>
) : c.field === "categoryId" ? (
@ -725,11 +741,19 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
{(categories ?? []).map((cat) => (
<SelectItem key={cat.id} value={cat.id}>
{cat.name}
</SelectItem>
))}
{(categories ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhuma categoria disponível"
createLabel="Gerenciar categorias"
createHref="/settings/categories"
/>
) : (
(categories ?? []).map((cat) => (
<SelectItem key={cat.id} value={cat.id}>
{cat.name}
</SelectItem>
))
)}
</SelectContent>
</Select>
) : c.field === "subcategoryId" ? (
@ -743,11 +767,19 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
{subcategoryOptions.map((sub) => (
<SelectItem key={sub.id} value={sub.id}>
{sub.name}
</SelectItem>
))}
{subcategoryOptions.length === 0 ? (
<SelectEmptyState
message="Nenhuma subcategoria disponível"
createLabel="Gerenciar categorias"
createHref="/settings/categories"
/>
) : (
subcategoryOptions.map((sub) => (
<SelectItem key={sub.id} value={sub.id}>
{sub.name}
</SelectItem>
))
)}
</SelectContent>
</Select>
) : (
@ -764,12 +796,22 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value={CLEAR_SELECT_VALUE}>Nenhum</SelectItem>
{(templates ?? []).map((tpl) => (
<SelectItem key={tpl.key} value={tpl.key}>
{tpl.label}
</SelectItem>
))}
{(templates ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhum formulário disponível"
createLabel="Gerenciar formulários"
createHref="/settings/forms"
/>
) : (
<>
<SelectItem value={CLEAR_SELECT_VALUE}>Nenhum</SelectItem>
{(templates ?? []).map((tpl) => (
<SelectItem key={tpl.key} value={tpl.key}>
{tpl.label}
</SelectItem>
))}
</>
)}
</SelectContent>
</Select>
)}
@ -890,11 +932,19 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
{(queues ?? []).map((queue) => (
<SelectItem key={queue.id} value={String(queue.id)}>
{queue.name}
</SelectItem>
))}
{(queues ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhuma fila disponível"
createLabel="Gerenciar filas"
createHref="/settings/queues"
/>
) : (
(queues ?? []).map((queue) => (
<SelectItem key={queue.id} value={String(queue.id)}>
{queue.name}
</SelectItem>
))
)}
</SelectContent>
</Select>
) : a.type === "ASSIGN_TO" ? (
@ -908,11 +958,19 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
{(agents ?? []).map((u) => (
<SelectItem key={u._id} value={String(u._id)}>
{u.name}
</SelectItem>
))}
{(agents ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhum agente disponível"
createLabel="Gerenciar usuários"
createHref="/admin/users"
/>
) : (
(agents ?? []).map((u) => (
<SelectItem key={u._id} value={String(u._id)}>
{u.name}
</SelectItem>
))
)}
</SelectContent>
</Select>
) : a.type === "SET_FORM_TEMPLATE" ? (
@ -929,12 +987,22 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value={CLEAR_SELECT_VALUE}>Nenhum</SelectItem>
{(templates ?? []).map((tpl) => (
<SelectItem key={tpl.key} value={tpl.key}>
{tpl.label}
</SelectItem>
))}
{(templates ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhum formulário disponível"
createLabel="Gerenciar formulários"
createHref="/settings/forms"
/>
) : (
<>
<SelectItem value={CLEAR_SELECT_VALUE}>Nenhum</SelectItem>
{(templates ?? []).map((tpl) => (
<SelectItem key={tpl.key} value={tpl.key}>
{tpl.label}
</SelectItem>
))}
</>
)}
</SelectContent>
</Select>
) : a.type === "SET_CHAT_ENABLED" ? (
@ -959,12 +1027,20 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
{(checklistTemplates ?? []).map((tpl) => (
<SelectItem key={tpl.id} value={String(tpl.id)}>
{tpl.name}
{tpl.company ? ` — ${tpl.company.name}` : ""}
</SelectItem>
))}
{(checklistTemplates ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhum template de checklist"
createLabel="Criar template"
createHref="/settings/checklists"
/>
) : (
(checklistTemplates ?? []).map((tpl) => (
<SelectItem key={tpl.id} value={String(tpl.id)}>
{tpl.name}
{tpl.company ? ` — ${tpl.company.name}` : ""}
</SelectItem>
))
)}
</SelectContent>
</Select>
) : a.type === "SEND_EMAIL" ? (
@ -1040,12 +1116,22 @@ export function AutomationEditorDialog({
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value={CLEAR_SELECT_VALUE}>Nenhum</SelectItem>
{(agents ?? []).map((u) => (
<SelectItem key={u._id} value={String(u._id)}>
{u.name}
</SelectItem>
))}
{(agents ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhum agente disponível"
createLabel="Gerenciar usuários"
createHref="/admin/users"
/>
) : (
<>
<SelectItem value={CLEAR_SELECT_VALUE}>Nenhum</SelectItem>
{(agents ?? []).map((u) => (
<SelectItem key={u._id} value={String(u._id)}>
{u.name}
</SelectItem>
))}
</>
)}
</SelectContent>
</Select>
</div>

10
src/components/automations/automations-manager.tsx
View file

@ -240,13 +240,13 @@ export function AutomationsManager() {
<div className="rounded-3xl border border-slate-200 bg-white/90 shadow-sm overflow-hidden">
<Table className="w-full table-fixed">
<colgroup>
<col style={{ width: "24%" }} />
<col style={{ width: "16%" }} />
<col style={{ width: "22%" }} />
<col style={{ width: "15%" }} />
<col style={{ width: "10%" }} />
<col style={{ width: "7%" }} />
<col style={{ width: "8%" }} />
<col style={{ width: "15%" }} />
<col style={{ width: "13%" }} />
<col style={{ width: "11%" }} />
<col style={{ width: "14%" }} />
<col style={{ width: "14%" }} />
<col style={{ width: "7%" }} />
</colgroup>
<TableHeader className="bg-slate-100/80">

6
src/components/tickets/new-ticket-dialog.tsx
View file

@ -964,8 +964,8 @@ export function NewTicketDialog({
renderValue={(option) => {
if (!option) return <span className="text-muted-foreground">Selecionar solicitante</span>
return (
<div className="flex w-full items-center justify-between gap-2">
<div className="flex min-w-0 flex-col">
<div className="flex w-full flex-wrap items-start gap-2">
<div className="flex min-w-0 flex-1 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>
@ -974,7 +974,7 @@ export function NewTicketDialog({
{selectedCompanyOption && selectedCompanyOption.id !== NO_COMPANY_VALUE ? (
<Badge
variant="outline"
className="hidden shrink-0 rounded-full px-2.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground sm:inline-flex"
className="hidden min-w-0 max-w-full truncate rounded-full px-2.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground sm:ml-auto sm:inline-flex sm:max-w-[45%]"
>
{selectedCompanyOption.name}
</Badge>

14
src/components/tickets/ticket-checklist-card.tsx
View file

@ -200,6 +200,7 @@ export function TicketChecklistCard({
<Button
type="button"
variant="outline"
size="sm"
className="gap-2"
onClick={handleCompleteAll}
disabled={!canComplete || completingAll}
@ -212,7 +213,7 @@ export function TicketChecklistCard({
{canEdit && !isResolved && (templates ?? []).length > 0 ? (
<div className="flex items-center gap-2">
<Select value={selectedTemplateId} onValueChange={setSelectedTemplateId}>
<SelectTrigger className="h-9 w-[220px]">
<SelectTrigger size="sm" className="w-[220px]">
<SelectValue placeholder="Aplicar template..." />
</SelectTrigger>
<SelectContent className="rounded-xl">
@ -228,7 +229,7 @@ export function TicketChecklistCard({
type="button"
onClick={handleApplyTemplate}
disabled={!selectedTemplateId || applyingTemplate}
className="h-9"
size="sm"
>
Aplicar
</Button>
@ -342,7 +343,7 @@ export function TicketChecklistCard({
<Button
type="button"
variant="ghost"
className="h-9 px-2 text-xs text-neutral-700 hover:bg-slate-50"
className="h-9 px-2 text-xs text-neutral-700 hover:bg-slate-100 hover:text-neutral-900 active:bg-slate-200/70 focus-visible:bg-slate-100"
onClick={async () => {
if (!actorId) return
try {
@ -397,7 +398,7 @@ export function TicketChecklistCard({
value={newText}
onChange={(e) => setNewText(e.target.value)}
placeholder="Adicionar item do checklist..."
className="h-9 flex-1 bg-white"
className="h-8 flex-1 bg-white"
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault()
@ -405,11 +406,11 @@ export function TicketChecklistCard({
}
}}
/>
<label className="flex items-center gap-2 text-sm text-neutral-700">
<label className="flex h-8 items-center gap-2 text-sm text-neutral-700">
<Checkbox checked={newRequired} onCheckedChange={(checked) => setNewRequired(Boolean(checked))} />
Obrigatório
</label>
<Button type="button" onClick={handleAdd} disabled={adding} className="h-9 gap-2">
<Button type="button" size="sm" onClick={handleAdd} disabled={adding} className="gap-2">
<Plus className="size-4" />
Adicionar
</Button>
@ -419,4 +420,3 @@ export function TicketChecklistCard({
</Card>
)
}

77
src/components/ui/select.tsx
View file

@ -2,7 +2,8 @@
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon, PlusCircle } from "lucide-react"
import Link from "next/link"
import { cn } from "@/lib/utils"
@ -32,16 +33,16 @@ function SelectTrigger({
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
size?: "sm" | "default"
}) {
return (
<SelectPrimitive.Trigger
data-slot="select-trigger"
data-size={size}
className={cn(
"data-[placeholder]:text-neutral-400 [&_svg:not([class*='text-'])]:text-neutral-500 aria-invalid:border-red-500/80 aria-invalid:ring-red-500/20 flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-sm outline-none transition-all disabled:cursor-not-allowed disabled:opacity-60 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus-visible:ring-[3px] focus-visible:ring-[#00e8ff]/20 focus-visible:border-[#00d6eb] data-[state=open]:border-[#00d6eb] data-[state=open]:shadow-[0_0_0_3px_rgba(0,232,255,0.12)]",
className
)}
{...props}
>
return (
<SelectPrimitive.Trigger
data-slot="select-trigger"
data-size={size}
className={cn(
"data-[placeholder]:text-neutral-400 [&_svg:not([class*='text-'])]:text-neutral-500 aria-invalid:border-red-500/80 aria-invalid:ring-red-500/20 flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-sm outline-none transition-all disabled:cursor-not-allowed disabled:opacity-60 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus-visible:ring-[3px] focus-visible:ring-[#00e8ff]/20 focus-visible:border-[#00d6eb] data-[state=open]:border-[#00d6eb] data-[state=open]:shadow-[0_0_0_3px_rgba(0,232,255,0.12)]",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDownIcon className="size-4 opacity-50" />
@ -61,9 +62,9 @@ function SelectContent({
<SelectPrimitive.Content
data-slot="select-content"
className={cn(
"relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
@ -107,14 +108,14 @@ function SelectItem({
<SelectPrimitive.Item
data-slot="select-item"
className={cn(
"relative flex w-full select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-neutral-700 outline-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[highlighted]:bg-[#00e8ff]/15 data-[highlighted]:text-neutral-900 data-[state=checked]:bg-[#00e8ff]/25 data-[state=checked]:text-neutral-900",
"relative flex w-full select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-neutral-700 outline-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[highlighted]:bg-[#00e8ff]/15 data-[highlighted]:text-neutral-900 data-[state=checked]:bg-[#00e8ff]/25 data-[state=checked]:text-neutral-900",
className
)}
{...props}
>
<span className="absolute right-2 flex size-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<CheckIcon className="size-4 text-[#009bb1]" />
<CheckIcon className="size-4 text-[#009bb1]" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@ -171,9 +172,55 @@ function SelectScrollDownButton({
)
}
function SelectEmptyState({
message = "Nenhuma opção disponível",
createLabel,
createHref,
onCreateClick,
className,
}: {
message?: string
createLabel?: string
createHref?: string
onCreateClick?: () => void
className?: string
}) {
return (
<div
data-slot="select-empty-state"
className={cn(
"flex flex-col items-center gap-2 px-3 py-4 text-center",
className
)}
>
<p className="text-sm text-neutral-500">{message}</p>
{createLabel && createHref && (
<Link
href={createHref}
className="inline-flex items-center gap-1.5 text-sm font-medium text-[#00b8cc] hover:text-[#009bb1] transition-colors"
>
<PlusCircle className="size-4" />
{createLabel}
</Link>
)}
{createLabel && onCreateClick && !createHref && (
<button
type="button"
onClick={onCreateClick}
className="inline-flex items-center gap-1.5 text-sm font-medium text-[#00b8cc] hover:text-[#009bb1] transition-colors"
>
<PlusCircle className="size-4" />
{createLabel}
</button>
)}
</div>
)
}
export {
Select,
SelectContent,
SelectEmptyState,
SelectGroup,
SelectItem,
SelectLabel,