47ccdc51a7
- Adiciona CompanySlaManager para gerenciar empresas com SLA customizado - Adiciona CompanySlaDrawer para configurar regras de SLA por empresa - Integra componentes no SlasManager existente 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
396 lines
15 KiB
TypeScript
396 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import { useMutation, useQuery } from "convex/react"
|
|
import { toast } from "sonner"
|
|
import { IconAlarm, IconBolt, IconTargetArrow } from "@tabler/icons-react"
|
|
import { api } from "@/convex/_generated/api"
|
|
import type { Id } from "@/convex/_generated/dataModel"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
|
|
|
import { CategorySlaManager } from "./category-sla-manager"
|
|
import { CompanySlaManager } from "./company-sla-manager"
|
|
|
|
type SlaPolicy = {
|
|
id: string
|
|
name: string
|
|
description: string
|
|
timeToFirstResponse: number | null
|
|
timeToResolution: number | null
|
|
}
|
|
|
|
function formatMinutes(value: number | null) {
|
|
if (value === null) return "—"
|
|
if (value < 60) return `${Math.round(value)} min`
|
|
const hours = Math.floor(value / 60)
|
|
const minutes = Math.round(value % 60)
|
|
if (minutes === 0) return `${hours}h`
|
|
return `${hours}h ${minutes}min`
|
|
}
|
|
|
|
export function SlasManager() {
|
|
const { session, convexUserId } = useAuth()
|
|
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
|
|
|
|
const slas = useQuery(
|
|
api.slas.list,
|
|
convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
|
|
) as SlaPolicy[] | undefined
|
|
|
|
const createSla = useMutation(api.slas.create)
|
|
const updateSla = useMutation(api.slas.update)
|
|
const removeSla = useMutation(api.slas.remove)
|
|
|
|
const [name, setName] = useState("")
|
|
const [description, setDescription] = useState("")
|
|
const [firstResponse, setFirstResponse] = useState<string>("")
|
|
const [resolution, setResolution] = useState<string>("")
|
|
const [saving, setSaving] = useState(false)
|
|
const [editingSla, setEditingSla] = useState<SlaPolicy | null>(null)
|
|
|
|
const { bestFirstResponse, bestResolution } = useMemo(() => {
|
|
if (!slas) return { bestFirstResponse: null, bestResolution: null }
|
|
|
|
const response = slas.reduce<number | null>((acc, sla) => {
|
|
if (sla.timeToFirstResponse === null) return acc
|
|
return acc === null ? sla.timeToFirstResponse : Math.min(acc, sla.timeToFirstResponse)
|
|
}, null)
|
|
|
|
const resolution = slas.reduce<number | null>((acc, sla) => {
|
|
if (sla.timeToResolution === null) return acc
|
|
return acc === null ? sla.timeToResolution : Math.min(acc, sla.timeToResolution)
|
|
}, null)
|
|
|
|
return { bestFirstResponse: response, bestResolution: resolution }
|
|
}, [slas])
|
|
|
|
const resetForm = () => {
|
|
setName("")
|
|
setDescription("")
|
|
setFirstResponse("")
|
|
setResolution("")
|
|
}
|
|
|
|
const parseNumber = (value: string) => {
|
|
const parsed = Number(value)
|
|
return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined
|
|
}
|
|
|
|
const handleCreate = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault()
|
|
if (!name.trim()) {
|
|
toast.error("Informe um nome para a política")
|
|
return
|
|
}
|
|
if (!convexUserId) {
|
|
toast.error("Sessão não sincronizada com o Convex")
|
|
return
|
|
}
|
|
setSaving(true)
|
|
toast.loading("Criando SLA...", { id: "sla" })
|
|
try {
|
|
await createSla({
|
|
tenantId,
|
|
actorId: convexUserId as Id<"users">,
|
|
name: name.trim(),
|
|
description: description.trim() || undefined,
|
|
timeToFirstResponse: parseNumber(firstResponse),
|
|
timeToResolution: parseNumber(resolution),
|
|
})
|
|
toast.success("Política criada", { id: "sla" })
|
|
resetForm()
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Não foi possível criar a política", { id: "sla" })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const openEdit = (policy: SlaPolicy) => {
|
|
setEditingSla(policy)
|
|
setName(policy.name)
|
|
setDescription(policy.description)
|
|
setFirstResponse(policy.timeToFirstResponse ? String(policy.timeToFirstResponse) : "")
|
|
setResolution(policy.timeToResolution ? String(policy.timeToResolution) : "")
|
|
}
|
|
|
|
const handleUpdate = async () => {
|
|
if (!editingSla) return
|
|
if (!name.trim()) {
|
|
toast.error("Informe um nome para a política")
|
|
return
|
|
}
|
|
if (!convexUserId) {
|
|
toast.error("Sessão não sincronizada com o Convex")
|
|
return
|
|
}
|
|
setSaving(true)
|
|
toast.loading("Salvando alterações...", { id: "sla-edit" })
|
|
try {
|
|
await updateSla({
|
|
tenantId,
|
|
policyId: editingSla.id as Id<"slaPolicies">,
|
|
actorId: convexUserId as Id<"users">,
|
|
name: name.trim(),
|
|
description: description.trim() || undefined,
|
|
timeToFirstResponse: parseNumber(firstResponse),
|
|
timeToResolution: parseNumber(resolution),
|
|
})
|
|
toast.success("Política atualizada", { id: "sla-edit" })
|
|
setEditingSla(null)
|
|
resetForm()
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Não foi possível atualizar a política", { id: "sla-edit" })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const handleRemove = async (policy: SlaPolicy) => {
|
|
const confirmed = window.confirm(`Excluir a política ${policy.name}?`)
|
|
if (!confirmed) return
|
|
if (!convexUserId) {
|
|
toast.error("Sessão não sincronizada com o Convex")
|
|
return
|
|
}
|
|
toast.loading("Removendo política...", { id: `sla-remove-${policy.id}` })
|
|
try {
|
|
await removeSla({
|
|
tenantId,
|
|
policyId: policy.id as Id<"slaPolicies">,
|
|
actorId: convexUserId as Id<"users">,
|
|
})
|
|
toast.success("Política removida", { id: `sla-remove-${policy.id}` })
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Não foi possível remover a política", { id: `sla-remove-${policy.id}` })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<Card className="border-slate-200">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600">
|
|
<IconTargetArrow className="size-4" /> Políticas criadas
|
|
</CardTitle>
|
|
<CardDescription>Regras aplicadas às filas e tickets.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="text-3xl font-semibold text-neutral-900">
|
|
{slas ? slas.length : <Skeleton className="h-8 w-16" />}
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-slate-200">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600">
|
|
<IconAlarm className="size-4" /> Resposta (média)
|
|
</CardTitle>
|
|
<CardDescription>Tempo mínimo para primeira resposta.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="text-xl font-semibold text-neutral-900">
|
|
{slas ? formatMinutes(bestFirstResponse ?? null) : <Skeleton className="h-8 w-24" />}
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-slate-200">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600">
|
|
<IconBolt className="size-4" /> Resolução (média)
|
|
</CardTitle>
|
|
<CardDescription>Alvo para encerrar chamados.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="text-xl font-semibold text-neutral-900">
|
|
{slas ? formatMinutes(bestResolution ?? null) : <Skeleton className="h-8 w-24" />}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card className="border-slate-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-semibold text-neutral-900">Nova política de SLA</CardTitle>
|
|
<CardDescription>Defina metas de resposta e resolução para garantir previsibilidade no atendimento.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleCreate} className="grid gap-4 md:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
|
|
<div className="space-y-3">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="sla-name">Nome da política</Label>
|
|
<Input
|
|
id="sla-name"
|
|
placeholder="Ex.: Resposta prioritária"
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="sla-first-response">Primeira resposta (minutos)</Label>
|
|
<Input
|
|
id="sla-first-response"
|
|
type="number"
|
|
min={1}
|
|
value={firstResponse}
|
|
onChange={(event) => setFirstResponse(event.target.value)}
|
|
placeholder="Opcional"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="sla-resolution">Resolução (minutos)</Label>
|
|
<Input
|
|
id="sla-resolution"
|
|
type="number"
|
|
min={1}
|
|
value={resolution}
|
|
onChange={(event) => setResolution(event.target.value)}
|
|
placeholder="Opcional"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="sla-description">Descrição</Label>
|
|
<textarea
|
|
id="sla-description"
|
|
className="min-h-[120px] w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-neutral-700 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900/10"
|
|
placeholder="Como esta política será aplicada"
|
|
value={description}
|
|
onChange={(event) => setDescription(event.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<Button type="submit" disabled={saving}>
|
|
Criar política
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="space-y-4">
|
|
{slas === undefined ? (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 3 }).map((_, index) => (
|
|
<Skeleton key={index} className="h-32 rounded-2xl" />
|
|
))}
|
|
</div>
|
|
) : slas.length === 0 ? (
|
|
<Card className="border-dashed border-slate-300 bg-slate-50/80">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-semibold text-neutral-900">Nenhuma política cadastrada</CardTitle>
|
|
<CardDescription className="text-neutral-600">
|
|
Crie SLAs para monitorar o tempo de resposta e resolução dos seus chamados.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
) : (
|
|
slas.map((policy) => (
|
|
<Card key={policy.id} className="border-slate-200">
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-2">
|
|
<CardTitle className="text-xl font-semibold text-neutral-900">{policy.name}</CardTitle>
|
|
{policy.description ? (
|
|
<CardDescription className="text-neutral-600">{policy.description}</CardDescription>
|
|
) : null}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" onClick={() => openEdit(policy)}>
|
|
Editar
|
|
</Button>
|
|
<Button variant="destructive" size="sm" onClick={() => handleRemove(policy)}>
|
|
Excluir
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<dl className="grid gap-4 md:grid-cols-2">
|
|
<div>
|
|
<dt className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Primeira resposta</dt>
|
|
<dd className="text-lg font-semibold text-neutral-900">{formatMinutes(policy.timeToFirstResponse)}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Resolução</dt>
|
|
<dd className="text-lg font-semibold text-neutral-900">{formatMinutes(policy.timeToResolution)}</dd>
|
|
</div>
|
|
</dl>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
<CategorySlaManager />
|
|
|
|
<CompanySlaManager />
|
|
|
|
<Dialog open={Boolean(editingSla)} onOpenChange={(value) => (!value ? setEditingSla(null) : null)}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Editar política de SLA</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="edit-sla-name">Nome</Label>
|
|
<Input
|
|
id="edit-sla-name"
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="edit-sla-first">Primeira resposta (minutos)</Label>
|
|
<Input
|
|
id="edit-sla-first"
|
|
type="number"
|
|
min={1}
|
|
value={firstResponse}
|
|
onChange={(event) => setFirstResponse(event.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="edit-sla-resolution">Resolução (minutos)</Label>
|
|
<Input
|
|
id="edit-sla-resolution"
|
|
type="number"
|
|
min={1}
|
|
value={resolution}
|
|
onChange={(event) => setResolution(event.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="edit-sla-description">Descrição</Label>
|
|
<textarea
|
|
id="edit-sla-description"
|
|
className="min-h-[120px] w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-neutral-700 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900/10"
|
|
value={description}
|
|
onChange={(event) => setDescription(event.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter className="gap-2">
|
|
<Button variant="outline" onClick={() => setEditingSla(null)}>
|
|
Cancelar
|
|
</Button>
|
|
<Button onClick={handleUpdate} disabled={saving}>
|
|
Salvar alterações
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|