chore: prep platform improvements
This commit is contained in:
Esdras Renan
parent
a62f3d5283
commit
c5ddd54a3e
24 changed files with 777 additions and 649 deletions
400
src/components/admin/slas/category-sla-drawer.tsx
Normal file
400
src/components/admin/slas/category-sla-drawer.tsx
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useMutation, useQuery } from "convex/react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { api } from "@/convex/_generated/api"
|
||||
import type { Id } from "@/convex/_generated/dataModel"
|
||||
import type { TicketCategory } from "@/lib/schemas/category"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
|
||||
const PRIORITY_ROWS = [
|
||||
{ value: "URGENT", label: "Crítico" },
|
||||
{ value: "HIGH", label: "Alta" },
|
||||
{ value: "MEDIUM", label: "Média" },
|
||||
{ value: "LOW", label: "Baixa" },
|
||||
{ value: "DEFAULT", label: "Sem prioridade" },
|
||||
] as const
|
||||
|
||||
const TIME_UNITS: Array<{ value: RuleFormState["responseUnit"]; label: string; factor: number }> = [
|
||||
{ value: "minutes", label: "Minutos", factor: 1 },
|
||||
{ value: "hours", label: "Horas", factor: 60 },
|
||||
{ value: "days", label: "Dias", factor: 1440 },
|
||||
]
|
||||
|
||||
const MODE_OPTIONS: Array<{ value: RuleFormState["responseMode"]; label: string }> = [
|
||||
{ value: "calendar", label: "Horas corridas" },
|
||||
{ value: "business", label: "Horas úteis" },
|
||||
]
|
||||
|
||||
const PAUSE_STATUS_OPTIONS = [
|
||||
{ value: "PENDING", label: "Pendente" },
|
||||
{ value: "AWAITING_ATTENDANCE", label: "Em atendimento" },
|
||||
{ value: "PAUSED", label: "Pausado" },
|
||||
] as const
|
||||
|
||||
const DEFAULT_RULE_STATE: RuleFormState = {
|
||||
responseValue: "",
|
||||
responseUnit: "hours",
|
||||
responseMode: "calendar",
|
||||
solutionValue: "",
|
||||
solutionUnit: "hours",
|
||||
solutionMode: "calendar",
|
||||
alertThreshold: 80,
|
||||
pauseStatuses: ["PAUSED"],
|
||||
}
|
||||
|
||||
type RuleFormState = {
|
||||
responseValue: string
|
||||
responseUnit: "minutes" | "hours" | "days"
|
||||
responseMode: "calendar" | "business"
|
||||
solutionValue: string
|
||||
solutionUnit: "minutes" | "hours" | "days"
|
||||
solutionMode: "calendar" | "business"
|
||||
alertThreshold: number
|
||||
pauseStatuses: string[]
|
||||
}
|
||||
|
||||
export type CategorySlaDrawerProps = {
|
||||
category: TicketCategory | null
|
||||
tenantId: string
|
||||
viewerId: Id<"users"> | null
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function CategorySlaDrawer({ category, tenantId, viewerId, onClose }: CategorySlaDrawerProps) {
|
||||
const [rules, setRules] = useState<Record<string, RuleFormState>>(() => buildDefaultRuleState())
|
||||
const [saving, setSaving] = useState(false)
|
||||
const drawerOpen = Boolean(category)
|
||||
|
||||
const canLoad = Boolean(category && viewerId)
|
||||
const existing = useQuery(
|
||||
api.categorySlas.get,
|
||||
canLoad
|
||||
? {
|
||||
tenantId,
|
||||
viewerId: viewerId as Id<"users">,
|
||||
categoryId: category!.id as Id<"ticketCategories">,
|
||||
}
|
||||
: "skip"
|
||||
) as {
|
||||
rules: Array<{
|
||||
priority: string
|
||||
responseTargetMinutes: number | null
|
||||
responseMode?: string | null
|
||||
solutionTargetMinutes: number | null
|
||||
solutionMode?: string | null
|
||||
alertThreshold?: number | null
|
||||
pauseStatuses?: string[] | null
|
||||
}>
|
||||
} | undefined
|
||||
|
||||
const saveSla = useMutation(api.categorySlas.save)
|
||||
|
||||
useEffect(() => {
|
||||
if (!existing?.rules) {
|
||||
setRules(buildDefaultRuleState())
|
||||
return
|
||||
}
|
||||
const next = buildDefaultRuleState()
|
||||
for (const rule of existing.rules) {
|
||||
const priority = rule.priority?.toUpperCase() ?? "DEFAULT"
|
||||
next[priority] = convertRuleToForm(rule)
|
||||
}
|
||||
setRules(next)
|
||||
}, [existing, category?.id])
|
||||
|
||||
const handleChange = (priority: string, patch: Partial<RuleFormState>) => {
|
||||
setRules((current) => ({
|
||||
...current,
|
||||
[priority]: {
|
||||
...current[priority],
|
||||
...patch,
|
||||
},
|
||||
}))
|
||||
}
|
||||
|
||||
const togglePause = (priority: string, status: string) => {
|
||||
setRules((current) => {
|
||||
const selected = new Set(current[priority].pauseStatuses)
|
||||
if (selected.has(status)) {
|
||||
selected.delete(status)
|
||||
} else {
|
||||
selected.add(status)
|
||||
}
|
||||
if (selected.size === 0) {
|
||||
selected.add("PAUSED")
|
||||
}
|
||||
return {
|
||||
...current,
|
||||
[priority]: {
|
||||
...current[priority],
|
||||
pauseStatuses: Array.from(selected),
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!category || !viewerId) return
|
||||
setSaving(true)
|
||||
toast.loading("Salvando SLA...", { id: "category-sla" })
|
||||
try {
|
||||
const payload = PRIORITY_ROWS.map((row) => {
|
||||
const form = rules[row.value]
|
||||
return {
|
||||
priority: row.value,
|
||||
responseTargetMinutes: convertToMinutes(form.responseValue, form.responseUnit),
|
||||
responseMode: form.responseMode,
|
||||
solutionTargetMinutes: convertToMinutes(form.solutionValue, form.solutionUnit),
|
||||
solutionMode: form.solutionMode,
|
||||
alertThreshold: Math.min(Math.max(form.alertThreshold, 5), 95) / 100,
|
||||
pauseStatuses: form.pauseStatuses,
|
||||
}
|
||||
})
|
||||
await saveSla({
|
||||
tenantId,
|
||||
actorId: viewerId,
|
||||
categoryId: category.id as Id<"ticketCategories">,
|
||||
rules: payload,
|
||||
})
|
||||
toast.success("SLA atualizado", { id: "category-sla" })
|
||||
onClose()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.error("Não foi possível salvar as regras de SLA.", { id: "category-sla" })
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={drawerOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
onClose()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-4xl overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Configurar SLA — {category?.name ?? ""}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Defina metas de resposta e resolução para cada prioridade. Os prazos em horas úteis consideram apenas
|
||||
segunda a sexta, das 8h às 18h.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-2">
|
||||
{PRIORITY_ROWS.map((row) => {
|
||||
const form = rules[row.value]
|
||||
return (
|
||||
<div key={row.value} className="space-y-3 rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-neutral-900">{row.label}</p>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{row.value === "DEFAULT"
|
||||
? "Aplicado quando o ticket não tem prioridade definida."
|
||||
: "Aplica-se aos tickets desta prioridade."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<SlaInputGroup
|
||||
title="Tempo de resposta"
|
||||
amount={form.responseValue}
|
||||
unit={form.responseUnit}
|
||||
mode={form.responseMode}
|
||||
onAmountChange={(value) => handleChange(row.value, { responseValue: value })}
|
||||
onUnitChange={(value) =>
|
||||
handleChange(row.value, { responseUnit: value as RuleFormState["responseUnit"] })
|
||||
}
|
||||
onModeChange={(value) =>
|
||||
handleChange(row.value, { responseMode: value as RuleFormState["responseMode"] })
|
||||
}
|
||||
/>
|
||||
<SlaInputGroup
|
||||
title="Tempo de solução"
|
||||
amount={form.solutionValue}
|
||||
unit={form.solutionUnit}
|
||||
mode={form.solutionMode}
|
||||
onAmountChange={(value) => handleChange(row.value, { solutionValue: value })}
|
||||
onUnitChange={(value) =>
|
||||
handleChange(row.value, { solutionUnit: value as RuleFormState["solutionUnit"] })
|
||||
}
|
||||
onModeChange={(value) =>
|
||||
handleChange(row.value, { solutionMode: value as RuleFormState["solutionMode"] })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Alertar quando</p>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
min={10}
|
||||
max={95}
|
||||
step={5}
|
||||
value={form.alertThreshold}
|
||||
onChange={(event) => handleChange(row.value, { alertThreshold: Number(event.target.value) || 0 })}
|
||||
/>
|
||||
<span className="text-xs text-neutral-500">% do tempo for consumido.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Estados que pausam</p>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{PAUSE_STATUS_OPTIONS.map((option) => {
|
||||
const selected = form.pauseStatuses.includes(option.value)
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => togglePause(row.value, option.value)}
|
||||
className={cn(
|
||||
"rounded-full border px-3 py-1 text-xs font-semibold transition",
|
||||
selected
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "border-slate-200 bg-white text-neutral-600"
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<DialogFooter className="gap-2">
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={saving || !viewerId}>
|
||||
{saving ? "Salvando..." : "Salvar"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function buildDefaultRuleState() {
|
||||
return PRIORITY_ROWS.reduce<Record<string, RuleFormState>>((acc, row) => {
|
||||
acc[row.value] = { ...DEFAULT_RULE_STATE }
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
|
||||
function convertRuleToForm(rule: {
|
||||
priority: string
|
||||
responseTargetMinutes: number | null
|
||||
responseMode?: string | null
|
||||
solutionTargetMinutes: number | null
|
||||
solutionMode?: string | null
|
||||
alertThreshold?: number | null
|
||||
pauseStatuses?: string[] | null
|
||||
}): RuleFormState {
|
||||
const response = minutesToForm(rule.responseTargetMinutes)
|
||||
const solution = minutesToForm(rule.solutionTargetMinutes)
|
||||
return {
|
||||
responseValue: response.amount,
|
||||
responseUnit: response.unit,
|
||||
responseMode: (rule.responseMode ?? "calendar") as RuleFormState["responseMode"],
|
||||
solutionValue: solution.amount,
|
||||
solutionUnit: solution.unit,
|
||||
solutionMode: (rule.solutionMode ?? "calendar") as RuleFormState["solutionMode"],
|
||||
alertThreshold: Math.round((rule.alertThreshold ?? 0.8) * 100),
|
||||
pauseStatuses: rule.pauseStatuses && rule.pauseStatuses.length > 0 ? rule.pauseStatuses : ["PAUSED"],
|
||||
}
|
||||
}
|
||||
|
||||
function minutesToForm(input?: number | null) {
|
||||
if (!input || input <= 0) {
|
||||
return { amount: "", unit: "hours" as RuleFormState["responseUnit"] }
|
||||
}
|
||||
for (const option of [...TIME_UNITS].reverse()) {
|
||||
if (input % option.factor === 0) {
|
||||
return { amount: String(Math.round(input / option.factor)), unit: option.value }
|
||||
}
|
||||
}
|
||||
return { amount: String(input), unit: "minutes" as RuleFormState["responseUnit"] }
|
||||
}
|
||||
|
||||
function convertToMinutes(value: string, unit: RuleFormState["responseUnit"]) {
|
||||
const numeric = Number(value)
|
||||
if (!Number.isFinite(numeric) || numeric <= 0) {
|
||||
return undefined
|
||||
}
|
||||
const factor = TIME_UNITS.find((item) => item.value === unit)?.factor ?? 1
|
||||
return Math.round(numeric * factor)
|
||||
}
|
||||
|
||||
type SlaInputGroupProps = {
|
||||
title: string
|
||||
amount: string
|
||||
unit: RuleFormState["responseUnit"]
|
||||
mode: RuleFormState["responseMode"]
|
||||
onAmountChange: (value: string) => void
|
||||
onUnitChange: (value: string) => void
|
||||
onModeChange: (value: string) => void
|
||||
}
|
||||
|
||||
function SlaInputGroup({ title, amount, unit, mode, onAmountChange, onUnitChange, onModeChange }: SlaInputGroupProps) {
|
||||
return (
|
||||
<div className="space-y-2 rounded-xl border border-slate-200 bg-white px-3 py-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">{title}</p>
|
||||
<div className="flex flex-col gap-2 md:flex-row">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
value={amount}
|
||||
onChange={(event) => onAmountChange(event.target.value)}
|
||||
placeholder="0"
|
||||
/>
|
||||
<Select value={unit} onValueChange={onUnitChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Unidade" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{TIME_UNITS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Select value={mode} onValueChange={onModeChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Tipo de contagem" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{MODE_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue