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

apps/desktop/src-tauri/tauri.conf.json

@@ -17,7 +17,8 @@
         "width": 1100,
         "height": 720,
         "resizable": true,
-        "fullscreen": true
+        "fullscreen": false,
+        "maximized": true
       }
     ],
     "security": {

src/components/portal/portal-shell.tsx

@@ -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,12 +59,17 @@ 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 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>
             <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) => {
               const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`)

src/components/portal/portal-ticket-form.tsx

@@ -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> = {
+const DEFAULT_PRIORITY: TicketPriority = "MEDIUM"
-  LOW: "Baixa",
-  MEDIUM: "Média",
-  HIGH: "Alta",
-  URGENT: "Urgente",
-}
 
 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">

src/components/portal/portal-ticket-list.tsx

@@ -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">
+        <CardContent className="px-5 pb-6 text-sm text-neutral-600">
-          {Array.from({ length: 4 }).map((_, index) => (
+          Estamos buscando seus chamados mais recentes. Isso deve levar apenas alguns instantes.
-            <Skeleton key={index} className="h-[132px] w-full rounded-xl" />
-          ))}
         </CardContent>
       </Card>
     )