fix(ui): ajustes em automações e checklist
This commit is contained in:
esdrasrenan
parent
aa3c1855b2
commit
7c82ef18b3
5 changed files with 218 additions and 85 deletions
|
|
@ -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) => (
|
||||
{(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) => (
|
||||
{(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) => (
|
||||
{(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) => (
|
||||
{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">
|
||||
{(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) => (
|
||||
{(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) => (
|
||||
{(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">
|
||||
{(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) => (
|
||||
{(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">
|
||||
{(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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue