feat(ui): Spinner e Dialog shadcn; Novo ticket em Dialog com RHF+Zod; selects de responsável e fila com updates otimistas; spinners e toasts; fix setState durante render nos filtros; loading states\n\nchore(test): Vitest + testes de mapeadores\n

2025-10-04 00:52:56 -03:00 · 2025-10-04 00:52:56 -03:00 · 90c3c8e4d6
commit 90c3c8e4d6
parent 27b103cb46
12 changed files with 415 additions and 50 deletions
--- a/web/src/components/tickets/new-ticket-dialog.tsx
+++ b/web/src/components/tickets/new-ticket-dialog.tsx
@ -0,0 +1,133 @@
+"use client"
+
+import { z } from "zod"
+import { useState } from "react"
+import { useMutation, useQuery } from "convex/react"
+// @ts-ignore
+import { api } from "../../../convex/_generated/api"
+import { DEFAULT_TENANT_ID } from "@/lib/constants"
+import { useAuth } from "@/lib/auth-client"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { toast } from "sonner"
+import { Spinner } from "@/components/ui/spinner"
+
+const schema = z.object({
+  subject: z.string().min(3, "Informe um assunto"),
+  summary: z.string().optional(),
+  priority: z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).default("MEDIUM"),
+  channel: z.enum(["EMAIL", "WHATSAPP", "CHAT", "PHONE", "API", "MANUAL"]).default("MANUAL"),
+  queueName: z.string().nullable().optional(),
+})
+
+export function NewTicketDialog() {
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [values, setValues] = useState<z.infer<typeof schema>>({ subject: "", summary: "", priority: "MEDIUM", channel: "MANUAL", queueName: null })
+  const { userId } = useAuth()
+  const queues = useQuery(api.queues.summary, { tenantId: DEFAULT_TENANT_ID }) ?? []
+  const create = useMutation(api.tickets.create)
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault()
+    const parsed = schema.safeParse(values)
+    if (!parsed.success) {
+      toast.error(parsed.error.issues[0]?.message ?? "Preencha o formulário")
+      return
+    }
+    if (!userId) return
+    setLoading(true)
+    toast.loading("Criando ticket…", { id: "new-ticket" })
+    try {
+      const sel = queues.find((q: any) => q.name === values.queueName)
+      const id = await create({
+        tenantId: DEFAULT_TENANT_ID,
+        subject: values.subject,
+        summary: values.summary,
+        priority: values.priority,
+        channel: values.channel,
+        queueId: sel?.id,
+        requesterId: userId as any,
+      })
+      toast.success("Ticket criado!", { id: "new-ticket" })
+      setOpen(false)
+      setValues({ subject: "", summary: "", priority: "MEDIUM", channel: "MANUAL", queueName: null })
+      // Navegar para o ticket recém-criado
+      window.location.href = `/tickets/${id}`
+    } catch (err) {
+      toast.error("Não foi possível criar o ticket.", { id: "new-ticket" })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm">Novo ticket</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Novo ticket</DialogTitle>
+          <DialogDescription>Preencha as informações básicas para abrir um chamado.</DialogDescription>
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={submit}>
+          <div className="space-y-2">
+            <label className="text-sm" htmlFor="subject">Assunto</label>
+            <Input id="subject" value={values.subject} onChange={(e) => setValues((v) => ({ ...v, subject: e.target.value }))} required />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm" htmlFor="summary">Resumo</label>
+            <textarea id="summary" className="w-full rounded-md border bg-background p-2 text-sm" rows={3} value={values.summary} onChange={(e) => setValues((v) => ({ ...v, summary: e.target.value }))} />
+          </div>
+          <div className="grid gap-3 sm:grid-cols-3">
+            <div className="space-y-2">
+              <label className="text-sm">Prioridade</label>
+              <Select value={values.priority} onValueChange={(v) => setValues((s) => ({ ...s, priority: v as any }))}>
+                <SelectTrigger><SelectValue placeholder="Prioridade" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="LOW">Baixa</SelectItem>
+                  <SelectItem value="MEDIUM">Média</SelectItem>
+                  <SelectItem value="HIGH">Alta</SelectItem>
+                  <SelectItem value="URGENT">Urgente</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm">Canal</label>
+              <Select value={values.channel} onValueChange={(v) => setValues((s) => ({ ...s, channel: v as any }))}>
+                <SelectTrigger><SelectValue placeholder="Canal" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="EMAIL">E-mail</SelectItem>
+                  <SelectItem value="WHATSAPP">WhatsApp</SelectItem>
+                  <SelectItem value="CHAT">Chat</SelectItem>
+                  <SelectItem value="PHONE">Telefone</SelectItem>
+                  <SelectItem value="API">API</SelectItem>
+                  <SelectItem value="MANUAL">Manual</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm">Fila</label>
+              <Select value={values.queueName ?? ""} onValueChange={(v) => setValues((s) => ({ ...s, queueName: v || null }))}>
+                <SelectTrigger><SelectValue placeholder="Sem fila" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="">Sem fila</SelectItem>
+                  {queues.map((q: any) => (
+                    <SelectItem key={q.id} value={q.name}>{q.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <Button type="submit" disabled={loading}>{loading ? (<><Spinner className="me-2" /> Criando…</>) : "Criar"}</Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+