feat: checklists em tickets + automações
- Adiciona checklist no ticket (itens obrigatórios/opcionais) e bloqueia encerramento com pendências\n- Cria templates de checklist (globais/por empresa) + tela em /settings/checklists\n- Nova ação de automação: aplicar template de checklist\n- Corrige crash do Select (value vazio), warnings de Dialog e dimensionamento de charts\n- Ajusta SMTP (STARTTLS) e melhora teste de integração
This commit is contained in:
esdrasrenan
parent
4306b0504d
commit
88a9ef454e
27 changed files with 2685 additions and 226 deletions
|
|
@ -34,9 +34,10 @@ import { cn } from "@/lib/utils"
|
|||
import { priorityStyles } from "@/lib/ticket-priority-style"
|
||||
import { normalizeCustomFieldInputs } from "@/lib/ticket-form-helpers"
|
||||
import type { TicketFormDefinition, TicketFormFieldDefinition } from "@/lib/ticket-form-types"
|
||||
import { Calendar as CalendarIcon } from "lucide-react"
|
||||
import { Calendar as CalendarIcon, ListChecks, Plus, Trash2 } from "lucide-react"
|
||||
import { TimePicker } from "@/components/ui/time-picker"
|
||||
import { VISIT_KEYWORDS } from "@/lib/ticket-matchers"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
|
||||
type TriggerVariant = "button" | "card"
|
||||
|
||||
|
|
@ -51,6 +52,19 @@ type CustomerOption = {
|
|||
avatarUrl: string | null
|
||||
}
|
||||
|
||||
type ChecklistDraftItem = {
|
||||
id: string
|
||||
text: string
|
||||
required: boolean
|
||||
}
|
||||
|
||||
type ChecklistTemplateOption = {
|
||||
id: Id<"ticketChecklistTemplates">
|
||||
name: string
|
||||
company: { id: Id<"companies">; name: string } | null
|
||||
items: Array<{ id: string; text: string; required: boolean }>
|
||||
}
|
||||
|
||||
function getInitials(name: string | null | undefined, fallback: string): string {
|
||||
const normalizedName = (name ?? "").trim()
|
||||
if (normalizedName.length > 0) {
|
||||
|
|
@ -219,6 +233,17 @@ export function NewTicketDialog({
|
|||
: "skip"
|
||||
) as TicketFormDefinition[] | undefined
|
||||
|
||||
const checklistTemplates = useQuery(
|
||||
api.checklistTemplates.listActive,
|
||||
convexUserId
|
||||
? {
|
||||
tenantId: DEFAULT_TENANT_ID,
|
||||
viewerId: convexUserId as Id<"users">,
|
||||
companyId: companyValue !== NO_COMPANY_VALUE ? (companyValue as Id<"companies">) : undefined,
|
||||
}
|
||||
: "skip"
|
||||
) as ChecklistTemplateOption[] | undefined
|
||||
|
||||
const forms = useMemo<TicketFormDefinition[]>(() => {
|
||||
const fallback: TicketFormDefinition = {
|
||||
key: "default",
|
||||
|
|
@ -240,6 +265,29 @@ export function NewTicketDialog({
|
|||
const [customFieldValues, setCustomFieldValues] = useState<Record<string, unknown>>({})
|
||||
const [openCalendarField, setOpenCalendarField] = useState<string | null>(null)
|
||||
const [visitDatePickerOpen, setVisitDatePickerOpen] = useState(false)
|
||||
const [manualChecklist, setManualChecklist] = useState<ChecklistDraftItem[]>([])
|
||||
const [appliedChecklistTemplateIds, setAppliedChecklistTemplateIds] = useState<string[]>([])
|
||||
const [checklistTemplateToApply, setChecklistTemplateToApply] = useState<string>("")
|
||||
const [checklistItemText, setChecklistItemText] = useState("")
|
||||
const [checklistItemRequired, setChecklistItemRequired] = useState(true)
|
||||
|
||||
const appliedChecklistTemplates = useMemo(() => {
|
||||
const selected = new Set(appliedChecklistTemplateIds.map(String))
|
||||
return (checklistTemplates ?? []).filter((tpl) => selected.has(String(tpl.id)))
|
||||
}, [appliedChecklistTemplateIds, checklistTemplates])
|
||||
|
||||
const checklistTemplatePreviewItems = useMemo(
|
||||
() =>
|
||||
appliedChecklistTemplates.flatMap((tpl) =>
|
||||
(tpl.items ?? []).map((item) => ({
|
||||
key: `${String(tpl.id)}:${item.id}`,
|
||||
text: item.text,
|
||||
required: item.required,
|
||||
templateName: tpl.name,
|
||||
}))
|
||||
),
|
||||
[appliedChecklistTemplates]
|
||||
)
|
||||
|
||||
const selectedForm = useMemo(() => forms.find((formDef) => formDef.key === selectedFormKey) ?? forms[0], [forms, selectedFormKey])
|
||||
|
||||
|
|
@ -418,6 +466,11 @@ export function NewTicketDialog({
|
|||
useEffect(() => {
|
||||
if (!open) {
|
||||
setCustomersInitialized(false)
|
||||
setManualChecklist([])
|
||||
setAppliedChecklistTemplateIds([])
|
||||
setChecklistTemplateToApply("")
|
||||
setChecklistItemText("")
|
||||
setChecklistItemRequired(true)
|
||||
form.setValue("companyId", NO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
form.setValue("requesterId", "", { shouldDirty: false, shouldTouch: false })
|
||||
return
|
||||
|
|
@ -521,6 +574,31 @@ export function NewTicketDialog({
|
|||
}
|
||||
}
|
||||
|
||||
const handleApplyChecklistTemplate = () => {
|
||||
const templateId = checklistTemplateToApply.trim()
|
||||
if (!templateId) return
|
||||
setAppliedChecklistTemplateIds((prev) => {
|
||||
if (prev.includes(templateId)) return prev
|
||||
return [...prev, templateId]
|
||||
})
|
||||
setChecklistTemplateToApply("")
|
||||
}
|
||||
|
||||
const handleAddChecklistItem = () => {
|
||||
const text = checklistItemText.trim()
|
||||
if (!text) {
|
||||
toast.error("Informe o texto do item do checklist.", { id: "new-ticket" })
|
||||
return
|
||||
}
|
||||
if (text.length > 240) {
|
||||
toast.error("Item do checklist muito longo (máx. 240 caracteres).", { id: "new-ticket" })
|
||||
return
|
||||
}
|
||||
setManualChecklist((prev) => [...prev, { id: crypto.randomUUID(), text, required: checklistItemRequired }])
|
||||
setChecklistItemText("")
|
||||
setChecklistItemRequired(true)
|
||||
}
|
||||
|
||||
async function submit(values: z.infer<typeof schema>) {
|
||||
if (!convexUserId) return
|
||||
|
||||
|
|
@ -562,6 +640,17 @@ export function NewTicketDialog({
|
|||
}
|
||||
customFieldsPayload = normalized.payload
|
||||
}
|
||||
const checklistPayload = manualChecklist.map((item) => ({
|
||||
text: item.text.trim(),
|
||||
required: item.required,
|
||||
}))
|
||||
const invalidChecklist = checklistPayload.find((item) => item.text.length === 0 || item.text.length > 240)
|
||||
if (invalidChecklist) {
|
||||
toast.error("Revise os itens do checklist (texto obrigatório e até 240 caracteres).", { id: "new-ticket" })
|
||||
return
|
||||
}
|
||||
const checklistTemplateIds = appliedChecklistTemplateIds.map((id) => id as Id<"ticketChecklistTemplates">)
|
||||
|
||||
setLoading(true)
|
||||
toast.loading("Criando ticket…", { id: "new-ticket" })
|
||||
try {
|
||||
|
|
@ -590,6 +679,8 @@ export function NewTicketDialog({
|
|||
categoryId: values.categoryId as Id<"ticketCategories">,
|
||||
subcategoryId: values.subcategoryId as Id<"ticketSubcategories">,
|
||||
formTemplate: selectedFormKey !== "default" ? selectedFormKey : undefined,
|
||||
checklist: checklistPayload.length > 0 ? checklistPayload : undefined,
|
||||
checklistTemplateIds: checklistTemplateIds.length > 0 ? checklistTemplateIds : undefined,
|
||||
customFields: customFieldsPayload.length > 0 ? customFieldsPayload : undefined,
|
||||
visitDate: visitDateTimestamp,
|
||||
})
|
||||
|
|
@ -630,6 +721,11 @@ export function NewTicketDialog({
|
|||
setCustomFieldValues({})
|
||||
setAssigneeInitialized(false)
|
||||
setAttachments([])
|
||||
setManualChecklist([])
|
||||
setAppliedChecklistTemplateIds([])
|
||||
setChecklistTemplateToApply("")
|
||||
setChecklistItemText("")
|
||||
setChecklistItemRequired(true)
|
||||
// Navegar para o ticket recém-criado
|
||||
window.location.href = `/tickets/${id}`
|
||||
} catch {
|
||||
|
|
@ -1264,6 +1360,166 @@ export function NewTicketDialog({
|
|||
</div>
|
||||
) : null}
|
||||
</FieldGroup>
|
||||
|
||||
<div className="mt-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<p className="flex items-center gap-2 text-sm font-semibold text-neutral-900">
|
||||
<ListChecks className="size-4 text-neutral-700" />
|
||||
Checklist (opcional)
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-neutral-500">
|
||||
Itens obrigatórios bloqueiam o encerramento do ticket até serem concluídos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{(checklistTemplates ?? []).length > 0 ? (
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
||||
<Select value={checklistTemplateToApply} onValueChange={setChecklistTemplateToApply}>
|
||||
<SelectTrigger className="h-9 w-full sm:w-64">
|
||||
<SelectValue placeholder="Aplicar template..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl">
|
||||
{(checklistTemplates ?? []).map((tpl) => (
|
||||
<SelectItem key={tpl.id} value={String(tpl.id)}>
|
||||
{tpl.name}
|
||||
{tpl.company ? ` — ${tpl.company.name}` : ""}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="h-9"
|
||||
onClick={handleApplyChecklistTemplate}
|
||||
disabled={
|
||||
!checklistTemplateToApply.trim() ||
|
||||
appliedChecklistTemplateIds.includes(checklistTemplateToApply.trim())
|
||||
}
|
||||
>
|
||||
Aplicar
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{appliedChecklistTemplates.length > 0 ? (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{appliedChecklistTemplates.map((tpl) => (
|
||||
<Badge key={tpl.id} variant="secondary" className="flex items-center gap-2 rounded-full">
|
||||
<span className="truncate">{tpl.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs text-neutral-600 hover:text-neutral-900"
|
||||
onClick={() =>
|
||||
setAppliedChecklistTemplateIds((prev) => prev.filter((id) => id !== String(tpl.id)))
|
||||
}
|
||||
title="Remover template"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{checklistTemplatePreviewItems.length > 0 || manualChecklist.length > 0 ? (
|
||||
<div className="mt-4 space-y-2">
|
||||
{checklistTemplatePreviewItems.map((item) => (
|
||||
<div
|
||||
key={item.key}
|
||||
className="flex items-start justify-between gap-3 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm text-neutral-800" title={item.text}>
|
||||
{item.text}
|
||||
</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2">
|
||||
<Badge variant={item.required ? "secondary" : "outline"} className="rounded-full text-[11px]">
|
||||
{item.required ? "Obrigatório" : "Opcional"}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="rounded-full text-[11px]">
|
||||
Template: {item.templateName}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{manualChecklist.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex flex-col gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 sm:flex-row sm:items-center"
|
||||
>
|
||||
<Input
|
||||
value={item.text}
|
||||
onChange={(e) =>
|
||||
setManualChecklist((prev) =>
|
||||
prev.map((row) => (row.id === item.id ? { ...row, text: e.target.value } : row))
|
||||
)
|
||||
}
|
||||
placeholder="Item do checklist..."
|
||||
className="h-9 flex-1"
|
||||
/>
|
||||
<label className="flex items-center gap-2 text-sm text-neutral-700">
|
||||
<Checkbox
|
||||
checked={item.required}
|
||||
onCheckedChange={(checked) =>
|
||||
setManualChecklist((prev) =>
|
||||
prev.map((row) =>
|
||||
row.id === item.id ? { ...row, required: Boolean(checked) } : row
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
Obrigatório
|
||||
</label>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-slate-500 hover:bg-red-50 hover:text-red-700"
|
||||
onClick={() => setManualChecklist((prev) => prev.filter((row) => row.id !== item.id))}
|
||||
title="Remover"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 rounded-xl border border-dashed border-slate-200 p-4 text-sm text-neutral-600">
|
||||
Adicione itens ou aplique um template para criar um checklist neste ticket.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center">
|
||||
<Input
|
||||
value={checklistItemText}
|
||||
onChange={(e) => setChecklistItemText(e.target.value)}
|
||||
placeholder="Adicionar item do checklist..."
|
||||
className="h-9 flex-1"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
handleAddChecklistItem()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<label className="flex items-center gap-2 text-sm text-neutral-700">
|
||||
<Checkbox
|
||||
checked={checklistItemRequired}
|
||||
onCheckedChange={(checked) => setChecklistItemRequired(Boolean(checked))}
|
||||
/>
|
||||
Obrigatório
|
||||
</label>
|
||||
<Button type="button" onClick={handleAddChecklistItem} className="h-9 gap-2">
|
||||
<Plus className="size-4" />
|
||||
Adicionar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</FieldSet>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue