Workflow Status Dashboard

Workflow Status Dashboard é um template estático, responsivo e reutilizável para acompanhar processos baseados em planilhas do Google Sheets.

Ele foi projetado para funcionar sem backend, banco de dados ou etapa de build. Basta publicar uma aba do Google Sheets em formato CSV, configurar a URL e abrir o dashboard em qualquer servidor estático.

---

Para que serve

Use este template para acompanhar qualquer fluxo de trabalho estruturado em planilha, por exemplo:

• gestão de projetos;
• controle de tarefas;
• acompanhamento de implantações;
• produção;
• estoque;
• manutenção;
• chamados;
• cronogramas;
• processos administrativos;
• auditorias e rotinas operacionais.

---

Principais funcionalidades

• Leitura direta de uma planilha publicada em formato CSV.
• Atualização automática dos dados a cada 60 segundos.
• Classificação automática por prazo e data de conclusão.
• Cards de resumo com totalizadores e percentuais.
• Tabela detalhada com status visual por item.
• Filtro por categoria.
• Filtro por status.
• Busca textual por item, categoria ou grupo.
• Ordenação automática por prioridade operacional.
• Rolagem automática para uso em TV, monitor ou painel público.
• Relógio em tempo real.
• Botão de tela cheia.
• Layout responsivo.
• Código em JavaScript puro, sem dependências obrigatórias.

---

Captura conceitual das funcionalidades

┌────────────────────────────────────────────────────────────────────┐
│ WORKFLOW STATUS DASHBOARD               14:32:10 | Atualizado há 5s │
├────────────────────────────────────────────────────────────────────┤
│ Vencidos │ Atenção │ No prazo │ Fora do prazo │ Total de itens      │
├────────────────────────────────────────────────────────────────────┤
│ Detalhamento dos itens                         [Categoria][Status] │
│ Buscar item...                                                     │
│                                                                    │
│ Item                  Categoria       Grupo       Status     Prazo │
│ Processo A            Projeto X       Equipe 1    Vencido    ...   │
│ Processo B            Projeto Y       Equipe 2    Atenção    ...   │
│ Processo C            Projeto Z       Equipe 3    Concluído  ...   │
├────────────────────────────────────────────────────────────────────┤
│ Dados sincronizados via Google Sheets       Rolagem automática  ⛶  │
└────────────────────────────────────────────────────────────────────┘

---

Estrutura dos arquivos

.
├── index.html          # Estrutura da página e textos da interface
├── style.css           # Layout, tema visual, responsividade e animações
├── script.js           # Leitura CSV, classificação, filtros e renderização
├── config.example.js   # Modelo público de configuração
├── sample-data.csv     # Exemplo opcional de estrutura da planilha
├── .gitignore          # Arquivos que não devem ser versionados
├── LICENSE             # Licença MIT
└── README.md           # Documentação do projeto

O arquivo config.js deve ser criado localmente a partir do config.example.js. Ele não deve ser enviado ao GitHub.

---

Instalação

Clone o repositório:

git clone https://github.com/SEU_USUARIO/workflow-dashboard.git
cd workflow-dashboard

Crie o arquivo de configuração local:

cp config.example.js config.js

Edite o arquivo config.js e informe a URL CSV pública da sua planilha:

const CONFIG = {
    SHEET_CSV_URL: "COLE_AQUI_A_URL_DA_SUA_PLANILHA",
};

---

Configuração da planilha

O dashboard lê os dados por posição de coluna. Os nomes abaixo são exemplos recomendados para facilitar a manutenção:

0  Categoria
1  Grupo
2  Item
3  Data prevista
4  Sinal
5  Data inicial
6  Data final
7  Responsável
8  Revisor
9  Duplicar
10 Data concluída
11 Status
12 Observações

Exemplo de cabeçalho

Categoria,Grupo,Item,Data prevista,Sinal,Data inicial,Data final,Responsável,Revisor,Duplicar,Data concluída,Status,Observações
Projeto Alpha,Fase 1,Configurar ambiente,30/06/2026,,20/06/2026,05/07/2026,Ana,Bruno,,28/06/2026,,Finalizado sem pendências
Projeto Alpha,Fase 1,Validar documentação,02/07/2026,,25/06/2026,06/07/2026,Camila,Diego,,,,Aguardando revisão

Os nomes das colunas podem ser adaptados. Caso a ordem mude, ajuste o objeto COLUMN_INDEX no arquivo script.js.

---

Como obter a URL CSV do Google Sheets

1. Abra a planilha no Google Sheets.
2. Acesse Arquivo > Compartilhar > Publicar na web.
3. Escolha a aba que será usada como fonte do dashboard.
4. Selecione o formato Valores separados por vírgula (.csv).
5. Clique em Publicar.
6. Copie o link gerado.
7. Cole o link no arquivo config.js, no campo SHEET_CSV_URL.

Formato recomendado:

https://docs.google.com/spreadsheets/d/[SPREADSHEET_ID]/gviz/tq?tqx=out:csv&gid=[SHEET_GID]

---

Utilização local

Abra a pasta do projeto e inicie um servidor estático simples.

Com Python:

python -m http.server 8080

Depois acesse:

http://localhost:8080

Evite abrir o index.html com duplo clique, porque alguns navegadores bloqueiam requisições locais por segurança.

---

Regras de classificação dos status

A classificação é calculada no navegador a partir da Data prevista e da Data concluída.

A ordem das regras é:

Data prevista inválida ou vazia               -> Prazo inválido / vermelho
Data concluída preenchida até a data prevista -> Concluído no prazo / verde
Data concluída preenchida após a data prevista-> Concluído fora do prazo / laranja
Data prevista vencida sem conclusão           -> Vencido / vermelho
Data prevista em até 7 dias                   -> Atenção / amarelo
Data prevista acima de 7 dias                 -> Em andamento / azul

Para evitar excesso de itens futuros, registros classificados como Em andamento só aparecem quando a Data inicial está entre hoje e os próximos 30 dias.

Essas regras podem ser personalizadas no arquivo script.js, principalmente nas constantes:

const ATTENTION_DAYS_LIMIT = 7;
const UPCOMING_START_WINDOW_DAYS = 30;

---

Funcionamento da ordenação

A tabela é ordenada por prioridade operacional:

1. Vencidos / inválidos
2. Atenção
3. Em andamento
4. Concluídos fora do prazo
5. Concluídos no prazo

Dentro de cada status, os itens com menor quantidade de dias aparecem primeiro.

---

Personalização

Alterar o intervalo de atualização

No arquivo script.js, ajuste:

const REFRESH_INTERVAL_MS = 60 * 1000;

Exemplo para 5 minutos:

const REFRESH_INTERVAL_MS = 5 * 60 * 1000;

Alterar o limite do alerta de atenção

const ATTENTION_DAYS_LIMIT = 7;

Alterar a janela de exibição de itens futuros

const UPCOMING_START_WINDOW_DAYS = 30;

Alterar colunas da planilha

No arquivo script.js, edite:

const COLUMN_INDEX = {
    category: 0,
    group: 1,
    item: 2,
    dueDate: 3,
    startDate: 5,
    completedDate: 10,
};

Alterar cores e aparência

No arquivo style.css, customize os tokens no bloco :root:

:root {
  --bg: #07090F;
  --surface-1: #0D1117;
  --red: #FF4C4C;
  --yellow: #F5C518;
  --green: #22D07A;
  --orange: #FF7A1A;
  --blue: #4F9EFF;
}

---

Rolagem automática

A rolagem automática foi pensada para dashboards exibidos em telas grandes, TVs ou painéis de acompanhamento.

Comportamento padrão:

Descida: 0.2 pixel por frame
Pausa no final: 3 segundos
Retorno ao topo: 8 pixels por frame
Pausa no topo: 1,5 segundo
Pausa após interação manual: 8 segundos

A rolagem só acontece quando a tabela possui mais conteúdo do que a área visível.

---

Segurança

Este projeto é estático e roda no navegador. Isso significa que qualquer pessoa com acesso à página poderá visualizar a URL da planilha nas ferramentas de desenvolvedor do navegador.

Boas práticas:

• Não coloque dados confidenciais na planilha.
• Não use planilhas com informações pessoais sensíveis.
• Use apenas dados que podem ser exibidos publicamente ou internamente sem risco.
• Mantenha config.js fora do GitHub.
• Para dados restritos, crie um backend intermediário com autenticação e controle de acesso.

---

Publicação e deploy

Você pode publicar o dashboard em qualquer serviço que hospede arquivos estáticos, como:

• GitHub Pages;
• Netlify;
• Vercel;
• Cloudflare Pages;
• servidor Nginx ou Apache;
• hospedagem compartilhada;
• bucket estático em nuvem.

Arquivos necessários em produção:

index.html
style.css
script.js
config.js

O arquivo config.example.js é útil para documentação e versionamento, mas o arquivo efetivamente usado em produção é o config.js.

---

Publicando no GitHub

Nome recomendado para o repositório:

workflow-dashboard

Descrição curta sugerida:

Static Google Sheets dashboard for tracking workflow status, deadlines and process progress.

Topics sugeridos:

google-sheets dashboard workflow-dashboard status-dashboard vanilla-javascript html css csv static-site project-management task-tracking process-monitor

Palavras-chave:

google sheets dashboard, workflow tracking, status dashboard, process dashboard, deadline monitoring, task dashboard, csv dashboard, vanilla javascript dashboard

Comandos básicos para versionar:

git init
git add index.html style.css script.js config.example.js sample-data.csv .gitignore LICENSE README.md
git commit -m "Initial open source release"
git branch -M main
git remote add origin https://github.com/SEU_USUARIO/workflow-dashboard.git
git push -u origin main

---

Boas práticas para uso em produção

• Valide se a planilha está publicada corretamente em CSV.
• Evite linhas de legenda misturadas aos dados.
• Padronize datas no formato DD/MM/AAAA.
• Evite células mescladas na área de dados.
• Mantenha uma linha única de cabeçalho.
• Evite cabeçalhos duplicados.
• Revise se config.js está no .gitignore antes do primeiro commit.
• Teste o dashboard localmente antes de publicar.
• Use dados não confidenciais.

---

Checklist antes de publicar

• config.js foi criado localmente.
• config.js está listado no .gitignore.
• config.example.js não contém URL real.
• A planilha está publicada como CSV.
• A URL CSV retorna status 200 no navegador.
• As datas estão no formato DD/MM/AAAA.
• A ordem das colunas corresponde ao COLUMN_INDEX.
• O dashboard carrega dados localmente.
• Nenhum dado sensível foi incluído na planilha.
• README, licença e descrição do repositório foram revisados.

---

Licença

Este projeto é distribuído sob a licença MIT. Consulte o arquivo LICENSE para mais detalhes.