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?