MCP Apps - Calculadora de Propostas T2C Group

MCP App completo para cálculo de propostas comerciais por custo/hora com histórico persistente, estatísticas avançadas e gráficos interativos.

---

🚀 Características

• ✅ Cálculo automático de valores baseado em custo/hora, impostos, load, margem e comissão
• 💾 Histórico persistente em JSON de todas as cotações (CRUD completo)
• 📊 Estatísticas avançadas com 3 gráficos interativos (Chart.js)
• 🎨 Interface moderna com suporte a dark/light mode
• 🔧 Dois tipos de cálculo: Projetos (R$ 62,25/h) e Sustentação (R$ 49,11/h)
• 📱 Responsivo e mobile-friendly
• 🔨 Integração Claude Desktop via MCP Protocol

---

📊 Preview

Interface Principal

Estatísticas e Gráficos

---

🏗️ Arquitetura

┌─────────────────────────────────────────┐
│           CLAUDE DESKTOP                │
│  "Crie uma cotação para projeto X..."  │
└────────────────┬────────────────────────┘
                 │ MCP Protocol (stdio)
                 ▼
┌─────────────────────────────────────────┐
│        NODE.JS MCP SERVER               │
│  • 4 Tools (CRUD)                       │
│  • Validação Zod                        │
│  • Persistência JSON                    │
└────────────────┬────────────────────────┘
                 │
                 ├──► data/quotations.json
                 │
                 └──► UI Resource (HTML/JS/CSS)
                      └─► Chart.js Graphs

---

🔧 4 Tools MCP

Tool	Descrição	Input	Output
create_quotation	Criar nova cotação	Dados completos	Cotação com ID
list_quotations	Listar cotações	limit (opt)	Array de cotações
get_quotation	Obter cotação específica	id	Cotação completa
delete_quotation	Remover cotação	id	Confirmação

---

📦 Instalação

Pré-requisitos

• Node.js 18+
• npm 9+
• Claude Desktop
• Git

1. Clone o repositório

git clone https://github.com/silvaleo1979/MCP_APPS.git
cd MCP_APPS/calculadora-proposta-mcp

2. Instale as dependências

npm install

3. Build do projeto

npm run build

4. Configure no Claude Desktop

Windows:

%APPDATA%\Claude\claude_desktop_config.json

macOS:

~/Library/Application Support/Claude/claude_desktop_config.json

Adicione:

{
  "mcpServers": {
    "calculadora-proposta": {
      "command": "node",
      "args": [
        "/caminho/completo/para/MCP_APPS/calculadora-proposta-mcp/dist/index.js",
        "--stdio"
      ]
    }
  }
}

5. Reinicie o Claude Desktop

1. Feche todas as janelas
2. Quit do system tray
3. Reabra o Claude Desktop
4. Verifique o ícone 🔨

---

💻 Desenvolvimento

Scripts disponíveis

# Desenvolvimento com hot reload
npm run dev

# Build para produção
npm run build

# Testar com HTTP (navegador)
npm run start:http
# Acesse: http://localhost:3001/mcp

# Testar com stdio (Claude Desktop)
npm run start:stdio

---

📊 Estatísticas e Gráficos

O módulo de estatísticas oferece:

📈 Cards de Métricas

• Total de Cotações
• Valor Total Cotado
• Valor Médio
• Total de Horas

📊 Gráficos Interativos

1. Distribuição por Tipo (Donut) - Projetos vs Sustentação
2. Top 5 Maiores Cotações (Barras horizontais)
3. Evolução Temporal (Linha) - Últimas 10 cotações

---

💰 Fórmula de Cálculo

Custo Base (R$ 62,25 Projetos | R$ 49,11 Sustentação)
  ↓
+ Imposto 22%
  ↓
+ Load 35%
  ↓
= Custo/Hora Total Empresa
  ↓
+ Margem (configurável)
  ↓
+ Comissão (configurável)
  ↓
= Valor/Hora Final ao Cliente
  ↓
× Horas Previstas
  ↓
= VALOR TOTAL DO PROJETO

---

🎯 Exemplos de Uso

Criar Cotação

Crie uma cotação para o cliente "Tech Solutions" tipo Projetos com:
- Backend API: 200 horas, margem 60%
- Frontend React: 150 horas, margem 55%
- Observação: "Projeto estratégico"

Listar Histórico

Liste as últimas 10 cotações salvas

Ver Detalhes

Mostre os detalhes da cotação #1738782123456

Estatísticas

Mostre as estatísticas e gráficos das cotações

---

📁 Estrutura do Projeto

calculadora-proposta-mcp/
├── package.json              # Dependências e scripts
├── tsconfig.json             # Config TypeScript (UI)
├── tsconfig.server.json      # Config TypeScript (Server)
├── vite.config.ts            # Config Vite bundler
├── server.ts                 # 4 tools MCP
├── main.ts                   # Entry point
├── mcp-app.html             # Template HTML
├── src/
│   ├── mcp-app.ts           # UI Logic + MCP SDK + Charts
│   ├── mcp-app.css          # Estilos completos
│   └── types.ts             # Tipos TypeScript
├── data/
│   └── quotations.json      # Histórico persistente
├── dist/                    # Build output
│   ├── index.js             # Entry executável
│   ├── main.js              # Servidor compilado
│   ├── server.js            # Lógica compilada
│   └── mcp-app.html        # UI bundled (578 KB)
└── docs/
    ├── INDEX.md             # Índice de navegação
    ├── QUICK_START.md      # Início rápido
    ├── EXAMPLES.md         # Exemplos práticos
    ├── PROJECT_SUMMARY.md  # Arquitetura
    └── README.md           # Referência técnica

---

🛠️ Tecnologias

Tecnologia	Versão	Uso
TypeScript	5.9.3	Tipagem estática
Node.js	18+	Runtime servidor
MCP SDK	1.24.0	Protocol implementation
MCP Apps	1.0.0	UI framework
Chart.js	4.4.0	Gráficos interativos
Vite	6.0.0	Build & bundling
Zod	4.1.13	Schema validation
Express	5.1.0	HTTP server (dev)

---

📚 Documentação

• INDEX.md - Índice e navegação
• QUICK_START.md - Configuração em 5 minutos
• EXAMPLES.md - Comandos práticos
• PROJECT_SUMMARY.md - Arquitetura completa
• README.md - Referência técnica detalhada

---

🎨 Features da Interface

Funcionalidades

• ✅ Seleção de tipo (Projetos/Sustentação)
• ✅ Múltiplos projetos por cotação
• ✅ Nomes de projetos editáveis
• ✅ Campos editáveis: margem, comissão, horas
• ✅ Cálculos automáticos em tempo real
• ✅ Resumo geral (horas, custos, valores)

Ações

• 💾 Salvar - Persiste no histórico JSON
• 📜 Histórico - Listar/Carregar/Deletar cotações
• 📊 Estatísticas - Gráficos e análises
• 🗑️ Limpar - Reset completo do formulário

Temas

• 🌞 Light mode (padrão)
• 🌙 Dark mode (automático via host)

---

🔐 Segurança

• ✅ Validação de schemas com Zod
• ✅ Sanitização de inputs
• ✅ Persistência local (JSON)
• ✅ Sem exposição de dados sensíveis

---

📈 Métricas

Métrica	Valor
Linhas de Código	~1.800
Arquivos Criados	20+
Dependências	163 packages
Tamanho UI Bundle	578 KB (157 KB gzip)
Build Time	~7 segundos
Tools MCP	4
Transports	stdio + HTTP

---

🤝 Contribuindo

Contribuições são bem-vindas! Por favor:

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

---

📝 Changelog

v1.0.0 (2026-02-05)

✨ Features Iniciais

• ✅ Calculadora de propostas com dois tipos (Projetos/Sustentação)
• ✅ CRUD completo de cotações
• ✅ Persistência em JSON
• ✅ 4 tools MCP implementados
• ✅ Interface completa e responsiva
• ✅ Integração com Claude Desktop

📊 Estatísticas e Gráficos

• ✅ Painel de estatísticas com 4 cards de métricas
• ✅ Gráfico de distribuição por tipo (Donut)
• ✅ Gráfico Top 5 maiores cotações (Barras)
• ✅ Gráfico de evolução temporal (Linha)
• ✅ Interatividade com Chart.js

🎨 UI/UX

• ✅ Nomes de projetos editáveis
• ✅ Botão "Limpar Tudo" funcionando corretamente
• ✅ Suporte a dark/light mode
• ✅ Responsivo (mobile-friendly)

---

🐛 Problemas Conhecidos

Nenhum no momento. Reporte issues em: GitHub Issues

---

🗺️ Roadmap

v1.1.0 (Futuro)

• [ ] Exportar cotações para PDF
• [ ] Importar/Exportar dados em Excel
• [ ] Templates de cotações
• [ ] Múltiplos usuários
• [ ] Backup automático

v1.2.0 (Futuro)

• [ ] Dashboard gerencial
• [ ] Relatórios personalizados
• [ ] Integração com CRM
• [ ] API REST adicional

---

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

👤 Autor

Leonardo Silva

• GitHub: @silvaleo1979

---

🙏 Agradecimentos

• Anthropic - Claude Desktop e MCP Protocol
• Chart.js - Biblioteca de gráficos
• Vite - Build tool
• T2C Group - Cliente e caso de uso

---

📞 Suporte

• 📧 Email: [seu-email@exemplo.com]
• 💬 Issues: GitHub Issues
• 📚 Docs: Documentação Completa

---

Desenvolvido com ❤️ para T2C Group

Calculadora de Propostas Comerciais por Custo/Hora

---

🚀 Quick Start

# Clone
git clone https://github.com/silvaleo1979/MCP_APPS.git
cd MCP_APPS/calculadora-proposta-mcp

# Instale
npm install

# Build
npm run build

# Configure Claude Desktop (edite o caminho)
# Windows: %APPDATA%\Claude\claude_desktop_config.json
# macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

# Reinicie Claude Desktop e comece a usar! 🎉

---

⭐ Se este projeto foi útil, considere dar uma estrela no GitHub!