📊 Stats TV - Painel de Atendimentos ZPro

Um painel de TV em tempo real para monitoramento de atendimentos do sistema ZPro, desenvolvido com Vue.js e Node.js.

🎯 Sobre o Projeto

O Stats TV é uma aplicação web desenvolvida para exibir em tempo real as estatísticas de atendimentos do sistema ZPro em telas de TV ou monitores. O painel oferece uma visão completa e atualizada do desempenho da equipe de atendimento.

✨ Principais Funcionalidades

• 📈 Dashboard em Tempo Real: Atualizações automáticas a cada 15 segundos
• 🎫 Monitoramento de Tickets: Acompanhamento de tickets pendentes, em atendimento e finalizados
• ⏱️ Métricas de Tempo: Tempo médio de atendimento e tempo de espera
• 👥 Ranking de Atendentes: Top 3 atendentes mais produtivos do dia
• 📊 Estatísticas Diárias: Resumo completo dos atendimentos do dia
• 🔐 Autenticação Segura: Sistema de login com JWT para perfis admin/super
• 📱 Design Responsivo: Interface otimizada para diferentes tamanhos de tela

🏗️ Arquitetura

Backend (Node.js + Express)

• API RESTful para gerenciamento de dados
• WebSocket com Socket.IO para atualizações em tempo real
• Autenticação JWT para segurança
• Sequelize ORM para interação com PostgreSQL
• CORS configurado para comunicação frontend/backend

Frontend (Vue.js 3)

• Vue Router para navegação
• Pinia para gerenciamento de estado
• Socket.IO Client para comunicação em tempo real
• Axios para requisições HTTP
• Vite como bundler e servidor de desenvolvimento

🚀 Instalação e Configuração

Pré-requisitos

• Node.js 16+
• PostgreSQL 12+
• npm ou yarn

1. Clone o Repositório

git clone https://github.com/pedroherpeto/zpro-tv.git
cd zpro-tv

2. Configuração do Backend

cd backend
npm install

Configure o arquivo .ecosystem.config.js na pasta backend:

NODE_ENV: 'production', POSTGRES_HOST: 'localhost', POSTGRES_USER: 'zpro', POSTGRES_PASSWORD: 'password', POSTGRES_DB: 'postgres', DB_DIALECT: 'postgres', DB_PORT: 5432, DB_TIMEZONE: '-03:00', BACKEND_URL: 'http://localhost:8000', FRONTEND_URL: 'http://localhost:8001', JWT_SECRET: 'DPHmNRZWZ4isLF9vXkMv1QabvpcA80Rc',

Server

PORT=8000

### 3. Configuração do Frontend

```bash
cd frontend
npm install

4. Configuração do Banco de Dados

Certifique-se de que o PostgreSQL está rodando e execute as migrações necessárias para criar as tabelas do ZPro.

🎮 Como Usar

Desenvolvimento

Backend:

cd backend
npm run dev

Frontend:

cd frontend
npm run dev

Produção

Build do Frontend:

cd frontend
npm run build

Iniciar Backend:

cd backend
pm2 start ecosystem.config.js

Servir Frontend (após build):

cd frontend
npm run start

📊 Funcionalidades Detalhadas

Dashboard Principal

• Cards de Estatísticas: Exibição de números principais (pendentes, em atendimento, finalizados)
• Tempo Médio: Cálculo automático do tempo médio de atendimento
• Atualização Automática: Dados atualizados a cada 15 segundos via WebSocket

Monitoramento de Tickets

• Tickets Pendentes: Lista dos próximos tickets a serem atendidos
• Tickets em Atendimento: Monitoramento em tempo real dos atendimentos ativos
• Tempo de Atendimento: Contador em tempo real para cada ticket ativo

Relatórios e Métricas

• Estatísticas Diárias: Resumo completo do dia atual
• Ranking de Atendentes: Top performers do dia
• Tempo de Espera: Métricas de SLA e tempo de resposta

Personalização da Interface

O painel pode ser personalizado editando os arquivos CSS em frontend/src/assets/global.css e os componentes Vue em frontend/src/views/.

📱 Compatibilidade

• Navegadores: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
• Dispositivos: Desktop, Tablet, Smart TV (com navegador)
• Resoluções: Otimizado para 1920x1080 (Full HD) e superiores

🔒 Segurança

• Autenticação JWT: Tokens seguros para autenticação
• CORS: Configuração adequada para produção
• Validação: Validação de dados no backend
• Sanitização: Proteção contra SQL injection via Sequelize

📈 Monitoramento

O sistema inclui logs detalhados para:

• Conexões WebSocket
• Erros de autenticação
• Performance de queries
• Atualizações de dados

🤝 Contribuição

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

📄 Licença

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

---

Desenvolvido com ❤️ para otimizar o monitoramento de atendimentos ZPro