🏭 Painel de Controle Industrial 4.0 com Assistente IA (Orion)

Nota: Este é um projeto de portfólio desenvolvido para demonstrar habilidades avançadas em desenvolvimento front-end, UI/UX e visualização de dados, simulando uma aplicação de Indústria 4.0 em tempo real.

📋 Índice

• Visão Geral
• Funcionalidades Principais
• Tecnologias Utilizadas
• Como Executar Localmente
• Contribuindo
• Autor

🎯 Visão Geral

Este projeto é uma simulação completa de um Painel de Controle de Setores (PCS) para uma moderna indústria moveleira. A aplicação não apenas exibe dados operacionais em um formato Kanban interativo, mas também integra um assistente de IA chamado Orion para diagnóstico e suporte à decisão, além de dashboards de Business Intelligence (BI) para uma visão gerencial completa.

O objetivo foi criar uma ferramenta visualmente impressionante, funcional e rica em detalhes, utilizando apenas tecnologias web estáticas (HTML, CSS e JavaScript puro), provando que é possível construir aplicações complexas e com ótima experiência de usuário sem a necessidade de frameworks pesados.

➡️ Acesse a demonstração ao vivo aqui!

🎨 Visualização do Kanban

Aqui está uma prévia de como o dashboard se parece em um dispositivo móvel. O design é totalmente responsivo e se adapta a qualquer tamanho de tela.

💡 Instrução: Para que sua imagem apareça aqui, tire uma captura de tela do seu dashboard, envie para um site como o Imgur e substitua o link acima pelo link direto da sua imagem.

---

✨ Funcionalidades Principais

📊 Dashboard de BI Integrado

• KPIs Globais: Visão geral da saúde da fábrica com os principais indicadores (OEE, Qualidade, Produção Total).
• Gráfico de Eficiência: Gráfico de barras interativo que compara o OEE entre os setores, permitindo uma análise visual rápida dos pontos de melhoria.

📌 Kanban de Controle de Produção

• Colunas de Status: Organização visual dos setores da fábrica por status (Normal, Atenção, Crítico, Otimização, Logística).
• Drag-and-Drop: Realoque setores entre as colunas para simular mudanças de status de forma intuitiva.
• Cards de Setor Detalhados: Cada card exibe KPIs essenciais, oferecendo um resumo rápido sem a necessidade de cliques.

🤖 Assistente IA "Orion"

• Interface Conversacional: Um chatbot acessível por um botão flutuante, pronto para ajudar.
• Diagnóstico Inteligente (Simulado): Peça um "resumo dos setores" ou pergunte sobre problemas específicos (ex: "solução para AGV parado") e receba planos de ação baseados nos dados do painel.

🎨 Interface e UX de Alta Qualidade

• Seletor de Tema: Alterne entre os modos Claro (Light), Escuro (Dark) e Sistema, com persistência via localStorage.
• Design Totalmente Responsivo: Experiência de uso perfeita em desktops, tablets e smartphones.
• Modal de Detalhes: Clique em qualquer setor para abrir uma janela com um dashboard completo, incluindo diagnóstico, plano de ação e todos os KPIs.
• Microinterações e Animações: Animações sutis que guiam o usuário e tornam a experiência mais fluida e profissional.

🛠️ Tecnologias Utilizadas

Tecnologia	Descrição
HTML5	Estrutura semântica e acessível
CSS3	Estilização avançada e layouts responsivos
Tailwind CSS	Framework CSS para desenvolvimento ágil e design consistente
JavaScript (ES6+)	Manipulação avançada do DOM, lógica do Kanban (Drag and Drop API), gerenciamento de estado e "inteligência" simulada do Orion
Chart.js	Biblioteca para a criação de gráficos interativos e responsivos
Lucide Icons	Iconografia vetorial limpa e leve

🚀 Como Executar Localmente

Pré-requisitos

• Um navegador moderno (Chrome, Firefox, Safari, Edge)
• Git instalado

Passos de Instalação

1. Clone o repositório:

git clone https://github.com/bersou/Painel-De-Monitoramento.git

2. Navegue até a pasta do projeto:

cd Painel-De-Monitoramento

3. Abra o arquivo index.html em seu navegador preferido:
   • Duplo clique no arquivo index.html, ou
   • Clique com o botão direito e selecione "Abrir com" e escolha seu navegador preferido

🎉 E pronto! A aplicação estará rodando.

📝 Estrutura do Projeto

Painel-De-Monitoramento/
├── index.html          # Arquivo principal da aplicação
├── README.md           # Este arquivo
└── [outros arquivos]   # Arquivos de estilo e lógica

🤝 Contribuindo

Contribuições são bem-vindas! Para contribuir, por favor:

1. Faça um Fork do 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

👨‍💻 Autor

Desenvolvido com dedicação por José Bernardo

• 🔗 LinkedIn
• 🌐 Portfólio - Demo ao vivo
• 🐙 GitHub

---

Feito com ❤️ por José Bernardo

© 2025 - Todos os direitos reservados