chore: reorganize project structure and ensure default queues
This commit is contained in:
Esdras Renan
parent
854887f499
commit
1cccb852a5
201 changed files with 417 additions and 838 deletions
32
src/app/tickets/[id]/page.tsx
Normal file
32
src/app/tickets/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { AppShell } from "@/components/app-shell"
|
||||
import { SiteHeader } from "@/components/site-header"
|
||||
import { TicketDetailView } from "@/components/tickets/ticket-detail-view"
|
||||
import { TicketDetailStatic } from "@/components/tickets/ticket-detail-static"
|
||||
import { NewTicketDialog } from "@/components/tickets/new-ticket-dialog"
|
||||
import { getTicketById } from "@/lib/mocks/tickets"
|
||||
import type { TicketWithDetails } from "@/lib/schemas/ticket"
|
||||
|
||||
type TicketDetailPageProps = {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
export default async function TicketDetailPage({ params }: TicketDetailPageProps) {
|
||||
const { id } = await params
|
||||
const isMock = id.startsWith("ticket-")
|
||||
const mock = isMock ? getTicketById(id) : null
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={
|
||||
<SiteHeader
|
||||
title={`Ticket #${id}`}
|
||||
lead={"Detalhes do ticket"}
|
||||
secondaryAction={<SiteHeader.SecondaryButton>Compartilhar</SiteHeader.SecondaryButton>}
|
||||
primaryAction={<NewTicketDialog />}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{isMock && mock ? <TicketDetailStatic ticket={mock as TicketWithDetails} /> : <TicketDetailView id={id} />}
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
333
src/app/tickets/new/page.tsx
Normal file
333
src/app/tickets/new/page.tsx
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useMutation, useQuery } from "convex/react"
|
||||
import { toast } from "sonner"
|
||||
import type { Doc, Id } from "@/convex/_generated/dataModel"
|
||||
import type { TicketPriority, TicketQueueSummary } from "@/lib/schemas/ticket"
|
||||
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
||||
import { useAuth } from "@/lib/auth-client"
|
||||
// @ts-expect-error Convex runtime API lacks TypeScript declarations
|
||||
import { api } from "@/convex/_generated/api"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { RichTextEditor, sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
|
||||
import { Spinner } from "@/components/ui/spinner"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
PriorityIcon,
|
||||
priorityBadgeClass,
|
||||
priorityItemClass,
|
||||
priorityStyles,
|
||||
priorityTriggerClass,
|
||||
} from "@/components/tickets/priority-select"
|
||||
import { CategorySelectFields } from "@/components/tickets/category-select"
|
||||
|
||||
export default function NewTicketPage() {
|
||||
const router = useRouter()
|
||||
const { convexUserId } = useAuth()
|
||||
const queueArgs = convexUserId
|
||||
? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
|
||||
: "skip"
|
||||
const queuesRaw = useQuery(
|
||||
convexUserId ? api.queues.summary : "skip",
|
||||
queueArgs
|
||||
) as TicketQueueSummary[] | undefined
|
||||
const queues = useMemo(() => queuesRaw ?? [], [queuesRaw])
|
||||
const create = useMutation(api.tickets.create)
|
||||
const addComment = useMutation(api.tickets.addComment)
|
||||
const staffRaw = useQuery(api.users.listAgents, { tenantId: DEFAULT_TENANT_ID }) as Doc<"users">[] | undefined
|
||||
const staff = useMemo(
|
||||
() => (staffRaw ?? []).sort((a, b) => a.name.localeCompare(b.name, "pt-BR")),
|
||||
[staffRaw]
|
||||
)
|
||||
|
||||
const [subject, setSubject] = useState("")
|
||||
const [summary, setSummary] = useState("")
|
||||
const [priority, setPriority] = useState<TicketPriority>("MEDIUM")
|
||||
const [channel, setChannel] = useState("MANUAL")
|
||||
const [queueName, setQueueName] = useState<string | null>(null)
|
||||
const [assigneeId, setAssigneeId] = useState<string | null>(null)
|
||||
const [description, setDescription] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [subjectError, setSubjectError] = useState<string | null>(null)
|
||||
const [categoryId, setCategoryId] = useState<string | null>(null)
|
||||
const [subcategoryId, setSubcategoryId] = useState<string | null>(null)
|
||||
const [categoryError, setCategoryError] = useState<string | null>(null)
|
||||
const [subcategoryError, setSubcategoryError] = useState<string | null>(null)
|
||||
const [descriptionError, setDescriptionError] = useState<string | null>(null)
|
||||
const [assigneeInitialized, setAssigneeInitialized] = useState(false)
|
||||
|
||||
const queueOptions = useMemo(() => queues.map((q) => q.name), [queues])
|
||||
const assigneeSelectValue = assigneeId ?? "NONE"
|
||||
|
||||
useEffect(() => {
|
||||
if (assigneeInitialized) return
|
||||
if (!convexUserId) return
|
||||
setAssigneeId(convexUserId)
|
||||
setAssigneeInitialized(true)
|
||||
}, [assigneeInitialized, convexUserId])
|
||||
|
||||
async function submit(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
if (!convexUserId || loading) return
|
||||
|
||||
const trimmedSubject = subject.trim()
|
||||
if (trimmedSubject.length < 3) {
|
||||
setSubjectError("Informe um assunto com pelo menos 3 caracteres.")
|
||||
return
|
||||
}
|
||||
setSubjectError(null)
|
||||
|
||||
if (!categoryId) {
|
||||
setCategoryError("Selecione uma categoria.")
|
||||
return
|
||||
}
|
||||
if (!subcategoryId) {
|
||||
setSubcategoryError("Selecione uma categoria secundária.")
|
||||
return
|
||||
}
|
||||
|
||||
const sanitizedDescription = sanitizeEditorHtml(description)
|
||||
const plainDescription = sanitizedDescription.replace(/<[^>]*>/g, "").trim()
|
||||
if (plainDescription.length === 0) {
|
||||
setDescriptionError("Descreva o contexto do chamado.")
|
||||
return
|
||||
}
|
||||
setDescriptionError(null)
|
||||
|
||||
setLoading(true)
|
||||
toast.loading("Criando ticket...", { id: "create-ticket" })
|
||||
try {
|
||||
const selQueue = queues.find((q) => q.name === queueName)
|
||||
const queueId = selQueue ? (selQueue.id as Id<"queues">) : undefined
|
||||
const assigneeToSend = assigneeId ? (assigneeId as Id<"users">) : undefined
|
||||
const id = await create({
|
||||
actorId: convexUserId as Id<"users">,
|
||||
tenantId: DEFAULT_TENANT_ID,
|
||||
subject: trimmedSubject,
|
||||
summary: summary.trim() || undefined,
|
||||
priority,
|
||||
channel,
|
||||
queueId,
|
||||
requesterId: convexUserId as Id<"users">,
|
||||
assigneeId: assigneeToSend,
|
||||
categoryId: categoryId as Id<"ticketCategories">,
|
||||
subcategoryId: subcategoryId as Id<"ticketSubcategories">,
|
||||
})
|
||||
if (plainDescription.length > 0) {
|
||||
await addComment({
|
||||
ticketId: id as Id<"tickets">,
|
||||
authorId: convexUserId as Id<"users">,
|
||||
visibility: "PUBLIC",
|
||||
body: sanitizedDescription,
|
||||
attachments: [],
|
||||
})
|
||||
}
|
||||
toast.success("Ticket criado!", { id: "create-ticket" })
|
||||
router.replace(`/tickets/${id}`)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.error("Não foi possível criar o ticket.", { id: "create-ticket" })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const selectTriggerClass = "flex h-8 w-full items-center justify-between rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
|
||||
const selectItemClass = "flex items-center gap-2 rounded-md px-2 py-2 text-sm text-neutral-800 transition data-[state=checked]:bg-[#00e8ff]/15 data-[state=checked]:text-neutral-900 focus:bg-[#00e8ff]/10"
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl px-6 py-8">
|
||||
<Card className="rounded-2xl border border-slate-200 shadow-sm">
|
||||
<CardHeader className="space-y-2">
|
||||
<CardTitle className="text-2xl font-semibold text-neutral-900">Novo ticket</CardTitle>
|
||||
<CardDescription className="text-sm text-neutral-600">Preencha as informações básicas para abrir um chamado.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={submit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-1 text-sm font-medium text-neutral-700" htmlFor="subject">
|
||||
Assunto <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
id="subject"
|
||||
value={subject}
|
||||
onChange={(event) => {
|
||||
setSubject(event.target.value)
|
||||
if (subjectError) setSubjectError(null)
|
||||
}}
|
||||
placeholder="Ex.: Erro 500 no portal"
|
||||
aria-invalid={subjectError ? "true" : undefined}
|
||||
/>
|
||||
{subjectError ? <p className="text-xs font-medium text-red-500">{subjectError}</p> : null}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-neutral-700" htmlFor="summary">
|
||||
Resumo
|
||||
</label>
|
||||
<textarea
|
||||
id="summary"
|
||||
className="min-h-[96px] w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-neutral-800 shadow-sm outline-none transition-colors focus-visible:border-[#00d6eb] focus-visible:ring-[3px] focus-visible:ring-[#00e8ff]/20"
|
||||
value={summary}
|
||||
onChange={(event) => setSummary(event.target.value)}
|
||||
placeholder="Resuma rapidamente o cenário ou impacto do ticket."
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-1 text-sm font-medium text-neutral-700">
|
||||
Descrição <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<RichTextEditor
|
||||
value={description}
|
||||
onChange={(html) => {
|
||||
setDescription(html)
|
||||
if (descriptionError) {
|
||||
const plain = html.replace(/<[^>]*>/g, "").trim()
|
||||
if (plain.length > 0) {
|
||||
setDescriptionError(null)
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="Detalhe o problema, passos para reproduzir, links, etc."
|
||||
/>
|
||||
{descriptionError ? <p className="text-xs font-medium text-red-500">{descriptionError}</p> : null}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<CategorySelectFields
|
||||
tenantId={DEFAULT_TENANT_ID}
|
||||
categoryId={categoryId}
|
||||
subcategoryId={subcategoryId}
|
||||
onCategoryChange={(value) => {
|
||||
setCategoryId(value)
|
||||
setCategoryError(null)
|
||||
}}
|
||||
onSubcategoryChange={(value) => {
|
||||
setSubcategoryId(value)
|
||||
setSubcategoryError(null)
|
||||
}}
|
||||
categoryLabel="Categoria primária *"
|
||||
subcategoryLabel="Categoria secundária *"
|
||||
/>
|
||||
{categoryError || subcategoryError ? (
|
||||
<div className="text-xs font-medium text-red-500">
|
||||
{categoryError ? <div>{categoryError}</div> : null}
|
||||
{subcategoryError ? <div>{subcategoryError}</div> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="space-y-2">
|
||||
<span className="text-sm font-medium text-neutral-700">Prioridade</span>
|
||||
<Select value={priority} onValueChange={(value) => setPriority(value as TicketPriority)}>
|
||||
<SelectTrigger className={cn(priorityTriggerClass, "w-full justify-between") }>
|
||||
<SelectValue>
|
||||
<Badge className={cn(priorityBadgeClass, priorityStyles[priority]?.badgeClass)}>
|
||||
<PriorityIcon value={priority} />
|
||||
{priorityStyles[priority]?.label ?? priority}
|
||||
</Badge>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
{(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
|
||||
<SelectItem key={option} value={option} className={priorityItemClass}>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<PriorityIcon value={option} />
|
||||
{priorityStyles[option].label}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<span className="text-sm font-medium text-neutral-700">Canal</span>
|
||||
<Select value={channel} onValueChange={setChannel}>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue placeholder="Canal" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
<SelectItem value="EMAIL" className={selectItemClass}>
|
||||
E-mail
|
||||
</SelectItem>
|
||||
<SelectItem value="WHATSAPP" className={selectItemClass}>
|
||||
WhatsApp
|
||||
</SelectItem>
|
||||
<SelectItem value="CHAT" className={selectItemClass}>
|
||||
Chat
|
||||
</SelectItem>
|
||||
<SelectItem value="PHONE" className={selectItemClass}>
|
||||
Telefone
|
||||
</SelectItem>
|
||||
<SelectItem value="API" className={selectItemClass}>
|
||||
API
|
||||
</SelectItem>
|
||||
<SelectItem value="MANUAL" className={selectItemClass}>
|
||||
Manual
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<span className="text-sm font-medium text-neutral-700">Fila</span>
|
||||
<Select value={queueName ?? "NONE"} onValueChange={(value) => setQueueName(value === "NONE" ? null : value)}>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue placeholder="Sem fila" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
<SelectItem value="NONE" className={selectItemClass}>
|
||||
Sem fila
|
||||
</SelectItem>
|
||||
{queueOptions.map((name) => (
|
||||
<SelectItem key={name} value={name} className={selectItemClass}>
|
||||
{name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<span className="text-sm font-medium text-neutral-700">Responsável</span>
|
||||
<Select value={assigneeSelectValue} onValueChange={(value) => setAssigneeId(value === "NONE" ? null : value)}>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue placeholder={staff.length === 0 ? "Carregando..." : "Selecione o responsável"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
<SelectItem value="NONE" className={selectItemClass}>
|
||||
Sem responsável
|
||||
</SelectItem>
|
||||
{staff.map((member) => (
|
||||
<SelectItem key={member._id} value={member._id} className={selectItemClass}>
|
||||
{member.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="submit"
|
||||
className="min-w-[120px] rounded-lg border border-black bg-black px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Spinner className="me-2" />
|
||||
Criando...
|
||||
</>
|
||||
) : (
|
||||
"Criar"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
6
src/app/tickets/page.tsx
Normal file
6
src/app/tickets/page.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { TicketsPageClient } from "./tickets-page-client"
|
||||
|
||||
export default function TicketsPage() {
|
||||
return <TicketsPageClient />
|
||||
}
|
||||
|
||||
52
src/app/tickets/tickets-page-client.tsx
Normal file
52
src/app/tickets/tickets-page-client.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
"use client"
|
||||
|
||||
import dynamic from "next/dynamic"
|
||||
|
||||
import { AppShell } from "@/components/app-shell"
|
||||
import { SiteHeader } from "@/components/site-header"
|
||||
|
||||
const TicketQueueSummaryCards = dynamic(
|
||||
() =>
|
||||
import("@/components/tickets/ticket-queue-summary").then((module) => ({
|
||||
default: module.TicketQueueSummaryCards,
|
||||
})),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
const TicketsView = dynamic(
|
||||
() =>
|
||||
import("@/components/tickets/tickets-view").then((module) => ({
|
||||
default: module.TicketsView,
|
||||
})),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
const NewTicketDialog = dynamic(
|
||||
() =>
|
||||
import("@/components/tickets/new-ticket-dialog").then((module) => ({
|
||||
default: module.NewTicketDialog,
|
||||
})),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
export function TicketsPageClient() {
|
||||
return (
|
||||
<AppShell
|
||||
header={
|
||||
<SiteHeader
|
||||
title="Tickets"
|
||||
lead="Visão consolidada de filas e SLAs"
|
||||
secondaryAction={<SiteHeader.SecondaryButton>Exportar CSV</SiteHeader.SecondaryButton>}
|
||||
primaryAction={<NewTicketDialog />}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="px-4 lg:px-6">
|
||||
<TicketQueueSummaryCards />
|
||||
</div>
|
||||
<TicketsView />
|
||||
</div>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue