Dashboard interativo e responsivo para análise e controle de qualidade de dados hoteleiros do Pajuçara Praia Hotel. Sistema completo de visualização de KPIs, gráficos dinâmicos, filtros avançados e gestão de dados através de importação de planilhas.
Sistema desenvolvido para gestão hoteleira com foco em análise de dados, permitindo importação de planilhas Excel/CSV, visualização de métricas em tempo real, filtragem avançada por múltiplos critérios e exportação de relatórios personalizados.
-
Importação de Arquivos
- Suporte para Excel (
.xlsx,.xls) e CSV - Detecção automática de categorias e departamentos
- Validação de dados em tempo real
- Armazenamento local persistente (LocalStorage)
- Feedback visual durante importação
- Suporte para Excel (
-
Exclusão de Dados
- Modal de confirmação customizado
- Limpeza completa do armazenamento local
- Resetagem de filtros e visualizações
- Proteção contra exclusão acidental
Métricas principais exibidas em tempo real:
-
Avaliação Média
- Média geral de avaliações (0-5 estrelas)
- Indicador de tendência (↑ ou ↓)
- Comparação com período anterior
-
Taxa de Ocupação
- Percentual de ocupação do hotel
- Tendência de crescimento/decréscimo
- Visualização em porcentagem
-
Receita Total
- Soma total de receitas (R$)
- Formatação monetária brasileira
- Indicador de tendência financeira
-
Total de Hóspedes
- Contagem total de hóspedes
- Análise de variação
- Tendência de ocupação
- Acompanhamento temporal da taxa de ocupação
- Eixo temporal com datas formatadas
- Interpolação suave de dados
- Gradiente visual atrativo
- Análise de receita mensal
- Comparação entre períodos
- Cores temáticas personalizadas
- Valores formatados em moeda
- Visualização proporcional de categorias
- Legendas interativas
- Percentuais calculados automaticamente
- Paleta de cores harmoniosa
- Ranking de departamentos
- Média de avaliações (0-5)
- Ordenação por desempenho
- Identificação visual rápida
- Mês: Seleção de mês específico ou todos
- Departamento: Filtro por departamento do hotel
- Categoria: Segmentação por tipo de serviço
- Busca por Nome: Pesquisa textual em tempo real
- Visualização Mensal: Grid completo de dias do mês
- Navegação: Mês anterior/próximo e botão "Hoje"
- Seleção de Data: Clique para filtrar dados do dia específico
- Sincronização: Selects de mês/ano atualizam o calendário
- Feedback Visual:
- Dia atual marcado
- Dia selecionado destacado
- Informações de uso integradas
- Atualização automática da data no header
- Filtro instantâneo de dados da tabela
- Fechamento automático após seleção
- Resetagem de outros filtros ao selecionar dia
- Interface intuitiva com tooltips
- Paginação: 10 registros por página
- Navegação: Botões Anterior/Próxima
- Informações: Contador de página atual
- Colunas Exibidas:
- Data
- Mês
- Categoria
- Departamento
- Hóspede
- Avaliação (estrelas visuais)
- Ocupação (%)
- Receita (R$)
- Observações
- Formato Excel: Exportação em
.xlsx - Formato CSV: Exportação em
.csv - Formato JSON: Exportação em
.json - Formato PDF: Relatório completo com KPIs, gráficos e tabelas
- Dados Filtrados: Exporta apenas os dados filtrados atualmente
- Nome Automático:
dados_hotel_[timestamp].[formato] - Formatação Preservada: Mantém estrutura original
- Bibliotecas: SheetJS (xlsx), jsPDF, html2canvas
- Geração automática de relatórios profissionais
- Inclui todos os KPIs principais
- Gráficos capturados como imagens
- Tabela de dados detalhados (primeiros 50 registros)
- Cabeçalho com data de geração
- Download automático ao concluir
Sistema completo de temas com 6 opções de cores:
- Padrão - Roxo e azul (cores originais)
- Oceano - Azul marinho e ciano
- Pôr do Sol - Laranja e vermelho
- Floresta - Verde escuro e claro
- Roxo Real - Roxo escuro e violeta
- Coral - Vermelho coral e laranja
- Seletor visual com preview das cores
- Aplicação instantânea sem recarregar
- Persistência da escolha (salva no navegador)
- Atualização automática de todos os componentes
- Gradientes harmonizados para cada tema
Ferramenta avançada para análise comparativa:
- Seleção Dual: Escolha dois períodos (mês/ano) diferentes
- Métricas Comparadas:
- Total de registros
- Avaliação média
- Taxa de ocupação
- Receita total
- Total de hóspedes
- Percentual de Variação: Cálculo automático da diferença percentual
- Indicadores Visuais: Verde para crescimento, vermelho para queda
- Interface Intuitiva: Modal dedicado com resultados claros
Feedback visual elegante para todas as ações:
-
Tipos de Notificação:
- ✅ Sucesso (verde) - Ações concluídas
- ❌ Erro (vermelho) - Falhas e problemas
⚠️ Aviso (amarelo) - Alertas importantes- ℹ️ Informação (azul) - Mensagens gerais
-
Características:
- Animação suave de entrada/saída
- Auto-fechamento após 5 segundos
- Fechamento manual com clique
- Posicionamento inteligente (canto superior direito)
- Empilhamento de múltiplas notificações
- Ícones contextuais para cada tipo
Layout otimizado para impressão de relatórios:
- Estilos Especiais: CSS
@media printdedicado - Ocultação Inteligente: Remove botões e elementos interativos
- Layout Limpo: Foco nos dados essenciais
- Quebra de Página: Evita corte de elementos importantes
- Cores Ajustadas: Preto e branco para economia de tinta
- Ativação Rápida: Botão "Imprimir" no sidebar
- Alternância de Tema: Botão de toggle no header
- Persistência: Preferência salva no navegador
- Transições Suaves: Animações em todas as mudanças
- Cores Adaptativas:
- Tema Escuro: Fundo escuro, texto claro
- Tema Claro: Fundo claro, texto escuro
- Ícone Dinâmico: Lua (escuro) / Sol (claro)
- Mobile First: Otimizado para dispositivos móveis
- Breakpoints:
- Desktop: >1024px
- Tablet: 768px - 1024px
- Mobile: <768px
- Header Adaptativo: Navegação por setas em mobile
- Cards Empilháveis: Grid responsivo de KPIs
- Gráficos Redimensionáveis: Ajuste automático
- Tabela Scrollável: Overflow horizontal em telas pequenas
- Data Atual: Atualização automática (formato extenso)
- Relógio: Atualização em tempo real
- Total de Registros: Contador dinâmico
- Receita Total: Soma geral formatada
- Navegação Mobile: Setas para alternar estatísticas
- Seletor de Data: Acesso rápido ao calendário
- HTML5: Estrutura semântica
- CSS3: Estilização avançada com variáveis CSS
- JavaScript (ES6+): Lógica de aplicação
- Chart.js: Visualização de gráficos
- SheetJS (xlsx): Importação/Exportação Excel
- Font Awesome: Ícones vetoriais
- Google Fonts (Poppins): Tipografia moderna
- CSS Variables (Custom Properties)
- Flexbox & Grid Layout
- Gradientes lineares
- Transições e animações
- Media Queries responsivas
Dashboard/
│
├── index.html # Estrutura HTML principal
├── style.css # Estilos e temas
├── script.js # Lógica JavaScript
└── README.md # Documentação (este arquivo)
- Header com estatísticas dinâmicas
- Modal de seleção de data (calendário)
- Modal de confirmação de exclusão
- Cards de KPIs
- Seção de filtros
- Área de gráficos (4 canvas)
- Tabela de dados com paginação
- Rodapé informativo
- Reset e variáveis globais
- Tema claro e escuro
- Componentes modulares
- Animações e transições
- Media queries responsivas
- Estilos de gráficos e tabelas
- Variáveis globais e inicialização
- Gestão de dados (CRUD)
- Cálculo de KPIs
- Renderização de gráficos
- Sistema de filtros
- Paginação de tabela
- Calendário interativo
- Importação/Exportação
- Tema e navegação
Nenhuma instalação necessária! Basta abrir o arquivo index.html em qualquer navegador moderno.
# Clone ou baixe os arquivos
# Abra index.html no navegador- Clique no botão "Importar Planilha"
- Selecione um arquivo Excel (.xlsx, .xls) ou CSV
- Aguarde o processamento e confirmação
- Os dados serão exibidos automaticamente
Formato Esperado da Planilha:
- Colunas: Data, Mês, Categoria, Departamento, Hóspede, Avaliação, Ocupação (%), Receita (R$), Observações
- Primeira linha: Cabeçalhos
- Datas: Formato reconhecível (DD/MM/YYYY, YYYY-MM-DD, etc.)
Filtros Principais:
- Selecione Mês, Departamento ou Categoria nos dropdowns
- Digite um nome no campo de Busca
- Clique em Aplicar Filtros
Calendário:
- Clique na data do header
- Navegue pelos meses usando as setas
- Selecione mês/ano nos dropdowns para mudar o calendário
- Clique em um dia para filtrar dados daquela data específica
- Modal fecha automaticamente após seleção
- KPIs: Visualização instantânea no topo
- Gráficos: 4 visualizações diferentes
- Tabela: Navegue usando paginação
- Tendências: Indicadores ↑/↓ nos KPIs
- Aplique os filtros desejados
- Clique no botão "Exportar para Excel"
- Arquivo será baixado automaticamente
- Clique no ícone de lua/sol no header
- Tema alternará entre claro e escuro
- Preferência é salva automaticamente
- Clique no botão "Limpar Dados"
- Confirme a ação no modal
- Todos os dados serão removidos
- Navegue até a seção "Exportar" no sidebar
- Clique no botão "PDF"
- Aguarde a geração (notificação aparecerá)
- PDF será baixado automaticamente com:
- Todos os KPIs principais
- Gráficos capturados
- Tabela de dados detalhados
- Clique no botão "Comparar" no sidebar
- Selecione o Período 1: Escolha mês e ano
- Selecione o Período 2: Escolha outro mês e ano
- Clique em "Comparar"
- Veja os resultados:
- Métricas lado a lado
- Percentual de variação
- Indicadores visuais de crescimento/queda
- Clique no botão "Temas" no sidebar
- Modal será aberto com 6 opções
- Clique no tema desejado:
- Padrão - Roxo e azul
- Oceano - Azul marinho
- Pôr do Sol - Laranja e vermelho
- Floresta - Verde
- Roxo Real - Roxo intenso
- Coral - Coral e laranja
- Tema aplicado instantaneamente
- Sua escolha é salva automaticamente
- Clique no botão "Imprimir" no sidebar
- Visualização de impressão será aberta
- Ajuste configurações da impressora
- Imprima ou salve como PDF
- Layout otimizado automaticamente (sem botões, limpo)
Edite as variáveis CSS em style.css:
:root {
--primary-color: #667eea;
--primary-gradient-start: #667eea;
--primary-gradient-end: #764ba2;
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* ... */
}No script.js, edite a função applyFilters():
function applyFilters() {
// Adicione novas condições de filtro aqui
}Edite a função calculateKPIs() em script.js:
function calculateKPIs() {
// Adicione novos cálculos aqui
}Dados são salvos automaticamente no navegador usando LocalStorage:
- Chave:
hotelDashboardData - Formato: JSON Array
- Persistência: Até limpeza manual ou do cache
- Limite: ~5MB (varia por navegador)
.xlsx(Office Open XML).xls(Excel Binary)
- Separadores: vírgula, ponto-e-vírgula
- Codificação: UTF-8, Latin1
- ✅ Processamento Local: Todos os dados são processados no navegador
- ✅ Sem Backend: Nenhum dado é enviado para servidores externos
- ✅ LocalStorage: Dados armazenados apenas no dispositivo do usuário
- ✅ Confirmações: Modais de confirmação para ações destrutivas
- ✅ Validação: Verificação de dados durante importação
| Navegador | Versão Mínima | Suporte |
|---|---|---|
| Chrome | 90+ | ✅ Total |
| Firefox | 88+ | ✅ Total |
| Safari | 14+ | ✅ Total |
| Edge | 90+ | ✅ Total |
| Opera | 76+ | ✅ Total |
Requisitos:
- JavaScript habilitado
- LocalStorage disponível
- Canvas support (para gráficos)
{
data: "2025-12-12",
mes: "Dezembro",
categoria: "Premium",
departamento: "Recepção",
hospede: "João Silva",
avaliacao: 4.5,
ocupacao: 85,
receita: 1250.00,
observacoes: "Check-in rápido"
}data: Data do registromes: Nome do mêscategoria: Categoria do serviçodepartamento: Departamento responsávelhospede: Nome do hóspedeavaliacao: Nota de 0 a 5ocupacao: Percentual (0-100)receita: Valor monetárioobservacoes: Texto livre (opcional)
- Verifique o formato da planilha
- Certifique-se que há cabeçalhos na primeira linha
- Verifique o console do navegador (F12)
- Verifique se há dados importados
- Limpe o cache do navegador
- Recarregue a página (Ctrl+F5)
- Verifique se há dados carregados
- Clique em "Resetar Filtros"
- Reimporte os dados se necessário
- Clique em "Limpar Dados"
- Importe uma planilha menor
- Limpe o cache do navegador
- Exportação para PDF - Gere relatórios completos em PDF com gráficos e tabelas
- Gráficos adicionais - Visualizações aprimoradas para melhor análise de dados
- Comparação entre períodos - Compare métricas de dois meses diferentes lado a lado
- Modo de impressão - Layout otimizado para impressão de relatórios
- Temas personalizáveis - 6 temas de cores diferentes (Padrão, Oceano, Pôr do Sol, Floresta, Roxo Real, Coral)
- Sistema de notificações - Alertas visuais elegantes para todas as ações do usuário
- Internacionalização (i18n) - Suporte multi-idiomas
- Dashboard personalizado - Widgets customizáveis pelo usuário
- Exportação agendada - Relatórios automáticos periódicos
- Editor de código (VS Code, Sublime, etc.)
- Navegador com DevTools
- Conhecimento em HTML, CSS, JavaScript
// Gestão de Dados
loadDataFromStorage()
saveDataToStorage()
importFile()
clearLoadedData()
// Cálculos e KPIs
calculateKPIs()
calculateTrend()
// Visualizações
renderCharts()
renderTable()
renderCalendar()
// Filtros
applyFilters()
applyDateFilter()
selectDate()
// Navegação
changePage()
navigateStats()
toggleDatePicker()
toggleTheme()Para dúvidas, sugestões ou reportar problemas:
- 📧 Email: sarahbomfimm24@gmail.com
- 🌐 Website: https://sarahbomfimm.github.io/Meu-Portif-lio/
- 📱 Telefone: (82) 98873-6580
Desenvolvido para Pajuçara Praia Hotel com foco em excelência na gestão de dados hoteleiros e análise de qualidade de serviços.
Dashboard de Controle de Qualidade Hoteleiro v1.0.0
Transformando dados em decisões inteligentes 🎯
Interface principal com KPIs, gráficos e tabela de dados em tema escuro.
Modal de seleção de data com navegação mensal e seleção de dia específico.
Visualização completa do dashboard em modo claro.
Interface adaptada para dispositivos móveis com navegação otimizada.
Última atualização: Dezembro 2025
Versão: 1.0.0
Status: ✅ Estável e em Produção