fix atendimentos.ts

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

.env.pdf.example

@@ -1,26 +0,0 @@
-# Configurações de Manipulação de PDF
-
-# Tamanho máximo de arquivo em MB
-PDF_MAX_FILE_SIZE=100
-
-# Número máximo de arquivos por operação
-PDF_MAX_FILES_COMPRESS=10
-PDF_MAX_FILES_MERGE=50
-PDF_MAX_FILES_IMAGES_TO_PDF=100
-
-# Tempo de retenção de arquivos processados em horas
-PDF_FILES_RETENTION_HOURS=24
-
-# Qualidade padrão para compressão (50-100)
-PDF_DEFAULT_QUALITY=95
-
-# DPI padrão para conversão de imagens (150-600)
-PDF_DEFAULT_DPI=300
-
-# Idioma padrão para OCR (por, eng, spa)
-PDF_DEFAULT_OCR_LANGUAGE=por
-
-# Diretórios de armazenamento (relativos ao root do projeto)
-PDF_TEMP_DIR=storage/temp/pdf-ops
-PDF_OUTPUT_DIR=storage/pdf-output
-PDF_UPLOAD_DIR=storage/temp/uploads

.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
-    }
-  },
-  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 }]
+      jsx: 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",
+      },
+    },
+  ],
 };

.gitignore

@@ -7,4 +7,3 @@ dist
 .DS_Store
 coverage
 .vscode
-storage/

Dockerfile

@@ -1,20 +1,11 @@
 FROM node:20-slim
 
-# Configurar Puppeteer para usar o Chromium do sistema
-ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
-ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
-
 # Instalar dependências do sistema
-RUN apt-get update && apt-get install -y chromium \
+RUN apt-get update && apt-get install -y \
+    chromium \
     libgconf-2-4 \
     postgresql-client \
-    graphicsmagick \
-    ghostscript \
-    && rm -rf /var/lib/apt/lists/* \
-    && ln -sf /usr/bin/chromium /usr/bin/chromium-browser
-
-# Verificar a instalação do Chromium
-RUN chromium --version
+    && rm -rf /var/lib/apt/lists/*
 
 # Criar diretório da aplicação
 WORKDIR /usr/src/app

INSTALL_PDF.md

@@ -1,100 +0,0 @@
-# Passos para ativar a funcionalidade de PDF
-
-## 1. Instalar Dependências
-
-Execute o seguinte comando para instalar todas as dependências necessárias:
-
-```bash
-npm install pdf-lib pdf-parse pdf2pic tesseract.js
-npm install --save-dev @types/pdf-parse
-```
-
-## 2. Executar Migration do Banco de Dados
-
-Execute a migration para criar a tabela de operações de PDF:
-
-```bash
-npx prisma migrate dev --name add_operacoes_pdf
-```
-
-Ou simplesmente:
-
-```bash
-npm run prisma:migrate
-```
-
-## 3. Gerar Cliente Prisma
-
-Gere o cliente Prisma atualizado:
-
-```bash
-npm run prisma:generate
-```
-
-## 4. Criar Diretórios
-
-Os diretórios serão criados automaticamente, mas você pode criá-los manualmente:
-
-**No Windows (PowerShell):**
-```powershell
-New-Item -Path "storage\temp\pdf-ops" -ItemType Directory -Force
-New-Item -Path "storage\pdf-output" -ItemType Directory -Force
-New-Item -Path "storage\temp\uploads" -ItemType Directory -Force
-```
-
-**No Linux/Mac:**
-```bash
-mkdir -p storage/temp/pdf-ops
-mkdir -p storage/pdf-output
-mkdir -p storage/temp/uploads
-```
-
-## 5. Reiniciar o Servidor
-
-Após instalar as dependências e executar as migrations, reinicie o servidor:
-
-```bash
-npm run dev:full
-```
-
-Ou apenas o backend:
-
-```bash
-npm run server
-```
-
-## Verificação
-
-Após seguir todos os passos:
-
-1. Acesse a aplicação no navegador
-2. Faça login
-3. Clique no item "PDFs" no menu lateral
-4. Teste a funcionalidade de compressão enviando um PDF
-
-## Troubleshooting
-
-### Se continuar dando erro 404:
-
-1. Verifique se o servidor foi reiniciado após as mudanças
-2. Verifique se as dependências foram instaladas corretamente
-3. Verifique os logs do servidor para erros de importação
-
-### Se der erro de módulo não encontrado:
-
-Execute:
-```bash
-npm install
-npm run prisma:generate
-```
-
-### Se der erro no banco de dados:
-
-Execute:
-```bash
-npx prisma migrate reset
-npx prisma migrate dev
-npm run prisma:generate
-```
-
-**ATENÇÃO:** O comando `migrate reset` apaga todos os dados do banco!

backend/app.ts

@@ -1,26 +0,0 @@
-import express from "express";
-import cors from "cors";
-import { PrismaClient } from "@prisma/client";
-import usuariosRoutes from "./routes/usuarios";
-import clientesRoutes from "./routes/clientes";
-import processosRoutes from "./routes/processos";
-import audienciasRoutes from "./routes/audiencias";
-import pdfRoutes from "./routes/pdf";
-
-const app = express();
-const prisma = new PrismaClient();
-
-app.use(cors());
-app.use(express.json());
-
-app.use("/api/usuarios", usuariosRoutes);
-app.use("/api/clientes", clientesRoutes);
-app.use("/api/processos", processosRoutes);
-app.use("/api/audiencias", audienciasRoutes);
-app.use("/api/pdf", pdfRoutes);
-
-app.get("/", (req, res) => {
-  res.json({ message: "API is running" });
-});
-
-export default app;

backend/controllers/audienciasController.ts

@@ -1,20 +0,0 @@
-import { Request, Response } from "express";
-import prisma from "../prisma/client";
-
-// Lista todas as audiências
-export async function getAudiencias(req: Request, res: Response) {
-  try {
-    const audiencias = await prisma.audiencia.findMany({
-      orderBy: { data: "asc" },
-      include: {
-        processo: {
-          select: { numero: true, nomeContraparte: true }
-        }
-      }
-    });
-    res.json(audiencias);
-  } catch (error) {
-    console.error("Erro ao buscar audiências:", error);
-    res.status(500).json({ error: "Erro ao buscar audiências" });
-  }
-}

backend/routes/audiencias.ts

@@ -1,9 +0,0 @@
-import { Router } from "express";
-import { getAudiencias } from "../controllers/audienciasController";
-
-const router = Router();
-
-// GET /api/audiencias - Lista todas as audiências
-router.get("/", getAudiencias);
-
-export default router;

docker-compose.yml

@@ -1,13 +0,0 @@
-version: '3.8'
-services:
-  backend:
-    build: .
-    ports:
-      - "5000:5000"
-    environment:
-      - NODE_ENV=production
-      - CHROME_BIN=/usr/bin/google-chrome-stable
-      # ... outras variáveis de ambiente existentes ...
-    volumes:
-      - .:/usr/src/app
-      - /usr/src/app/node_modules

docs/PDF_MANIPULATION.md

@@ -1,596 +0,0 @@
-# Funcionalidade de Manipulação de PDFs
-
-## Visão Geral
-
-Sistema completo de manipulação de arquivos PDF com as seguintes funcionalidades:
-
-### Recursos Implementados
-
-1. **Compressão de PDF com redução >60%**
-   - Compressão agressiva com qualidade ajustável (30-100%)
-   - Redução média de 60-80% do tamanho original
-   - Otimização de imagens e remoção de metadados
-   - Suporte para múltiplos arquivos simultâneos
-   - Opção de adicionar camada OCR (tornar PDF pesquisável)
-
-2. **Divisão de PDF**
-   - Por páginas específicas (ex: 1,3,5,7)
-   - Por intervalos (ex: 1-5, 6
-   - **Download em ZIP** quando múltiplos arquivos-10)
-   - Por chunks de tamanho fixo
-
-3. **Mesclagem de PDFs**
-   - Combine até 50 PDFs em um único arquivo
-   - Preserva qualidade o
-   - Opção de adicionar camada OCR ao PDF mescladoriginal
-   - Ordem personalizável
-
-4. **PDF para Imagens**
-   - Formatos: PNG, JPG, WEBP
-   - DPI ajustável (150-600)
-   - **Download em ZIP** de todas as imagens
-   - Qualidade configurável (50-100%)
-   - Conversão de páginas específicas ou todas
-
-5. **Imagens para PDF**
-   - Opção de adicionar camada OCR (tornar PDF pesquisável)
-   - Suporta múltiplas imagens (até 100)
-   - Ajuste automático ao tamanho da página
-   - Suporta PNG, JPG, JPEG, WEBP
-
-6. **OCR (Reconhecimento Ótico de Caracteres)**
-   - Extração de texto de PDFs escaneados
-   - Suporte para Português, Inglês e Espanhol
-   - Retorna confiança da extração
-   - Processamento por página
-
-7. **Informações do PDF**
-   - Número de páginas
-   - Tamanho do arquivo
-   - Metadados (título, autor, criador, etc.)
-   - Datas de criação e modificação
-
-## Instalação
-
-### 1. Instalar Dependências
-
-```bash
-npm install pdf-lib pdf-parse pdf2pic tesseract.js archiver
-npm install --save-dev @types/pdf-parse @types/archiver
-```
-
-Ou execute o script de instalação:
-
-```bash
-npm run install-pdf-deps
-```
-
-### 2. Instalar GraphicsMagick (Requerido para PDF → Imagens)
-
-**Docker:**
-O GraphicsMagick já está incluído no Dockerfile. Rebuild a imagem se necessário:
-
-```bash
-docker-compose down
-docker-compose build --no-cache
-docker-compose up -d
-```
-
-**Local (desenvolvimento):**
-
-Ubuntu/Debian:
-```bash
-sudo apt-get update
-sudo apt-get install graphicsmagick
-```
-
-MacOS:
-```bash
-brew install graphicsmagick
-```
-
-Windows:
-- Baixe e instale: http://www.graphicsmagick.org/download.html
-- Adicione ao PATH do sistema
-
-Verifique a instalação:
-```bash
-gm version
-```
-
-### 3. Executar Migration do Banco de Dados
-
-```bash
-npm run prisma:migrate
-```
-
-Ou manualmente:
-
-```bash
-npx prisma migrate dev --name add_operacoes_pdf
-```
-
-### 4. Gerar Cliente Prisma
-
-```bash
-npm run prisma:generate
-```
-
-### 5. Criar Diretórios Necessários
-
-Os diretórios serão criados automaticamente na primeira execução, mas você pode criá-los manualmente:
-
-```bash
-mkdir -p storage/temp/pdf-ops
-mkdir -p storage/pdf-output
-mkdir -p storage/temp/uploads
-```
-
-## Uso
-
-### Frontend
-
-Acesse a página de manipulação de PDFs através da rota:
-
-```
-/pdf
-```
-
-### API Endpoints
-
-Todas as rotas requerem autenticação via Bearer token.
-
-#### 1. Comprimir PDF
-
-```http
-POST /api/pdf/compress
-Content-Type: multipart/form-data
-Authorization: Bearer {token}
-30-100, padrão 50 para máxima compressão)
-- maxSizeMB: number (opcional)
-- enableOCR: boolean (opcional, adiciona camada OCR ao PDF
-- files: File[] (array de PDFs)
-- quality: number (50-100, padrão 95)
-- maxSizeMB: number (opcional)
-```
-
-#### 2. Dividir PDF
-
-```http
-POST /api/pdf/split
-Content-Type: multipart/form-data
-Authorization: Bearer {token}
-
-Body:
-- files: File (único PDF)
-- splitType: 'pages' | 'range' | 'chunks'
-- pages: string (ex: "1,2,3") - para splitType='pages'
-- ranges: string (ex: "1-5,6-10") - para splitType='range'
-- chunkSize: number - para splitType='chunks'
-```
-
-#### 3. Mesclar PDFs
-
-```http
-POST /api/pdf/merge
-Content-Type: multipart/form-da
-- enableOCR: boolean (opcional, adiciona camada OCR ao PDF mesclado)ta
-Authorization: Bearer {token}
-
-Body:
-- files: File[] (mínimo 2 PDFs)
-```
-
-#### 4. PDF para Imagens
-
-```http
-POST /api/pdf/pdf-to-images
-Content-Type: multipart/form-data
-Authorization: Bearer {token}
-
-Body:
-- files: File (único PDF)
-- format: 'png' | 'jpg' | 'webp' (padrão: png)
-- quality: number (50-100, padrão: 95)
-- density: number (DPI, 150-600, padrão: 300)
-- pages: string (opcional, ex: "[1,2,3]" ou "all")
-```
-
-#### 5. Imagens para PDF
-
-```http
-POST /api/pdf/images-to-pdf
-Content-Type: multipart/form-data
-Authorization: Bearer {token}
-- enableOCR: boolean (opcional, adiciona camada OCR ao PDF)
-
-Body:
-- files: File[] (array de imagens)
-- fitToPage: boolean (padrão: true)
-- pageSize: string (opcional, JSON: {"width":595,"height":842})
-```
-
-#### 6. OCR
-
-```http
-POST /api/pdf/ocr
-Content-Type: multipart/form-data
-Authorization: Bearer {token}
-
-Body:
-- files: File (único PDF)
-- language: string ('por' | 'eng' | 'spa', padrão: 'por')
-- pages: string (opcional, ex: "[1,2]" ou "all")
-```
-
-#### 7. Informações do PDF
-
-```http
-POST /api/pdf/info
-Content-Type: multipart/form-data
-Authorization: Bearer {token}
-
-Body:
-- files: File (único PDF)
-```
-
-#### 8. Histórico de Operações
-
-```http
-GET /api/pdf/history?page=1&limit=20
-Authorization: Bearer {token}
-```
-
-#### 9. Download de Arquivo Processado
-
-```http
-GET /api/pdf/download/:operacaoId/:fileIndex
-Authorization: Bearer {token}
-```
-
-## Estrutura de Resposta
-
-### Sucesso (Compressão)
-...],
-  "outputPaths": ["/path/compressed-1.pdf", "/path/compressed-2.pdf"],
-  "totalOriginalSize": 1048576,
-  "totalCompressedSize": 314572,
-  "reduction": 70.0,
-  "processingTime": 1234
-}
-```
-
-### Sucesso (Split/PDF para Imagens - com ZIP)
-
-```json
-{
-  "success": true,
-  "operacaoId": "uuid",
-  "filesCreated": 10,
-  "outputPaths": ["/path/page-1.pdf", "/path/page-2.pdf", ...],
-  "zipPath": "/path/arquivos-uuid.zip",
-  "processingTime": 2345
-  ],
-  "totalOriginalSize": 1048576,
-  "totalCompressedSize": 524288,
-  "totalReduction": 50.0,
-  "processingTime": 1234
-}
-```
-
-### Sucesso (OCR)
-
-```json
-{
-  "success": true,
-  "operacaoId": "uuid",
-  "result": {
-    "text": "Texto extraído completo...",
-    "confidence": 95.5,
-    "pages": [
-      {
-        "pageNumber": 1,
-        "text": "Texto da página 1...",
-        "confidence": 96.2
-      }
-    ]
-  },
-  "processingTime": 5678
-}
-```
-
-### Erro
-
-```json
-{
-  "error": "Falha ao processar arquivo",
-  "message": "Detalhes específicos do erro"
-}
-```
-
-## Modelo de Dados
-
-### OperacaoPDF
-
-```typescript
-interface OperacaoPDF {
-  id: string;
-  tipoOperacao: 'COMPRIMIR' | 'DIVIDIR' | 'MESCLAR' | 'PDF_PARA_IMAGEM' | 'IMAGEM_PARA_PDF' | 'OCR';
-  status: 'PROCESSANDO' | 'CONCLUIDO' | 'ERRO';
-  usuarioId: string;
-  arquivosOriginais: string[];
-  arquivosResultado: string[];
-  tamanhoOriginal: bigint;
-  tamanhoResultado: bigint | null;
-  parametros: any;
-  mensagemErro: string | null;
-  detalhesOCR: any | null;
-  tempoProcessamento: number | null;
-  criadoEm: Date;
-  atualizadoEm: Date;
-}
-```
-
-## Segurança
-
-- ✅ Autenticação obrigatória em todas as rotas
-- ✅ Validação de tipos de arquivo (apenas PDF e imagens)
-- ✅ Limite de tamanho de arquivo (100MB por arquivo)
-- ✅ Limite de quantidade de arquivos por operação
-- ✅ Sanitização de nomes de arquivo
-- ✅ Isolamento de arquivos por operação
-- ✅ Limpeza automática de arquivos temporários
-
-## Performance
-
-- ✅ Processamento assíncrono
-- ✅ Otimização de memória com streams
-- ✅ Compressão sem perda de qualidade perceptível
-- ✅ Cache de workers de OCR
-- ✅ Índices no banco de dados para consultas rápidas
-- ✅ Limpeza automática de arquivos antigos
-
-## Tratamento de Erros
-
-Todos os erros são:
-- Logados no console do servidor
-- Registrados no banco de dados (tabela operacoes_pdf)
-- Retornados ao cliente com mensagens descritivas
-- Capturados por try-catch em todas as operações
-
-## Limitações
-
-- Tamanho máximo por arquivo: 100MB
-- Máximo de arquivos para compressão: 10
-- Máximo de arquivos para mesclagem: 50
-- Máximo de imagens para conversão em PDF: 100
-- Arquivos processados são mantidos por 24 horas
-- **Timeout de operações:** 10 minutos (600 segundos)
-  - Operações longas (OCR, compressão de PDFs grandes) podem levar alguns minutos
-  - O sistema está configurado para suportar até 10 minutos de processamento
-
-## Manutenção
-
-### Limpeza de Arquivos Antigos
-
-Execute periodicamente (recomendado: diariamente via cron):
-
-```typescript
-import { PDFService } from './src/services/pdfService';
-
-// Remove arquivos com mais de 24 horas
-await PDFService.cleanupOldFiles(24);
-```
-
-### Monitoramento
-
-Consulte a tabela `operacoes_pdf` para:
-- Estatísticas de uso
-- Taxa de erro
-- Tempo médio de processamento
-- Operações mais utilizadas
-
-```sql
--- Operações por tipo
-SELECT "tipoOperacao", COUNT(*) as total
-FROM operacoes_pdf
-GROUP BY "tipoOperacao"
-ORDER BY total DESC;
-
--- Taxa de sucesso
-SELECT 
-  status,
-  COUNT(*) as total,
-  ROUND(COUNT(*) * 100.0 / SUM(COUNT(*)) OVER(), 2) as percentual
-FROM operacoes_pdf
-GROUP BY status;
-
--- Tempo médio por operação
-SELECT 
-  "tipoOperacao",
-  AVG("tempoProcessamento") as tempo_medio_ms,
-  MIN("tempoProcessamento") as tempo_min_ms,
-  MAX("tempoProcessamento") as tempo_max_ms
-FROM operacoes_pdf
-WHERE status = 'CONCLUIDO'
-GROUP BY "tipoOperacao";
-```
-
-## Troubleshooting
-
-### Erro: "Could not execute GraphicsMagick/ImageMagick"
-
-**Sintoma:** Erro ao converter PDF para imagens:
-```
-Error: Could not execute GraphicsMagick/ImageMagick: gm "convert" ... 
-this most likely means the gm/convert binaries can't be found
-```
-
-**Causa:** GraphicsMagick não está instalado no sistema/container.
-
-**Solução:**
-
-**Docker:**
-```bash
-# Rebuild a imagem Docker com GraphicsMagick incluído
-docker-compose down
-docker-compose build --no-cache
-docker-compose up -d
-```
-
-**Local:**
-```bash
-# Ubuntu/Debian
-sudo apt-get install graphicsmagick
-
-# MacOS
-brew install graphicsmagick
-
-# Verifique a instalação
-gm version
-```
-
-### Erro 504: Gateway Timeout (Timeout ao processar PDF)
-
-**Sintoma:** Operação de compressão ou OCR retorna erro 504 após ~60 segundos:
-```
-Failed to load resource: the server responded with a status of 504
-```
-
-**Causa:** Operações de PDF (especialmente compressão e OCR) podem levar vários minutos para arquivos grandes. O timeout padrão de 60 segundos é insuficiente.
-
-**Solução:** As configurações de timeout foram aumentadas para **10 minutos** em:
-- ✅ Express server (`src/server/index.ts`)
-- ✅ Vite proxy (`vite.config.ts`)
-- ✅ Axios frontend (`PDFManipulationPage.tsx`)
-
-Se ainda ocorrer timeout:
-1. Verifique se rebuild foi feito após as alterações
-2. Reduza o tamanho do arquivo ou qualidade
-3. Processe menos arquivos por vez
-4. Para PDFs muito grandes (>50MB), considere fazer upload em partes
-
-**Dicas de performance:**
-- Compressão: Use qualidade 50-70 para PDFs grandes
-- OCR: Processe apenas páginas necessárias, não o PDF inteiro
-- Split: Use chunks menores para PDFs com muitas páginas
-
-### Erro: ENOENT ao deletar arquivos do histórico
-
-**Sintoma:** Erro ao limpar histórico:
-```
-Error: ENOENT: no such file or directory, unlink '/path/to/file.pdf'
-```
-
-**Causa:** Tentativa de deletar arquivos que não existem mais (já foram removidos manualmente ou por outro processo).
-
-**Solução:** ✅ **Corrigido automaticamente** - O sistema agora verifica se o arquivo existe antes de tentar deletar e ignora erros ENOENT silenciosamente.
-
-### Erro: Imagens baixadas com extensão .pdf (ou sem extensão correta)
-
-**Sintoma:** Ao baixar imagens geradas pela conversão PDF→Imagens, os arquivos vêm com extensão .pdf ou precisam ser renomeados para .png/.jpg para serem visualizados.
-
-**Causa:** O servidor não estava enviando o Content-Type correto no header HTTP, OU o frontend estava ignorando os headers do servidor e forçando o nome como `.pdf`.
-
-**Solução:** ✅ **Corrigido automaticamente** - O sistema agora:
-
-**Backend:**
-- Detecta automaticamente o tipo MIME correto baseado na extensão (.png, .jpg, .webp, .zip, .pdf)
-- Define headers HTTP apropriados (`Content-Type` e `Content-Disposition`)
-- Garante que o nome do arquivo no download mantém a extensão original
-- Adiciona logs de debug para facilitar troubleshooting
-
-**Frontend:**
-- Extrai o nome do arquivo do header `Content-Disposition` enviado pelo servidor
-- Usa o `Content-Type` correto do servidor ao criar o Blob para download
-- Não força mais extensão `.pdf` em todos os downloads
-- Adiciona log no console do browser: `Download frontend: arquivo.png (image/png)`
-- Libera memória do blob URL após download
-
-Se ainda ocorrer o problema:
-1. Abra o Console do DevTools (F12) e verifique os logs de download
-2. Verifique se os headers estão sendo recebidos corretamente na aba Network
-3. Limpe o cache do browser (Ctrl+Shift+Del)
-4. Teste em uma aba anônima/privada
-5. Use a opção de **Download ZIP** que sempre funciona corretamente
-
-### Erro: "Tesseract worker failed"
-
-Solução: Certifique-se de que o Tesseract está instalado corretamente:
-
-```bash
-npm install tesseract.js --force
-```
-
-### Erro: "Cannot find module 'sharp'"
-
-Solução: Reinstale o Sharp com rebuild:
-
-```bash
-npm uninstall sharp
-npm install sharp
-npm rebuild sharp
-```
-
-### Erro: "ENOSPC: no space left on device"
-
-Solução: Aumente o espaço em disco ou execute a limpeza:
-
-```bash
-npm run cleanup-pdf-files
-```
-
-### Performance lenta no OCR
-
-Solução: Reduza o DPI ou processe menos páginas por vez.
-
-## Suporte
-
-Para questões ou problemas:
-1. Verifique os logs do servidor
-2. Consulte a tabela `operacoes_pdf` para detalhes do erro
-3. Verifique se os diretórios de storage têm permissões corretas
-4. Certifique-se de que todas as dependências estão instaladas
-
-## Changelog
-
-### v1.1.2 (2026-02-27)
-- 🔧 **Correção DEFINITIVA de downloads** - Arquivos agora baixam com nome e extensão corretos
-  - **Backend:** Detecta tipo MIME e define headers HTTP apropriados (Content-Type, Content-Disposition)
-  - **Frontend:** Extrai nome do arquivo e tipo MIME dos headers da resposta
-  - **Frontend:** Não força mais `.pdf` em todos os downloads - usa nome real do servidor
-  - **Frontend:** Cria Blob com Content-Type correto preservando o formato original
-  - Adiciona logs de debug no backend e frontend para troubleshooting
-  - Suporta formato 'jpeg' além de 'jpg'
-  - Fallback para PNG em formatos não suportados
-  - Libera memória de blob URLs após download
-- 🐛 **Melhorias no pdfToImages** - Adicionado suporte para 'jpeg' e fallback para formatos inválidos
-
-### v1.1.1 (2026-02-27)
-- 🔧 **Correção de timeout 504** - Aumentado timeout para 10 minutos em todas as camadas
-  - Express server: 600 segundos
-  - Vite proxy: 600 segundos  
-  - Axios frontend: 600 segundos
-- 🗑️ **Correção ENOENT** - Sistema agora ignora arquivos já deletados ao limpar histórico
-- 📋 **Gerenciamento de histórico** - Botões para limpar histórico completo ou arquivos antigos
-- 🐛 **Melhorias de estabilidade** - Verificação de existência de arquivos antes de deletar
-- 📚 **Documentação expandida** - Adicionado troubleshooting completo
-
-### v1.1.0 (2026-02-27)
-- 🚀 **Compressão agressiva** com redução >60% do tamanho original
-- 📦 **Download em ZIP** para operações com múltiplos arquivos (split, pdfToImages)
-- 🔍 **OCR embutido** - opção de tornar PDFs pesquisáveis (compress, merge, imagesToPDF)
-- ⚡ **Otimização de imagens** com qualidade ajustável (30-100%)
-- 🎯 **Interface aprimorada** com indicadores visuais e opções de OCR
-
-### v1.0.0 (2026-02-27)
-- ✅ Implementação inicial
-- ✅ Compressão sem perda de qualidade
-- ✅ Divisão de PDFs
-- ✅ Mesclagem de PDFs
-- ✅ Conversão PDF para imagens
-- ✅ Conversão de imagens para PDF
-- ✅ OCR com Tesseract
-- ✅ Histórico de operações
-- ✅ Interface React completa
-- ✅ Validação e segurança

package.json

@@ -15,13 +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-pdf-deps": "npm install pdf-parse pdf2pic tesseract.js archiver && npm install --save-dev @types/pdf-parse @types/archiver",
-    "cleanup-pdf-files": "ts-node scripts/cleanup_pdf_files.ts"
+    "security-check": "npm audit"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
@@ -38,8 +37,7 @@
     "@tiptap/starter-kit": "^2.11.7",
     "@types/sharp": "^0.32.0",
     "@types/ua-parser-js": "^0.7.36",
-    "archiver": "^7.0.1",
-    "axios": "^1.6.5",
+    "axios": "^1.8.4",
     "bcryptjs": "^2.4.3",
     "buffer": "^6.0.3",
     "bullmq": "^4.12.0",
@@ -47,17 +45,14 @@
     "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",
     "opentimestamps-javascript": "^1.0.1",
     "pdf-lib": "^1.17.1",
-    "pdf-parse": "^1.1.1",
-    "pdf2pic": "^3.1.3",
-    "pdfkit": "^0.13.0",
     "puppeteer": "^24.5.0",
     "qrcode": "^1.5.3",
-    "tesseract.js": "^5.0.4",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
@@ -69,35 +64,36 @@
     "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": {
     "@tailwindcss/postcss": "^4.1.1",
-    "@types/archiver": "^6.0.2",
     "@types/bcryptjs": "^2.4.6",
     "@types/cors": "^2.8.17",
     "@types/express": "^5.0.1",
     "@types/jsonwebtoken": "^9.0.9",
     "@types/multer": "^1.4.12",
     "@types/node": "^22.13.14",
-    "@types/pdf-parse": "^1.1.4",
     "@types/react": "^19.0.12",
     "@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",
@@ -120,5 +116,11 @@
       "--disable-gpu",
       "--window-size=1920x1080"
     ]
+  },
+  "puppeteerOptions": {
+    "browserFetcher": {
+      "platform": "win32",
+      "downloadPath": ".cache/puppeteer"
+    }
   }
 }

postcss.config.js

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

prisma/migrations/20260227000000_add_operacoes_pdf.sql

@@ -1,36 +0,0 @@
--- Migration para adicionar tabela de operações de PDF
--- Created: 2026-02-27
-
--- Criar ENUM para tipo de operação
-CREATE TYPE "TipoOperacaoPDF" AS ENUM ('COMPRIMIR', 'DIVIDIR', 'MESCLAR', 'PDF_PARA_IMAGEM', 'IMAGEM_PARA_PDF', 'OCR');
-
--- Criar ENUM para status da operação
-CREATE TYPE "StatusOperacaoPDF" AS ENUM ('PROCESSANDO', 'CONCLUIDO', 'ERRO');
-
--- Criar tabela de operações de PDF
-CREATE TABLE "operacoes_pdf" (
-    "id" UUID NOT NULL DEFAULT gen_random_uuid(),
-    "tipoOperacao" "TipoOperacaoPDF" NOT NULL,
-    "status" "StatusOperacaoPDF" NOT NULL DEFAULT 'PROCESSANDO',
-    "usuarioId" UUID NOT NULL,
-    "arquivosOriginais" TEXT[] NOT NULL,
-    "arquivosResultado" TEXT[] NOT NULL,
-    "tamanhoOriginal" BIGINT NOT NULL,
-    "tamanhoResultado" BIGINT,
-    "parametros" JSONB,
-    "mensagemErro" TEXT,
-    "detalhesOCR" JSONB,
-    "tempoProcessamento" INTEGER,
-    "criadoEm" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "atualizadoEm" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "operacoes_pdf_pkey" PRIMARY KEY ("id")
-);
-
--- Adicionar foreign key para usuarios
-ALTER TABLE "operacoes_pdf" ADD CONSTRAINT "operacoes_pdf_usuarioId_fkey" FOREIGN KEY ("usuarioId") REFERENCES "usuarios"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
-
--- Criar índice para melhor performance nas consultas
-CREATE INDEX "operacoes_pdf_usuarioId_idx" ON "operacoes_pdf"("usuarioId");
-CREATE INDEX "operacoes_pdf_criadoEm_idx" ON "operacoes_pdf"("criadoEm" DESC);
-CREATE INDEX "operacoes_pdf_status_idx" ON "operacoes_pdf"("status");

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);
   })

prisma/schema.prisma

@@ -51,9 +51,6 @@ model Usuario {
   // Adicionar relação para cálculos de pensão alimentícia
   calculosPensaoAlimenticia CalculoPensaoAlimenticia[]
 
-  // Adicionar relação para operações de PDF
-  operacoesPDF OperacaoPDF[]
-
   @@map("usuarios")
 }
 
@@ -1070,47 +1067,3 @@ model CalculoPensaoAlimenticia {
 
   @@map("calculos_pensao_alimenticia")
 }
-
-// Modelo para histórico de operações de PDF
-enum TipoOperacaoPDF {
-  COMPRIMIR
-  DIVIDIR
-  MESCLAR
-  PDF_PARA_IMAGEM
-  IMAGEM_PARA_PDF
-  OCR
-}
-
-enum StatusOperacaoPDF {
-  PROCESSANDO
-  CONCLUIDO
-  ERRO
-}
-
-model OperacaoPDF {
-  id                String            @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
-  tipoOperacao      TipoOperacaoPDF
-  status            StatusOperacaoPDF @default(PROCESSANDO)
-  usuarioId         String            @db.Uuid
-  usuario           Usuario           @relation(fields: [usuarioId], references: [id])
-  
-  // Informações dos arquivos
-  arquivosOriginais String[]          // Array de paths dos arquivos originais
-  arquivosResultado String[]          // Array de paths dos arquivos resultantes
-  tamanhoOriginal   BigInt            // Tamanho total dos arquivos originais em bytes
-  tamanhoResultado  BigInt?           // Tamanho total dos arquivos resultantes em bytes
-  
-  // Parâmetros da operação
-  parametros        Json?             // Parâmetros específicos da operação (ex: páginas para dividir)
-  
-  // Resultado da operação
-  mensagemErro      String?           
-  detalhesOCR       Json?             // Quando for OCR, armazena o texto extraído
-  
-  tempoProcessamento Int?             // Tempo de processamento em milissegundos
-  
-  criadoEm          DateTime          @default(now())
-  atualizadoEm      DateTime          @updatedAt
-  
-  @@map("operacoes_pdf")
-}

public/tinymce/langs/pt_BR.js

@@ -1,232 +1,239 @@
-
-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",
-    "Heading 4": "Cabe\u00e7alho 4",
-    "Div": "Div",
-    "Heading 2": "Cabe\u00e7alho 2",
-    "Paste": "Colar",
-    "Close": "Fechar",
-    "Font Family": "Fonte",
-    "Pre": "Pre",
-    "Align right": "Alinhar \u00e0 direita",
-    "New document": "Novo documento",
-    "Blockquote": "Aspas",
-    "Numbered list": "Lista ordenada",
-    "Heading 1": "Cabe\u00e7alho 1",
-    "Headings": "Cabe\u00e7alhos",
-    "Increase indent": "Aumentar recuo",
-    "Formats": "Formatos",
-    "Headers": "Cabe\u00e7alhos",
-    "Select all": "Selecionar tudo",
-    "Header 3": "Cabe\u00e7alho 3",
-    "Blocks": "Blocos",
-    "Undo": "Desfazer",
-    "Strikethrough": "Riscar",
-    "Bullet list": "Lista n\u00e3o ordenada",
-    "Header 1": "Cabe\u00e7alho 1",
-    "Superscript": "Sobrescrito",
-    "Clear formatting": "Limpar formata\u00e7\u00e3o",
-    "Font Sizes": "Tamanho",
-    "Subscript": "Subscrever",
-    "Header 6": "Cabe\u00e7alho 6",
-    "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",
-    "Align left": "Alinhar \u00e0 esquerda",
-    "Visual aids": "Ajuda visual",
-    "Lower Greek": "\u03b1. \u03b2. \u03b3. ...",
-    "Square": "Quadrado",
-    "Default": "Padr\u00e3o",
-    "Lower Alpha": "a. b. c. ...",
-    "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?",
-    "Restore last draft": "Restaurar \u00faltimo rascunho",
-    "Special character": "Caracteres especiais",
-    "Source code": "C\u00f3digo fonte",
-    "Language": "Idioma",
-    "Insert\/Edit code sample": "Inserir\/Editar c\u00f3digo de exemplo",
-    "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",
-    "Document properties": "Propriedades do documento",
-    "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",
-    "Constrain proportions": "Manter propor\u00e7\u00f5es",
-    "Vertical space": "Espa\u00e7amento vertical",
-    "Image description": "Inserir descri\u00e7\u00e3o",
-    "Style": "Estilo",
-    "Dimensions": "Dimens\u00f5es",
-    "Insert image": "Inserir imagem",
-    "Image": "Imagem",
-    "Zoom in": "Aumentar zoom",
-    "Contrast": "Contraste",
-    "Back": "Voltar",
-    "Gamma": "Gama",
-    "Flip horizontally": "Virar horizontalmente",
-    "Resize": "Redimensionar",
-    "Sharpen": "Aumentar nitidez",
-    "Zoom out": "Diminuir zoom",
-    "Image options": "Op\u00e7\u00f5es de Imagem",
-    "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",
-    "Flip vertically": "Virar verticalmente",
-    "Invert": "Inverter",
-    "Date\/time": "data\/hora",
-    "Insert date\/time": "Inserir data\/hora",
-    "Remove link": "Remover link",
-    "Url": "Url",
-    "Text to display": "Texto para mostrar",
-    "Anchors": "\u00c2ncoras",
-    "Insert link": "Inserir 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:\/\/?",
-    "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?",
-    "Insert\/edit link": "Inserir\/editar link",
-    "Insert\/edit video": "Inserir\/editar v\u00eddeo",
-    "Media": "imagem",
-    "Alternative source": "Fonte alternativa",
-    "Paste your embed code below:": "Insira o c\u00f3digo de incorpora\u00e7\u00e3o abaixo:",
-    "Insert video": "Inserir v\u00eddeo",
-    "Poster": "Autor",
-    "Insert\/edit media": "Inserir\/editar imagem",
-    "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",
-    "Whole words": "Palavras inteiras",
-    "Find and replace": "Localizar e substituir",
-    "Replace with": "Substituir por",
-    "Find": "Localizar",
-    "Replace all": "Substituir tudo",
-    "Match case": "Diferenciar mai\u00fasculas e min\u00fasculas",
-    "Prev": "Anterior",
-    "Spellcheck": "Corretor ortogr\u00e1fico",
-    "Finish": "Finalizar",
-    "Ignore all": "Ignorar tudo",
-    "Ignore": "Ignorar",
-    "Add to Dictionary": "Adicionar ao Dicion\u00e1rio",
-    "Insert row before": "Inserir linha antes",
-    "Rows": "Linhas",
-    "Height": "Altura",
-    "Paste row after": "Colar linha depois",
-    "Alignment": "Alinhamento",
-    "Border color": "Cor da borda",
-    "Column group": "Agrupar coluna",
-    "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",
-    "Delete row": "Excluir linha",
-    "Paste row before": "Colar linha antes",
-    "Scope": "Escopo",
-    "Delete table": "Excluir tabela",
-    "H Align": "Alinhamento H",
-    "Top": "Superior",
-    "Header cell": "C\u00e9lula cabe\u00e7alho",
-    "Column": "Coluna",
-    "Row group": "Agrupar linha",
-    "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",
-    "V Align": "Alinhamento V",
-    "Header": "Cabe\u00e7alho",
-    "Right": "Direita",
-    "Insert column after": "Inserir coluna depois",
-    "Cols": "Colunas",
-    "Insert row after": "Inserir linha depois",
-    "Width": "Largura",
-    "Cell properties": "Propriedades da c\u00e9lula",
-    "Left": "Esquerdo",
-    "Cut row": "Recortar linha",
-    "Delete column": "Excluir coluna",
-    "Center": "Centro",
-    "Merge cells": "Agrupar c\u00e9lulas",
-    "Insert template": "Inserir modelo",
-    "Templates": "Modelos",
-    "Background color": "Cor do fundo",
-    "Custom...": "Personalizado...",
-    "Custom color": "Cor personalizada",
-    "No color": "Nenhuma cor",
-    "Text color": "Cor do texto",
-    "Table of Contents": "\u00edndice de Conte\u00fado",
-    "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"
-    });
-    
+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",
+  "Heading 4": "Cabe\u00e7alho 4",
+  Div: "Div",
+  "Heading 2": "Cabe\u00e7alho 2",
+  Paste: "Colar",
+  Close: "Fechar",
+  "Font Family": "Fonte",
+  Pre: "Pre",
+  "Align right": "Alinhar \u00e0 direita",
+  "New document": "Novo documento",
+  Blockquote: "Aspas",
+  "Numbered list": "Lista ordenada",
+  "Heading 1": "Cabe\u00e7alho 1",
+  Headings: "Cabe\u00e7alhos",
+  "Increase indent": "Aumentar recuo",
+  Formats: "Formatos",
+  Headers: "Cabe\u00e7alhos",
+  "Select all": "Selecionar tudo",
+  "Header 3": "Cabe\u00e7alho 3",
+  Blocks: "Blocos",
+  Undo: "Desfazer",
+  Strikethrough: "Riscar",
+  "Bullet list": "Lista n\u00e3o ordenada",
+  "Header 1": "Cabe\u00e7alho 1",
+  Superscript: "Sobrescrito",
+  "Clear formatting": "Limpar formata\u00e7\u00e3o",
+  "Font Sizes": "Tamanho",
+  Subscript: "Subscrever",
+  "Header 6": "Cabe\u00e7alho 6",
+  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",
+  "Align left": "Alinhar \u00e0 esquerda",
+  "Visual aids": "Ajuda visual",
+  "Lower Greek": "\u03b1. \u03b2. \u03b3. ...",
+  Square: "Quadrado",
+  Default: "Padr\u00e3o",
+  "Lower Alpha": "a. b. c. ...",
+  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?",
+  "Restore last draft": "Restaurar \u00faltimo rascunho",
+  "Special character": "Caracteres especiais",
+  "Source code": "C\u00f3digo fonte",
+  Language: "Idioma",
+  "Insert\/Edit code sample": "Inserir\/Editar c\u00f3digo de exemplo",
+  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",
+  "Document properties": "Propriedades do documento",
+  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",
+  "Constrain proportions": "Manter propor\u00e7\u00f5es",
+  "Vertical space": "Espa\u00e7amento vertical",
+  "Image description": "Inserir descri\u00e7\u00e3o",
+  Style: "Estilo",
+  Dimensions: "Dimens\u00f5es",
+  "Insert image": "Inserir imagem",
+  Image: "Imagem",
+  "Zoom in": "Aumentar zoom",
+  Contrast: "Contraste",
+  Back: "Voltar",
+  Gamma: "Gama",
+  "Flip horizontally": "Virar horizontalmente",
+  Resize: "Redimensionar",
+  Sharpen: "Aumentar nitidez",
+  "Zoom out": "Diminuir zoom",
+  "Image options": "Op\u00e7\u00f5es de Imagem",
+  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",
+  "Flip vertically": "Virar verticalmente",
+  Invert: "Inverter",
+  "Date\/time": "data\/hora",
+  "Insert date\/time": "Inserir data\/hora",
+  "Remove link": "Remover link",
+  Url: "Url",
+  "Text to display": "Texto para mostrar",
+  Anchors: "\u00c2ncoras",
+  "Insert link": "Inserir 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:\/\/?",
+  "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?",
+  "Insert\/edit link": "Inserir\/editar link",
+  "Insert\/edit video": "Inserir\/editar v\u00eddeo",
+  Media: "imagem",
+  "Alternative source": "Fonte alternativa",
+  "Paste your embed code below:":
+    "Insira o c\u00f3digo de incorpora\u00e7\u00e3o abaixo:",
+  "Insert video": "Inserir v\u00eddeo",
+  Poster: "Autor",
+  "Insert\/edit media": "Inserir\/editar imagem",
+  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",
+  "Whole words": "Palavras inteiras",
+  "Find and replace": "Localizar e substituir",
+  "Replace with": "Substituir por",
+  Find: "Localizar",
+  "Replace all": "Substituir tudo",
+  "Match case": "Diferenciar mai\u00fasculas e min\u00fasculas",
+  Prev: "Anterior",
+  Spellcheck: "Corretor ortogr\u00e1fico",
+  Finish: "Finalizar",
+  "Ignore all": "Ignorar tudo",
+  Ignore: "Ignorar",
+  "Add to Dictionary": "Adicionar ao Dicion\u00e1rio",
+  "Insert row before": "Inserir linha antes",
+  Rows: "Linhas",
+  Height: "Altura",
+  "Paste row after": "Colar linha depois",
+  Alignment: "Alinhamento",
+  "Border color": "Cor da borda",
+  "Column group": "Agrupar coluna",
+  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",
+  "Delete row": "Excluir linha",
+  "Paste row before": "Colar linha antes",
+  Scope: "Escopo",
+  "Delete table": "Excluir tabela",
+  "H Align": "Alinhamento H",
+  Top: "Superior",
+  "Header cell": "C\u00e9lula cabe\u00e7alho",
+  Column: "Coluna",
+  "Row group": "Agrupar linha",
+  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",
+  "V Align": "Alinhamento V",
+  Header: "Cabe\u00e7alho",
+  Right: "Direita",
+  "Insert column after": "Inserir coluna depois",
+  Cols: "Colunas",
+  "Insert row after": "Inserir linha depois",
+  Width: "Largura",
+  "Cell properties": "Propriedades da c\u00e9lula",
+  Left: "Esquerdo",
+  "Cut row": "Recortar linha",
+  "Delete column": "Excluir coluna",
+  Center: "Centro",
+  "Merge cells": "Agrupar c\u00e9lulas",
+  "Insert template": "Inserir modelo",
+  Templates: "Modelos",
+  "Background color": "Cor do fundo",
+  "Custom...": "Personalizado...",
+  "Custom color": "Cor personalizada",
+  "No color": "Nenhuma cor",
+  "Text color": "Cor do texto",
+  "Table of Contents": "\u00edndice de Conte\u00fado",
+  "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",
+});

scripts/cleanup_pdf_files.ts

@@ -1,41 +0,0 @@
-import { PDFService } from '../src/services/pdfService';
-
-/**
- * Script para limpeza de arquivos PDF antigos
- * Remove arquivos com mais de 24 horas por padrão
- * 
- * Uso:
- * npm run cleanup-pdf-files
- * 
- * Ou via ts-node:
- * ts-node scripts/cleanup_pdf_files.ts [horas]
- */
-
-async function main() {
-  console.log('Iniciando limpeza de arquivos PDF antigos...');
-  
-  const horasArg = process.argv[2];
-  const horas = horasArg ? parseInt(horasArg) : 24;
-  
-  if (isNaN(horas) || horas < 0) {
-    console.error('Erro: O argumento deve ser um número positivo de horas');
-    process.exit(1);
-  }
-  
-  console.log(`Removendo arquivos com mais de ${horas} horas...`);
-  
-  try {
-    await PDFService.cleanupOldFiles(horas);
-    console.log('✅ Limpeza concluída com sucesso!');
-  } catch (error) {
-    console.error('❌ Erro durante a limpeza:', error);
-    process.exit(1);
-  }
-}
-
-main()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error('Erro fatal:', error);
-    process.exit(1);
-  });

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 {

scripts/fix-uuid.sql

@@ -1,9 +0,0 @@
--- Identificar registros com UUID inválido
-SELECT id, uuid_column
-FROM atendimento
-WHERE uuid_column !~ '^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$';
-
--- Atualizar registros com UUID inválido
-UPDATE atendimento
-SET uuid_column = gen_random_uuid()
-WHERE uuid_column !~ '^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$';

scripts/rebuild-docker.bat

@@ -1,37 +0,0 @@
-@echo off
-:: Script para rebuild completo do Docker com dependências PDF
-:: Use este script após atualizar o Dockerfile para incluir GraphicsMagick
-
-echo ========================================
-echo Rebuild Docker - Sistema PDF
-echo ========================================
-echo.
-
-echo Parando containers...
-docker-compose down
-
-echo.
-echo Removendo imagens antigas...
-docker image prune -f
-
-echo.
-echo Reconstruindo imagem (sem cache)...
-docker-compose build --no-cache
-
-echo.
-echo Iniciando containers...
-docker-compose up -d
-
-echo.
-echo ========================================
-echo Rebuild concluído!
-echo ========================================
-echo.
-echo Verificando status dos containers:
-docker-compose ps
-
-echo.
-echo Para ver os logs:
-echo   docker-compose logs -f backend
-echo.
-pause

scripts/rebuild-docker.sh

@@ -1,36 +0,0 @@
-#!/bin/bash
-# Script para rebuild completo do Docker com dependências PDF
-# Use este script após atualizar o Dockerfile para incluir GraphicsMagick
-
-echo "========================================"
-echo "Rebuild Docker - Sistema PDF"
-echo "========================================"
-echo ""
-
-echo "Parando containers..."
-docker-compose down
-
-echo ""
-echo "Removendo imagens antigas..."
-docker image prune -f
-
-echo ""
-echo "Reconstruindo imagem (sem cache)..."
-docker-compose build --no-cache
-
-echo ""
-echo "Iniciando containers..."
-docker-compose up -d
-
-echo ""
-echo "========================================"
-echo "Rebuild concluído!"
-echo "========================================"
-echo ""
-echo "Verificando status dos containers:"
-docker-compose ps
-
-echo ""
-echo "Para ver os logs:"
-echo "  docker-compose logs -f backend"
-echo ""

scripts/test_pdf_operations.ts

@@ -1,271 +0,0 @@
-import { PDFService } from '../src/services/pdfService';
-import path from 'path';
-import fs from 'fs/promises';
-
-/**
- * Script de teste para funcionalidades de PDF
- * 
- * ATENÇÃO: Este é um script de teste. Certifique-se de ter arquivos de teste
- * disponíveis antes de executar.
- * 
- * Uso:
- * ts-node scripts/test_pdf_operations.ts
- */
-
-async function testPDFInfo() {
-  console.log('\n=== Testando: Informações do PDF ===');
-  try {
-    const testPdfPath = path.join(process.cwd(), 'test', 'sample.pdf');
-    
-    // Verifica se o arquivo existe
-    try {
-      await fs.access(testPdfPath);
-    } catch {
-      console.log('⚠️  Arquivo de teste não encontrado. Pulando teste.');
-      return;
-    }
-    
-    const info = await PDFService.getPDFInfo(testPdfPath);
-    console.log('✅ Informações obtidas com sucesso:');
-    console.log('   Páginas:', info.pages);
-    console.log('   Tamanho:', (info.size / 1024).toFixed(2), 'KB');
-    console.log('   Título:', info.title || 'N/A');
-  } catch (error) {
-    console.error('❌ Erro:', error);
-  }
-}
-
-async function testCompression() {
-  console.log('\n=== Testando: Compressão de PDF ===');
-  try {
-    const testPdfPath = path.join(process.cwd(), 'test', 'sample.pdf');
-    
-    try {
-      await fs.access(testPdfPath);
-    } catch {
-      console.log('⚠️  Arquivo de teste não encontrado. Pulando teste.');
-      return;
-    }
-    
-    const result = await PDFService.compressPDF(testPdfPath, undefined, {
-      quality: 95,
-    });
-    
-    console.log('✅ Compressão concluída:');
-    console.log('   Tamanho original:', (result.originalSize / 1024).toFixed(2), 'KB');
-    console.log('   Tamanho comprimido:', (result.compressedSize / 1024).toFixed(2), 'KB');
-    console.log('   Redução:', result.reduction.toFixed(2), '%');
-    console.log('   Arquivo salvo em:', result.outputPath);
-    
-    // Limpa o arquivo de teste
-    await fs.unlink(result.outputPath);
-  } catch (error) {
-    console.error('❌ Erro:', error);
-  }
-}
-
-async function testSplit() {
-  console.log('\n=== Testando: Divisão de PDF ===');
-  try {
-    const testPdfPath = path.join(process.cwd(), 'test', 'sample.pdf');
-    
-    try {
-      await fs.access(testPdfPath);
-    } catch {
-      console.log('⚠️  Arquivo de teste não encontrado. Pulando teste.');
-      return;
-    }
-    
-    // Primeiro, verifica quantas páginas o PDF tem
-    const info = await PDFService.getPDFInfo(testPdfPath);
-    
-    if (info.pages < 2) {
-      console.log('⚠️  PDF tem menos de 2 páginas. Pulando teste de divisão.');
-      return;
-    }
-    
-    const outputPaths = await PDFService.splitPDF(testPdfPath, {
-      splitType: 'chunks',
-      chunkSize: 1,
-    });
-    
-    console.log('✅ Divisão concluída:');
-    console.log('   Arquivos criados:', outputPaths.length);
-    
-    // Limpa os arquivos de teste
-    for (const outputPath of outputPaths) {
-      await fs.unlink(outputPath);
-    }
-  } catch (error) {
-    console.error('❌ Erro:', error);
-  }
-}
-
-async function testMerge() {
-  console.log('\n=== Testando: Mesclagem de PDFs ===');
-  try {
-    const testPdf1 = path.join(process.cwd(), 'test', 'sample1.pdf');
-    const testPdf2 = path.join(process.cwd(), 'test', 'sample2.pdf');
-    
-    try {
-      await fs.access(testPdf1);
-      await fs.access(testPdf2);
-    } catch {
-      console.log('⚠️  Arquivos de teste não encontrados. Pulando teste.');
-      return;
-    }
-    
-    const outputPath = await PDFService.mergePDFs({
-      filePaths: [testPdf1, testPdf2],
-      outputPath: path.join(process.cwd(), 'storage', 'pdf-output', 'test-merged.pdf'),
-    });
-    
-    console.log('✅ Mesclagem concluída:');
-    console.log('   Arquivo salvo em:', outputPath);
-    
-    // Limpa o arquivo de teste
-    await fs.unlink(outputPath);
-  } catch (error) {
-    console.error('❌ Erro:', error);
-  }
-}
-
-async function testImagesToPDF() {
-  console.log('\n=== Testando: Imagens para PDF ===');
-  try {
-    const testImage1 = path.join(process.cwd(), 'test', 'image1.png');
-    const testImage2 = path.join(process.cwd(), 'test', 'image2.png');
-    
-    try {
-      await fs.access(testImage1);
-    } catch {
-      console.log('⚠️  Imagens de teste não encontradas. Pulando teste.');
-      return;
-    }
-    
-    const imagePaths = [testImage1];
-    
-    try {
-      await fs.access(testImage2);
-      imagePaths.push(testImage2);
-    } catch {
-      // Ignora se a segunda imagem não existe
-    }
-    
-    const outputPath = await PDFService.imagesToPDF({
-      imagePaths,
-      outputPath: path.join(process.cwd(), 'storage', 'pdf-output', 'test-images.pdf'),
-      fitToPage: true,
-    });
-    
-    console.log('✅ Conversão concluída:');
-    console.log('   Imagens processadas:', imagePaths.length);
-    console.log('   Arquivo salvo em:', outputPath);
-    
-    // Limpa o arquivo de teste
-    await fs.unlink(outputPath);
-  } catch (error) {
-    console.error('❌ Erro:', error);
-  }
-}
-
-async function testPDFToImages() {
-  console.log('\n=== Testando: PDF para Imagens ===');
-  try {
-    const testPdfPath = path.join(process.cwd(), 'test', 'sample.pdf');
-    
-    try {
-      await fs.access(testPdfPath);
-    } catch {
-      console.log('⚠️  Arquivo de teste não encontrado. Pulando teste.');
-      return;
-    }
-    
-    const outputPaths = await PDFService.pdfToImages(testPdfPath, {
-      format: 'png',
-      quality: 95,
-      density: 150, // Menor DPI para teste mais rápido
-      pages: [1], // Apenas primeira página
-    });
-    
-    console.log('✅ Conversão concluída:');
-    console.log('   Imagens criadas:', outputPaths.length);
-    
-    // Limpa os arquivos de teste
-    for (const outputPath of outputPaths) {
-      await fs.unlink(outputPath);
-    }
-  } catch (error) {
-    console.error('❌ Erro:', error);
-  }
-}
-
-async function testOCR() {
-  console.log('\n=== Testando: OCR ===');
-  console.log('⚠️  OCR pode levar vários segundos. Aguarde...');
-  try {
-    const testPdfPath = path.join(process.cwd(), 'test', 'sample-text.pdf');
-    
-    try {
-      await fs.access(testPdfPath);
-    } catch {
-      console.log('⚠️  Arquivo de teste não encontrado. Pulando teste.');
-      return;
-    }
-    
-    const result = await PDFService.performOCR(testPdfPath, {
-      language: 'por',
-      pages: [1], // Apenas primeira página
-    });
-    
-    console.log('✅ OCR concluído:');
-    console.log('   Confiança:', result.confidence.toFixed(2), '%');
-    console.log('   Páginas processadas:', result.pages.length);
-    console.log('   Texto extraído (primeiros 100 caracteres):');
-    console.log('   ', result.text.substring(0, 100).replace(/\n/g, ' '));
-  } catch (error) {
-    console.error('❌ Erro:', error);
-  }
-}
-
-async function main() {
-  console.log('╔════════════════════════════════════════════╗');
-  console.log('║  Teste de Operações de PDF                ║');
-  console.log('╚════════════════════════════════════════════╝');
-  
-  console.log('\nPré-requisitos:');
-  console.log('- Coloque arquivos de teste na pasta "test/"');
-  console.log('- sample.pdf: PDF com múltiplas páginas');
-  console.log('- sample1.pdf e sample2.pdf: PDFs para mesclagem');
-  console.log('- image1.png e image2.png: Imagens para conversão');
-  console.log('- sample-text.pdf: PDF com texto para OCR');
-  
-  // Criar diretório de teste se não existir
-  const testDir = path.join(process.cwd(), 'test');
-  try {
-    await fs.mkdir(testDir, { recursive: true });
-  } catch {
-    // Ignora se já existe
-  }
-  
-  await PDFService.initialize();
-  
-  await testPDFInfo();
-  await testCompression();
-  await testSplit();
-  await testMerge();
-  await testImagesToPDF();
-  await testPDFToImages();
-  await testOCR();
-  
-  console.log('\n╔════════════════════════════════════════════╗');
-  console.log('║  Testes concluídos!                       ║');
-  console.log('╚════════════════════════════════════════════╝\n');
-}
-
-main()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error('\n❌ Erro fatal durante os testes:', error);
-    process.exit(1);
-  });

src/App.tsx

@@ -1,80 +1,106 @@
+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 { DetalhePensaoAlimenticia } from './components/calculos/DetalhePensaoAlimenticia';
-
-// Importar componente de manipulação de PDF
-import { PDFManipulationPage } from './components/pdf/PDFManipulationPage';
+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 />}>
           <Route path="dashboard" element={<Dashboard />} />
           <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 />} />
@@ -83,64 +109,92 @@ const router = createBrowserRouter(
           <Route path="/atendimentos" element={<AtendimentosPage />} />
           <Route path="/atendimentos/:id" element={<AtendimentoDetalhes />} />
           <Route path="/tarefas" element={<TarefasPage />} />
-          <Route path="/usuarios" element={<UsuariosPage />} /> 
-          <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']}>
-              <AdminProvas />
-            </ProtectedRoute>
-          } />
-          <Route 
-            path="/provas/verificar/:hash" 
-            element={<VerificarProva />} 
+          <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={
-            <ProtectedRoute>
-              <CalculosList />
-            </ProtectedRoute>
-          } />
-          
-          <Route path="/calculos/novo" element={
-            <ProtectedRoute>
-              <NovoCalculo />
-            </ProtectedRoute>
-          } />
-          
-          <Route path="/calculos/:id" element={
-            <ProtectedRoute>
-              <DetalhesCalculo />
-            </ProtectedRoute>
-          } />
-          
+          <Route
+            path="/calculos"
+            element={
+              <ProtectedRoute>
+                <CalculosList />
+              </ProtectedRoute>
+            }
+          />
+
+          <Route
+            path="/calculos/novo"
+            element={
+              <ProtectedRoute>
+                <NovoCalculo />
+              </ProtectedRoute>
+            }
+          />
+
+          <Route
+            path="/calculos/:id"
+            element={
+              <ProtectedRoute>
+                <DetalhesCalculo />
+              </ProtectedRoute>
+            }
+          />
+
           {/* Rotas para Pensão Alimentícia */}
-          <Route path="/pensao-alimenticia/novo" element={
-            <ProtectedRoute>
-              <NovoPensaoAlimenticia />
-            </ProtectedRoute>
-          } />
-          
-          <Route path="/pensao-alimenticia/:id" element={
-            <ProtectedRoute>
-              <DetalhePensaoAlimenticia />
-            </ProtectedRoute>
-          } />
-          
-          {/* Rota para Manipulação de PDF */}
-          <Route path="/pdf" element={
-            <ProtectedRoute>
-              <PDFManipulationPage />
-            </ProtectedRoute>
-          } />
+          <Route
+            path="/pensao-alimenticia/nova"
+            element={
+              <ProtectedRoute>
+                <NovoPensaoAlimenticia />
+              </ProtectedRoute>
+            }
+          />
+
+          <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/AgendamentoCalendario.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useCallback } from 'react';
+import { Calendar } from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import ptBrLocale from '@fullcalendar/core/locales/pt-br';
+import { format } from 'date-fns';
+import { api } from '../services/api';
+import { toast } from 'react-toastify';
+
+interface Agendamento {
+  id: string;
+  data: string;
+  observacoes?: string;
+  status: string;
+  cliente: {
+    id: string;
+    nome: string;
+  };
+}
+
+interface CalendarEvent {
+  id: string;
+  title: string;
+  start: string;
+  end: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  extendedProps: {
+    agendamento: Agendamento;
+  };
+}
+
+interface AgendamentoCalendarioProps {
+  onEventClick?: (event: any) => void;
+  onDateSelect?: (selectInfo: any) => void;
+}
+
+export const AgendamentoCalendario: React.FC<AgendamentoCalendarioProps> = ({
+  onEventClick,
+  onDateSelect
+}) => {
+  const [eventos, setEventos] = useState<CalendarEvent[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const formatEventos = useCallback((agendamentos: Agendamento[]): CalendarEvent[] => {
+    return agendamentos.map(ag => ({
+      id: ag.id,
+      title: `${ag.cliente.nome} ${ag.observacoes ? `- ${ag.observacoes}` : ''}`,
+      start: ag.data,
+      end: ag.data,
+      backgroundColor: ag.status === 'CANCELADO' ? '#FEE2E2' : '#E0F2FE',
+      borderColor: ag.status === 'CANCELADO' ? '#EF4444' : '#0EA5E9',
+      extendedProps: {
+        agendamento: ag
+      }
+    }));
+  }, []);
+
+  const loadAgendamentos = useCallback(async ({ start, end }: { start: Date, end: Date }) => {
+    try {
+      setLoading(true);
+      setError(null);
+      
+      const response = await api.get('/atendimentos/agendamentos', {
+        params: {
+          inicio: format(start, 'yyyy-MM-dd'),
+          fim: format(end, 'yyyy-MM-dd')
+        }
+      });
+
+      setEventos(formatEventos(response.data));
+    } catch (err: any) {
+      const mensagem = err.response?.data?.error || 'Erro ao carregar agendamentos';
+      setError(mensagem);
+      toast.error(mensagem);
+    } finally {
+      setLoading(false);
+    }
+  }, [formatEventos]);
+
+  return (
+    <div className="relative h-full">
+      {loading && (
+        <div className="absolute inset-0 bg-white/50 flex items-center justify-center z-10">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
+        </div>
+      )}
+      
+      {error && (
+        <div className="absolute top-0 left-0 right-0 p-4 bg-red-100 text-red-700">
+          {error}
+        </div>
+      )}
+      
+      <Calendar
+        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+        initialView="dayGridMonth"
+        locale={ptBrLocale}
+        events={eventos}
+        editable={false}
+        selectable={true}
+        selectMirror={true}
+        dayMaxEvents={3}
+        weekends={true}
+        datesSet={({ start, end }) => loadAgendamentos({ start, end })}
+        eventClick={({ event }) => onEventClick?.(event)}
+        select={(selectInfo) => onDateSelect?.(selectInfo)}
+        headerToolbar={{
+          left: 'prev,next today',
+          center: 'title',
+          right: 'dayGridMonth,timeGridWeek,timeGridDay'
+        }}
+        slotMinTime="08:00:00"
+        slotMaxTime="18:00:00"
+      />
+    </div>
+  );
+};

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', {
-        nome: documento.nome,
-        conteudo: documento.conteudo,
-        escritorio: configRes.data
-      }, { responseType: 'blob' });
+      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" },
+      );
 
       // 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"
@@ -303,13 +329,13 @@ export function DocumentosPage() {
         </div>
       )}
 
-      <Dialog 
-        open={isVisualizadorOpen} 
+      <Dialog
+        open={isVisualizadorOpen}
         onClose={() => setVisualizadorOpen(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">
           <Dialog.Panel className="w-full max-w-4xl bg-white rounded-lg shadow-xl">
             <div className="flex items-center justify-between p-4 border-b">
@@ -325,24 +351,27 @@ export function DocumentosPage() {
             </div>
 
             <div className="p-6 max-h-[70vh] overflow-y-auto">
-              <div 
+              <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
                 onClick={() => handleEdit(documentoVisualizado)}
                 className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
               >
                 Editar
               </button>
-              
             </div>
           </Dialog.Panel>
         </div>
@@ -361,4 +390,4 @@ export function DocumentosPage() {
       />
     </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();
@@ -14,19 +15,28 @@ export function ErrorBoundary() {
             <h2 className="text-2xl font-bold text-red-600 mb-4">
               Ocorreu um erro
             </h2>
-            
+
             <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>
@@ -37,7 +47,7 @@ export function ErrorBoundary() {
                 <p>Ocorreu um erro desconhecido.</p>
               )}
             </div>
-            
+
             <div className="mt-6">
               <a
                 href="/"

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

@@ -244,4 +244,4 @@ function getStatusColor(status: string) {
     default:
       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;
     }
 
@@ -77,7 +84,7 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
       setIsSaving(true);
       if (agendamento) {
         // Atualizar agendamento existente
-        await api.put(`/agendamentos/${agendamento.id}`, {
+        await api.put(`/atendimentos/agendamentos/${agendamento.id}`, {
           clienteId,
           data: data.toISOString(),
           observacoes,
@@ -85,7 +92,7 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
         });
       } else {
         // Criar novo agendamento
-        await api.post('/agendamentos', {
+        await api.post("/atendimentos/agendamentos", {
           clienteId,
           data: data.toISOString(),
           observacoes,
@@ -95,17 +102,24 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
       onSave();
       onClose();
     } catch (error) {
-      setError(agendamento ? 'Erro ao atualizar agendamento' : 'Erro ao criar agendamento');
+      console.error("Erro ao salvar agendamento:", error);
+      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>
-        
+
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Busca de Cliente */}
           <div className="relative">
@@ -122,10 +136,10 @@ export function AgendamentoForm({ open, onClose, onSave, clienteId: defaultClien
               className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
               placeholder="Buscar cliente..."
             />
-            
+
             {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 +151,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 +214,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,23 @@
-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 } from "date-fns";
+import { ptBR } from "date-fns/locale";
+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 +25,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 response = await api.get(`/atendimentos/${id}`);
-    return response.data;
-  });
+  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 +73,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,18 +97,24 @@ 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>
-                <Link 
+                <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,16 +124,18 @@ 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>
 
           {/* Conteúdo do Atendimento */}
           <div className="prose max-w-none">
             <h3 className="text-lg font-medium text-gray-900 mb-4">Conteúdo</h3>
-            <div 
+            <div
               className="bg-gray-50 rounded-lg p-6"
-              dangerouslySetInnerHTML={{ __html: atendimento.conteudo }} 
+              dangerouslySetInnerHTML={{ __html: atendimento.conteudo }}
             />
           </div>
 
@@ -122,9 +145,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 +173,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 +186,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 +199,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 +226,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 +234,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>
@@ -265,22 +293,27 @@ export function AtendimentoForm({ open, onClose, onSave, clienteId, processoId,
               className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
               placeholder="Buscar cliente..."
             />
-            
+
             {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,59 @@
-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 } from "date-fns";
+import { ptBR } from "date-fns/locale";
+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: '',
-    dataInicio: null,
-    dataFim: null,
-    tipo: '',
-    clienteId: '',
-    processoId: '',
+    protocolo: "",
+    dataInicio: null as Date | null,
+    dataFim: null as Date | null,
+    tipo: "",
+    clienteId: "",
+    processoId: "",
   });
 
-  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);
+  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);
 
-    const response = await api.get(`/atendimentos?${params}`);
-    return response.data;
-  });
+      const response = await api.get(`/atendimentos?${params}`);
+      return response.data;
+    },
+  );
 
-  const handleSave = async (data: any) => {
+  const handleSave = async () => {
     try {
       await refetch();
       setFormOpen(false);
     } catch (error) {
-      console.error('Erro ao atualizar lista:', error);
+      console.error("Erro ao atualizar lista:", error);
     }
   };
 
@@ -48,7 +61,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 +83,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 +93,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 +108,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>
@@ -106,18 +125,22 @@ export const AtendimentosPage = () => {
 
         <div className="grid gap-6">
           {atendimentos?.map((atendimento: any) => (
-            <div 
-              key={atendimento.id} 
+            <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 +150,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,10 @@
-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 { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+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,140 +33,143 @@ 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(() => {
     // Verificar autenticação antes de carregar os dados
     if (isAuthenticated) {
       carregarCalculos();
     } else {
       // Redirecionar para login caso não esteja autenticado
-      navigate('/login');
+      navigate("/login");
     }
   }, [isAuthenticated, navigate]);
-  
+
   const carregarCalculos = async () => {
     try {
       setLoading(true);
-      
+
       // 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) => {
     e.preventDefault();
     carregarCalculos();
   };
-  
+
   // 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";
     }
   };
-  
+
   // Status Badge
   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>
     );
   };
-  
+
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-2xl font-bold text-gray-900">Cálculos Judiciais</h1>
-        <div className="flex gap-3">
-          <Link
-            to="/calculos/novo"
-            className="inline-flex items-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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            Novo Cálculo Judicial
-          </Link>
-          <Link
-            to="/pensao-alimenticia/novo"
-            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
-          >
-            Novo Cálculo de Pensão
-          </Link>
-        </div>
+        <Link
+          to="/calculos/novo"
+          className="inline-flex items-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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        >
+          Novo Cálculo
+        </Link>
       </div>
-      
+
       {/* 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
@@ -177,9 +181,12 @@ export function CalculosList() {
               className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
             />
           </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
@@ -195,7 +202,7 @@ export function CalculosList() {
               <option value="ARQUIVADO">Arquivado</option>
             </select>
           </div>
-          
+
           <div className="sm:col-span-2 flex justify-end items-end">
             <button
               type="submit"
@@ -206,17 +213,22 @@ export function CalculosList() {
           </div>
         </form>
       </div>
-      
+
       {/* 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>
@@ -226,7 +238,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">
@@ -252,14 +267,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, useNavigate } from 'react-router-dom'; // Adicionar useNavigate
-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;
@@ -27,36 +28,17 @@ interface CalculoPensao {
 
 export function DetalhePensaoAlimenticia() {
   const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate(); // Adicionar hook de navegação
   const [calculo, setCalculo] = useState<CalculoPensao | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    // Verificação extra para garantir que o id está definido
-    if (!id || id === "novo") {
-      setLoading(false);
-      setCalculo(null);
-      return;
-    }
     const loadCalculo = async () => {
       try {
-        console.log('[DetalhePensaoAlimenticia] Buscando cálculo para id:', id);
-        const response = await api.get(`/api/calculos/pensao-alimenticia/${id}`);
+        const response = await api.get(`/pensao-alimenticia/${id}`);
         setCalculo(response.data);
-      } catch (error: any) {
-        // Log detalhado para depuração
-        console.error('[DetalhePensaoAlimenticia] Erro ao carregar cálculo:', error);
-
-        // Tratamento específico para erro 404 (cálculo não encontrado)
-        if (error?.response?.status === 404) {
-          toast.warn('Cálculo de pensão alimentícia não encontrado.');
-        } else {
-          toast.error(
-            error?.response?.data?.message ||
-            'Falha ao buscar cálculo de pensão alimentícia.'
-          );
-        }
-        setCalculo(null);
+      } catch (error) {
+        console.error("Erro ao carregar cálculo:", error);
+        toast.error("Falha ao carregar dados do cálculo");
       } finally {
         setLoading(false);
       }
@@ -70,45 +52,59 @@ export function DetalhePensaoAlimenticia() {
   }
 
   if (!calculo) {
-    return (
-      <div className="bg-white shadow-md rounded-lg p-6 flex flex-col items-center">
-        <div className="text-lg mb-4 text-gray-700">Nenhum cálculo de pensão alimentícia encontrado.</div>
-        <button
-          className="px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700"
-          onClick={() => navigate('/pensao-alimenticia/novo')}
-        >
-          Criar novo cálculo
-        </button>
-      </div>
-    );
+    return <div>Cálculo não encontrado</div>;
   }
 
   return (
     <div className="bg-white shadow-md rounded-lg p-6">
       <h1 className="text-2xl font-bold mb-4">{calculo.titulo}</h1>
-      
+
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <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>
@@ -119,15 +115,6 @@ export function DetalhePensaoAlimenticia() {
           <p className="text-gray-700">{calculo.observacoes}</p>
         </div>
       )}
-
-      <div className="mt-8 flex justify-end">
-        <button
-          className="px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700"
-          onClick={() => navigate('/pensao-alimenticia/novo')}
-        >
-          Criar novo cálculo
-        </button>
-      </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,160 +22,174 @@ 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[]>([]);
   const [clientes, setClientes] = useState<ClienteOption[]>([]);
-  
+
   // Carregar processos e clientes ao montar o componente
   useEffect(() => {
     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
   const handleMoneyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    
+
     // Salvar a posição atual do cursor antes da formatação
     const cursorPosition = e.target.selectionStart;
     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);
       }
     }, 0);
   };
-  
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    
+
     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;
       }
-      
+
       // 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;
       }
-      
+
       // 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);
     }
   };
-  
+
   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 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 
+            <input
               type="text"
               id="titulo"
               name="titulo"
@@ -185,13 +200,16 @@ export function NovoCalculo() {
               required
             />
           </div>
-          
+
           {/* 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 
+            <input
               type="date"
               id="dataBase"
               name="dataBase"
@@ -200,19 +218,24 @@ 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">
               <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                 <span className="text-gray-500 sm:text-sm">R$</span>
               </div>
-              <input 
+              <input
                 type="text"
                 id="valorBase"
                 name="valorBase"
@@ -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,17 +268,20 @@ 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>
               ))}
             </select>
           </div>
-          
+
           {/* 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,17 +292,20 @@ 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>
               ))}
             </select>
           </div>
-          
+
           {/* 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
@@ -285,11 +319,11 @@ export function NovoCalculo() {
             />
           </div>
         </div>
-        
+
         <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,8 +1,8 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { useAuth } from '../../contexts/AuthContext';
-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;
@@ -17,145 +17,157 @@ interface ClienteOption {
 
 export function NovoPensaoAlimenticia() {
   const navigate = useNavigate();
-  const { getToken } = useAuth();
   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[]>([]);
   const [clientes, setClientes] = useState<ClienteOption[]>([]);
-  
+
   // Carregar processos e clientes ao montar o componente
   useEffect(() => {
     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) => {
     e.preventDefault();
     setLoading(true);
-    
+
     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;
       }
-      
+
       // Converter percentual para decimal (formato 0.XX)
       const percentual = parsePercentual(formData.percentualSalarioMinimo);
-      
+
       // 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;
       }
-      
+
       // Preparar dados para envio
       const dadosParaEnviar = {
         ...formData,
         percentualSalarioMinimo: percentual,
-        multaPactuada: formData.multaPactuada ? parsePercentual(formData.multaPactuada) : undefined,
-        processoId: formData.processoId || undefined, // Corrigir aqui
-        clienteId: formData.clienteId || undefined,   // Corrigir aqui
+        multaPactuada: formData.multaPactuada
+          ? parsePercentual(formData.multaPactuada)
+          : undefined,
       };
 
-      const token = getToken();
-      if (!token) {
-        throw new Error('Usuário não autenticado. Faça login novamente.');
-      }
-
       // 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',
-          'Authorization': `Bearer ${token}` // Adicionar o token aqui
+          "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);
     }
   };
-  
+
   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 
+            <input
               type="text"
               id="titulo"
               name="titulo"
@@ -166,10 +178,13 @@ export function NovoPensaoAlimenticia() {
               required
             />
           </div>
-          
+
           {/* Í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
@@ -179,20 +194,32 @@ 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 
+              <input
                 type="text"
                 id="percentualSalarioMinimo"
                 name="percentualSalarioMinimo"
@@ -208,13 +235,16 @@ export function NovoPensaoAlimenticia() {
             </div>
             <p className="mt-1 text-xs text-gray-500">Ex: 30% = 30,00%</p>
           </div>
-          
+
           {/* 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 
+            <input
               type="date"
               id="dataInicial"
               name="dataInicial"
@@ -223,15 +253,20 @@ 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 
+            <input
               type="date"
               id="dataFinal"
               name="dataFinal"
@@ -239,16 +274,21 @@ 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">
-              <input 
+              <input
                 type="text"
                 id="multaPactuada"
                 name="multaPactuada"
@@ -261,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
@@ -277,17 +322,20 @@ 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>
               ))}
             </select>
           </div>
-          
+
           {/* 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
@@ -298,17 +346,20 @@ 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>
               ))}
             </select>
           </div>
-          
+
           {/* 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
@@ -322,11 +373,11 @@ export function NovoPensaoAlimenticia() {
             />
           </div>
         </div>
-        
+
         <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"
           >
@@ -338,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,84 +202,77 @@ 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) => {
-    if (!cep || cep.length !== 8) return;
+  const fetchAddressByCep = useCallback(
+    async (cep: string) => {
+      if (!cep || cep.length !== 8) return;
 
-    try {
-      setIsLoadingCep(true);
-      const formattedCep = cep.replace(/\D/g, ""); // Remove caracteres não numéricos
-      const response = await axios.get(
-        `https://viacep.com.br/ws/${formattedCep}/json/`,
-      );
+      try {
+        setIsLoadingCep(true);
+        const formattedCep = cep.replace(/\D/g, ""); // Remove caracteres não numéricos
+        const response = await axios.get(
+          `https://viacep.com.br/ws/${formattedCep}/json/`,
+        );
 
-      if (response.data && !response.data.erro) {
-        const endereco = response.data.logradouro || "";
-        const bairro = response.data.bairro || "";
-        const cidade = response.data.localidade || "";
-        const estado = response.data.uf || "";
+        if (response.data && !response.data.erro) {
+          // Usar estado local para garantir re-renderização imediata
+          const endereco = response.data.logradouro || "";
+          const bairro = response.data.bairro || "";
+          const cidade = response.data.localidade || "";
+          const estado = response.data.uf || "";
 
-        // Só preencher endereço/bairro se vier valor da API
-        if (endereco) setValue("endereco", endereco, { shouldValidate: true });
-        if (bairro) setValue("bairro", bairro, { shouldValidate: true });
-        setValue("cidade", cidade, { shouldValidate: true });
-        setValue("estado", estado, { shouldValidate: true });
+          // Atualizar valores no formulário
+          setValue("endereco", endereco, { shouldValidate: true });
+          setValue("bairro", bairro, { shouldValidate: true });
+          setValue("cidade", cidade, { shouldValidate: true });
+          setValue("estado", estado, { shouldValidate: true });
 
-        // Atualizar estado apenas para cidade/estado (não controlar endereço/bairro)
-        setEnderecoState({
-          endereco: endereco,
-          bairro: bairro,
-          cidade: cidade,
-          estado: estado,
-          preenchido: false, // Não usar mais para travar campos
-        });
+          // Atualizar o estado para re-renderização do componente
+          setEnderecoState({
+            endereco,
+            bairro,
+            cidade,
+            estado,
+            preenchido: true,
+          });
 
-        // Focar no próximo campo apenas se o usuário não estiver digitando ativamente
-        // Esta alteração evita interromper o fluxo natural de preenchimento
-        const activeElement = document.activeElement;
-        const isUserTyping = 
-          activeElement && 
-          (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"]'
-            ) as HTMLInputElement;
-            if (numeroInput) numeroInput.focus();
-          }, 100);
+          // Focar no próximo campo apenas se o usuário não estiver digitando ativamente
+          // Esta alteração evita interromper o fluxo natural de preenchimento
+          const activeElement = document.activeElement;
+          const isUserTyping =
+            activeElement &&
+            (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"]',
+              ) as HTMLInputElement;
+              if (numeroInput) numeroInput.focus();
+            }, 100);
+          }
+        } else {
+          console.error("CEP não encontrado");
+          alert("CEP não encontrado. Por favor, verifique o CEP informado.");
         }
-      } else {
-        // Se CEP não encontrado, limpar campos e permitir edição manual
-        setEnderecoState({
-          endereco: "",
-          bairro: "",
-          cidade: "",
-          estado: "",
-          preenchido: false,
-        });
-        setValue("endereco", "");
-        setValue("bairro", "");
-        setValue("cidade", "");
-        setValue("estado", "");
-        console.error("CEP não encontrado");
-        alert("CEP não encontrado. Por favor, verifique o CEP informado.");
+      } catch (error) {
+        console.error("Erro ao buscar CEP:", error);
+        alert("Erro ao buscar informações do CEP. Por favor, tente novamente.");
+      } finally {
+        setIsLoadingCep(false);
       }
-    } catch (error) {
-      console.error("Erro ao buscar CEP:", error);
-      alert("Erro ao buscar informações do CEP. Por favor, tente novamente.");
-    } finally {
-      setIsLoadingCep(false);
-    }
-  }, [setValue]);
+    },
+    [setValue],
+  );
 
   // Efeito para monitorar mudanças no CEP com debounce otimizado
   const [autoFetchEnabled, setAutoFetchEnabled] = useState(true);
 
   useEffect(() => {
     if (!autoFetchEnabled) return;
-    
+
     // Limpar qualquer timer existente
     const timer = setTimeout(() => {
       const cleanCep = cepValue?.replace(/\D/g, "");
@@ -595,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);
                               }
@@ -633,9 +630,17 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
                             required: "Endereço é obrigatório",
                           })}
                           error={errors.endereco?.message}
-                          // Remover value/controlado por enderecoState, deixar react-hook-form controlar
+                          value={
+                            enderecoState.preenchido
+                              ? enderecoState.endereco
+                              : undefined
+                          }
                           onChange={(e) => {
-                            setValue("endereco", e.target.value, { shouldValidate: true });
+                            setValue("endereco", e.target.value);
+                            setEnderecoState((prev) => ({
+                              ...prev,
+                              endereco: e.target.value,
+                            }));
                           }}
                         />
                         <FormInput
@@ -655,9 +660,17 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
                             required: "Bairro é obrigatório",
                           })}
                           error={errors.bairro?.message}
-                          // Remover value/controlado por enderecoState, deixar react-hook-form controlar
+                          value={
+                            enderecoState.preenchido
+                              ? enderecoState.bairro
+                              : undefined
+                          }
                           onChange={(e) => {
-                            setValue("bairro", e.target.value, { shouldValidate: true });
+                            setValue("bairro", e.target.value);
+                            setEnderecoState((prev) => ({
+                              ...prev,
+                              bairro: e.target.value,
+                            }));
                           }}
                         />
                         <FormInput
@@ -666,10 +679,17 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
                             required: "Cidade é obrigatória",
                           })}
                           error={errors.cidade?.message}
-                          value={typeof watch("cidade") === "string" ? watch("cidade") : enderecoState.cidade}
+                          value={
+                            enderecoState.preenchido
+                              ? enderecoState.cidade
+                              : undefined
+                          }
                           onChange={(e) => {
-                            setValue("cidade", e.target.value, { shouldValidate: true });
-                            setEnderecoState(prev => ({...prev, cidade: e.target.value}));
+                            setValue("cidade", e.target.value);
+                            setEnderecoState((prev) => ({
+                              ...prev,
+                              cidade: e.target.value,
+                            }));
                           }}
                         />
                         <FormSelect
@@ -679,10 +699,17 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
                           })}
                           options={estadosOptions}
                           error={errors.estado?.message}
-                          value={typeof watch("estado") === "string" ? watch("estado") : enderecoState.estado}
+                          value={
+                            enderecoState.preenchido
+                              ? enderecoState.estado
+                              : undefined
+                          }
                           onChange={(e) => {
-                            setValue("estado", e.target.value, { shouldValidate: true });
-                            setEnderecoState(prev => ({...prev, estado: e.target.value}));
+                            setValue("estado", e.target.value);
+                            setEnderecoState((prev) => ({
+                              ...prev,
+                              estado: e.target.value,
+                            }));
                           }}
                         />
                       </div>

src/components/clientes/ClientesList.tsx

@@ -1,19 +1,23 @@
-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);
-  
+
   // Implementar debounce para a busca
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -22,39 +26,40 @@ export const ClientesList: React.FC<ClientesListProps> = ({ searchTerm, onEdit }
 
     return () => clearTimeout(timer);
   }, [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(' ');
-        filteredClientes = response.data.filter((cliente: any) => 
-          searchTerms.every(term => 
-            cliente.nome.includes(term) || 
-            cliente.cpfCnpj.includes(term) ||
-            cliente.email?.includes(term.toLowerCase())
-          )
+        const searchTerms = debouncedTerm.toUpperCase().split(" ");
+        filteredClientes = response.data.filter((cliente: any) =>
+          searchTerms.every(
+            (term) =>
+              cliente.nome.includes(term) ||
+              cliente.cpfCnpj.includes(term) ||
+              cliente.email?.includes(term.toLowerCase()),
+          ),
         );
       }
-      
+
       // Ordenar por nome
-      return filteredClientes.sort((a: any, b: any) => 
-        a.nome.localeCompare(b.nome)
+      return filteredClientes.sort((a: any, b: any) =>
+        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) {
@@ -100,7 +105,7 @@ export const ClientesList: React.FC<ClientesListProps> = ({ searchTerm, onEdit }
           </thead>
           <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
             {clientes.map((cliente: any) => (
-              <tr 
+              <tr
                 key={cliente.id}
                 className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer bg-white dark:bg-gray-800"
                 onClick={() => navigate(`/clientes/${cliente.id}`)}

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,23 @@
-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 } from "date-fns";
+import { ptBR } from "date-fns/locale";
+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 +41,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,25 @@
-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 } from "date-fns";
+import { ptBR } from "date-fns/locale";
+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 +31,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/BenchmarkingEscritorio.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { useBenchmarking } from '../../hooks/useBenchmarking';
-import { CheckCircleIcon, XCircleIcon, FolderOpenIcon } from '@heroicons/react/24/solid';
-
-export const BenchmarkingEscritorio: React.FC = () => {
-  // Hook para buscar e calcular benchmarking
-  const { data: benchmarking, isLoading, error } = useBenchmarking();
-
-  if (isLoading) return <div>Carregando benchmarking...</div>;
-  if (error) return <div className="text-red-600">Erro ao buscar benchmarking</div>;
-  if (!benchmarking) return null;
-
-  // Cálculo da porcentagem de sucesso das causas
-  const totalCausas = benchmarking.procedentes + benchmarking.improcedentesOuSemMerito;
-  const sucessoPercent = totalCausas > 0 ? Math.round((benchmarking.procedentes / totalCausas) * 100) : 0;
-
-  return (
-    <div className="border rounded-xl p-6 shadow-lg bg-white dark:bg-gray-900 flex flex-col gap-6 max-w-md mx-auto">
-      <div className="grid grid-cols-2 gap-4">
-        <div className="flex items-center gap-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3">
-          <FolderOpenIcon className="h-7 w-7 text-blue-600" />
-          <div>
-            <div className="text-xs text-gray-500">Total de processos</div>
-            <div className="text-lg font-bold text-blue-700 dark:text-blue-300">{benchmarking.totalProcessos}</div>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 bg-green-50 dark:bg-green-900 rounded-lg p-3">
-          <CheckCircleIcon className="h-7 w-7 text-green-600" />
-          <div>
-            <div className="text-xs text-gray-500">Processos ativos</div>
-            <div className="text-lg font-bold text-green-700 dark:text-green-300">{benchmarking.ativos}</div>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 bg-green-50 dark:bg-green-900 rounded-lg p-3">
-          <CheckCircleIcon className="h-7 w-7 text-green-600" />
-          <div>
-            <div className="text-xs text-gray-500">Julgados procedentes</div>
-            <div className="text-lg font-bold text-green-700 dark:text-green-300">{benchmarking.procedentes}</div>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 bg-red-50 dark:bg-red-900 rounded-lg p-3">
-          <XCircleIcon className="h-7 w-7 text-red-600" />
-          <div>
-            <div className="text-xs text-gray-500">Improcedentes/Sem mérito</div>
-            <div className="text-lg font-bold text-red-700 dark:text-red-300">{benchmarking.improcedentesOuSemMerito}</div>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 bg-indigo-50 dark:bg-indigo-900 rounded-lg p-3">
-          <FolderOpenIcon className="h-7 w-7 text-indigo-600" />
-          <div>
-            <div className="text-xs text-gray-500">Ajuizados últimos 7 dias</div>
-            <div className="text-lg font-bold text-indigo-700 dark:text-indigo-300">{benchmarking.ajuizados7dias}</div>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 bg-teal-50 dark:bg-teal-900 rounded-lg p-3">
-          <CheckCircleIcon className="h-7 w-7 text-teal-600" />
-          <div>
-            <div className="text-xs text-gray-500">% de sucesso das causas</div>
-            <div className="text-lg font-extrabold text-teal-700 dark:text-teal-300">{sucessoPercent}%</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

src/components/dashboard/CalendarioAtendimentos.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { useCalendarioAtendimentos } from '../../hooks/useCalendarioAtendimentos';
-import { CalendarIcon, UserIcon, PresentationChartBarIcon } from '@heroicons/react/24/outline';
-
-export const CalendarioAtendimentos: React.FC = () => {
-  const { data: eventos = [], isLoading, error } = useCalendarioAtendimentos();
-
-  // Estado para mês e ano selecionados
-  const hoje = new Date();
-  const [mesSelecionado, setMesSelecionado] = React.useState(hoje.getMonth() + 1);
-  const [anoSelecionado, setAnoSelecionado] = React.useState(hoje.getFullYear());
-  const diasMes = Array.from({ length: new Date(anoSelecionado, mesSelecionado, 0).getDate() }, (_, i) => i + 1);
-  const mesStr = mesSelecionado.toString().padStart(2, '0');
-  const anoStr = anoSelecionado.toString();
-
-  // Atualiza data selecionada ao trocar mês/ano
-  const [dataSelecionada, setDataSelecionada] = React.useState(`${anoStr}-${mesStr}-${hoje.getDate().toString().padStart(2, '0')}`);
-  React.useEffect(() => {
-    setDataSelecionada(`${anoStr}-${mesStr}-${hoje.getDate().toString().padStart(2, '0')}`);
-  }, [mesSelecionado, anoSelecionado]);
-
-  // Separar eventos futuros/próximos e passados considerando ano/mês
-  const hojeStr = `${anoStr}-${mesStr}-${hoje.getDate().toString().padStart(2, '0')}`;
-  const eventosProximos = eventos
-    .filter(ev => ev.data >= hojeStr)
-    .sort((a, b) => a.data.localeCompare(b.data))
-    .slice(0, 10);
-  const eventosPassados = eventos
-    .filter(ev => ev.data < hojeStr)
-    .sort((a, b) => b.data.localeCompare(a.data))
-    .slice(0, 10);
-
-  const eventosDoDia = eventos.filter(e => e.data === dataSelecionada);
-
-  if (isLoading) return <div>Carregando calendário...</div>;
-  if (error) return <div className="text-red-600">Erro ao buscar eventos</div>;
-
-  return (
-    <div className="border rounded-xl p-4 shadow-lg bg-white dark:bg-gray-900 flex flex-col gap-6 max-w-4xl mx-auto">
-      <h2 className="text-lg font-bold text-gray-800 dark:text-gray-100 mb-2 flex items-center gap-2">
-        <CalendarIcon className="h-6 w-6 text-blue-600" /> Calendário de Atendimentos e Audiências
-      </h2>
-      <div className="flex items-center gap-4 mb-2">
-        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setMesSelecionado(m => m === 1 ? 12 : m - 1)}>&lt;</button>
-        <span className="font-semibold text-lg">{mesStr}/{anoStr}</span>
-        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setMesSelecionado(m => m === 12 ? 1 : m + 1)}>&gt;</button>
-        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setAnoSelecionado(a => a - 1)}>&lt; Ano</button>
-        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setAnoSelecionado(a => a + 1)}>Ano &gt;</button>
-      </div>
-      <div className="grid grid-cols-7 gap-2 mb-4">
-        {diasMes.map((dia) => {
-          const dataStr = `${anoStr}-${mesStr}-${dia.toString().padStart(2, '0')}`;
-          const eventosDia = eventos.filter(e => e.data === dataStr);
-          const selecionado = dataStr === dataSelecionada;
-          return (
-            <button
-              key={dia}
-              type="button"
-              onClick={() => setDataSelecionada(dataStr)}
-              className={`h-12 w-full flex flex-col items-center justify-center border rounded-lg shadow-sm transition-all text-[11px] focus:outline-none ${selecionado ? 'ring-2 ring-blue-500 border-blue-500 bg-blue-100 dark:bg-blue-900' : eventosDia.length ? 'bg-blue-50 dark:bg-blue-900 border-blue-400' : 'bg-gray-50 dark:bg-gray-800'}`}
-            >
-              <span className="font-bold text-[11px] text-gray-700 dark:text-gray-200">{dia}</span>
-              {eventosDia.map((ev) => (
-                <span key={ev.id} className={`text-[10px] font-semibold flex items-center gap-1 whitespace-nowrap ${ev.tipo === 'Audiência' ? 'text-red-600' : 'text-blue-700'}`}> 
-                  {ev.tipo === 'Audiência' ? <PresentationChartBarIcon className="h-3 w-3" /> : <UserIcon className="h-3 w-3" />} {ev.tipo}
-                </span>
-              ))}
-            </button>
-          );
-        })}
-      </div>
-      <div className="mb-6">
-        <h3 className="font-semibold mb-2 flex items-center gap-2"><CalendarIcon className="h-5 w-5 text-blue-600" /> Eventos do dia {dataSelecionada.split('-').reverse().join('/')}</h3>
-        <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
-          {eventosDoDia.length === 0 && <li className="text-gray-400">Não existem eventos no dia selecionado.</li>}
-          {eventosDoDia.map((ev) => (
-            <li key={ev.id} className="py-2 flex flex-wrap items-center gap-3">
-              {ev.tipo === 'Audiência' ? <PresentationChartBarIcon className="h-4 w-4 text-red-600" /> : <UserIcon className="h-4 w-4 text-blue-600" />}
-              <span className="px-2 py-1 rounded text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 min-w-[80px] text-center">{ev.tipo}</span>
-              <span className="text-gray-600 dark:text-gray-300 break-words max-w-xs">{ev.descricao}</span>
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div className="grid grid-cols-2 gap-8">
-        <div>
-          <h3 className="font-semibold mb-2 flex items-center gap-2"><CalendarIcon className="h-5 w-5 text-blue-600" /> Próximos eventos</h3>
-          <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
-            {eventosProximos.length === 0 && <li className="text-gray-400">Nenhum evento futuro</li>}
-            {eventosProximos.map((ev) => (
-              <li key={ev.id} className="py-2 flex flex-wrap items-center gap-3">
-                {ev.tipo === 'Audiência' ? <PresentationChartBarIcon className="h-4 w-4 text-red-600" /> : <UserIcon className="h-4 w-4 text-blue-600" />}
-                <span className="font-bold min-w-[70px]">{ev.data}</span>
-                <span className="px-2 py-1 rounded text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 min-w-[80px] text-center">{ev.tipo}</span>
-                <span className="text-gray-600 dark:text-gray-300 break-words max-w-xs">{ev.descricao}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-        <div>
-          <h3 className="font-semibold mb-2 flex items-center gap-2"><CalendarIcon className="h-5 w-5 text-gray-500" /> Últimos eventos</h3>
-          <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
-            {eventosPassados.length === 0 && <li className="text-gray-400">Nenhum evento anterior</li>}
-            {eventosPassados.map((ev) => (
-              <li key={ev.id} className="py-2 flex flex-wrap items-center gap-3">
-                {ev.tipo === 'Audiência' ? <PresentationChartBarIcon className="h-4 w-4 text-red-600" /> : <UserIcon className="h-4 w-4 text-blue-600" />}
-                <span className="font-bold min-w-[70px]">{ev.data}</span>
-                <span className="px-2 py-1 rounded text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 min-w-[80px] text-center">{ev.tipo}</span>
-                <span className="text-gray-600 dark:text-gray-300 break-words max-w-xs">{ev.descricao}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};

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,30 +1,58 @@
-import React from 'react';
-import { WorkflowTarefas } from './WorkflowTarefas';
-import { CalendarioAtendimentos } from './CalendarioAtendimentos';
-import { BenchmarkingEscritorio } from './BenchmarkingEscritorio';
-import { PainelFinanceiro } from './PainelFinanceiro';
+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();
+  const {
+    processosStats,
+    tarefasStats,
+    atendimentosStats,
+    financeiroStats,
+    proximosPrazos,
+    atividades,
+  } = useDashboardStats();
+
+  const isAdminOrAdvogado = ["ADVOGADO_ADMIN", "ADVOGADO"].includes(
+    user?.perfil || "",
+  );
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
-      {/* Coluna 1: Workflow de Tarefas */}
-      <div className="space-y-6">
-        <h2 className="text-xl font-bold">Workflow de Tarefas</h2>
-        <WorkflowTarefas />
+    <div className="space-y-6 p-6">
+      {/* Stats Cards */}
+      <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} />
+        )}
+        {isAdminOrAdvogado && financeiroStats.data && (
+          <FinanceiroStats data={financeiroStats.data} />
+        )}
       </div>
 
-      {/* Coluna 2: Calendário de Atendimentos, Compromissos e Diligências */}
-      <div className="space-y-6">
-        <h2 className="text-xl font-bold">Calendário</h2>
-        <CalendarioAtendimentos />
-      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Coluna da esquerda */}
+        <div className="lg:col-span-2 space-y-6">
+          <TaxaSucessoCard />
+          {isAdminOrAdvogado && <KPIsFinanceiros />}
+        </div>
 
-      {/* Coluna 3: Benchmarking do Escritório */}
-      <div className="space-y-6">
-        <h2 className="text-xl font-bold">Benchmarking do Escritório</h2>
-        <BenchmarkingEscritorio />
-        <PainelFinanceiro />
+        {/* Coluna da direita */}
+        <div className="space-y-6">
+          <AlertasPrazos />
+          <AtividadesRecentes />
+        </div>
       </div>
     </div>
   );

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/PainelFinanceiro.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import { useFinanceiroPainel } from '../../hooks/useFinanceiroPainel';
-import { CurrencyDollarIcon, ArrowDownCircleIcon, ArrowUpCircleIcon } from '@heroicons/react/24/solid';
-
-export const PainelFinanceiro: React.FC = () => {
-  const hoje = new Date();
-  const [mes, setMes] = React.useState(hoje.getMonth() + 1);
-  const [ano, setAno] = React.useState(hoje.getFullYear());
-  const { data, isLoading, error } = useFinanceiroPainel(mes, ano);
-
-  const mesesNomes = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
-
-  return (
-    <div className="border rounded-xl p-6 shadow-lg bg-white dark:bg-gray-900 flex flex-col gap-6 max-w-4xl mx-auto mt-8">
-      <h2 className="text-lg font-bold text-gray-800 dark:text-gray-100 mb-2 flex items-center gap-2">
-        <CurrencyDollarIcon className="h-6 w-6 text-green-600" /> Painel Financeiro
-      </h2>
-      <div className="flex items-center gap-4 mb-2">
-        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setMes(m => m === 1 ? 12 : m - 1)}>&lt;</button>
-        <span className="font-semibold text-lg">{mesesNomes[mes - 1]}/{ano}</span>
-        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setMes(m => m === 12 ? 1 : m + 1)}>&gt;</button>
-        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setAno(a => a - 1)}>&lt; Ano</button>
-        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setAno(a => a + 1)}>Ano &gt;</button>
-      </div>
-      {isLoading && <div>Carregando dados financeiros...</div>}
-      {error && <div className="text-red-600">Erro ao buscar dados financeiros</div>}
-      {data && (
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-          <div className="flex flex-col items-center bg-green-50 dark:bg-green-900 rounded-lg p-4">
-            <CurrencyDollarIcon className="h-7 w-7 text-green-600 mb-1" />
-            <span className="text-xs text-gray-500">Honorários a receber</span>
-            <span className="text-lg font-bold text-green-700 dark:text-green-300">R$ {data.honorariosAReceber.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
-          </div>
-          <div className="flex flex-col items-center bg-blue-50 dark:bg-blue-900 rounded-lg p-4">
-            <ArrowUpCircleIcon className="h-7 w-7 text-blue-600 mb-1" />
-            <span className="text-xs text-gray-500">Honorários recebidos no mês</span>
-            <span className="text-lg font-bold text-blue-700 dark:text-blue-300">R$ {data.honorariosRecebidosMes.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
-          </div>
-          <div className="flex flex-col items-center bg-red-50 dark:bg-red-900 rounded-lg p-4">
-            <ArrowDownCircleIcon className="h-7 w-7 text-red-600 mb-1" />
-            <span className="text-xs text-gray-500">Custas a pagar</span>
-            <span className="text-lg font-bold text-red-700 dark:text-red-300">R$ {data.custasAPagar.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
-          </div>
-          <div className="flex flex-col items-center bg-teal-50 dark:bg-teal-900 rounded-lg p-4">
-            <ArrowUpCircleIcon className="h-7 w-7 text-teal-600 mb-1" />
-            <span className="text-xs text-gray-500">Custas pagas no mês</span>
-            <span className="text-lg font-bold text-teal-700 dark:text-teal-300">R$ {data.custasPagasMes.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
-          </div>
-        </div>
-      )}
-      {data && (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div>
-            <h3 className="font-semibold mb-2 text-green-700 dark:text-green-300">Honorários recebidos no mês</h3>
-            <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
-              {data.detalhesHonorarios.length === 0 && <li className="text-gray-400">Nenhum recebimento registrado neste mês.</li>}
-              {data.detalhesHonorarios.map((item, idx) => (
-                <li key={idx} className="py-2 flex flex-col">
-                  <span className="font-bold">Contrato: {item.contrato?.processoId || 'N/A'}</span>
-                  <span>Parcela: {item.parcela?.numeroParcela || 'N/A'} - Valor: R$ {Number(item.parcela?.valorPago || item.parcela?.valor || 0).toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
-                  <span className="text-gray-500">Pago em: {item.parcela?.dataPagamento ? new Date(item.parcela.dataPagamento).toLocaleDateString('pt-br') : '-'}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div>
-            <h3 className="font-semibold mb-2 text-red-700 dark:text-red-300">Custas pagas no mês</h3>
-            <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
-              {data.detalhesCustas.length === 0 && <li className="text-gray-400">Nenhuma custa paga neste mês.</li>}
-              {data.detalhesCustas.map((c, idx) => (
-                <li key={idx} className="py-2 flex flex-col">
-                  <span className="font-bold">Processo: {c.processoId || 'N/A'}</span>
-                  <span>Tipo: {c.tipo || 'N/A'} - Valor: R$ {Number(c.valor || 0).toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
-                  <span className="text-gray-500">Pago em: {c.dataPagamento ? new Date(c.dataPagamento).toLocaleDateString('pt-br') : '-'}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

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/WorkflowTarefas.tsx

@@ -1,106 +0,0 @@
-import React from 'react';
-import { useAuth } from '../../contexts/AuthContext';
-import { useTarefas } from '../../hooks/useTarefas';
-import { Tarefa } from '../../types/entities';
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
-
-export const WorkflowTarefas: React.FC = () => {
-  const { user } = useAuth();
-  const { tarefas, isLoading, deleteTarefa } = useTarefas();
-
-  const canDelete = user && ['ADVOGADO_ADMIN', 'ADVOGADO'].includes(user.perfil);
-
-  const handleEdit = (tarefa: Tarefa) => {
-    // Implemente a lógica de edição conforme necessário
-    alert(`Editar tarefa: ${tarefa.titulo}`);
-  };
-
-  const handleDelete = async (id: string) => {
-    if (!window.confirm('Tem certeza que deseja excluir esta tarefa?')) return;
-    try {
-      await deleteTarefa.mutateAsync(id);
-    } catch (error) {
-      console.error('Erro ao excluir tarefa:', error);
-      alert('Erro ao excluir tarefa');
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
-        Carregando tarefas...
-      </div>
-    );
-  }
-
-  if (!tarefas || tarefas.length === 0) {
-    return (
-      <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
-        Nenhuma tarefa encontrada.
-      </div>
-    );
-  }
-
-  // Exibir apenas tarefas que não estão concluídas ou canceladas
-  const tarefasAtivas = tarefas.filter((t: Tarefa) => t.status !== 'CONCLUIDA' && t.status !== 'CANCELADA');
-
-  return (
-    <div className="flex flex-col gap-4">
-      {tarefasAtivas.map((tarefa: Tarefa) => (
-        <div key={tarefa.id} className="border rounded-lg p-4 shadow flex flex-col gap-2 bg-white dark:bg-gray-800">
-          <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2">
-            <div className="flex items-center gap-3">
-              <span className="font-medium text-lg text-gray-900 dark:text-white">{tarefa.titulo}</span>
-              {/* Exibe o grau de prioridade com cor */}
-              <span className={`px-2 py-1 rounded text-xs font-semibold border ${
-                tarefa.prioridade === 'URGENTE' ? 'bg-red-100 text-red-700 border-red-300' :
-                tarefa.prioridade === 'ALTA' ? 'bg-orange-100 text-orange-700 border-orange-300' :
-                tarefa.prioridade === 'MEDIA' ? 'bg-yellow-100 text-yellow-700 border-yellow-300' :
-                'bg-green-100 text-green-700 border-green-300'
-              }`}>
-                {tarefa.prioridade === 'URGENTE' ? 'Urgente' : tarefa.prioridade === 'ALTA' ? 'Alta' : tarefa.prioridade === 'MEDIA' ? 'Média' : 'Baixa'}
-              </span>
-            </div>
-            <div className="flex items-center gap-3">
-              {/* Status da tarefa */}
-              <span className={`px-2 py-1 rounded text-xs font-semibold border ${
-                tarefa.status === 'CONCLUIDA' ? 'bg-green-100 text-green-700 border-green-300' :
-                tarefa.status === 'EM_ANDAMENTO' ? 'bg-blue-100 text-blue-700 border-blue-300' :
-                tarefa.status === 'PENDENTE' ? 'bg-gray-100 text-gray-700 border-gray-300' :
-                'bg-red-100 text-red-700 border-red-300'
-              }`}>
-                {tarefa.status.replace('_', ' ')}
-              </span>
-              <button
-                onClick={() => handleEdit(tarefa)}
-                className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300"
-                title="Editar"
-              >
-                <PencilIcon className="h-5 w-5" />
-              </button>
-              {canDelete && (
-                <button
-                  onClick={() => handleDelete(tarefa.id)}
-                  className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
-                  title="Excluir"
-                >
-                  <TrashIcon className="h-5 w-5" />
-                </button>
-              )}
-            </div>
-          </div>
-          {/* Listagem das subtarefas vinculadas */}
-          {tarefa.subtarefas && tarefa.subtarefas.length > 0 && (
-            <ul className="mt-2 ml-2 list-disc text-sm text-gray-700 dark:text-gray-300">
-              {tarefa.subtarefas.map((sub) => (
-                <li key={sub.id} className={sub.concluida ? 'line-through text-gray-400' : ''}>
-                  {sub.titulo} {sub.concluida ? '(Concluída)' : ''}
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-};

src/components/dashboard/charts/MapaCalor.tsx

@@ -1,20 +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 } from "date-fns";
+import { ptBR } from "date-fns/locale";
+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');
-    return response.data;
-  });
+  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]) =>
-          Object.entries(vars).map(([name, value]) => ({
-            type: 'menuitem',
-            text: `${category} - ${name.replace(/_/g, ' ')}`,
-            onAction: () => editor.insertContent(value as string)
-          }))
+        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),
+            })),
         );
         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 => ({
-                ...prev,
-                margensTemplate: {
-                  ...prev.margensTemplate,
-                  top: Number(e.target.value)
-                }
-              }))}
+              onChange={(e) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  margensTemplate: {
+                    ...prev.margensTemplate,
+                    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 => ({
-                ...prev,
-                margensTemplate: {
-                  ...prev.margensTemplate,
-                  bottom: Number(e.target.value)
-                }
-              }))}
+              onChange={(e) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  margensTemplate: {
+                    ...prev.margensTemplate,
+                    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 => ({
-                ...prev,
-                margensTemplate: {
-                  ...prev.margensTemplate,
-                  left: Number(e.target.value)
-                }
-              }))}
+              onChange={(e) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  margensTemplate: {
+                    ...prev.margensTemplate,
+                    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 => ({
-                ...prev,
-                margensTemplate: {
-                  ...prev.margensTemplate,
-                  right: Number(e.target.value)
-                }
-              }))}
+              onChange={(e) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  margensTemplate: {
+                    ...prev.margensTemplate,
+                    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,24 +34,24 @@ 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;
 };
 
-export function DocumentoEditor({ 
-  isOpen, 
-  onClose,  
-  onSave, 
+export function DocumentoEditor({
+  isOpen,
+  onClose,
+  onSave,
   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) => {
-        try {
-          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;
-        }
-      });
+      const conteudoPreenchido = template.conteudo.replace(
+        /\{\{([^}]+)\}\}/g,
+        (match, path) => {
+          try {
+            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}
@@ -286,7 +319,7 @@ export function DocumentoEditor({
         <Button onClick={onClose} startIcon={<XMarkIcon className="w-4 h-4" />}>
           Cancelar
         </Button>
-        <Button 
+        <Button
           onClick={handleSave}
           disabled={isSaving || !nome}
           startIcon={<SaveIcon className="w-4 h-4" />}
@@ -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,51 +126,54 @@ 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();
-      
+
       // Limpeza
       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">
         <Dialog.Panel className="w-full max-w-4xl bg-white rounded-lg shadow-xl">
           <div className="flex items-center justify-between p-4 border-b">
@@ -173,16 +185,32 @@ export function DocumentoViewer({ documento, isOpen, onClose }: DocumentoViewerP
                 onClick={handleExportPDF}
                 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'
+                  isExporting
+                    ? "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,18 +236,20 @@ 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>
-              
-              <div 
+
+              <div
                 className="prose max-w-none"
                 dangerouslySetInnerHTML={{ __html: documento?.conteudo }}
               />
 
               <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>
@@ -242,4 +260,4 @@ export function DocumentosPage() {
       />
     </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,23 +165,29 @@ 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">
                   <div>
                     <label className="block mb-1">Nome</label>
                     <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]) => (
-                        <div key={category} className="space-y-1">
-                          <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, ' ')}
-                            </button>
-                          ))}
-                        </div>
-                      ))}
+                      {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]) => (
+                                <button
+                                  key={name}
+                                  type="button"
+                                  onClick={() => insertVariable(variable)}
+                                  className="text-xs text-blue-600 hover:text-blue-800 block"
+                                >
+                                  {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,31 +1,32 @@
-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);
-  
+
   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,8 +8,8 @@ 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`}>
         <label className="block text-sm font-semibold text-gray-700 mb-2">
@@ -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>
         ))}
@@ -68,4 +74,4 @@ export const FormSelect = forwardRef<HTMLSelectElement, any>(
   ),
 );
 
-// Adicione classes dark mode similares para outros componentes de formulário
+// Adicione classes dark mode similares para outros componentes de formulário

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,
@@ -17,18 +15,19 @@ import {
   ShieldCheckIcon,
   CurrencyDollarIcon,
   CalculatorIcon,
-  BriefcaseIcon,
-  DocumentDuplicateIcon,
 } 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);
@@ -60,65 +59,57 @@ export const MainLayout: React.FC = () => {
 
   const menuItems = [
     { path: "/dashboard", label: "Dashboard", icon: HomeIcon },
-    {
-      path: null,
-      label: "Processos",
-      icon: ScaleIcon,
-      subitems: [
-        { path: "/processos", label: "Judiciais", icon: ScaleIcon },
-        { path: "/processos-administrativos", label: "Proc. Admin.", icon: DocumentCheckIcon }
-      ]
-    },
+    { path: "/processos", label: "Processos", icon: ScaleIcon },
+    { path: "/processos-administrativos", label: "Proc.Adm", icon: ScaleIcon },
     {
       path: null,
       label: "Provas",
       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 },
     { path: "/tarefas", label: "Tarefas", icon: ClipboardDocumentCheckIcon },
     { path: "/documentos", label: "Documentos", icon: DocumentTextIcon },
-    { path: "/pdf", label: "PDFs", icon: DocumentDuplicateIcon },
     {
       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
@@ -133,12 +124,15 @@ export const MainLayout: React.FC = () => {
       submenuTimeoutRef.current = null;
     }
     setActiveSubmenu(menuLabel);
-    
+
     // Atualiza a posição vertical do submenu
     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`,
+      );
     }
   };
 
@@ -179,25 +173,24 @@ 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}
                     className={`flex flex-col items-center justify-center p-3 rounded-lg transition-colors ${
-                      isCurrentPath(item.path) 
-                        ? "bg-white/20" 
+                      isCurrentPath(item.path)
+                        ? "bg-white/20"
                         : "hover:bg-white/10"
                     }`}
                     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 
+                  <div
                     className="relative"
                     data-menu-label={item.label}
                     onMouseEnter={() => handleMenuMouseEnter(item.label)}
@@ -205,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>
                 )}
@@ -223,24 +220,26 @@ export const MainLayout: React.FC = () => {
 
         {/* Submenus renderizados fora da estrutura do menu principal */}
         {menuItems
-          .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)' }}
+          .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)" }}
               onMouseEnter={handleSubmenuMouseEnter}
               onMouseLeave={handleMenuMouseLeave}
             >
-              <div 
+              <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 => 
-                      !subitem.roles?.length || 
-                      (userProfile?.perfil && subitem.roles.includes(userProfile.perfil))
+                    .filter(
+                      (subitem) =>
+                        !subitem.roles?.length ||
+                        (userProfile?.perfil &&
+                          subitem.roles.includes(userProfile.perfil)),
                     )
                     .map((subitem) => (
                       <Link
@@ -252,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>
                     ))}
@@ -305,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/pdf/PDFManipulationPage.tsx

@@ -1,885 +0,0 @@
-/// <reference types="react" />
-import React, { useState, useCallback } from 'react';
-import { useDropzone } from 'react-dropzone';
-import axios from 'axios';
-import { toast } from 'react-toastify';
-import { useAuth } from '../../contexts/AuthContext';
-import {
-  DocumentIcon,
-  CloudArrowUpIcon,
-  ArrowsPointingInIcon,
-  ScissorsIcon,
-  ArrowsUpDownIcon,
-  PhotoIcon,
-  DocumentTextIcon,
-  InformationCircleIcon,
-  ArrowDownTrayIcon,
-  ClockIcon,
-} from '@heroicons/react/24/outline';
-
-interface OperationResult {
-  operacaoId: string;
-  outputPaths?: string[];
-  outputPath?: string;
-  zipPath?: string;
-  processingTime?: number;
-  reduction?: number;
-  filesCreated?: number;
-  text?: string;
-  confidence?: number;
-}
-
-type OperationType =
-  | 'compress'
-  | 'split'
-  | 'merge'
-  | 'pdfToImages'
-  | 'imagesToPDF'
-  | 'ocr'
-  | 'info';
-
-export const PDFManipulationPage: React.FC = () => {
-  const { getToken } = useAuth();
-  const [selectedOperation, setSelectedOperation] = useState<OperationType>('compress');
-  const [files, setFiles] = useState<File[]>([]);
-  const [processing, setProcessing] = useState(false);
-  const [result, setResult] = useState<OperationResult | null>(null);
-  const [history, setHistory] = useState<any[]>([]);
-
-  // Configurações para cada operação
-  const [compressQuality, setCompressQuality] = useState<'extreme' | 'low' | 'medium' | 'high'>('medium');
-  const [enableOCR, setEnableOCR] = useState(false);
-  const [splitType, setSplitType] = useState<'pages' | 'range' | 'chunks'>('pages');
-  const [splitPages, setSplitPages] = useState<string>('1,2,3');
-  const [splitRanges, setSplitRanges] = useState<string>('1-5,6-10');
-  const [chunkSize, setChunkSize] = useState(5);
-  const [imageFormat, setImageFormat] = useState<'png' | 'jpg' | 'webp'>('png');
-  const [imageQuality, setImageQuality] = useState(95);
-  const [imageDensity, setImageDensity] = useState(300);
-  const [ocrLanguage, setOcrLanguage] = useState('por');
-
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    setFiles((prev) => [...prev, ...acceptedFiles]);
-  }, []);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    accept: {
-      'application/pdf': ['.pdf'],
-      'image/*': ['.png', '.jpg', '.jpeg', '.webp'],
-    },
-  });
-
-  const removeFile = (index: number) => {
-    setFiles((prev) => prev.filter((_, i) => i !== index));
-  };
-
-  const clearFiles = () => {
-    setFiles([]);
-    setResult(null);
-  };
-
-  const processFiles = async () => {
-    if (files.length === 0) {
-      toast.error('Selecione pelo menos um arquivo');
-      return;
-    }
-
-    setProcessing(true);
-    setResult(null);
-
-    try {
-      const formData = new FormData();
-      files.forEach((file) => {
-        formData.append('files', file);
-      });
-
-      const token = getToken();
-      const config = {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          Authorization: `Bearer ${token}`,
-        },
-        timeout: 600000, // 10 minutos para operações longas (compressão, OCR, etc)
-      };
-
-      let response;
-
-      switch (selectedOperation) {
-        case 'compress':
-          formData.append('quality', compressQuality);
-          formData.append('enableOCR', enableOCR.toString());
-          response = await axios.post('/api/pdf/compress', formData, config);
-          toast.success('PDFs comprimidos com sucesso!');
-          break;
-
-        case 'split':
-          formData.append('splitType', splitType);
-          if (splitType === 'pages') {
-            const pages = splitPages.split(',').map((p) => parseInt(p.trim()));
-            formData.append('pages', JSON.stringify(pages));
-          } else if (splitType === 'range') {
-            const ranges = splitRanges.split(',').map((r) => {
-              const [start, end] = r.trim().split('-').map(Number);
-              return { start, end };
-            });
-            formData.append('ranges', JSON.stringify(ranges));
-          } else {
-            formData.append('chunkSize', chunkSize.toString());
-          }
-          response = await axios.post('/api/pdf/split', formData, config);
-          toast.success('PDF dividido com sucesso!');
-          break;
-
-        case 'merge':
-          formData.append('enableOCR', enableOCR.toString());
-          response = await axios.post('/api/pdf/merge', formData, config);
-          toast.success('PDFs mesclados com sucesso!');
-          break;
-
-        case 'pdfToImages':
-          formData.append('format', imageFormat);
-          formData.append('quality', imageQuality.toString());
-          formData.append('density', imageDensity.toString());
-          response = await axios.post('/api/pdf/pdf-to-images', formData, config);
-          toast.success('PDF convertido em imagens!');
-          break;
-
-        case 'imagesToPDF':
-          formData.append('enableOCR', enableOCR.toString());
-          formData.append('fitToPage', 'true');
-          response = await axios.post('/api/pdf/images-to-pdf', formData, config);
-          toast.success('Imagens convertidas em PDF!');
-          break;
-
-        case 'ocr':
-          formData.append('language', ocrLanguage);
-          response = await axios.post('/api/pdf/ocr', formData, config);
-          toast.success('OCR realizado com sucesso!');
-          break;
-
-        case 'info':
-          response = await axios.post('/api/pdf/info', formData, config);
-          break;
-      }
-
-      setResult(response.data);
-      loadHistory();
-    } catch (error: any) {
-      console.error('Erro ao processar arquivos:', error);
-      toast.error(error.response?.data?.message || 'Erro ao processar arquivos');
-    } finally {
-      setProcessing(false);
-    }
-  };
-
-  const loadHistory = async () => {
-    try {
-      const token = getToken();
-      const response = await axios.get('/api/pdf/history', {
-        headers: { Authorization: `Bearer ${token}` },
-      });
-      setHistory(response.data.operacoes || []);
-    } catch (error) {
-      console.error('Erro ao carregar histórico:', error);
-    }
-  };
-
-  const downloadFile = async (operacaoId: string, fileIndex: number) => {
-    try {
-      const token = getToken();
-      const response = await axios.get(`/api/pdf/download/${operacaoId}/${fileIndex}`, {
-        headers: { Authorization: `Bearer ${token}` },
-        responseType: 'blob',
-      });
-
-      // Extrai o nome do arquivo do header Content-Disposition
-      const contentDisposition = response.headers['content-disposition'];
-      let fileName = `arquivo-${fileIndex}`;
-      
-      if (contentDisposition) {
-        const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
-        if (matches != null && matches[1]) {
-          fileName = matches[1].replace(/['"]/g, '');
-        }
-      }
-
-      // Usa o Content-Type correto do servidor
-      const contentType = response.headers['content-type'] || 'application/octet-stream';
-      
-      console.log(`Download frontend: ${fileName} (${contentType})`);
-
-      // Cria o blob com o tipo correto
-      const blob = new Blob([response.data], { type: contentType });
-      const url = window.URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = url;
-      link.setAttribute('download', fileName);
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-      
-      // Libera a memória do blob URL
-      setTimeout(() => window.URL.revokeObjectURL(url), 100);
-
-      toast.success('Download iniciado!');
-    } catch (error) {
-      console.error('Erro ao fazer download:', error);
-      toast.error('Erro ao fazer download');
-    }
-  };
-
-  const deleteOperation = async (operacaoId: string) => {
-    if (!window.confirm('Deseja realmente deletar esta operação e seus arquivos?')) {
-      return;
-    }
-
-    try {
-      const token = getToken();
-      await axios.delete(`/api/pdf/operation/${operacaoId}`, {
-        headers: { Authorization: `Bearer ${token}` },
-      });
-      
-      toast.success('Operação deletada com sucesso!');
-      loadHistory();
-    } catch (error) {
-      console.error('Erro ao deletar operação:', error);
-      toast.error('Erro ao deletar operação');
-    }
-  };
-
-  const clearAllHistory = async () => {
-    if (!window.confirm('⚠️ ATENÇÃO: Isso irá deletar TODO o histórico e TODOS os arquivos armazenados. Esta ação não pode ser desfeita. Deseja continuar?')) {
-      return;
-    }
-
-    try {
-      const token = getToken();
-      const response = await axios.delete('/api/pdf/history/clear', {
-        headers: { Authorization: `Bearer ${token}` },
-      });
-      
-      toast.success(`Histórico limpo! ${response.data.operacoesRemovidas} operações removidas.`);
-      setHistory([]);
-      setResult(null);
-    } catch (error) {
-      console.error('Erro ao limpar histórico:', error);
-      toast.error('Erro ao limpar histórico');
-    }
-  };
-
-  const cleanupOldFiles = async () => {
-    if (!window.confirm('Deseja remover operações com mais de 24 horas?')) {
-      return;
-    }
-
-    try {
-      const token = getToken();
-      const response = await axios.delete('/api/pdf/history/cleanup?hours=24', {
-        headers: { Authorization: `Bearer ${token}` },
-      });
-      
-      toast.success(`${response.data.operacoesRemovidas} operações antigas removidas!`);
-      loadHistory();
-    } catch (error) {
-      console.error('Erro ao limpar arquivos antigos:', error);
-      toast.error('Erro ao limpar arquivos antigos');
-    }
-  };
-
-  React.useEffect(() => {
-    loadHistory();
-  }, []);
-
-  const operations = [
-    {
-      id: 'compress' as OperationType,
-      name: 'Comprimir PDF',
-      icon: ArrowsPointingInIcon,
-      description: 'Reduza o tamanho mantendo a qualidade',
-    },
-    {
-      id: 'split' as OperationType,
-      name: 'Dividir PDF',
-      icon: ScissorsIcon,
-      description: 'Separe páginas específicas',
-    },
-    {
-      id: 'merge' as OperationType,
-      name: 'Mesclar PDFs',
-      icon: ArrowsUpDownIcon,
-      description: 'Combine múltiplos PDFs',
-    },
-    {
-      id: 'pdfToImages' as OperationType,
-      name: 'PDF para Imagens',
-      icon: PhotoIcon,
-      description: 'Converta páginas em imagens',
-    },
-    {
-      id: 'imagesToPDF' as OperationType,
-      name: 'Imagens para PDF',
-      icon: DocumentIcon,
-      description: 'Crie PDF a partir de imagens',
-    },
-    {
-      id: 'ocr' as OperationType,
-      name: 'OCR',
-      icon: DocumentTextIcon,
-      description: 'Extraia texto de PDFs',
-    },
-    {
-      id: 'info' as OperationType,
-      name: 'Informações',
-      icon: InformationCircleIcon,
-      description: 'Obtenha detalhes do PDF',
-    },
-  ];
-
-  const formatBytes = (bytes: number) => {
-    if (bytes === 0) return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-50 py-8">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">Manipulação de PDFs</h1>
-          <p className="mt-2 text-gray-600">
-            Ferramentas completas para trabalhar com arquivos PDF
-          </p>
-        </div>
-
-        {/* Seleção de operação */}
-        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 mb-8">
-          {operations.map((op) => (
-            <button
-              key={op.id}
-              onClick={() => {
-                setSelectedOperation(op.id);
-                clearFiles();
-              }}
-              className={`p-4 rounded-lg border-2 transition-all ${
-                selectedOperation === op.id
-                  ? 'border-blue-500 bg-blue-50 text-blue-700'
-                  : 'border-gray-200 bg-white hover:border-gray-300'
-              }`}
-            >
-              <op.icon className="h-8 w-8 mx-auto mb-2" />
-              <div className="text-sm font-medium">{op.name}</div>
-            </button>
-          ))}
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* Área principal */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Upload de arquivos */}
-            <div className="bg-white rounded-lg shadow p-6">
-              <h2 className="text-xl font-semibold mb-4">Arquivos</h2>
-
-              <div
-                {...getRootProps()}
-                className={`border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors ${
-                  isDragActive
-                    ? 'border-blue-500 bg-blue-50'
-                    : 'border-gray-300 hover:border-gray-400'
-                }`}
-              >
-                <input {...getInputProps()} />
-                <CloudArrowUpIcon className="h-12 w-12 mx-auto text-gray-400 mb-4" />
-                {isDragActive ? (
-                  <p className="text-blue-600">Solte os arquivos aqui...</p>
-                ) : (
-                  <div>
-                    <p className="text-gray-600 mb-2">
-                      Arraste e solte arquivos aqui, ou clique para selecionar
-                    </p>
-                    <p className="text-sm text-gray-500">
-                      PDFs e imagens (PNG, JPG, WEBP)
-                    </p>
-                  </div>
-                )}
-              </div>
-
-              {/* Lista de arquivos */}
-              {files.length > 0 && (
-                <div className="mt-4">
-                  <div className="flex justify-between items-center mb-2">
-                    <h3 className="font-medium">
-                      Arquivos selecionados ({files.length})
-                    </h3>
-                    <button
-                      onClick={clearFiles}
-                      className="text-sm text-red-600 hover:text-red-700"
-                    >
-                      Limpar todos
-                    </button>
-                  </div>
-                  <div className="space-y-2">
-                    {files.map((file, index) => (
-                      <div
-                        key={index}
-                        className="flex items-center justify-between p-3 bg-gray-50 rounded"
-                      >
-                        <div className="flex items-center space-x-3">
-                          <DocumentIcon className="h-5 w-5 text-gray-400" />
-                          <div>
-                            <p className="text-sm font-medium">{file.name}</p>
-                            <p className="text-xs text-gray-500">
-                              {formatBytes(file.size)}
-                            </p>
-                          </div>
-                        </div>
-                        <button
-                          onClick={() => removeFile(index)}
-                          className="text-red-600 hover:text-red-700"
-                        >
-                          Remover
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* Configurações específicas */}
-            <div className="bg-white rounded-lg shadow p-6">
-              <h2 className="text-xl font-semibold mb-4">Configurações</h2>
-
-              {selectedOperation === 'compress' && (
-                <div className="space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium mb-2">
-                      Nível de Compressão
-                    </label>
-                    <select
-                      value={compressQuality}
-                      onChange={(e) => setCompressQuality(e.target.value as any)}
-                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                    >
-                      <option value="extreme">Extrema (72 DPI) - Máxima redução, visualização na tela</option>
-                      <option value="low">Alta compressão (100 DPI) - Arquivos pequenos</option>
-                      <option value="medium">Equilibrada (150 DPI) - Recomendado</option>
-                      <option value="high">Qualidade (200 DPI) - Para impressão</option>
-                    </select>
-                    <p className="text-xs text-gray-500 mt-2">
-                      💡 Usa Ghostscript, mesmo motor do iLovePDF e SmallPDF
-                    </p>
-                  </div>
-                  
-                  <div className="flex items-center space-x-2">
-                    <input
-                      type="checkbox"
-                      id="enableOCR"
-                      checked={enableOCR}
-                      onChange={(e) => setEnableOCR(e.target.checked)}
-                      className="h-4 w-4 text-blue-600 rounded"
-                    />
-                    <label htmlFor="enableOCR" className="text-sm font-medium">
-                      Adicionar camada de OCR (tornar PDF pesquisável)
-                    </label>
-                  </div>
-                  <p className="text-xs text-gray-500">
-                    OCR torna o PDF pesquisável. É instantâneo para PDFs digitais.
-                  </p>
-                </div>
-              )}
-
-              {selectedOperation === 'split' && (
-                <div className="space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium mb-2">
-                      Tipo de divisão
-                    </label>
-                    <select
-                      value={splitType}
-                      onChange={(e) => setSplitType(e.target.value as any)}
-                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                    >
-                      <option value="pages">Páginas específicas</option>
-                      <option value="range">Intervalos</option>
-                      <option value="chunks">Chunks (partes iguais)</option>
-                    </select>
-                  </div>
-
-                  {splitType === 'pages' && (
-                    <div>
-                      <label className="block text-sm font-medium mb-2">
-                        Páginas (separadas por vírgula)
-                      </label>
-                      <input
-                        type="text"
-                        value={splitPages}
-                        onChange={(e) => setSplitPages(e.target.value)}
-                        placeholder="1,2,3,5,8"
-                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                      />
-                    </div>
-                  )}
-
-                  {splitType === 'range' && (
-                    <div>
-                      <label className="block text-sm font-medium mb-2">
-                        Intervalos (ex: 1-5,6-10)
-                      </label>
-                      <input
-                        type="text"
-                        value={splitRanges}
-                        onChange={(e) => setSplitRanges(e.target.value)}
-                        placeholder="1-5,6-10,11-15"
-                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                      />
-                    </div>
-                  )}
-
-                  {splitType === 'chunks' && (
-                    <div>
-                      <label className="block text-sm font-medium mb-2">
-                        Páginas por chunk
-                      </label>
-                      <input
-                        type="number"
-                        value={chunkSize}
-                        onChange={(e) => setChunkSize(parseInt(e.target.value))}
-                        min="1"
-                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                      />
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {selectedOperation === 'pdfToImages' && (
-                <div className="space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium mb-2">Formato</label>
-                    <select
-                      value={imageFormat}
-                      onChange={(e) => setImageFormat(e.target.value as any)}
-                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                    >
-                      <option value="png">PNG</option>
-                      <option value="jpg">JPG</option>
-                      <option value="webp">WEBP</option>
-                    </select>
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium mb-2">
-                      Qualidade ({imageQuality}%)
-                    </label>
-                    <input
-                      type="range"
-                      min="50"
-                      max="100"
-                      value={imageQuality}
-                      onChange={(e) => setImageQuality(parseInt(e.target.value))}
-                      className="w-full"
-                    />
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium mb-2">
-                      DPI ({imageDensity})
-                    </label>
-                    <input
-                      type="range"
-                      min="150"
-                      max="600"
-                      step="50"
-                      value={imageDensity}
-                      onChange={(e) => setImageDensity(parseInt(e.target.value))}
-                      className="w-full"
-                    />
-                  </div>
-                </div>
-              )}
-
-              {selectedOperation === 'ocr' && (
-                <div>
-                  <label className="block text-sm font-medium mb-2">Idioma</label>
-                  <select
-                    value={ocrLanguage}
-                    onChange={(e) => setOcrLanguage(e.target.value)}
-                    className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                  >
-                    <option value="por">Português</option>
-                    <option value="eng">Inglês</option>
-                    <option value="spa">Espanhol</option>
-                  </select>
-                </div>
-              )}
-
-              {selectedOperation === 'merge' && (
-                <div className="space-y-4">
-                  <p className="text-sm text-gray-600">
-                    Selecione 2 ou mais PDFs para mesclar em um único arquivo.
-                  </p>
-                  
-                  <div className="flex items-center space-x-2">
-                    <input
-                      type="checkbox"
-                      id="enableOCRMerge"
-                      checked={enableOCR}
-                      onChange={(e) => setEnableOCR(e.target.checked)}
-                      className="h-4 w-4 text-blue-600 rounded"
-                    />
-                    <label htmlFor="enableOCRMerge" className="text-sm font-medium">
-                      Adicionar camada de OCR ao PDF mesclado
-                    </label>
-                  </div>
-                  <p className="text-xs text-gray-500">
-                    ⚠️ OCR aumenta significativamente o tempo de processamento
-                  </p>
-                </div>
-              )}
-
-              {selectedOperation === 'imagesToPDF' && (
-                <div className="space-y-4">
-                  <p className="text-sm text-gray-600">
-                    Converte múltiplas imagens em um único arquivo PDF.
-                  </p>
-                  
-                  <div className="flex items-center space-x-2">
-                    <input
-                      type="checkbox"
-                      id="enableOCRImages"
-                      checked={enableOCR}
-                      onChange={(e) => setEnableOCR(e.target.checked)}
-                      className="h-4 w-4 text-blue-600 rounded"
-                    />
-                    <label htmlFor="enableOCRImages" className="text-sm font-medium">
-                      Adicionar camada de OCR (tornar PDF pesquisável)
-                    </label>
-                  </div>
-                  <p className="text-xs text-gray-500">
-                    ⚠️ OCR aumenta significativamente o tempo de processamento
-                  </p>
-                </div>
-              )}
-
-              <button
-                onClick={processFiles}
-                disabled={processing || files.length === 0}
-                className={`mt-6 w-full py-3 rounded-lg font-medium transition-colors ${
-                  processing || files.length === 0
-                    ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
-                    : 'bg-blue-600 text-white hover:bg-blue-700'
-                }`}
-              >
-                {processing ? (
-                  <span className="flex items-center justify-center">
-                    <svg
-                      className="animate-spin h-5 w-5 mr-2"
-                      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>
-                    Processando...
-                  </span>
-                ) : (
-                  'Processar'
-                )}
-              </button>
-            </div>
-
-            {/* Resultado */}
-            {result && (
-              <div className="bg-white rounded-lg shadow p-6">
-                <h2 className="text-xl font-semibold mb-4">Resultado</h2>
-
-                {selectedOperation === 'compress' && result.reduction !== undefined && (
-                  <div className="space-y-2">
-                    <p className="text-green-600 font-medium">
-                      Redução de {result.reduction.toFixed(2)}%
-                    </p>
-                    <p className="text-sm text-gray-600">
-                      Tempo de processamento: {result.processingTime}ms
-                    </p>
-                  </div>
-                )}
-
-                {(result.outputPaths || result.outputPath || result.zipPath) && (
-                  <div className="mt-4">
-                    <p className="font-medium mb-2">Arquivos gerados:</p>
-                    
-                    {/* Botão de download ZIP (se disponível) */}
-                    {result.zipPath && (
-                      <button
-                        onClick={() => downloadFile(result.operacaoId, 0)}
-                        className="flex items-center space-x-2 w-full p-3 mb-3 bg-blue-50 hover:bg-blue-100 rounded border-2 border-blue-300"
-                      >
-                        <ArrowDownTrayIcon className="h-6 w-6 text-blue-600" />
-                        <div className="text-left">
-                          <span className="text-sm font-semibold text-blue-900">
-                            📦 Download ZIP (Todos os arquivos)
-                          </span>
-                          <p className="text-xs text-blue-700">
-                            Recomendado para múltiplos arquivos
-                          </p>
-                        </div>
-                      </button>
-                    )}
-                    
-                    {/* Arquivos individuais */}
-                    {result.outputPaths?.map((path, index) => {
-                      // Determina o nome do arquivo baseado na operação
-                      let fileName = `Arquivo ${index + 1}`;
-                      if (selectedOperation === 'pdfToImages') {
-                        fileName = `Imagem ${index + 1}`;
-                      } else if (selectedOperation === 'split') {
-                        fileName = `Página ${index + 1}`;
-                      }
-                      
-                      return (
-                        <button
-                          key={index}
-                          onClick={() => downloadFile(result.operacaoId, result.zipPath ? index + 1 : index)}
-                          className="flex items-center space-x-2 w-full p-2 hover:bg-gray-50 rounded"
-                        >
-                          <ArrowDownTrayIcon className="h-5 w-5 text-blue-600" />
-                          <span className="text-sm">{fileName}</span>
-                        </button>
-                      );
-                    })}
-                    {result.outputPath && !result.outputPaths && (
-                      <button
-                        onClick={() => downloadFile(result.operacaoId, result.zipPath ? 1 : 0)}
-                        className="flex items-center space-x-2 w-full p-2 hover:bg-gray-50 rounded"
-                      >
-                        <ArrowDownTrayIcon className="h-5 w-5 text-blue-600" />
-                        <span className="text-sm">Download</span>
-                      </button>
-                    )}
-                  </div>
-                )}
-
-                {selectedOperation === 'ocr' && result.text && (
-                  <div className="mt-4">
-                    <p className="font-medium mb-2">Texto extraído:</p>
-                    <div className="bg-gray-50 p-4 rounded max-h-64 overflow-y-auto">
-                      <pre className="text-sm whitespace-pre-wrap">{result.text}</pre>
-                    </div>
-                    {result.confidence && (
-                      <p className="text-sm text-gray-600 mt-2">
-                        Confiança: {result.confidence.toFixed(2)}%
-                      </p>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-
-          {/* Histórico */}
-          <div className="lg:col-span-1">
-            <div className="bg-white rounded-lg shadow p-6 sticky top-8">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-xl font-semibold">Histórico</h2>
-                {history.length > 0 && (
-                  <div className="flex space-x-2">
-                    <button
-                      onClick={cleanupOldFiles}
-                      className="text-xs px-2 py-1 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 rounded transition-colors"
-                      title="Remover operações com mais de 24 horas"
-                    >
-                      🕐 Limpar Antigos
-                    </button>
-                    <button
-                      onClick={clearAllHistory}
-                      className="text-xs px-2 py-1 bg-red-100 hover:bg-red-200 text-red-800 rounded transition-colors"
-                      title="Apagar todo o histórico e arquivos"
-                    >
-                      🗑️ Limpar Tudo
-                    </button>
-                  </div>
-                )}
-              </div>
-
-              {history.length === 0 ? (
-                <p className="text-gray-500 text-sm">Nenhuma operação ainda</p>
-              ) : (
-                <div className="space-y-3 max-h-96 overflow-y-auto">
-                  {history.map((op) => (
-                    <div key={op.id} className="border-b pb-3">
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm font-medium">
-                          {op.tipoOperacao.replace('_', ' ')}
-                        </span>
-                        <div className="flex items-center space-x-2">
-                          <span
-                            className={`text-xs px-2 py-1 rounded ${
-                              op.status === 'CONCLUIDO'
-                                ? 'bg-green-100 text-green-800'
-                                : op.status === 'ERRO'
-                                ? 'bg-red-100 text-red-800'
-                                : 'bg-yellow-100 text-yellow-800'
-                            }`}
-                          >
-                            {op.status}
-                          </span>
-                          <button
-                            onClick={() => deleteOperation(op.id)}
-                            className="text-red-600 hover:text-red-800 hover:bg-red-50 p-1 rounded transition-colors"
-                            title="Deletar esta operação"
-                          >
-                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                              <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                      <div className="flex items-center text-xs text-gray-500 mt-1">
-                        <ClockIcon className="h-3 w-3 mr-1" />
-                        {new Date(op.criadoEm).toLocaleString('pt-BR')}
-                      </div>
-                      {op.tempoProcessamento && (
-                        <p className="text-xs text-gray-500 mt-1">
-                          {op.tempoProcessamento}ms
-                        </p>
-                      )}
-                      {op.status === 'CONCLUIDO' && op.arquivosResultado && op.arquivosResultado.length > 0 && (
-                        <div className="mt-2 space-y-1">
-                          {op.arquivosResultado.map((arquivo: string, index: number) => (
-                            <button
-                              key={index}
-                              onClick={() => downloadFile(op.id, index)}
-                              className="flex items-center space-x-1 w-full text-xs text-blue-600 hover:text-blue-700 hover:bg-blue-50 p-1 rounded"
-                            >
-                              <ArrowDownTrayIcon className="h-3 w-3" />
-                              <span>Arquivo {index + 1}</span>
-                            </button>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

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,7 +1,8 @@
-import { useProcessoContext } from "../../context/ProcessoContext";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 
+import { useProcessoContext } from "../../context/ProcessoContext";
+
 export function AbaInformacoes() {
   const { processo } = useProcessoContext();
 

src/components/processos/AbaMovimentacoes.tsx

@@ -1,8 +1,9 @@
-import { useProcessoContext } from "../../context/ProcessoContext";
-import { useProcessoMovimentacoes } from "../../hooks/useProcessoMovimentacoes";
+import { ClockIcon, DocumentIcon } from "@heroicons/react/24/outline";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
-import { ClockIcon, DocumentIcon } from "@heroicons/react/24/outline";
+
+import { useProcessoContext } from "../../context/ProcessoContext";
+import { useProcessoMovimentacoes } from "../../hooks/useProcessoMovimentacoes";
 
 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 ptBR from "date-fns/locale/pt-BR";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { TipoCustaProcessual, StatusPagamento } from "@prisma/client";
+import { ptBR } from "date-fns/locale";
+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,6 @@
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
+
 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,19 +41,24 @@ 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>
     </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>
@@ -149,4 +153,4 @@ export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialDat
       </div>
     </form>
   );
-};
+};

src/components/processos/ProcessoInfo.tsx

@@ -1,5 +1,6 @@
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
+
 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;
@@ -138,9 +140,9 @@ export const ProcessoModal: React.FC<ProcessoModalProps> = ({
       };
 
       if (processo) {
-        await updateProcesso.mutateAsync({ 
-          id: processo.id, 
-          data: processData 
+        await updateProcesso.mutateAsync({
+          id: processo.id,
+          data: processData,
         });
       } else {
         await createProcesso.mutateAsync(processData);

src/components/processos/ProcessoView.tsx

@@ -1,43 +1,51 @@
-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 } from "date-fns";
+import { ptBR } from "date-fns/locale";
+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 response = await api.get(`/processos/${id}`); // remover /api
-      return response.data;
-    }
-  );
+
+  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,8 +60,10 @@ 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">
             <span className="text-sm text-gray-500">Processo julgado?</span>
@@ -62,17 +72,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 +100,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 +120,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 +173,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 +183,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>
@@ -166,4 +203,4 @@ export const ProcessoView: React.FC = () => {
       </div>
     </div>
   );
-};
+};

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;