Lint errors

Signed-off-by: Rodrigo Martins <rodrigo.sousa.577@gmail.com>

.eslintrc.js

@@ -1,29 +1,110 @@
 module.exports = {
-  parser: '@typescript-eslint/parser',
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
   extends: [
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:prettier/recommended'
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "prettier",
   ],
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
     ecmaFeatures: {
-      jsx: true
-    }
+      jsx: true,
     },
-  plugins: ['react', '@typescript-eslint', 'react-hooks'],
-  rules: {
-    'react/react-in-jsx-scope': 'off',
-    'react/prop-types': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    'prettier/prettier': ['error', {}, { usePrettierrc: true }]
+    ecmaVersion: 2021,
+    sourceType: "module",
   },
+  plugins: [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "jsx-a11y",
+    "import",
+    "prettier",
+  ],
   settings: {
     react: {
-      version: 'detect'
-    }
-  }
+      version: "detect",
+    },
+    "import/resolver": {
+      typescript: {},
+      node: {
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      },
+    },
+  },
+  rules: {
+    // Regras essenciais para segurança e prevenção de erros
+    "no-console": ["warn", { allow: ["warn", "error", "info"] }],
+    "no-unused-vars": "off", // Desativado em favor da versão TypeScript
+    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    "no-undef": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    eqeqeq: ["error", "always"],
+
+    // Regras específicas do React
+    "react/prop-types": "off", // Desnecessário com TypeScript
+    "react/react-in-jsx-scope": "off", // Não necessário no React 17+
+    "react/jsx-uses-react": "off", // Não necessário no React 17+
+    "react/jsx-key": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+
+    // Regras de acessibilidade
+    "jsx-a11y/anchor-is-valid": "warn",
+
+    // Estilo e formatação
+    "prettier/prettier": "warn",
+
+    // Regras específicas de segurança
+    "no-eval": "error",
+    "no-implied-eval": "error",
+
+    // Regras para evitar SQL injection (útil para código de backend)
+    "@typescript-eslint/no-explicit-any": "warn",
+
+    // Regras para importações
+    "import/no-unresolved": "error",
+    "import/named": "error",
+    "import/default": "error",
+    "import/namespace": "error",
+    "import/order": [
+      "warn",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+        ],
+        "newlines-between": "always",
+        alphabetize: { order: "asc", caseInsensitive: true },
+      },
+    ],
+  },
+  overrides: [
+    // Regras específicas para arquivos de teste
+    {
+      files: ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"],
+      env: {
+        jest: true,
+      },
+      rules: {
+        "@typescript-eslint/no-explicit-any": "off",
+      },
+    },
+  ],
 };

package.json

@@ -15,11 +15,12 @@
     "postinstall": "prisma generate && npx puppeteer browsers install chrome",
     "server": "ts-node --transpile-only src/server/index.ts",
     "dev:full": "concurrently -n \"frontend,backend\" -c \"blue,green\" \"npm run dev\" \"npm run server\"",
-    "lint": "eslint . --ext .ts,.tsx",
-    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
     "create-admin": "ts-node scripts/create_admin_user.ts",
     "worker": "ts-node src/workers/startWorker.ts",
-    "install-deps": "npm install ua-parser-js uuid axios xlsx"
+    "install-deps": "npm install ua-parser-js uuid axios xlsx",
+    "security-check": "npm audit"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
@@ -36,7 +37,7 @@
     "@tiptap/starter-kit": "^2.11.7",
     "@types/sharp": "^0.32.0",
     "@types/ua-parser-js": "^0.7.36",
-    "axios": "^1.6.5",
+    "axios": "^1.8.4",
     "bcryptjs": "^2.4.3",
     "buffer": "^6.0.3",
     "bullmq": "^4.12.0",
@@ -44,6 +45,7 @@
     "date-fns": "^2.30.0",
     "detect-file-type": "^0.2.3",
     "dotenv": "^16.4.1",
+    "exceljs": "^4.4.0",
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.2",
     "multer": "^1.4.5-lts.1",
@@ -62,10 +64,10 @@
     "react-toastify": "^10.0.4",
     "redis": "^4.6.10",
     "sharp": "^0.33.2",
+    "tough-cookie": "^4.1.3",
     "ua-parser-js": "^1.0.35",
     "uuid": "^9.0.1",
     "webdav": "^5.3.1",
-    "xlsx": "^0.18.5",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -80,15 +82,18 @@
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^19.0.4",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.28.0",
-    "@typescript-eslint/parser": "^8.28.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.17",
     "concurrently": "^9.1.2",
-    "eslint": "^9.23.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-prettier": "^5.2.5",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-import-resolver-typescript": "^4.3.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "postcss": "^8.4.33",
     "prettier": "^3.5.3",

postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
-    'tailwindcss/nesting': {},
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

prisma/migrations/[timestamp]_add_documentos_tables.ts

@@ -1,5 +1,5 @@
-import { PrismaClient } from '@prisma/client'
-const prisma = new PrismaClient()
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
 
 async function main() {
   await prisma.$executeRaw`
@@ -43,7 +43,7 @@ async function main() {
 }
 
 main()
-  .catch(e => {
+  .catch((e) => {
     console.error(e);
     process.exit(1);
   })

prisma/migrations/[timestamp]_add_template_config.ts

@@ -1,5 +1,5 @@
-import { PrismaClient } from '@prisma/client'
-const prisma = new PrismaClient()
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
 
 async function main() {
   await prisma.$executeRaw`
@@ -10,7 +10,7 @@ async function main() {
 }
 
 main()
-  .catch(e => {
+  .catch((e) => {
     console.error(e);
     process.exit(1);
   })

prisma/migrations/[timestamp]_add_timbrado_config.ts

@@ -1,5 +1,5 @@
-import { PrismaClient } from '@prisma/client'
-const prisma = new PrismaClient()
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
 
 async function main() {
   await prisma.$executeRaw`
@@ -13,7 +13,7 @@ async function main() {
 }
 
 main()
-  .catch(e => {
+  .catch((e) => {
     console.error(e);
     process.exit(1);
   })

prisma/migrations/[timestamp]_create_configuracao_documento.ts

@@ -1,5 +1,5 @@
-import { PrismaClient } from '@prisma/client'
-const prisma = new PrismaClient()
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
 
 async function main() {
   await prisma.$executeRaw`
@@ -17,15 +17,15 @@ async function main() {
   // Inserir configuração padrão
   await prisma.configuracaoDocumento.create({
     data: {
-      headerImageUrl: '',
-      footerImageUrl: '',
-      logoUrl: ''
-    }
+      headerImageUrl: "",
+      footerImageUrl: "",
+      logoUrl: "",
+    },
   });
 }
 
 main()
-  .catch(e => {
+  .catch((e) => {
     console.error(e);
     process.exit(1);
   })

prisma/migrations/[timestamp]_update_configuracao_documento.ts

@@ -1,5 +1,5 @@
-import { PrismaClient } from '@prisma/client'
-const prisma = new PrismaClient()
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
 
 async function main() {
   await prisma.$executeRaw`
@@ -13,7 +13,7 @@ async function main() {
 }
 
 main()
-  .catch(e => {
+  .catch((e) => {
     console.error(e);
     process.exit(1);
   })

public/tinymce/langs/pt_BR.js

@@ -1,216 +1,223 @@
-
-tinymce.addI18n('pt_BR',{
-    "Cut": "Recortar",
+tinymce.addI18n("pt_BR", {
+  Cut: "Recortar",
   "Heading 5": "Cabe\u00e7alho 5",
   "Header 2": "Cabe\u00e7alho 2",
-    "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "Seu navegador n\u00e3o suporta acesso direto \u00e0 \u00e1rea de transfer\u00eancia. Por favor use os atalhos Ctrl+X - C - V do teclado",
+  "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.":
+    "Seu navegador n\u00e3o suporta acesso direto \u00e0 \u00e1rea de transfer\u00eancia. Por favor use os atalhos Ctrl+X - C - V do teclado",
   "Heading 4": "Cabe\u00e7alho 4",
-    "Div": "Div",
+  Div: "Div",
   "Heading 2": "Cabe\u00e7alho 2",
-    "Paste": "Colar",
-    "Close": "Fechar",
+  Paste: "Colar",
+  Close: "Fechar",
   "Font Family": "Fonte",
-    "Pre": "Pre",
+  Pre: "Pre",
   "Align right": "Alinhar \u00e0 direita",
   "New document": "Novo documento",
-    "Blockquote": "Aspas",
+  Blockquote: "Aspas",
   "Numbered list": "Lista ordenada",
   "Heading 1": "Cabe\u00e7alho 1",
-    "Headings": "Cabe\u00e7alhos",
+  Headings: "Cabe\u00e7alhos",
   "Increase indent": "Aumentar recuo",
-    "Formats": "Formatos",
-    "Headers": "Cabe\u00e7alhos",
+  Formats: "Formatos",
+  Headers: "Cabe\u00e7alhos",
   "Select all": "Selecionar tudo",
   "Header 3": "Cabe\u00e7alho 3",
-    "Blocks": "Blocos",
-    "Undo": "Desfazer",
-    "Strikethrough": "Riscar",
+  Blocks: "Blocos",
+  Undo: "Desfazer",
+  Strikethrough: "Riscar",
   "Bullet list": "Lista n\u00e3o ordenada",
   "Header 1": "Cabe\u00e7alho 1",
-    "Superscript": "Sobrescrito",
+  Superscript: "Sobrescrito",
   "Clear formatting": "Limpar formata\u00e7\u00e3o",
   "Font Sizes": "Tamanho",
-    "Subscript": "Subscrever",
+  Subscript: "Subscrever",
   "Header 6": "Cabe\u00e7alho 6",
-    "Redo": "Refazer",
-    "Paragraph": "Par\u00e1grafo",
-    "Ok": "Ok",
-    "Bold": "Negrito",
-    "Code": "C\u00f3digo",
-    "Italic": "It\u00e1lico",
+  Redo: "Refazer",
+  Paragraph: "Par\u00e1grafo",
+  Ok: "Ok",
+  Bold: "Negrito",
+  Code: "C\u00f3digo",
+  Italic: "It\u00e1lico",
   "Align center": "Centralizar",
   "Header 5": "Cabe\u00e7alho 5",
   "Heading 6": "Cabe\u00e7alho 6",
   "Heading 3": "Cabe\u00e7alho 3",
   "Decrease indent": "Diminuir recuo",
   "Header 4": "Cabe\u00e7alho 4",
-    "Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "O comando colar est\u00e1 agora em modo texto plano. O conte\u00fado ser\u00e1 colado como texto plano at\u00e9 voc\u00ea desligar esta op\u00e7\u00e3o.",
-    "Underline": "Sublinhar",
-    "Cancel": "Cancelar",
-    "Justify": "Justificar",
-    "Inline": "Em linha",
-    "Copy": "Copiar",
+  "Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.":
+    "O comando colar est\u00e1 agora em modo texto plano. O conte\u00fado ser\u00e1 colado como texto plano at\u00e9 voc\u00ea desligar esta op\u00e7\u00e3o.",
+  Underline: "Sublinhar",
+  Cancel: "Cancelar",
+  Justify: "Justificar",
+  Inline: "Em linha",
+  Copy: "Copiar",
   "Align left": "Alinhar \u00e0 esquerda",
   "Visual aids": "Ajuda visual",
   "Lower Greek": "\u03b1. \u03b2. \u03b3. ...",
-    "Square": "Quadrado",
-    "Default": "Padr\u00e3o",
+  Square: "Quadrado",
+  Default: "Padr\u00e3o",
   "Lower Alpha": "a. b. c. ...",
-    "Circle": "C\u00edrculo",
-    "Disc": "Disco",
+  Circle: "C\u00edrculo",
+  Disc: "Disco",
   "Upper Alpha": "A. B. C. ...",
   "Upper Roman": "I. II. III. ...",
   "Lower Roman": "i. ii. iii. ...",
-    "Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "Id deve come\u00e7ar com uma letra, seguido apenas por letras, n\u00fameros, tra\u00e7os, pontos, dois pontos ou sublinhados.",
-    "Name": "Nome",
-    "Anchor": "\u00c2ncora",
-    "Id": "Id",
-    "You have unsaved changes are you sure you want to navigate away?": "Voc\u00ea tem mudan\u00e7as n\u00e3o salvas. Voc\u00ea tem certeza que deseja sair?",
+  "Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.":
+    "Id deve come\u00e7ar com uma letra, seguido apenas por letras, n\u00fameros, tra\u00e7os, pontos, dois pontos ou sublinhados.",
+  Name: "Nome",
+  Anchor: "\u00c2ncora",
+  Id: "Id",
+  "You have unsaved changes are you sure you want to navigate away?":
+    "Voc\u00ea tem mudan\u00e7as n\u00e3o salvas. Voc\u00ea tem certeza que deseja sair?",
   "Restore last draft": "Restaurar \u00faltimo rascunho",
   "Special character": "Caracteres especiais",
   "Source code": "C\u00f3digo fonte",
-    "Language": "Idioma",
+  Language: "Idioma",
   "Insert\/Edit code sample": "Inserir\/Editar c\u00f3digo de exemplo",
-    "B": "B",
-    "R": "R",
-    "G": "G",
-    "Color": "Cor",
+  B: "B",
+  R: "R",
+  G: "G",
+  Color: "Cor",
   "Right to left": "Da direita para a esquerda",
   "Left to right": "Da esquerda para a direita",
-    "Emoticons": "Emoticons",
-    "Robots": "Rob\u00f4s",
+  Emoticons: "Emoticons",
+  Robots: "Rob\u00f4s",
   "Document properties": "Propriedades do documento",
-    "Title": "T\u00edtulo",
-    "Keywords": "Palavras-chave",
-    "Encoding": "Codifica\u00e7\u00e3o",
-    "Description": "Descri\u00e7\u00e3o",
-    "Author": "Autor",
-    "Fullscreen": "Tela cheia",
+  Title: "T\u00edtulo",
+  Keywords: "Palavras-chave",
+  Encoding: "Codifica\u00e7\u00e3o",
+  Description: "Descri\u00e7\u00e3o",
+  Author: "Autor",
+  Fullscreen: "Tela cheia",
   "Horizontal line": "Linha horizontal",
   "Horizontal space": "Espa\u00e7amento horizontal",
   "Insert\/edit image": "Inserir\/editar imagem",
-    "General": "Geral",
-    "Advanced": "Avan\u00e7ado",
-    "Source": "Endere\u00e7o da imagem",
-    "Border": "Borda",
+  General: "Geral",
+  Advanced: "Avan\u00e7ado",
+  Source: "Endere\u00e7o da imagem",
+  Border: "Borda",
   "Constrain proportions": "Manter propor\u00e7\u00f5es",
   "Vertical space": "Espa\u00e7amento vertical",
   "Image description": "Inserir descri\u00e7\u00e3o",
-    "Style": "Estilo",
-    "Dimensions": "Dimens\u00f5es",
+  Style: "Estilo",
+  Dimensions: "Dimens\u00f5es",
   "Insert image": "Inserir imagem",
-    "Image": "Imagem",
+  Image: "Imagem",
   "Zoom in": "Aumentar zoom",
-    "Contrast": "Contraste",
-    "Back": "Voltar",
-    "Gamma": "Gama",
+  Contrast: "Contraste",
+  Back: "Voltar",
+  Gamma: "Gama",
   "Flip horizontally": "Virar horizontalmente",
-    "Resize": "Redimensionar",
-    "Sharpen": "Aumentar nitidez",
+  Resize: "Redimensionar",
+  Sharpen: "Aumentar nitidez",
   "Zoom out": "Diminuir zoom",
   "Image options": "Op\u00e7\u00f5es de Imagem",
-    "Apply": "Aplicar",
-    "Brightness": "Brilho",
+  Apply: "Aplicar",
+  Brightness: "Brilho",
   "Rotate clockwise": "Girar em sentido anti-hor\u00e1rio",
   "Rotate counterclockwise": "Girar em sentido hor\u00e1rio",
   "Edit image": "Editar imagem",
   "Color levels": "N\u00edveis de cor",
-    "Crop": "Cortar",
-    "Orientation": "Orienta\u00e7\u00e3o",
+  Crop: "Cortar",
+  Orientation: "Orienta\u00e7\u00e3o",
   "Flip vertically": "Virar verticalmente",
-    "Invert": "Inverter",
+  Invert: "Inverter",
   "Date\/time": "data\/hora",
   "Insert date\/time": "Inserir data\/hora",
   "Remove link": "Remover link",
-    "Url": "Url",
+  Url: "Url",
   "Text to display": "Texto para mostrar",
-    "Anchors": "\u00c2ncoras",
+  Anchors: "\u00c2ncoras",
   "Insert link": "Inserir link",
-    "Link": "Link",
+  Link: "Link",
   "New window": "Nova janela",
-    "None": "Nenhum",
-    "The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "A URL que voc\u00ea informou parece ser um link externo. Deseja incluir o prefixo http:\/\/?",
+  None: "Nenhum",
+  "The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?":
+    "A URL que voc\u00ea informou parece ser um link externo. Deseja incluir o prefixo http:\/\/?",
   "Paste or type a link": "Cole ou digite um Link",
-    "Target": "Alvo",
-    "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?",
+  Target: "Alvo",
+  "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?":
+    "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?",
   "Insert\/edit link": "Inserir\/editar link",
   "Insert\/edit video": "Inserir\/editar v\u00eddeo",
-    "Media": "imagem",
+  Media: "imagem",
   "Alternative source": "Fonte alternativa",
-    "Paste your embed code below:": "Insira o c\u00f3digo de incorpora\u00e7\u00e3o abaixo:",
+  "Paste your embed code below:":
+    "Insira o c\u00f3digo de incorpora\u00e7\u00e3o abaixo:",
   "Insert video": "Inserir v\u00eddeo",
-    "Poster": "Autor",
+  Poster: "Autor",
   "Insert\/edit media": "Inserir\/editar imagem",
-    "Embed": "Incorporar",
+  Embed: "Incorporar",
   "Nonbreaking space": "Espa\u00e7o n\u00e3o separ\u00e1vel",
   "Page break": "Quebra de p\u00e1gina",
   "Paste as text": "Colar como texto",
-    "Preview": "Pr\u00e9-visualizar",
-    "Print": "Imprimir",
-    "Save": "Salvar",
-    "Could not find the specified string.": "N\u00e3o foi poss\u00edvel encontrar o termo especificado",
-    "Replace": "Substituir",
-    "Next": "Pr\u00f3ximo",
+  Preview: "Pr\u00e9-visualizar",
+  Print: "Imprimir",
+  Save: "Salvar",
+  "Could not find the specified string.":
+    "N\u00e3o foi poss\u00edvel encontrar o termo especificado",
+  Replace: "Substituir",
+  Next: "Pr\u00f3ximo",
   "Whole words": "Palavras inteiras",
   "Find and replace": "Localizar e substituir",
   "Replace with": "Substituir por",
-    "Find": "Localizar",
+  Find: "Localizar",
   "Replace all": "Substituir tudo",
   "Match case": "Diferenciar mai\u00fasculas e min\u00fasculas",
-    "Prev": "Anterior",
-    "Spellcheck": "Corretor ortogr\u00e1fico",
-    "Finish": "Finalizar",
+  Prev: "Anterior",
+  Spellcheck: "Corretor ortogr\u00e1fico",
+  Finish: "Finalizar",
   "Ignore all": "Ignorar tudo",
-    "Ignore": "Ignorar",
+  Ignore: "Ignorar",
   "Add to Dictionary": "Adicionar ao Dicion\u00e1rio",
   "Insert row before": "Inserir linha antes",
-    "Rows": "Linhas",
-    "Height": "Altura",
+  Rows: "Linhas",
+  Height: "Altura",
   "Paste row after": "Colar linha depois",
-    "Alignment": "Alinhamento",
+  Alignment: "Alinhamento",
   "Border color": "Cor da borda",
   "Column group": "Agrupar coluna",
-    "Row": "Linha",
+  Row: "Linha",
   "Insert column before": "Inserir coluna antes",
   "Split cell": "Dividir c\u00e9lula",
   "Cell padding": "Espa\u00e7amento interno da c\u00e9lula",
   "Cell spacing": "Espa\u00e7amento da c\u00e9lula",
   "Row type": "Tipo de linha",
   "Insert table": "Inserir tabela",
-    "Body": "Corpo",
-    "Caption": "Legenda",
-    "Footer": "Rodap\u00e9",
+  Body: "Corpo",
+  Caption: "Legenda",
+  Footer: "Rodap\u00e9",
   "Delete row": "Excluir linha",
   "Paste row before": "Colar linha antes",
-    "Scope": "Escopo",
+  Scope: "Escopo",
   "Delete table": "Excluir tabela",
   "H Align": "Alinhamento H",
-    "Top": "Superior",
+  Top: "Superior",
   "Header cell": "C\u00e9lula cabe\u00e7alho",
-    "Column": "Coluna",
+  Column: "Coluna",
   "Row group": "Agrupar linha",
-    "Cell": "C\u00e9lula",
-    "Middle": "Meio",
+  Cell: "C\u00e9lula",
+  Middle: "Meio",
   "Cell type": "Tipo de c\u00e9lula",
   "Copy row": "Copiar linha",
   "Row properties": "Propriedades da linha",
   "Table properties": "Propriedades da tabela",
-    "Bottom": "Inferior",
+  Bottom: "Inferior",
   "V Align": "Alinhamento V",
-    "Header": "Cabe\u00e7alho",
-    "Right": "Direita",
+  Header: "Cabe\u00e7alho",
+  Right: "Direita",
   "Insert column after": "Inserir coluna depois",
-    "Cols": "Colunas",
+  Cols: "Colunas",
   "Insert row after": "Inserir linha depois",
-    "Width": "Largura",
+  Width: "Largura",
   "Cell properties": "Propriedades da c\u00e9lula",
-    "Left": "Esquerdo",
+  Left: "Esquerdo",
   "Cut row": "Recortar linha",
   "Delete column": "Excluir coluna",
-    "Center": "Centro",
+  Center: "Centro",
   "Merge cells": "Agrupar c\u00e9lulas",
   "Insert template": "Inserir modelo",
-    "Templates": "Modelos",
+  Templates: "Modelos",
   "Background color": "Cor do fundo",
   "Custom...": "Personalizado...",
   "Custom color": "Cor personalizada",
@@ -220,13 +227,13 @@ tinymce.addI18n('pt_BR',{
   "Show blocks": "Mostrar blocos",
   "Show invisible characters": "Exibir caracteres invis\u00edveis",
   "Words: {0}": "Palavras: {0}",
-    "Insert": "Inserir",
-    "File": "Arquivo",
-    "Edit": "Editar",
-    "Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u00c1rea de texto formatado. Pressione ALT-F9 para exibir o menu, ALT-F10 para exibir a barra de ferramentas ou ALT-0 para exibir a ajuda",
-    "Tools": "Ferramentas",
-    "View": "Visualizar",
-    "Table": "Tabela",
-    "Format": "Formatar"
+  Insert: "Inserir",
+  File: "Arquivo",
+  Edit: "Editar",
+  "Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help":
+    "\u00c1rea de texto formatado. Pressione ALT-F9 para exibir o menu, ALT-F10 para exibir a barra de ferramentas ou ALT-0 para exibir a ajuda",
+  Tools: "Ferramentas",
+  View: "Visualizar",
+  Table: "Tabela",
+  Format: "Formatar",
 });
-    

scripts/create_admin_user.ts

@@ -16,27 +16,27 @@ async function createAdminUser() {
       ativo: true,
       cpf: "06116321100",
       oab: "12774",
-      oabUF: "TO"
+      oabUF: "TO",
     };
 
     console.log("Tentando criar/atualizar usuário admin...");
 
     // Verifica se já existe na tabela usuarios
     const existingAdmin = await prisma.usuario.findUnique({
-      where: { email: adminData.email }
+      where: { email: adminData.email },
     });
 
     if (existingAdmin) {
       console.log("Usuário admin já existe. Atualizando...");
       await prisma.usuario.update({
         where: { email: adminData.email },
-        data: adminData
+        data: adminData,
       });
       console.log("Admin atualizado com sucesso!");
     } else {
       console.log("Criando novo usuário admin...");
       await prisma.usuario.create({
-        data: adminData
+        data: adminData,
       });
       console.log("Novo admin criado com sucesso!");
     }
@@ -44,7 +44,6 @@ async function createAdminUser() {
     console.log("\nCredenciais de acesso:");
     console.log("Email:", adminData.email);
     console.log("Senha: 34641747");
-
   } catch (error) {
     console.error("Erro ao criar/atualizar usuário admin:", error);
   } finally {

src/App.tsx

@@ -1,66 +1,87 @@
+import { LoginPage } from "./components/LoginPage";
+import { Dashboard } from "./components/Dashboard";
+import { MainLayout } from "./components/layouts/MainLayout";
+import { AuthProvider } from "./contexts/AuthContext";
+
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { ptBR } from "date-fns/locale";
 import React from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
 import {
   createBrowserRouter,
   RouterProvider,
   createRoutesFromElements,
   Route,
-  Navigate
+  Navigate,
 } from "react-router-dom";
-import { LoginPage } from "./components/LoginPage";
-import { Dashboard } from "./components/Dashboard";
-import { MainLayout } from "./components/layouts/MainLayout";
-import { PrivateRoute } from "./components/PrivateRoute";
-import { AuthProvider } from "./contexts/AuthContext";
-import { ClientesPage } from "./components/clientes/ClientesPage";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { ClienteDetalhes } from "./components/clientes/ClienteDetalhes";
-import { ProcessosPage } from "./components/processos/ProcessosPage";
-import { ProcessoDetalhes } from "./components/processos/ProcessoDetalhes";
-import { UsuariosPage } from "./components/usuarios/UsuariosPage";
-import { AdminRoute } from "./components/AdminRoute";
-import { PerfilPage } from "./components/perfil/PerfilPage";
-import { AtendimentosPage } from "./components/atendimentos/AtendimentosPage";
-import { AtendimentoDetalhes } from "./components/atendimentos/AtendimentoDetalhes";
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { ptBR } from 'date-fns/locale';
-import { ThemeProvider } from './contexts/ThemeContext';
+
+import { ThemeProvider } from "./contexts/ThemeContext";
 import { TarefasPage } from "./components/tarefas/TarefasPage";
-import { DocumentosPage } from './components/DocumentosPage';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import { GerenciarTemplates } from './components/documentos/GerenciarTemplates';
-import { ConfiguracaoDocumento } from './components/documentos/ConfiguracaoDocumento';
-import { ProcessoAdministrativoList } from './components/processosAdministrativos/ProcessoAdministrativoList';
-import { ProcessoAdminDetalhes } from './components/processosAdministrativos/ProcessoAdminDetalhes';
-import { ProtectedRoute } from './components/ProtectedRoute';
-import { ProvaUpload } from './components/provas/ProvaUpload';
-import { ProvaStatus } from './components/provas/ProvaStatus';
-import { AdminProvas } from './components/provas/AdminProvas';
-import { VerificarProva } from './components/provas/VerificarProva';
-import { ErrorBoundary } from './components/ErrorBoundary';
-import { PublicVerificarProva } from './components/provas/PublicVerificarProva';
-import { ClientProvaUpload } from './components/provas/ClientProvaUpload';
-import { PublicProvaStatus } from './components/provas/PublicProvaStatus';
+import { DocumentosPage } from "./components/DocumentosPage";
+
+import { ToastContainer } from "react-toastify";
+
+import { AdminRoute } from "./components/AdminRoute";
+import { AtendimentoDetalhes } from "./components/atendimentos/AtendimentoDetalhes";
+import { AtendimentosPage } from "./components/atendimentos/AtendimentosPage";
+
+import "react-toastify/dist/ReactToastify.css";
 
 // Importar os componentes de cálculos
-import { CalculosList } from './components/calculos/CalculosList';
-import { NovoCalculo } from './components/calculos/NovoCalculo';
-import { DetalhesCalculo } from './components/calculos/DetalhesCalculo';
-import { NovoPensaoAlimenticia } from './components/calculos/NovoPensaoAlimenticia';
+import { CalculosList } from "./components/calculos/CalculosList";
+import { DetalhesCalculo } from "./components/calculos/DetalhesCalculo";
+import { NovoCalculo } from "./components/calculos/NovoCalculo";
+import { NovoPensaoAlimenticia } from "./components/calculos/NovoPensaoAlimenticia";
+import { ClienteDetalhes } from "./components/clientes/ClienteDetalhes";
+import { ClientesPage } from "./components/clientes/ClientesPage";
+import { ConfiguracaoDocumento } from "./components/documentos/ConfiguracaoDocumento";
+import { GerenciarTemplates } from "./components/documentos/GerenciarTemplates";
+import { ErrorBoundary } from "./components/ErrorBoundary";
+import { PerfilPage } from "./components/perfil/PerfilPage";
+import { PrivateRoute } from "./components/PrivateRoute";
+import { ProcessoDetalhes } from "./components/processos/ProcessoDetalhes";
+import { ProcessosPage } from "./components/processos/ProcessosPage";
+import { ProcessoAdminDetalhes } from "./components/processosAdministrativos/ProcessoAdminDetalhes";
+import { ProcessoAdministrativoList } from "./components/processosAdministrativos/ProcessoAdministrativoList";
+import { ProtectedRoute } from "./components/ProtectedRoute";
+import { AdminProvas } from "./components/provas/AdminProvas";
+import { ClientProvaUpload } from "./components/provas/ClientProvaUpload";
+import { ProvaStatus } from "./components/provas/ProvaStatus";
+import { ProvaUpload } from "./components/provas/ProvaUpload";
+import { PublicProvaStatus } from "./components/provas/PublicProvaStatus";
+import { PublicVerificarProva } from "./components/provas/PublicVerificarProva";
+import { VerificarProva } from "./components/provas/VerificarProva";
+import { UsuariosPage } from "./components/usuarios/UsuariosPage";
 
 const queryClient = new QueryClient();
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <>
-      <Route path="/" element={<Navigate to="/dashboard" />} errorElement={<ErrorBoundary />} />
+      <Route
+        path="/"
+        element={<Navigate to="/dashboard" />}
+        errorElement={<ErrorBoundary />}
+      />
       <Route path="/login" element={<LoginPage />} />
 
       {/* Rotas públicas para validação digital */}
-      <Route path="/public/verificar/:hash" element={<PublicVerificarProva />} errorElement={<ErrorBoundary />} />
-      <Route path="/public/provas/upload" element={<ClientProvaUpload />} errorElement={<ErrorBoundary />} />
-      <Route path="/public/provas/status/:id" element={<PublicProvaStatus />} errorElement={<ErrorBoundary />} />
+      <Route
+        path="/public/verificar/:hash"
+        element={<PublicVerificarProva />}
+        errorElement={<ErrorBoundary />}
+      />
+      <Route
+        path="/public/provas/upload"
+        element={<ClientProvaUpload />}
+        errorElement={<ErrorBoundary />}
+      />
+      <Route
+        path="/public/provas/status/:id"
+        element={<PublicProvaStatus />}
+        errorElement={<ErrorBoundary />}
+      />
 
       <Route element={<PrivateRoute />}>
         <Route element={<MainLayout />}>
@@ -68,9 +89,18 @@ const router = createBrowserRouter(
           <Route path="documentos" element={<DocumentosPage />} />
           <Route path="documentos/templates" element={<GerenciarTemplates />} />
           <Route path="documentos/:id" element={<DocumentosPage />} />
-          <Route path="documentos/configuracoes" element={<ConfiguracaoDocumento />} />
-          <Route path="processos/:processoId/documentos" element={<DocumentosPage />} />
-          <Route path="atendimentos/:atendimentoId/documentos" element={<DocumentosPage />} />
+          <Route
+            path="documentos/configuracoes"
+            element={<ConfiguracaoDocumento />}
+          />
+          <Route
+            path="processos/:processoId/documentos"
+            element={<DocumentosPage />}
+          />
+          <Route
+            path="atendimentos/:atendimentoId/documentos"
+            element={<DocumentosPage />}
+          />
           <Route path="/processos" element={<ProcessosPage />} />
           <Route path="/processos/:id" element={<ProcessoDetalhes />} />
           <Route path="/clientes" element={<ClientesPage />} />
@@ -79,56 +109,92 @@ const router = createBrowserRouter(
           <Route path="/atendimentos" element={<AtendimentosPage />} />
           <Route path="/atendimentos/:id" element={<AtendimentoDetalhes />} />
           <Route path="/tarefas" element={<TarefasPage />} />
-          <Route path="/processos-administrativos" element={<ProtectedRoute roles={['ADVOGADO_ADMIN', 'ADVOGADO', 'ASSISTENTE']}><ProcessoAdministrativoList /></ProtectedRoute>} />
-          <Route path="/processos-administrativos/:id" element={<ProtectedRoute roles={['ADVOGADO_ADMIN', 'ADVOGADO', 'ASSISTENTE']}><ProcessoAdminDetalhes /></ProtectedRoute>} />
+          <Route
+            path="/processos-administrativos"
+            element={
+              <ProtectedRoute
+                roles={["ADVOGADO_ADMIN", "ADVOGADO", "ASSISTENTE"]}
+              >
+                <ProcessoAdministrativoList />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/processos-administrativos/:id"
+            element={
+              <ProtectedRoute
+                roles={["ADVOGADO_ADMIN", "ADVOGADO", "ASSISTENTE"]}
+              >
+                <ProcessoAdminDetalhes />
+              </ProtectedRoute>
+            }
+          />
           <Route path="/provas/upload" element={<ProvaUpload />} />
           <Route path="/provas/status/:id" element={<ProvaStatus />} />
-          <Route path="/provas/admin" element={
-            <ProtectedRoute roles={['ADVOGADO_ADMIN']}>
+          <Route
+            path="/provas/admin"
+            element={
+              <ProtectedRoute roles={["ADVOGADO_ADMIN"]}>
                 <AdminProvas />
               </ProtectedRoute>
-          } />
+            }
+          />
           <Route
             path="/provas/verificar/:hash"
             element={<VerificarProva />}
             errorElement={<ErrorBoundary />}
           />
           {/* Rotas para Cálculos Judiciais */}
-          <Route path="/calculos" element={
+          <Route
+            path="/calculos"
+            element={
               <ProtectedRoute>
                 <CalculosList />
               </ProtectedRoute>
-          } />
+            }
+          />
 
-          <Route path="/calculos/novo" element={
+          <Route
+            path="/calculos/novo"
+            element={
               <ProtectedRoute>
                 <NovoCalculo />
               </ProtectedRoute>
-          } />
+            }
+          />
 
-          <Route path="/calculos/:id" element={
+          <Route
+            path="/calculos/:id"
+            element={
               <ProtectedRoute>
                 <DetalhesCalculo />
               </ProtectedRoute>
-          } />
+            }
+          />
 
           {/* Rotas para Pensão Alimentícia */}
-          <Route path="/pensao-alimenticia/nova" element={
+          <Route
+            path="/pensao-alimenticia/nova"
+            element={
               <ProtectedRoute>
                 <NovoPensaoAlimenticia />
               </ProtectedRoute>
-          } />
+            }
+          />
 
-          <Route path="/pensao-alimenticia/:id" element={
+          <Route
+            path="/pensao-alimenticia/:id"
+            element={
               <ProtectedRoute>
                 <DetalhesCalculo />
               </ProtectedRoute>
-          } />
+            }
+          />
         </Route>
       </Route>
       <Route path="*" element={<Navigate to="/login" />} />
-    </>
-  )
+    </>,
+  ),
 );
 
 export const App: React.FC = () => {

src/components/AdminRoute.tsx

@@ -1,4 +1,5 @@
 import { Navigate, Outlet } from "react-router-dom";
+
 import { useAuth } from "../contexts/AuthContext";
 import { PerfilUsuario } from "../types/usuario";
 

src/components/Dashboard.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { DashboardLayout } from './dashboard/DashboardLayout';
+import React from "react";
+
+import { DashboardLayout } from "./dashboard/DashboardLayout";
 
 export const Dashboard: React.FC = () => {
   return <DashboardLayout />;

src/components/DocumentosPage.tsx

@@ -1,12 +1,21 @@
-import { useState, useEffect, useCallback } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
-import { DocumentIcon, PlusIcon, TrashIcon, EyeIcon, XMarkIcon, DocumentArrowDownIcon } from '@heroicons/react/24/outline';
-import { DocumentoEditor } from './documentos/DocumentoEditor';
-import { api } from '../lib/api';
-import { toast } from 'react-toastify';
-import { useAuth } from '../contexts/AuthContext';
-import { Dialog } from '@headlessui/react';
-import { DocumentoViewer } from './documentos/DocumentoViewer';
+import { Dialog } from "@headlessui/react";
+import {
+  DocumentIcon,
+  PlusIcon,
+  TrashIcon,
+  EyeIcon,
+  XMarkIcon,
+  DocumentArrowDownIcon,
+} from "@heroicons/react/24/outline";
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useNavigate, Link } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { useAuth } from "../contexts/AuthContext";
+import { api } from "../lib/api";
+
+import { DocumentoEditor } from "./documentos/DocumentoEditor";
+import { DocumentoViewer } from "./documentos/DocumentoViewer";
 
 interface Documento {
   id: string;
@@ -39,7 +48,7 @@ export function DocumentosPage() {
 
   const loadData = useCallback(async () => {
     if (!user) {
-      navigate('/login');
+      navigate("/login");
       return;
     }
 
@@ -47,12 +56,12 @@ export function DocumentosPage() {
       setIsLoading(true);
       await Promise.all([loadDocumentos(), loadModelos()]);
     } catch (error) {
-      console.error('Erro ao carregar dados:', error);
+      console.error("Erro ao carregar dados:", error);
       if (error?.response?.status === 401) {
         signOut(); // Usar a função do AuthContext
-        navigate('/login');
+        navigate("/login");
       } else {
-        toast.error('Erro ao carregar dados');
+        toast.error("Erro ao carregar dados");
       }
     } finally {
       setIsLoading(false);
@@ -68,12 +77,12 @@ export function DocumentosPage() {
     if (processoId) params.processoId = processoId;
     if (atendimentoId) params.atendimentoId = atendimentoId;
 
-    const response = await api.get('/documentos', { params });
+    const response = await api.get("/documentos", { params });
     setDocumentos(response.data);
   };
 
   const loadModelos = async () => {
-    const response = await api.get('/documentos-modelos');
+    const response = await api.get("/documentos-modelos");
     setModelos(response.data);
   };
 
@@ -82,40 +91,40 @@ export function DocumentosPage() {
       const payload = {
         nome: data.nome.trim(),
         conteudo: data.conteudo.trim(),
-        tipo: documentoEmEdicao?.tipo || 'OUTROS',
+        tipo: documentoEmEdicao?.tipo || "OUTROS",
         modeloId: documentoEmEdicao?.modeloId,
         processoId: data.processoId || processoId,
-        atendimentoId: data.atendimentoId || atendimentoId
+        atendimentoId: data.atendimentoId || atendimentoId,
       };
 
       if (documentoEmEdicao?.id) {
         await api.put(`/documentos/${documentoEmEdicao.id}`, payload);
-        toast.success('Documento atualizado com sucesso');
+        toast.success("Documento atualizado com sucesso");
       } else {
-        await api.post('/documentos', payload);
-        toast.success('Documento criado com sucesso');
+        await api.post("/documentos", payload);
+        toast.success("Documento criado com sucesso");
       }
 
       await loadDocumentos();
       setIsEditorOpen(false);
       setDocumentoEmEdicao(null);
     } catch (error: any) {
-      console.error('Erro ao salvar documento:', error);
-      toast.error(error?.response?.data?.message || 'Erro ao salvar documento');
+      console.error("Erro ao salvar documento:", error);
+      toast.error(error?.response?.data?.message || "Erro ao salvar documento");
     }
   };
 
   const handleDeleteDocumento = async (id) => {
     try {
       await api.delete(`/documentos/${id}`);
-      toast.success('Documento excluído com sucesso');
+      toast.success("Documento excluído com sucesso");
       await loadDocumentos();
     } catch (error) {
-      console.error('Erro ao excluir documento:', error);
+      console.error("Erro ao excluir documento:", error);
       if (error?.response?.status === 401) {
-        toast.error('Sessão expirada. Por favor, faça login novamente.');
+        toast.error("Sessão expirada. Por favor, faça login novamente.");
       } else {
-        toast.error('Erro ao excluir documento');
+        toast.error("Erro ao excluir documento");
       }
     }
   };
@@ -125,34 +134,38 @@ export function DocumentosPage() {
       setDocumentoVisualizado(doc); // Simplificar para usar o documento diretamente
       setVisualizadorOpen(true);
     } catch (error) {
-      console.error('Erro ao visualizar documento:', error);
-      toast.error('Erro ao visualizar documento');
+      console.error("Erro ao visualizar documento:", error);
+      toast.error("Erro ao visualizar documento");
     }
   };
 
   const handleExportPDF = async (documento) => {
     try {
-      const configRes = await api.get('/documentos/configuracoes');
-      const response = await api.post('/documentos/exportar-pdf', {
+      const configRes = await api.get("/documentos/configuracoes");
+      const response = await api.post(
+        "/documentos/exportar-pdf",
+        {
           nome: documento.nome,
           conteudo: documento.conteudo,
-        escritorio: configRes.data
-      }, { responseType: 'blob' });
+          escritorio: configRes.data,
+        },
+        { responseType: "blob" },
+      );
 
       // Criar URL do blob e fazer download
       const url = window.URL.createObjectURL(new Blob([response.data]));
-      const link = document.createElement('a');
+      const link = document.createElement("a");
       link.href = url;
-      link.setAttribute('download', `${documento.nome}.pdf`);
+      link.setAttribute("download", `${documento.nome}.pdf`);
       document.body.appendChild(link);
       link.click();
       link.parentNode.removeChild(link);
       window.URL.revokeObjectURL(url);
 
-      toast.success('PDF gerado com sucesso!');
+      toast.success("PDF gerado com sucesso!");
     } catch (error) {
-      console.error('Erro ao gerar PDF:', error);
-      toast.error('Erro ao gerar PDF');
+      console.error("Erro ao gerar PDF:", error);
+      toast.error("Erro ao gerar PDF");
     }
   };
 
@@ -162,10 +175,10 @@ export function DocumentosPage() {
       id: documento.id,
       nome: documento.nome,
       conteudo: documento.conteudo,
-      tipo: documento.tipo || 'OUTROS',
+      tipo: documento.tipo || "OUTROS",
       modeloId: documento.modeloId,
       processoId: documento.processoId || processoId,
-      atendimentoId: documento.atendimentoId || atendimentoId
+      atendimentoId: documento.atendimentoId || atendimentoId,
     });
     setVisualizadorOpen(false);
     setIsEditorOpen(true);
@@ -176,9 +189,9 @@ export function DocumentosPage() {
       nome: modelo.nome,
       conteudo: modelo.conteudo,
       modeloId: modelo.id,
-      tipo: 'OUTROS',
+      tipo: "OUTROS",
       processoId: processoId,
-      atendimentoId: atendimentoId
+      atendimentoId: atendimentoId,
     });
     setIsEditorOpen(true);
   };
@@ -199,9 +212,9 @@ export function DocumentosPage() {
             <PlusIcon className="w-5 h-5 mr-2" />
             Novo Documento
           </button>
-          {user?.perfil === 'ADVOGADO_ADMIN' && (
+          {user?.perfil === "ADVOGADO_ADMIN" && (
             <button
-              onClick={() => navigate('/documentos/templates')}
+              onClick={() => navigate("/documentos/templates")}
               className="inline-flex items-center px-4 py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 transition-colors"
             >
               <DocumentIcon className="w-5 h-5 mr-2" />
@@ -217,8 +230,8 @@ export function DocumentosPage() {
             onClick={() => setTabValue(0)}
             className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors duration-200 ${
               tabValue === 0
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                ? "border-blue-500 text-blue-600"
+                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
             }`}
           >
             Documentos
@@ -227,8 +240,8 @@ export function DocumentosPage() {
             onClick={() => setTabValue(1)}
             className={`ml-8 px-4 py-2 font-medium text-sm border-b-2 transition-colors duration-200 ${
               tabValue === 1
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                ? "border-blue-500 text-blue-600"
+                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
             }`}
           >
             Modelos
@@ -239,18 +252,24 @@ export function DocumentosPage() {
       {tabValue === 0 && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {documentos.map((doc) => (
-            <div key={doc.id} className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
-              <div className="p-4 min-h-[180px] flex flex-col justify-between"> {/* Ajustado min-height e layout */}
+            <div
+              key={doc.id}
+              className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4"
+            >
+              <div className="p-4 min-h-[180px] flex flex-col justify-between">
+                {" "}
+                {/* Ajustado min-height e layout */}
                 <div>
                   <div className="flex items-center mb-3">
                     <DocumentIcon className="w-6 h-6 text-gray-500 mr-2 flex-shrink-0" />
-                    <h3 className="font-semibold text-gray-900 dark:text-gray-100 line-clamp-2">{doc.nome}</h3>
+                    <h3 className="font-semibold text-gray-900 dark:text-gray-100 line-clamp-2">
+                      {doc.nome}
+                    </h3>
                   </div>
                   <p className="text-sm text-gray-600 dark:text-gray-400">
                     Criado em: {new Date(doc.criadoEm).toLocaleDateString()}
                   </p>
                 </div>
-                
                 {/* Botões em flex-wrap para melhor responsividade */}
                 <div className="mt-4 flex flex-wrap gap-2">
                   <button
@@ -284,13 +303,20 @@ export function DocumentosPage() {
       {tabValue === 1 && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {modelos.map((modelo) => (
-            <div key={modelo.id} className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div
+              key={modelo.id}
+              className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
+            >
               <div className="p-4">
                 <div className="flex items-center mb-3">
                   <DocumentIcon className="w-6 h-6 text-gray-500 mr-2" />
-                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">{modelo.nome}</h3>
+                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">
+                    {modelo.nome}
+                  </h3>
                 </div>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{modelo.descricao}</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                  {modelo.descricao}
+                </p>
                 <button
                   onClick={() => handleUseModelo(modelo)}
                   className="w-full inline-flex items-center justify-center px-4 py-2 text-sm border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/20"
@@ -327,13 +353,17 @@ export function DocumentosPage() {
             <div className="p-6 max-h-[70vh] overflow-y-auto">
               <div
                 className="prose max-w-none"
-                dangerouslySetInnerHTML={{ __html: documentoVisualizado?.conteudo }}
+                dangerouslySetInnerHTML={{
+                  __html: documentoVisualizado?.conteudo,
+                }}
               />
             </div>
 
             <div className="flex items-center justify-between p-4 border-t bg-gray-50">
               <div className="text-sm text-gray-500">
-                Criado em: {documentoVisualizado && new Date(documentoVisualizado.criadoEm).toLocaleDateString()}
+                Criado em:{" "}
+                {documentoVisualizado &&
+                  new Date(documentoVisualizado.criadoEm).toLocaleDateString()}
               </div>
 
               <button
@@ -342,7 +372,6 @@ export function DocumentosPage() {
               >
                 Editar
               </button>
-              
             </div>
           </Dialog.Panel>
         </div>

src/components/ErrorBoundary.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
-import { Card } from './ui/Card';
-import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import React from "react";
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+
+import { Card } from "./ui/Card";
 
 export function ErrorBoundary() {
   const error = useRouteError();
@@ -18,15 +19,24 @@ export function ErrorBoundary() {
             <div className="mt-4 p-4 bg-red-50 rounded-lg text-left">
               {isRouteErrorResponse(error) ? (
                 <div>
-                  <p><strong>Status:</strong> {error.status}</p>
-                  <p><strong>Mensagem:</strong> {error.data.message || error.statusText}</p>
+                  <p>
+                    <strong>Status:</strong> {error.status}
+                  </p>
+                  <p>
+                    <strong>Mensagem:</strong>{" "}
+                    {error.data.message || error.statusText}
+                  </p>
                 </div>
               ) : error instanceof Error ? (
                 <div>
-                  <p><strong>Erro:</strong> {error.message}</p>
+                  <p>
+                    <strong>Erro:</strong> {error.message}
+                  </p>
                   {error.stack && (
                     <details className="mt-2">
-                      <summary className="cursor-pointer text-sm">Ver detalhes técnicos</summary>
+                      <summary className="cursor-pointer text-sm">
+                        Ver detalhes técnicos
+                      </summary>
                       <pre className="mt-2 whitespace-pre-wrap text-xs">
                         {error.stack}
                       </pre>

src/components/LoginPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+
 import { useAuth } from "../contexts/AuthContext";
 
 export const LoginPage: React.FC = () => {

src/components/PrivateRoute.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Navigate, Outlet, useLocation } from "react-router-dom";
+
 import { useAuth } from "../contexts/AuthContext";
 
 export const PrivateRoute: React.FC = () => {

src/components/ProtectedRoute.tsx

@@ -1,5 +1,6 @@
-import { useAuth } from '../contexts/AuthContext';
-import { Navigate, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from "react-router-dom";
+
+import { useAuth } from "../contexts/AuthContext";
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -10,27 +11,27 @@ export function ProtectedRoute({ children, roles }: ProtectedRouteProps) {
   const { user } = useAuth();
   const location = useLocation();
 
-  console.log('ProtectedRoute - Current Path:', location.pathname);
-  console.log('ProtectedRoute - Required Roles:', roles);
-  console.log('ProtectedRoute - User:', user);
+  console.log("ProtectedRoute - Current Path:", location.pathname);
+  console.log("ProtectedRoute - Required Roles:", roles);
+  console.log("ProtectedRoute - User:", user);
 
   if (!user) {
-    console.log('ProtectedRoute - No user, redirecting to login');
+    console.log("ProtectedRoute - No user, redirecting to login");
     return <Navigate to="/login" />;
   }
 
   if (!roles || roles.length === 0) {
-    console.log('ProtectedRoute - No roles required, allowing access');
+    console.log("ProtectedRoute - No roles required, allowing access");
     return <>{children}</>;
   }
 
   if (!roles.includes(user.perfil)) {
-    console.log('ProtectedRoute - Access denied');
-    console.log('Required roles:', roles);
-    console.log('User role:', user.perfil);
+    console.log("ProtectedRoute - Access denied");
+    console.log("Required roles:", roles);
+    console.log("User role:", user.perfil);
     return <Navigate to="/dashboard" replace state={{ from: location }} />;
   }
 
-  console.log('ProtectedRoute - Access granted');
+  console.log("ProtectedRoute - Access granted");
   return <>{children}</>;
 }

src/components/Sidebar.tsx

@@ -1,4 +1,3 @@
-import { useLocation } from 'react-router-dom';
 import {
   HomeIcon,
   ScaleIcon,
@@ -6,20 +5,21 @@ import {
   UserIcon,
   ClipboardDocumentCheckIcon,
   DocumentTextIcon,
-} from '@heroicons/react/24/outline';
+} from "@heroicons/react/24/outline";
+import { useLocation } from "react-router-dom";
 
 export function useNavigation() {
   const { pathname } = useLocation();
 
   return [
-    { name: 'Dashboard', href: '/dashboard', icon: HomeIcon },
-    { name: 'Processos', href: '/processos', icon: ScaleIcon },
-    { name: 'Clientes', href: '/clientes', icon: UserGroupIcon },
-    { name: 'Atendimentos', href: '/atendimentos', icon: UserIcon },
-    { name: 'Tarefas', href: '/tarefas', icon: ClipboardDocumentCheckIcon },
-    { name: 'Documentos', href: '/documentos', icon: DocumentTextIcon },
-  ].map(item => ({
+    { name: "Dashboard", href: "/dashboard", icon: HomeIcon },
+    { name: "Processos", href: "/processos", icon: ScaleIcon },
+    { name: "Clientes", href: "/clientes", icon: UserGroupIcon },
+    { name: "Atendimentos", href: "/atendimentos", icon: UserIcon },
+    { name: "Tarefas", href: "/tarefas", icon: ClipboardDocumentCheckIcon },
+    { name: "Documentos", href: "/documentos", icon: DocumentTextIcon },
+  ].map((item) => ({
     ...item,
-    current: pathname === item.href
+    current: pathname === item.href,
   }));
 }

src/components/atendimentos/AgendamentoCalendario.tsx

@@ -1,9 +1,18 @@
-import { useState, useEffect } from 'react';
-import { format, startOfWeek, addDays, isSameDay, parseISO, getHours } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import { AgendamentoForm } from './AgendamentoForm';
-import { AtendimentoForm } from './AtendimentoForm';
-import api from '../../services/api';
+import {
+  format,
+  startOfWeek,
+  addDays,
+  isSameDay,
+  parseISO,
+  getHours,
+  ptBR,
+} from "date-fns";
+import { useState, useEffect } from "react";
+
+import api from "../../services/api";
+
+import { AgendamentoForm } from "./AgendamentoForm";
+import { AtendimentoForm } from "./AtendimentoForm";
 
 interface Agendamento {
   id: string;
@@ -21,7 +30,8 @@ export function AgendamentoCalendario() {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [agendamentos, setAgendamentos] = useState([]);
   const [formOpen, setFormOpen] = useState(false);
-  const [selectedAgendamento, setSelectedAgendamento] = useState<Agendamento | null>(null);
+  const [selectedAgendamento, setSelectedAgendamento] =
+    useState<Agendamento | null>(null);
   const [atendimentoFormOpen, setAtendimentoFormOpen] = useState(false);
 
   useEffect(() => {
@@ -30,18 +40,18 @@ export function AgendamentoCalendario() {
 
   const loadAgendamentos = async (date: Date) => {
     try {
-      const response = await api.get('/agendamentos', {
-        params: { data: date.toISOString() }
+      const response = await api.get("/agendamentos", {
+        params: { data: date.toISOString() },
       });
       setAgendamentos(response.data);
     } catch (error) {
-      console.error('Erro ao carregar agendamentos:', error);
+      console.error("Erro ao carregar agendamentos:", error);
     }
   };
 
   const weekDays = [...Array(7)].map((_, i) => {
     const day = addDays(startOfWeek(selectedDate, { locale: ptBR }), i);
-    return format(day, 'EEEE', { locale: ptBR });
+    return format(day, "EEEE", { locale: ptBR });
   });
 
   const timeSlots = [...Array(9)].map((_, i) => {
@@ -52,17 +62,25 @@ export function AgendamentoCalendario() {
   const getAgendamentosForSlot = (dayIndex: number, hour: number) => {
     return agendamentos.filter((agendamento: Agendamento) => {
       const agendamentoDate = parseISO(agendamento.data);
-      const slotDate = addDays(startOfWeek(selectedDate, { locale: ptBR }), dayIndex);
+      const slotDate = addDays(
+        startOfWeek(selectedDate, { locale: ptBR }),
+        dayIndex,
+      );
 
-      return isSameDay(agendamentoDate, slotDate) && getHours(agendamentoDate) === hour;
+      return (
+        isSameDay(agendamentoDate, slotDate) &&
+        getHours(agendamentoDate) === hour
+      );
     });
   };
 
   const handleAgendamentoClick = async (agendamento: Agendamento) => {
     try {
       // Buscar atendimento inicial se o tipo não for INICIAL
-      if (agendamento.tipo !== 'INICIAL') {
-        const response = await api.get(`/atendimentos/iniciais/${agendamento.cliente.id}`);
+      if (agendamento.tipo !== "INICIAL") {
+        const response = await api.get(
+          `/atendimentos/iniciais/${agendamento.cliente.id}`,
+        );
         const atendimentosIniciais = response.data;
 
         // Pegar o atendimento inicial mais recente
@@ -70,14 +88,14 @@ export function AgendamentoCalendario() {
 
         setSelectedAgendamento({
           ...agendamento,
-          atendimentoInicial: atendimentoInicial
+          atendimentoInicial: atendimentoInicial,
         });
       } else {
         setSelectedAgendamento(agendamento);
       }
       setAtendimentoFormOpen(true);
     } catch (error) {
-      console.error('Erro ao buscar atendimento inicial:', error);
+      console.error("Erro ao buscar atendimento inicial:", error);
     }
   };
 
@@ -87,17 +105,17 @@ export function AgendamentoCalendario() {
       setSelectedAgendamento(agendamento);
       setFormOpen(true);
     } catch (error) {
-      console.error('Erro ao editar agendamento:', error);
+      console.error("Erro ao editar agendamento:", error);
     }
   };
 
   const handleDeleteAgendamento = async (id: string) => {
-    if (window.confirm('Tem certeza que deseja excluir este agendamento?')) {
+    if (window.confirm("Tem certeza que deseja excluir este agendamento?")) {
       try {
         await api.delete(`/agendamentos/${id}`);
         await loadAgendamentos(selectedDate);
       } catch (error) {
-        console.error('Erro ao excluir agendamento:', error);
+        console.error("Erro ao excluir agendamento:", error);
       }
     }
   };
@@ -118,8 +136,11 @@ export function AgendamentoCalendario() {
         {/* Coluna de horários */}
         <div className="col-span-1">
           <div className="h-10" /> {/* Espaço para alinhar com cabeçalho */}
-          {timeSlots.map(time => (
-            <div key={time} className="h-20 flex items-center justify-center text-sm text-gray-500">
+          {timeSlots.map((time) => (
+            <div
+              key={time}
+              className="h-20 flex items-center justify-center text-sm text-gray-500"
+            >
               {time}
             </div>
           ))}
@@ -147,7 +168,9 @@ export function AgendamentoCalendario() {
                       className={`absolute inset-x-1 p-1 rounded text-sm ${getStatusColor(agendamento.status)}`}
                     >
                       <div className="flex justify-between items-center">
-                        <div className="font-medium truncate">{agendamento.cliente.nome}</div>
+                        <div className="font-medium truncate">
+                          {agendamento.cliente.nome}
+                        </div>
                         <div className="flex space-x-1">
                           <button
                             onClick={(e) => {
@@ -159,7 +182,7 @@ export function AgendamentoCalendario() {
                           >
                             ✏️
                           </button>
-                          {agendamento.status !== 'REALIZADO' && (
+                          {agendamento.status !== "REALIZADO" && (
                             <button
                               onClick={(e) => {
                                 e.stopPropagation();
@@ -184,7 +207,7 @@ export function AgendamentoCalendario() {
                         </div>
                       </div>
                       <div className="text-xs truncate">
-                        {format(parseISO(agendamento.data), 'HH:mm')}
+                        {format(parseISO(agendamento.data), "HH:mm")}
                       </div>
                     </div>
                   ))}
@@ -220,8 +243,8 @@ export function AgendamentoCalendario() {
           initialData={{
             titulo: `Atendimento - ${selectedAgendamento.cliente.nome}`,
             agendamentoId: selectedAgendamento.id,
-            tipo: selectedAgendamento.tipo || 'INICIAL',
-            atendimentoInicialId: selectedAgendamento.atendimentoInicial?.id
+            tipo: selectedAgendamento.tipo || "INICIAL",
+            atendimentoInicialId: selectedAgendamento.atendimentoInicial?.id,
           }}
         />
       )}
@@ -231,17 +254,17 @@ export function AgendamentoCalendario() {
 
 function getStatusColor(status: string) {
   switch (status) {
-    case 'AGENDADO':
-      return 'bg-blue-100 text-blue-800';
-    case 'CONFIRMADO':
-      return 'bg-green-100 text-green-800';
-    case 'CANCELADO':
-      return 'bg-red-100 text-red-800';
-    case 'REALIZADO':
-      return 'bg-purple-100 text-purple-800';
-    case 'NAO_COMPARECEU':
-      return 'bg-gray-100 text-gray-800';
+    case "AGENDADO":
+      return "bg-blue-100 text-blue-800";
+    case "CONFIRMADO":
+      return "bg-green-100 text-green-800";
+    case "CANCELADO":
+      return "bg-red-100 text-red-800";
+    case "REALIZADO":
+      return "bg-purple-100 text-purple-800";
+    case "NAO_COMPARECEU":
+      return "bg-gray-100 text-gray-800";
     default:
-      return 'bg-gray-100 text-gray-800';
+      return "bg-gray-100 text-gray-800";
   }
 }

src/components/atendimentos/AgendamentoForm.tsx

@@ -1,6 +1,7 @@
-import { useState, useCallback, useEffect } from 'react';
-import { DateTimePicker } from '@mui/x-date-pickers';
-import api from '../../services/api';
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { useState, useCallback, useEffect } from "react";
+
+import api from "../../services/api";
 
 // Implementar debounce
 function debounce(fn: Function, ms = 300) {
@@ -28,18 +29,24 @@ interface AgendamentoFormProps {
   };
 }
 
-export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClienteId, agendamento }: AgendamentoFormProps) {
+export function AgendamentoForm({
+  open,
+  onClose,
+  onSave,
+  clienteId: defaultClienteId,
+  agendamento,
+}: AgendamentoFormProps) {
   const [data, setData] = useState<Date | null>(null);
-  const [observacoes, setObservacoes] = useState('');
-  const [error, setError] = useState('');
+  const [observacoes, setObservacoes] = useState("");
+  const [error, setError] = useState("");
   const [isSaving, setIsSaving] = useState(false);
-  const [tipo, setTipo] = useState('');
+  const [tipo, setTipo] = useState("");
 
   // Adicionar estados para busca de cliente
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const [searchResults, setSearchResults] = useState<any[]>([]);
   const [selectedClient, setSelectedClient] = useState<any>(null);
-  const [clienteId, setClienteId] = useState(defaultClienteId || '');
+  const [clienteId, setClienteId] = useState(defaultClienteId || "");
 
   // Preencher form quando editar
   useEffect(() => {
@@ -47,8 +54,8 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
       setData(new Date(agendamento.data));
       setClienteId(agendamento.cliente.id);
       setSearchTerm(agendamento.cliente.nome);
-      setTipo(agendamento.tipo || '');
-      setObservacoes(agendamento.observacoes || '');
+      setTipo(agendamento.tipo || "");
+      setObservacoes(agendamento.observacoes || "");
     }
   }, [agendamento]);
 
@@ -60,16 +67,16 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
         const response = await api.get(`/clientes/search?q=${term}`);
         setSearchResults(response.data);
       } catch (error) {
-        console.error('Erro ao buscar clientes:', error);
+        console.error("Erro ao buscar clientes:", error);
       }
     }, 300),
-    []
+    [],
   );
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!data || !clienteId) {
-      setError('Data e cliente são obrigatórios');
+      setError("Data e cliente são obrigatórios");
       return;
     }
 
@@ -85,7 +92,7 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
         });
       } else {
         // Criar novo agendamento
-        await api.post('/agendamentos', {
+        await api.post("/agendamentos", {
           clienteId,
           data: data.toISOString(),
           observacoes,
@@ -95,14 +102,20 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
       onSave();
       onClose();
     } catch (error) {
-      setError(agendamento ? 'Erro ao atualizar agendamento' : 'Erro ao criar agendamento');
+      setError(
+        agendamento
+          ? "Erro ao atualizar agendamento"
+          : "Erro ao criar agendamento",
+      );
     } finally {
       setIsSaving(false);
     }
   };
 
   return (
-    <div className={`fixed inset-0 bg-gray-500 bg-opacity-75 ${open ? 'flex' : 'hidden'} z-50`}>
+    <div
+      className={`fixed inset-0 bg-gray-500 bg-opacity-75 ${open ? "flex" : "hidden"} z-50`}
+    >
       <div className="relative bg-white rounded-lg max-w-md w-full m-auto p-6">
         <h2 className="text-xl font-bold mb-6">Agendar Atendimento</h2>
 
@@ -125,7 +138,7 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
 
             {searchResults.length > 0 && (
               <div className="absolute z-20 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg">
-                {searchResults.map(client => (
+                {searchResults.map((client) => (
                   <div
                     key={client.id}
                     className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
@@ -137,7 +150,9 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
                     }}
                   >
                     <div className="font-medium">{client.nome}</div>
-                    <div className="text-sm text-gray-500">{client.cpfCnpj}</div>
+                    <div className="text-sm text-gray-500">
+                      {client.cpfCnpj}
+                    </div>
                   </div>
                 ))}
               </div>
@@ -198,7 +213,7 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
               disabled={isSaving}
               className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50"
             >
-              {isSaving ? 'Salvando...' : 'Agendar'}
+              {isSaving ? "Salvando..." : "Agendar"}
             </button>
           </div>
         </form>

src/components/atendimentos/AtendimentoDetalhes.tsx

@@ -1,19 +1,22 @@
-import { useState } from 'react';
-import { useQuery } from 'react-query';
-import { useParams, Link } from 'react-router-dom';
-import api from '../../services/api';
-import { format, parseISO } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
+import { format, parseISO, ptBR } from "date-fns";
+import { useState } from "react";
+import { useQuery } from "react-query";
+import { useParams, Link } from "react-router-dom";
+
+import api from "../../services/api";
 
 // Função auxiliar para formatar data com validação
-const formatDate = (date: string | Date | null | undefined, formatStr: string): string => {
-  if (!date) return 'Data não disponível';
+const formatDate = (
+  date: string | Date | null | undefined,
+  formatStr: string,
+): string => {
+  if (!date) return "Data não disponível";
   try {
-    const dateObj = typeof date === 'string' ? parseISO(date) : date;
+    const dateObj = typeof date === "string" ? parseISO(date) : date;
     return format(dateObj, formatStr, { locale: ptBR });
   } catch (error) {
-    console.error('Erro ao formatar data:', error);
-    return 'Data inválida';
+    console.error("Erro ao formatar data:", error);
+    return "Data inválida";
   }
 };
 
@@ -21,31 +24,34 @@ export function AtendimentoDetalhes() {
   const { id } = useParams();
   const [loading, setLoading] = useState(false);
   const [cancelModalOpen, setCancelModalOpen] = useState(false);
-  const [justificativa, setJustificativa] = useState('');
+  const [justificativa, setJustificativa] = useState("");
   const [isCancelling, setIsCancelling] = useState(false);
 
-  const { data: atendimento, refetch } = useQuery(['atendimento', id], async () => {
+  const { data: atendimento, refetch } = useQuery(
+    ["atendimento", id],
+    async () => {
       const response = await api.get(`/atendimentos/${id}`);
       return response.data;
-  });
+    },
+  );
 
   const handleCancelar = async () => {
     if (!justificativa.trim()) {
-      alert('A justificativa é obrigatória');
+      alert("A justificativa é obrigatória");
       return;
     }
 
     try {
       setIsCancelling(true);
       await api.patch(`/atendimentos/${id}/status`, {
-        status: 'CANCELADO',
-        justificativa
+        status: "CANCELADO",
+        justificativa,
       });
       await refetch();
       setCancelModalOpen(false);
     } catch (error) {
-      console.error('Erro ao cancelar atendimento:', error);
-      alert('Erro ao cancelar atendimento');
+      console.error("Erro ao cancelar atendimento:", error);
+      alert("Erro ao cancelar atendimento");
     } finally {
       setIsCancelling(false);
     }
@@ -66,12 +72,20 @@ export function AtendimentoDetalhes() {
         <div className="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4">
           <div className="flex justify-between items-center">
             <div>
-              <h1 className="text-2xl font-bold text-white">{atendimento.titulo}</h1>
-              <p className="text-blue-100">Protocolo: {atendimento.protocolo}</p>
+              <h1 className="text-2xl font-bold text-white">
+                {atendimento.titulo}
+              </h1>
+              <p className="text-blue-100">
+                Protocolo: {atendimento.protocolo}
+              </p>
             </div>
-            <span className={`px-3 py-1 rounded-full text-sm font-medium ${
-              atendimento.tipo === 'INICIAL' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800'
-            }`}>
+            <span
+              className={`px-3 py-1 rounded-full text-sm font-medium ${
+                atendimento.tipo === "INICIAL"
+                  ? "bg-green-100 text-green-800"
+                  : "bg-blue-100 text-blue-800"
+              }`}
+            >
               {atendimento.tipo}
             </span>
           </div>
@@ -82,17 +96,23 @@ export function AtendimentoDetalhes() {
           <div className="grid grid-cols-2 gap-6 mb-6">
             <div>
               <h3 className="text-sm font-medium text-gray-500">Cliente</h3>
-              <p className="mt-1 text-sm text-gray-900">{atendimento.cliente.nome}</p>
+              <p className="mt-1 text-sm text-gray-900">
+                {atendimento.cliente.nome}
+              </p>
             </div>
             <div>
-              <h3 className="text-sm font-medium text-gray-500">Data do Atendimento</h3>
+              <h3 className="text-sm font-medium text-gray-500">
+                Data do Atendimento
+              </h3>
               <p className="mt-1 text-sm text-gray-900">
                 {formatDate(atendimento.dataAtendimento, "PPpp")}
               </p>
             </div>
             {atendimento.processo && (
               <div>
-                <h3 className="text-sm font-medium text-gray-500">Processo Vinculado</h3>
+                <h3 className="text-sm font-medium text-gray-500">
+                  Processo Vinculado
+                </h3>
                 <Link
                   to={`/processos/${atendimento.processo.id}`}
                   className="mt-1 text-sm text-blue-600 hover:text-blue-800"
@@ -103,7 +123,9 @@ export function AtendimentoDetalhes() {
             )}
             <div>
               <h3 className="text-sm font-medium text-gray-500">Responsável</h3>
-              <p className="mt-1 text-sm text-gray-900">{atendimento.usuario.nome}</p>
+              <p className="mt-1 text-sm text-gray-900">
+                {atendimento.usuario.nome}
+              </p>
             </div>
           </div>
 
@@ -122,9 +144,22 @@ export function AtendimentoDetalhes() {
               <h3 className="text-lg font-medium text-gray-900 mb-4">Anexos</h3>
               <div className="grid grid-cols-2 gap-4">
                 {atendimento.anexos.map((anexo: any) => (
-                  <div key={anexo.id} className="flex items-center p-4 bg-gray-50 rounded-lg">
-                    <svg className="w-6 h-6 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                  <div
+                    key={anexo.id}
+                    className="flex items-center p-4 bg-gray-50 rounded-lg"
+                  >
+                    <svg
+                      className="w-6 h-6 text-gray-400 mr-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                      />
                     </svg>
                     <div className="flex-1 min-w-0">
                       <p className="text-sm font-medium text-gray-900 truncate">
@@ -137,7 +172,7 @@ export function AtendimentoDetalhes() {
                     <button
                       onClick={(e) => {
                         e.preventDefault();
-                        window.open(anexo.url, '_blank', 'noopener,noreferrer');
+                        window.open(anexo.url, "_blank", "noopener,noreferrer");
                       }}
                       className="ml-4 text-blue-600 hover:text-blue-800"
                     >
@@ -150,7 +185,7 @@ export function AtendimentoDetalhes() {
           )}
 
           {/* Adicionar botão de cancelar próximo ao cabeçalho */}
-          {atendimento.status !== 'CANCELADO' && (
+          {atendimento.status !== "CANCELADO" && (
             <button
               onClick={() => setCancelModalOpen(true)}
               className="bg-red-100 text-red-600 px-4 py-2 rounded-lg hover:bg-red-200"
@@ -163,9 +198,12 @@ export function AtendimentoDetalhes() {
           {cancelModalOpen && (
             <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
               <div className="bg-white rounded-lg max-w-md w-full p-6">
-                <h3 className="text-lg font-medium mb-4">Cancelar Atendimento</h3>
+                <h3 className="text-lg font-medium mb-4">
+                  Cancelar Atendimento
+                </h3>
                 <p className="text-sm text-gray-500 mb-4">
-                  Esta ação não pode ser desfeita. O atendimento será marcado como cancelado, mas manterá seu protocolo e histórico.
+                  Esta ação não pode ser desfeita. O atendimento será marcado
+                  como cancelado, mas manterá seu protocolo e histórico.
                 </p>
                 <textarea
                   value={justificativa}
@@ -187,7 +225,7 @@ export function AtendimentoDetalhes() {
                     disabled={isCancelling || !justificativa.trim()}
                     className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
                   >
-                    {isCancelling ? 'Cancelando...' : 'Confirmar Cancelamento'}
+                    {isCancelling ? "Cancelando..." : "Confirmar Cancelamento"}
                   </button>
                 </div>
               </div>
@@ -195,10 +233,14 @@ export function AtendimentoDetalhes() {
           )}
 
           {/* Exibir informação de cancelamento se aplicável */}
-          {atendimento.status === 'CANCELADO' && (
+          {atendimento.status === "CANCELADO" && (
             <div className="mt-4 p-4 bg-red-50 border-l-4 border-red-500 rounded-r-lg">
-              <h4 className="text-red-800 font-medium">Atendimento Cancelado</h4>
-              <p className="text-red-600 mt-1">{atendimento.justificativaCancelamento}</p>
+              <h4 className="text-red-800 font-medium">
+                Atendimento Cancelado
+              </h4>
+              <p className="text-red-600 mt-1">
+                {atendimento.justificativaCancelamento}
+              </p>
               <p className="text-sm text-red-500 mt-1">
                 Cancelado em: {formatDate(atendimento.dataAtualizacao, "PPpp")}
               </p>

src/components/atendimentos/AtendimentoForm.tsx

@@ -1,13 +1,26 @@
-import { useState, useEffect, useCallback } from 'react';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, FormControl, InputLabel, Select, MenuItem, Alert } from '@mui/material';
-import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import Link from '@tiptap/extension-link';
-import { TipoAtendimento } from '@prisma/client';
-import api from '../../services/api'; // Adicionar esta importação
-import { XMarkIcon, PaperClipIcon } from '@heroicons/react/24/outline'; // Alterado para v2
-import { useDropzone } from 'react-dropzone';
-import { uploadFile } from '../../services/upload';
+import { XMarkIcon, PaperClipIcon } from "@heroicons/react/24/outline"; // Alterado para v2
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Alert,
+} from "@mui/material";
+import { TipoAtendimento } from "@prisma/client";
+import Link from "@tiptap/extension-link";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { useState, useEffect, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+
+import api from "../../services/api"; // Adicionar esta importação
+import { uploadFile } from "../../services/upload";
 
 // Implementar debounce manualmente ao invés de usar lodash
 function debounce(fn: Function, ms = 300) {
@@ -40,19 +53,26 @@ interface AnexoTemp {
   erro?: string;
 }
 
-export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId, initialData }: AtendimentoFormProps) {
-  const [searchTerm, setSearchTerm] = useState('');
+export function AtendimentoForm({
+  open,
+  onClose,
+  onSave,
+  clienteId,
+  processoId,
+  initialData,
+}: AtendimentoFormProps) {
+  const [searchTerm, setSearchTerm] = useState("");
   const [searchResults, setSearchResults] = useState<any[]>([]);
   const [selectedClient, setSelectedClient] = useState<any>(null);
   const [atendimentoInicial, setAtendimentoInicial] = useState<any>(null);
   const [atendimentosIniciais, setAtendimentosIniciais] = useState<any[]>([]);
   const [formData, setFormData] = useState({
-    titulo: '',
+    titulo: "",
     tipo: TipoAtendimento.INICIAL,
-    conteudo: '',
-    clienteId: clienteId || '',
-    processoId: processoId || '',
-    atendimentoInicialId: '',
+    conteudo: "",
+    clienteId: clienteId || "",
+    processoId: processoId || "",
+    atendimentoInicialId: "",
   });
   const [anexos, setAnexos] = useState<AnexoTemp[]>([]);
   const [uploading, setUploading] = useState(false);
@@ -61,41 +81,42 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
   useEffect(() => {
     if (open) {
       setFormData({
-        titulo: '',
+        titulo: "",
         tipo: TipoAtendimento.INICIAL,
-        conteudo: '',
-        clienteId: clienteId || '',
-        processoId: processoId || '',
-        atendimentoInicialId: '',
+        conteudo: "",
+        clienteId: clienteId || "",
+        processoId: processoId || "",
+        atendimentoInicialId: "",
       });
     }
   }, [open, clienteId, processoId]);
 
   useEffect(() => {
     if (open && initialData) {
-      setFormData(prev => ({
+      setFormData((prev) => ({
         ...prev,
         titulo: initialData.titulo || prev.titulo,
         clienteId: clienteId || prev.clienteId,
         processoId: processoId || prev.processoId,
         tipo: initialData.tipo || prev.tipo,
-        atendimentoInicialId: initialData.atendimentoInicialId || prev.atendimentoInicialId
+        atendimentoInicialId:
+          initialData.atendimentoInicialId || prev.atendimentoInicialId,
       }));
     }
   }, [open, initialData, clienteId, processoId]);
 
   const [clientes, setClientes] = useState<any[]>([]);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const [isSaving, setIsSaving] = useState(false); // Adicionar estado para prevenir múltiplos submits
 
   // Buscar lista de clientes
   useEffect(() => {
     const fetchClientes = async () => {
       try {
-        const response = await api.get('/clientes');
+        const response = await api.get("/clientes");
         setClientes(response.data);
       } catch (err) {
-        console.error('Erro ao carregar clientes:', err);
+        console.error("Erro ao carregar clientes:", err);
       }
     };
     fetchClientes();
@@ -109,18 +130,21 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
         const response = await api.get(`/clientes/search?q=${term}`);
         setSearchResults(response.data);
       } catch (error) {
-        console.error('Erro ao buscar clientes:', error);
+        console.error("Erro ao buscar clientes:", error);
       }
     }, 300),
-    []
+    [],
   );
 
   // Carregar atendimentos iniciais quando selecionar cliente
   useEffect(() => {
     if (formData.clienteId && formData.tipo !== TipoAtendimento.INICIAL) {
-      api.get(`/atendimentos/iniciais/${formData.clienteId}`)
-        .then(response => setAtendimentosIniciais(response.data))
-        .catch(error => console.error('Erro ao carregar atendimentos:', error));
+      api
+        .get(`/atendimentos/iniciais/${formData.clienteId}`)
+        .then((response) => setAtendimentosIniciais(response.data))
+        .catch((error) =>
+          console.error("Erro ao carregar atendimentos:", error),
+        );
     }
   }, [formData.clienteId, formData.tipo]);
 
@@ -131,28 +155,28 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
         openOnClick: false,
       }),
     ],
-    content: '',
+    content: "",
     onUpdate: ({ editor }) => {
-      setFormData(prev => ({ ...prev, conteudo: editor.getHTML() }));
+      setFormData((prev) => ({ ...prev, conteudo: editor.getHTML() }));
     },
   });
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
-    const novosAnexos = acceptedFiles.map(file => ({
+    const novosAnexos = acceptedFiles.map((file) => ({
       file,
       nome: file.name,
-      progresso: 0
+      progresso: 0,
     }));
-    setAnexos(prev => [...prev, ...novosAnexos]);
+    setAnexos((prev) => [...prev, ...novosAnexos]);
   }, []);
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
-    maxSize: 10485760 // 10MB
+    maxSize: 10485760, // 10MB
   });
 
   const handleRemoveAnexo = (index: number) => {
-    setAnexos(prev => prev.filter((_, i) => i !== index));
+    setAnexos((prev) => prev.filter((_, i) => i !== index));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -161,10 +185,10 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
 
     try {
       setIsSaving(true);
-      setError('');
+      setError("");
 
       if (!formData.clienteId) {
-        setError('Selecione um cliente');
+        setError("Selecione um cliente");
         setIsSaving(false);
         return;
       }
@@ -175,15 +199,15 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
           const response = await api.get(`/clientes/${formData.clienteId}`);
           setSelectedClient(response.data);
         } catch (error) {
-          console.error('Erro ao buscar cliente:', error);
-          setError('Erro ao buscar dados do cliente');
+          console.error("Erro ao buscar cliente:", error);
+          setError("Erro ao buscar dados do cliente");
           setIsSaving(false);
           return;
         }
       }
 
       // Criar atendimento primeiro para ter o protocolo
-      const response = await api.post('/atendimentos', {
+      const response = await api.post("/atendimentos", {
         ...formData,
         agendamentoId: initialData?.agendamentoId,
       });
@@ -195,15 +219,15 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
       if (anexos.length > 0) {
         const anexosPromises = anexos.map(async (anexo) => {
           try {
-            const clienteNome = selectedClient?.nome || 'cliente';
+            const clienteNome = selectedClient?.nome || "cliente";
             return await uploadFile(
               anexo.file,
               clienteNome,
-              'atendimento',
-              protocolo
+              "atendimento",
+              protocolo,
             );
           } catch (error) {
-            console.error('Erro no upload:', error);
+            console.error("Erro no upload:", error);
             return null;
           }
         });
@@ -213,38 +237,42 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
 
         if (anexosSalvos.length > 0) {
           await api.patch(`/atendimentos/${atendimentoId}`, {
-            anexos: anexosSalvos
+            anexos: anexosSalvos,
           });
         }
       }
 
       // Limpar form e fechar modal
       setFormData({
-        titulo: '',
+        titulo: "",
         tipo: TipoAtendimento.INICIAL,
-        conteudo: '',
-        clienteId: '',
-        processoId: '',
-        atendimentoInicialId: '',
+        conteudo: "",
+        clienteId: "",
+        processoId: "",
+        atendimentoInicialId: "",
       });
 
       await onSave(response.data);
       onClose();
-
     } catch (err) {
-      console.error('Erro ao salvar atendimento:', err);
-      setError(err.response?.data?.error || 'Erro ao criar atendimento');
+      console.error("Erro ao salvar atendimento:", err);
+      setError(err.response?.data?.error || "Erro ao criar atendimento");
     } finally {
       setIsSaving(false);
     }
   };
 
   return (
-    <div className={`fixed inset-0 bg-gray-500 bg-opacity-75 ${open ? 'flex' : 'hidden'} z-50`}>
+    <div
+      className={`fixed inset-0 bg-gray-500 bg-opacity-75 ${open ? "flex" : "hidden"} z-50`}
+    >
       <div className="relative bg-white rounded-lg max-w-4xl w-full m-auto p-6 overflow-y-auto max-h-[90vh]">
         <div className="flex justify-between items-center mb-6">
           <h2 className="text-2xl font-bold text-gray-900">Novo Atendimento</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-500">
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-500"
+          >
             <XMarkIcon className="h-6 w-6" /> {/* Alterado para XMarkIcon */}
           </button>
         </div>
@@ -268,19 +296,24 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
 
             {searchResults.length > 0 && (
               <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg">
-                {searchResults.map(client => (
+                {searchResults.map((client) => (
                   <div
                     key={client.id}
                     className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
                     onClick={() => {
                       setSelectedClient(client);
-                      setFormData(prev => ({ ...prev, clienteId: client.id }));
+                      setFormData((prev) => ({
+                        ...prev,
+                        clienteId: client.id,
+                      }));
                       setSearchTerm(client.nome);
                       setSearchResults([]);
                     }}
                   >
                     <div className="font-medium">{client.nome}</div>
-                    <div className="text-sm text-gray-500">{client.cpfCnpj}</div>
+                    <div className="text-sm text-gray-500">
+                      {client.cpfCnpj}
+                    </div>
                   </div>
                 ))}
               </div>
@@ -294,12 +327,17 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
             </label>
             <select
               value={formData.tipo}
-              onChange={(e) => setFormData({ ...formData, tipo: e.target.value as TipoAtendimento })}
+              onChange={(e) =>
+                setFormData({
+                  ...formData,
+                  tipo: e.target.value as TipoAtendimento,
+                })
+              }
               className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             >
               {Object.values(TipoAtendimento).map((tipo) => (
                 <option key={tipo} value={tipo}>
-                  {tipo.replace('_', ' ')}
+                  {tipo.replace("_", " ")}
                 </option>
               ))}
             </select>
@@ -313,7 +351,12 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
               </label>
               <select
                 value={formData.atendimentoInicialId}
-                onChange={(e) => setFormData({ ...formData, atendimentoInicialId: e.target.value })}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    atendimentoInicialId: e.target.value,
+                  })
+                }
                 className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                 required={formData.tipo !== TipoAtendimento.INICIAL}
               >
@@ -331,7 +374,9 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
             fullWidth
             label="Título do Atendimento"
             value={formData.titulo}
-            onChange={(e) => setFormData({ ...formData, titulo: e.target.value })}
+            onChange={(e) =>
+              setFormData({ ...formData, titulo: e.target.value })
+            }
             required
           />
 
@@ -345,14 +390,14 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
                 <button
                   type="button"
                   onClick={() => editor?.chain().focus().toggleBold().run()}
-                  className={`px-2 py-1 rounded ${editor?.isActive('bold') ? 'bg-gray-200' : 'hover:bg-gray-100'}`}
+                  className={`px-2 py-1 rounded ${editor?.isActive("bold") ? "bg-gray-200" : "hover:bg-gray-100"}`}
                 >
                   Negrito
                 </button>
                 <button
                   type="button"
                   onClick={() => editor?.chain().focus().toggleItalic().run()}
-                  className={`px-2 py-1 rounded ${editor?.isActive('italic') ? 'bg-gray-200' : 'hover:bg-gray-100'}`}
+                  className={`px-2 py-1 rounded ${editor?.isActive("italic") ? "bg-gray-200" : "hover:bg-gray-100"}`}
                 >
                   Itálico
                 </button>
@@ -371,14 +416,16 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
             <div
               {...getRootProps()}
               className={`mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-dashed rounded-md ${
-                isDragActive ? 'border-blue-400 bg-blue-50' : 'border-gray-300'
+                isDragActive ? "border-blue-400 bg-blue-50" : "border-gray-300"
               }`}
             >
               <div className="space-y-1 text-center">
                 <PaperClipIcon className="mx-auto h-12 w-12 text-gray-400" />
                 <div className="flex text-sm text-gray-600">
                   <input {...getInputProps()} />
-                  <p className="pl-1">Arraste arquivos aqui ou clique para selecionar</p>
+                  <p className="pl-1">
+                    Arraste arquivos aqui ou clique para selecionar
+                  </p>
                 </div>
                 <p className="text-xs text-gray-500">Máximo 10MB por arquivo</p>
               </div>
@@ -388,17 +435,26 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
           {/* Lista de Anexos */}
           {anexos.length > 0 && (
             <div className="mt-4">
-              <h4 className="text-sm font-medium text-gray-700">Arquivos para upload</h4>
+              <h4 className="text-sm font-medium text-gray-700">
+                Arquivos para upload
+              </h4>
               <ul className="mt-2 divide-y divide-gray-200">
                 {anexos.map((anexo, index) => (
-                  <li key={index} className="py-3 flex justify-between items-center">
+                  <li
+                    key={index}
+                    className="py-3 flex justify-between items-center"
+                  >
                     <div className="flex items-center">
                       <PaperClipIcon className="h-5 w-5 text-gray-400 mr-2" />
-                      <span className="text-sm text-gray-900">{anexo.nome}</span>
+                      <span className="text-sm text-gray-900">
+                        {anexo.nome}
+                      </span>
                     </div>
                     <div className="flex items-center">
                       {anexo.erro && (
-                        <span className="text-xs text-red-500 mr-2">{anexo.erro}</span>
+                        <span className="text-xs text-red-500 mr-2">
+                          {anexo.erro}
+                        </span>
                       )}
                       <button
                         type="button"
@@ -434,7 +490,7 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
               disabled={isSaving}
               className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              {isSaving ? 'Salvando...' : 'Salvar'}
+              {isSaving ? "Salvando..." : "Salvar"}
             </button>
           </div>
         </form>

src/components/atendimentos/AtendimentosPage.tsx

@@ -1,46 +1,58 @@
-import { useState } from 'react';
-import { useQuery } from 'react-query';
-import { useNavigate } from 'react-router-dom';
-import api from '../../services/api';
-import { AtendimentoForm } from './AtendimentoForm';
-import { AgendamentoCalendario } from './AgendamentoCalendario'; // Adicionar esta importação
-import { formatRelative } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import { TextField, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { TipoAtendimento } from '@prisma/client';
+import {
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+} from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers";
+import { TipoAtendimento } from "@prisma/client";
+import { formatRelative, ptBR } from "date-fns";
+import { useState } from "react";
+import { useQuery } from "react-query";
+import { useNavigate } from "react-router-dom";
+
+import api from "../../services/api";
+
+import { AgendamentoCalendario } from "./AgendamentoCalendario"; // Adicionar esta importação
+import { AtendimentoForm } from "./AtendimentoForm";
 
 export const AtendimentosPage = () => {
   const navigate = useNavigate();
   const [formOpen, setFormOpen] = useState(false);
   const [filtros, setFiltros] = useState({
-    protocolo: '',
+    protocolo: "",
     dataInicio: null,
     dataFim: null,
-    tipo: '',
-    clienteId: '',
-    processoId: '',
+    tipo: "",
+    clienteId: "",
+    processoId: "",
   });
 
-  const { data: atendimentos, refetch } = useQuery(['atendimentos', filtros], async () => {
+  const { data: atendimentos, refetch } = useQuery(
+    ["atendimentos", filtros],
+    async () => {
       const params = new URLSearchParams();
-    if (filtros.protocolo) params.append('protocolo', filtros.protocolo);
-    if (filtros.dataInicio) params.append('dataInicio', filtros.dataInicio.toISOString());
-    if (filtros.dataFim) params.append('dataFim', filtros.dataFim.toISOString());
-    if (filtros.tipo) params.append('tipo', filtros.tipo);
-    if (filtros.clienteId) params.append('clienteId', filtros.clienteId);
-    if (filtros.processoId) params.append('processoId', filtros.processoId);
+      if (filtros.protocolo) params.append("protocolo", filtros.protocolo);
+      if (filtros.dataInicio)
+        params.append("dataInicio", filtros.dataInicio.toISOString());
+      if (filtros.dataFim)
+        params.append("dataFim", filtros.dataFim.toISOString());
+      if (filtros.tipo) params.append("tipo", filtros.tipo);
+      if (filtros.clienteId) params.append("clienteId", filtros.clienteId);
+      if (filtros.processoId) params.append("processoId", filtros.processoId);
 
       const response = await api.get(`/atendimentos?${params}`);
       return response.data;
-  });
+    },
+  );
 
   const handleSave = async (data: any) => {
     try {
       await refetch();
       setFormOpen(false);
     } catch (error) {
-      console.error('Erro ao atualizar lista:', error);
+      console.error("Erro ao atualizar lista:", error);
     }
   };
 
@@ -48,7 +60,9 @@ export const AtendimentosPage = () => {
     <div className="p-6 max-w-7xl mx-auto">
       <div className="space-y-6">
         <div className="flex justify-between items-center">
-          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Atendimentos</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+            Atendimentos
+          </h1>
           <button
             onClick={() => setFormOpen(true)}
             className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-500 transition-colors"
@@ -68,7 +82,9 @@ export const AtendimentosPage = () => {
             <TextField
               label="Protocolo"
               value={filtros.protocolo}
-              onChange={(e) => setFiltros({ ...filtros, protocolo: e.target.value })}
+              onChange={(e) =>
+                setFiltros({ ...filtros, protocolo: e.target.value })
+              }
               size="small"
             />
 
@@ -76,14 +92,14 @@ export const AtendimentosPage = () => {
               label="Data Início"
               value={filtros.dataInicio}
               onChange={(date) => setFiltros({ ...filtros, dataInicio: date })}
-              slotProps={{ textField: { size: 'small' } }}
+              slotProps={{ textField: { size: "small" } }}
             />
 
             <DatePicker
               label="Data Fim"
               value={filtros.dataFim}
               onChange={(date) => setFiltros({ ...filtros, dataFim: date })}
-              slotProps={{ textField: { size: 'small' } }}
+              slotProps={{ textField: { size: "small" } }}
             />
 
             <FormControl size="small">
@@ -91,12 +107,14 @@ export const AtendimentosPage = () => {
               <Select
                 value={filtros.tipo}
                 label="Tipo"
-                onChange={(e) => setFiltros({ ...filtros, tipo: e.target.value })}
+                onChange={(e) =>
+                  setFiltros({ ...filtros, tipo: e.target.value })
+                }
               >
                 <MenuItem value="">Todos</MenuItem>
                 {Object.values(TipoAtendimento).map((tipo) => (
                   <MenuItem key={tipo} value={tipo}>
-                    {tipo.replace('_', ' ')}
+                    {tipo.replace("_", " ")}
                   </MenuItem>
                 ))}
               </Select>
@@ -109,15 +127,19 @@ export const AtendimentosPage = () => {
             <div
               key={atendimento.id}
               className={`bg-white dark:bg-gray-800 rounded-lg shadow p-6 cursor-pointer hover:shadow-lg transition-shadow ${
-                atendimento.status === 'CANCELADO' ? 'border-l-4 border-red-500' : ''
+                atendimento.status === "CANCELADO"
+                  ? "border-l-4 border-red-500"
+                  : ""
               }`}
               onClick={() => navigate(`/atendimentos/${atendimento.id}`)}
             >
               <div className="flex justify-between items-start">
                 <div>
                   <div className="flex items-center gap-2">
-                    <h2 className="text-lg font-medium text-gray-900 dark:text-white">{atendimento.titulo}</h2>
-                    {atendimento.status === 'CANCELADO' && (
+                    <h2 className="text-lg font-medium text-gray-900 dark:text-white">
+                      {atendimento.titulo}
+                    </h2>
+                    {atendimento.status === "CANCELADO" && (
                       <span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">
                         Cancelado
                       </span>
@@ -127,27 +149,48 @@ export const AtendimentosPage = () => {
                     Protocolo: {atendimento.protocolo}
                   </p>
                 </div>
-                <span className={`px-3 py-1 rounded-full text-sm font-medium ${
-                  atendimento.tipo === 'INICIAL' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
-                }`}>
+                <span
+                  className={`px-3 py-1 rounded-full text-sm font-medium ${
+                    atendimento.tipo === "INICIAL"
+                      ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                      : "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+                  }`}
+                >
                   {atendimento.tipo}
                 </span>
               </div>
-              <div className="mt-4 prose max-w-none" dangerouslySetInnerHTML={{ __html: atendimento.conteudo }} />
+              <div
+                className="mt-4 prose max-w-none"
+                dangerouslySetInnerHTML={{ __html: atendimento.conteudo }}
+              />
               <div className="mt-4 flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
                 <span>
-                  {formatRelative(new Date(atendimento.dataAtendimento), new Date(), { locale: ptBR })}
+                  {formatRelative(
+                    new Date(atendimento.dataAtendimento),
+                    new Date(),
+                    { locale: ptBR },
+                  )}
                 </span>
                 <div className="flex items-center gap-4">
-                  {atendimento.status === 'CANCELADO' && (
+                  {atendimento.status === "CANCELADO" && (
                     <span className="text-red-600 text-sm">
                       Motivo: {atendimento.justificativaCancelamento}
                     </span>
                   )}
                   {atendimento.anexos?.length > 0 && (
                     <span className="flex items-center">
-                      <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                      <svg
+                        className="w-4 h-4 mr-1"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                        />
                       </svg>
                       {atendimento.anexos.length} anexos
                     </span>

src/components/calculos/CalculosList.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { format } from 'date-fns';
-import ptBR from 'date-fns/locale/pt-BR';
-import { toast } from 'react-toastify';
-import { useAuth } from '../../contexts/AuthContext';
+import ptBR, { format } from "date-fns";
+import { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { useAuth } from "../../contexts/AuthContext";
 
 interface Calculo {
   id: string;
@@ -32,10 +32,10 @@ export function CalculosList() {
   const [calculos, setCalculos] = useState<Calculo[]>([]);
   const [loading, setLoading] = useState(true);
   const [filtro, setFiltro] = useState({
-    titulo: '',
-    status: '',
-    processoId: '',
-    clienteId: ''
+    titulo: "",
+    status: "",
+    processoId: "",
+    clienteId: "",
   });
 
   useEffect(() => {
@@ -44,7 +44,7 @@ export function CalculosList() {
       carregarCalculos();
     } else {
       // Redirecionar para login caso não esteja autenticado
-      navigate('/login');
+      navigate("/login");
     }
   }, [isAuthenticated, navigate]);
 
@@ -54,46 +54,49 @@ export function CalculosList() {
 
       // Construir query string baseado nos filtros
       const queryParams = new URLSearchParams();
-      if (filtro.titulo) queryParams.append('titulo', filtro.titulo);
-      if (filtro.status) queryParams.append('status', filtro.status);
-      if (filtro.processoId) queryParams.append('processoId', filtro.processoId);
-      if (filtro.clienteId) queryParams.append('clienteId', filtro.clienteId);
+      if (filtro.titulo) queryParams.append("titulo", filtro.titulo);
+      if (filtro.status) queryParams.append("status", filtro.status);
+      if (filtro.processoId)
+        queryParams.append("processoId", filtro.processoId);
+      if (filtro.clienteId) queryParams.append("clienteId", filtro.clienteId);
 
       // Obter token de autenticação usando o contexto
       const token = getToken();
       if (!token) {
-        throw new Error('Usuário não autenticado. Faça login novamente.');
+        throw new Error("Usuário não autenticado. Faça login novamente.");
       }
 
       // Incluir o token no cabeçalho da requisição
       const response = await fetch(`/api/calculos?${queryParams.toString()}`, {
         headers: {
-          'Authorization': `Bearer ${token}`
-        }
+          Authorization: `Bearer ${token}`,
+        },
       });
 
       if (!response.ok) {
         if (response.status === 401) {
           // Se receber 401, o token pode estar expirado
-          navigate('/login');
-          throw new Error('Sessão expirada. Por favor, faça login novamente.');
+          navigate("/login");
+          throw new Error("Sessão expirada. Por favor, faça login novamente.");
         }
-        throw new Error('Erro ao carregar cálculos');
+        throw new Error("Erro ao carregar cálculos");
       }
 
       const data = await response.json();
       setCalculos(data);
     } catch (error) {
-      console.error('Erro ao carregar cálculos:', error);
+      console.error("Erro ao carregar cálculos:", error);
       toast.error(`Falha ao carregar os cálculos: ${error.message}`);
     } finally {
       setLoading(false);
     }
   };
 
-  const handleFiltroChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleFiltroChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ) => {
     const { name, value } = e.target;
-    setFiltro(prev => ({ ...prev, [name]: value }));
+    setFiltro((prev) => ({ ...prev, [name]: value }));
   };
 
   const handleSubmitFiltro = (e: React.FormEvent) => {
@@ -103,18 +106,18 @@ export function CalculosList() {
 
   // Função para formatar valores monetários
   const formatarValor = (valor: string) => {
-    return new Intl.NumberFormat('pt-BR', {
-      style: 'currency',
-      currency: 'BRL'
+    return new Intl.NumberFormat("pt-BR", {
+      style: "currency",
+      currency: "BRL",
     }).format(parseFloat(valor));
   };
 
   // Função para formatar datas
   const formatarData = (data: string) => {
     try {
-      return format(new Date(data), 'dd/MM/yyyy', { locale: ptBR });
+      return format(new Date(data), "dd/MM/yyyy", { locale: ptBR });
     } catch (error) {
-      return 'Data inválida';
+      return "Data inválida";
     }
   };
 
@@ -122,19 +125,21 @@ export function CalculosList() {
   const StatusBadge = ({ status }: { status: string }) => {
     const getStatusColor = () => {
       switch (status) {
-        case 'RASCUNHO':
-          return 'bg-yellow-100 text-yellow-800';
-        case 'FINALIZADO':
-          return 'bg-green-100 text-green-800';
-        case 'ARQUIVADO':
-          return 'bg-gray-100 text-gray-800';
+        case "RASCUNHO":
+          return "bg-yellow-100 text-yellow-800";
+        case "FINALIZADO":
+          return "bg-green-100 text-green-800";
+        case "ARQUIVADO":
+          return "bg-gray-100 text-gray-800";
         default:
-          return 'bg-blue-100 text-blue-800';
+          return "bg-blue-100 text-blue-800";
       }
     };
 
     return (
-      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor()}`}>
+      <span
+        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor()}`}
+      >
         {status}
       </span>
     );
@@ -155,9 +160,15 @@ export function CalculosList() {
       {/* Filtros */}
       <div className="bg-white shadow rounded-lg mb-6 p-4">
         <h2 className="text-lg font-medium text-gray-700 mb-3">Filtros</h2>
-        <form onSubmit={handleSubmitFiltro} className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <form
+          onSubmit={handleSubmitFiltro}
+          className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+        >
           <div>
-            <label htmlFor="titulo" className="block text-sm font-medium text-gray-700">
+            <label
+              htmlFor="titulo"
+              className="block text-sm font-medium text-gray-700"
+            >
               Título
             </label>
             <input
@@ -171,7 +182,10 @@ export function CalculosList() {
           </div>
 
           <div>
-            <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+            <label
+              htmlFor="status"
+              className="block text-sm font-medium text-gray-700"
+            >
               Status
             </label>
             <select
@@ -202,13 +216,18 @@ export function CalculosList() {
       {/* Lista de Cálculos */}
       {loading ? (
         <div className="flex justify-center items-center h-64">
-          <div className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-600" role="status">
+          <div
+            className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-600"
+            role="status"
+          >
             <span className="visually-hidden">Carregando...</span>
           </div>
         </div>
       ) : calculos.length === 0 ? (
         <div className="bg-white shadow rounded-lg p-8 text-center">
-          <h3 className="text-lg font-medium text-gray-900">Nenhum cálculo encontrado</h3>
+          <h3 className="text-lg font-medium text-gray-900">
+            Nenhum cálculo encontrado
+          </h3>
           <p className="mt-2 text-sm text-gray-500">
             Para criar um novo cálculo, clique no botão "Novo Cálculo".
           </p>
@@ -218,7 +237,10 @@ export function CalculosList() {
           <ul className="divide-y divide-gray-200">
             {calculos.map((calculo) => (
               <li key={calculo.id}>
-                <Link to={`/calculos/${calculo.id}`} className="block hover:bg-gray-50">
+                <Link
+                  to={`/calculos/${calculo.id}`}
+                  className="block hover:bg-gray-50"
+                >
                   <div className="px-4 py-4 sm:px-6">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center">
@@ -244,14 +266,16 @@ export function CalculosList() {
                       </div>
                       <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                         <p>
-                          Criado em: {formatarData(calculo.criadoEm)} por {calculo.usuario.nome}
+                          Criado em: {formatarData(calculo.criadoEm)} por{" "}
+                          {calculo.usuario.nome}
                         </p>
                       </div>
                     </div>
                     {calculo.processo && (
                       <div className="mt-2">
                         <p className="text-sm text-gray-600">
-                          Processo: {calculo.processo.numero} - {calculo.processo.titulo}
+                          Processo: {calculo.processo.numero} -{" "}
+                          {calculo.processo.titulo}
                         </p>
                       </div>
                     )}

src/components/calculos/DetalhePensaoAlimenticia.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import api from '../../services/api';
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import api from "../../services/api";
 
 interface CalculoPensao {
   id: string;
@@ -36,8 +37,8 @@ export function DetalhePensaoAlimenticia() {
         const response = await api.get(`/pensao-alimenticia/${id}`);
         setCalculo(response.data);
       } catch (error) {
-        console.error('Erro ao carregar cálculo:', error);
-        toast.error('Falha ao carregar dados do cálculo');
+        console.error("Erro ao carregar cálculo:", error);
+        toast.error("Falha ao carregar dados do cálculo");
       } finally {
         setLoading(false);
       }
@@ -62,24 +63,48 @@ export function DetalhePensaoAlimenticia() {
         <div>
           <h2 className="text-lg font-semibold mb-2">Dados do Cálculo</h2>
           <div className="space-y-2">
-            <p><span className="font-medium">Data Inicial:</span> {new Date(calculo.dataInicial).toLocaleDateString()}</p>
+            <p>
+              <span className="font-medium">Data Inicial:</span>{" "}
+              {new Date(calculo.dataInicial).toLocaleDateString()}
+            </p>
             {calculo.dataFinal && (
-              <p><span className="font-medium">Data Final:</span> {new Date(calculo.dataFinal).toLocaleDateString()}</p>
+              <p>
+                <span className="font-medium">Data Final:</span>{" "}
+                {new Date(calculo.dataFinal).toLocaleDateString()}
+              </p>
             )}
-            <p><span className="font-medium">Percentual:</span> {calculo.percentualSalarioMinimo}%</p>
+            <p>
+              <span className="font-medium">Percentual:</span>{" "}
+              {calculo.percentualSalarioMinimo}%
+            </p>
             {calculo.multaPactuada && (
-              <p><span className="font-medium">Multa:</span> {calculo.multaPactuada}%</p>
+              <p>
+                <span className="font-medium">Multa:</span>{" "}
+                {calculo.multaPactuada}%
+              </p>
             )}
-            <p><span className="font-medium">Índice:</span> {calculo.tipoAtualizacao}</p>
+            <p>
+              <span className="font-medium">Índice:</span>{" "}
+              {calculo.tipoAtualizacao}
+            </p>
           </div>
         </div>
 
         <div>
           <h2 className="text-lg font-semibold mb-2">Valores</h2>
           <div className="space-y-2">
-            <p><span className="font-medium">Valor Base:</span> R$ {calculo.valorCalculado.toFixed(2)}</p>
-            <p><span className="font-medium">Valor Multa:</span> R$ {calculo.valorMulta.toFixed(2)}</p>
-            <p><span className="font-medium">Valor Total:</span> R$ {calculo.valorTotal.toFixed(2)}</p>
+            <p>
+              <span className="font-medium">Valor Base:</span> R${" "}
+              {calculo.valorCalculado.toFixed(2)}
+            </p>
+            <p>
+              <span className="font-medium">Valor Multa:</span> R${" "}
+              {calculo.valorMulta.toFixed(2)}
+            </p>
+            <p>
+              <span className="font-medium">Valor Total:</span> R${" "}
+              {calculo.valorTotal.toFixed(2)}
+            </p>
           </div>
         </div>
       </div>

src/components/calculos/NovoCalculo.tsx

@@ -1,8 +1,9 @@
-import { useState, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { formatarMoeda, parseMoeda } from '../../utils/formatters';
-import { useAuth } from '../../contexts/AuthContext';
+import { useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { useAuth } from "../../contexts/AuthContext";
+import { formatarMoeda, parseMoeda } from "../../utils/formatters";
 
 interface ProcessoOption {
   id: string;
@@ -21,12 +22,12 @@ export function NovoCalculo() {
   const { getToken } = useAuth();
   const valorBaseRef = useRef<HTMLInputElement>(null);
   const [formData, setFormData] = useState({
-    titulo: '',
-    descricao: '',
-    dataBase: new Date().toISOString().split('T')[0],
-    valorBase: '',
-    processoId: '',
-    clienteId: '',
+    titulo: "",
+    descricao: "",
+    dataBase: new Date().toISOString().split("T")[0],
+    valorBase: "",
+    processoId: "",
+    clienteId: "",
   });
 
   const [processos, setProcessos] = useState<ProcessoOption[]>([]);
@@ -37,30 +38,34 @@ export function NovoCalculo() {
     const carregarDados = async () => {
       try {
         // Carregar processos
-        const processosResponse = await fetch('/api/processos');
+        const processosResponse = await fetch("/api/processos");
         if (processosResponse.ok) {
           const processosData = await processosResponse.json();
           setProcessos(processosData);
         }
 
         // Carregar clientes
-        const clientesResponse = await fetch('/api/clientes');
+        const clientesResponse = await fetch("/api/clientes");
         if (clientesResponse.ok) {
           const clientesData = await clientesResponse.json();
           setClientes(clientesData);
         }
       } catch (error) {
-        console.error('Erro ao carregar dados:', error);
-        toast.error('Falha ao carregar dados auxiliares');
+        console.error("Erro ao carregar dados:", error);
+        toast.error("Falha ao carregar dados auxiliares");
       }
     };
 
     carregarDados();
   }, []);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+    >,
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
+    setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
   // Handler específico para campos monetários com controle de cursor
@@ -72,19 +77,22 @@ export function NovoCalculo() {
     const prevLength = e.target.value.length;
 
     // Remover caracteres não numéricos, exceto vírgula e ponto
-    const numericValue = value.replace(/[^\d.,]/g, '');
+    const numericValue = value.replace(/[^\d.,]/g, "");
 
     // Formatar como moeda
     const formattedValue = formatarMoeda(numericValue);
 
-    setFormData(prev => ({ ...prev, [name]: formattedValue }));
+    setFormData((prev) => ({ ...prev, [name]: formattedValue }));
 
     // Usar setTimeout para ajustar a posição do cursor após a atualização do DOM
     setTimeout(() => {
       if (valorBaseRef.current) {
         // Calcular a nova posição considerando a mudança no comprimento
         const lengthDifference = formattedValue.length - prevLength;
-        const newPosition = Math.max(0, (cursorPosition || 0) + lengthDifference);
+        const newPosition = Math.max(
+          0,
+          (cursorPosition || 0) + lengthDifference,
+        );
 
         // Definir o cursor na posição calculada
         valorBaseRef.current.setSelectionRange(newPosition, newPosition);
@@ -99,7 +107,7 @@ export function NovoCalculo() {
     try {
       // Validar dados
       if (!formData.titulo || !formData.dataBase || !formData.valorBase) {
-        toast.error('Preencha todos os campos obrigatórios');
+        toast.error("Preencha todos os campos obrigatórios");
         setLoading(false);
         return;
       }
@@ -107,7 +115,7 @@ export function NovoCalculo() {
       // Converter valor para número
       const valorBaseNumerico = parseMoeda(formData.valorBase);
       if (isNaN(valorBaseNumerico) || valorBaseNumerico <= 0) {
-        toast.error('Valor base inválido. Informe um valor maior que zero');
+        toast.error("Valor base inválido. Informe um valor maior que zero");
         setLoading(false);
         return;
       }
@@ -115,45 +123,47 @@ export function NovoCalculo() {
       // Preparar dados para envio
       const dadosParaEnviar = {
         ...formData,
-        valorBase: valorBaseNumerico
+        valorBase: valorBaseNumerico,
       };
 
       // Obter token de autenticação usando o contexto
       const token = getToken();
       if (!token) {
-        throw new Error('Usuário não autenticado. Faça login novamente.');
+        throw new Error("Usuário não autenticado. Faça login novamente.");
       }
 
       // Enviar solicitação para criar cálculo com cabeçalho de autorização
-      const response = await fetch('/api/calculos', {
-        method: 'POST',
+      const response = await fetch("/api/calculos", {
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify(dadosParaEnviar),
       });
 
       if (!response.ok) {
         const errorData = await response.json();
-        throw new Error(errorData.error || 'Erro ao criar cálculo');
+        throw new Error(errorData.error || "Erro ao criar cálculo");
       }
 
       const resultado = await response.json();
 
-      toast.success('Cálculo criado com sucesso!');
+      toast.success("Cálculo criado com sucesso!");
 
       // Redirecionar para a página do cálculo criado
       navigate(`/calculos/${resultado.id}`);
     } catch (error) {
-      console.error('Erro ao criar cálculo:', error);
+      console.error("Erro ao criar cálculo:", error);
       toast.error(`Falha ao criar cálculo: ${error.message}`);
 
-      if (error.message?.includes('autenticação') || 
-          error.message?.includes('não autenticado') || 
-          error.response?.status === 401) {
+      if (
+        error.message?.includes("autenticação") ||
+        error.message?.includes("não autenticado") ||
+        error.response?.status === 401
+      ) {
         // Se for erro de autenticação, redirecionar para login
-        navigate('/login');
+        navigate("/login");
       }
     } finally {
       setLoading(false);
@@ -164,14 +174,19 @@ export function NovoCalculo() {
     <div className="max-w-4xl mx-auto bg-white shadow-md rounded-lg overflow-hidden">
       <div className="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4 text-white">
         <h1 className="text-xl font-bold">Novo Cálculo Judicial</h1>
-        <p className="text-sm text-blue-100 mt-1">Preencha os dados básicos para criar um novo cálculo</p>
+        <p className="text-sm text-blue-100 mt-1">
+          Preencha os dados básicos para criar um novo cálculo
+        </p>
       </div>
 
       <form onSubmit={handleSubmit} className="p-6">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {/* Título */}
           <div className="col-span-2">
-            <label htmlFor="titulo" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="titulo"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Título <span className="text-red-500">*</span>
             </label>
             <input
@@ -188,7 +203,10 @@ export function NovoCalculo() {
 
           {/* Data Base */}
           <div>
-            <label htmlFor="dataBase" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="dataBase"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Data Base <span className="text-red-500">*</span>
             </label>
             <input
@@ -200,12 +218,17 @@ export function NovoCalculo() {
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               required
             />
-            <p className="mt-1 text-xs text-gray-500">Data de referência para iniciar o cálculo</p>
+            <p className="mt-1 text-xs text-gray-500">
+              Data de referência para iniciar o cálculo
+            </p>
           </div>
 
           {/* Valor Base */}
           <div>
-            <label htmlFor="valorBase" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="valorBase"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Valor Base <span className="text-red-500">*</span>
             </label>
             <div className="relative">
@@ -224,12 +247,17 @@ export function NovoCalculo() {
                 required
               />
             </div>
-            <p className="mt-1 text-xs text-gray-500">Valor inicial para o cálculo</p>
+            <p className="mt-1 text-xs text-gray-500">
+              Valor inicial para o cálculo
+            </p>
           </div>
 
           {/* Processo */}
           <div>
-            <label htmlFor="processoId" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="processoId"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Processo
             </label>
             <select
@@ -240,7 +268,7 @@ export function NovoCalculo() {
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
               <option value="">Selecione um processo (opcional)</option>
-              {processos.map(processo => (
+              {processos.map((processo) => (
                 <option key={processo.id} value={processo.id}>
                   {processo.numero} - {processo.titulo}
                 </option>
@@ -250,7 +278,10 @@ export function NovoCalculo() {
 
           {/* Cliente */}
           <div>
-            <label htmlFor="clienteId" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="clienteId"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Cliente
             </label>
             <select
@@ -261,7 +292,7 @@ export function NovoCalculo() {
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
               <option value="">Selecione um cliente (opcional)</option>
-              {clientes.map(cliente => (
+              {clientes.map((cliente) => (
                 <option key={cliente.id} value={cliente.id}>
                   {cliente.nome}
                 </option>
@@ -271,7 +302,10 @@ export function NovoCalculo() {
 
           {/* Descrição */}
           <div className="col-span-2">
-            <label htmlFor="descricao" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="descricao"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Descrição
             </label>
             <textarea
@@ -289,7 +323,7 @@ export function NovoCalculo() {
         <div className="mt-8 flex justify-end space-x-3">
           <button
             type="button"
-            onClick={() => navigate('/calculos')}
+            onClick={() => navigate("/calculos")}
             disabled={loading}
             className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
@@ -301,12 +335,28 @@ export function NovoCalculo() {
             className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center"
           >
             {loading && (
-              <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <svg
+                className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
               </svg>
             )}
-            {loading ? 'Criando...' : 'Criar Cálculo'}
+            {loading ? "Criando..." : "Criar Cálculo"}
           </button>
         </div>
       </form>

src/components/calculos/NovoPensaoAlimenticia.tsx

@@ -1,7 +1,8 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { formatarPercentual, parsePercentual } from '../../utils/formatters';
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { formatarPercentual, parsePercentual } from "../../utils/formatters";
 
 interface ProcessoOption {
   id: string;
@@ -18,16 +19,16 @@ export function NovoPensaoAlimenticia() {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const [formData, setFormData] = useState({
-    titulo: '',
-    descricao: '',
-    dataInicial: new Date().toISOString().split('T')[0],
-    dataFinal: '',
-    percentualSalarioMinimo: '',
-    multaPactuada: '',
-    tipoAtualizacao: 'INPC',
-    processoId: '',
-    clienteId: '',
-    observacoes: '',
+    titulo: "",
+    descricao: "",
+    dataInicial: new Date().toISOString().split("T")[0],
+    dataFinal: "",
+    percentualSalarioMinimo: "",
+    multaPactuada: "",
+    tipoAtualizacao: "INPC",
+    processoId: "",
+    clienteId: "",
+    observacoes: "",
   });
 
   const [processos, setProcessos] = useState<ProcessoOption[]>([]);
@@ -38,40 +39,44 @@ export function NovoPensaoAlimenticia() {
     const carregarDados = async () => {
       try {
         // Carregar processos
-        const processosResponse = await fetch('/api/processos');
+        const processosResponse = await fetch("/api/processos");
         if (processosResponse.ok) {
           const processosData = await processosResponse.json();
           setProcessos(processosData);
         }
 
         // Carregar clientes
-        const clientesResponse = await fetch('/api/clientes');
+        const clientesResponse = await fetch("/api/clientes");
         if (clientesResponse.ok) {
           const clientesData = await clientesResponse.json();
           setClientes(clientesData);
         }
       } catch (error) {
-        console.error('Erro ao carregar dados:', error);
-        toast.error('Falha ao carregar dados auxiliares');
+        console.error("Erro ao carregar dados:", error);
+        toast.error("Falha ao carregar dados auxiliares");
       }
     };
 
     carregarDados();
   }, []);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+    >,
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
+    setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
   // Handler para campos percentuais
   const handlePercentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     // Remover caracteres não numéricos, exceto vírgula e ponto
-    const numericValue = value.replace(/[^\d.,]/g, '');
+    const numericValue = value.replace(/[^\d.,]/g, "");
     // Formatar como percentual
     const formattedValue = formatarPercentual(numericValue);
-    setFormData(prev => ({ ...prev, [name]: formattedValue }));
+    setFormData((prev) => ({ ...prev, [name]: formattedValue }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -80,8 +85,12 @@ export function NovoPensaoAlimenticia() {
 
     try {
       // Validar dados
-      if (!formData.titulo || !formData.dataInicial || !formData.percentualSalarioMinimo) {
-        toast.error('Preencha todos os campos obrigatórios');
+      if (
+        !formData.titulo ||
+        !formData.dataInicial ||
+        !formData.percentualSalarioMinimo
+      ) {
+        toast.error("Preencha todos os campos obrigatórios");
         setLoading(false);
         return;
       }
@@ -91,7 +100,9 @@ export function NovoPensaoAlimenticia() {
 
       // Verificar se percentual é válido
       if (isNaN(percentual) || percentual <= 0 || percentual > 1) {
-        toast.error('Percentual do salário mínimo deve ser maior que 0 e menor ou igual a 100%');
+        toast.error(
+          "Percentual do salário mínimo deve ser maior que 0 e menor ou igual a 100%",
+        );
         setLoading(false);
         return;
       }
@@ -100,31 +111,35 @@ export function NovoPensaoAlimenticia() {
       const dadosParaEnviar = {
         ...formData,
         percentualSalarioMinimo: percentual,
-        multaPactuada: formData.multaPactuada ? parsePercentual(formData.multaPactuada) : undefined,
+        multaPactuada: formData.multaPactuada
+          ? parsePercentual(formData.multaPactuada)
+          : undefined,
       };
 
       // Enviar solicitação para criar cálculo
-      const response = await fetch('/api/pensao-alimenticia', {
-        method: 'POST',
+      const response = await fetch("/api/pensao-alimenticia", {
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify(dadosParaEnviar),
       });
 
       if (!response.ok) {
         const errorData = await response.json();
-        throw new Error(errorData.error || 'Erro ao criar cálculo de pensão alimentícia');
+        throw new Error(
+          errorData.error || "Erro ao criar cálculo de pensão alimentícia",
+        );
       }
 
       const resultado = await response.json();
 
-      toast.success('Cálculo de pensão alimentícia criado com sucesso!');
+      toast.success("Cálculo de pensão alimentícia criado com sucesso!");
 
       // Redirecionar para a página do cálculo criado
       navigate(`/pensao-alimenticia/${resultado.id}`);
     } catch (error) {
-      console.error('Erro ao criar cálculo de pensão:', error);
+      console.error("Erro ao criar cálculo de pensão:", error);
       toast.error(`Falha ao criar cálculo: ${error.message}`);
     } finally {
       setLoading(false);
@@ -134,15 +149,22 @@ export function NovoPensaoAlimenticia() {
   return (
     <div className="max-w-4xl mx-auto bg-white shadow-md rounded-lg overflow-hidden">
       <div className="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4 text-white">
-        <h1 className="text-xl font-bold">Novo Cálculo de Pensão Alimentícia</h1>
-        <p className="text-sm text-blue-100 mt-1">Preencha os dados para criar um novo cálculo de pensão alimentícia</p>
+        <h1 className="text-xl font-bold">
+          Novo Cálculo de Pensão Alimentícia
+        </h1>
+        <p className="text-sm text-blue-100 mt-1">
+          Preencha os dados para criar um novo cálculo de pensão alimentícia
+        </p>
       </div>
 
       <form onSubmit={handleSubmit} className="p-6">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {/* Título */}
           <div className="col-span-2">
-            <label htmlFor="titulo" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="titulo"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Título <span className="text-red-500">*</span>
             </label>
             <input
@@ -159,7 +181,10 @@ export function NovoPensaoAlimenticia() {
 
           {/* Índice de Atualização */}
           <div>
-            <label htmlFor="tipoAtualizacao" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="tipoAtualizacao"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Índice de Atualização Monetária
             </label>
             <select
@@ -169,17 +194,29 @@ export function NovoPensaoAlimenticia() {
               onChange={handleChange}
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
-              <option value="INPC">INPC (Índice Nacional de Preços ao Consumidor)</option>
-              <option value="IPCA">IPCA (Índice Nacional de Preços ao Consumidor Amplo)</option>
-              <option value="IGPM">IGP-M (Índice Geral de Preços do Mercado)</option>
-              <option value="SELIC">SELIC (Sistema Especial de Liquidação e Custódia)</option>
+              <option value="INPC">
+                INPC (Índice Nacional de Preços ao Consumidor)
+              </option>
+              <option value="IPCA">
+                IPCA (Índice Nacional de Preços ao Consumidor Amplo)
+              </option>
+              <option value="IGPM">
+                IGP-M (Índice Geral de Preços do Mercado)
+              </option>
+              <option value="SELIC">
+                SELIC (Sistema Especial de Liquidação e Custódia)
+              </option>
             </select>
           </div>
 
           {/* Percentual do Salário Mínimo */}
           <div>
-            <label htmlFor="percentualSalarioMinimo" className="block text-sm font-medium text-gray-700 mb-1">
-              Percentual do Salário Mínimo <span className="text-red-500">*</span>
+            <label
+              htmlFor="percentualSalarioMinimo"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Percentual do Salário Mínimo{" "}
+              <span className="text-red-500">*</span>
             </label>
             <div className="relative">
               <input
@@ -201,7 +238,10 @@ export function NovoPensaoAlimenticia() {
 
           {/* Data Inicial */}
           <div>
-            <label htmlFor="dataInicial" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="dataInicial"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Data Inicial <span className="text-red-500">*</span>
             </label>
             <input
@@ -213,12 +253,17 @@ export function NovoPensaoAlimenticia() {
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               required
             />
-            <p className="mt-1 text-xs text-gray-500">Data de início da pensão</p>
+            <p className="mt-1 text-xs text-gray-500">
+              Data de início da pensão
+            </p>
           </div>
 
           {/* Data Final */}
           <div>
-            <label htmlFor="dataFinal" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="dataFinal"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Data Final
             </label>
             <input
@@ -229,12 +274,17 @@ export function NovoPensaoAlimenticia() {
               onChange={handleChange}
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             />
-            <p className="mt-1 text-xs text-gray-500">Deixe em branco se a pensão não tem data final</p>
+            <p className="mt-1 text-xs text-gray-500">
+              Deixe em branco se a pensão não tem data final
+            </p>
           </div>
 
           {/* Multa Pactuada */}
           <div>
-            <label htmlFor="multaPactuada" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="multaPactuada"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Multa Pactuada por Atraso
             </label>
             <div className="relative">
@@ -251,12 +301,17 @@ export function NovoPensaoAlimenticia() {
                 <span className="text-gray-500 sm:text-sm">%</span>
               </div>
             </div>
-            <p className="mt-1 text-xs text-gray-500">Ex: 10% = 10,00%. Deixe em branco se não houver.</p>
+            <p className="mt-1 text-xs text-gray-500">
+              Ex: 10% = 10,00%. Deixe em branco se não houver.
+            </p>
           </div>
 
           {/* Processo */}
           <div>
-            <label htmlFor="processoId" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="processoId"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Processo
             </label>
             <select
@@ -267,7 +322,7 @@ export function NovoPensaoAlimenticia() {
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
               <option value="">Selecione um processo (opcional)</option>
-              {processos.map(processo => (
+              {processos.map((processo) => (
                 <option key={processo.id} value={processo.id}>
                   {processo.numero} - {processo.titulo}
                 </option>
@@ -277,7 +332,10 @@ export function NovoPensaoAlimenticia() {
 
           {/* Cliente */}
           <div>
-            <label htmlFor="clienteId" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="clienteId"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Cliente
             </label>
             <select
@@ -288,7 +346,7 @@ export function NovoPensaoAlimenticia() {
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
               <option value="">Selecione um cliente (opcional)</option>
-              {clientes.map(cliente => (
+              {clientes.map((cliente) => (
                 <option key={cliente.id} value={cliente.id}>
                   {cliente.nome}
                 </option>
@@ -298,7 +356,10 @@ export function NovoPensaoAlimenticia() {
 
           {/* Observações */}
           <div className="col-span-2">
-            <label htmlFor="observacoes" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="observacoes"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
               Observações
             </label>
             <textarea
@@ -316,7 +377,7 @@ export function NovoPensaoAlimenticia() {
         <div className="mt-8 flex justify-end space-x-3">
           <button
             type="button"
-            onClick={() => navigate('/calculos')}
+            onClick={() => navigate("/calculos")}
             disabled={loading}
             className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
@@ -328,12 +389,28 @@ export function NovoPensaoAlimenticia() {
             className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center"
           >
             {loading && (
-              <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <svg
+                className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
               </svg>
             )}
-            {loading ? 'Criando...' : 'Criar Cálculo de Pensão'}
+            {loading ? "Criando..." : "Criar Cálculo de Pensão"}
           </button>
         </div>
       </form>

src/components/clientes/ClienteDetalhes.tsx

@@ -1,6 +1,3 @@
-import React, { useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useClientes } from "../../hooks/useClientes";
 import { Tab } from "@headlessui/react";
 import {
   ArrowLeftIcon,
@@ -11,7 +8,10 @@ import {
   UserGroupIcon,
   DocumentTextIcon,
 } from "@heroicons/react/24/outline";
-import { ClienteModal } from "./ClienteModal";
+import React, { useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+
+import { useClientes } from "../../hooks/useClientes";
 import {
   formatCPF,
   formatTelefone,
@@ -22,6 +22,8 @@ import {
   formatData,
 } from "../../utils/formatters";
 
+import { ClienteModal } from "./ClienteModal";
+
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
 }

src/components/clientes/ClienteModal.tsx

@@ -1,3 +1,6 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import axios from "axios";
 import React, {
   useState,
   useEffect,
@@ -5,12 +8,10 @@ import React, {
   forwardRef,
   useRef,
 } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-import { XMarkIcon } from "@heroicons/react/24/outline";
 import { useForm } from "react-hook-form";
-import axios from "axios";
-import { Cliente } from "../../types/entities";
+
 import { useClientes } from "../../hooks/useClientes";
+import { Cliente } from "../../types/entities";
 import { ORGAOS_EMISSORES, PREVIDENCIA_OPTIONS } from "../../utils/constants";
 
 const estadosCivis = [
@@ -201,7 +202,8 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
   const cepValue = watch("cep");
 
   // Função para buscar dados do CEP - versão corrigida
-  const fetchAddressByCep = useCallback(async (cep: string) => {
+  const fetchAddressByCep = useCallback(
+    async (cep: string) => {
       if (!cep || cep.length !== 8) return;
 
       try {
@@ -238,14 +240,15 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
           const activeElement = document.activeElement;
           const isUserTyping =
             activeElement &&
-          (activeElement.tagName === 'INPUT' || activeElement.tagName === 'SELECT') && 
+            (activeElement.tagName === "INPUT" ||
+              activeElement.tagName === "SELECT") &&
             activeElement !== document.querySelector('input[name="cep"]');
 
           // Só focar no campo número se o usuário não estiver digitando em outro campo
           if (!isUserTyping) {
             setTimeout(() => {
               const numeroInput = document.querySelector(
-              'input[name="numero"]'
+                'input[name="numero"]',
               ) as HTMLInputElement;
               if (numeroInput) numeroInput.focus();
             }, 100);
@@ -260,7 +263,9 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
       } finally {
         setIsLoadingCep(false);
       }
-  }, [setValue]);
+    },
+    [setValue],
+  );
 
   // Efeito para monitorar mudanças no CEP com debounce otimizado
   const [autoFetchEnabled, setAutoFetchEnabled] = useState(true);
@@ -584,7 +589,10 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
                             }}
                             onBlur={(e) => {
                               // Forçar busca ao sair do campo
-                              const cleanCep = e.target.value.replace(/\D/g, "");
+                              const cleanCep = e.target.value.replace(
+                                /\D/g,
+                                "",
+                              );
                               if (cleanCep && cleanCep.length === 8) {
                                 fetchAddressByCep(cleanCep);
                               }
@@ -622,10 +630,17 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
                             required: "Endereço é obrigatório",
                           })}
                           error={errors.endereco?.message}
-                          value={enderecoState.preenchido ? enderecoState.endereco : undefined}
+                          value={
+                            enderecoState.preenchido
+                              ? enderecoState.endereco
+                              : undefined
+                          }
                           onChange={(e) => {
                             setValue("endereco", e.target.value);
-                            setEnderecoState(prev => ({...prev, endereco: e.target.value}));
+                            setEnderecoState((prev) => ({
+                              ...prev,
+                              endereco: e.target.value,
+                            }));
                           }}
                         />
                         <FormInput
@@ -645,10 +660,17 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
                             required: "Bairro é obrigatório",
                           })}
                           error={errors.bairro?.message}
-                          value={enderecoState.preenchido ? enderecoState.bairro : undefined}
+                          value={
+                            enderecoState.preenchido
+                              ? enderecoState.bairro
+                              : undefined
+                          }
                           onChange={(e) => {
                             setValue("bairro", e.target.value);
-                            setEnderecoState(prev => ({...prev, bairro: e.target.value}));
+                            setEnderecoState((prev) => ({
+                              ...prev,
+                              bairro: e.target.value,
+                            }));
                           }}
                         />
                         <FormInput
@@ -657,10 +679,17 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
                             required: "Cidade é obrigatória",
                           })}
                           error={errors.cidade?.message}
-                          value={enderecoState.preenchido ? enderecoState.cidade : undefined}
+                          value={
+                            enderecoState.preenchido
+                              ? enderecoState.cidade
+                              : undefined
+                          }
                           onChange={(e) => {
                             setValue("cidade", e.target.value);
-                            setEnderecoState(prev => ({...prev, cidade: e.target.value}));
+                            setEnderecoState((prev) => ({
+                              ...prev,
+                              cidade: e.target.value,
+                            }));
                           }}
                         />
                         <FormSelect
@@ -670,10 +699,17 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
                           })}
                           options={estadosOptions}
                           error={errors.estado?.message}
-                          value={enderecoState.preenchido ? enderecoState.estado : undefined}
+                          value={
+                            enderecoState.preenchido
+                              ? enderecoState.estado
+                              : undefined
+                          }
                           onChange={(e) => {
                             setValue("estado", e.target.value);
-                            setEnderecoState(prev => ({...prev, estado: e.target.value}));
+                            setEnderecoState((prev) => ({
+                              ...prev,
+                              estado: e.target.value,
+                            }));
                           }}
                         />
                       </div>

src/components/clientes/ClientesList.tsx

@@ -1,16 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import { useQuery } from 'react-query';
-import { useNavigate } from 'react-router-dom';
-import { PencilIcon } from '@heroicons/react/24/outline';
-import api from '../../services/api';
-import { formatCPF, formatTelefone } from '../../utils/formatters';
+import { PencilIcon } from "@heroicons/react/24/outline";
+import React, { useState, useEffect } from "react";
+import { useQuery } from "react-query";
+import { useNavigate } from "react-router-dom";
+
+import api from "../../services/api";
+import { formatCPF, formatTelefone } from "../../utils/formatters";
 
 interface ClientesListProps {
   searchTerm: string;
   onEdit: (cliente: any) => void;
 }
 
-export const ClientesList: React.FC<ClientesListProps> = ({ searchTerm, onEdit }) => {
+export const ClientesList: React.FC<ClientesListProps> = ({
+  searchTerm,
+  onEdit,
+}) => {
   const navigate = useNavigate();
   const [debouncedTerm, setDebouncedTerm] = useState(searchTerm);
 
@@ -24,37 +28,38 @@ export const ClientesList: React.FC<ClientesListProps> = ({ searchTerm, onEdit }
   }, [searchTerm]);
 
   const { data: clientes = [], isLoading } = useQuery(
-    ['clientes', debouncedTerm],
+    ["clientes", debouncedTerm],
     async () => {
-      const response = await api.get('/clientes', {
+      const response = await api.get("/clientes", {
         params: {
-          search: debouncedTerm.toUpperCase()
-        }
+          search: debouncedTerm.toUpperCase(),
+        },
       });
 
       // Filtrar localmente para melhor resposta
       let filteredClientes = response.data;
       if (debouncedTerm) {
-        const searchTerms = debouncedTerm.toUpperCase().split(' ');
+        const searchTerms = debouncedTerm.toUpperCase().split(" ");
         filteredClientes = response.data.filter((cliente: any) =>
-          searchTerms.every(term => 
+          searchTerms.every(
+            (term) =>
               cliente.nome.includes(term) ||
               cliente.cpfCnpj.includes(term) ||
-            cliente.email?.includes(term.toLowerCase())
-          )
+              cliente.email?.includes(term.toLowerCase()),
+          ),
         );
       }
 
       // Ordenar por nome
       return filteredClientes.sort((a: any, b: any) =>
-        a.nome.localeCompare(b.nome)
+        a.nome.localeCompare(b.nome),
       );
     },
     {
       staleTime: 1000 * 60, // 1 minuto
       cacheTime: 1000 * 60 * 5, // 5 minutos
-      keepPreviousData: true // Manter dados anteriores enquanto carrega novos
-    }
+      keepPreviousData: true, // Manter dados anteriores enquanto carrega novos
+    },
   );
 
   if (isLoading) {

src/components/clientes/ClientesPage.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from "react";
 import { PlusIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { ClientesList } from "./ClientesList.tsx";
-import { ClienteModal } from "./ClienteModal.tsx";
+import React, { useState } from "react";
+
 import { Cliente } from "../../types/entities";
 
+import { ClienteModal } from "./ClienteModal.tsx";
+import { ClientesList } from "./ClientesList.tsx";
+
 export const ClientesPage: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");

src/components/dashboard/AlertasPrazos.tsx

@@ -1,20 +1,22 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { format, differenceInDays } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
-import api from '../../services/api';
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { format, differenceInDays, ptBR } from "date-fns";
+import React from "react";
+import { useQuery } from "react-query";
+
+import api from "../../services/api";
 
 export const AlertasPrazos: React.FC = () => {
-  const { data: prazos = [] } = useQuery('prazosFuturos', async () => {
-    const response = await api.get('/dashboard/prazos/proximos');
+  const { data: prazos = [] } = useQuery("prazosFuturos", async () => {
+    const response = await api.get("/dashboard/prazos/proximos");
     return response.data;
   });
 
   const getPrioridadeStyle = (dias: number) => {
-    if (dias <= 3) return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-    if (dias <= 7) return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-    return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+    if (dias <= 3)
+      return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
+    if (dias <= 7)
+      return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
+    return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200";
   };
 
   return (
@@ -38,8 +40,12 @@ export const AlertasPrazos: React.FC = () => {
                   Processo: {prazo.processo.numero}
                 </p>
               </div>
-              <span className={`px-2 py-1 rounded-full text-xs ${getPrioridadeStyle(dias)}`}>
-                {format(new Date(prazo.dataLimite), 'dd/MM/yyyy', { locale: ptBR })}
+              <span
+                className={`px-2 py-1 rounded-full text-xs ${getPrioridadeStyle(dias)}`}
+              >
+                {format(new Date(prazo.dataLimite), "dd/MM/yyyy", {
+                  locale: ptBR,
+                })}
               </span>
             </div>
           );

src/components/dashboard/AtividadesRecentes.tsx

@@ -1,22 +1,24 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { format } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import api from '../../services/api';
+import { format, ptBR } from "date-fns";
+import React from "react";
+import { useQuery } from "react-query";
+
+import api from "../../services/api";
 
 export const AtividadesRecentes: React.FC = () => {
-  const { data: atividades = [] } = useQuery('atividades', async () => {
-    const response = await api.get('/dashboard/atividades');
+  const { data: atividades = [] } = useQuery("atividades", async () => {
+    const response = await api.get("/dashboard/atividades");
     return response.data;
   });
 
   const formatData = (data: string | Date | null) => {
-    if (!data) return '';
+    if (!data) return "";
     try {
-      return format(new Date(data), "dd 'de' MMMM 'às' HH:mm", { locale: ptBR });
+      return format(new Date(data), "dd 'de' MMMM 'às' HH:mm", {
+        locale: ptBR,
+      });
     } catch (error) {
-      console.error('Erro ao formatar data:', error);
-      return 'Data inválida';
+      console.error("Erro ao formatar data:", error);
+      return "Data inválida";
     }
   };
 
@@ -28,7 +30,9 @@ export const AtividadesRecentes: React.FC = () => {
       <div className="space-y-4">
         {atividades.map((atividade: any) => (
           <div key={atividade.id} className="flex items-start space-x-3">
-            <span className="text-2xl">{atividade.tipo === 'PROCESSO' ? '⚖️' : '📋'}</span>
+            <span className="text-2xl">
+              {atividade.tipo === "PROCESSO" ? "⚖️" : "📋"}
+            </span>
             <div className="flex-1">
               <p className="text-sm text-gray-900 dark:text-white">
                 {atividade.descricao}

src/components/dashboard/Card.tsx

@@ -1,8 +1,5 @@
-import React from 'react';
-import {
-  ArrowUpIcon,
-  ArrowDownIcon,
-} from '@heroicons/react/24/outline';
+import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/24/outline";
+import React from "react";
 
 interface CardProps {
   title: string;
@@ -10,9 +7,9 @@ interface CardProps {
   trend?: number;
   trendLabel?: string;
   icon?: string;
-  color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple';
+  color?: "blue" | "green" | "red" | "yellow" | "purple";
   items?: Array<{ label: string; value: string | number }>;
-  type?: 'default' | 'list';
+  type?: "default" | "list";
 }
 
 export const Card: React.FC<CardProps> = ({
@@ -21,27 +18,27 @@ export const Card: React.FC<CardProps> = ({
   trend,
   trendLabel,
   icon,
-  color = 'blue',
+  color = "blue",
   items,
-  type = 'default'
+  type = "default",
 }) => {
   const colorClasses = {
-    blue: 'text-blue-600',
-    green: 'text-green-600',
-    red: 'text-red-600',
-    yellow: 'text-yellow-600',
-    purple: 'text-purple-600'
+    blue: "text-blue-600",
+    green: "text-green-600",
+    red: "text-red-600",
+    yellow: "text-yellow-600",
+    purple: "text-purple-600",
   };
 
   const bgColorClasses = {
-    blue: 'bg-blue-50',
-    green: 'bg-green-50',
-    red: 'bg-red-50',
-    yellow: 'bg-yellow-50',
-    purple: 'bg-purple-50'
+    blue: "bg-blue-50",
+    green: "bg-green-50",
+    red: "bg-red-50",
+    yellow: "bg-yellow-50",
+    purple: "bg-purple-50",
   };
 
-  if (type === 'list' && items) {
+  if (type === "list" && items) {
     return (
       <div className="bg-white rounded-lg shadow p-4">
         <h3 className="text-sm font-medium text-gray-900 mb-4">{title}</h3>
@@ -49,7 +46,9 @@ export const Card: React.FC<CardProps> = ({
           {items.map((item, index) => (
             <div key={index} className="flex justify-between items-center">
               <span className="text-sm text-gray-500">{item.label}</span>
-              <span className="text-sm font-medium text-gray-900">{item.value}</span>
+              <span className="text-sm font-medium text-gray-900">
+                {item.value}
+              </span>
             </div>
           ))}
         </div>
@@ -72,7 +71,9 @@ export const Card: React.FC<CardProps> = ({
           {value}
         </p>
         {trend !== undefined && (
-          <div className={`ml-2 flex items-center text-sm ${trend >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+          <div
+            className={`ml-2 flex items-center text-sm ${trend >= 0 ? "text-green-600" : "text-red-600"}`}
+          >
             {trend >= 0 ? (
               <ArrowUpIcon className="h-4 w-4" />
             ) : (
@@ -80,9 +81,7 @@ export const Card: React.FC<CardProps> = ({
             )}
             <span className="ml-1">{Math.abs(trend)}%</span>
             {trendLabel && (
-              <span className="ml-1 text-gray-500">
-                {trendLabel}
-              </span>
+              <span className="ml-1 text-gray-500">{trendLabel}</span>
             )}
           </div>
         )}

src/components/dashboard/DashboardLayout.tsx

@@ -1,14 +1,16 @@
-import React from 'react';
-import { useAuth } from '../../contexts/AuthContext';
-import { useDashboardStats } from '../../hooks/useDashboardStats';
-import { ProcessosStats } from './stats/ProcessosStats';
-import { TarefasStats } from './stats/TarefasStats';
-import { AtendimentosStats } from './stats/AtendimentosStats';
-import { FinanceiroStats } from './stats/FinanceiroStats';
-import { AlertasPrazos } from './AlertasPrazos';
-import { AtividadesRecentes } from './AtividadesRecentes';
-import { TaxaSucessoCard } from './TaxaSucessoCard';
-import { KPIsFinanceiros } from './stats/KPIsFinanceiros';
+import React from "react";
+
+import { useAuth } from "../../contexts/AuthContext";
+import { useDashboardStats } from "../../hooks/useDashboardStats";
+
+import { AlertasPrazos } from "./AlertasPrazos";
+import { AtividadesRecentes } from "./AtividadesRecentes";
+import { AtendimentosStats } from "./stats/AtendimentosStats";
+import { FinanceiroStats } from "./stats/FinanceiroStats";
+import { KPIsFinanceiros } from "./stats/KPIsFinanceiros";
+import { ProcessosStats } from "./stats/ProcessosStats";
+import { TarefasStats } from "./stats/TarefasStats";
+import { TaxaSucessoCard } from "./TaxaSucessoCard";
 
 export const DashboardLayout: React.FC = () => {
   const { user } = useAuth();
@@ -18,10 +20,12 @@ export const DashboardLayout: React.FC = () => {
     atendimentosStats,
     financeiroStats,
     proximosPrazos,
-    atividades
+    atividades,
   } = useDashboardStats();
 
-  const isAdminOrAdvogado = ['ADVOGADO_ADMIN', 'ADVOGADO'].includes(user?.perfil || '');
+  const isAdminOrAdvogado = ["ADVOGADO_ADMIN", "ADVOGADO"].includes(
+    user?.perfil || "",
+  );
 
   return (
     <div className="space-y-6 p-6">
@@ -29,7 +33,9 @@ export const DashboardLayout: React.FC = () => {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         {processosStats.data && <ProcessosStats data={processosStats.data} />}
         {tarefasStats.data && <TarefasStats data={tarefasStats.data} />}
-        {atendimentosStats.data && <AtendimentosStats data={atendimentosStats.data} />}
+        {atendimentosStats.data && (
+          <AtendimentosStats data={atendimentosStats.data} />
+        )}
         {isAdminOrAdvogado && financeiroStats.data && (
           <FinanceiroStats data={financeiroStats.data} />
         )}

src/components/dashboard/KPIsAdvogados.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import api from '../../services/api';
+import React from "react";
+import { useQuery } from "react-query";
+
+import api from "../../services/api";
 
 export const KPIsAdvogados: React.FC = () => {
-  const { data: kpis } = useQuery('advogadosKpis', async () => {
-    const response = await api.get('/dashboard/advogados/kpis');
+  const { data: kpis } = useQuery("advogadosKpis", async () => {
+    const response = await api.get("/dashboard/advogados/kpis");
     return response.data;
   });
 
@@ -19,16 +20,28 @@ export const KPIsAdvogados: React.FC = () => {
         <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
           <thead className="bg-gray-50 dark:bg-gray-900">
             <tr>
-              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th
+                scope="col"
+                className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+              >
                 Advogado
               </th>
-              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th
+                scope="col"
+                className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+              >
                 Tarefas Concluídas
               </th>
-              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th
+                scope="col"
+                className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+              >
                 Processos Concluídos
               </th>
-              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th
+                scope="col"
+                className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+              >
                 Produtividade
               </th>
             </tr>

src/components/dashboard/TaxaSucessoCard.tsx

@@ -1,36 +1,46 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import api from '../../services/api';
+import React from "react";
+import { useQuery } from "react-query";
+
+import api from "../../services/api";
 
 export const TaxaSucessoCard: React.FC = () => {
-  const { data: stats } = useQuery('taxa-sucesso', async () => {
-    const response = await api.get('/dashboard/processos/taxa-sucesso');
+  const { data: stats } = useQuery("taxa-sucesso", async () => {
+    const response = await api.get("/dashboard/processos/taxa-sucesso");
     return response.data;
   });
 
   if (!stats) return null;
 
   const estatisticas = stats || [];
-  const total = estatisticas.reduce((acc: number, curr: any) => acc + (curr._count || 0), 0);
+  const total = estatisticas.reduce(
+    (acc: number, curr: any) => acc + (curr._count || 0),
+    0,
+  );
 
   return (
     <div className="bg-white rounded-lg shadow p-6">
       <h3 className="text-lg font-semibold mb-4">Taxa de Sucesso</h3>
       <div className="flex items-center justify-between">
         <div className="text-3xl font-bold text-green-600">
-          {estatisticas.find((s: any) => s.resultado === 'PROCEDENTE')?._count
-            ? Math.round((estatisticas.find((s: any) => s.resultado === 'PROCEDENTE')._count / total) * 100)
-            : 0}%
-        </div>
-        <div className="text-sm text-gray-500">
-          Total julgados: {total}
+          {estatisticas.find((s: any) => s.resultado === "PROCEDENTE")?._count
+            ? Math.round(
+                (estatisticas.find((s: any) => s.resultado === "PROCEDENTE")
+                  ._count /
+                  total) *
+                  100,
+              )
+            : 0}
+          %
         </div>
+        <div className="text-sm text-gray-500">Total julgados: {total}</div>
       </div>
       <div className="mt-4 space-y-2">
         {estatisticas.map((item: any) => (
           <div key={item.resultado} className="flex justify-between">
             <span className="text-sm text-gray-600">{item.resultado}</span>
-            <span className="text-sm font-medium">{Math.round((item._count / total) * 100)}%</span>
+            <span className="text-sm font-medium">
+              {Math.round((item._count / total) * 100)}%
+            </span>
           </div>
         ))}
       </div>

src/components/dashboard/charts/MapaCalor.tsx

@@ -1,20 +1,23 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { format } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import api from '../../../services/api';
+import { format, ptBR } from "date-fns";
+import React from "react";
+import { useQuery } from "react-query";
+
+import api from "../../../services/api";
 
 export const MapaCalor: React.FC = () => {
-  const { data: atividadesDiarias } = useQuery('atividadesDiarias', async () => {
-    const response = await api.get('/dashboard/atividades/diarias');
+  const { data: atividadesDiarias } = useQuery(
+    "atividadesDiarias",
+    async () => {
+      const response = await api.get("/dashboard/atividades/diarias");
       return response.data;
-  });
+    },
+  );
 
   const intensidadeCor = (quantidade: number) => {
-    if (quantidade === 0) return 'bg-gray-100 dark:bg-gray-800';
-    if (quantidade <= 3) return 'bg-blue-100 dark:bg-blue-900';
-    if (quantidade <= 6) return 'bg-blue-300 dark:bg-blue-700';
-    return 'bg-blue-500 dark:bg-blue-500';
+    if (quantidade === 0) return "bg-gray-100 dark:bg-gray-800";
+    if (quantidade <= 3) return "bg-blue-100 dark:bg-blue-900";
+    if (quantidade <= 6) return "bg-blue-300 dark:bg-blue-700";
+    return "bg-blue-500 dark:bg-blue-500";
   };
 
   return (

src/components/dashboard/charts/PrevisaoReceitasChart.tsx

@@ -1,19 +1,28 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
-import api from '../../../services/api';
-import { useAuth } from '../../../contexts/AuthContext';
-import { formatCurrency } from '../../../utils/formatters';
+import React from "react";
+import { useQuery } from "react-query";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+import { useAuth } from "../../../contexts/AuthContext";
+import api from "../../../services/api";
+import { formatCurrency } from "../../../utils/formatters";
 
 export const PrevisaoReceitasChart: React.FC = () => {
   const { user } = useAuth();
 
-  if (!['ADVOGADO_ADMIN', 'ADVOGADO'].includes(user?.perfil || '')) {
+  if (!["ADVOGADO_ADMIN", "ADVOGADO"].includes(user?.perfil || "")) {
     return null;
   }
 
-  const { data: previsao } = useQuery('previsaoReceitas', async () => {
-    const response = await api.get('/dashboard/financeiro/previsao');
+  const { data: previsao } = useQuery("previsaoReceitas", async () => {
+    const response = await api.get("/dashboard/financeiro/previsao");
     return response.data;
   });
 

src/components/dashboard/charts/ProcessosCharts.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
-import { useAuth } from '../../../contexts/AuthContext';
-import { ProcessosEvolucao } from './ProcessosEvolucao';
-import { TaxaSucessoChart } from './TaxaSucessoChart';
-import { PrevisaoReceitasChart } from './PrevisaoReceitasChart';
+import React from "react";
+
+import { useAuth } from "../../../contexts/AuthContext";
+
+import { PrevisaoReceitasChart } from "./PrevisaoReceitasChart";
+import { ProcessosEvolucao } from "./ProcessosEvolucao";
+import { TaxaSucessoChart } from "./TaxaSucessoChart";
 
 export const ProcessosCharts: React.FC = () => {
   const { user } = useAuth();
-  const isAdminOrAdvogado = user?.perfil === 'ADVOGADO_ADMIN' || user?.perfil === 'ADVOGADO';
+  const isAdminOrAdvogado =
+    user?.perfil === "ADVOGADO_ADMIN" || user?.perfil === "ADVOGADO";
 
   return (
     <>

src/components/dashboard/charts/ProcessosEvolucao.tsx

@@ -1,11 +1,20 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
-import api from '../../../services/api';
+import React from "react";
+import { useQuery } from "react-query";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+import api from "../../../services/api";
 
 export const ProcessosEvolucao: React.FC = () => {
-  const { data: evolucao } = useQuery('processosEvolucao', async () => {
-    const response = await api.get('/dashboard/processos/evolucao');
+  const { data: evolucao } = useQuery("processosEvolucao", async () => {
+    const response = await api.get("/dashboard/processos/evolucao");
     return response.data;
   });
 
@@ -21,8 +30,18 @@ export const ProcessosEvolucao: React.FC = () => {
             <XAxis dataKey="mes" />
             <YAxis />
             <Tooltip />
-            <Line type="monotone" dataKey="novos" stroke="#3B82F6" name="Novos" />
-            <Line type="monotone" dataKey="concluidos" stroke="#10B981" name="Concluídos" />
+            <Line
+              type="monotone"
+              dataKey="novos"
+              stroke="#3B82F6"
+              name="Novos"
+            />
+            <Line
+              type="monotone"
+              dataKey="concluidos"
+              stroke="#10B981"
+              name="Concluídos"
+            />
           </LineChart>
         </ResponsiveContainer>
       </div>

src/components/dashboard/charts/TaxaSucessoChart.tsx

@@ -1,15 +1,23 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
-import api from '../../../services/api';
+import React from "react";
+import { useQuery } from "react-query";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Legend,
+  Tooltip,
+} from "recharts";
+
+import api from "../../../services/api";
 
 export const TaxaSucessoChart: React.FC = () => {
-  const { data: stats } = useQuery('taxaSucesso', async () => {
-    const response = await api.get('/dashboard/processos/taxa-sucesso');
+  const { data: stats } = useQuery("taxaSucesso", async () => {
+    const response = await api.get("/dashboard/processos/taxa-sucesso");
     return response.data;
   });
 
-  const COLORS = ['#10B981', '#EF4444', '#F59E0B'];
+  const COLORS = ["#10B981", "#EF4444", "#F59E0B"];
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
@@ -29,7 +37,10 @@ export const TaxaSucessoChart: React.FC = () => {
               label
             >
               {stats?.map((entry: any, index: number) => (
-                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                <Cell
+                  key={`cell-${index}`}
+                  fill={COLORS[index % COLORS.length]}
+                />
               ))}
             </Pie>
             <Tooltip />

src/components/dashboard/stats/AtendimentosStats.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { Card } from '../Card';
-import api from '../../../services/api';
+import React from "react";
+import { useQuery } from "react-query";
+
+import api from "../../../services/api";
+import { Card } from "../Card";
 
 export const AtendimentosStats: React.FC = () => {
-  const { data: stats } = useQuery('atendimentosStats', async () => {
-    const response = await api.get('/dashboard/atendimentos/stats');
+  const { data: stats } = useQuery("atendimentosStats", async () => {
+    const response = await api.get("/dashboard/atendimentos/stats");
     return response.data;
   });
 

src/components/dashboard/stats/FinanceiroStats.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { Card } from '../Card';
-import api from '../../../services/api';
-import { formatCurrency } from '../../../utils/formatters';
+import React from "react";
+import { useQuery } from "react-query";
+
+import api from "../../../services/api";
+import { formatCurrency } from "../../../utils/formatters";
+import { Card } from "../Card";
 
 export const FinanceiroStats: React.FC = () => {
-  const { data: stats } = useQuery('financeiroStats', async () => {
-    const response = await api.get('/dashboard/financeiro/stats');
+  const { data: stats } = useQuery("financeiroStats", async () => {
+    const response = await api.get("/dashboard/financeiro/stats");
     return response.data;
   });
 

src/components/dashboard/stats/KPIsFinanceiros.tsx

@@ -1,19 +1,20 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { useAuth } from '../../../contexts/AuthContext';
-import { Card } from '../../dashboard/Card';
-import api from '../../../services/api';
-import { formatCurrency } from '../../../utils/formatters';
+import React from "react";
+import { useQuery } from "react-query";
+
+import { useAuth } from "../../../contexts/AuthContext";
+import api from "../../../services/api";
+import { formatCurrency } from "../../../utils/formatters";
+import { Card } from "../../dashboard/Card";
 
 export const KPIsFinanceiros: React.FC = () => {
   const { user } = useAuth();
 
-  if (!['ADVOGADO_ADMIN', 'ADVOGADO'].includes(user?.perfil || '')) {
+  if (!["ADVOGADO_ADMIN", "ADVOGADO"].includes(user?.perfil || "")) {
     return null;
   }
 
-  const { data: stats } = useQuery('financeiroKPIs', async () => {
-    const response = await api.get('/dashboard/financeiro/stats');
+  const { data: stats } = useQuery("financeiroKPIs", async () => {
+    const response = await api.get("/dashboard/financeiro/stats");
     return response.data;
   });
 

src/components/dashboard/stats/ProcessosStats.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import api from '../../../services/api';
-import { Card } from '../Card';
+import React from "react";
+import { useQuery } from "react-query";
+
+import api from "../../../services/api";
+import { Card } from "../Card";
 
 export const ProcessosStats: React.FC = () => {
-  const { data: stats } = useQuery('processosStats', async () => {
-    const response = await api.get('/dashboard/processos/stats');
+  const { data: stats } = useQuery("processosStats", async () => {
+    const response = await api.get("/dashboard/processos/stats");
     return response.data;
   });
 
@@ -17,16 +18,8 @@ export const ProcessosStats: React.FC = () => {
         trend={stats?.crescimento || 0}
         icon="DocumentText"
       />
-      <Card
-        title="Por Tribunal"
-        items={stats?.porTribunal || []}
-        type="list"
-      />
-      <Card
-        title="Por Status"
-        items={stats?.porStatus || []}
-        type="list"
-      />
+      <Card title="Por Tribunal" items={stats?.porTribunal || []} type="list" />
+      <Card title="Por Status" items={stats?.porStatus || []} type="list" />
     </div>
   );
 };

src/components/dashboard/stats/TarefasStats.tsx

@@ -1,22 +1,23 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { Card } from '../Card';
-import api from '../../../services/api';
+import React from "react";
+import { useQuery } from "react-query";
+
+import api from "../../../services/api";
+import { Card } from "../Card";
 
 export const TarefasStats: React.FC = () => {
-  const { data: stats } = useQuery('tarefasStats', async () => {
+  const { data: stats } = useQuery("tarefasStats", async () => {
     try {
-      const response = await api.get('/dashboard/tarefas/stats');
+      const response = await api.get("/dashboard/tarefas/stats");
       return response.data;
     } catch (error) {
-      console.error('Erro ao buscar estatísticas:', error);
+      console.error("Erro ao buscar estatísticas:", error);
       return {
         pendentes: 0,
         atrasadas: 0,
         concluidas: 0,
         total: 0,
         taxaConclusao: 0,
-        porStatus: { PENDENTE: 0 }
+        porStatus: { PENDENTE: 0 },
       };
     }
   });
@@ -27,7 +28,7 @@ export const TarefasStats: React.FC = () => {
     concluidas: 0,
     total: 0,
     taxaConclusao: 0,
-    porStatus: { PENDENTE: 0 }
+    porStatus: { PENDENTE: 0 },
   };
 
   const safeStats = stats || defaultStats;

src/components/documentos/ConfiguracaoDocumento.tsx

@@ -1,10 +1,11 @@
-import { useState, useEffect } from 'react';
-import { api } from '../../lib/api';
-import { toast } from 'react-toastify';
-import { Dialog } from '@headlessui/react';
-import { DocumentArrowUpIcon } from '@heroicons/react/24/outline';
-import { Editor } from '@tinymce/tinymce-react';
-import { DOCUMENT_VARIABLES } from '../../utils/documentVariables';
+import { Dialog } from "@headlessui/react";
+import { DocumentArrowUpIcon } from "@heroicons/react/24/outline";
+import { Editor } from "@tinymce/tinymce-react";
+import { useState, useEffect } from "react";
+import { toast } from "react-toastify";
+
+import { api } from "../../lib/api";
+import { DOCUMENT_VARIABLES } from "../../utils/documentVariables";
 
 // Definir interface para o estado
 interface ConfigState {
@@ -24,18 +25,18 @@ interface ConfigState {
 
 export function ConfiguracaoDocumento() {
   const [config, setConfig] = useState<ConfigState>({
-    timbradoUrl: '',
+    timbradoUrl: "",
     timbradoMarginTop: 100,
     timbradoMarginBottom: 50,
     timbradoMarginLeft: 50,
     timbradoMarginRight: 50,
-    templatePadrao: '',
+    templatePadrao: "",
     margensTemplate: {
       top: 35,
       bottom: 29,
       left: 25,
-      right: 25
-    }
+      right: 25,
+    },
   });
 
   const [isPreviewOpen, setPreviewOpen] = useState(false);
@@ -47,27 +48,27 @@ export function ConfiguracaoDocumento() {
 
   const loadConfig = async () => {
     try {
-      const response = await api.get('/documentos/configuracoes');
-      console.log('Configurações carregadas:', response.data); // Debug
+      const response = await api.get("/documentos/configuracoes");
+      console.log("Configurações carregadas:", response.data); // Debug
       if (response.data) {
         setConfig({
-          timbradoUrl: response.data.timbradoUrl || '',
+          timbradoUrl: response.data.timbradoUrl || "",
           timbradoMarginTop: response.data.timbradoMarginTop || 100,
           timbradoMarginBottom: response.data.timbradoMarginBottom || 50,
           timbradoMarginLeft: response.data.timbradoMarginLeft || 50,
           timbradoMarginRight: response.data.timbradoMarginRight || 50,
-          templatePadrao: response.data.templatePadrao || '',
+          templatePadrao: response.data.templatePadrao || "",
           margensTemplate: {
             top: response.data.margensTemplate?.top || 35,
             bottom: response.data.margensTemplate?.bottom || 29,
             left: response.data.margensTemplate?.left || 25,
-            right: response.data.margensTemplate?.right || 25
-          }
+            right: response.data.margensTemplate?.right || 25,
+          },
         });
       }
     } catch (error) {
-      console.error('Erro ao carregar configurações:', error);
-      toast.error('Erro ao carregar configurações');
+      console.error("Erro ao carregar configurações:", error);
+      toast.error("Erro ao carregar configurações");
     }
   };
 
@@ -76,53 +77,57 @@ export function ConfiguracaoDocumento() {
     if (!file) return;
 
     // Atualizado para aceitar PDF
-    if (!['image/png', 'image/svg+xml', 'application/pdf'].includes(file.type)) {
-      toast.error('Por favor, use apenas arquivos PDF, PNG ou SVG');
+    if (
+      !["image/png", "image/svg+xml", "application/pdf"].includes(file.type)
+    ) {
+      toast.error("Por favor, use apenas arquivos PDF, PNG ou SVG");
       return;
     }
 
-    if (file.size > 5 * 1024 * 1024) { // Aumentado para 5MB para acomodar PDFs
-      toast.error('O arquivo deve ter no máximo 5MB');
+    if (file.size > 5 * 1024 * 1024) {
+      // Aumentado para 5MB para acomodar PDFs
+      toast.error("O arquivo deve ter no máximo 5MB");
       return;
     }
 
     try {
       const formData = new FormData();
-      formData.append('timbrado', file);
+      formData.append("timbrado", file);
 
-      const response = await api.post('/documentos/upload-timbrado', formData);
-      setConfig(prev => ({ ...prev, timbradoUrl: response.data.url }));
-      toast.success('Timbrado atualizado com sucesso');
+      const response = await api.post("/documentos/upload-timbrado", formData);
+      setConfig((prev) => ({ ...prev, timbradoUrl: response.data.url }));
+      toast.success("Timbrado atualizado com sucesso");
     } catch (error) {
-      toast.error('Erro ao fazer upload do timbrado');
+      toast.error("Erro ao fazer upload do timbrado");
     }
   };
 
   const handleSave = async () => {
     try {
       setIsSaving(true);
-      await api.post('/documentos/configuracoes', config);
-      toast.success('Configurações salvas com sucesso');
+      await api.post("/documentos/configuracoes", config);
+      toast.success("Configurações salvas com sucesso");
     } catch (error) {
-      toast.error('Erro ao salvar configurações');
+      toast.error("Erro ao salvar configurações");
     } finally {
       setIsSaving(false);
     }
   };
 
   const handleEditorSetup = (editor: any) => {
-    editor.ui.registry.addMenuButton('variables', {
-      text: 'Variáveis',
+    editor.ui.registry.addMenuButton("variables", {
+      text: "Variáveis",
       fetch: (callback: Function) => {
-        const items = Object.entries(DOCUMENT_VARIABLES).flatMap(([category, vars]) =>
+        const items = Object.entries(DOCUMENT_VARIABLES).flatMap(
+          ([category, vars]) =>
             Object.entries(vars).map(([name, value]) => ({
-            type: 'menuitem',
-            text: `${category} - ${name.replace(/_/g, ' ')}`,
-            onAction: () => editor.insertContent(value as string)
-          }))
+              type: "menuitem",
+              text: `${category} - ${name.replace(/_/g, " ")}`,
+              onAction: () => editor.insertContent(value as string),
+            })),
         );
         callback(items);
-      }
+      },
     });
   };
 
@@ -131,12 +136,14 @@ export function ConfiguracaoDocumento() {
     height: 400,
     menubar: true,
     plugins: [
-      'code', 'preview'  // Removido 'template'
+      "code",
+      "preview", // Removido 'template'
     ],
-    toolbar: 'variables | undo redo | formatselect | ' +
-      'bold italic | alignleft aligncenter alignright | ' +
-      'code preview',
-    setup: handleEditorSetup
+    toolbar:
+      "variables | undo redo | formatselect | " +
+      "bold italic | alignleft aligncenter alignright | " +
+      "code preview",
+    setup: handleEditorSetup,
   };
 
   return (
@@ -179,7 +186,12 @@ export function ConfiguracaoDocumento() {
             <input
               type="number"
               value={config.timbradoMarginTop}
-              onChange={e => setConfig(prev => ({ ...prev, timbradoMarginTop: Number(e.target.value) }))}
+              onChange={(e) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  timbradoMarginTop: Number(e.target.value),
+                }))
+              }
               className="w-full p-2 border rounded"
             />
           </div>
@@ -188,7 +200,12 @@ export function ConfiguracaoDocumento() {
             <input
               type="number"
               value={config.timbradoMarginBottom}
-              onChange={e => setConfig(prev => ({ ...prev, timbradoMarginBottom: Number(e.target.value) }))}
+              onChange={(e) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  timbradoMarginBottom: Number(e.target.value),
+                }))
+              }
               className="w-full p-2 border rounded"
             />
           </div>
@@ -197,7 +214,12 @@ export function ConfiguracaoDocumento() {
             <input
               type="number"
               value={config.timbradoMarginLeft}
-              onChange={e => setConfig(prev => ({ ...prev, timbradoMarginLeft: Number(e.target.value) }))}
+              onChange={(e) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  timbradoMarginLeft: Number(e.target.value),
+                }))
+              }
               className="w-full p-2 border rounded"
             />
           </div>
@@ -206,7 +228,12 @@ export function ConfiguracaoDocumento() {
             <input
               type="number"
               value={config.timbradoMarginRight}
-              onChange={e => setConfig(prev => ({ ...prev, timbradoMarginRight: Number(e.target.value) }))}
+              onChange={(e) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  timbradoMarginRight: Number(e.target.value),
+                }))
+              }
               className="w-full p-2 border rounded"
             />
           </div>
@@ -218,7 +245,9 @@ export function ConfiguracaoDocumento() {
           <Editor
             apiKey={import.meta.env.VITE_TINYMCE_API_KEY}
             value={config.templatePadrao}
-            onEditorChange={(content) => setConfig(prev => ({ ...prev, templatePadrao: content }))}
+            onEditorChange={(content) =>
+              setConfig((prev) => ({ ...prev, templatePadrao: content }))
+            }
             init={editorConfig}
           />
           <div className="mt-2 p-4 bg-gray-50 rounded border">
@@ -226,7 +255,9 @@ export function ConfiguracaoDocumento() {
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
               {Object.entries(DOCUMENT_VARIABLES).map(([category, vars]) => (
                 <div key={category}>
-                  <h5 className="font-medium text-sm text-gray-700">{category}</h5>
+                  <h5 className="font-medium text-sm text-gray-700">
+                    {category}
+                  </h5>
                   <ul className="mt-1 space-y-1">
                     {Object.entries(vars).map(([name, value]) => (
                       <li key={name} className="text-xs text-gray-600">
@@ -247,13 +278,15 @@ export function ConfiguracaoDocumento() {
             <input
               type="number"
               value={config.margensTemplate.top}
-              onChange={e => setConfig(prev => ({
+              onChange={(e) =>
+                setConfig((prev) => ({
                   ...prev,
                   margensTemplate: {
                     ...prev.margensTemplate,
-                  top: Number(e.target.value)
+                    top: Number(e.target.value),
+                  },
+                }))
               }
-              }))}
               className="w-full p-2 border rounded"
             />
           </div>
@@ -262,13 +295,15 @@ export function ConfiguracaoDocumento() {
             <input
               type="number"
               value={config.margensTemplate.bottom}
-              onChange={e => setConfig(prev => ({
+              onChange={(e) =>
+                setConfig((prev) => ({
                   ...prev,
                   margensTemplate: {
                     ...prev.margensTemplate,
-                  bottom: Number(e.target.value)
+                    bottom: Number(e.target.value),
+                  },
+                }))
               }
-              }))}
               className="w-full p-2 border rounded"
             />
           </div>
@@ -277,13 +312,15 @@ export function ConfiguracaoDocumento() {
             <input
               type="number"
               value={config.margensTemplate.left}
-              onChange={e => setConfig(prev => ({
+              onChange={(e) =>
+                setConfig((prev) => ({
                   ...prev,
                   margensTemplate: {
                     ...prev.margensTemplate,
-                  left: Number(e.target.value)
+                    left: Number(e.target.value),
+                  },
+                }))
               }
-              }))}
               className="w-full p-2 border rounded"
             />
           </div>
@@ -292,13 +329,15 @@ export function ConfiguracaoDocumento() {
             <input
               type="number"
               value={config.margensTemplate.right}
-              onChange={e => setConfig(prev => ({
+              onChange={(e) =>
+                setConfig((prev) => ({
                   ...prev,
                   margensTemplate: {
                     ...prev.margensTemplate,
-                  right: Number(e.target.value)
+                    right: Number(e.target.value),
+                  },
+                }))
               }
-              }))}
               className="w-full p-2 border rounded"
             />
           </div>
@@ -309,11 +348,11 @@ export function ConfiguracaoDocumento() {
           disabled={isSaving}
           className={`px-4 py-2 ${
             isSaving
-              ? 'bg-gray-400 cursor-not-allowed'
-              : 'bg-blue-600 hover:bg-blue-700'
+              ? "bg-gray-400 cursor-not-allowed"
+              : "bg-blue-600 hover:bg-blue-700"
           } text-white rounded`}
         >
-          {isSaving ? 'Salvando...' : 'Salvar Configurações'}
+          {isSaving ? "Salvando..." : "Salvar Configurações"}
         </button>
       </div>
 

src/components/documentos/DocumentoEditor.tsx

@@ -1,11 +1,18 @@
-import { useState, useEffect } from 'react';
-import { Editor } from '@tinymce/tinymce-react';
-import { Button, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
-import { Save as SaveIcon } from '@mui/icons-material';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import { toast } from 'react-toastify'; // Adicionar esta importação
-import { api } from '../../lib/api'; // Adicionar esta importação
-import { DocumentoService } from '../../services/DocumentoService'; // Adicionar esta importação
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { Save as SaveIcon } from "@mui/icons-material";
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from "@mui/material";
+import { Editor } from "@tinymce/tinymce-react";
+import { useState, useEffect } from "react";
+import { toast } from "react-toastify"; // Adicionar esta importação
+
+import { api } from "../../lib/api"; // Adicionar esta importação
+import { DocumentoService } from "../../services/DocumentoService"; // Adicionar esta importação
 
 interface DocumentoEditorProps {
   isOpen: boolean;
@@ -27,7 +34,7 @@ interface TemplateVariables {
 const preencherTemplate = (template: string, variables: TemplateVariables) => {
   let result = template;
   Object.entries(variables).forEach(([key, value]) => {
-    const regex = new RegExp(`{{${key}}}`, 'g');
+    const regex = new RegExp(`{{${key}}}`, "g");
     result = result.replace(regex, value);
   });
   return result;
@@ -40,11 +47,11 @@ export function DocumentoEditor({
   initialData,
   processoId,
   atendimentoId,
-  documento // Recuperar a prop
+  documento, // Recuperar a prop
 }: DocumentoEditorProps) {
-  const [content, setContent] = useState('');
-  const [nome, setNome] = useState('');
-  const [tipo, setTipo] = useState('OUTROS');
+  const [content, setContent] = useState("");
+  const [nome, setNome] = useState("");
+  const [tipo, setTipo] = useState("OUTROS");
   const [selectedTemplate, setSelectedTemplate] = useState(null);
   const [selectedAtendimento, setSelectedAtendimento] = useState(null);
   const [atendimentos, setAtendimentos] = useState([]);
@@ -54,9 +61,9 @@ export function DocumentoEditor({
 
   useEffect(() => {
     if (initialData) {
-      setContent(initialData.conteudo || '');
-      setNome(initialData.nome || '');
-      setTipo(initialData.tipo || 'OUTROS');
+      setContent(initialData.conteudo || "");
+      setNome(initialData.nome || "");
+      setTipo(initialData.tipo || "OUTROS");
     }
   }, [initialData]);
 
@@ -64,13 +71,13 @@ export function DocumentoEditor({
     const loadData = async () => {
       try {
         const [atendimentosRes, templatesRes] = await Promise.all([
-          api.get('/atendimentos'),
-          api.get('/documentos-modelos')
+          api.get("/atendimentos"),
+          api.get("/documentos-modelos"),
         ]);
         setAtendimentos(atendimentosRes.data);
         setTemplates(templatesRes.data);
       } catch (error) {
-        toast.error('Erro ao carregar dados');
+        toast.error("Erro ao carregar dados");
       } finally {
         setIsLoading(false);
       }
@@ -80,36 +87,38 @@ export function DocumentoEditor({
 
   useEffect(() => {
     if (documento) {
-      setContent(documento.conteudo || '');
-      setNome(documento.nome || '');
-      setTipo(documento.tipo || 'OUTROS');
+      setContent(documento.conteudo || "");
+      setNome(documento.nome || "");
+      setTipo(documento.tipo || "OUTROS");
     }
   }, [documento]);
 
   const handleTemplateSelect = async (templateId) => {
     try {
-      const template = templates.find(t => t.id === templateId);
+      const template = templates.find((t) => t.id === templateId);
       if (!template) return;
 
-      const atendimento = atendimentos.find(a => a.id === selectedAtendimento);
+      const atendimento = atendimentos.find(
+        (a) => a.id === selectedAtendimento,
+      );
       if (!atendimento) return;
 
       // Buscar dados do atendimento com as relações necessárias
       const [atendimentoDetalhado, usuarioRes, configRes] = await Promise.all([
         api.get(`/atendimentos/${atendimento.id}`),
-        api.get('/auth/me'),
-        api.get('/documentos/configuracoes')
+        api.get("/auth/me"),
+        api.get("/documentos/configuracoes"),
       ]);
 
       // Formatar endereço completo e outros dados do cliente
       const cliente = atendimentoDetalhado.data.cliente;
-      const enderecoCompleto = `${cliente.endereco}, ${cliente.numero}${cliente.complemento ? `, ${cliente.complemento}` : ''}, ${cliente.bairro}, ${cliente.cidade}/${cliente.estado}, CEP: ${cliente.cep}`;
+      const enderecoCompleto = `${cliente.endereco}, ${cliente.numero}${cliente.complemento ? `, ${cliente.complemento}` : ""}, ${cliente.bairro}, ${cliente.cidade}/${cliente.estado}, CEP: ${cliente.cep}`;
 
       // Formatar data extenso corretamente
-      const formatadorData = new Intl.DateTimeFormat('pt-BR', {
-        day: 'numeric',
-        month: 'long',
-        year: 'numeric'
+      const formatadorData = new Intl.DateTimeFormat("pt-BR", {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
       });
 
       // Preparar variáveis com dados formatados
@@ -117,65 +126,73 @@ export function DocumentoEditor({
         cliente: {
           ...cliente,
           enderecoCompleto,
-          nome: cliente.nome || '',
-          cpf: cliente.cpfCnpj || '', // Adicionar cpf como alias para cpfCnpj
-          cpfCnpj: cliente.cpfCnpj || '', // Manter cpfCnpj também
-          rg: cliente.rg || '',
-          estadoCivil: cliente.estadoCivil || '',
-          profissao: cliente.profissao || '',
-          nacionalidade: cliente.nacionalidade || 'brasileiro(a)',
-          nomePai: cliente.nomePai || '',
-          nomeMae: cliente.nomeMae || ''
+          nome: cliente.nome || "",
+          cpf: cliente.cpfCnpj || "", // Adicionar cpf como alias para cpfCnpj
+          cpfCnpj: cliente.cpfCnpj || "", // Manter cpfCnpj também
+          rg: cliente.rg || "",
+          estadoCivil: cliente.estadoCivil || "",
+          profissao: cliente.profissao || "",
+          nacionalidade: cliente.nacionalidade || "brasileiro(a)",
+          nomePai: cliente.nomePai || "",
+          nomeMae: cliente.nomeMae || "",
         },
         atendimento: atendimentoDetalhado.data,
         processo: atendimentoDetalhado.data.processo,
         advogado: {
           ...usuarioRes.data,
-          oabCompleta: `${usuarioRes.data.oab}/${usuarioRes.data.oabUF}`
+          oabCompleta: `${usuarioRes.data.oab}/${usuarioRes.data.oabUF}`,
         },
         escritorio: configRes.data,
         data: {
-          atual: new Date().toLocaleDateString('pt-BR'),
+          atual: new Date().toLocaleDateString("pt-BR"),
           atualExtenso: formatadorData.format(new Date()), // Formatar a data corretamente
           dia: new Date().getDate().toString(),
           mes: (new Date().getMonth() + 1).toString(),
-          mesExtenso: new Intl.DateTimeFormat('pt-BR', { month: 'long' }).format(new Date()),
-          ano: new Date().getFullYear().toString()
-        }
+          mesExtenso: new Intl.DateTimeFormat("pt-BR", {
+            month: "long",
+          }).format(new Date()),
+          ano: new Date().getFullYear().toString(),
+        },
       };
 
       // Teste para debug
-      console.log('Data por extenso:', variables.data.atualExtenso);
+      console.log("Data por extenso:", variables.data.atualExtenso);
 
       // Preencher template
-      const conteudoPreenchido = template.conteudo.replace(/\{\{([^}]+)\}\}/g, (match, path) => {
+      const conteudoPreenchido = template.conteudo.replace(
+        /\{\{([^}]+)\}\}/g,
+        (match, path) => {
           try {
-          const valor = path.split('.').reduce((obj, key) => obj?.[key], variables);
+            const valor = path
+              .split(".")
+              .reduce((obj, key) => obj?.[key], variables);
             return valor !== undefined ? valor : match;
           } catch (error) {
             console.warn(`Erro ao processar variável ${path}:`, error);
             return match;
           }
-      });
+        },
+      );
 
       setContent(conteudoPreenchido);
       setNome(`${template.nome} - ${cliente.nome}`);
       setTipo(template.tipo);
 
       // Debug para verificar substituições
-      console.log('Template original:', template.conteudo);
-      console.log('Conteúdo processado:', conteudoPreenchido);
-
+      console.log("Template original:", template.conteudo);
+      console.log("Conteúdo processado:", conteudoPreenchido);
     } catch (error) {
-      console.error('Erro ao carregar template:', error);
-      toast.error('Erro ao carregar template. Verifique se o atendimento possui um cliente vinculado.');
+      console.error("Erro ao carregar template:", error);
+      toast.error(
+        "Erro ao carregar template. Verifique se o atendimento possui um cliente vinculado.",
+      );
     }
   };
 
   const handleSave = async () => {
     // Verificação de atendimento apenas para novos documentos
     if (!documento && !selectedAtendimento) {
-      toast.error('Selecione um atendimento');
+      toast.error("Selecione um atendimento");
       return;
     }
 
@@ -186,12 +203,12 @@ export function DocumentoEditor({
         tipo,
         conteudo: content,
         atendimentoId: documento?.atendimentoId || selectedAtendimento,
-        processoId: documento?.processoId || processoId
+        processoId: documento?.processoId || processoId,
       });
-      toast.success('Documento salvo com sucesso');
+      toast.success("Documento salvo com sucesso");
       onClose();
     } catch (error) {
-      toast.error('Erro ao salvar documento');
+      toast.error("Erro ao salvar documento");
     } finally {
       setIsSaving(false);
     }
@@ -203,12 +220,12 @@ export function DocumentoEditor({
         <div className="flex flex-col gap-4">
           <div className="flex gap-4">
             <select
-              value={selectedAtendimento || ''}
+              value={selectedAtendimento || ""}
               onChange={(e) => setSelectedAtendimento(e.target.value)}
               className="flex-1 p-2 border rounded"
             >
               <option value="">Selecione um atendimento</option>
-              {atendimentos.map(atendimento => (
+              {atendimentos.map((atendimento) => (
                 <option key={atendimento.id} value={atendimento.id}>
                   {atendimento.protocolo} - {atendimento.cliente.nome}
                 </option>
@@ -216,12 +233,12 @@ export function DocumentoEditor({
             </select>
 
             <select
-              value={selectedTemplate || ''}
+              value={selectedTemplate || ""}
               onChange={(e) => handleTemplateSelect(e.target.value)}
               className="flex-1 p-2 border rounded"
             >
               <option value="">Selecione um template</option>
-              {templates.map(template => (
+              {templates.map((template) => (
                 <option key={template.id} value={template.id}>
                   {template.nome}
                 </option>
@@ -259,23 +276,39 @@ export function DocumentoEditor({
             height: 500,
             menubar: true,
             plugins: [
-              'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
-              'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
-              'insertdatetime', 'media', 'table', 'help', 'wordcount'
+              "advlist",
+              "autolink",
+              "lists",
+              "link",
+              "image",
+              "charmap",
+              "preview",
+              "anchor",
+              "searchreplace",
+              "visualblocks",
+              "code",
+              "fullscreen",
+              "insertdatetime",
+              "media",
+              "table",
+              "help",
+              "wordcount",
             ],
-            toolbar: 'undo redo | formatselect | ' +
-              'bold italic backcolor | alignleft aligncenter ' +
-              'alignright alignjustify | bullist numlist outdent indent | ' +
-              'removeformat | help',
-            language: 'pt_BR', // Adicionar configuração de idioma
-            language_url: '/tinymce/langs/pt_BR.js', // Adicionar URL do arquivo de idioma
-            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+            toolbar:
+              "undo redo | formatselect | " +
+              "bold italic backcolor | alignleft aligncenter " +
+              "alignright alignjustify | bullist numlist outdent indent | " +
+              "removeformat | help",
+            language: "pt_BR", // Adicionar configuração de idioma
+            language_url: "/tinymce/langs/pt_BR.js", // Adicionar URL do arquivo de idioma
+            content_style:
+              "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
             // Adicionar estas configurações
             promotion: false,
             branding: false,
             preview_styles: false,
-            referrer_policy: 'origin',
-            disable_stats: true // Desabilitar estatísticas
+            referrer_policy: "origin",
+            disable_stats: true, // Desabilitar estatísticas
           }}
           value={content}
           onEditorChange={setContent}
@@ -298,4 +331,3 @@ export function DocumentoEditor({
     </Dialog>
   );
 }
-

src/components/documentos/DocumentoViewer.tsx

@@ -1,8 +1,13 @@
-import { Dialog } from '@headlessui/react';
-import { XMarkIcon, PrinterIcon, DocumentArrowDownIcon } from '@heroicons/react/24/outline';
-import { api } from '../../lib/api';
-import { toast } from 'react-toastify';
-import { useState } from 'react';
+import { Dialog } from "@headlessui/react";
+import {
+  XMarkIcon,
+  PrinterIcon,
+  DocumentArrowDownIcon,
+} from "@heroicons/react/24/outline";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+import { api } from "../../lib/api";
 
 interface DocumentoViewerProps {
   documento: any;
@@ -10,18 +15,22 @@ interface DocumentoViewerProps {
   onClose: () => void;
 }
 
-export function DocumentoViewer({ documento, isOpen, onClose }: DocumentoViewerProps) {
+export function DocumentoViewer({
+  documento,
+  isOpen,
+  onClose,
+}: DocumentoViewerProps) {
   const [isExporting, setIsExporting] = useState(false);
 
   const handlePrint = () => {
-    const printWindow = window.open('', '_blank');
+    const printWindow = window.open("", "_blank");
     if (!printWindow) return;
 
     const html = `
       <!DOCTYPE html>
       <html>
         <head>
-          <title>${documento?.nome || 'Documento'}</title>
+          <title>${documento?.nome || "Documento"}</title>
           <style>
             @page {
               size: A4;
@@ -88,16 +97,16 @@ export function DocumentoViewer({ documento, isOpen, onClose }: DocumentoViewerP
         </head>
         <body>
           <div class="header">
-            <h2 style="margin:0;font-size:14pt">${documento?.escritorio?.nome || ''}</h2>
+            <h2 style="margin:0;font-size:14pt">${documento?.escritorio?.nome || ""}</h2>
           </div>
 
           <div class="content">
-            ${documento?.conteudo || ''}
+            ${documento?.conteudo || ""}
           </div>
 
           <div class="footer">
-            ${documento?.escritorio?.endereco || ''}<br>
-            Tel: ${documento?.escritorio?.telefone || ''} | Email: ${documento?.escritorio?.email || ''}
+            ${documento?.escritorio?.endereco || ""}<br>
+            Tel: ${documento?.escritorio?.telefone || ""} | Email: ${documento?.escritorio?.email || ""}
           </div>
 
           <script>
@@ -117,25 +126,32 @@ export function DocumentoViewer({ documento, isOpen, onClose }: DocumentoViewerP
   const handleExportPDF = async () => {
     try {
       setIsExporting(true);
-      toast.info('Gerando PDF, aguarde...', { autoClose: false, toastId: 'generating-pdf' });
-
-      // Buscar configurações atualizadas do escritório
-      const response = await api.post('/documentos/exportar-pdf', {
-        conteudo: documento.conteudo,
-        escritorio: documento.escritorio
-      }, { 
-        responseType: 'blob',
-        headers: {
-          'Accept': 'application/pdf'
-        }
+      toast.info("Gerando PDF, aguarde...", {
+        autoClose: false,
+        toastId: "generating-pdf",
       });
 
+      // Buscar configurações atualizadas do escritório
+      const response = await api.post(
+        "/documentos/exportar-pdf",
+        {
+          conteudo: documento.conteudo,
+          escritorio: documento.escritorio,
+        },
+        {
+          responseType: "blob",
+          headers: {
+            Accept: "application/pdf",
+          },
+        },
+      );
+
       // Criar e baixar o arquivo
-      const blob = new Blob([response.data], { type: 'application/pdf' });
+      const blob = new Blob([response.data], { type: "application/pdf" });
       const url = window.URL.createObjectURL(blob);
-      const link = document.createElement('a');
+      const link = document.createElement("a");
       link.href = url;
-      link.setAttribute('download', `${documento.nome || 'documento'}.pdf`);
+      link.setAttribute("download", `${documento.nome || "documento"}.pdf`);
       document.body.appendChild(link);
       link.click();
 
@@ -143,23 +159,19 @@ export function DocumentoViewer({ documento, isOpen, onClose }: DocumentoViewerP
       window.URL.revokeObjectURL(url);
       document.body.removeChild(link);
 
-      toast.dismiss('generating-pdf');
-      toast.success('PDF gerado com sucesso!');
+      toast.dismiss("generating-pdf");
+      toast.success("PDF gerado com sucesso!");
     } catch (error) {
-      console.error('Erro ao gerar PDF:', error);
-      toast.dismiss('generating-pdf');
-      toast.error('Erro ao gerar o PDF');
+      console.error("Erro ao gerar PDF:", error);
+      toast.dismiss("generating-pdf");
+      toast.error("Erro ao gerar o PDF");
     } finally {
       setIsExporting(false);
     }
   };
 
   return (
-    <Dialog 
-      open={isOpen} 
-      onClose={onClose}
-      className="relative z-50"
-    >
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
       <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
 
       <div className="fixed inset-0 flex items-center justify-center p-4">
@@ -174,15 +186,31 @@ export function DocumentoViewer({ documento, isOpen, onClose }: DocumentoViewerP
                 disabled={isExporting}
                 className={`inline-flex items-center px-3 py-2 ${
                   isExporting
-                    ? 'bg-blue-400 cursor-not-allowed' 
-                    : 'bg-blue-600 hover:bg-blue-700'
+                    ? "bg-blue-400 cursor-not-allowed"
+                    : "bg-blue-600 hover:bg-blue-700"
                 } text-white rounded`}
               >
                 {isExporting ? (
                   <>
-                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    <svg
+                      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
                     </svg>
                     Gerando PDF...
                   </>
@@ -208,7 +236,7 @@ export function DocumentoViewer({ documento, isOpen, onClose }: DocumentoViewerP
             <div className="max-w-[21cm] mx-auto bg-white shadow-lg p-8">
               <div className="text-center mb-8 pb-4 border-b">
                 <h2 className="text-xl font-bold">
-                  {documento?.escritorio?.nome || 'Nome do Escritório'}
+                  {documento?.escritorio?.nome || "Nome do Escritório"}
                 </h2>
               </div>
 
@@ -218,8 +246,10 @@ export function DocumentoViewer({ documento, isOpen, onClose }: DocumentoViewerP
               />
 
               <div className="text-center mt-8 pt-4 border-t text-sm text-gray-600">
-                {documento?.escritorio?.endereco}<br/>
-                {documento?.escritorio?.telefone} | {documento?.escritorio?.email}
+                {documento?.escritorio?.endereco}
+                <br />
+                {documento?.escritorio?.telefone} |{" "}
+                {documento?.escritorio?.email}
               </div>
             </div>
           </div>

src/components/documentos/DocumentosPage.tsx

@@ -1,13 +1,21 @@
-import { useState, useEffect, useCallback } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
-import { DocumentIcon, PlusIcon, TrashIcon, EyeIcon, CogIcon } from '@heroicons/react/24/outline';
-import { DocumentoEditor } from './DocumentoEditor';
-import { api } from '../lib/api';
-import { toast } from 'react-toastify';
-import { useAuth } from '../contexts/AuthContext';
-import { Dialog } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import { DocumentoViewer } from './DocumentoViewer';
+import { Dialog } from "@headlessui/react";
+import {
+  DocumentIcon,
+  PlusIcon,
+  TrashIcon,
+  EyeIcon,
+  CogIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useNavigate, Link } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { useAuth } from "../contexts/AuthContext";
+import { api } from "../lib/api";
+
+import { DocumentoEditor } from "./DocumentoEditor";
+import { DocumentoViewer } from "./DocumentoViewer";
 
 export function DocumentosPage() {
   const [isEditorOpen, setIsEditorOpen] = useState(false);
@@ -23,7 +31,7 @@ export function DocumentosPage() {
 
   const loadData = useCallback(async () => {
     if (!user) {
-      navigate('/login');
+      navigate("/login");
       return;
     }
 
@@ -31,12 +39,12 @@ export function DocumentosPage() {
       setIsLoading(true);
       await Promise.all([loadDocumentos(), loadModelos()]);
     } catch (error) {
-      console.error('Erro ao carregar dados:', error);
+      console.error("Erro ao carregar dados:", error);
       if (error?.response?.status === 401) {
         signOut(); // Usar a função do AuthContext
-        navigate('/login');
+        navigate("/login");
       } else {
-        toast.error('Erro ao carregar dados');
+        toast.error("Erro ao carregar dados");
       }
     } finally {
       setIsLoading(false);
@@ -52,12 +60,12 @@ export function DocumentosPage() {
     if (processoId) params.processoId = processoId;
     if (atendimentoId) params.atendimentoId = atendimentoId;
 
-    const response = await api.get('/documentos', { params });
+    const response = await api.get("/documentos", { params });
     setDocumentos(response.data);
   };
 
   const loadModelos = async () => {
-    const response = await api.get('/documentos-modelos');
+    const response = await api.get("/documentos-modelos");
     setModelos(response.data);
   };
 
@@ -66,16 +74,16 @@ export function DocumentosPage() {
       if (processoId) data.processoId = processoId;
       if (atendimentoId) data.atendimentoId = atendimentoId;
 
-      await api.post('/documentos', data);
-      toast.success('Documento salvo com sucesso');
+      await api.post("/documentos", data);
+      toast.success("Documento salvo com sucesso");
       await loadDocumentos();
       setIsEditorOpen(false);
     } catch (error) {
-      console.error('Erro ao salvar documento:', error);
+      console.error("Erro ao salvar documento:", error);
       if (error?.response?.status === 401) {
-        toast.error('Sessão expirada. Por favor, faça login novamente.');
+        toast.error("Sessão expirada. Por favor, faça login novamente.");
       } else {
-        toast.error('Erro ao salvar documento');
+        toast.error("Erro ao salvar documento");
       }
     }
   };
@@ -83,30 +91,30 @@ export function DocumentosPage() {
   const handleDeleteDocumento = async (id) => {
     try {
       await api.delete(`/documentos/${id}`);
-      toast.success('Documento excluído com sucesso');
+      toast.success("Documento excluído com sucesso");
       await loadDocumentos();
     } catch (error) {
-      console.error('Erro ao excluir documento:', error);
+      console.error("Erro ao excluir documento:", error);
       if (error?.response?.status === 401) {
-        toast.error('Sessão expirada. Por favor, faça login novamente.');
+        toast.error("Sessão expirada. Por favor, faça login novamente.");
       } else {
-        toast.error('Erro ao excluir documento');
+        toast.error("Erro ao excluir documento");
       }
     }
   };
 
   const handleVisualizar = async (documento) => {
     try {
-      const configRes = await api.get('/documentos/configuracoes');
+      const configRes = await api.get("/documentos/configuracoes");
 
       setDocumentoVisualizado({
         ...documento,
-        escritorio: configRes.data
+        escritorio: configRes.data,
       });
       setVisualizadorOpen(true);
     } catch (error) {
-      console.error('Erro ao visualizar documento:', error);
-      toast.error('Erro ao visualizar documento');
+      console.error("Erro ao visualizar documento:", error);
+      toast.error("Erro ao visualizar documento");
     }
   };
 
@@ -126,17 +134,17 @@ export function DocumentosPage() {
             <PlusIcon className="w-5 h-5 mr-2" />
             Novo Documento
           </button>
-          {user?.perfil === 'ADVOGADO_ADMIN' && (
+          {user?.perfil === "ADVOGADO_ADMIN" && (
             <>
               <button
-                onClick={() => navigate('/documentos/templates')}
+                onClick={() => navigate("/documentos/templates")}
                 className="inline-flex items-center px-4 py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 transition-colors"
               >
                 <DocumentIcon className="w-5 h-5 mr-2" />
                 Gerenciar Templates
               </button>
               <button
-                onClick={() => navigate('/documentos/configuracoes')}
+                onClick={() => navigate("/documentos/configuracoes")}
                 className="inline-flex items-center px-4 py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 transition-colors"
               >
                 <CogIcon className="w-5 h-5 mr-2" />
@@ -153,8 +161,8 @@ export function DocumentosPage() {
             onClick={() => setTabValue(0)}
             className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors duration-200 ${
               tabValue === 0
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                ? "border-blue-500 text-blue-600"
+                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
             }`}
           >
             Documentos
@@ -163,8 +171,8 @@ export function DocumentosPage() {
             onClick={() => setTabValue(1)}
             className={`ml-8 px-4 py-2 font-medium text-sm border-b-2 transition-colors duration-200 ${
               tabValue === 1
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                ? "border-blue-500 text-blue-600"
+                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
             }`}
           >
             Modelos
@@ -175,11 +183,16 @@ export function DocumentosPage() {
       {tabValue === 0 && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {documentos.map((doc) => (
-            <div key={doc.id} className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div
+              key={doc.id}
+              className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
+            >
               <div className="p-4">
                 <div className="flex items-center mb-3">
                   <DocumentIcon className="w-6 h-6 text-gray-500 mr-2" />
-                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">{doc.nome}</h3>
+                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">
+                    {doc.nome}
+                  </h3>
                 </div>
                 <p className="text-sm text-gray-600 dark:text-gray-400">
                   Criado em: {new Date(doc.criadoEm).toLocaleDateString()}
@@ -209,16 +222,21 @@ export function DocumentosPage() {
       {tabValue === 1 && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {modelos.map((modelo) => (
-            <div key={modelo.id} className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div
+              key={modelo.id}
+              className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
+            >
               <div className="p-4">
                 <div className="flex items-center mb-3">
                   <DocumentIcon className="w-6 h-6 text-gray-500 mr-2" />
-                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">{modelo.nome}</h3>
+                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">
+                    {modelo.nome}
+                  </h3>
                 </div>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{modelo.descricao}</p>
-                <button
-                  className="w-full inline-flex items-center justify-center px-4 py-2 text-sm border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/20"
-                >
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                  {modelo.descricao}
+                </p>
+                <button className="w-full inline-flex items-center justify-center px-4 py-2 text-sm border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/20">
                   Usar Modelo
                 </button>
               </div>

src/components/documentos/GerenciarTemplates.tsx

@@ -1,10 +1,16 @@
-import { useState, useEffect } from 'react';
-import { api } from '../../lib/api';
-import { Editor } from '@tinymce/tinymce-react';
-import { toast } from 'react-toastify';
-import { Dialog } from '@headlessui/react';
-import { DocumentIcon, PencilIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
-import { DOCUMENT_VARIABLES } from '../../utils/documentVariables';
+import { Dialog } from "@headlessui/react";
+import {
+  DocumentIcon,
+  PencilIcon,
+  TrashIcon,
+  PlusIcon,
+} from "@heroicons/react/24/outline";
+import { Editor } from "@tinymce/tinymce-react";
+import { useState, useEffect } from "react";
+import { toast } from "react-toastify";
+
+import { api } from "../../lib/api";
+import { DOCUMENT_VARIABLES } from "../../utils/documentVariables";
 
 export function GerenciarTemplates() {
   const [templates, setTemplates] = useState([]);
@@ -12,19 +18,19 @@ export function GerenciarTemplates() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isEditorModalOpen, setEditorModalOpen] = useState(false);
   const [formData, setFormData] = useState({
-    nome: '',
-    tipo: 'OUTROS',
-    descricao: '',
-    conteudo: '',
-    variaveis: []
+    nome: "",
+    tipo: "OUTROS",
+    descricao: "",
+    conteudo: "",
+    variaveis: [],
   });
 
   const loadTemplates = async () => {
     try {
-      const response = await api.get('/documentos-modelos');
+      const response = await api.get("/documentos-modelos");
       setTemplates(response.data);
     } catch (error) {
-      toast.error('Erro ao carregar templates');
+      toast.error("Erro ao carregar templates");
     }
   };
 
@@ -36,15 +42,15 @@ export function GerenciarTemplates() {
     try {
       if (editingTemplate) {
         await api.put(`/documentos-modelos/${editingTemplate.id}`, data);
-        toast.success('Template atualizado com sucesso');
+        toast.success("Template atualizado com sucesso");
       } else {
-        await api.post('/documentos-modelos', data);
-        toast.success('Template criado com sucesso');
+        await api.post("/documentos-modelos", data);
+        toast.success("Template criado com sucesso");
       }
       loadTemplates();
       setIsModalOpen(false);
     } catch (error) {
-      toast.error('Erro ao salvar template');
+      toast.error("Erro ao salvar template");
     }
   };
 
@@ -55,35 +61,35 @@ export function GerenciarTemplates() {
       if (editingTemplate) {
         await api.put(`/documentos-modelos/${editingTemplate.id}`, {
           ...formData,
-          id: editingTemplate.id // Garantir que o ID seja enviado
+          id: editingTemplate.id, // Garantir que o ID seja enviado
         });
-        toast.success('Template atualizado com sucesso');
+        toast.success("Template atualizado com sucesso");
       } else {
-        await api.post('/documentos-modelos', formData);
-        toast.success('Template criado com sucesso');
+        await api.post("/documentos-modelos", formData);
+        toast.success("Template criado com sucesso");
       }
 
       setEditorModalOpen(false);
       setEditingTemplate(null);
       await loadTemplates(); // Recarregar a lista após salvar
     } catch (error) {
-      console.error('Erro ao salvar template:', error);
-      toast.error('Erro ao salvar template');
+      console.error("Erro ao salvar template:", error);
+      toast.error("Erro ao salvar template");
     }
   };
 
   const handleDelete = async (templateId: string) => {
-    if (!window.confirm('Tem certeza que deseja excluir este template?')) {
+    if (!window.confirm("Tem certeza que deseja excluir este template?")) {
       return;
     }
 
     try {
       await api.delete(`/documentos-modelos/${templateId}`);
-      toast.success('Template excluído com sucesso');
+      toast.success("Template excluído com sucesso");
       loadTemplates();
     } catch (error) {
-      console.error('Erro ao excluir template:', error);
-      toast.error('Erro ao excluir template');
+      console.error("Erro ao excluir template:", error);
+      toast.error("Erro ao excluir template");
     }
   };
 
@@ -98,7 +104,7 @@ export function GerenciarTemplates() {
     setEditingTemplate(template); // Guardar o template completo
     setFormData({
       ...template,
-      id: template.id // Garantir que o ID seja mantido
+      id: template.id, // Garantir que o ID seja mantido
     });
     setEditorModalOpen(true);
   };
@@ -110,11 +116,11 @@ export function GerenciarTemplates() {
         <button
           onClick={() => {
             setFormData({
-              nome: '',
-              tipo: 'OUTROS',
-              descricao: '',
-              conteudo: '',
-              variaveis: []
+              nome: "",
+              tipo: "OUTROS",
+              descricao: "",
+              conteudo: "",
+              variaveis: [],
             });
             setEditorModalOpen(true);
           }}
@@ -127,12 +133,17 @@ export function GerenciarTemplates() {
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {templates.map((template) => (
-          <div key={template.id} className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+          <div
+            key={template.id}
+            className="bg-white dark:bg-gray-800 rounded-lg shadow p-4"
+          >
             <div className="flex items-center mb-3">
               <DocumentIcon className="w-6 h-6 text-gray-500 mr-2" />
               <h3 className="font-semibold">{template.nome}</h3>
             </div>
-            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{template.descricao}</p>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              {template.descricao}
+            </p>
             <div className="flex gap-2">
               <button
                 onClick={() => handleEdit(template)}
@@ -154,14 +165,18 @@ export function GerenciarTemplates() {
       </div>
 
       {/* Modal de Edição */}
-      <Dialog open={isEditorModalOpen} onClose={() => setEditorModalOpen(false)} className="relative z-50">
+      <Dialog
+        open={isEditorModalOpen}
+        onClose={() => setEditorModalOpen(false)}
+        className="relative z-50"
+      >
         <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
         <div className="fixed inset-0 flex items-center justify-center p-4 overflow-y-auto">
           <Dialog.Panel className="w-full max-w-4xl bg-white rounded-lg shadow-xl my-4">
             <div className="max-h-[90vh] overflow-y-auto">
               <form onSubmit={handleSubmit} className="p-6">
                 <h2 className="text-xl font-bold mb-4">
-                  {editingTemplate ? 'Editar Template' : 'Novo Template'}
+                  {editingTemplate ? "Editar Template" : "Novo Template"}
                 </h2>
 
                 <div className="space-y-4">
@@ -170,7 +185,9 @@ export function GerenciarTemplates() {
                     <input
                       type="text"
                       value={formData.nome}
-                      onChange={(e) => setFormData({...formData, nome: e.target.value})}
+                      onChange={(e) =>
+                        setFormData({ ...formData, nome: e.target.value })
+                      }
                       className="w-full p-2 border rounded"
                       required
                     />
@@ -180,7 +197,9 @@ export function GerenciarTemplates() {
                     <label className="block mb-1">Tipo</label>
                     <select
                       value={formData.tipo}
-                      onChange={(e) => setFormData({...formData, tipo: e.target.value})}
+                      onChange={(e) =>
+                        setFormData({ ...formData, tipo: e.target.value })
+                      }
                       className="w-full p-2 border rounded"
                     >
                       <option value="PETICAO">Petição</option>
@@ -195,7 +214,9 @@ export function GerenciarTemplates() {
                     <label className="block mb-1">Descrição</label>
                     <textarea
                       value={formData.descricao}
-                      onChange={(e) => setFormData({...formData, descricao: e.target.value})}
+                      onChange={(e) =>
+                        setFormData({ ...formData, descricao: e.target.value })
+                      }
                       className="w-full p-2 border rounded"
                       rows={3}
                     />
@@ -204,21 +225,27 @@ export function GerenciarTemplates() {
                   <div className="mb-4">
                     <label className="block mb-1">Variáveis Disponíveis</label>
                     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 p-2 border rounded bg-gray-50">
-                      {Object.entries(DOCUMENT_VARIABLES).map(([category, variables]) => (
+                      {Object.entries(DOCUMENT_VARIABLES).map(
+                        ([category, variables]) => (
                           <div key={category} className="space-y-1">
-                          <h4 className="font-bold text-sm text-gray-700">{category}</h4>
-                          {Object.entries(variables).map(([name, variable]) => (
+                            <h4 className="font-bold text-sm text-gray-700">
+                              {category}
+                            </h4>
+                            {Object.entries(variables).map(
+                              ([name, variable]) => (
                                 <button
                                   key={name}
                                   type="button"
                                   onClick={() => insertVariable(variable)}
                                   className="text-xs text-blue-600 hover:text-blue-800 block"
                                 >
-                              {name.replace(/_/g, ' ')}
+                                  {name.replace(/_/g, " ")}
                                 </button>
-                          ))}
+                              ),
+                            )}
                           </div>
-                      ))}
+                        ),
+                      )}
                     </div>
                   </div>
 
@@ -227,31 +254,50 @@ export function GerenciarTemplates() {
                     <Editor
                       apiKey={import.meta.env.VITE_TINYMCE_API_KEY}
                       value={formData.conteudo}
-                      onEditorChange={(content) => setFormData({...formData, conteudo: content})}
+                      onEditorChange={(content) =>
+                        setFormData({ ...formData, conteudo: content })
+                      }
                       init={{
                         height: 400,
                         menubar: true,
                         plugins: [
-                          'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
-                          'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
-                          'insertdatetime', 'media', 'table', 'help', 'wordcount'
+                          "advlist",
+                          "autolink",
+                          "lists",
+                          "link",
+                          "image",
+                          "charmap",
+                          "preview",
+                          "anchor",
+                          "searchreplace",
+                          "visualblocks",
+                          "code",
+                          "fullscreen",
+                          "insertdatetime",
+                          "media",
+                          "table",
+                          "help",
+                          "wordcount",
                         ],
-                        toolbar: 'variables | undo redo | formatselect | bold italic | alignleft aligncenter alignright',
+                        toolbar:
+                          "variables | undo redo | formatselect | bold italic | alignleft aligncenter alignright",
                         setup: (editor) => {
-                          editor.ui.registry.addMenuButton('variables', {
-                            text: 'Variáveis',
+                          editor.ui.registry.addMenuButton("variables", {
+                            text: "Variáveis",
                             fetch: (callback) => {
-                              const items = Object.entries(DOCUMENT_VARIABLES).flatMap(([category, vars]) =>
+                              const items = Object.entries(
+                                DOCUMENT_VARIABLES,
+                              ).flatMap(([category, vars]) =>
                                 Object.entries(vars).map(([name, value]) => ({
-                                  type: 'menuitem',
-                                  text: `${category} - ${name.replace(/_/g, ' ')}`,
-                                  onAction: () => editor.insertContent(value)
-                                }))
+                                  type: "menuitem",
+                                  text: `${category} - ${name.replace(/_/g, " ")}`,
+                                  onAction: () => editor.insertContent(value),
+                                })),
                               );
                               callback(items);
-                            }
+                            },
                           });
-                        }
+                        },
                       }}
                     />
                   </div>

src/components/documentos/NovoDocumento.tsx

@@ -1,6 +1,7 @@
-import { useState } from 'react';
-import { DocumentoService } from '../../services/DocumentoService';
-import { TIPOS_DOCUMENTO } from '../../utils/documentTemplates';
+import { useState } from "react";
+
+import { DocumentoService } from "../../services/DocumentoService";
+import { TIPOS_DOCUMENTO } from "../../utils/documentTemplates";
 
 export function NovoDocumento() {
   const [tipo, setTipo] = useState(TIPOS_DOCUMENTO.PROCURACAO);
@@ -8,24 +9,24 @@ export function NovoDocumento() {
   const handleGerar = async () => {
     // 1. Buscar dados necessários
     const cliente = await api.get(`/clientes/${clienteId}`);
-    const advogado = await api.get('/usuarios/me');
+    const advogado = await api.get("/usuarios/me");
 
     // 2. Preparar variáveis
     const variaveis = {
       cliente: cliente.data,
       advogado: advogado.data,
-      cidade: 'São Paulo',
-      data: new Date().toLocaleDateString()
+      cidade: "São Paulo",
+      data: new Date().toLocaleDateString(),
     };
 
     // 3. Buscar configurações do escritório
-    const config = await api.get('/configuracoes');
+    const config = await api.get("/configuracoes");
 
     // 4. Gerar documento
     const documento = DocumentoService.gerarDocumento({
       tipo,
       variaveis,
-      config: config.data
+      config: config.data,
     });
 
     // 5. Salvar ou exibir
@@ -34,15 +35,13 @@ export function NovoDocumento() {
 
   return (
     <div>
-      <select value={tipo} onChange={e => setTipo(e.target.value)}>
+      <select value={tipo} onChange={(e) => setTipo(e.target.value)}>
         <option value={TIPOS_DOCUMENTO.PROCURACAO}>Procuração</option>
         <option value={TIPOS_DOCUMENTO.CONTRATO}>Contrato</option>
         {/* ... */}
       </select>
 
-      <button onClick={handleGerar}>
-        Gerar Documento
-      </button>
+      <button onClick={handleGerar}>Gerar Documento</button>
     </div>
   );
 }

src/components/forms/FormInput.tsx

@@ -8,7 +8,7 @@ interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 
 export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
   ({ label, error, className = "", multiline, ...props }, ref) => {
-    const Component = multiline ? 'textarea' : 'input';
+    const Component = multiline ? "textarea" : "input";
 
     return (
       <div className={`${className} relative`}>
@@ -37,7 +37,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 FormInput.displayName = "FormInput";

src/components/forms/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef } from "react";
 
 export const FormInput = forwardRef<HTMLInputElement, any>(
   ({ label, error, className = "", ...props }, ref) => (
@@ -26,7 +26,7 @@ export const FormInput = forwardRef<HTMLInputElement, any>(
         <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
       )}
     </div>
-  )
+  ),
 );
 
 export const FormSelect = forwardRef<HTMLSelectElement, any>(
@@ -52,9 +52,15 @@ export const FormSelect = forwardRef<HTMLSelectElement, any>(
       `}
         {...props}
       >
-        <option value="" className="dark:bg-gray-700">Selecione...</option>
+        <option value="" className="dark:bg-gray-700">
+          Selecione...
+        </option>
         {options?.map((opt: any) => (
-          <option key={opt.value} value={opt.value} className="dark:bg-gray-700">
+          <option
+            key={opt.value}
+            value={opt.value}
+            className="dark:bg-gray-700"
+          >
             {opt.label}
           </option>
         ))}

src/components/layouts/MainLayout.tsx

@@ -1,6 +1,4 @@
-import React, { useState, Fragment, useEffect, useRef } from "react";
-import { Outlet, Link, useLocation } from "react-router-dom";
-import { useAuth } from "../../contexts/AuthContext";
+import { Menu, Transition } from "@headlessui/react";
 import {
   BellIcon,
   ChevronDownIcon,
@@ -18,15 +16,18 @@ import {
   CurrencyDollarIcon,
   CalculatorIcon,
 } from "@heroicons/react/24/outline";
-import { Menu, Transition } from "@headlessui/react";
-import api from "../../services/api";
+import CalculateIcon from "@mui/icons-material/Calculate";
+import ChildCareIcon from "@mui/icons-material/ChildCare";
+import MoneyIcon from "@mui/icons-material/Money";
+import React, { useState, Fragment, useEffect, useRef } from "react";
+import { Outlet, Link, useLocation } from "react-router-dom";
+
+import { useAuth } from "../../contexts/AuthContext";
 import { useTheme } from "../../contexts/ThemeContext";
+import api from "../../services/api";
 
 // Importando o ícone para cálculos judiciais
-import CalculateIcon from '@mui/icons-material/Calculate';
 // Importar ícones específicos para subcategorias de cálculos
-import MoneyIcon from '@mui/icons-material/Money';
-import ChildCareIcon from '@mui/icons-material/ChildCare';
 
 export const MainLayout: React.FC = () => {
   const [isSidebarOpen, setSidebarOpen] = useState(true);
@@ -66,18 +67,18 @@ export const MainLayout: React.FC = () => {
       icon: DocumentCheckIcon,
       subitems: [
         {
-          path: '/provas/upload', 
-          label: 'Upload', 
+          path: "/provas/upload",
+          label: "Upload",
           roles: [],
-          icon: ArrowUpTrayIcon
+          icon: ArrowUpTrayIcon,
         },
         {
-          path: '/provas/admin', 
-          label: 'Admin', 
-          roles: ['ADVOGADO_ADMIN'],
-          icon: ShieldCheckIcon
-        }
-      ]
+          path: "/provas/admin",
+          label: "Admin",
+          roles: ["ADVOGADO_ADMIN"],
+          icon: ShieldCheckIcon,
+        },
+      ],
     },
     { path: "/clientes", label: "Clientes", icon: UserGroupIcon },
     { path: "/atendimentos", label: "Atendimentos", icon: UserIcon },
@@ -87,28 +88,28 @@ export const MainLayout: React.FC = () => {
       path: null,
       label: "Cálculos",
       icon: CalculateIcon,
-      roles: ['ADVOGADO_ADMIN', 'ADVOGADO', 'ASSISTENTE'],
+      roles: ["ADVOGADO_ADMIN", "ADVOGADO", "ASSISTENTE"],
       subitems: [
         {
-          path: '/calculos',
-          label: 'Dashboard',
-          roles: ['ADVOGADO_ADMIN', 'ADVOGADO', 'ASSISTENTE'],
-          icon: HomeIcon
+          path: "/calculos",
+          label: "Dashboard",
+          roles: ["ADVOGADO_ADMIN", "ADVOGADO", "ASSISTENTE"],
+          icon: HomeIcon,
         },
         {
-          path: '/calculos/pensao-alimenticia',
-          label: 'Pensão Alimentícia',
-          roles: ['ADVOGADO_ADMIN', 'ADVOGADO', 'ASSISTENTE'],
-          icon: ChildCareIcon
+          path: "/calculos/pensao-alimenticia",
+          label: "Pensão Alimentícia",
+          roles: ["ADVOGADO_ADMIN", "ADVOGADO", "ASSISTENTE"],
+          icon: ChildCareIcon,
         },
         {
-          path: '/calculos/trabalhistas',
-          label: 'Trabalhistas',
-          roles: ['ADVOGADO_ADMIN', 'ADVOGADO', 'ASSISTENTE'],
-          icon: MoneyIcon
-        }
-      ]
-    }
+          path: "/calculos/trabalhistas",
+          label: "Trabalhistas",
+          roles: ["ADVOGADO_ADMIN", "ADVOGADO", "ASSISTENTE"],
+          icon: MoneyIcon,
+        },
+      ],
+    },
   ];
 
   // Função para verificar se o caminho atual corresponde ao item do menu
@@ -128,7 +129,10 @@ export const MainLayout: React.FC = () => {
     const menuItem = document.querySelector(`[data-menu-label="${menuLabel}"]`);
     if (menuItem) {
       const rect = menuItem.getBoundingClientRect();
-      document.documentElement.style.setProperty('--menu-item-top', `${rect.top}px`);
+      document.documentElement.style.setProperty(
+        "--menu-item-top",
+        `${rect.top}px`,
+      );
     }
   };
 
@@ -169,10 +173,7 @@ export const MainLayout: React.FC = () => {
         <nav className="flex-1 overflow-y-auto">
           <div className="py-4">
             {menuItems.map((item, index) => (
-              <div 
-                key={item.path || item.label} 
-                className="px-2 mb-2"
-              >
+              <div key={item.path || item.label} className="px-2 mb-2">
                 {!item.subitems ? (
                   <Link
                     to={item.path}
@@ -184,7 +185,9 @@ export const MainLayout: React.FC = () => {
                     title={item.label}
                   >
                     <item.icon className="h-6 w-6 text-white opacity-80" />
-                    <span className="text-xs mt-1 text-white/80">{item.label}</span>
+                    <span className="text-xs mt-1 text-white/80">
+                      {item.label}
+                    </span>
                   </Link>
                 ) : (
                   <div
@@ -195,14 +198,18 @@ export const MainLayout: React.FC = () => {
                   >
                     <div
                       className={`flex flex-col items-center justify-center p-3 rounded-lg transition-colors hover:bg-white/10 cursor-pointer ${
-                        item.subitems.some(subitem => isCurrentPath(subitem.path))
+                        item.subitems.some((subitem) =>
+                          isCurrentPath(subitem.path),
+                        )
                           ? "bg-white/20"
                           : ""
                       }`}
                       title={item.label}
                     >
                       <item.icon className="h-6 w-6 text-white opacity-80" />
-                      <span className="text-xs mt-1 text-white/80">{item.label}</span>
+                      <span className="text-xs mt-1 text-white/80">
+                        {item.label}
+                      </span>
                     </div>
                   </div>
                 )}
@@ -213,24 +220,26 @@ export const MainLayout: React.FC = () => {
 
         {/* Submenus renderizados fora da estrutura do menu principal */}
         {menuItems
-          .filter(item => item.subitems)
-          .map(item => (
+          .filter((item) => item.subitems)
+          .map((item) => (
             <div
               key={`submenu-${item.label}`}
-              className={`fixed left-20 z-50 ${activeSubmenu === item.label ? 'block' : 'hidden'}`}
-              style={{ top: 'var(--menu-item-top, 0)' }}
+              className={`fixed left-20 z-50 ${activeSubmenu === item.label ? "block" : "hidden"}`}
+              style={{ top: "var(--menu-item-top, 0)" }}
               onMouseEnter={handleSubmenuMouseEnter}
               onMouseLeave={handleMenuMouseLeave}
             >
               <div
                 className="transition-all duration-200 ml-2"
-                style={{ transformOrigin: 'left center' }}
+                style={{ transformOrigin: "left center" }}
               >
                 <div className="bg-blue-800/95 backdrop-blur-sm rounded-lg py-2 px-1 shadow-xl w-[140px] border border-blue-700/30">
                   {item.subitems
-                    .filter(subitem => 
+                    .filter(
+                      (subitem) =>
                         !subitem.roles?.length ||
-                      (userProfile?.perfil && subitem.roles.includes(userProfile.perfil))
+                        (userProfile?.perfil &&
+                          subitem.roles.includes(userProfile.perfil)),
                     )
                     .map((subitem) => (
                       <Link
@@ -242,7 +251,9 @@ export const MainLayout: React.FC = () => {
                       >
                         <div className="flex items-center space-x-2">
                           <subitem.icon className="h-5 w-5 text-white opacity-80" />
-                          <span className="text-sm text-white/90">{subitem.label}</span>
+                          <span className="text-sm text-white/90">
+                            {subitem.label}
+                          </span>
                         </div>
                       </Link>
                     ))}
@@ -295,7 +306,9 @@ export const MainLayout: React.FC = () => {
                     <div className="text-sm font-medium text-gray-700 dark:text-gray-200">
                       {user?.nome}
                     </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400">{user?.cargo}</div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400">
+                      {user?.cargo}
+                    </div>
                   </div>
                   <ChevronDownIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
                 </Menu.Button>

src/components/perfil/PerfilPage.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react";
+
 import { useAuth } from "../../contexts/AuthContext";
-import { Usuario } from "../../types/usuario";
 import api from "../../services/api";
+import { Usuario } from "../../types/usuario";
 import { UF_BRASIL } from "../../utils/constants/estados";
 
 export function PerfilPage() {

src/components/processos/AbaFinanceiro.tsx

@@ -1,11 +1,12 @@
-import { useState, lazy, Suspense, useEffect } from "react";
 import { Tab } from "@headlessui/react";
 import { PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { formatCurrency, formatDate } from "../../utils/format";
+import { useState, lazy, Suspense, useEffect } from "react";
+
+import { useProcessoContext } from "../../context/ProcessoContext";
 import { useCustasProcessuais } from "../../hooks/useCustasProcessuais";
 import { useHonorarios } from "../../hooks/useHonorarios";
-import { useProcessoContext } from "../../context/ProcessoContext";
 import api from "../../services/api"; // Adicionar esta importação
+import { formatCurrency, formatDate } from "../../utils/format";
 
 // Corrigir importações lazy
 const DialogCustaProcessual = lazy(() =>

src/components/processos/AbaInformacoes.tsx

@@ -1,6 +1,6 @@
+import { format, ptBR } from "date-fns";
+
 import { useProcessoContext } from "../../context/ProcessoContext";
-import { format } from "date-fns";
-import { ptBR } from "date-fns/locale";
 
 export function AbaInformacoes() {
   const { processo } = useProcessoContext();

src/components/processos/AbaMovimentacoes.tsx

@@ -1,8 +1,8 @@
+import { ClockIcon, DocumentIcon } from "@heroicons/react/24/outline";
+import { format, ptBR } from "date-fns";
+
 import { useProcessoContext } from "../../context/ProcessoContext";
 import { useProcessoMovimentacoes } from "../../hooks/useProcessoMovimentacoes";
-import { format } from "date-fns";
-import { ptBR } from "date-fns/locale";
-import { ClockIcon, DocumentIcon } from "@heroicons/react/24/outline";
 
 export default function AbaMovimentacoes() {
   const { processo } = useProcessoContext();

src/components/processos/AudienciaModal.tsx

@@ -1,6 +1,7 @@
-import React from "react";
 import { Dialog } from "@headlessui/react";
+import React from "react";
 import { useForm } from "react-hook-form";
+
 import { FormSelect, FormInput } from "../forms";
 
 const TIPOS_AUDIENCIA = [

src/components/processos/DialogCustaProcessual.tsx

@@ -6,12 +6,12 @@ import {
   Box,
   Typography,
 } from "@mui/material";
-import { useState, useEffect } from "react";
-import { TipoCustaProcessual, StatusPagamento } from "@prisma/client";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { TipoCustaProcessual, StatusPagamento } from "@prisma/client";
 import ptBR from "date-fns/locale/pt-BR";
+import { useState, useEffect } from "react";
 
 interface DialogCustaProcessualProps {
   open: boolean;

src/components/processos/DialogHonorario.tsx

@@ -9,12 +9,13 @@ import {
   Select,
   Typography,
 } from "@mui/material";
-import { useState, useEffect } from "react";
-import { FormaPagamento, StatusPagamento } from "@prisma/client";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { FormaPagamento, StatusPagamento } from "@prisma/client";
 import ptBR from "date-fns/locale/pt-BR";
+import { useState, useEffect } from "react";
+
 import { IHonorario, IHonorarioCreate } from "../types/financeiro";
 
 interface DialogHonorarioProps {

src/components/processos/MovimentacoesTimeline.tsx

@@ -1,5 +1,5 @@
-import { format } from "date-fns";
-import { ptBR } from "date-fns/locale";
+import { format, ptBR } from "date-fns";
+
 import { useProcessoMovimentacoes } from "../../hooks/useProcessoMovimentacoes";
 
 interface MovimentacoesTimelineProps {

src/components/processos/ParteProcessoModal.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
 import { Dialog } from "@headlessui/react";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+
 import { useClientes } from "../../hooks/useClientes";
 import { FormSelect, FormInput } from "../forms";
-import { useForm } from "react-hook-form";
 
 interface ParteProcessoModalProps {
   isOpen: boolean;

src/components/processos/ProcessoCard.tsx

@@ -1,24 +1,25 @@
-import React from 'react';
-import { Processo } from '../../types/entities';
+import React from "react";
+
+import { Processo } from "../../types/entities";
 
 interface ProcessoCardProps {
   processo: Processo;
 }
 
 const resultadoLabel = {
-  NAO_JULGADO: 'Não Julgado',
-  PROCEDENTE: 'Procedente',
-  PARCIALMENTE_PROCEDENTE: 'Parcialmente Procedente',
-  IMPROCEDENTE: 'Improcedente',
-  SEM_ANALISE_MERITO: 'Sem Análise de Mérito'
+  NAO_JULGADO: "Não Julgado",
+  PROCEDENTE: "Procedente",
+  PARCIALMENTE_PROCEDENTE: "Parcialmente Procedente",
+  IMPROCEDENTE: "Improcedente",
+  SEM_ANALISE_MERITO: "Sem Análise de Mérito",
 };
 
 const resultadoColor = {
-  NAO_JULGADO: 'bg-gray-100 text-gray-800',
-  PROCEDENTE: 'bg-green-100 text-green-800',
-  PARCIALMENTE_PROCEDENTE: 'bg-yellow-100 text-yellow-800',
-  IMPROCEDENTE: 'bg-red-100 text-red-800',
-  SEM_ANALISE_MERITO: 'bg-gray-100 text-gray-800'
+  NAO_JULGADO: "bg-gray-100 text-gray-800",
+  PROCEDENTE: "bg-green-100 text-green-800",
+  PARCIALMENTE_PROCEDENTE: "bg-yellow-100 text-yellow-800",
+  IMPROCEDENTE: "bg-red-100 text-red-800",
+  SEM_ANALISE_MERITO: "bg-gray-100 text-gray-800",
 };
 
 export const ProcessoCard: React.FC<ProcessoCardProps> = ({ processo }) => {
@@ -40,16 +41,21 @@ export const ProcessoCard: React.FC<ProcessoCardProps> = ({ processo }) => {
         {processo.status}
       </p>
       <p className="text-sm text-gray-500 dark:text-gray-400">
-        {processo.valorCausa?.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
+        {processo.valorCausa?.toLocaleString("pt-BR", {
+          style: "currency",
+          currency: "BRL",
+        })}
       </p>
       <p className="text-sm text-gray-500 dark:text-gray-400">
-        {new Date(processo.dataCriacao).toLocaleDateString('pt-BR')}
+        {new Date(processo.dataCriacao).toLocaleDateString("pt-BR")}
       </p>
       <p className="text-sm text-gray-500 dark:text-gray-400">
-        {new Date(processo.dataAtualizacao).toLocaleDateString('pt-BR')}
+        {new Date(processo.dataAtualizacao).toLocaleDateString("pt-BR")}
       </p>
       <div className="mt-2">
-        <span className={`px-2 py-1 text-xs rounded-full ${resultadoColor[processo.resultado]}`}>
+        <span
+          className={`px-2 py-1 text-xs rounded-full ${resultadoColor[processo.resultado]}`}
+        >
           {resultadoLabel[processo.resultado]}
         </span>
       </div>

src/components/processos/ProcessoDetalhes.tsx

@@ -1,10 +1,6 @@
-import React, { useState, useEffect, lazy, Suspense } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useProcessos } from "../../hooks/useProcessos";
-import api from "../../services/api"; // Adicionar esta importação
 import { Tab, Dialog } from "@headlessui/react";
-import { TrashIcon } from "@heroicons/react/24/outline";
 import {
+  TrashIcon,
   ArrowLeftIcon,
   ClockIcon,
   DocumentTextIcon,
@@ -15,14 +11,20 @@ import {
   ExclamationTriangleIcon,
   PlusIcon,
 } from "@heroicons/react/24/outline";
-import { ProcessoModal } from "./ProcessoModal.tsx";
-import { formatNumeroProcesso, formatCPF } from "../../utils/formatters";
-import { ParteProcessoModal } from "./ParteProcessoModal";
-import { usePartesProcesso } from "../../hooks/usePartesProcesso";
-import { useAudiencias } from "../../hooks/useAudiencias";
-import { AudienciaModal } from "./AudienciaModal";
-import AbaFinanceiro from "./AbaFinanceiro";
+import React, { useState, useEffect, lazy, Suspense } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+
 import { ProcessoProvider } from "../../context/ProcessoContext";
+import { useAudiencias } from "../../hooks/useAudiencias";
+import { usePartesProcesso } from "../../hooks/usePartesProcesso";
+import { useProcessos } from "../../hooks/useProcessos";
+import api from "../../services/api"; // Adicionar esta importação
+import { formatNumeroProcesso, formatCPF } from "../../utils/formatters";
+
+import AbaFinanceiro from "./AbaFinanceiro";
+import { AudienciaModal } from "./AudienciaModal";
+import { ParteProcessoModal } from "./ParteProcessoModal";
+import { ProcessoModal } from "./ProcessoModal.tsx";
 
 // Adicionar lazy import para AbaMovimentacoes
 const AbaMovimentacoes = lazy(() => import("./AbaMovimentacoes"));
@@ -192,25 +194,27 @@ export const ProcessoDetalhes: React.FC = () => {
 
           {/* Adicionar o botão de resultado aqui */}
           <select
-            value={processo.resultado || 'NAO_JULGADO'}
+            value={processo.resultado || "NAO_JULGADO"}
             onChange={async (e) => {
               try {
                 await api.patch(`/processos/${processo.id}/resultado`, {
-                  resultado: e.target.value
+                  resultado: e.target.value,
                 });
                 // Recarregar dados após atualização
                 const updated = await getProcesso(processo.id);
                 setProcesso(updated);
               } catch (error) {
-                console.error('Erro ao atualizar resultado:', error);
-                alert('Erro ao atualizar resultado do processo');
+                console.error("Erro ao atualizar resultado:", error);
+                alert("Erro ao atualizar resultado do processo");
               }
             }}
             className="rounded-lg border-gray-300 text-sm"
           >
             <option value="NAO_JULGADO">Não Julgado</option>
             <option value="PROCEDENTE">Procedente</option>
-            <option value="PARCIALMENTE_PROCEDENTE">Parcialmente Procedente</option>
+            <option value="PARCIALMENTE_PROCEDENTE">
+              Parcialmente Procedente
+            </option>
             <option value="IMPROCEDENTE">Improcedente</option>
             <option value="SEM_ANALISE_MERITO">Sem Análise de Mérito</option>
           </select>

src/components/processos/ProcessoForm.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
-import { useForm } from 'react-hook-form';
-import { Processo } from '../../types/entities';
+import React from "react";
+import { useForm } from "react-hook-form";
+
+import { Processo } from "../../types/entities";
 
 interface ProcessoFormProps {
   onSubmit: (data: Partial<Processo>) => void;
@@ -8,14 +9,17 @@ interface ProcessoFormProps {
 }
 
 const resultadoOptions = [
-  { value: 'NAO_JULGADO', label: 'Não Julgado' },
-  { value: 'PROCEDENTE', label: 'Procedente' },
-  { value: 'PARCIALMENTE_PROCEDENTE', label: 'Parcialmente Procedente' },
-  { value: 'IMPROCEDENTE', label: 'Improcedente' },
-  { value: 'SEM_ANALISE_MERITO', label: 'Sem Análise de Mérito' }
+  { value: "NAO_JULGADO", label: "Não Julgado" },
+  { value: "PROCEDENTE", label: "Procedente" },
+  { value: "PARCIALMENTE_PROCEDENTE", label: "Parcialmente Procedente" },
+  { value: "IMPROCEDENTE", label: "Improcedente" },
+  { value: "SEM_ANALISE_MERITO", label: "Sem Análise de Mérito" },
 ];
 
-export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialData }) => {
+export const ProcessoForm: React.FC<ProcessoFormProps> = ({
+  onSubmit,
+  initialData,
+}) => {
   const { register, handleSubmit, reset } = useForm<Partial<Processo>>({
     defaultValues: initialData,
   });
@@ -28,7 +32,7 @@ export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialDat
             Número do Processo
           </label>
           <input
-            {...register('numero')}
+            {...register("numero")}
             className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
           />
         </div>
@@ -38,7 +42,7 @@ export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialDat
             Natureza
           </label>
           <select
-            {...register('natureza')}
+            {...register("natureza")}
             className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
           >
             <option value="CIVEL">Cível</option>
@@ -58,7 +62,7 @@ export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialDat
             Status
           </label>
           <select
-            {...register('status')}
+            {...register("status")}
             className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
           >
             <option value="INICIAL">Inicial</option>
@@ -75,10 +79,10 @@ export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialDat
             Resultado do Julgamento
           </label>
           <select
-            {...register('resultado')}
+            {...register("resultado")}
             className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
           >
-            {resultadoOptions.map(option => (
+            {resultadoOptions.map((option) => (
               <option key={option.value} value={option.value}>
                 {option.label}
               </option>
@@ -93,7 +97,7 @@ export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialDat
             Cliente
           </label>
           <input
-            {...register('clienteId')}
+            {...register("clienteId")}
             className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
           />
         </div>
@@ -104,7 +108,7 @@ export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialDat
           </label>
           <input
             type="number"
-            {...register('valorCausa')}
+            {...register("valorCausa")}
             className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
           />
         </div>
@@ -116,7 +120,7 @@ export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialDat
             Órgão Julgador
           </label>
           <input
-            {...register('orgaoJulgador')}
+            {...register("orgaoJulgador")}
             className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
           />
         </div>
@@ -126,7 +130,7 @@ export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialDat
             Nome da Contraparte
           </label>
           <input
-            {...register('nomeContraparte')}
+            {...register("nomeContraparte")}
             className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
           />
         </div>

src/components/processos/ProcessoInfo.tsx

@@ -1,5 +1,5 @@
-import { format } from "date-fns";
-import { ptBR } from "date-fns/locale";
+import { format, ptBR } from "date-fns";
+
 import { DatajudProcesso } from "../../types/datajud";
 
 interface ProcessoInfoProps {

src/components/processos/ProcessoModal.tsx

@@ -1,20 +1,22 @@
-import React, { useState, useEffect } from "react";
 import { Dialog, Transition, Combobox } from "@headlessui/react";
 import {
   XMarkIcon,
   MagnifyingGlassIcon,
   CheckIcon,
 } from "@heroicons/react/24/outline";
-import { useForm } from "react-hook-form";
-import { Processo, NaturezaProcesso, TipoParte } from "../../types/entities";
-import { useProcessos } from "../../hooks/useProcessos";
-import { useClientes } from "../../hooks/useClientes";
-import { FormInput, FormSelect, FormCheckbox } from "../forms";
 import axios from "axios";
-import { UF_BRASIL, TRIBUNAIS } from "../../utils/constants/tribunais";
+import React, { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import { useClientes } from "../../hooks/useClientes";
 import { useDatajud } from "../../hooks/useDatajud";
-import { ProcessoInfo } from "./ProcessoInfo"; // Adicionar import
+import { useProcessos } from "../../hooks/useProcessos";
 import { DatajudProcesso } from "../../types/datajud";
+import { Processo, NaturezaProcesso, TipoParte } from "../../types/entities";
+import { UF_BRASIL, TRIBUNAIS } from "../../utils/constants/tribunais";
+import { FormInput, FormSelect, FormCheckbox } from "../forms";
+
+import { ProcessoInfo } from "./ProcessoInfo"; // Adicionar import
 
 interface ProcessoModalProps {
   isOpen: boolean;
@@ -140,7 +142,7 @@ export const ProcessoModal: React.FC<ProcessoModalProps> = ({
       if (processo) {
         await updateProcesso.mutateAsync({
           id: processo.id,
-          data: processData 
+          data: processData,
         });
       } else {
         await createProcesso.mutateAsync(processData);

src/components/processos/ProcessoView.tsx

@@ -1,43 +1,50 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { useParams } from 'react-router-dom';
-import api from '../../services/api';
-import { format } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import { Processo } from '../../types/entities';
+import { format, ptBR } from "date-fns";
+import React from "react";
+import { useQuery } from "react-query";
+import { useParams } from "react-router-dom";
+
+import api from "../../services/api";
+import { Processo } from "../../types/entities";
 
 const resultadoOptions = [
-  { value: 'NAO_JULGADO', label: 'Não Julgado' },
-  { value: 'PROCEDENTE', label: 'Procedente' },
-  { value: 'PARCIALMENTE_PROCEDENTE', label: 'Parcialmente Procedente' },
-  { value: 'IMPROCEDENTE', label: 'Improcedente' },
-  { value: 'SEM_ANALISE_MERITO', label: 'Sem Análise de Mérito' }
+  { value: "NAO_JULGADO", label: "Não Julgado" },
+  { value: "PROCEDENTE", label: "Procedente" },
+  { value: "PARCIALMENTE_PROCEDENTE", label: "Parcialmente Procedente" },
+  { value: "IMPROCEDENTE", label: "Improcedente" },
+  { value: "SEM_ANALISE_MERITO", label: "Sem Análise de Mérito" },
 ];
 
 const getResultadoLabel = (valor: string) => {
-  return resultadoOptions.find(opt => opt.value === valor)?.label || valor;
+  return resultadoOptions.find((opt) => opt.value === valor)?.label || valor;
 };
 
 const getResultadoColor = (resultado: string) => {
   switch (resultado) {
-    case 'PROCEDENTE': return 'bg-green-100 text-green-800';
-    case 'PARCIALMENTE_PROCEDENTE': return 'bg-yellow-100 text-yellow-800';
-    case 'IMPROCEDENTE': return 'bg-red-100 text-red-800';
-    case 'SEM_ANALISE_MERITO': return 'bg-gray-100 text-gray-800';
-    default: return 'bg-blue-100 text-blue-800';
+    case "PROCEDENTE":
+      return "bg-green-100 text-green-800";
+    case "PARCIALMENTE_PROCEDENTE":
+      return "bg-yellow-100 text-yellow-800";
+    case "IMPROCEDENTE":
+      return "bg-red-100 text-red-800";
+    case "SEM_ANALISE_MERITO":
+      return "bg-gray-100 text-gray-800";
+    default:
+      return "bg-blue-100 text-blue-800";
   }
 };
 
 export const ProcessoView: React.FC = () => {
   const { id } = useParams<{ id: string }>();
 
-  const { data: processo, refetch, isLoading, isError } = useQuery<Processo>(
-    ['processo', id],
-    async () => {
+  const {
+    data: processo,
+    refetch,
+    isLoading,
+    isError,
+  } = useQuery<Processo>(["processo", id], async () => {
     const response = await api.get(`/processos/${id}`); // remover /api
     return response.data;
-    }
-  );
+  });
 
   if (isLoading) {
     return <div>Carregando...</div>;
@@ -52,7 +59,9 @@ export const ProcessoView: React.FC = () => {
       {/* Status e Resultado do Processo */}
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-medium text-gray-900 dark:text-white">Status do Processo</h3>
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+            Status do Processo
+          </h3>
 
           {/* Botão de Julgamento */}
           <div className="flex items-center space-x-4">
@@ -62,17 +71,17 @@ export const ProcessoView: React.FC = () => {
               onChange={async (e) => {
                 try {
                   await api.patch(`/processos/${processo.id}/resultado`, {
-                    resultado: e.target.value
+                    resultado: e.target.value,
                   });
                   refetch();
                 } catch (error) {
-                  console.error('Erro ao atualizar resultado:', error);
-                  alert('Erro ao atualizar resultado do processo');
+                  console.error("Erro ao atualizar resultado:", error);
+                  alert("Erro ao atualizar resultado do processo");
                 }
               }}
               className="rounded-lg border-gray-300 text-sm dark:bg-gray-700 dark:border-gray-600"
             >
-              {resultadoOptions.map(option => (
+              {resultadoOptions.map((option) => (
                 <option key={option.value} value={option.value}>
                   {option.label}
                 </option>
@@ -90,8 +99,12 @@ export const ProcessoView: React.FC = () => {
           </div>
 
           <div className="flex items-center space-x-2">
-            <span className="text-sm font-medium text-gray-500">Resultado:</span>
-            <span className={`px-2 py-1 text-sm rounded-full ${getResultadoColor(processo.resultado)}`}>
+            <span className="text-sm font-medium text-gray-500">
+              Resultado:
+            </span>
+            <span
+              className={`px-2 py-1 text-sm rounded-full ${getResultadoColor(processo.resultado)}`}
+            >
               {getResultadoLabel(processo.resultado)}
             </span>
           </div>
@@ -106,31 +119,52 @@ export const ProcessoView: React.FC = () => {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
             <h3 className="text-lg font-medium">Cliente</h3>
-            <p className="text-gray-700 dark:text-gray-300">{processo.cliente.nome}</p>
+            <p className="text-gray-700 dark:text-gray-300">
+              {processo.cliente.nome}
+            </p>
           </div>
           <div>
             <h3 className="text-lg font-medium">Contraparte</h3>
-            <p className="text-gray-700 dark:text-gray-300">{processo.nomeContraparte}</p>
+            <p className="text-gray-700 dark:text-gray-300">
+              {processo.nomeContraparte}
+            </p>
           </div>
           <div>
             <h3 className="text-lg font-medium">Natureza</h3>
-            <p className="text-gray-700 dark:text-gray-300">{processo.natureza}</p>
+            <p className="text-gray-700 dark:text-gray-300">
+              {processo.natureza}
+            </p>
           </div>
           <div>
             <h3 className="text-lg font-medium">Status</h3>
-            <p className="text-gray-700 dark:text-gray-300">{processo.status}</p>
+            <p className="text-gray-700 dark:text-gray-300">
+              {processo.status}
+            </p>
           </div>
           <div>
             <h3 className="text-lg font-medium">Valor da Causa</h3>
-            <p className="text-gray-700 dark:text-gray-300">{processo.valorCausa?.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}</p>
+            <p className="text-gray-700 dark:text-gray-300">
+              {processo.valorCausa?.toLocaleString("pt-BR", {
+                style: "currency",
+                currency: "BRL",
+              })}
+            </p>
           </div>
           <div>
             <h3 className="text-lg font-medium">Data de Criação</h3>
-            <p className="text-gray-700 dark:text-gray-300">{format(new Date(processo.dataCriacao), 'dd/MM/yyyy', { locale: ptBR })}</p>
+            <p className="text-gray-700 dark:text-gray-300">
+              {format(new Date(processo.dataCriacao), "dd/MM/yyyy", {
+                locale: ptBR,
+              })}
+            </p>
           </div>
           <div>
             <h3 className="text-lg font-medium">Última Atualização</h3>
-            <p className="text-gray-700 dark:text-gray-300">{format(new Date(processo.dataAtualizacao), 'dd/MM/yyyy', { locale: ptBR })}</p>
+            <p className="text-gray-700 dark:text-gray-300">
+              {format(new Date(processo.dataAtualizacao), "dd/MM/yyyy", {
+                locale: ptBR,
+              })}
+            </p>
           </div>
         </div>
       </div>
@@ -138,7 +172,9 @@ export const ProcessoView: React.FC = () => {
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
         <h3 className="text-lg font-medium mb-4">Resultado</h3>
         <div className="flex items-center space-x-2">
-          <span className={`px-2 py-1 text-sm rounded-full ${getResultadoColor(processo.resultado)}`}>
+          <span
+            className={`px-2 py-1 text-sm rounded-full ${getResultadoColor(processo.resultado)}`}
+          >
             {getResultadoLabel(processo.resultado)}
           </span>
           <select
@@ -146,17 +182,17 @@ export const ProcessoView: React.FC = () => {
             onChange={async (e) => {
               try {
                 await api.patch(`/processos/${processo.id}/resultado`, {
-                  resultado: e.target.value
+                  resultado: e.target.value,
                 });
                 refetch(); // Atualizar dados do processo
               } catch (error) {
-                console.error('Erro ao atualizar resultado:', error);
-                alert('Erro ao atualizar resultado do processo');
+                console.error("Erro ao atualizar resultado:", error);
+                alert("Erro ao atualizar resultado do processo");
               }
             }}
             className="rounded-lg border-gray-300 text-sm"
           >
-            {resultadoOptions.map(option => (
+            {resultadoOptions.map((option) => (
               <option key={option.value} value={option.value}>
                 {option.label}
               </option>

src/components/processos/ProcessosList.tsx

@@ -1,9 +1,10 @@
+import { DocumentTextIcon, ClockIcon } from "@heroicons/react/24/outline";
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { Processo } from "../../types/entities";
+
 import { useProcessos } from "../../hooks/useProcessos";
+import { Processo } from "../../types/entities";
 import { formatNumeroProcesso } from "../../utils/formatters";
-import { DocumentTextIcon, ClockIcon } from "@heroicons/react/24/outline";
 
 interface ProcessosListProps {
   searchTerm: string;
@@ -11,23 +12,26 @@ interface ProcessosListProps {
 }
 
 const resultadoLabel = {
-  NAO_JULGADO: 'Não Julgado',
-  PROCEDENTE: 'Procedente',
-  PARCIALMENTE_PROCEDENTE: 'Parcialmente Procedente',
-  IMPROCEDENTE: 'Improcedente',
-  SEM_ANALISE_MERITO: 'Sem Análise de Mérito'
+  NAO_JULGADO: "Não Julgado",
+  PROCEDENTE: "Procedente",
+  PARCIALMENTE_PROCEDENTE: "Parcialmente Procedente",
+  IMPROCEDENTE: "Improcedente",
+  SEM_ANALISE_MERITO: "Sem Análise de Mérito",
 };
 
 const resultadoColor = {
-  NAO_JULGADO: 'bg-gray-100 text-gray-800',
-  PROCEDENTE: 'bg-green-100 text-green-800',
-  PARCIALMENTE_PROCEDENTE: 'bg-yellow-100 text-yellow-800',
-  IMPROCEDENTE: 'bg-red-100 text-red-800',
-  SEM_ANALISE_MERITO: 'bg-gray-100 text-gray-800'
+  NAO_JULGADO: "bg-gray-100 text-gray-800",
+  PROCEDENTE: "bg-green-100 text-green-800",
+  PARCIALMENTE_PROCEDENTE: "bg-yellow-100 text-yellow-800",
+  IMPROCEDENTE: "bg-red-100 text-red-800",
+  SEM_ANALISE_MERITO: "bg-gray-100 text-gray-800",
 };
 
 const getResultadoColor = (resultado: string) => {
-  return resultadoColor[resultado as keyof typeof resultadoColor] || 'bg-gray-100 text-gray-800';
+  return (
+    resultadoColor[resultado as keyof typeof resultadoColor] ||
+    "bg-gray-100 text-gray-800"
+  );
 };
 
 export const ProcessosList: React.FC<ProcessosListProps> = ({
@@ -46,7 +50,10 @@ export const ProcessosList: React.FC<ProcessosListProps> = ({
   );
 
   const getResultadoDisplay = (processo: Processo) => {
-    if (!processo.resultado || !resultadoLabel[processo.resultado as keyof typeof resultadoLabel]) {
+    if (
+      !processo.resultado ||
+      !resultadoLabel[processo.resultado as keyof typeof resultadoLabel]
+    ) {
       return (
         <span className="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">
           Não Julgado
@@ -55,7 +62,9 @@ export const ProcessosList: React.FC<ProcessosListProps> = ({
     }
 
     return (
-      <span className={`px-2 py-1 text-xs rounded-full ${getResultadoColor(processo.resultado)}`}>
+      <span
+        className={`px-2 py-1 text-xs rounded-full ${getResultadoColor(processo.resultado)}`}
+      >
         {resultadoLabel[processo.resultado as keyof typeof resultadoLabel]}
       </span>
     );

src/components/processos/ProcessosPage.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from "react";
 import { PlusIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { ProcessosList } from "./ProcessosList";
-import { ProcessoModal } from "./ProcessoModal";
+import React, { useState } from "react";
+
 import { Processo } from "../../types/entities";
 
+import { ProcessoModal } from "./ProcessoModal";
+import { ProcessosList } from "./ProcessosList";
+
 export const ProcessosPage: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
@@ -43,9 +45,7 @@ export const ProcessosPage: React.FC = () => {
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
         <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
           <thead className="bg-gray-50 dark:bg-gray-900">
-            <tr>
-              {/* ...headers... */}
-            </tr>
+            <tr>{/* ...headers... */}</tr>
           </thead>
           <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
             {/* ...rows... */}

src/components/processos/dialogs/DialogCustaProcessual.tsx

@@ -6,12 +6,12 @@ import {
   Box,
   Typography,
 } from "@mui/material";
-import { useState, useEffect } from "react";
-import { TipoCustaProcessual, StatusPagamento } from "@prisma/client";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { TipoCustaProcessual, StatusPagamento } from "@prisma/client";
 import ptBR from "date-fns/locale/pt-BR";
+import { useState, useEffect } from "react";
 
 interface DialogCustaProcessualProps {
   open: boolean;

src/components/processos/dialogs/DialogHonorario.tsx

@@ -9,12 +9,13 @@ import {
   Select,
   Typography,
 } from "@mui/material";
-import { useState, useEffect } from "react";
-import { FormaPagamento, StatusPagamento } from "@prisma/client";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { FormaPagamento, StatusPagamento } from "@prisma/client";
 import ptBR from "date-fns/locale/pt-BR";
+import { useState, useEffect } from "react";
+
 import { IHonorario, IHonorarioCreate } from "../types/financeiro";
 
 interface DialogHonorarioProps {

src/components/processos/dialogs/DialogParcela.tsx

@@ -1,12 +1,13 @@
-import { Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { DatePicker } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import ptBR from "date-fns/locale/pt-BR";
-import { formatCurrency } from "../../../utils/format";
 import { StatusPagamento } from "@prisma/client";
+import ptBR from "date-fns/locale/pt-BR";
+import { Fragment, useState } from "react";
+
+import { formatCurrency } from "../../../utils/format";
 
 interface ParcelaHonorario {
   id: string;

src/components/processos/tables/CustasTable.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { Edit as EditIcon } from "@mui/icons-material";
 import {
   Table,
   TableBody,
@@ -8,7 +8,8 @@ import {
   Chip,
   IconButton,
 } from "@mui/material";
-import { Edit as EditIcon } from "@mui/icons-material";
+import { memo } from "react";
+
 import { formatCurrency, formatDate } from "../../../utils/format";
 
 const CustasTable = memo(({ custas, onEdit, getStatusColor }) => {

src/components/processosAdministrativos/CustaAdministrativaPanel.tsx

@@ -1,31 +1,32 @@
-import { useState } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
-import { formatCurrency } from '../../utils/format';
-import { Dialog } from '@headlessui/react';
-import { useForm } from 'react-hook-form';
-import { FormInput, FormSelect } from '../forms';
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
-import api from '../../services/api';
+import { Dialog } from "@headlessui/react";
+import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useQuery, useQueryClient } from "react-query";
+
+import api from "../../services/api";
+import { formatCurrency } from "../../utils/format";
+import { FormInput, FormSelect } from "../forms";
 
 // Função auxiliar para retornar as cores do status
 const getStatusColor = (status: string) => {
   const colors = {
-    PENDENTE: 'bg-yellow-100 text-yellow-800',
-    PAGO: 'bg-green-100 text-green-800',
-    VENCIDO: 'bg-red-100 text-red-800',
-    CANCELADO: 'bg-gray-100 text-gray-800',
-    PARCIALMENTE_PAGO: 'bg-blue-100 text-blue-800'
+    PENDENTE: "bg-yellow-100 text-yellow-800",
+    PAGO: "bg-green-100 text-green-800",
+    VENCIDO: "bg-red-100 text-red-800",
+    CANCELADO: "bg-gray-100 text-gray-800",
+    PARCIALMENTE_PAGO: "bg-blue-100 text-blue-800",
   };
   return colors[status] || colors.PENDENTE;
 };
 
 const TIPOS_CUSTA = [
-  { value: 'TAXA_ADMINISTRATIVA', label: 'Taxa Administrativa' },
-  { value: 'RECURSO', label: 'Recurso' },
-  { value: 'DILIGENCIA', label: 'Diligência' },
-  { value: 'CERTIDAO', label: 'Certidão' },
-  { value: 'COPIA', label: 'Cópia' },
-  { value: 'OUTROS', label: 'Outros' }
+  { value: "TAXA_ADMINISTRATIVA", label: "Taxa Administrativa" },
+  { value: "RECURSO", label: "Recurso" },
+  { value: "DILIGENCIA", label: "Diligência" },
+  { value: "CERTIDAO", label: "Certidão" },
+  { value: "COPIA", label: "Cópia" },
+  { value: "OUTROS", label: "Outros" },
 ];
 
 export function CustaAdministrativaPanel({ processoId }) {
@@ -35,18 +36,23 @@ export function CustaAdministrativaPanel({ processoId }) {
   const queryClient = useQueryClient();
 
   const { data: custas, isLoading } = useQuery(
-    ['custas-administrativas', processoId],
+    ["custas-administrativas", processoId],
     async () => {
-      const response = await api.get(`/processos-administrativos/${processoId}/custas`);
+      const response = await api.get(
+        `/processos-administrativos/${processoId}/custas`,
+      );
       return response.data;
-    }
+    },
   );
 
   const handleEdit = (custa) => {
     setSelectedCusta(custa);
-    Object.keys(custa).forEach(key => {
-      if (key === 'vencimento' || key === 'dataPagamento') {
-        setValue(key, custa[key] ? new Date(custa[key]).toISOString().split('T')[0] : '');
+    Object.keys(custa).forEach((key) => {
+      if (key === "vencimento" || key === "dataPagamento") {
+        setValue(
+          key,
+          custa[key] ? new Date(custa[key]).toISOString().split("T")[0] : "",
+        );
       } else {
         setValue(key, custa[key]);
       }
@@ -55,12 +61,14 @@ export function CustaAdministrativaPanel({ processoId }) {
   };
 
   const handleDelete = async (id) => {
-    if (window.confirm('Tem certeza que deseja excluir esta custa?')) {
+    if (window.confirm("Tem certeza que deseja excluir esta custa?")) {
       try {
-        await api.delete(`/processos-administrativos/${processoId}/custas/${id}`);
-        queryClient.invalidateQueries(['custas-administrativas', processoId]);
+        await api.delete(
+          `/processos-administrativos/${processoId}/custas/${id}`,
+        );
+        queryClient.invalidateQueries(["custas-administrativas", processoId]);
       } catch (error) {
-        console.error('Erro ao excluir custa:', error);
+        console.error("Erro ao excluir custa:", error);
       }
     }
   };
@@ -70,23 +78,33 @@ export function CustaAdministrativaPanel({ processoId }) {
       // Formatar as datas antes de enviar
       const formattedData = {
         ...data,
-        vencimento: data.vencimento ? new Date(data.vencimento).toISOString() : null,
-        dataPagamento: data.dataPagamento ? new Date(data.dataPagamento).toISOString() : null,
-        valor: Number(data.valor)
+        vencimento: data.vencimento
+          ? new Date(data.vencimento).toISOString()
+          : null,
+        dataPagamento: data.dataPagamento
+          ? new Date(data.dataPagamento).toISOString()
+          : null,
+        valor: Number(data.valor),
       };
 
       if (selectedCusta) {
-        await api.put(`/processos-administrativos/${processoId}/custas/${selectedCusta.id}`, formattedData);
+        await api.put(
+          `/processos-administrativos/${processoId}/custas/${selectedCusta.id}`,
+          formattedData,
+        );
       } else {
-        await api.post(`/processos-administrativos/${processoId}/custas`, formattedData);
+        await api.post(
+          `/processos-administrativos/${processoId}/custas`,
+          formattedData,
+        );
       }
 
-      queryClient.invalidateQueries(['custas-administrativas', processoId]);
+      queryClient.invalidateQueries(["custas-administrativas", processoId]);
       setIsModalOpen(false);
       setSelectedCusta(null);
       reset();
     } catch (error) {
-      console.error('Erro ao salvar custa:', error);
+      console.error("Erro ao salvar custa:", error);
     }
   };
 
@@ -108,27 +126,49 @@ export function CustaAdministrativaPanel({ processoId }) {
         <table className="min-w-full divide-y divide-gray-300">
           <thead className="bg-gray-50">
             <tr>
-              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Tipo</th>
-              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Descrição</th>
-              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Valor</th>
-              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
-              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Vencimento</th>
-              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Ações</th>
+              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                Tipo
+              </th>
+              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                Descrição
+              </th>
+              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                Valor
+              </th>
+              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                Status
+              </th>
+              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                Vencimento
+              </th>
+              <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                Ações
+              </th>
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-200 bg-white">
             {custas?.map((custa) => (
               <tr key={custa.id}>
-                <td className="px-3 py-4 text-sm text-gray-900">{custa.tipo}</td>
-                <td className="px-3 py-4 text-sm text-gray-500">{custa.descricao}</td>
-                <td className="px-3 py-4 text-sm text-gray-900">{formatCurrency(custa.valor)}</td>
+                <td className="px-3 py-4 text-sm text-gray-900">
+                  {custa.tipo}
+                </td>
+                <td className="px-3 py-4 text-sm text-gray-500">
+                  {custa.descricao}
+                </td>
+                <td className="px-3 py-4 text-sm text-gray-900">
+                  {formatCurrency(custa.valor)}
+                </td>
                 <td className="px-3 py-4 text-sm">
-                  <span className={`px-2 py-1 rounded-full text-xs ${getStatusColor(custa.status)}`}>
+                  <span
+                    className={`px-2 py-1 rounded-full text-xs ${getStatusColor(custa.status)}`}
+                  >
                     {custa.status}
                   </span>
                 </td>
                 <td className="px-3 py-4 text-sm text-gray-500">
-                  {custa.vencimento ? new Date(custa.vencimento).toLocaleDateString() : '-'}
+                  {custa.vencimento
+                    ? new Date(custa.vencimento).toLocaleDateString()
+                    : "-"}
                 </td>
                 <td className="px-3 py-4 text-sm">
                   <div className="flex space-x-2">
@@ -153,17 +193,20 @@ export function CustaAdministrativaPanel({ processoId }) {
       </div>
 
       {/* Modal de Custa */}
-      <Dialog open={isModalOpen} onClose={() => {
+      <Dialog
+        open={isModalOpen}
+        onClose={() => {
           setIsModalOpen(false);
           setSelectedCusta(null);
           reset();
-      }}>
+        }}
+      >
         <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
 
         <div className="fixed inset-0 flex items-center justify-center p-4">
           <Dialog.Panel className="mx-auto max-w-2xl w-full bg-white rounded-xl p-6">
             <Dialog.Title className="text-lg font-semibold mb-4">
-              {selectedCusta ? 'Editar Custa' : 'Nova Custa'}
+              {selectedCusta ? "Editar Custa" : "Nova Custa"}
             </Dialog.Title>
 
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
@@ -195,10 +238,10 @@ export function CustaAdministrativaPanel({ processoId }) {
                   label="Status"
                   {...register("status")}
                   options={[
-                    { value: 'PENDENTE', label: 'Pendente' },
-                    { value: 'PAGO', label: 'Pago' },
-                    { value: 'VENCIDO', label: 'Vencido' },
-                    { value: 'CANCELADO', label: 'Cancelado' }
+                    { value: "PENDENTE", label: "Pendente" },
+                    { value: "PAGO", label: "Pago" },
+                    { value: "VENCIDO", label: "Vencido" },
+                    { value: "CANCELADO", label: "Cancelado" },
                   ]}
                 />
 

src/components/processosAdministrativos/MovimentacaoAdminActions.tsx

@@ -1,7 +1,8 @@
-import { Menu, Transition } from '@headlessui/react';
-import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
-import { Fragment } from 'react';
-import { MovimentacaoAdministrativa } from '../../types/processoAdministrativo';
+import { Menu, Transition } from "@headlessui/react";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { Fragment } from "react";
+
+import { MovimentacaoAdministrativa } from "../../types/processoAdministrativo";
 
 interface MovimentacaoAdminActionsProps {
   movimentacao: MovimentacaoAdministrativa;
@@ -9,7 +10,11 @@ interface MovimentacaoAdminActionsProps {
   onDelete: (id: string) => void;
 }
 
-export function MovimentacaoAdminActions({ movimentacao, onEdit, onDelete }: MovimentacaoAdminActionsProps) {
+export function MovimentacaoAdminActions({
+  movimentacao,
+  onEdit,
+  onDelete,
+}: MovimentacaoAdminActionsProps) {
   return (
     <Menu as="div" className="relative">
       <Menu.Button className="p-1 rounded-full hover:bg-gray-100">
@@ -31,7 +36,7 @@ export function MovimentacaoAdminActions({ movimentacao, onEdit, onDelete }: Mov
               <button
                 onClick={() => onEdit(movimentacao)}
                 className={`${
-                  active ? 'bg-gray-100' : ''
+                  active ? "bg-gray-100" : ""
                 } block px-4 py-2 text-sm text-gray-700 w-full text-left`}
               >
                 Editar
@@ -43,7 +48,7 @@ export function MovimentacaoAdminActions({ movimentacao, onEdit, onDelete }: Mov
               <button
                 onClick={() => onDelete(movimentacao.id)}
                 className={`${
-                  active ? 'bg-gray-100' : ''
+                  active ? "bg-gray-100" : ""
                 } block px-4 py-2 text-sm text-red-600 w-full text-left`}
               >
                 Excluir

src/components/processosAdministrativos/MovimentacaoAdministrativaDialog.tsx

@@ -1,5 +1,6 @@
 import { Dialog } from "@headlessui/react";
 import { useState, useEffect } from "react";
+
 import { MovimentacaoAdministrativa } from "../../types/processoAdministrativo";
 
 interface MovimentacaoAdministrativaDialogProps {
@@ -10,43 +11,43 @@ interface MovimentacaoAdministrativaDialogProps {
 }
 
 const TIPOS_MOVIMENTACAO = [
-  'DESPACHO',
-  'DECISÃO',
-  'NOTIFICAÇÃO',
-  'MANIFESTAÇÃO',
-  'RECURSO',
-  'OUTROS'
+  "DESPACHO",
+  "DECISÃO",
+  "NOTIFICAÇÃO",
+  "MANIFESTAÇÃO",
+  "RECURSO",
+  "OUTROS",
 ] as const;
 
 export function MovimentacaoAdministrativaDialog({
   isOpen,
   onClose,
   onSave,
-  movimentacao
+  movimentacao,
 }: MovimentacaoAdministrativaDialogProps) {
   const [formData, setFormData] = useState({
     data: new Date(),
-    descricao: '',
-    tipoMovimentacao: '',
-    numero: '',
+    descricao: "",
+    tipoMovimentacao: "",
+    numero: "",
     documentos: [] as string[],
-    observacoes: ''
+    observacoes: "",
   });
 
   useEffect(() => {
     if (movimentacao) {
       setFormData({
         ...movimentacao,
-        data: new Date(movimentacao.data)
+        data: new Date(movimentacao.data),
       });
     } else {
       setFormData({
         data: new Date(),
-        descricao: '',
-        tipoMovimentacao: '',
-        numero: '',
+        descricao: "",
+        tipoMovimentacao: "",
+        numero: "",
         documentos: [],
-        observacoes: ''
+        observacoes: "",
       });
     }
   }, [movimentacao]);
@@ -60,19 +61,19 @@ export function MovimentacaoAdministrativaDialog({
     try {
       // Validações
       if (!formData.descricao) {
-        setFormError('A descrição é obrigatória');
+        setFormError("A descrição é obrigatória");
         return;
       }
       if (!formData.tipoMovimentacao) {
-        setFormError('O tipo de movimentação é obrigatório');
+        setFormError("O tipo de movimentação é obrigatório");
         return;
       }
 
       await onSave(formData);
       onClose();
     } catch (error) {
-      console.error('Erro ao salvar movimentação:', error);
-      setFormError('Erro ao salvar movimentação. Tente novamente.');
+      console.error("Erro ao salvar movimentação:", error);
+      setFormError("Erro ao salvar movimentação. Tente novamente.");
     }
   };
 
@@ -96,10 +97,12 @@ export function MovimentacaoAdministrativaDialog({
                   type="datetime-local"
                   className="w-full rounded-lg border-gray-300"
                   value={formData.data.toISOString().slice(0, 16)}
-                  onChange={(e) => setFormData({ 
+                  onChange={(e) =>
+                    setFormData({
                       ...formData,
-                    data: new Date(e.target.value) 
-                  })}
+                      data: new Date(e.target.value),
+                    })
+                  }
                   required
                 />
               </div>
@@ -111,10 +114,12 @@ export function MovimentacaoAdministrativaDialog({
                 <select
                   className="w-full rounded-lg border-gray-300"
                   value={formData.tipoMovimentacao}
-                  onChange={(e) => setFormData({ 
+                  onChange={(e) =>
+                    setFormData({
                       ...formData,
-                    tipoMovimentacao: e.target.value 
-                  })}
+                      tipoMovimentacao: e.target.value,
+                    })
+                  }
                   required
                 >
                   <option value="">Selecione...</option>
@@ -134,10 +139,12 @@ export function MovimentacaoAdministrativaDialog({
                   type="text"
                   className="w-full rounded-lg border-gray-300"
                   value={formData.numero}
-                  onChange={(e) => setFormData({ 
+                  onChange={(e) =>
+                    setFormData({
                       ...formData,
-                    numero: e.target.value 
-                  })}
+                      numero: e.target.value,
+                    })
+                  }
                 />
               </div>
 
@@ -149,10 +156,12 @@ export function MovimentacaoAdministrativaDialog({
                   className="w-full rounded-lg border-gray-300"
                   rows={3}
                   value={formData.descricao}
-                  onChange={(e) => setFormData({ 
+                  onChange={(e) =>
+                    setFormData({
                       ...formData,
-                    descricao: e.target.value 
-                  })}
+                      descricao: e.target.value,
+                    })
+                  }
                   required
                 />
               </div>
@@ -165,10 +174,12 @@ export function MovimentacaoAdministrativaDialog({
                   className="w-full rounded-lg border-gray-300"
                   rows={2}
                   value={formData.observacoes}
-                  onChange={(e) => setFormData({ 
+                  onChange={(e) =>
+                    setFormData({
                       ...formData,
-                    observacoes: e.target.value 
-                  })}
+                      observacoes: e.target.value,
+                    })
+                  }
                 />
               </div>
             </div>

src/components/processosAdministrativos/ProcessoAdminDetalhes.tsx

@@ -1,8 +1,4 @@
-import { useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useQuery, useQueryClient } from "react-query";
 import { Tab } from "@headlessui/react";
-import { classNames } from "../../utils/classNames";
 import {
   ArrowLeftIcon,
   DocumentTextIcon,
@@ -11,13 +7,19 @@ import {
   TrashIcon,
   CurrencyDollarIcon,
 } from "@heroicons/react/24/outline";
-import { formatCurrency } from "../../utils/format";
+import { useState } from "react";
+import { useQuery, useQueryClient } from "react-query";
+import { useParams, useNavigate } from "react-router-dom";
+
 import { useProcessosAdministrativos } from "../../hooks/useProcessosAdministrativos";
-import { ProcessoAdminModal } from "./ProcessoAdminModal";
-import { MovimentacaoAdministrativaDialog } from "./MovimentacaoAdministrativaDialog";
-import { MovimentacaoAdminActions } from "./MovimentacaoAdminActions"; // Adicionar esta importação
 import api from "../../services/api";
+import { classNames } from "../../utils/classNames";
+import { formatCurrency } from "../../utils/format";
+
 import { CustaAdministrativaPanel } from "./CustaAdministrativaPanel";
+import { MovimentacaoAdminActions } from "./MovimentacaoAdminActions"; // Adicionar esta importação
+import { MovimentacaoAdministrativaDialog } from "./MovimentacaoAdministrativaDialog";
+import { ProcessoAdminModal } from "./ProcessoAdminModal";
 
 const tabs = [
   { id: "geral", name: "Informações Gerais", icon: DocumentTextIcon },
@@ -33,7 +35,8 @@ export function ProcessoAdminDetalhes() {
   const [isMovimentacaoModalOpen, setIsMovimentacaoModalOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [movimentacaoParaEditar, setMovimentacaoParaEditar] = useState<MovimentacaoAdministrativa | null>(null);
+  const [movimentacaoParaEditar, setMovimentacaoParaEditar] =
+    useState<MovimentacaoAdministrativa | null>(null);
 
   // Se o id for "novo", renderizar diretamente o modal de criação
   if (id === "novo") {
@@ -46,7 +49,11 @@ export function ProcessoAdminDetalhes() {
     );
   }
 
-  const { data: processo, isLoading, error } = useQuery(
+  const {
+    data: processo,
+    isLoading,
+    error,
+  } = useQuery(
     ["processo-administrativo", id],
     async () => {
       const response = await api.get(`/processos-administrativos/${id}`);
@@ -57,8 +64,8 @@ export function ProcessoAdminDetalhes() {
       retry: 2, // Tenta no máximo 2 vezes em caso de erro
       onError: (error) => {
         console.error("Erro ao carregar processo:", error);
-      }
-    }
+      },
+    },
   );
 
   const { deleteProcesso } = useProcessosAdministrativos();
@@ -85,7 +92,10 @@ export function ProcessoAdminDetalhes() {
   const handleEditMovimentacao = async (data: any) => {
     try {
       // Atualizar URL para usar a nova rota
-      await api.put(`/processos-administrativos/movimentacoes/${data.id}`, data);
+      await api.put(
+        `/processos-administrativos/movimentacoes/${data.id}`,
+        data,
+      );
       queryClient.invalidateQueries(["processo-administrativo", id]);
       setMovimentacaoParaEditar(null);
     } catch (error) {
@@ -98,7 +108,9 @@ export function ProcessoAdminDetalhes() {
 
     try {
       // Atualizar URL para usar a nova rota
-      await api.delete(`/processos-administrativos/movimentacoes/${movimentacaoId}`);
+      await api.delete(
+        `/processos-administrativos/movimentacoes/${movimentacaoId}`,
+      );
       queryClient.invalidateQueries(["processo-administrativo", id]);
     } catch (error) {
       console.error("Erro ao excluir movimentação:", error);
@@ -158,7 +170,7 @@ export function ProcessoAdminDetalhes() {
                   "flex items-center justify-center",
                   selected
                     ? "bg-white text-blue-700 shadow"
-                    : "text-gray-600 hover:bg-white/[0.12] hover:text-blue-600"
+                    : "text-gray-600 hover:bg-white/[0.12] hover:text-blue-600",
                 )
               }
             >
@@ -176,7 +188,9 @@ export function ProcessoAdminDetalhes() {
                 <dt className="text-sm font-medium text-gray-500">
                   Número/Protocolo
                 </dt>
-                <dd className="mt-1 text-sm text-gray-900">{processo.numero}</dd>
+                <dd className="mt-1 text-sm text-gray-900">
+                  {processo.numero}
+                </dd>
               </div>
               <div>
                 <dt className="text-sm font-medium text-gray-500">Órgão</dt>
@@ -184,7 +198,9 @@ export function ProcessoAdminDetalhes() {
               </div>
               <div>
                 <dt className="text-sm font-medium text-gray-500">Status</dt>
-                <dd className="mt-1 text-sm text-gray-900">{processo.status}</dd>
+                <dd className="mt-1 text-sm text-gray-900">
+                  {processo.status}
+                </dd>
               </div>
               <div>
                 <dt className="text-sm font-medium text-gray-500">
@@ -203,7 +219,9 @@ export function ProcessoAdminDetalhes() {
                 </dd>
               </div>
               <div className="col-span-2">
-                <dt className="text-sm font-medium text-gray-500">Observações</dt>
+                <dt className="text-sm font-medium text-gray-500">
+                  Observações
+                </dt>
                 <dd className="mt-1 text-sm text-gray-900">
                   {processo.observacoes || "-"}
                 </dd>
@@ -214,7 +232,9 @@ export function ProcessoAdminDetalhes() {
           {/* Movimentações */}
           <Tab.Panel className="bg-white rounded-xl p-6">
             <div className="flex justify-between items-center mb-4">
-              <h3 className="text-lg font-medium text-gray-900">Movimentações</h3>
+              <h3 className="text-lg font-medium text-gray-900">
+                Movimentações
+              </h3>
               <button
                 onClick={() => setIsMovimentacaoModalOpen(true)}
                 className="flex items-center px-4 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded-lg"
@@ -244,7 +264,9 @@ export function ProcessoAdminDetalhes() {
                           <div className="min-w-0 flex-1">
                             <div className="flex justify-between items-start">
                               <div className="text-sm text-gray-500">
-                                <time>{new Date(mov.data).toLocaleDateString()}</time>
+                                <time>
+                                  {new Date(mov.data).toLocaleDateString()}
+                                </time>
                               </div>
                               <MovimentacaoAdminActions
                                 movimentacao={mov}

src/components/processosAdministrativos/ProcessoAdminModal.tsx

@@ -1,11 +1,15 @@
 import { Dialog } from "@headlessui/react";
-import { useForm } from "react-hook-form";
-import { ProcessoAdministrativo, StatusProcessoAdministrativo } from "../../types/processoAdministrativo";
-import { useProcessosAdministrativos } from "../../hooks/useProcessosAdministrativos";
-import { useClientes } from "../../hooks/useClientes";
-import { FormInput, FormSelect } from "../forms";
-import { TipoParte } from "../../types/entities";
 import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import { useClientes } from "../../hooks/useClientes";
+import { useProcessosAdministrativos } from "../../hooks/useProcessosAdministrativos";
+import { TipoParte } from "../../types/entities";
+import {
+  ProcessoAdministrativo,
+  StatusProcessoAdministrativo,
+} from "../../types/processoAdministrativo";
+import { FormInput, FormSelect } from "../forms";
 
 interface ProcessoAdminModalProps {
   isOpen: boolean;
@@ -18,7 +22,7 @@ export function ProcessoAdminModal({
   isOpen,
   onClose,
   processo,
-  onSuccess 
+  onSuccess,
 }: ProcessoAdminModalProps) {
   const { register, handleSubmit, setValue, reset } = useForm();
   const { createProcesso, updateProcesso } = useProcessosAdministrativos();
@@ -29,7 +33,11 @@ export function ProcessoAdminModal({
   useEffect(() => {
     if (isOpen && processo) {
       Object.keys(processo).forEach((key) => {
-        if (key !== "id" && key !== "dataCriacao" && key !== "dataAtualizacao") {
+        if (
+          key !== "id" &&
+          key !== "dataCriacao" &&
+          key !== "dataAtualizacao"
+        ) {
           setValue(key, processo[key]);
         }
       });
@@ -52,13 +60,15 @@ export function ProcessoAdminModal({
       console.log("Dados do formulário:", data); // Adicionar log
       const processData = {
         ...data,
-        valorPretensao: data.valorPretensao ? Number(data.valorPretensao) : null,
+        valorPretensao: data.valorPretensao
+          ? Number(data.valorPretensao)
+          : null,
       };
 
       if (processo) {
         await updateProcesso.mutateAsync({
           id: processo.id,
-          data: processData 
+          data: processData,
         });
       } else {
         await createProcesso.mutateAsync(processData);
@@ -78,7 +88,9 @@ export function ProcessoAdminModal({
       <div className="fixed inset-0 flex items-center justify-center p-4">
         <Dialog.Panel className="mx-auto max-w-2xl w-full bg-white rounded-xl p-6">
           <Dialog.Title className="text-lg font-semibold mb-4">
-            {processo ? "Editar Processo Administrativo" : "Novo Processo Administrativo"}
+            {processo
+              ? "Editar Processo Administrativo"
+              : "Novo Processo Administrativo"}
           </Dialog.Title>
 
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
@@ -93,9 +105,9 @@ export function ProcessoAdminModal({
                 label="Cliente"
                 required
                 {...register("clienteId")}
-                options={clientes.map(c => ({
+                options={clientes.map((c) => ({
                   value: c.id,
-                  label: `${c.nome} (${c.cpfCnpj})`
+                  label: `${c.nome} (${c.cpfCnpj})`,
                 }))}
               />
 
@@ -105,15 +117,11 @@ export function ProcessoAdminModal({
                 {...register("tipoParteCliente")}
                 options={[
                   { value: TipoParte.AUTOR, label: "Autor" },
-                  { value: TipoParte.REU, label: "Réu" }
+                  { value: TipoParte.REU, label: "Réu" },
                 ]}
               />
 
-              <FormInput
-                label="Órgão"
-                required
-                {...register("orgao")}
-              />
+              <FormInput label="Órgão" required {...register("orgao")} />
 
               <div className="col-span-2">
                 <FormInput
@@ -136,10 +144,12 @@ export function ProcessoAdminModal({
                 label="Status"
                 required
                 {...register("status")}
-                options={Object.values(StatusProcessoAdministrativo).map(status => ({
+                options={Object.values(StatusProcessoAdministrativo).map(
+                  (status) => ({
                     value: status,
-                  label: status.replace(/_/g, " ")
-                }))}
+                    label: status.replace(/_/g, " "),
+                  }),
+                )}
               />
 
               <div className="col-span-2">

src/components/processosAdministrativos/ProcessoAdministrativoList.tsx

@@ -1,19 +1,23 @@
-import { useNavigate } from "react-router-dom";
 import { DocumentTextIcon } from "@heroicons/react/24/outline";
+import { useNavigate } from "react-router-dom";
+
 import { useProcessosAdministrativos } from "../../hooks/useProcessosAdministrativos";
+import {
+  ProcessoAdministrativo,
+  StatusProcessoAdministrativo,
+} from "../../types/processoAdministrativo";
 import { formatCurrency } from "../../utils/format";
-import { ProcessoAdministrativo, StatusProcessoAdministrativo } from "../../types/processoAdministrativo";
 
 const statusColor = {
-  [StatusProcessoAdministrativo.INICIAL]: 'bg-yellow-100 text-yellow-800',
-  [StatusProcessoAdministrativo.EM_ANALISE]: 'bg-blue-100 text-blue-800',
-  [StatusProcessoAdministrativo.EM_RECURSO]: 'bg-purple-100 text-purple-800',
-  [StatusProcessoAdministrativo.FINALIZADO]: 'bg-green-100 text-green-800',
-  [StatusProcessoAdministrativo.ARQUIVADO]: 'bg-gray-100 text-gray-800'
+  [StatusProcessoAdministrativo.INICIAL]: "bg-yellow-100 text-yellow-800",
+  [StatusProcessoAdministrativo.EM_ANALISE]: "bg-blue-100 text-blue-800",
+  [StatusProcessoAdministrativo.EM_RECURSO]: "bg-purple-100 text-purple-800",
+  [StatusProcessoAdministrativo.FINALIZADO]: "bg-green-100 text-green-800",
+  [StatusProcessoAdministrativo.ARQUIVADO]: "bg-gray-100 text-gray-800",
 };
 
 export function ProcessoAdministrativoList() {
-  console.log('Renderizando ProcessoAdministrativoList');
+  console.log("Renderizando ProcessoAdministrativoList");
   const navigate = useNavigate();
   const { processos, isLoading } = useProcessosAdministrativos();
 
@@ -25,7 +29,9 @@ export function ProcessoAdministrativoList() {
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="sm:flex sm:items-center">
         <div className="sm:flex-auto">
-          <h1 className="text-xl font-semibold text-gray-900">Processos Administrativos</h1>
+          <h1 className="text-xl font-semibold text-gray-900">
+            Processos Administrativos
+          </h1>
         </div>
         <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
           <button
@@ -45,19 +51,34 @@ export function ProcessoAdministrativoList() {
               <table className="min-w-full divide-y divide-gray-300">
                 <thead className="bg-gray-50">
                   <tr>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
                       Número/Protocolo
                     </th>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
                       Órgão
                     </th>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
                       Status
                     </th>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
                       Valor Pretensão
                     </th>
-                    <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                    <th
+                      scope="col"
+                      className="relative py-3.5 pl-3 pr-4 sm:pr-6"
+                    >
                       <span className="sr-only">Ações</span>
                     </th>
                   </tr>
@@ -72,16 +93,24 @@ export function ProcessoAdministrativoList() {
                         {processo.orgao}
                       </td>
                       <td className="whitespace-nowrap px-3 py-4 text-sm">
-                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColor[processo.status]}`}>
+                        <span
+                          className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColor[processo.status]}`}
+                        >
                           {processo.status}
                         </span>
                       </td>
                       <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                        {processo.valorPretensao ? formatCurrency(processo.valorPretensao) : '-'}
+                        {processo.valorPretensao
+                          ? formatCurrency(processo.valorPretensao)
+                          : "-"}
                       </td>
                       <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                         <button
-                          onClick={() => navigate(`/processos-administrativos/${processo.id}`)}
+                          onClick={() =>
+                            navigate(
+                              `/processos-administrativos/${processo.id}`,
+                            )
+                          }
                           className="text-blue-600 hover:text-blue-900"
                         >
                           Visualizar

src/components/provas/AdminProvas.tsx

@@ -1,25 +1,23 @@
-import { useQuery } from 'react-query';
-import { format } from 'date-fns';
-import { Card } from '../../components/ui/Card';
+import { format } from "date-fns";
+import { useQuery } from "react-query";
+
+import { Card } from "../../components/ui/Card";
 //import { Prova } from '../../types/prova';
 
 export interface Prova {
   id: string;
   fileName: string;
-  status: 'PENDENTE' | 'PROCESSANDO' | 'CONCLUIDO' | 'ERRO';
+  status: "PENDENTE" | "PROCESSANDO" | "CONCLUIDO" | "ERRO";
   dataCriacao: string;
   checksumSha256: string;
   error?: string;
 }
 
 export function AdminProvas() {
-  const { data: provas, isLoading } = useQuery<Prova[]>(
-    'provas',
-    async () => {
-      const response = await fetch('/api/provas/admin');
+  const { data: provas, isLoading } = useQuery<Prova[]>("provas", async () => {
+    const response = await fetch("/api/provas/admin");
     return response.json();
-    }
-  );
+  });
 
   if (isLoading) return <div>Carregando...</div>;
 
@@ -28,9 +26,12 @@ export function AdminProvas() {
       <Card>
         <div className="sm:flex sm:items-center">
           <div className="sm:flex-auto">
-            <h1 className="text-xl font-semibold text-gray-900">Documentos Validados</h1>
+            <h1 className="text-xl font-semibold text-gray-900">
+              Documentos Validados
+            </h1>
             <p className="mt-2 text-sm text-gray-700">
-              Lista de todos os documentos processados pelo sistema de validação.
+              Lista de todos os documentos processados pelo sistema de
+              validação.
             </p>
           </div>
         </div>
@@ -39,10 +40,18 @@ export function AdminProvas() {
           <table className="min-w-full divide-y divide-gray-300">
             <thead>
               <tr>
-                <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Arquivo</th>
-                <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
-                <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Data</th>
-                <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Ações</th>
+                <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                  Arquivo
+                </th>
+                <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                  Status
+                </th>
+                <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                  Data
+                </th>
+                <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                  Ações
+                </th>
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-200 bg-white">
@@ -55,11 +64,11 @@ export function AdminProvas() {
                     <StatusBadge status={prova.status} />
                   </td>
                   <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                    {format(new Date(prova.dataCriacao), 'dd/MM/yyyy HH:mm')}
+                    {format(new Date(prova.dataCriacao), "dd/MM/yyyy HH:mm")}
                   </td>
                   <td className="whitespace-nowrap px-3 py-4 text-sm">
                     <div className="flex space-x-2">
-                      {prova.status === 'CONCLUIDO' && (
+                      {prova.status === "CONCLUIDO" && (
                         <>
                           <a
                             href={`/api/provas/relatorio/${prova.checksumSha256}`}
@@ -79,12 +88,15 @@ export function AdminProvas() {
                           </a>
                         </>
                       )}
-                      {prova.status === 'ERRO' && (
+                      {prova.status === "ERRO" && (
                         <span className="text-red-600">
-                          {prova.error ? prova.error.substring(0, 50) + "..." : "Erro desconhecido"}
+                          {prova.error
+                            ? prova.error.substring(0, 50) + "..."
+                            : "Erro desconhecido"}
                         </span>
                       )}
-                      {(prova.status === 'PENDENTE' || prova.status === 'PROCESSANDO') && (
+                      {(prova.status === "PENDENTE" ||
+                        prova.status === "PROCESSANDO") && (
                         <span className="text-blue-600">Processando...</span>
                       )}
                     </div>
@@ -99,16 +111,18 @@ export function AdminProvas() {
   );
 }
 
-function StatusBadge({ status }: { status: Prova['status'] }) {
+function StatusBadge({ status }: { status: Prova["status"] }) {
   const colors = {
-    PENDENTE: 'bg-yellow-100 text-yellow-800',
-    PROCESSANDO: 'bg-blue-100 text-blue-800',
-    CONCLUIDO: 'bg-green-100 text-green-800',
-    ERRO: 'bg-red-100 text-red-800'
+    PENDENTE: "bg-yellow-100 text-yellow-800",
+    PROCESSANDO: "bg-blue-100 text-blue-800",
+    CONCLUIDO: "bg-green-100 text-green-800",
+    ERRO: "bg-red-100 text-red-800",
   };
 
   return (
-    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[status]}`}>
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[status]}`}
+    >
       {status}
     </span>
   );

src/components/provas/ClientProvaUpload.tsx

@@ -1,45 +1,49 @@
-import { useState, useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useDropzone } from 'react-dropzone';
-import { toast } from 'react-toastify';
+import { useState, useCallback, useEffect } from "react";
+import { useDropzone } from "react-dropzone";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
 
 export function ClientProvaUpload() {
   const [file, setFile] = useState<File | null>(null);
   const [uploading, setUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
-  const [userLocation, setUserLocation] = useState<{ latitude: number; longitude: number } | null>(null);
-  const [locationPermission, setLocationPermission] = useState<string>('pending');
+  const [userLocation, setUserLocation] = useState<{
+    latitude: number;
+    longitude: number;
+  } | null>(null);
+  const [locationPermission, setLocationPermission] =
+    useState<string>("pending");
   const [filePreview, setFilePreview] = useState<string | null>(null);
   const navigate = useNavigate();
 
   // Tentar obter a localização do usuário quando o componente montar
   useEffect(() => {
     if (navigator.geolocation) {
-      setLocationPermission('requesting');
+      setLocationPermission("requesting");
 
       navigator.geolocation.getCurrentPosition(
         (position) => {
-          console.log('Localização obtida com sucesso');
+          console.log("Localização obtida com sucesso");
           setUserLocation({
             latitude: position.coords.latitude,
-            longitude: position.coords.longitude
+            longitude: position.coords.longitude,
           });
-          setLocationPermission('granted');
+          setLocationPermission("granted");
         },
         (error) => {
-          console.log('Erro ao obter localização:', error.message);
-          setLocationPermission('denied');
+          console.log("Erro ao obter localização:", error.message);
+          setLocationPermission("denied");
         },
         {
           enableHighAccuracy: true,
           timeout: 5000,
-          maximumAge: 0 
-        }
+          maximumAge: 0,
+        },
       );
     } else {
-      console.log('Geolocalização não suportada pelo navegador');
-      setLocationPermission('unsupported');
+      console.log("Geolocalização não suportada pelo navegador");
+      setLocationPermission("unsupported");
     }
   }, []);
 
@@ -49,7 +53,7 @@ export function ClientProvaUpload() {
       setFile(selectedFile);
 
       // Criar preview para imagens
-      if (selectedFile.type.startsWith('image/')) {
+      if (selectedFile.type.startsWith("image/")) {
         const reader = new FileReader();
         reader.onload = () => {
           setFilePreview(reader.result as string);
@@ -64,17 +68,17 @@ export function ClientProvaUpload() {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     accept: {
-      'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
-      'application/pdf': ['.pdf']
+      "image/*": [".jpg", ".jpeg", ".png", ".gif", ".webp"],
+      "application/pdf": [".pdf"],
     },
     multiple: false,
-    maxSize: 10 * 1024 * 1024 // 10MB
+    maxSize: 10 * 1024 * 1024, // 10MB
   });
 
   const handleSubmit = async () => {
     try {
       if (!file) {
-        toast.error('Por favor, selecione um arquivo primeiro');
+        toast.error("Por favor, selecione um arquivo primeiro");
         return;
       }
 
@@ -85,44 +89,52 @@ export function ClientProvaUpload() {
       const formData = new FormData();
 
       // Adicionar arquivo com todas as informações preservadas
-      formData.append('files', file);
-      formData.append('modification_times', String(file.lastModified));
-      formData.append('file_names', file.name);
-      formData.append('file_sizes', String(file.size));
-      formData.append('file_types', file.type);
+      formData.append("files", file);
+      formData.append("modification_times", String(file.lastModified));
+      formData.append("file_names", file.name);
+      formData.append("file_sizes", String(file.size));
+      formData.append("file_types", file.type);
 
       // Adicionar metadados de contexto
-      formData.append('user_agent', navigator.userAgent);
-      formData.append('language', navigator.language);
-      formData.append('viewport_width', String(window.innerWidth));
-      formData.append('viewport_height', String(window.innerHeight));
-      formData.append('referrer', document.referrer);
-      formData.append('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
-      formData.append('timezone_offset', String(new Date().getTimezoneOffset()));
-      formData.append('platform', navigator.platform);
-      formData.append('cookies_enabled', String(navigator.cookieEnabled));
+      formData.append("user_agent", navigator.userAgent);
+      formData.append("language", navigator.language);
+      formData.append("viewport_width", String(window.innerWidth));
+      formData.append("viewport_height", String(window.innerHeight));
+      formData.append("referrer", document.referrer);
+      formData.append(
+        "timezone",
+        Intl.DateTimeFormat().resolvedOptions().timeZone,
+      );
+      formData.append(
+        "timezone_offset",
+        String(new Date().getTimezoneOffset()),
+      );
+      formData.append("platform", navigator.platform);
+      formData.append("cookies_enabled", String(navigator.cookieEnabled));
 
       // Adicionar informações de browser detalhadas
       try {
-        const pluginsInfo = Array.from(navigator.plugins).map(p => p.name).join(',');
-        formData.append('browser_plugins', pluginsInfo);
+        const pluginsInfo = Array.from(navigator.plugins)
+          .map((p) => p.name)
+          .join(",");
+        formData.append("browser_plugins", pluginsInfo);
       } catch (e) {
-        formData.append('browser_plugins', 'não disponível');
+        formData.append("browser_plugins", "não disponível");
       }
 
       // Adicionar dados de localização, se disponíveis
       if (userLocation) {
-        formData.append('latitude', String(userLocation.latitude));
-        formData.append('longitude', String(userLocation.longitude));
+        formData.append("latitude", String(userLocation.latitude));
+        formData.append("longitude", String(userLocation.longitude));
       }
-      formData.append('location_permission', locationPermission);
+      formData.append("location_permission", locationPermission);
 
       // Adicionar timestamp preciso do cliente
-      formData.append('client_timestamp', new Date().toISOString());
+      formData.append("client_timestamp", new Date().toISOString());
 
       // Criar simulação de progresso
       const progressInterval = setInterval(() => {
-        setUploadProgress(prev => {
+        setUploadProgress((prev) => {
           if (prev >= 95) {
             clearInterval(progressInterval);
             return prev;
@@ -131,8 +143,8 @@ export function ClientProvaUpload() {
         });
       }, 300);
 
-      const response = await fetch('/api/provas/upload', {
-        method: 'POST',
+      const response = await fetch("/api/provas/upload", {
+        method: "POST",
         body: formData,
       });
 
@@ -146,9 +158,10 @@ export function ClientProvaUpload() {
 
         try {
           const errorJson = JSON.parse(errorText);
-          errorMessage = errorJson.error || errorJson.details || 'Erro ao enviar arquivo';
+          errorMessage =
+            errorJson.error || errorJson.details || "Erro ao enviar arquivo";
         } catch {
-          errorMessage = errorText || 'Erro ao enviar arquivo';
+          errorMessage = errorText || "Erro ao enviar arquivo";
         }
 
         throw new Error(errorMessage);
@@ -158,17 +171,18 @@ export function ClientProvaUpload() {
       const result = await response.json();
 
       if (result.id) {
-        toast.success('Arquivo enviado com sucesso!');
+        toast.success("Arquivo enviado com sucesso!");
         // Navegar para a página de status
         navigate(`/public/provas/status/${result.id}`);
       } else {
-        throw new Error('ID do documento não encontrado na resposta');
+        throw new Error("ID do documento não encontrado na resposta");
       }
-      
     } catch (error) {
-      console.error('Erro detalhado no upload:', error);
-      setError(error.message || 'Erro ao enviar arquivo. Por favor, tente novamente.');
-      toast.error('Falha no upload: ' + error.message);
+      console.error("Erro detalhado no upload:", error);
+      setError(
+        error.message || "Erro ao enviar arquivo. Por favor, tente novamente.",
+      );
+      toast.error("Falha no upload: " + error.message);
     } finally {
       setUploading(false);
     }
@@ -178,15 +192,20 @@ export function ClientProvaUpload() {
     <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 flex flex-col justify-center">
       <div className="max-w-3xl mx-auto w-full">
         <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">Validação Digital de Documentos</h1>
+          <h1 className="text-3xl font-bold text-gray-900">
+            Validação Digital de Documentos
+          </h1>
           <p className="mt-2 text-lg text-gray-600">
-            Valide e proteja a autenticidade de seus documentos e imagens com timestamping seguro
+            Valide e proteja a autenticidade de seus documentos e imagens com
+            timestamping seguro
           </p>
         </div>
 
         <div className="bg-white shadow overflow-hidden rounded-lg">
           <div className="px-4 py-5 sm:px-6 bg-blue-700 text-white">
-            <h2 className="text-xl font-semibold">Upload de Documento para Validação</h2>
+            <h2 className="text-xl font-semibold">
+              Upload de Documento para Validação
+            </h2>
             <p className="mt-1 text-sm text-blue-100">
               Formatos aceitos: JPG, PNG, GIF, PDF (máx. 10MB)
             </p>
@@ -195,7 +214,9 @@ export function ClientProvaUpload() {
             <div
               {...getRootProps()}
               className={`border-2 border-dashed rounded-lg p-10 text-center cursor-pointer transition-colors ${
-                isDragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-400'
+                isDragActive
+                  ? "border-blue-500 bg-blue-50"
+                  : "border-gray-300 hover:border-blue-400"
               }`}
             >
               <input {...getInputProps()} />
@@ -210,9 +231,11 @@ export function ClientProvaUpload() {
                     />
                   </div>
                   <p className="text-sm text-gray-600">
-                    {file?.name} ({(file?.size || 0) / 1024 < 1024 
+                    {file?.name} (
+                    {(file?.size || 0) / 1024 < 1024
                       ? `${Math.round((file?.size || 0) / 1024)} KB`
-                      : `${Math.round((file?.size || 0) / 1024 / 1024 * 10) / 10} MB`})
+                      : `${Math.round(((file?.size || 0) / 1024 / 1024) * 10) / 10} MB`}
+                    )
                   </p>
                   <button
                     onClick={(e) => {
@@ -227,8 +250,17 @@ export function ClientProvaUpload() {
                 </div>
               ) : (
                 <div className="space-y-2">
-                  <svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
-                    <path d="M24 8v16m0 0v16m0-16h16m-16 0H8" strokeWidth="2" strokeLinecap="round" />
+                  <svg
+                    className="mx-auto h-12 w-12 text-gray-400"
+                    stroke="currentColor"
+                    fill="none"
+                    viewBox="0 0 48 48"
+                  >
+                    <path
+                      d="M24 8v16m0 0v16m0-16h16m-16 0H8"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
                   </svg>
                   <p className="text-lg font-medium text-gray-900">
                     {isDragActive
@@ -236,21 +268,24 @@ export function ClientProvaUpload() {
                       : "Arraste e solte um arquivo aqui, ou clique para selecionar"}
                   </p>
                   <p className="text-xs text-gray-500">
-                    Os metadados originais e informações de contexto serão preservados para melhor validação
+                    Os metadados originais e informações de contexto serão
+                    preservados para melhor validação
                   </p>
                 </div>
               )}
             </div>
 
-            {locationPermission === 'granted' && (
+            {locationPermission === "granted" && (
               <div className="mt-4 text-sm text-green-600">
-                ✓ Localização obtida: Esta informação ajudará na validação do documento
+                ✓ Localização obtida: Esta informação ajudará na validação do
+                documento
               </div>
             )}
 
-            {locationPermission === 'denied' && (
+            {locationPermission === "denied" && (
               <div className="mt-4 text-sm text-yellow-600">
-                ⚠️ Localização não permitida: A validação ainda funcionará, mas sem dados de geolocalização
+                ⚠️ Localização não permitida: A validação ainda funcionará, mas
+                sem dados de geolocalização
               </div>
             )}
 
@@ -278,8 +313,8 @@ export function ClientProvaUpload() {
                   <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
                     <div
                       style={{ width: `${uploadProgress}%` }}
-                      className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 transition-all duration-300">
-                    </div>
+                      className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 transition-all duration-300"
+                    ></div>
                   </div>
                 </div>
               </div>
@@ -290,20 +325,22 @@ export function ClientProvaUpload() {
                 onClick={handleSubmit}
                 disabled={!file || uploading}
                 className={`px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white 
-                  ${!file || uploading 
-                    ? 'bg-gray-300 cursor-not-allowed' 
-                    : 'bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
+                  ${
+                    !file || uploading
+                      ? "bg-gray-300 cursor-not-allowed"
+                      : "bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                   }`}
               >
-                {uploading ? 'Enviando...' : 'Enviar para Validação'}
+                {uploading ? "Enviando..." : "Enviar para Validação"}
               </button>
             </div>
           </div>
           <div className="px-4 py-4 sm:px-6 bg-gray-50 border-t border-gray-200">
             <div className="text-xs text-gray-500">
-              <strong>Nota sobre privacidade:</strong> Este serviço coleta metadados como informações do dispositivo, 
-              localização e timestamp para garantir a validação adequada do documento. Todos os dados são criptografados 
-              e armazenados com segurança.
+              <strong>Nota sobre privacidade:</strong> Este serviço coleta
+              metadados como informações do dispositivo, localização e timestamp
+              para garantir a validação adequada do documento. Todos os dados
+              são criptografados e armazenados com segurança.
             </div>
           </div>
         </div>

src/components/provas/ProvaStatus.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { Card } from '../../components/ui/Card';
-import { format } from 'date-fns';
+import { format } from "date-fns";
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+
+import { Card } from "../../components/ui/Card";
 
 interface ProvaStatus {
   id: string;
-  status: 'PENDENTE' | 'PROCESSANDO' | 'CONCLUIDO' | 'ERRO';
+  status: "PENDENTE" | "PROCESSANDO" | "CONCLUIDO" | "ERRO";
   fileName: string;
   checksumSha256: string;
   checksumSha512: string;
@@ -28,19 +29,19 @@ export function ProvaStatus() {
         // Verificar se a resposta foi bem-sucedida
         if (!response.ok) {
           const errorText = await response.text();
-          throw new Error(errorText || 'Erro ao buscar status');
+          throw new Error(errorText || "Erro ao buscar status");
         }
 
         const data = await response.json();
         setStatus(data);
 
         // Continuar verificando se ainda estiver processando
-        if (data.status === 'PENDENTE' || data.status === 'PROCESSANDO') {
+        if (data.status === "PENDENTE" || data.status === "PROCESSANDO") {
           setTimeout(checkStatus, 2000);
         }
       } catch (error) {
-        console.error('Erro detalhado ao verificar status:', error);
-        setError('Erro ao verificar status da prova');
+        console.error("Erro detalhado ao verificar status:", error);
+        setError("Erro ao verificar status da prova");
       }
     };
 
@@ -48,8 +49,8 @@ export function ProvaStatus() {
   }, [id]);
 
   const handleDownloadReport = () => {
-    if (status && status.status === 'CONCLUIDO') {
-      window.open(`/api/provas/relatorio/${status.checksumSha256}`, '_blank');
+    if (status && status.status === "CONCLUIDO") {
+      window.open(`/api/provas/relatorio/${status.checksumSha256}`, "_blank");
     }
   };
 
@@ -59,13 +60,14 @@ export function ProvaStatus() {
     }
   };
 
-  if (error) return (
+  if (error)
+    return (
       <div className="max-w-3xl mx-auto p-4">
         <Card>
           <div className="p-6 text-center">
             <div className="text-red-600 mb-4">{error}</div>
             <button
-            onClick={() => navigate('/provas/upload')}
+              onClick={() => navigate("/provas/upload")}
               className="px-4 py-2 bg-blue-600 text-white rounded-lg"
             >
               Voltar para Upload
@@ -75,7 +77,8 @@ export function ProvaStatus() {
       </div>
     );
 
-  if (!status) return (
+  if (!status)
+    return (
       <div className="max-w-3xl mx-auto p-4">
         <Card>
           <div className="p-6 text-center">
@@ -99,19 +102,26 @@ export function ProvaStatus() {
 
             <div>
               <p className="text-sm text-gray-500">Status</p>
-              <p className={`font-medium ${
-                status.status === 'CONCLUIDO' ? 'text-green-600' :
-                status.status === 'ERRO' ? 'text-red-600' :
-                'text-blue-600'
-              }`}>
-                {status.status === 'PENDENTE' ? 'Em fila de processamento' :
-                 status.status === 'PROCESSANDO' ? 'Processando...' :
-                 status.status === 'CONCLUIDO' ? 'Concluído' :
-                 'Erro ao processar'}
+              <p
+                className={`font-medium ${
+                  status.status === "CONCLUIDO"
+                    ? "text-green-600"
+                    : status.status === "ERRO"
+                      ? "text-red-600"
+                      : "text-blue-600"
+                }`}
+              >
+                {status.status === "PENDENTE"
+                  ? "Em fila de processamento"
+                  : status.status === "PROCESSANDO"
+                    ? "Processando..."
+                    : status.status === "CONCLUIDO"
+                      ? "Concluído"
+                      : "Erro ao processar"}
               </p>
             </div>
 
-            {status.status === 'CONCLUIDO' && (
+            {status.status === "CONCLUIDO" && (
               <>
                 <div>
                   <p className="text-sm text-gray-500">Checksums</p>
@@ -140,14 +150,14 @@ export function ProvaStatus() {
               </>
             )}
 
-            {status.status === 'ERRO' && (
+            {status.status === "ERRO" && (
               <div className="text-red-600">
                 <p className="text-sm">Erro ao processar arquivo:</p>
                 <p className="mt-1">{status.error}</p>
 
                 <div className="mt-4">
                   <button
-                    onClick={() => navigate('/provas/upload')}
+                    onClick={() => navigate("/provas/upload")}
                     className="px-4 py-2 bg-blue-600 text-white rounded-lg"
                   >
                     Tentar Novamente

src/components/provas/ProvaUpload.tsx

@@ -1,47 +1,53 @@
-import { useState, useCallback, useEffect } from 'react';
-import { useDropzone } from 'react-dropzone';
-import { Card } from '../../components/ui/Card';
-import { useNavigate } from 'react-router-dom';
+import { useState, useCallback, useEffect } from "react";
+import { useDropzone } from "react-dropzone";
+import { useNavigate } from "react-router-dom";
+
+import { Card } from "../../components/ui/Card";
 
 export function ProvaUpload() {
   const [uploading, setUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
-  const [userLocation, setUserLocation] = useState<{ latitude: number; longitude: number } | null>(null);
-  const [locationPermission, setLocationPermission] = useState<string>('pending');
+  const [userLocation, setUserLocation] = useState<{
+    latitude: number;
+    longitude: number;
+  } | null>(null);
+  const [locationPermission, setLocationPermission] =
+    useState<string>("pending");
   const navigate = useNavigate();
 
   // Tentar obter a localização do usuário quando o componente montar
   useEffect(() => {
     if (navigator.geolocation) {
-      setLocationPermission('requesting');
+      setLocationPermission("requesting");
 
       navigator.geolocation.getCurrentPosition(
         (position) => {
-          console.log('Localização obtida com sucesso');
+          console.log("Localização obtida com sucesso");
           setUserLocation({
             latitude: position.coords.latitude,
-            longitude: position.coords.longitude
+            longitude: position.coords.longitude,
           });
-          setLocationPermission('granted');
+          setLocationPermission("granted");
         },
         (error) => {
-          console.log('Erro ao obter localização:', error.message);
-          setLocationPermission('denied');
+          console.log("Erro ao obter localização:", error.message);
+          setLocationPermission("denied");
         },
         {
           enableHighAccuracy: true,
           timeout: 5000,
-          maximumAge: 0 
-        }
+          maximumAge: 0,
+        },
       );
     } else {
-      console.log('Geolocalização não suportada pelo navegador');
-      setLocationPermission('unsupported');
+      console.log("Geolocalização não suportada pelo navegador");
+      setLocationPermission("unsupported");
     }
   }, []);
 
-  const onDrop = useCallback(async (acceptedFiles: File[]) => {
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
       try {
         setUploading(true);
         setUploadProgress(0);
@@ -51,45 +57,53 @@ export function ProvaUpload() {
 
         // Adicionar informações de cada arquivo
         acceptedFiles.forEach((file) => {
-        formData.append('files', file);
-        formData.append('modification_times', String(file.lastModified));
-        formData.append('file_names', file.name);
-        formData.append('file_sizes', String(file.size));
-        formData.append('file_types', file.type);
+          formData.append("files", file);
+          formData.append("modification_times", String(file.lastModified));
+          formData.append("file_names", file.name);
+          formData.append("file_sizes", String(file.size));
+          formData.append("file_types", file.type);
         });
 
         // Adicionar metadados de contexto
-      formData.append('user_agent', navigator.userAgent);
-      formData.append('language', navigator.language);
-      formData.append('viewport_width', String(window.innerWidth));
-      formData.append('viewport_height', String(window.innerHeight));
-      formData.append('referrer', document.referrer);
-      formData.append('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
-      formData.append('timezone_offset', String(new Date().getTimezoneOffset()));
-      formData.append('platform', navigator.platform);
-      formData.append('cookies_enabled', String(navigator.cookieEnabled));
+        formData.append("user_agent", navigator.userAgent);
+        formData.append("language", navigator.language);
+        formData.append("viewport_width", String(window.innerWidth));
+        formData.append("viewport_height", String(window.innerHeight));
+        formData.append("referrer", document.referrer);
+        formData.append(
+          "timezone",
+          Intl.DateTimeFormat().resolvedOptions().timeZone,
+        );
+        formData.append(
+          "timezone_offset",
+          String(new Date().getTimezoneOffset()),
+        );
+        formData.append("platform", navigator.platform);
+        formData.append("cookies_enabled", String(navigator.cookieEnabled));
 
         // Adicionar informações de plugins do navegador (com segurança)
         try {
-        const pluginsInfo = Array.from(navigator.plugins).map(p => p.name).join(',');
-        formData.append('browser_plugins', pluginsInfo);
+          const pluginsInfo = Array.from(navigator.plugins)
+            .map((p) => p.name)
+            .join(",");
+          formData.append("browser_plugins", pluginsInfo);
         } catch (e) {
-        formData.append('browser_plugins', 'não disponível');
+          formData.append("browser_plugins", "não disponível");
         }
 
         // Adicionar dados de localização, se disponíveis
         if (userLocation) {
-        formData.append('latitude', String(userLocation.latitude));
-        formData.append('longitude', String(userLocation.longitude));
+          formData.append("latitude", String(userLocation.latitude));
+          formData.append("longitude", String(userLocation.longitude));
         }
-      formData.append('location_permission', locationPermission);
+        formData.append("location_permission", locationPermission);
 
         // Adicionar timestamp preciso
-      formData.append('client_timestamp', new Date().toISOString());
+        formData.append("client_timestamp", new Date().toISOString());
 
         // Criar simulação de progresso
         const progressInterval = setInterval(() => {
-        setUploadProgress(prev => {
+          setUploadProgress((prev) => {
             if (prev >= 95) {
               clearInterval(progressInterval);
               return prev;
@@ -98,8 +112,8 @@ export function ProvaUpload() {
           });
         }, 300);
 
-      const response = await fetch('/api/provas/upload', {
-        method: 'POST',
+        const response = await fetch("/api/provas/upload", {
+          method: "POST",
           body: formData,
         });
 
@@ -115,10 +129,11 @@ export function ProvaUpload() {
           try {
             // Tentar parsear como JSON
             const errorData = JSON.parse(errorText);
-          errorMessage = errorData.error || errorData.details || 'Erro ao enviar arquivos';
+            errorMessage =
+              errorData.error || errorData.details || "Erro ao enviar arquivos";
           } catch {
             // Se não for JSON, usar o texto como está
-          errorMessage = errorText || 'Erro ao enviar arquivos';
+            errorMessage = errorText || "Erro ao enviar arquivos";
           }
 
           throw new Error(errorMessage);
@@ -131,23 +146,27 @@ export function ProvaUpload() {
           // Navegar para a página de status
           navigate(`/provas/status/${result.id}`);
         } else {
-        throw new Error('ID do documento não encontrado na resposta');
+          throw new Error("ID do documento não encontrado na resposta");
         }
-      
       } catch (error) {
-      console.error('Erro detalhado no upload:', error);
-      setError(error.message || 'Erro ao enviar arquivos. Por favor, tente novamente.');
+        console.error("Erro detalhado no upload:", error);
+        setError(
+          error.message ||
+            "Erro ao enviar arquivos. Por favor, tente novamente.",
+        );
       } finally {
         setUploading(false);
       }
-  }, [navigate, userLocation, locationPermission]);
+    },
+    [navigate, userLocation, locationPermission],
+  );
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     accept: {
-      'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
-      'application/pdf': ['.pdf']
-    }
+      "image/*": [".jpg", ".jpeg", ".png", ".gif"],
+      "application/pdf": [".pdf"],
+    },
   });
 
   return (
@@ -163,7 +182,7 @@ export function ProvaUpload() {
               {...getRootProps()}
               className={`
                 border-2 border-dashed p-12 rounded-lg
-                ${isDragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300'}
+                ${isDragActive ? "border-blue-500 bg-blue-50" : "border-gray-300"}
                 cursor-pointer hover:border-blue-500 transition-colors
               `}
             >
@@ -182,8 +201,8 @@ export function ProvaUpload() {
                 <div>
                   <p className="text-gray-600">
                     {isDragActive
-                      ? 'Solte os arquivos aqui...'
-                      : 'Arraste e solte arquivos aqui, ou clique para selecionar'}
+                      ? "Solte os arquivos aqui..."
+                      : "Arraste e solte arquivos aqui, ou clique para selecionar"}
                   </p>
                   <p className="text-sm text-gray-500 mt-2">
                     Arquivos suportados: PDF, JPG, PNG, GIF
@@ -209,9 +228,12 @@ export function ProvaUpload() {
                 <li>Gerar relatório PDF com todas as informações</li>
               </ul>
 
-              {locationPermission === 'denied' && (
+              {locationPermission === "denied" && (
                 <div className="mt-4 p-2 bg-yellow-50 text-yellow-700 rounded">
-                  <p>Permissão de localização negada. A validação prosseguirá sem dados de geolocalização.</p>
+                  <p>
+                    Permissão de localização negada. A validação prosseguirá sem
+                    dados de geolocalização.
+                  </p>
                 </div>
               )}
             </div>

src/components/provas/PublicProvaStatus.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useState } from 'react';
-import { useParams, Link, useNavigate } from 'react-router-dom';
-import { format } from 'date-fns';
-import ptBR from 'date-fns/locale/pt-BR';
+import ptBR, { format } from "date-fns";
+import { useEffect, useState } from "react";
+import { useParams, Link, useNavigate } from "react-router-dom";
 
 interface ProvaStatus {
   id: string;
-  status: 'PENDENTE' | 'PROCESSANDO' | 'CONCLUIDO' | 'ERRO';
+  status: "PENDENTE" | "PROCESSANDO" | "CONCLUIDO" | "ERRO";
   fileName: string;
   checksumSha256: string;
   checksumSha512: string;
@@ -39,20 +38,20 @@ export function PublicProvaStatus() {
         // Verificar se a resposta foi bem-sucedida
         if (!response.ok) {
           const errorText = await response.text();
-          throw new Error(errorText || 'Erro ao buscar status');
+          throw new Error(errorText || "Erro ao buscar status");
         }
 
         const data = await response.json();
         setStatus(data);
-        setCheckCount(prev => prev + 1);
+        setCheckCount((prev) => prev + 1);
 
         // Continuar verificando se ainda estiver processando
-        if (data.status === 'PENDENTE' || data.status === 'PROCESSANDO') {
+        if (data.status === "PENDENTE" || data.status === "PROCESSANDO") {
           setTimeout(checkStatus, 2000);
         }
       } catch (error) {
-        console.error('Erro detalhado ao verificar status:', error);
-        setError('Erro ao verificar status da prova');
+        console.error("Erro detalhado ao verificar status:", error);
+        setError("Erro ao verificar status da prova");
       }
     };
 
@@ -60,8 +59,8 @@ export function PublicProvaStatus() {
   }, [id]);
 
   const handleDownloadReport = () => {
-    if (status && status.status === 'CONCLUIDO') {
-      window.open(`/api/provas/relatorio/${status.checksumSha256}`, '_blank');
+    if (status && status.status === "CONCLUIDO") {
+      window.open(`/api/provas/relatorio/${status.checksumSha256}`, "_blank");
     }
   };
 
@@ -71,15 +70,29 @@ export function PublicProvaStatus() {
     }
   };
 
-  if (error) return (
+  if (error)
+    return (
       <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
         <div className="max-w-3xl mx-auto">
           <div className="bg-white shadow-md rounded-lg">
             <div className="p-6 text-center">
-            <svg className="w-16 h-16 text-red-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <svg
+                className="w-16 h-16 text-red-500 mx-auto mb-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
-            <div className="text-red-600 text-xl font-bold mb-4">Ocorreu um erro</div>
+              <div className="text-red-600 text-xl font-bold mb-4">
+                Ocorreu um erro
+              </div>
               <p className="text-gray-700 mb-6">{error}</p>
               <Link
                 to="/public/provas/upload"
@@ -93,14 +106,17 @@ export function PublicProvaStatus() {
       </div>
     );
 
-  if (!status && checkCount < 3) return (
+  if (!status && checkCount < 3)
+    return (
       <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
         <div className="max-w-3xl mx-auto">
           <div className="bg-white shadow-md rounded-lg">
             <div className="p-6 text-center">
               <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500 mx-auto mb-4"></div>
               <p className="text-gray-700 text-lg">Carregando informações...</p>
-            <p className="text-gray-500 text-sm mt-2">Verificando status do seu documento</p>
+              <p className="text-gray-500 text-sm mt-2">
+                Verificando status do seu documento
+              </p>
             </div>
           </div>
         </div>
@@ -117,26 +133,60 @@ export function PublicProvaStatus() {
 
           <div className="p-6">
             <div className="mb-8">
-              <div className={`text-center p-6 rounded-lg ${
-                status?.status === 'CONCLUIDO' ? 'bg-green-50' :
-                status?.status === 'ERRO' ? 'bg-red-50' :
-                'bg-blue-50'
-              }`}>
-                {status?.status === 'CONCLUIDO' ? (
+              <div
+                className={`text-center p-6 rounded-lg ${
+                  status?.status === "CONCLUIDO"
+                    ? "bg-green-50"
+                    : status?.status === "ERRO"
+                      ? "bg-red-50"
+                      : "bg-blue-50"
+                }`}
+              >
+                {status?.status === "CONCLUIDO" ? (
                   <>
-                    <svg className="w-16 h-16 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    <svg
+                      className="w-16 h-16 text-green-500 mx-auto mb-4"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
                     </svg>
-                    <h3 className="text-2xl font-bold text-green-700 mb-2">Validação Concluída</h3>
-                    <p className="text-gray-700">Seu documento foi validado com sucesso</p>
+                    <h3 className="text-2xl font-bold text-green-700 mb-2">
+                      Validação Concluída
+                    </h3>
+                    <p className="text-gray-700">
+                      Seu documento foi validado com sucesso
+                    </p>
                   </>
-                ) : status?.status === 'ERRO' ? (
+                ) : status?.status === "ERRO" ? (
                   <>
-                    <svg className="w-16 h-16 text-red-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    <svg
+                      className="w-16 h-16 text-red-500 mx-auto mb-4"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
                     </svg>
-                    <h3 className="text-2xl font-bold text-red-700 mb-2">Falha na Validação</h3>
-                    <p className="text-gray-700">Ocorreu um erro durante o processamento</p>
+                    <h3 className="text-2xl font-bold text-red-700 mb-2">
+                      Falha na Validação
+                    </h3>
+                    <p className="text-gray-700">
+                      Ocorreu um erro durante o processamento
+                    </p>
                   </>
                 ) : (
                   <>
@@ -144,108 +194,146 @@ export function PublicProvaStatus() {
                       <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
                     </div>
                     <h3 className="text-2xl font-bold text-blue-700 mb-2">
-                      {status?.status === 'PENDENTE' ? 'Aguardando Processamento' : 'Processando...'}
+                      {status?.status === "PENDENTE"
+                        ? "Aguardando Processamento"
+                        : "Processando..."}
                     </h3>
-                    <p className="text-gray-700">Seu documento está sendo validado</p>
+                    <p className="text-gray-700">
+                      Seu documento está sendo validado
+                    </p>
                   </>
                 )}
               </div>
             </div>
 
             <div className="mb-6">
-              <h3 className="text-lg font-semibold mb-3 text-gray-800">Detalhes do Documento</h3>
+              <h3 className="text-lg font-semibold mb-3 text-gray-800">
+                Detalhes do Documento
+              </h3>
               <div className="bg-gray-50 rounded-lg p-4 space-y-3">
                 <div>
                   <p className="text-sm text-gray-500">Arquivo</p>
-                  <p className="font-medium text-gray-800">{status?.fileName}</p>
+                  <p className="font-medium text-gray-800">
+                    {status?.fileName}
+                  </p>
                 </div>
 
-                {status?.status === 'CONCLUIDO' && (
+                {status?.status === "CONCLUIDO" && (
                   <>
                     <div>
-                      <p className="text-sm text-gray-500">Identificador Digital (SHA-256)</p>
-                      <p className="font-mono text-xs text-gray-700 break-all">{status.checksumSha256}</p>
+                      <p className="text-sm text-gray-500">
+                        Identificador Digital (SHA-256)
+                      </p>
+                      <p className="font-mono text-xs text-gray-700 break-all">
+                        {status.checksumSha256}
+                      </p>
                     </div>
 
                     <div>
-                      <p className="text-sm text-gray-500">Data de Processamento</p>
+                      <p className="text-sm text-gray-500">
+                        Data de Processamento
+                      </p>
                       <p className="text-gray-700">
-                        {format(new Date(), 'dd/MM/yyyy HH:mm:ss', { locale: ptBR })}
+                        {format(new Date(), "dd/MM/yyyy HH:mm:ss", {
+                          locale: ptBR,
+                        })}
                       </p>
                     </div>
 
                     {/* Garantir exibição da data de modificação */}
-                    {(status.metadata?.file_specific?.modified || status.metadata?.modification_times) && (
+                    {(status.metadata?.file_specific?.modified ||
+                      status.metadata?.modification_times) && (
                       <div>
-                        <p className="text-sm text-gray-500">Data de Modificação Original</p>
+                        <p className="text-sm text-gray-500">
+                          Data de Modificação Original
+                        </p>
                         <p className="text-gray-700">
                           {format(
                             new Date(
                               status.metadata.file_specific?.modified ||
-                              (status.metadata.modification_times ? 
-                               parseInt(status.metadata.modification_times) : Date.now())
+                                (status.metadata.modification_times
+                                  ? parseInt(status.metadata.modification_times)
+                                  : Date.now()),
                             ),
-                            'dd/MM/yyyy HH:mm:ss', 
-                            { locale: ptBR }
+                            "dd/MM/yyyy HH:mm:ss",
+                            { locale: ptBR },
                           )}
                         </p>
                         <p className="text-xs text-gray-500">
-                          Esta é a data real da última modificação do arquivo, obtida dos metadados originais
+                          Esta é a data real da última modificação do arquivo,
+                          obtida dos metadados originais
                         </p>
                       </div>
                     )}
 
                     {/* Informações de conexão aprimoradas */}
                     <div>
-                      <p className="text-sm text-gray-500">Informações de Conexão</p>
+                      <p className="text-sm text-gray-500">
+                        Informações de Conexão
+                      </p>
                       <p className="text-gray-700">
-                        IP: {status.metadata?.ipAddress || 
+                        IP:{" "}
+                        {status.metadata?.ipAddress ||
                           status.metadata?.connectionInfo?.ip ||
-                             status.metadata?.connectionInfo?.socketAddress || '::1'}, 
-                        Porta: {status.metadata?.clientPort || 
-                                status.metadata?.connectionInfo?.socketPort || '61465'}
+                          status.metadata?.connectionInfo?.socketAddress ||
+                          "::1"}
+                        , Porta:{" "}
+                        {status.metadata?.clientPort ||
+                          status.metadata?.connectionInfo?.socketPort ||
+                          "61465"}
                       </p>
                       <p className="text-xs text-gray-500">
-                        Família: {status.metadata?.connectionInfo?.remoteFamily || 
-                                 ((status.metadata?.ipAddress || '::1').includes(':') ? 'IPv6' : 'IPv4')}
+                        Família:{" "}
+                        {status.metadata?.connectionInfo?.remoteFamily ||
+                          ((status.metadata?.ipAddress || "::1").includes(":")
+                            ? "IPv6"
+                            : "IPv4")}
                       </p>
                     </div>
 
                     {/* Adicionar geolocalização se disponível */}
-                    {(status.metadata?.latitude !== undefined || status.metadata?.longitude !== undefined) && (
+                    {(status.metadata?.latitude !== undefined ||
+                      status.metadata?.longitude !== undefined) && (
                       <div>
                         <p className="text-sm text-gray-500">Geolocalização</p>
                         <p className="text-gray-700">
-                          Coordenadas: {status.metadata.latitude || 'N/A'}, {status.metadata.longitude || 'N/A'}
+                          Coordenadas: {status.metadata.latitude || "N/A"},{" "}
+                          {status.metadata.longitude || "N/A"}
                         </p>
                         <p className="text-xs text-gray-500">
-                          Permissão: {status.metadata.location_permission || 'não especificada'}
+                          Permissão:{" "}
+                          {status.metadata.location_permission ||
+                            "não especificada"}
                         </p>
                       </div>
                     )}
                   </>
                 )}
 
-                {status?.status === 'PROCESSANDO' && (
+                {status?.status === "PROCESSANDO" && (
                   <div className="pt-2">
                     <div className="w-full bg-gray-200 rounded-full h-2.5">
                       <div className="bg-blue-600 h-2.5 rounded-full w-3/4"></div>
                     </div>
-                    <p className="text-sm text-gray-500 mt-2">Validando autenticidade e gerando relatório...</p>
+                    <p className="text-sm text-gray-500 mt-2">
+                      Validando autenticidade e gerando relatório...
+                    </p>
                   </div>
                 )}
 
-                {status?.status === 'ERRO' && (
+                {status?.status === "ERRO" && (
                   <div className="bg-red-50 border border-red-200 rounded-md p-3 text-red-700">
                     <p className="font-medium">Erro no processamento:</p>
-                    <p className="text-sm">{status.error || 'Falha não especificada'}</p>
+                    <p className="text-sm">
+                      {status.error || "Falha não especificada"}
+                    </p>
                   </div>
                 )}
               </div>
             </div>
 
             <div className="flex flex-col sm:flex-row gap-3 justify-center">
-              {status?.status === 'CONCLUIDO' && (
+              {status?.status === "CONCLUIDO" && (
                 <>
                   <button
                     onClick={handleViewVerification}
@@ -263,7 +351,7 @@ export function PublicProvaStatus() {
                 </>
               )}
 
-              {status?.status === 'ERRO' && (
+              {status?.status === "ERRO" && (
                 <Link
                   to="/public/provas/upload"
                   className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"
@@ -275,7 +363,8 @@ export function PublicProvaStatus() {
           </div>
 
           <div className="bg-gray-50 px-6 py-4 text-center text-sm text-gray-500 rounded-b-lg">
-            Validação Digital AdvX - Preservando a integridade e autenticidade dos seus documentos
+            Validação Digital AdvX - Preservando a integridade e autenticidade
+            dos seus documentos
           </div>
         </div>
       </div>

src/components/provas/PublicVerificarProva.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useState } from 'react';
-import { useParams, Link } from 'react-router-dom';
-import { format, isValid } from 'date-fns';
-import ptBR from 'date-fns/locale/pt-BR';
+import ptBR, { format, isValid } from "date-fns";
+import { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
 
 interface ProvaVerificacao {
   verified: boolean;
@@ -32,15 +31,15 @@ export function PublicVerificarProva() {
         const response = await fetch(`/api/provas/verificar/${hash}`);
 
         if (!response.ok) {
-          throw new Error(response.statusText || 'Falha na verificação');
+          throw new Error(response.statusText || "Falha na verificação");
         }
 
         const data = await response.json();
-        console.log('Dados recebidos:', data);
+        console.log("Dados recebidos:", data);
         setResult(data);
       } catch (error) {
-        console.error('Erro ao verificar:', error);
-        setError('Não foi possível verificar a autenticidade do documento.');
+        console.error("Erro ao verificar:", error);
+        setError("Não foi possível verificar a autenticidade do documento.");
       } finally {
         setLoading(false);
       }
@@ -53,20 +52,20 @@ export function PublicVerificarProva() {
 
   // Função segura para formatar datas
   const formatDate = (dateString: string | undefined | null) => {
-    if (!dateString) return 'Data não disponível';
+    if (!dateString) return "Data não disponível";
 
     try {
       const date = new Date(dateString);
 
       if (!isValid(date)) {
-        console.warn('Data inválida:', dateString);
-        return 'Data inválida';
+        console.warn("Data inválida:", dateString);
+        return "Data inválida";
       }
 
-      return format(date, 'dd/MM/yyyy HH:mm:ss', { locale: ptBR });
+      return format(date, "dd/MM/yyyy HH:mm:ss", { locale: ptBR });
     } catch (error) {
-      console.error('Erro ao formatar data:', error);
-      return 'Erro na formatação da data';
+      console.error("Erro ao formatar data:", error);
+      return "Erro na formatação da data";
     }
   };
 
@@ -79,7 +78,9 @@ export function PublicVerificarProva() {
               <div className="h-4 bg-gray-300 rounded w-3/4 mx-auto mb-4"></div>
               <div className="h-4 bg-gray-300 rounded w-1/2 mx-auto"></div>
             </div>
-            <p className="mt-4 text-gray-500 text-center">Carregando informações...</p>
+            <p className="mt-4 text-gray-500 text-center">
+              Carregando informações...
+            </p>
           </div>
         </div>
       </div>
@@ -92,11 +93,26 @@ export function PublicVerificarProva() {
         <div className="max-w-4xl mx-auto">
           <div className="bg-white rounded-lg shadow">
             <div className="p-6 text-center">
-              <svg className="w-16 h-16 text-red-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <svg
+                className="w-16 h-16 text-red-500 mx-auto mb-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
-              <h2 className="text-2xl font-bold text-red-600 mb-4">Verificação Falhou</h2>
-              <p className="text-gray-600 mb-6">{error || 'Não foi possível verificar este documento.'}</p>
+              <h2 className="text-2xl font-bold text-red-600 mb-4">
+                Verificação Falhou
+              </h2>
+              <p className="text-gray-600 mb-6">
+                {error || "Não foi possível verificar este documento."}
+              </p>
               <Link
                 to="/provas/upload"
                 className="inline-flex items-center px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700"
@@ -118,20 +134,47 @@ export function PublicVerificarProva() {
             <div className="text-center mb-8">
               {result.verified ? (
                 <>
-                  <svg className="w-20 h-20 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  <svg
+                    className="w-20 h-20 text-green-500 mx-auto mb-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
                   </svg>
-                  <h2 className="text-3xl font-bold text-green-600 mb-2">Documento Verificado</h2>
+                  <h2 className="text-3xl font-bold text-green-600 mb-2">
+                    Documento Verificado
+                  </h2>
                   <p className="text-gray-600 text-lg">
-                    Este documento foi validado digitalmente e possui registro de autenticidade.
+                    Este documento foi validado digitalmente e possui registro
+                    de autenticidade.
                   </p>
                 </>
               ) : (
                 <>
-                  <svg className="w-20 h-20 text-red-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  <svg
+                    className="w-20 h-20 text-red-500 mx-auto mb-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
                   </svg>
-                  <h2 className="text-3xl font-bold text-red-600 mb-2">Verificação com Problemas</h2>
+                  <h2 className="text-3xl font-bold text-red-600 mb-2">
+                    Verificação com Problemas
+                  </h2>
                   <p className="text-gray-600 text-lg">{result.message}</p>
                 </>
               )}
@@ -140,45 +183,73 @@ export function PublicVerificarProva() {
             {result.prova && (
               <div className="space-y-6">
                 <div className="border-t border-b border-gray-200 py-6">
-                  <h3 className="text-xl font-semibold text-gray-800 mb-4">Informações do Documento</h3>
+                  <h3 className="text-xl font-semibold text-gray-800 mb-4">
+                    Informações do Documento
+                  </h3>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <DetailItem label="Nome do Arquivo" value={result.prova.fileName} />
-                    <DetailItem label="Data de Validação" value={formatDate(result.prova.dataCriacao)} />
-                    <DetailItem label="Última Verificação" value={formatDate(result.prova.dataValida)} />
+                    <DetailItem
+                      label="Nome do Arquivo"
+                      value={result.prova.fileName}
+                    />
+                    <DetailItem
+                      label="Data de Validação"
+                      value={formatDate(result.prova.dataCriacao)}
+                    />
+                    <DetailItem
+                      label="Última Verificação"
+                      value={formatDate(result.prova.dataValida)}
+                    />
                   </div>
                 </div>
 
                 <div className="border-b border-gray-200 py-6">
-                  <h3 className="text-xl font-semibold text-gray-800 mb-4">Informações de Segurança</h3>
+                  <h3 className="text-xl font-semibold text-gray-800 mb-4">
+                    Informações de Segurança
+                  </h3>
                   <div className="space-y-3 font-mono text-sm overflow-auto bg-gray-50 p-4 rounded-lg">
-                    <DetailItem label="SHA-256" value={result.prova.checksumSha256} />
-                    <DetailItem label="SHA-512" value={result.prova.checksumSha512} />
+                    <DetailItem
+                      label="SHA-256"
+                      value={result.prova.checksumSha256}
+                    />
+                    <DetailItem
+                      label="SHA-512"
+                      value={result.prova.checksumSha512}
+                    />
                     <DetailItem label="MD5" value={result.prova.checksumMd5} />
                     <DetailItem
                       label="Registro Temporal"
-                      value={formatDate(result.prova.timestamp ? 
-                        JSON.parse(result.prova.timestamp).timestamp : 
-                        result.prova.dataCriacao)}
+                      value={formatDate(
+                        result.prova.timestamp
+                          ? JSON.parse(result.prova.timestamp).timestamp
+                          : result.prova.dataCriacao,
+                      )}
                     />
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <div>
-                        <dt className="text-sm font-medium text-gray-500">IP:</dt>
+                        <dt className="text-sm font-medium text-gray-500">
+                          IP:
+                        </dt>
                         <dd className="mt-1 text-base text-gray-900 break-words">
                           {result.verificacao?.ip ||
-                           result.prova.metadata?.connectionInfo?.forwardedIp ||
-                           (result.prova.metadata?.headers?.['x-forwarded-for'] ? 
-                            result.prova.metadata.headers['x-forwarded-for'].split(',')[0].trim() : 
-                            result.prova.metadata?.ipAddress) || 
-                           'Não disponível'}
+                            result.prova.metadata?.connectionInfo
+                              ?.forwardedIp ||
+                            (result.prova.metadata?.headers?.["x-forwarded-for"]
+                              ? result.prova.metadata.headers["x-forwarded-for"]
+                                  .split(",")[0]
+                                  .trim()
+                              : result.prova.metadata?.ipAddress) ||
+                            "Não disponível"}
                         </dd>
                       </div>
                       <div>
-                        <dt className="text-sm font-medium text-gray-500">Porta:</dt>
+                        <dt className="text-sm font-medium text-gray-500">
+                          Porta:
+                        </dt>
                         <dd className="mt-1 text-base text-gray-900 break-words">
                           {result.verificacao?.porta ||
                             result.prova.metadata?.clientPort ||
                             result.prova.metadata?.connectionInfo?.socketPort ||
-                           'Não disponível'}
+                            "Não disponível"}
                         </dd>
                       </div>
                     </div>
@@ -187,21 +258,26 @@ export function PublicVerificarProva() {
 
                 {result.prova.metadata && (
                   <div className="py-6">
-                    <h3 className="text-xl font-semibold text-gray-800 mb-4">Informações de Contexto</h3>
+                    <h3 className="text-xl font-semibold text-gray-800 mb-4">
+                      Informações de Contexto
+                    </h3>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 p-4 rounded-lg">
                       {result.prova.metadata.userInfo ? (
                         <>
                           <DetailItem
                             label="Navegador"
-                            value={`${result.prova.metadata.userInfo.browser?.name || 'N/A'} ${result.prova.metadata.userInfo.browser?.version || ''}`} 
+                            value={`${result.prova.metadata.userInfo.browser?.name || "N/A"} ${result.prova.metadata.userInfo.browser?.version || ""}`}
                           />
                           <DetailItem
                             label="Sistema Operacional"
-                            value={`${result.prova.metadata.userInfo.os?.name || 'N/A'} ${result.prova.metadata.userInfo.os?.version || ''}`} 
+                            value={`${result.prova.metadata.userInfo.os?.name || "N/A"} ${result.prova.metadata.userInfo.os?.version || ""}`}
                           />
                           <DetailItem
                             label="Dispositivo"
-                            value={result.prova.metadata.userInfo.device?.type || 'desktop'} 
+                            value={
+                              result.prova.metadata.userInfo.device?.type ||
+                              "desktop"
+                            }
                           />
                         </>
                       ) : (
@@ -209,13 +285,18 @@ export function PublicVerificarProva() {
                           {/* Exibir informações do navegador - baseado no user-agent */}
                           <DetailItem
                             label="User-Agent"
-                            value={result.prova.metadata.userAgent || 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'}
+                            value={
+                              result.prova.metadata.userAgent ||
+                              "Mozilla/5.0 (Windows NT 10.0; Win64; x64)"
+                            }
                           />
 
                           {/* Exibir informações do sistema */}
                           <DetailItem
                             label="Sistema"
-                            value={result.prova.metadata.platform || 'Windows 10'} 
+                            value={
+                              result.prova.metadata.platform || "Windows 10"
+                            }
                           />
                         </>
                       )}
@@ -227,7 +308,7 @@ export function PublicVerificarProva() {
                           result.prova.metadata.ipAddress ||
                           result.prova.metadata.connectionInfo?.ip ||
                           result.prova.metadata.connectionInfo?.socketAddress ||
-                          '::1'
+                          "::1"
                         }
                       />
 
@@ -236,8 +317,9 @@ export function PublicVerificarProva() {
                         label="Porta de Conexão"
                         value={
                           result.prova.metadata.clientPort ||
-                          (result.prova.metadata.connectionInfo?.socketPort ? 
-                            result.prova.metadata.connectionInfo.socketPort : '61465')
+                          (result.prova.metadata.connectionInfo?.socketPort
+                            ? result.prova.metadata.connectionInfo.socketPort
+                            : "61465")
                         }
                       />
 
@@ -246,7 +328,11 @@ export function PublicVerificarProva() {
                         label="Família IP"
                         value={
                           result.prova.metadata.connectionInfo?.remoteFamily ||
-                          ((result.prova.metadata.ipAddress || '::1').includes(':') ? 'IPv6' : 'IPv4')
+                          ((result.prova.metadata.ipAddress || "::1").includes(
+                            ":",
+                          )
+                            ? "IPv6"
+                            : "IPv4")
                         }
                       />
 
@@ -255,8 +341,8 @@ export function PublicVerificarProva() {
                         label="Idioma"
                         value={
                           result.prova.metadata.language ||
-                          result.prova.metadata.headers?.['accept-language'] ||
-                          'pt-BR'
+                          result.prova.metadata.headers?.["accept-language"] ||
+                          "pt-BR"
                         }
                       />
 
@@ -269,27 +355,38 @@ export function PublicVerificarProva() {
                       )}
 
                       {/* Garantir exibição de data de modificação */}
-                      {(result.prova.metadata.file_specific?.modified || result.prova.metadata.modification_times) && (
+                      {(result.prova.metadata.file_specific?.modified ||
+                        result.prova.metadata.modification_times) && (
                         <DetailItem
                           label="Data de Modificação Original"
-                          value={formatDate(result.prova.metadata.file_specific?.modified || 
-                                 (result.prova.metadata.modification_times ? 
-                                  new Date(parseInt(result.prova.metadata.modification_times)) : null))} 
+                          value={formatDate(
+                            result.prova.metadata.file_specific?.modified ||
+                              (result.prova.metadata.modification_times
+                                ? new Date(
+                                    parseInt(
+                                      result.prova.metadata.modification_times,
+                                    ),
+                                  )
+                                : null),
+                          )}
                         />
                       )}
 
                       {/* Exibir geolocalização se disponível */}
-                      {(result.prova.metadata.latitude !== undefined || result.prova.metadata.longitude !== undefined) && (
+                      {(result.prova.metadata.latitude !== undefined ||
+                        result.prova.metadata.longitude !== undefined) && (
                         <DetailItem
                           label="Coordenadas"
-                          value={`${result.prova.metadata.latitude || 'N/A'}, ${result.prova.metadata.longitude || 'N/A'}`}
+                          value={`${result.prova.metadata.latitude || "N/A"}, ${result.prova.metadata.longitude || "N/A"}`}
                         />
                       )}
 
                       <div className="col-span-1 md:col-span-2 mt-1">
                         <div className="text-xs text-gray-500 italic">
-                          A data de modificação representa o momento real em que o arquivo foi alterado pela última vez,
-                          sendo muito mais confiável que a data de criação para efeitos de validação temporal.
+                          A data de modificação representa o momento real em que
+                          o arquivo foi alterado pela última vez, sendo muito
+                          mais confiável que a data de criação para efeitos de
+                          validação temporal.
                         </div>
                       </div>
                     </div>
@@ -319,7 +416,8 @@ export function PublicVerificarProva() {
           </div>
 
           <div className="bg-gray-50 px-6 py-4 text-center text-sm text-gray-500">
-            Documento validado através do sistema AdvX Provas - Integridade e Autenticidade Digital
+            Documento validado através do sistema AdvX Provas - Integridade e
+            Autenticidade Digital
           </div>
         </div>
       </div>

src/components/provas/VerificarProva.tsx

@@ -1,8 +1,3 @@
-import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import axios from 'axios'; // Importar axios para fazer a requisição
-import { format } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
 import {
   Container,
   Box,
@@ -12,8 +7,13 @@ import {
   Paper,
   Grid,
   Divider,
-  Button
-} from '@mui/material';
+  Button,
+} from "@mui/material";
+import axios from "axios"; // Importar axios para fazer a requisição
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
 
 // Componente para verificação de provas digitais
 export const VerificarProva: React.FC = () => {
@@ -23,7 +23,7 @@ export const VerificarProva: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
 
   // URL base da API - usar a mesma do ambiente atual
-  const API_BASE_URL = process.env.REACT_APP_API_URL || '/api';
+  const API_BASE_URL = process.env.REACT_APP_API_URL || "/api";
 
   useEffect(() => {
     const fetchProvaDetails = async () => {
@@ -37,32 +37,37 @@ export const VerificarProva: React.FC = () => {
           platform: navigator.platform,
           screenWidth: window.screen.width,
           screenHeight: window.screen.height,
-          timestamp: new Date().toISOString()
+          timestamp: new Date().toISOString(),
         };
 
         // Fazer a requisição para verificar a prova
-        const response = await axios.get(`${API_BASE_URL}/provas/verificar/${hash}`, {
+        const response = await axios.get(
+          `${API_BASE_URL}/provas/verificar/${hash}`,
+          {
             headers: {
-            'Content-Type': 'application/json'
-          }
-        });
+              "Content-Type": "application/json",
+            },
+          },
+        );
 
         // Também registrar a verificação separadamente
         try {
           await axios.post(`${API_BASE_URL}/provas/registrar-verificacao`, {
             hash,
-            verificationContext: connectionInfo
+            verificationContext: connectionInfo,
           });
         } catch (logError) {
-          console.warn('Erro ao registrar verificação:', logError);
+          console.warn("Erro ao registrar verificação:", logError);
           // Não interromper o fluxo principal por erro no log
         }
 
         setProva(response.data);
         setLoading(false);
       } catch (error) {
-        console.error('Erro ao verificar prova:', error);
-        setError('Não foi possível verificar este documento. O hash pode ser inválido ou o documento não existe.');
+        console.error("Erro ao verificar prova:", error);
+        setError(
+          "Não foi possível verificar este documento. O hash pode ser inválido ou o documento não existe.",
+        );
         setLoading(false);
       }
     };
@@ -70,7 +75,7 @@ export const VerificarProva: React.FC = () => {
     if (hash) {
       fetchProvaDetails();
     } else {
-      setError('Hash de verificação não fornecido');
+      setError("Hash de verificação não fornecido");
       setLoading(false);
     }
   }, [hash, API_BASE_URL]);
@@ -107,7 +112,7 @@ export const VerificarProva: React.FC = () => {
             <Button
               variant="contained"
               color="primary"
-              onClick={() => window.location.href = '/'}
+              onClick={() => (window.location.href = "/")}
             >
               Voltar à página inicial
             </Button>
@@ -121,9 +126,9 @@ export const VerificarProva: React.FC = () => {
   const formatarData = (dataString: string) => {
     try {
       const data = new Date(dataString);
-      return format(data, 'dd/MM/yyyy HH:mm:ss', { locale: ptBR });
+      return format(data, "dd/MM/yyyy HH:mm:ss", { locale: ptBR });
     } catch (error) {
-      return 'Data inválida';
+      return "Data inválida";
     }
   };
 
@@ -132,7 +137,9 @@ export const VerificarProva: React.FC = () => {
       <Box mt={4} mb={4}>
         {prova?.verified ? (
           <Alert severity="success" variant="filled">
-            <Typography variant="h6">Documento Verificado com Sucesso</Typography>
+            <Typography variant="h6">
+              Documento Verificado com Sucesso
+            </Typography>
             <Typography>
               Este documento foi validado e sua integridade foi confirmada.
             </Typography>
@@ -141,7 +148,8 @@ export const VerificarProva: React.FC = () => {
           <Alert severity="warning" variant="filled">
             <Typography variant="h6">Verificação Inconclusiva</Typography>
             <Typography>
-              {prova?.message || 'Não foi possível confirmar a integridade deste documento.'}
+              {prova?.message ||
+                "Não foi possível confirmar a integridade deste documento."}
             </Typography>
           </Alert>
         )}
@@ -161,7 +169,7 @@ export const VerificarProva: React.FC = () => {
                   Nome do arquivo:
                 </Typography>
                 <Typography gutterBottom>
-                  {prova.prova?.fileName || 'Não disponível'}
+                  {prova.prova?.fileName || "Não disponível"}
                 </Typography>
               </Grid>
 
@@ -170,7 +178,7 @@ export const VerificarProva: React.FC = () => {
                   Tipo:
                 </Typography>
                 <Typography gutterBottom>
-                  {prova.prova?.mimeType || 'Não disponível'}
+                  {prova.prova?.mimeType || "Não disponível"}
                 </Typography>
               </Grid>
 
@@ -180,9 +188,9 @@ export const VerificarProva: React.FC = () => {
                 </Typography>
                 <Typography
                   gutterBottom
-                  sx={{ wordBreak: 'break-all', fontSize: '0.9rem' }}
+                  sx={{ wordBreak: "break-all", fontSize: "0.9rem" }}
                 >
-                  {prova.prova?.checksumSha256 || 'Não disponível'}
+                  {prova.prova?.checksumSha256 || "Não disponível"}
                 </Typography>
               </Grid>
 
@@ -191,9 +199,9 @@ export const VerificarProva: React.FC = () => {
                   Data de registro:
                 </Typography>
                 <Typography gutterBottom>
-                  {prova.timestamp?.timestamp ? 
-                    formatarData(prova.timestamp.timestamp) : 
-                    'Não disponível'}
+                  {prova.timestamp?.timestamp
+                    ? formatarData(prova.timestamp.timestamp)
+                    : "Não disponível"}
                 </Typography>
               </Grid>
 
@@ -211,7 +219,9 @@ export const VerificarProva: React.FC = () => {
                   IP:
                 </Typography>
                 <Typography gutterBottom>
-                  {prova.verificacao?.ip || prova.prova?.metadata?.ipAddress || 'Não disponível'}
+                  {prova.verificacao?.ip ||
+                    prova.prova?.metadata?.ipAddress ||
+                    "Não disponível"}
                 </Typography>
               </Grid>
 
@@ -220,7 +230,9 @@ export const VerificarProva: React.FC = () => {
                   Porta:
                 </Typography>
                 <Typography gutterBottom>
-                  {prova.verificacao?.porta || prova.prova?.metadata?.clientPort || 'Não disponível'}
+                  {prova.verificacao?.porta ||
+                    prova.prova?.metadata?.clientPort ||
+                    "Não disponível"}
                 </Typography>
               </Grid>
             </Grid>

src/components/tarefas/AnexosList.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback } from 'react';
-import { useDropzone } from 'react-dropzone';
-import { Anexo } from '../../types/entities';
 import {
   DocumentIcon,
   XMarkIcon,
-  ArrowDownTrayIcon 
-} from '@heroicons/react/24/outline';
+  ArrowDownTrayIcon,
+} from "@heroicons/react/24/outline";
+import React, { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+
+import { Anexo } from "../../types/entities";
 
 interface AnexosListProps {
   anexos: Anexo[];
@@ -13,27 +14,30 @@ interface AnexosListProps {
 }
 
 export const AnexosList: React.FC<AnexosListProps> = ({ anexos, onChange }) => {
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    const novosAnexos: Anexo[] = acceptedFiles.map(file => ({
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const novosAnexos: Anexo[] = acceptedFiles.map((file) => ({
         id: Math.random().toString(),
         nome: file.name,
         tipo: file.type,
         tamanho: file.size,
         url: URL.createObjectURL(file),
-      tarefaId: ''
+        tarefaId: "",
       }));
 
       onChange([...anexos, ...novosAnexos]);
-  }, [anexos, onChange]);
+    },
+    [anexos, onChange],
+  );
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
   const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 Bytes';
+    if (bytes === 0) return "0 Bytes";
     const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const sizes = ["Bytes", "KB", "MB", "GB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   };
 
   return (
@@ -41,15 +45,17 @@ export const AnexosList: React.FC<AnexosListProps> = ({ anexos, onChange }) => {
       <div
         {...getRootProps()}
         className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer
-          ${isDragActive 
-            ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' 
-            : 'border-gray-300 dark:border-gray-600'}`}
+          ${
+            isDragActive
+              ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+              : "border-gray-300 dark:border-gray-600"
+          }`}
       >
         <input {...getInputProps()} />
         <p className="text-gray-600 dark:text-gray-400">
           {isDragActive
-            ? 'Solte os arquivos aqui...'
-            : 'Arraste e solte arquivos aqui, ou clique para selecionar'}
+            ? "Solte os arquivos aqui..."
+            : "Arraste e solte arquivos aqui, ou clique para selecionar"}
         </p>
       </div>
 
@@ -73,14 +79,16 @@ export const AnexosList: React.FC<AnexosListProps> = ({ anexos, onChange }) => {
             <div className="flex items-center space-x-2">
               <button
                 type="button"
-                onClick={() => window.open(anexo.url, '_blank')}
+                onClick={() => window.open(anexo.url, "_blank")}
                 className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
               >
                 <ArrowDownTrayIcon className="h-5 w-5" />
               </button>
               <button
                 type="button"
-                onClick={() => onChange(anexos.filter(a => a.id !== anexo.id))}
+                onClick={() =>
+                  onChange(anexos.filter((a) => a.id !== anexo.id))
+                }
                 className="text-gray-400 hover:text-red-600 dark:text-gray-500 dark:hover:text-red-400"
               >
                 <XMarkIcon className="h-5 w-5" />

src/components/tarefas/ComentariosList.tsx

@@ -1,16 +1,19 @@
-import React, { useState } from 'react';
-import { useAuth } from '../../contexts/AuthContext';
-import { Comentario } from '../../types/entities';
-import { format } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
+import { format, ptBR } from "date-fns";
+import React, { useState } from "react";
+
+import { useAuth } from "../../contexts/AuthContext";
+import { Comentario } from "../../types/entities";
 
 interface ComentariosListProps {
   comentarios: Comentario[];
   onChange: (comentarios: Comentario[]) => void;
 }
 
-export const ComentariosList: React.FC<ComentariosListProps> = ({ comentarios, onChange }) => {
-  const [novoComentario, setNovoComentario] = useState('');
+export const ComentariosList: React.FC<ComentariosListProps> = ({
+  comentarios,
+  onChange,
+}) => {
+  const [novoComentario, setNovoComentario] = useState("");
   const { user } = useAuth();
 
   const adicionarComentario = () => {
@@ -19,13 +22,13 @@ export const ComentariosList: React.FC<ComentariosListProps> = ({ comentarios, o
     const comentario: Comentario = {
       id: Math.random().toString(),
       texto: novoComentario,
-      criadoPorId: user?.id || '',
+      criadoPorId: user?.id || "",
       criadoEm: new Date(),
-      tarefaId: ''
+      tarefaId: "",
     };
 
     onChange([...comentarios, comentario]);
-    setNovoComentario('');
+    setNovoComentario("");
   };
 
   return (
@@ -70,7 +73,11 @@ export const ComentariosList: React.FC<ComentariosListProps> = ({ comentarios, o
                     {user?.nome}
                   </p>
                   <p className="text-xs text-gray-500 dark:text-gray-400">
-                    {format(new Date(comentario.criadoEm), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}
+                    {format(
+                      new Date(comentario.criadoEm),
+                      "dd/MM/yyyy 'às' HH:mm",
+                      { locale: ptBR },
+                    )}
                   </p>
                 </div>
               </div>

src/components/tarefas/SubtarefasList.tsx

@@ -1,14 +1,18 @@
-import React, { useState } from 'react';
-import { PlusIcon, XMarkIcon, CheckIcon } from '@heroicons/react/24/outline';
-import { SubTarefa } from '../../types/entities';
+import { PlusIcon, XMarkIcon, CheckIcon } from "@heroicons/react/24/outline";
+import React, { useState } from "react";
+
+import { SubTarefa } from "../../types/entities";
 
 interface SubtarefasListProps {
   subtarefas: SubTarefa[];
   onChange: (subtarefas: SubTarefa[]) => void;
 }
 
-export const SubtarefasList: React.FC<SubtarefasListProps> = ({ subtarefas, onChange }) => {
-  const [novaTarefa, setNovaTarefa] = useState('');
+export const SubtarefasList: React.FC<SubtarefasListProps> = ({
+  subtarefas,
+  onChange,
+}) => {
+  const [novaTarefa, setNovaTarefa] = useState("");
 
   const adicionarSubtarefa = () => {
     if (!novaTarefa.trim()) return;
@@ -19,10 +23,10 @@ export const SubtarefasList: React.FC<SubtarefasListProps> = ({ subtarefas, onCh
         id: Math.random().toString(),
         titulo: novaTarefa,
         concluida: false,
-        tarefaId: ''
-      }
+        tarefaId: "",
+      },
     ]);
-    setNovaTarefa('');
+    setNovaTarefa("");
   };
 
   return (
@@ -34,7 +38,7 @@ export const SubtarefasList: React.FC<SubtarefasListProps> = ({ subtarefas, onCh
           onChange={(e) => setNovaTarefa(e.target.value)}
           placeholder="Nova subtarefa"
           className="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-          onKeyPress={(e) => e.key === 'Enter' && adicionarSubtarefa()}
+          onKeyPress={(e) => e.key === "Enter" && adicionarSubtarefa()}
         />
         <button
           type="button"
@@ -56,26 +60,33 @@ export const SubtarefasList: React.FC<SubtarefasListProps> = ({ subtarefas, onCh
                 type="button"
                 onClick={() => {
                   const novasSubtarefas = [...subtarefas];
-                  novasSubtarefas[index].concluida = !novasSubtarefas[index].concluida;
+                  novasSubtarefas[index].concluida =
+                    !novasSubtarefas[index].concluida;
                   onChange(novasSubtarefas);
                 }}
                 className={`h-5 w-5 rounded border ${
                   subtarefa.concluida
-                    ? 'bg-blue-600 border-blue-600 text-white' 
-                    : 'border-gray-300 dark:border-gray-600'
+                    ? "bg-blue-600 border-blue-600 text-white"
+                    : "border-gray-300 dark:border-gray-600"
                 }`}
               >
                 {subtarefa.concluida && <CheckIcon className="h-4 w-4" />}
               </button>
-              <span className={`text-gray-900 dark:text-white ${
-                subtarefa.concluida ? 'line-through text-gray-500 dark:text-gray-400' : ''
-              }`}>
+              <span
+                className={`text-gray-900 dark:text-white ${
+                  subtarefa.concluida
+                    ? "line-through text-gray-500 dark:text-gray-400"
+                    : ""
+                }`}
+              >
                 {subtarefa.titulo}
               </span>
             </div>
             <button
               type="button"
-              onClick={() => onChange(subtarefas.filter(s => s.id !== subtarefa.id))}
+              onClick={() =>
+                onChange(subtarefas.filter((s) => s.id !== subtarefa.id))
+              }
               className="text-gray-400 hover:text-red-600 dark:text-gray-500 dark:hover:text-red-400"
             >
               <XMarkIcon className="h-5 w-5" />

src/components/tarefas/TarefaCard.tsx

@@ -1,10 +1,16 @@
-import React from 'react';
-import { Tarefa } from '../../types/entities';
-import { format } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import { PencilIcon, CheckIcon, XMarkIcon, ExclamationTriangleIcon, TrashIcon } from '@heroicons/react/24/outline';
-import { useAuth } from '../../contexts/AuthContext';
-import { useTarefas } from '../../hooks/useTarefas';
+import {
+  PencilIcon,
+  CheckIcon,
+  XMarkIcon,
+  ExclamationTriangleIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import { format, ptBR } from "date-fns";
+import React from "react";
+
+import { useAuth } from "../../contexts/AuthContext";
+import { useTarefas } from "../../hooks/useTarefas";
+import { Tarefa } from "../../types/entities";
 
 interface TarefaCardProps {
   tarefa: Tarefa;
@@ -12,30 +18,39 @@ interface TarefaCardProps {
   onStatusChange: (id: string, status: string, progresso?: number) => void;
 }
 
-export const TarefaCard: React.FC<TarefaCardProps> = ({ tarefa, onEdit, onStatusChange }) => {
+export const TarefaCard: React.FC<TarefaCardProps> = ({
+  tarefa,
+  onEdit,
+  onStatusChange,
+}) => {
   const { user } = useAuth();
   const { deleteTarefa } = useTarefas();
 
-  const canDelete = user && ['ADVOGADO_ADMIN', 'ADVOGADO'].includes(user.perfil);
+  const canDelete =
+    user && ["ADVOGADO_ADMIN", "ADVOGADO"].includes(user.perfil);
 
   const handleDelete = async (e: React.MouseEvent) => {
     e.stopPropagation();
-    if (!window.confirm('Tem certeza que deseja excluir esta tarefa?')) return;
+    if (!window.confirm("Tem certeza que deseja excluir esta tarefa?")) return;
 
     try {
       await deleteTarefa.mutateAsync(tarefa.id);
     } catch (error) {
-      console.error('Erro ao excluir tarefa:', error);
-      alert('Erro ao excluir tarefa');
+      console.error("Erro ao excluir tarefa:", error);
+      alert("Erro ao excluir tarefa");
     }
   };
 
   const getPrioridadeColor = () => {
     switch (tarefa.prioridade) {
-      case 'BAIXA': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
-      case 'MEDIA': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-      case 'ALTA': return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200';
-      case 'URGENTE': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+      case "BAIXA":
+        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
+      case "MEDIA":
+        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
+      case "ALTA":
+        return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200";
+      case "URGENTE":
+        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
     }
   };
 
@@ -53,7 +68,9 @@ export const TarefaCard: React.FC<TarefaCardProps> = ({ tarefa, onEdit, onStatus
           >
             <PencilIcon className="h-5 w-5" />
           </button>
-          <span className={`px-2 py-1 text-xs rounded-full ${getPrioridadeColor()}`}>
+          <span
+            className={`px-2 py-1 text-xs rounded-full ${getPrioridadeColor()}`}
+          >
             {tarefa.prioridade}
           </span>
         </div>
@@ -79,16 +96,24 @@ export const TarefaCard: React.FC<TarefaCardProps> = ({ tarefa, onEdit, onStatus
               <div
                 key={subtarefa.id}
                 className={`h-6 w-6 rounded-full flex items-center justify-center text-xs
-                  ${subtarefa.concluida 
-                    ? 'bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-200' 
-                    : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'}`}
+                  ${
+                    subtarefa.concluida
+                      ? "bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-200"
+                      : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+                  }`}
               >
-                {subtarefa.concluida ? <CheckIcon className="h-3 w-3" /> : index + 1}
+                {subtarefa.concluida ? (
+                  <CheckIcon className="h-3 w-3" />
+                ) : (
+                  index + 1
+                )}
               </div>
             ))}
           </div>
           <span className="text-gray-500 dark:text-gray-400">
-            {format(new Date(tarefa.dataVencimento), "dd/MM/yyyy", { locale: ptBR })}
+            {format(new Date(tarefa.dataVencimento), "dd/MM/yyyy", {
+              locale: ptBR,
+            })}
           </span>
         </div>
 
@@ -105,17 +130,17 @@ export const TarefaCard: React.FC<TarefaCardProps> = ({ tarefa, onEdit, onStatus
 
       <div className="mt-4 flex items-center justify-between">
         <div className="flex space-x-2">
-          {tarefa.status !== 'CONCLUIDA' && tarefa.status !== 'CANCELADA' && (
+          {tarefa.status !== "CONCLUIDA" && tarefa.status !== "CANCELADA" && (
             <>
               <button
-                onClick={() => onStatusChange(tarefa.id, 'CONCLUIDA', 100)}
+                onClick={() => onStatusChange(tarefa.id, "CONCLUIDA", 100)}
                 className="p-2 text-green-600 hover:bg-green-50 rounded-lg"
                 title="Concluir tarefa"
               >
                 <CheckIcon className="h-5 w-5" />
               </button>
               <button
-                onClick={() => onStatusChange(tarefa.id, 'CANCELADA', 0)}
+                onClick={() => onStatusChange(tarefa.id, "CANCELADA", 0)}
                 className="p-2 text-red-600 hover:bg-red-50 rounded-lg"
                 title="Cancelar tarefa"
               >
@@ -123,10 +148,16 @@ export const TarefaCard: React.FC<TarefaCardProps> = ({ tarefa, onEdit, onStatus
               </button>
               <button
                 onClick={() => {
-                  const novoProgresso = prompt('Digite o percentual de conclusão (0-100):', tarefa.progresso?.toString());
+                  const novoProgresso = prompt(
+                    "Digite o percentual de conclusão (0-100):",
+                    tarefa.progresso?.toString(),
+                  );
                   if (novoProgresso !== null) {
-                    const progresso = Math.min(100, Math.max(0, parseInt(novoProgresso)));
-                    onStatusChange(tarefa.id, 'EM_ANDAMENTO', progresso);
+                    const progresso = Math.min(
+                      100,
+                      Math.max(0, parseInt(novoProgresso)),
+                    );
+                    onStatusChange(tarefa.id, "EM_ANDAMENTO", progresso);
                   }
                 }}
                 className="p-2 text-yellow-600 hover:bg-yellow-50 rounded-lg"

src/components/tarefas/TarefaKanban.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import { Tarefa } from '../../types/entities';
-import { TarefaCard } from './TarefaCard';
-import api from '../../services/api';
+import React from "react";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import { useQuery } from "react-query";
+
+import api from "../../services/api";
+import { Tarefa } from "../../types/entities";
+
+import { TarefaCard } from "./TarefaCard";
 
 interface TarefaKanbanProps {
   onEdit: (tarefa: Tarefa) => void;
@@ -11,14 +13,17 @@ interface TarefaKanbanProps {
 }
 
 const colunas = [
-  { id: 'PENDENTE', titulo: 'Pendentes' },
-  { id: 'EM_ANDAMENTO', titulo: 'Em Andamento' },
-  { id: 'CONCLUIDA', titulo: 'Concluídas' },
+  { id: "PENDENTE", titulo: "Pendentes" },
+  { id: "EM_ANDAMENTO", titulo: "Em Andamento" },
+  { id: "CONCLUIDA", titulo: "Concluídas" },
 ];
 
-export const TarefaKanban: React.FC<TarefaKanbanProps> = ({ onEdit, onStatusChange }) => {
-  const { data: tarefas = [], refetch } = useQuery('tarefas', async () => {
-    const response = await api.get('/tarefas');
+export const TarefaKanban: React.FC<TarefaKanbanProps> = ({
+  onEdit,
+  onStatusChange,
+}) => {
+  const { data: tarefas = [], refetch } = useQuery("tarefas", async () => {
+    const response = await api.get("/tarefas");
     return response.data;
   });
 
@@ -36,7 +41,10 @@ export const TarefaKanban: React.FC<TarefaKanbanProps> = ({ onEdit, onStatusChan
     <DragDropContext onDragEnd={handleDragEnd}>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         {colunas.map((coluna) => (
-          <div key={coluna.id} className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+          <div
+            key={coluna.id}
+            className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4"
+          >
             <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
               {coluna.titulo}
             </h3>

src/components/tarefas/TarefaModal.tsx

@@ -1,14 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import { Dialog } from '@headlessui/react';
-import { useForm } from 'react-hook-form';
-import { useQuery } from 'react-query';
-import { DatePicker } from '@mui/x-date-pickers';
-import { Tarefa } from '../../types/entities';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import { SubtarefasList } from './SubtarefasList';
-import { ComentariosList } from './ComentariosList';
-import api from '../../services/api';
-import { useTarefas } from '../../hooks/useTarefas';
+import { Dialog } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { DatePicker } from "@mui/x-date-pickers";
+import React, { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { useQuery } from "react-query";
+
+import { useTarefas } from "../../hooks/useTarefas";
+import api from "../../services/api";
+import { Tarefa } from "../../types/entities";
+
+import { ComentariosList } from "./ComentariosList";
+import { SubtarefasList } from "./SubtarefasList";
 
 interface TarefaModalProps {
   isOpen: boolean;
@@ -16,21 +18,25 @@ interface TarefaModalProps {
   tarefa?: Tarefa | null;
 }
 
-export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, tarefa }) => {
-  const [activeTab, setActiveTab] = useState('detalhes');
+export const TarefaModal: React.FC<TarefaModalProps> = ({
+  isOpen,
+  onClose,
+  tarefa,
+}) => {
+  const [activeTab, setActiveTab] = useState("detalhes");
   const { register, handleSubmit, reset, setValue, watch } = useForm();
   const [loading, setLoading] = useState(false);
   const { createTarefa, updateTarefa } = useTarefas();
 
   // Buscar usuários para atribuição
-  const { data: usuarios = [] } = useQuery('usuarios', async () => {
-    const response = await api.get('/usuarios');
+  const { data: usuarios = [] } = useQuery("usuarios", async () => {
+    const response = await api.get("/usuarios");
     return response.data;
   });
 
   // Buscar processos ativos
-  const { data: processos = [] } = useQuery('processos', async () => {
-    const response = await api.get('/processos');
+  const { data: processos = [] } = useQuery("processos", async () => {
+    const response = await api.get("/processos");
     return response.data;
   });
 
@@ -39,12 +45,12 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
       reset(tarefa);
     } else {
       reset({
-        status: 'PENDENTE',
-        prioridade: 'MEDIA',
+        status: "PENDENTE",
+        prioridade: "MEDIA",
         progresso: 0,
         etiquetas: [],
         subtarefas: [],
-        comentarios: []
+        comentarios: [],
       });
     }
   }, [tarefa, reset]);
@@ -54,7 +60,7 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
       reset({
         ...tarefa,
         dataInicio: new Date(tarefa.dataInicio),
-        dataVencimento: new Date(tarefa.dataVencimento)
+        dataVencimento: new Date(tarefa.dataVencimento),
       });
     }
   }, [tarefa, isOpen, reset]);
@@ -70,31 +76,31 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
         // Remover campos que não devem ser enviados
         id: undefined,
         criadoEm: undefined,
-        atualizadoEm: undefined
+        atualizadoEm: undefined,
       };
 
       if (tarefa) {
         // Para edição, enviar id separadamente
         await updateTarefa.mutateAsync({
           id: tarefa.id,
-          data: dadosParaEnviar 
+          data: dadosParaEnviar,
         });
       } else {
         await createTarefa.mutateAsync(dadosParaEnviar);
       }
       onClose();
     } catch (error) {
-      console.error('Erro ao salvar tarefa:', error);
-      alert('Erro ao salvar tarefa. Por favor, tente novamente.');
+      console.error("Erro ao salvar tarefa:", error);
+      alert("Erro ao salvar tarefa. Por favor, tente novamente.");
     } finally {
       setLoading(false);
     }
   };
 
   const tabs = [
-    { id: 'detalhes', label: 'Detalhes' },
-    { id: 'subtarefas', label: 'Subtarefas' },
-    { id: 'comentarios', label: 'Comentários' },
+    { id: "detalhes", label: "Detalhes" },
+    { id: "subtarefas", label: "Subtarefas" },
+    { id: "comentarios", label: "Comentários" },
   ];
 
   return (
@@ -108,23 +114,27 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
             <div className="border-b border-gray-200 dark:border-gray-700 p-4">
               <div className="flex justify-between items-center">
                 <Dialog.Title className="text-lg font-semibold text-gray-900 dark:text-white">
-                  {tarefa ? 'Editar Tarefa' : 'Nova Tarefa'}
+                  {tarefa ? "Editar Tarefa" : "Nova Tarefa"}
                 </Dialog.Title>
-                <button onClick={onClose} className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <button
+                  onClick={onClose}
+                  className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                >
                   <XMarkIcon className="h-6 w-6" />
                 </button>
               </div>
 
               {/* Tabs */}
               <div className="flex space-x-4 mt-4">
-                {tabs.map(tab => (
+                {tabs.map((tab) => (
                   <button
                     key={tab.id}
                     onClick={() => setActiveTab(tab.id)}
                     className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors
-                      ${activeTab === tab.id 
-                        ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
-                        : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                      ${
+                        activeTab === tab.id
+                          ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200"
+                          : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                       }`}
                   >
                     {tab.label}
@@ -137,12 +147,12 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
             <form onSubmit={handleSubmit(onSubmit)} className="p-6">
               {/* Conteúdo das tabs */}
               <div className="space-y-6">
-                {activeTab === 'detalhes' && (
+                {activeTab === "detalhes" && (
                   <div className="grid grid-cols-2 gap-4">
                     <div className="col-span-2">
                       <input
                         type="text"
-                        {...register('titulo')}
+                        {...register("titulo")}
                         placeholder="Título da tarefa"
                         className="w-full px-4 py-2 text-xl font-medium border-0 border-b-2 border-gray-200 dark:border-gray-700 bg-transparent text-gray-900 dark:text-white focus:ring-0 focus:border-blue-500"
                       />
@@ -150,7 +160,7 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
 
                     <div className="col-span-2">
                       <textarea
-                        {...register('descricao')}
+                        {...register("descricao")}
                         rows={3}
                         placeholder="Descrição detalhada"
                         className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
@@ -159,7 +169,7 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
 
                     <div className="space-y-4">
                       <select
-                        {...register('prioridade')}
+                        {...register("prioridade")}
                         className="w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       >
                         <option value="BAIXA">Baixa</option>
@@ -169,7 +179,7 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
                       </select>
 
                       <select
-                        {...register('responsavelId')}
+                        {...register("responsavelId")}
                         className="w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       >
                         <option value="">Selecione um responsável</option>
@@ -184,34 +194,38 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
                     <div className="space-y-4">
                       <DatePicker
                         label="Data de Início"
-                        value={watch('dataInicio')}
-                        onChange={(date) => setValue('dataInicio', date)}
+                        value={watch("dataInicio")}
+                        onChange={(date) => setValue("dataInicio", date)}
                         className="w-full"
-                        slotProps={{ textField: { size: 'small' } }}
+                        slotProps={{ textField: { size: "small" } }}
                       />
 
                       <DatePicker
                         label="Data de Vencimento"
-                        value={watch('dataVencimento')}
-                        onChange={(date) => setValue('dataVencimento', date)}
+                        value={watch("dataVencimento")}
+                        onChange={(date) => setValue("dataVencimento", date)}
                         className="w-full"
-                        slotProps={{ textField: { size: 'small' } }}
+                        slotProps={{ textField: { size: "small" } }}
                       />
                     </div>
                   </div>
                 )}
 
-                {activeTab === 'subtarefas' && (
+                {activeTab === "subtarefas" && (
                   <SubtarefasList
-                    subtarefas={watch('subtarefas') || []}
-                    onChange={(subtarefas) => setValue('subtarefas', subtarefas)}
+                    subtarefas={watch("subtarefas") || []}
+                    onChange={(subtarefas) =>
+                      setValue("subtarefas", subtarefas)
+                    }
                   />
                 )}
 
-                {activeTab === 'comentarios' && (
+                {activeTab === "comentarios" && (
                   <ComentariosList
-                    comentarios={watch('comentarios') || []}
-                    onChange={(comentarios) => setValue('comentarios', comentarios)}
+                    comentarios={watch("comentarios") || []}
+                    onChange={(comentarios) =>
+                      setValue("comentarios", comentarios)
+                    }
                   />
                 )}
               </div>
@@ -229,7 +243,7 @@ export const TarefaModal: React.FC<TarefaModalProps> = ({ isOpen, onClose, taref
                   disabled={loading}
                   className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg disabled:opacity-50"
                 >
-                  {loading ? 'Salvando...' : tarefa ? 'Salvar' : 'Criar'}
+                  {loading ? "Salvando..." : tarefa ? "Salvar" : "Criar"}
                 </button>
               </div>
             </form>

src/components/tarefas/TarefasList.tsx

@@ -1,53 +1,59 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { Tarefa } from '../../types/entities';
-import { format } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
-import api from '../../services/api';
-import { useAuth } from '../../contexts/AuthContext';
-import { useTarefas } from '../../hooks/useTarefas';
+import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { format, ptBR } from "date-fns";
+import React from "react";
+import { useQuery } from "react-query";
+
+import { useAuth } from "../../contexts/AuthContext";
+import { useTarefas } from "../../hooks/useTarefas";
+import api from "../../services/api";
+import { Tarefa } from "../../types/entities";
 
 interface TarefasListProps {
   onEdit: (tarefa: Tarefa) => void;
   onStatusChange: (id: string, status: string, progresso?: number) => void;
 }
 
-export const TarefasList: React.FC<TarefasListProps> = ({ onEdit, onStatusChange }) => {
+export const TarefasList: React.FC<TarefasListProps> = ({
+  onEdit,
+  onStatusChange,
+}) => {
   const { user } = useAuth();
   const { tarefas, isLoading, deleteTarefa } = useTarefas();
 
   const getPrioridadeColor = (prioridade: string) => {
     const colors = {
-      'BAIXA': 'bg-green-100 text-green-800',
-      'MEDIA': 'bg-yellow-100 text-yellow-800',
-      'ALTA': 'bg-orange-100 text-orange-800',
-      'URGENTE': 'bg-red-100 text-red-800'
+      BAIXA: "bg-green-100 text-green-800",
+      MEDIA: "bg-yellow-100 text-yellow-800",
+      ALTA: "bg-orange-100 text-orange-800",
+      URGENTE: "bg-red-100 text-red-800",
     };
-    return colors[prioridade as keyof typeof colors] || 'bg-gray-100 text-gray-800';
+    return (
+      colors[prioridade as keyof typeof colors] || "bg-gray-100 text-gray-800"
+    );
   };
 
   const getStatusColor = (status: string) => {
     const colors = {
-      'PENDENTE': 'bg-gray-100 text-gray-800',
-      'EM_ANDAMENTO': 'bg-blue-100 text-blue-800',
-      'CONCLUIDA': 'bg-green-100 text-green-800',
-      'CANCELADA': 'bg-red-100 text-red-800'
+      PENDENTE: "bg-gray-100 text-gray-800",
+      EM_ANDAMENTO: "bg-blue-100 text-blue-800",
+      CONCLUIDA: "bg-green-100 text-green-800",
+      CANCELADA: "bg-red-100 text-red-800",
     };
-    return colors[status as keyof typeof colors] || 'bg-gray-100 text-gray-800';
+    return colors[status as keyof typeof colors] || "bg-gray-100 text-gray-800";
   };
 
-  const canDelete = user && ['ADVOGADO_ADMIN', 'ADVOGADO'].includes(user.perfil);
+  const canDelete =
+    user && ["ADVOGADO_ADMIN", "ADVOGADO"].includes(user.perfil);
 
   const handleDelete = async (id: string) => {
-    if (!window.confirm('Tem certeza que deseja excluir esta tarefa?')) return;
+    if (!window.confirm("Tem certeza que deseja excluir esta tarefa?")) return;
 
     try {
       await deleteTarefa.mutateAsync(id);
       // Não precisa fazer nada aqui, o React Query vai atualizar automaticamente
     } catch (error) {
-      console.error('Erro ao excluir tarefa:', error);
-      alert('Erro ao excluir tarefa');
+      console.error("Erro ao excluir tarefa:", error);
+      alert("Erro ao excluir tarefa");
     }
   };
 
@@ -56,19 +62,34 @@ export const TarefasList: React.FC<TarefasListProps> = ({ onEdit, onStatusChange
       <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <thead className="bg-gray-50 dark:bg-gray-900">
           <tr>
-            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+            >
               Título/Descrição
             </th>
-            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+            >
               Status
             </th>
-            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+            >
               Prioridade
             </th>
-            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+            >
               Vencimento
             </th>
-            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+            >
               Progresso
             </th>
             <th scope="col" className="relative px-6 py-3">
@@ -78,7 +99,10 @@ export const TarefasList: React.FC<TarefasListProps> = ({ onEdit, onStatusChange
         </thead>
         <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
           {tarefas.map((tarefa: Tarefa) => (
-            <tr key={tarefa.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+            <tr
+              key={tarefa.id}
+              className="hover:bg-gray-50 dark:hover:bg-gray-700"
+            >
               <td className="px-6 py-4">
                 <div className="text-sm font-medium text-gray-900 dark:text-white">
                   {tarefa.titulo}
@@ -88,18 +112,24 @@ export const TarefasList: React.FC<TarefasListProps> = ({ onEdit, onStatusChange
                 </div>
               </td>
               <td className="px-6 py-4 whitespace-nowrap">
-                <span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(tarefa.status)}`}>
-                  {tarefa.status.replace('_', ' ')}
+                <span
+                  className={`px-2 py-1 text-xs rounded-full ${getStatusColor(tarefa.status)}`}
+                >
+                  {tarefa.status.replace("_", " ")}
                 </span>
               </td>
               <td className="px-6 py-4 whitespace-nowrap">
-                <span className={`px-2 py-1 text-xs rounded-full ${getPrioridadeColor(tarefa.prioridade)}`}>
+                <span
+                  className={`px-2 py-1 text-xs rounded-full ${getPrioridadeColor(tarefa.prioridade)}`}
+                >
                   {tarefa.prioridade}
                 </span>
               </td>
               <td className="px-6 py-4 whitespace-nowrap">
                 <div className="text-sm text-gray-500 dark:text-gray-400">
-                  {format(new Date(tarefa.dataVencimento), 'dd/MM/yyyy', { locale: ptBR })}
+                  {format(new Date(tarefa.dataVencimento), "dd/MM/yyyy", {
+                    locale: ptBR,
+                  })}
                 </div>
               </td>
               <td className="px-6 py-4 whitespace-nowrap">