Lovable
Fase 01 — Operacional
Dashboards de Tarefas e Projetos — controle e acompanhamento das atividades operacionais.
01. Dashboard de Tarefas
Arquivo: public/data/tarefas.csv · Rota: /tarefas
Base: projeto Lovable atual. Contém 4 cards de KPIs, gráficos de distribuição por status/prioridade/etapa, Top 5 tarefas por esforço, timeline mensal, Gantt e análise de risco.
Prompt
## Dashboard de Tarefas — Spec Consolidada
**Arquivo:** `public/data/tarefas.csv` · **Rota:** `/tarefas` (com `/` redirecionando)
---
### 1 · Parser
Expandir para as 25 colunas do CSV. Conversões obrigatórias:
|Campo|Transformação|
|---|---|
|Responsável|`split(',').map(trim)` → `string[]`|
|Restam|`HH:MM` → minutos via `parseEkyteDuration`|
|Orçamento / Valor previsto / Valor realizado|`parseEkyteMoney`|
Campos derivados (sem alterar layout):
- `atrasada` → prazo vencido + situação "Ativa"
- `urgente` → prioridade contém "Urgente"
- `sem_responsavel` → array de responsáveis vazio
---
### 2 · KPIs
Manter os 4 atuais e adicionar:
- **Tarefas atrasadas** — ícone `AlertTriangle`, cor vermelha
- **Sem responsável** — ícone `UserX`, cor amarela
- **Saldo financeiro** (`Valor realizado − Orçamento`) — ícone `DollarSign`, verde se positivo / vermelho se negativo
Todos seguem o visual atual. Todos respondem aos filtros.
---
### 3 · Filtros Sticky
Barra fixa com filtros reativos afetando KPIs, gráficos e visualizações:
- Workspace · Situação · Fluxo de trabalho · Prioridade · Período de conclusão
- **Responsável** — multi-select com busca
- **Tipo de origem** — Projeto / Ticket / Sem origem
- Botão **"Limpar filtros"**
---
### 4 · Modos de Visualização
Seletor acima dos gráficos com três modos:
|#|Modo|Ícone|Descrição|
|---|---|---|---|
|1|Cards + Gráficos|★|Visual atual (default)|
|2|Kanban|`Columns3`|Colunas por Etapa; cards com tarefa, workspace, responsável, prazo e status; scroll horizontal; drag apenas visual|
|3|Tabela|`Table`|Tabela detalhada (ver §5)|
---
### 5 · Tabela
Paginada (25 linhas/página), ordenação em todas as colunas, padrão `Concluir até ASC`.
**Colunas:** Tarefa · Workspace · Fluxo · Etapa · Responsável · Executor · Prioridade · Concluir até · Restam · Esforço Realizado · Valor realizado · Origem
**Regras visuais:**
- `atrasada` → borda vermelha
- `urgente` → badge "URGENTE"
- `sem_responsavel` → badge amarelo
- Restam `< 24 h` → vermelho; `< 8 h` → vermelho + bold
**Drawer lateral** (clique na linha) com os 25 campos agrupados em: Identificação · Workflow · Pessoas · Datas · Volume de produção · Financeiro
Formatação: datas `DD/MM/AAAA` · dinheiro `R$ X,XX` · duração `HH:MM`
---
### 6 · Novos Gráficos
Ambos respondem aos filtros.
- **Carga por pessoa** — barras horizontais agrupadas Responsável × Executor, top 15
- **Distribuição por Fluxo** — barras horizontais segmentadas por Situação
---
### 7 · Busca Global + Exportação
**Busca** (ícone `Search`): parcial, case-insensitive em tarefa, workspace, responsável, executor, etapa e tags. Limpar via `Esc` ou botão `×`.
**Exportar** (ícone `Download`): apenas itens filtrados · 25 colunas + derivados · nome `tarefas-export-AAAA-MM-DD.csv` · UTF-8 BOM + separador `;`
---
### 8 · Polimento
- Estado vazio com botão "Limpar filtros"
- Skeleton loading em KPIs e gráficos
- Paleta semântica: verde = positivo · vermelho = atraso/erro · amarelo = atenção · azul = padrão · cinza = neutro
- Tooltips em KPIs e badges
- Atalhos de teclado: `/` → foco na busca · `Esc` → limpar busca · `1`/`2`/`3` → trocar visualização
02. Dashboard de Projetos
Arquivo: public/data/projetos.csv (29 colunas) · Origem: menu Projetos no eKyte
Particularidades: padrão limpo, sem armadilhas conhecidas.
Prompt
Adicionar página **Projetos** em `/projetos`, consumindo `public/data/projetos.csv` via `src/lib/ekyteParser.ts`. Manter identidade visual idêntica ao dashboard de Tarefas (grid de KPIs, tipografia, cores semânticas, filtros sticky, drawer lateral).
---
## Fase 1 — Parser
CSV com 29 colunas agrupadas em: Identificação, Datas, Situação/Planejamento, Volumes de tarefas e horas, Financeiro e Indicadores.
Parsing:
- Durações → `parseEkyteDuration`
- Monetários → `parseEkyteMoney`
- Percentuais → número decimal consistente
Campos derivados (com proteção a divisão por zero):
- `saldo_financeiro` = Valor realizado − Despesas realizadas
- `tem_atraso` = Tarefas atrasadas > 0
- `progresso_tarefas` = Realizadas / Previstas
- `progresso_horas` = Horas realizadas / Horas previstas
- `dias_para_conclusao` = Conclusão prevista − hoje
---
## Fase 2 — KPIs
4 cards no topo, mesmo padrão visual de Tarefas:
|#|Título|Cálculo|Ícone|Cor|
|---|---|---|---|---|
|1|Total de projetos|count filtrado|`FolderKanban`|azul|
|2|Ativos vs Pausados|X ativos · Y pausados|`Activity`|verde/amarelo|
|3|Tarefas atrasadas|soma de atrasadas|`AlertTriangle`|vermelho se > 0|
|4|Saldo financeiro|soma de `saldo_financeiro`|`DollarSign`|verde/vermelho; tooltip explicativo|
---
## Fase 3 — Filtros Sticky
- Workspace (multi-select)
- Situação (Ativo / Pausado / Concluído / Cancelado)
- Responsável (multi-select + search)
- Planejado (Todos / Planejado / Não planejado)
- Período de Início e de Conclusão prevista
- Faixa de Valor previsto (slider)
- Toggle "Apenas com atraso"
- Botão **Limpar filtros**
---
## Fase 4 — Gráficos (grid 2×2)
1. **Top projetos por tarefas** — barras horizontais empilhadas (realizadas verde · pendentes cinza)
2. **Top projetos por valor** — barras agrupadas (previsto azul · realizado verde · despesas vermelho)
3. **Distribuição por situação** — donut (ativo verde · pausado amarelo · concluído cinza · cancelado vermelho)
4. **Margem realizada vs prevista** — scatter (X = prevista, Y = realizada, diagonal y = x, pontos por situação, tooltip com nome)
---
## Fase 5 — Timeline
Gantt com top 20 projetos por valor previsto:
- Eixo X: menor Início → maior Conclusão prevista
- Eixo Y: projetos
- Barras coloridas por situação; hover mostra nome, datas e progresso
- Marcador vertical "hoje"
---
## Fase 6 — Tabela
Colunas: `Projeto | Workspace | Responsável | Início | Conclusão prevista | Situação | Evolução tarefas | Evolução horas | Valor realizado | Saldo`
Comportamentos:
- Atraso > 0 → fundo vermelho-claro + `AlertTriangle`
- Concluído → texto acinzentado
- Barras de progresso: verde ≥ 80% · amarelo 40–79% · vermelho < 40%
- Saldo: verde/vermelho
- Ordenação clicável; padrão Início DESC
- Paginação de 25 linhas
---
## Fase 7 — Drawer de Detalhes
Ao clicar em linha, drawer lateral com os 29 campos em grupos: Identificação · Datas · Status · Tarefas · Horas · Financeiro.
Formatação: datas DD/MM/AAAA · moeda R$ X,XX · duração HH:MM · percentuais %.
Mini-gráfico horizontal Realizado vs Previsto para tarefas e horas.
---
## Fase 8 — Search, Exportação e Polimento
**Search global** — busca parcial case-insensitive em Projeto, Workspace, Responsável e Tags. Limpar via `Esc` ou botão X. Atalho `/` para focar.
**Exportar CSV** — dados filtrados + campos derivados, UTF-8 BOM, separador `;`, nome `projetos-export-AAAA-MM-DD.csv`.
**Polimento** — estados vazios, loading skeletons, tooltips e cores semânticas consistentes.Esta página foi útil?