feat(ui): melhora UX do formulario de tickets

- Adiciona skeleton loading no formulario de novo chamado do portal - Remove texto confuso do tipo de solicitacao padrao - Padroniza estilo dos labels Categoria/Subcategoria com os demais campos - Move botao "Criar" do header para parte inferior do modal na web 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-17 10:12:02 -03:00 · 2025-12-17 10:12:02 -03:00 · 385a8ee3df
commit 385a8ee3df
parent 811ad0641a
4 changed files with 150 additions and 50 deletions
--- a/src/components/portal/portal-ticket-form.tsx
+++ b/src/components/portal/portal-ticket-form.tsx
@ -13,6 +13,7 @@ import type { TicketPriority } from "@/lib/schemas/ticket"
 import { sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
 import { useAuth } from "@/lib/auth-client"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { CategorySelectFields } from "@/components/tickets/category-select"
@ -144,6 +145,7 @@ export function PortalTicketForm() {
    return true
  }, [subject, description, categoryId, subcategoryId, machineInactive, customFieldsInvalid])
  const isViewerReady = Boolean(viewerId)
+  const isFormLoading = machineContextLoading || (viewerId && formsRemote === undefined)
  const viewerErrorMessage = useMemo(() => {
    if (!machineContextError) return null
    const suffix = machineContextError.status ? ` (status ${machineContextError.status})` : ""
@ -239,6 +241,51 @@ export function PortalTicketForm() {
    }
  }

+  if (isFormLoading) {
+    return (
+      <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
+        <CardHeader className="px-5 py-5">
+          <CardTitle className="text-xl font-semibold text-neutral-900">Abrir novo chamado</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6 px-5 pb-6">
+          <div className="space-y-2 rounded-xl border border-slate-200 bg-slate-50 px-4 py-4">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-9 w-full rounded-lg" />
+            <Skeleton className="h-3 w-48" />
+          </div>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-10 w-full rounded-lg" />
+            </div>
+            <div className="space-y-1">
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-32 w-full rounded-2xl" />
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-10 w-full rounded-lg" />
+            </div>
+            <div className="space-y-1">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-10 w-full rounded-lg" />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-24 w-full rounded-xl" />
+          </div>
+          <div className="flex justify-end gap-3">
+            <Skeleton className="h-10 w-24 rounded-full" />
+            <Skeleton className="h-10 w-36 rounded-full" />
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
  return (
    <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
      <CardHeader className="px-5 py-5">
@ -279,7 +326,7 @@ export function PortalTicketForm() {
                  ))}
                </SelectContent>
              </Select>
-              {selectedForm?.description ? (
+              {selectedForm?.description && selectedFormKey !== "default" ? (
                <p className="text-xs text-neutral-500">{selectedForm.description}</p>
              ) : null}
            </div>
@ -322,8 +369,8 @@ export function PortalTicketForm() {
              onCategoryChange={setCategoryId}
              onSubcategoryChange={setSubcategoryId}
              layout="stacked"
-              categoryLabel="Categoria *"
-              subcategoryLabel="Subcategoria *"
+              categoryRequired
+              subcategoryRequired
              secondaryEmptyLabel="Selecione uma categoria"
            />
            {selectedForm.fields.length > 0 ? (
--- a/src/components/tickets/category-select.tsx
+++ b/src/components/tickets/category-select.tsx
@ -23,6 +23,8 @@ interface CategorySelectProps {
  disabled?: boolean
  categoryLabel?: string
  subcategoryLabel?: string
+  categoryRequired?: boolean
+  subcategoryRequired?: boolean
  className?: string
  secondaryEmptyLabel?: string
  layout?: "grid" | "stacked"
@ -41,9 +43,11 @@ export function CategorySelectFields({
  onSubcategoryChange,
  autoSelectFirst = true,
  disabled = false,
-  categoryLabel = "Primária",
-  subcategoryLabel = "Secundária",
-  secondaryEmptyLabel = "Selecione uma categoria primária",
+  categoryLabel = "Categoria",
+  subcategoryLabel = "Subcategoria",
+  categoryRequired = false,
+  subcategoryRequired = false,
+  secondaryEmptyLabel = "Selecione uma categoria",
  className,
  layout = "grid",
 }: CategorySelectProps) {
@ -80,9 +84,11 @@ export function CategorySelectFields({

  return (
    <div className={cn(containerClass, className)}>
-      <div className="space-y-1.5">
-        <label className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
-          <IconFolders className="size-3.5" /> {categoryLabel}
+      <div className="space-y-1">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-neutral-800">
+          <IconFolders className="size-4 text-neutral-500" />
+          {categoryLabel}
+          {categoryRequired ? <span className="text-red-500">*</span> : null}
        </label>
        <Select
          disabled={disabled || isLoading || categories.length === 0}
@ -107,9 +113,11 @@ export function CategorySelectFields({
          </SelectContent>
        </Select>
      </div>
-      <div className="space-y-1.5">
-        <label className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
-          <IconFolder className="size-3.5" /> {subcategoryLabel}
+      <div className="space-y-1">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-neutral-800">
+          <IconFolder className="size-4 text-neutral-500" />
+          {subcategoryLabel}
+          {subcategoryRequired ? <span className="text-red-500">*</span> : null}
        </label>
        <Select
          disabled={disabled || secondaryOptions.length === 0}
--- a/src/components/tickets/new-ticket-dialog.tsx
+++ b/src/components/tickets/new-ticket-dialog.tsx
@ -776,28 +776,13 @@ export function NewTicketDialog({
        <div className="max-h-[88vh] overflow-y-auto">
          <div className="space-y-5 px-6 pt-7 pb-12 sm:px-8 md:px-10">
            <form className="space-y-6" onSubmit={form.handleSubmit(submit)}>
-              <div className="flex flex-col gap-4 border-b border-slate-200 pb-5 md:flex-row md:items-start md:justify-between">
+              <div className="border-b border-slate-200 pb-5">
                <DialogHeader className="gap-1.5 p-0">
                  <DialogTitle className="text-xl font-semibold text-neutral-900">Novo ticket</DialogTitle>
                  <DialogDescription className="text-sm text-neutral-600">
                    Preencha as informações básicas para abrir um chamado.
                  </DialogDescription>
                </DialogHeader>
-                <div className="flex justify-end md:min-w-[140px]">
-                  <Button
-                    type="submit"
-                    disabled={loading}
-                    className="inline-flex items-center gap-2 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:opacity-60"
-                  >
-                    {loading ? (
-                      <>
-                        <Spinner className="me-2" /> Criando…
-                      </>
-                    ) : (
-                      "Criar"
-                    )}
-                  </Button>
-                </div>
              </div>
              {forms.length > 1 ? (
                <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-4">
@ -1023,8 +1008,8 @@ export function NewTicketDialog({
                        subcategoryId={subcategoryIdValue || null}
                        onCategoryChange={handleCategoryChange}
                        onSubcategoryChange={handleSubcategoryChange}
-                        categoryLabel="Categoria primária *"
-                        subcategoryLabel="Categoria secundária *"
+                        categoryRequired
+                        subcategoryRequired
                        layout="stacked"
                      />
                      {form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (
@ -1520,6 +1505,22 @@ export function NewTicketDialog({
                  </div>
                </div>
              </FieldSet>
+
+              <div className="flex justify-end border-t border-slate-200 pt-5">
+                <Button
+                  type="submit"
+                  disabled={loading}
+                  className="inline-flex items-center gap-2 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:opacity-60"
+                >
+                  {loading ? (
+                    <>
+                      <Spinner className="me-2" /> Criando…
+                    </>
+                  ) : (
+                    "Criar"
+                  )}
+                </Button>
+              </div>
            </form>
          </div>
        </div>