esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(portal): aprimorar formulário e layout para colaboradores

Browse source
This commit is contained in:
Esdras Renan 2025-10-12 04:47:27 -03:00
parent d6a164df0e
commit d117d8d59f
4 changed files with 39 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/components/portal/portal-ticket-form.tsx
View file

@ -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">