MVP - Sistema de Comunicação Unificada TCE-PR

Uma aplicação web React moderna para visualização e gestão das comunicações integradas dos sistemas CACO, SGA ADA e INTEGRA do Tribunal de Contas do Estado do Paraná.

🚀 Demonstração

Capturas de Tela

Tela de Login

Dashboard Principal

Credenciais de Demonstração

• Gestor: admin / admin123
• Colaborador: user / user123

📋 Funcionalidades Implementadas

✅ Requisitos Funcionais Atendidos

• RF01 - Controle de Acesso: Autenticação simulada via CIA com diferentes perfis
• RF02 - Listagem de Comunicações: Dashboard completo com cards informativos
• RF03 - Diferenciação Visual por Tipo: Badges e cores específicas por status e tipo
• RF04 - Sistema de Favoritos: Favoritar/desfavoritar comunicações com página dedicada
• RF05 - Visualização Detalhada: Páginas de detalhes completas para cada comunicação
• RF06 - Link para Sistema Original: Botões de acesso direto aos sistemas (CACO, SGA ADA, INTEGRA)
• RF07 - Filtros e Busca: Sistema completo de filtros por canal, status, tipo e busca textual
• RF08 - Conclusão de Comunicações: Marcação de comunicações como concluídas
• RF09 - Calendário de Eventos: Estrutura preparada para visualização temporal
• RF10 - Pendências Certidão Liberatória: Seção dedicada para certificações
• RF11 - Busca por ID: Campo específico para busca por ID de comunicação

🎨 Design System Completo

• Paleta de Cores TCE-PR: Cores institucionais com suporte WCAG 2.1
• Componentes Reutilizáveis: Buttons, Badges, Cards com múltiplas variações
• Tipografia Consistente: Escala tipográfica com Inter font
• Sistema de Espaçamento: Tokens de design para consistência visual
• Responsividade: Design adaptável para desktop, tablet e mobile

♿ Acessibilidade (WCAG 2.1 AA)

• Contraste: Mínimo de 4.5:1 em todos os textos
• Navegação por Teclado: Suporte completo para teclas Tab/Enter/Setas
• Screen Readers: Estrutura semântica com ARIA labels
• Focus Management: Indicadores visuais claros de foco
• Skip Links: Links de navegação rápida para conteúdo principal

🛠️ Tecnologias Utilizadas

Frontend

• React 19.1 - Framework JavaScript moderno
• Vite 7.1 - Build tool ultrarrápido
• React Router 6 - Roteamento SPA
• Lucide React - Biblioteca de ícones
• date-fns - Manipulação de datas

Styling

• CSS Custom Properties - Variables nativas do CSS
• CSS Modules - Escopo local de estilos
• Flexbox/Grid - Layout moderno
• Media Queries - Responsividade

Tooling

• ESLint - Análise de código
• Vite Dev Server - Desenvolvimento com hot reload

📊 Estrutura de Dados

Sistemas Integrados

1. CACO (Canal de Atendimento)

   • 98.7% das comunicações
   • Tipos: Informativo, Comunicação do Fiscalizado, Solicitação
   • Período: 2013-2025

2. SGA ADA (Sistema de Gestão de Achados)

   • Análises automáticas históricas
   • Controle técnico pontual
   • Status padronizado

3. INTEGRA (Sistema de Fiscalização)

   • Processos complexos bidirecionais
   • Fiscalização interativa (2024+)
   • Funcionalidades avançadas

Endpoints de API (Simulação)

// Configuração baseada em fonte_dados.md
const apiConfig = {
  baseURL: "http://127.0.0.1:8000/",
  endpoints: {
    caco: "/consulta-caco-cpf/",
    sgaAda: "/consulta-sga-ada-cpf/",
    integra: "/consulta-integra-cpf/",
    consolidated: "/consulta-todos-cpf/"
  }
};

🚀 Como Executar

Pré-requisitos

• Node.js 18+ e npm
• Git para clonagem do repositório

Instalação e Execução

# 1. Navegar para o diretório do MVP
cd mvp-comunicacao-unificada

# 2. Instalar dependências
npm install

# 3. Executar em modo desenvolvimento
npm run dev

# 4. Abrir no navegador
# http://localhost:5173

Scripts Disponíveis

# Desenvolvimento com hot reload
npm run dev

# Build para produção
npm run build

# Preview da build de produção
npm run preview

# Linting do código
npm run lint

📁 Estrutura do Projeto

mvp-comunicacao-unificada/
├── public/                     # Assets estáticos
├── src/
│   ├── components/            # Componentes React
│   │   ├── ui/               # Componentes de interface base
│   │   │   ├── Button.jsx    # Componente de botão
│   │   │   ├── Badge.jsx     # Badges de status/tipo
│   │   │   └── Card.jsx      # Cards reutilizáveis
│   │   ├── layout/           # Componentes de layout
│   │   │   ├── Header.jsx    # Cabeçalho com busca
│   │   │   ├── Sidebar.jsx   # Menu lateral
│   │   │   └── Layout.jsx    # Layout principal
│   │   ├── CommunicationCard.jsx      # Card de comunicação
│   │   ├── CommunicationFilters.jsx   # Sistema de filtros
│   │   └── ProtectedRoute.jsx         # Rota protegida
│   ├── pages/                # Páginas da aplicação
│   │   ├── Login.jsx         # Tela de login (RF01)
│   │   ├── Dashboard.jsx     # Dashboard principal (RF02,RF03,RF07)
│   │   ├── Favorites.jsx     # Página de favoritos (RF04)
│   │   ├── Calendar.jsx      # Calendário (RF09)
│   │   ├── Certifications.jsx # Certidões (RF10)
│   │   └── CommunicationDetail.jsx # Detalhes (RF05,RF06,RF08)
│   ├── hooks/                # Hooks customizados
│   │   └── useAuth.jsx       # Gerenciamento de autenticação
│   ├── data/                 # Dados e configurações
│   │   └── sampleData.js     # Dados de demonstração
│   ├── App.jsx              # Componente raiz
│   ├── main.jsx             # Entry point
│   └── index.css            # Design system CSS
├── package.json
├── vite.config.js
└── README.md

🎯 Funcionalidades Detalhadas

Autenticação e Controle de Acesso (RF01)

• Login simulado com credenciais do CIA
• Persistência de sessão no localStorage
• Proteção de rotas com redirecionamento
• Perfis de usuário (Gestor/Colaborador)
• Interface de logout no header

Dashboard e Listagem (RF02, RF03)

• Estatísticas visuais (Total, Pendentes, Concluídos, Vencidos, Favoritos)
• Cards de comunicação com informações completas
• Diferenciação visual por sistema (CACO=verde, SGA ADA=laranja, INTEGRA=roxo)
• Status badges coloridos (Pendente, Concluído, Vencido)
• Indicadores de prazo com alertas visuais
• Visualização em grade/lista

Sistema de Filtros e Busca (RF07, RF11)

• Busca textual por título, descrição, palavras-chave
• Busca específica por ID de comunicação
• Filtros por canal (CACO, SGA ADA, INTEGRA, SGP)
• Filtros por status (Pendente, Concluído, Vencido)
• Filtros por tipo (Com Prazo, Informativo)
• Filtros por prioridade (Alta, Média, Baixa)
• Contador de resultados dinâmico
• Limpeza rápida de filtros

Sistema de Favoritos (RF04)

• Toggle de favoritos em cada card
• Página dedicada para favoritos
• Persistência do estado de favoritos
• Contador dinâmico no menu

Ações de Comunicação (RF06, RF08)

• Botão "Concluir" para marcar como concluída
• Botão "Acessar Sistema" para link externo
• Confirmações visuais das ações
• Estados visuais para concluídas

🔧 Personalização e Configuração

Cores do Sistema

/* Cores principais em index.css */
--caco-color: #2e7d32;    /* Verde CACO */
--sga-color: #e65100;     /* Laranja SGA ADA */
--integra-color: #6a1b9a; /* Roxo INTEGRA */

Dados de Demonstração

Os dados estão em src/data/sampleData.js e podem ser facilmente substituídos por chamadas reais de API:

// Exemplo de integração com API real
const fetchCommunications = async () => {
  const response = await fetch('/api/consulta-todos-cpf/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ cpf: userCpf })
  });
  return response.json();
};

🔄 Próximas Implementações

Fase 2 - Calendário Completo (RF09)

• Visualização mensal/semanal/diária
• Integração com prazos das comunicações
• Eventos e marcos importantes
• Navegação temporal

Fase 3 - Certidões Liberatórias (RF10)

• Dashboard de pendências
• Status detalhado de certificações
• Alertas de vencimento
• Histórico de renovações

Fase 4 - Integrações Avançadas

• API real do TCE-PR
• Notificações push
• Relatórios exportáveis
• Auditoria de ações

📈 Performance e Otimização

• Code Splitting automático por rotas
• Lazy Loading de componentes
• Memoização de computações pesadas
• Virtual Scrolling para grandes listas (futuro)

🧪 Testes

Testes Manuais Realizados

• ✅ Login/Logout com diferentes credenciais
• ✅ Navegação entre todas as páginas
• ✅ Filtros e busca com diferentes combinações
• ✅ Ações de favoritar/concluir funcionando
• ✅ Responsividade em diferentes tamanhos de tela
• ✅ Acessibilidade com navegação por teclado

Cenários de Teste Sugeridos

# Cenário 1: Login e navegação
1. Acessar /login
2. Usar credenciais de demo
3. Verificar redirecionamento para /dashboard
4. Navegar por todas as páginas do menu

# Cenário 2: Filtros e busca
1. Aplicar filtros por canal (CACO)
2. Verificar atualização de resultados
3. Buscar por ID específico (COM-2024-001)
4. Limpar filtros e verificar reset

# Cenário 3: Ações de comunicação
1. Favoritar uma comunicação
2. Acessar página de favoritos
3. Marcar comunicação como concluída
4. Verificar mudança visual

🤝 Contribuição

Como Contribuir

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

Padrões de Código

• ESLint para linting
• Prettier para formatação (recomendado)
• Conventional Commits para mensagens de commit
• Componentização máxima para reutilização

📝 Licença

Este projeto foi desenvolvido como MVP para o Tribunal de Contas do Estado do Paraná (TCE-PR) seguindo as especificações do projeto de prototipação disponível em: https://github.com/EstudioInovacao/prototipacao-Comunicacao-Unificada

📞 Suporte

Para dúvidas sobre implementação ou requisitos:

• Documentação Original: Projeto de Prototipação
• Issues: Use a aba Issues do GitHub
• Contato TCE-PR: Através dos canais oficiais

🏛️ Desenvolvido para o Tribunal de Contas do Estado do Paraná
Sistema de Comunicações Integradas - MVP React