feat(portal): aprimorar formulário e layout para colaboradores
This commit is contained in:
Esdras Renan
parent
d6a164df0e
commit
d117d8d59f
4 changed files with 39 additions and 38 deletions
|
|
@ -17,7 +17,8 @@
|
|||
"width": 1100,
|
||||
"height": 720,
|
||||
"resizable": true,
|
||||
"fullscreen": true
|
||||
"fullscreen": false,
|
||||
"maximized": true
|
||||
}
|
||||
],
|
||||
"security": {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import { type ReactNode, useMemo, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { usePathname, useRouter } from "next/navigation"
|
||||
import { LogOut, PlusCircle } from "lucide-react"
|
||||
import { GalleryVerticalEnd, LogOut, PlusCircle } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
|
@ -59,11 +59,16 @@ export function PortalShell({ children }: PortalShellProps) {
|
|||
<div className="flex min-h-screen flex-col bg-gradient-to-b from-slate-50 via-slate-50 to-white">
|
||||
<header className="border-b border-slate-200 bg-white/90 backdrop-blur">
|
||||
<div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-6 py-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.28em] text-neutral-500">
|
||||
Portal do cliente
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex size-9 items-center justify-center rounded-xl bg-neutral-900 text-white shadow-sm">
|
||||
<GalleryVerticalEnd className="size-4" />
|
||||
</span>
|
||||
<span className="text-lg font-semibold text-neutral-900">Raven</span>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.28em] text-neutral-500">
|
||||
Portal do cliente
|
||||
</span>
|
||||
<span className="text-lg font-semibold text-neutral-900">Raven</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="flex items-center gap-3 text-sm font-medium">
|
||||
{navItems.map((item) => {
|
||||
|
|
|
|||
|
|
@ -14,15 +14,10 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { CategorySelectFields } from "@/components/tickets/category-select"
|
||||
import { Dropzone } from "@/components/ui/dropzone"
|
||||
|
||||
const priorityLabel: Record<TicketPriority, string> = {
|
||||
LOW: "Baixa",
|
||||
MEDIUM: "Média",
|
||||
HIGH: "Alta",
|
||||
URGENT: "Urgente",
|
||||
}
|
||||
const DEFAULT_PRIORITY: TicketPriority = "MEDIUM"
|
||||
|
||||
function toHtml(text: string) {
|
||||
const escaped = text
|
||||
|
|
@ -45,9 +40,9 @@ export function PortalTicketForm() {
|
|||
const [subject, setSubject] = useState("")
|
||||
const [summary, setSummary] = useState("")
|
||||
const [description, setDescription] = useState("")
|
||||
const [priority, setPriority] = useState<TicketPriority>("MEDIUM")
|
||||
const [categoryId, setCategoryId] = useState<string | null>(null)
|
||||
const [subcategoryId, setSubcategoryId] = useState<string | null>(null)
|
||||
const [attachments, setAttachments] = useState<Array<{ storageId: string; name: string; size?: number; type?: string }>>([])
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const isFormValid = useMemo(() => {
|
||||
|
|
@ -70,7 +65,7 @@ export function PortalTicketForm() {
|
|||
tenantId,
|
||||
subject: trimmedSubject,
|
||||
summary: trimmedSummary || undefined,
|
||||
priority,
|
||||
priority: DEFAULT_PRIORITY,
|
||||
channel: "MANUAL",
|
||||
queueId: undefined,
|
||||
requesterId: convexUserId as Id<"users">,
|
||||
|
|
@ -80,16 +75,23 @@ export function PortalTicketForm() {
|
|||
|
||||
if (trimmedDescription.length > 0) {
|
||||
const htmlBody = sanitizeEditorHtml(toHtml(trimmedDescription))
|
||||
const typedAttachments = attachments.map((file) => ({
|
||||
storageId: file.storageId as Id<"_storage">,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
}))
|
||||
await addComment({
|
||||
ticketId: id as Id<"tickets">,
|
||||
authorId: convexUserId as Id<"users">,
|
||||
visibility: "PUBLIC",
|
||||
body: htmlBody,
|
||||
attachments: [],
|
||||
attachments: typedAttachments,
|
||||
})
|
||||
}
|
||||
|
||||
toast.success("Chamado criado com sucesso!", { id: "portal-new-ticket" })
|
||||
setAttachments([])
|
||||
router.replace(`/portal/tickets/${id}`)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
|
|
@ -146,22 +148,6 @@ export function PortalTicketForm() {
|
|||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<span className="text-sm font-medium text-neutral-800">Prioridade</span>
|
||||
<Select value={priority} onValueChange={(value) => setPriority(value as TicketPriority)}>
|
||||
<SelectTrigger className="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-left text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-neutral-900">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
{(Object.keys(priorityLabel) as TicketPriority[]).map((option) => (
|
||||
<SelectItem key={option} value={option} className="text-sm">
|
||||
{priorityLabel[option]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<CategorySelectFields
|
||||
tenantId={tenantId}
|
||||
categoryId={categoryId}
|
||||
|
|
@ -173,6 +159,16 @@ export function PortalTicketForm() {
|
|||
subcategoryLabel="Subcategoria *"
|
||||
secondaryEmptyLabel="Selecione uma categoria"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<span className="text-sm font-medium text-neutral-800">Anexos (opcional)</span>
|
||||
<Dropzone
|
||||
onUploaded={(files) => setAttachments((prev) => [...prev, ...files])}
|
||||
className="rounded-xl border border-dashed border-slate-300 bg-slate-50 px-3 py-4 text-sm text-neutral-600 shadow-inner"
|
||||
/>
|
||||
<p className="text-xs text-neutral-500">
|
||||
Formatos comuns de imagens e documentos são aceitos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import type { Ticket } from "@/lib/schemas/ticket"
|
|||
import { useAuth } from "@/lib/auth-client"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Spinner } from "@/components/ui/spinner"
|
||||
import { PortalTicketCard } from "@/components/portal/portal-ticket-card"
|
||||
|
||||
export function PortalTicketList() {
|
||||
|
|
@ -35,13 +35,12 @@ export function PortalTicketList() {
|
|||
if (ticketsRaw === undefined) {
|
||||
return (
|
||||
<Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||
<CardHeader className="px-5 py-5">
|
||||
<CardHeader className="flex items-center gap-2 px-5 py-5">
|
||||
<Spinner className="size-4 text-neutral-500" />
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">Carregando chamados...</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 px-5 pb-6">
|
||||
{Array.from({ length: 4 }).map((_, index) => (
|
||||
<Skeleton key={index} className="h-[132px] w-full rounded-xl" />
|
||||
))}
|
||||
<CardContent className="px-5 pb-6 text-sm text-neutral-600">
|
||||
Estamos buscando seus chamados mais recentes. Isso deve levar apenas alguns instantes.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue