diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 0c3ddd5..c46d5e5 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -46,7 +46,9 @@
       "Bash(where jq *)",
       "Bash(powershell -NonInteractive -Command ' *)",
       "Bash(powershell -NonInteractive -Command \"Get-Content '.claude/settings.json' | ConvertFrom-Json | ConvertTo-Json -Depth 10\")",
-      "Bash(node -e \"const rw = require\\('react-window'\\); console.log\\(Object.keys\\(rw\\)\\)\")"
+      "Bash(node -e \"const rw = require\\('react-window'\\); console.log\\(Object.keys\\(rw\\)\\)\")",
+      "Bash(git log *)",
+      "Bash(Get-Content .env.example)"
     ]
   },
   "hooks": {
diff --git a/CLAUDE.md b/CLAUDE.md
index 42eeee9..7b2bff8 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -14,14 +14,16 @@ npm run lint      # ESLint
 
 ## Modelo de Dados
 
-**Task:** `id, title, clickupLink?, assignee, status ('backlog'|'em andamento'|'bloqueado'|'concluído'), phases {design,approval,dev,qa} cada com {start,end} YYYY-MM-DD, createdAt`
+**Task:** `id, title, clickupLink?, status {blocked, blockedAt?}, subtasks: Subtask[], createdAt, concludedAt?, concludedBy?, clientId?`
+
+**Subtask:** `id, title (livre, obrigatório), status (SubtaskStatus), start (YYYY-MM-DD), end (YYYY-MM-DD), assignees (member ids), active, order` — substitui o antigo `Step`. Tabela: `task_subtasks` + `subtask_assignees`.
+
+**SubtaskStatus (enum):** `analise-ux` | `analise-dev` | `design` | `aprovacao-design` | `desenvolvimento` | `homologacao` | `qa` | `publicacao` — controla a cor/ícone da subtask nas views; o título é livre.
 
 **Member:** `id, name, role ('Designer'|'Developer'), avatar (iniciais), avatar_url?, email?, auth_user_id?, access_role ('admin'|'user'), is_active?, created_at?, deactivated_at?`
 
 **UserPreferences:** `id, user_id (fk → members.id), theme ('light'|'dark'|'system'), language ('pt-BR'|'en'), notifications_enabled, default_view ('home'|'calendar'|'timeline'|'list'), client_order (text[]), notification_step_overdue (bool, def true), notification_task_stalled (bool, def true), notification_member_overloaded (bool, def true), stalled_days_threshold (int 1–30, def 5), overload_threshold (int 1–20, def 3), created_at, updated_at`
 
-**Fases:** Design (5d, violeta) → Approval (3d, laranja) → Dev (7d, azul) → QA (3d, esmeralda). Cascata automática.
-
 ## Branding
 
 - **Nome:** Run/Way
diff --git a/docs/components/task-modal.md b/docs/components/task-modal.md
index d14a02a..869186b 100644
--- a/docs/components/task-modal.md
+++ b/docs/components/task-modal.md
@@ -2,18 +2,44 @@
 
 **Ficheiro:** `src/components/TaskModal.tsx`
 
-## Cascata de Fases
-Ao alterar o **início** de uma fase, a duração é preservada e fases seguintes avançam. Ao alterar o **fim**, fases seguintes arrastam (cascata bidirecional).
+## Responsabilidade
 
-### Restrições (garantidas após cada alteração)
-- `approval.start` >= `nextBusinessDay(design.end)`
-- `dev.start` >= `nextBusinessDay(approval.end)`
-- `qa.start` >= `nextBusinessDay(dev.end)`
+Modal de criação e edição de demandas. Gere o formulário de subtasks de forma dinâmica (N subtasks livres, sem lista fixa de 8 tipos).
+
+## Subtasks
+
+Cada subtask tem:
+- **title** (obrigatório) — nome livre dado pelo usuário
+- **status** (`SubtaskStatus`) — controla cor/ícone; dropdown com os 8 valores de `STEP_TYPES_ORDER`
+- **progressStatus** (`SubtaskProgressStatus`) — andamento operacional: A fazer, Pronta, Em andamento, Em revisão, Aguardando, Bloqueada, Precisa de ajustes, Pausada, Concluída ou Cancelada
+- **start / end** — datas obrigatórias quando subtask existe
+- **assignees** — opcional; toggle por membro
+- Botão de remover por subtask
+- Botão "+ Adicionar subtask" no rodapé da lista
+
+Nova demanda começa **sem subtasks**. O usuário adiciona livremente.
 
 ## Validação
+
 - `title`: mín. 3 caracteres
-- `clickupLink`: opcional, deve começar com `http`
+- `clickupLink`: opcional, deve ser URL válida (`https://...`)
+- Pelo menos 1 subtask com `title` preenchido e datas `start`/`end` válidas (`end >= start`)
+
+## Confirmação de fim de semana / feriado
+
+Se alguma subtask tiver datas em fim de semana ou feriado, exibe `ConfirmModal` com 3 opções:
+- Salvar mesmo assim
+- Prolongar para próximo dia útil (via `nextNonHolidayBusinessDay`)
+- Cancelar
+
+## Lógica de estado
+
+O estado interno usa `SubtaskDraft` (Subtask + `_tempId` para identificação local antes de persistir). Subtasks novas têm `id: ''`; subtasks existentes mantêm o `id` do banco — o `updateTask` do CRUD diferencia novas (INSERT) de existentes (UPDATE/DELETE) por este campo.
+
+## Dirty detection / submit
+
+`useFormState` rastreia `isDirty` comparando snapshot inicial vs estado atual. Botão "Salvar" desabilitado enquanto `!isDirty || submitting`.
 
 ## Apagar Demanda
-- Botão "Apagar" no footer (só visível ao editar)
-- Confirmação via `confirm()` antes de eliminar
+
+Botão "Apagar" no footer (só visível ao editar). Delega para prop `onDelete`.
diff --git a/docs/components/ui.md b/docs/components/ui.md
index a0b7088..f7267a7 100644
--- a/docs/components/ui.md
+++ b/docs/components/ui.md
@@ -14,4 +14,30 @@ Wrapper sobre `<label>` com `text-sm font-medium text-slate-700` + `peer-disable
 ## Badge
 Variants: `default` (cinza), `design` (azul), `approval` (amarelo), `dev` (roxo), `qa` (verde).
 
+## Tabs
+Wrapper sobre Radix `TabsPrimitive`. Exports: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`.
+
+`TabsList` e `TabsTrigger` aceitam prop `variant`:
+- `default` — fundo `bg-muted`, trigger com sombra quando ativo
+- `underline` — borda inferior; trigger com `border-b-2` + hover suave no inativo
+- `pills` — trigger com `bg-primary` quando ativo
+
+`TabsTrigger` sempre tem `cursor-pointer` na base.
+
+## ViewTabs
+Componente leve **sem Radix** para grupos de botões estilo tab (`src/components/ui/ViewTabs.tsx`).
+
+```tsx
+import { ViewTabs, type ViewTab } from '@/components/ui/ViewTabs'
+
+const TABS: readonly ViewTab<string>[] = [
+  { value: 'a', label: 'A' },
+  { value: 'b', label: 'B' },
+]
+
+<ViewTabs tabs={TABS} value={active} onChange={setActive} />
+```
+
+Usar quando o conteúdo a alternar **não precisa** de acessibilidade de tabs do Radix (ex: filtros rápidos inline). Para navegação de views principais, preferir `Tabs` + Radix.
+
 **Regra:** Não criar novos componentes UI para uso único — usar Tailwind diretamente.
diff --git a/docs/decisions.md b/docs/decisions.md
index dd6a06d..1066925 100644
--- a/docs/decisions.md
+++ b/docs/decisions.md
@@ -163,3 +163,30 @@ Registro de decisões arquiteturais significativas do projeto Run/Way.
 **Decisão:** a `AdminView` passa a ser acessada via `/:clientSlug/admin` em vez de `/admin` (rota global sem slug); `admin` foi removido de `GLOBAL_ROUTES` em `useAppNavigation`; a regra em `accessControl.ts` passou a ter `requiresClient: true`
 **Racional:** admin gerencia dados (clientes, membros, notificações) que pertencem a uma empresa específica; ter o `clientSlug` na URL mantém consistência com o restante da aplicação, permite deep links contextuais e prepara a estrutura para um futuro multi-tenant onde cada empresa terá seu próprio escopo de admin
 **Consequências:** a URL `/admin` deixa de existir (redireciona para `/` via wildcard); é necessário ter um cliente selecionado para acessar admin; `isGlobalView` em `App.tsx` não inclui mais `"admin"`, logo admin usa o `AppLayout` normal com sidebar
+
+---
+
+## ADR-019: Steps → Subtasks (modelo flexível por demanda)
+
+**Status:** Aceito (Mai 2026)
+**Decisão:** o modelo de `Step` (8 tipos fixos por task, identidade = tipo) foi substituído por `Subtask` (N subtasks livres por task, identidade = `id`, tipo expresso como campo `status`). Tabelas: `task_subtasks` + `subtask_assignees` (substituem `task_steps` + `step_assignees`). Tipo domínio: `Subtask` com campos `id, title, status: SubtaskStatus, start, end, assignees, active, order`. `StepType` passou a ser alias de `SubtaskStatus` para compatibilidade temporária.
+**Racional:** o modelo fixo de 8 steps impedia nomear etapas de forma contextual (ex: "Homepage — Design" vs "Design"); uma demanda pode ter múltiplas subtasks do mesmo tipo em paralelo; a flexibilidade de N subtasks livres é mais adequada a diferentes tipos de projeto
+**Consequências:** nova task nasce sem subtasks — usuário adiciona livremente via TaskModal; dados existentes migrados automaticamente (`title = type`, `status = type`); `Planning View` exibe a demanda em todos os grupos onde tiver subtask ativa (não apenas o grupo "atual"); drag/drop no Calendar e Timeline indexado por `subtaskId` em vez de `stepType`; `task_steps` e `step_assignees` mantidas no banco para rollback até uma migration de drop futura
+
+---
+
+## ADR-020: Prioridade manual das demandas-pai
+
+**Status:** Aceito (Mai 2026)
+**Decisão:** demandas têm `priority_order` persistido na tabela `tasks`; a subview `Demandas` ordena por esse campo e permite reordenar linhas-pai via drag-and-drop quando não há filtros ativos.
+**Racional:** prioridade manual é uma decisão de planejamento da lista, não derivada apenas do prazo da subtask ativa; persistir a ordem no banco garante consistência entre sessões e usuários.
+**Consequências:** novas demandas entram no fim da fila do cliente; reordenação aplica update otimista no cache TanStack Query e grava os novos índices no Supabase; filtros desativam o drag para evitar gravar uma ordem parcial acidental.
+
+---
+
+## ADR-021: Status de andamento separado da etapa da subtask
+
+**Status:** Aceito (Mai 2026)
+**Decisão:** `task_subtasks` passa a ter `progress_status`, separado de `status` (que continua representando a etapa/tipo: Design, QA, Publicação etc.). O domínio expõe `Subtask.progressStatus` com os valores `todo`, `ready`, `in-progress`, `in-review`, `waiting`, `blocked`, `needs-changes`, `paused`, `done` e `canceled`.
+**Racional:** o campo `status` já era usado como categoria visual e filtro de etapa; reaproveitá-lo para andamento quebraria calendário, timeline e legenda. Separar andamento permite gerir subtasks esquecidas, bloqueadas ou concluídas sem perder a fase de entrega.
+**Consequências:** a tabela de demandas ganhou uma coluna "Status" com popover de edição inline; o modal de demanda também salva o andamento; o progresso da demanda agora considera subtasks `done` e ignora subtasks `canceled`.
diff --git a/docs/hooks/supabase.md b/docs/hooks/supabase.md
index 68601f4..2ca54ec 100644
--- a/docs/hooks/supabase.md
+++ b/docs/hooks/supabase.md
@@ -9,11 +9,11 @@ Hook de **mutations apenas**. Não armazena estado — após cada operação usa
 
 ## Funções
 
-- `createTask(data)` — insere tarefa + steps + assignees; invalida a query `['tasks', ...]` no fim
+- `createTask(data)` — insere tarefa + subtasks + assignees; invalida a query `['tasks', ...]` no fim
 - `updateTask(data)` — update otimista no cache do TanStack Query, depois persiste no DB; reverte em caso de erro
 - `deleteTask(id)` — remove do DB e atualiza o cache local sem re-fetch
 
-As três funções são envolvidas por `useThrottledMutation` (500ms) antes de serem expostas. Chamadas mais rápidas que o intervalo são rejeitadas com toast de aviso e retornam `false`.
+`createTask` e `deleteTask` são envolvidas por `useThrottledMutation` (500ms) antes de serem expostas — chamadas mais rápidas que o intervalo são rejeitadas com toast de aviso e retornam `false`. `updateTask` é exposto sem throttle, pois é chamado de forma intencional (drag-and-drop, edição inline).
 
 ## Rate Limiting (client-side)
 
@@ -28,28 +28,41 @@ Aplicado em: `useSupabase` (500ms), `useTaskQuickActions` (500ms), `useUserClien
 
 `useTaskQuickActions` (`src/hooks/useTaskQuickActions.ts`) centraliza os toggles rápidos de bloqueio e conclusão, usados por `ListView` e `TasksView` — elimina código duplicado e garante throttle consistente.
 
+`useSubtaskQuickEdit` (`src/hooks/tasks/useSubtaskQuickEdit.ts`) — mutations granulares de subtask sem passar pela modal. Expõe:
+- `updateSubtaskAssignees(task, subtaskId, assignees[])` — diff de adds/removes em `subtask_assignees` com update otimista no cache
+- `updateSubtaskDates(task, subtaskId, start, end)` — UPDATE direto em `task_subtasks.start_date / end_date` com update otimista no cache
+- `updateSubtaskProgressStatus(task, subtaskId, progressStatus)` — UPDATE direto em `task_subtasks.progress_status` com update otimista no cache
+
+Usado por `PlanningView` (subview `demandas`) para alimentar os popovers inline de `TaskTable`.
+
 ## Update otimista (`updateTask`)
 
 ```
 1. Snapshot de cachedTasks via queryClient.getQueryData
 2. queryClient.setQueryData → aplica alteração localmente (UI actualiza imediatamente)
 3. useTaskStore.applyOptimisticUpdate → sincroniza o store local (para rollback via clearOptimistic)
-4. Persiste no DB (tasks + steps + assignees)
+4. Persiste no DB (tasks + subtasks + assignees)
 5. Se erro → queryClient.setQueryData(prev) + useTaskStore.clearOptimistic()
 ```
 
-## Steps (`upsertSteps`)
+## Subtasks (`createAllSubtasks` + diff em `updateTask`)
+
+`createAllSubtasks` — função privada chamada em `createTask` e em `updateTask` (para subtasks novas):
+- INSERT em `task_subtasks` (todas de uma vez), indexadas por `subtask_order` para associar IDs de volta
+- INSERT em `subtask_assignees` para assignees não vazias
 
-Função privada que faz insert/update de cada step e compara diff de assignees:
-- Step existente: UPDATE em `task_steps` apenas se mudou
-- Assignees adicionados: INSERT em `step_assignees`
-- Assignees removidos: DELETE em `step_assignees`
+`updateTask` faz diff por `subtask.id`:
+- Subtasks com `id = ''` → novas → `createAllSubtasks`
+- IDs presentes no prev mas ausentes no next → DELETE em `task_subtasks`
+- IDs presentes em ambos → compara campos → UPDATE se mudou
+- Assignees diff por subtask: INSERT/DELETE em `subtask_assignees`
 
 ## Tabelas Supabase
 
 - `tasks` — dados da tarefa
-- `task_steps` — fases/steps da tarefa
-- `step_assignees` — relação step ↔ member
+- `task_subtasks` — subtasks da tarefa (substitui `task_steps`)
+- `subtask_assignees` — relação subtask ↔ member (substitui `step_assignees`)
+- `task_steps` / `step_assignees` — mantidas temporariamente para rollback (migration drop pendente)
 
 ## Estado
 
diff --git a/docs/todo/melhorias.md b/docs/todo/melhorias.md
index 797a6d3..0a2930b 100644
--- a/docs/todo/melhorias.md
+++ b/docs/todo/melhorias.md
@@ -23,7 +23,7 @@ Todos implementados com `memo` e comparador customizado. Callbacks excluídos do
 |---|---|
 | `NotificationBell` | `unreadCount`, `notifications.length`, `selectedClientId` |
 | `WeekRow` | `tasks` (ref + length), `week[0]`, `currentMonth`, `viewMode`, `weekIndex`, `dragPreview`, `holidays.length` |
-| `StepBar` | `bar.{taskId,stepType,startCol,endCol,slot}`, `task.{concludedAt,status.blocked}`, `isFirst/LastBarOfStep`, `viewMode`, `demandColor`, `dragPreview` |
+| `StepBar` | `bar.{taskId,subtaskId,startCol,endCol,slot}`, `task.{concludedAt,status.blocked}`, `isFirst/LastBarOfStep`, `viewMode`, `demandColor`, `dragPreview` |
 | `PhaseBar` | `step.{type,start,end}`, `task.{id,concludedAt,status.blocked}`, `days.length`, `dragPreview` |
 | `MemberCard` | `member.id`, `tasks` (ref + length), `today` |
 | `TaskRow` | `task.{id,status.blocked,concludedAt}`, `stepType`, `members.length` |
diff --git a/docs/todo/upsert-steps.md b/docs/todo/upsert-steps.md
index f11b695..75ccedd 100644
--- a/docs/todo/upsert-steps.md
+++ b/docs/todo/upsert-steps.md
@@ -1,181 +1,13 @@
-# TODO: Substituir delete+insert de steps por upsert
+# ✅ RESOLVIDO — Migração Steps → Subtasks (Mai 2026)
 
-## Problema
+Este TODO foi resolvido pela migração completa de `Step` para `Subtask` (ADR-019).
 
-Em `updateTask` ([src/hooks/useSupabase.ts:248](../src/hooks/useSupabase.ts#L248)), o fluxo atual é:
-1. DELETE todos os `task_steps` da tarefa
-2. INSERT todos os steps novamente
+O `updateTask` em `src/hooks/infra/useSupabase.ts` agora faz diff por `subtask.id`:
+- Subtasks novas (`id = ''`) → INSERT via `createAllSubtasks`
+- IDs removidos → DELETE em `task_subtasks`
+- IDs existentes alterados → UPDATE campo a campo
+- Assignees: INSERT/DELETE diff por subtask
 
-Isso gera IDs novos a cada save, pode causar race conditions e não é idempotente.
+O dirty detection e proteção contra overclick também foram implementados via `useFormState`.
 
-## Solução
-
-### 1. Garantir que `step.id` é preservado no frontend
-- Ao editar uma tarefa, o `id` dos steps existentes deve fluir do estado para o save (não resetar).
-- Novos steps (adicionados pelo utilizador) devem ter `id = ''` ou `undefined` para serem detectados como INSERT.
-
-### 2. Substituir `insertSteps` por `upsertSteps`
-
-```ts
-// Em useSupabase.ts — substituir insertSteps por upsertSteps
-async function upsertSteps(taskId: string, steps: Step[]): Promise<boolean> {
-  for (const step of steps) {
-    const isNew = !step.id
-
-    let stepId: string
-
-    if (isNew) {
-      // INSERT
-      const { data, error } = await supabase
-        .from('task_steps')
-        .insert({
-          task_id: taskId,
-          type: step.type,
-          step_order: step.order,
-          active: step.active,
-          start_date: step.start || null,
-          end_date: step.end || null,
-        })
-        .select('id')
-        .single()
-      if (error || !data) return false
-      stepId = data.id
-    } else {
-      // UPDATE
-      const { error } = await supabase
-        .from('task_steps')
-        .update({
-          type: step.type,
-          step_order: step.order,
-          active: step.active,
-          start_date: step.start || null,
-          end_date: step.end || null,
-        })
-        .eq('id', step.id)
-      if (error) return false
-      stepId = step.id
-    }
-
-    // Upsert assignees: delete os antigos e reinsere (ou usar upsert com onConflict)
-    await supabase.from('step_assignees').delete().eq('step_id', stepId)
-    if (step.assignees.length > 0) {
-      const { error } = await supabase.from('step_assignees').insert(
-        step.assignees.map(mid => ({ step_id: stepId, member_id: mid }))
-      )
-      if (error) return false
-    }
-  }
-  return true
-}
-```
-
-### 3. Atualizar `updateTask`
-
-Remover as linhas:
-```ts
-// REMOVER — linhas 248-257 em useSupabase.ts
-const { error: deleteErr } = await supabase
-  .from('task_steps')
-  .delete()
-  .eq('task_id', taskData.id)
-```
-
-Substituir `insertSteps` por `upsertSteps` na linha 259.
-
-### 4. (Opcional) Steps removidos pelo utilizador
-
-Se o utilizador puder remover steps, é preciso detectar os IDs que deixaram de existir e fazer DELETE só deles:
-
-```ts
-const existingIds = taskData.steps.map(s => s.id).filter(Boolean)
-await supabase
-  .from('task_steps')
-  .delete()
-  .eq('task_id', taskData.id)
-  .not('id', 'in', `(${existingIds.join(',')})`)
-```
-
----
-
-## UX: Botão "Salvar" só habilitado se houver alteração + proteção contra overclick
-
-### Problema
-
-O botão de salvar do modal de edição está sempre habilitado, permitindo salves redundantes e cliques múltiplos enquanto o request está em curso.
-
-### Solução
-
-#### 1. Detectar se houve alteração (dirty state)
-
-No componente do modal, guardar um snapshot da tarefa original ao abrir:
-
-```ts
-const [original, setOriginal] = useState<Task | null>(null)
-const [isDirty, setIsDirty] = useState(false)
-
-// ao abrir o modal com uma tarefa existente:
-useEffect(() => {
-  if (task) setOriginal(JSON.parse(JSON.stringify(task)))
-}, [task?.id])
-
-// comparar a cada mudança no form:
-useEffect(() => {
-  if (!original) return
-  setIsDirty(JSON.stringify(formData) !== JSON.stringify(original))
-}, [formData, original])
-```
-
-> Para novas tarefas (`task === null`), `isDirty` deve ser `true` sempre (ou baseado em campos obrigatórios preenchidos).
-
-#### 2. Proteção contra overclick (submitting state)
-
-```ts
-const [submitting, setSubmitting] = useState(false)
-
-const handleSave = async () => {
-  if (submitting || !isDirty) return
-  setSubmitting(true)
-  try {
-    await updateTask(formData)  // ou createTask
-  } finally {
-    setSubmitting(false)
-  }
-}
-```
-
-#### 3. Botão desabilitado nas duas condições
-
-```tsx
-<Button
-  onClick={handleSave}
-  disabled={!isDirty || submitting}
->
-  {submitting ? 'A guardar…' : 'Salvar'}
-</Button>
-```
-
-### Comportamento esperado
-
-| Estado | Botão |
-|---|---|
-| Modal acabou de abrir (sem edição) | Desabilitado |
-| Utilizador alterou algum campo | Habilitado |
-| Clicou salvar (request em curso) | Desabilitado + texto "A guardar…" |
-| Request concluído | Fecha modal ou re-habilita conforme resultado |
-
-### Ficheiros a tocar (UX)
-
-- Componente do modal de task (TaskModal ou equivalente) — adicionar `original`, `isDirty`, `submitting`
-
----
-
-## Ficheiros a tocar
-
-- `src/hooks/useSupabase.ts` — substituir `insertSteps` + bloco delete em `updateTask`
-- `src/lib/steps.ts` — confirmar que `Step.id` é obrigatório e preservado
-- Componente de edição de task (TaskModal ou equivalente) — garantir que `step.id` não é limpo ao editar
-
-## Notas
-
-- `step_assignees` não tem ID próprio exposto, por isso o delete+reinsert nos assignees por `step_id` é aceitável (não gera problema de IDs).
-- Apenas os `task_steps` é que devem mudar de delete+insert para update/insert.
+Ver: [ADR-019](../decisions.md#adr-019-steps--subtasks-modelo-flexível-por-demanda)
diff --git a/docs/utils/date-utils.md b/docs/utils/date-utils.md
index 790e17a..a5ae031 100644
--- a/docs/utils/date-utils.md
+++ b/docs/utils/date-utils.md
@@ -77,8 +77,34 @@ export const DEFAULT_DURATIONS = {
 
 ---
 
+---
+
+## `src/utils/holidayUtils.ts`
+
+Utilitários para feriados, usado no `TaskModal` e em hooks de drag-and-drop.
+
+### Tipo `Holiday`
+```ts
+type Holiday = { date: string; name: string }
+```
+
+### `isWeekendOrHoliday(date: string, holidays: Holiday[]): boolean`
+Retorna `true` se a data cair em sábado, domingo ou na lista de feriados.
+
+### `getHolidayName(date: string, holidays: Holiday[]): string | undefined`
+Retorna o nome do feriado ou `undefined` se não for feriado.
+
+### `nextNonHolidayBusinessDay(date: string, holidays: Holiday[]): string`
+Retorna a primeira data **a partir de `date` inclusive** que não seja fim de semana nem feriado. Avança dia a dia até encontrar um dia útil.
+
+> **Atenção:** a helper interna `toDateStr` usa `getFullYear/getMonth/getDate` (fuso local) em vez de `toISOString()` para evitar que a conversão UTC retorne um dia a menos em fusos negativos (ex: UTC-3 do Brasil). Não alterar para `toISOString()`.
+
+---
+
 ## Atenção: Timezone
 
 As funções criam `new Date(str)` internamente. No `DashboardView.tsx`, as datas são sempre parseadas com `new Date(str + 'T00:00:00')` para forçar hora local e evitar problemas de UTC vs. local.
 
 Ao adicionar novas funções que usem `new Date(dateString)`, usar sempre o sufixo `'T00:00:00'` para strings no formato `YYYY-MM-DD`.
+
+**Nunca usar `date.toISOString().split('T')[0]`** para obter a data no formato `YYYY-MM-DD` — em UTC-3 isso retorna o dia anterior. Usar sempre `getFullYear/getMonth/getDate`.
diff --git a/docs/views/planning.md b/docs/views/planning.md
index 5668bfa..093adeb 100644
--- a/docs/views/planning.md
+++ b/docs/views/planning.md
@@ -4,6 +4,12 @@
 
 `PlanningView` é o container de todas as visualizações de planejamento de demandas. Substitui a antiga `DashboardView` e absorveu a `TasksView` como subview `demandas`.
 
+**Arquitetura de filtros:** `PlanningView` gerencia dois conjuntos de filtros independentes, ambos como `FiltersState` local:
+- `demandasFilters` — filtros do subview `demandas`
+- `calendarFilters` — filtros dos subviews `calendar`, `timeline` e `kanban`
+
+Ambos são renderizados pelo `PlanningViewHeader` via `TasksFilters` (o componente de filtros unificado). `PlanningView` aplica `calendarFilters` sobre as tasks já processadas por `useTaskFilters` antes de passar `filteredTasks` para `CalendarView` e `TimelineView`. `CalendarView` e `TimelineView` não renderizam mais filtros internamente — recebem apenas tasks já filtradas. O estado de `viewMode` (step/demand) para o calendário ainda vive em `usePlanningFiltersStore`.
+
 Localização: `src/views/planning/`
 
 ## Navegação
@@ -15,26 +21,39 @@ A navegação entre modos é feita via **roteamento global** (`useUIStore`). Cad
 | `calendar` | Calendário mensal com drag-drop |
 | `timeline` | Gantt/linha do tempo |
 | `list` | Tabela de demandas (ListView) |
-| `demandas` | Lista de demandas agrupadas por etapa atual |
+| `demandas` | Tabela hierárquica de demandas com subtasks como linhas-filho |
+| `kanban` | Board Kanban com colunas de progressStatus e drag-drop nativo |
 
-`PlanningView` recebe `subview: 'calendar' | 'timeline' | 'list' | 'demandas'` e renderiza o modo correspondente.
+`PlanningView` recebe `subview: 'calendar' | 'timeline' | 'list' | 'demandas' | 'kanban'` e renderiza o modo correspondente. URL: `/:clientSlug/tasks/kanban`.
 
 ## Ficheiros
 
 | Ficheiro | Responsabilidade |
 |---|---|
-| `src/views/planning/PlanningView.tsx` | Orquestra dados, filtros e renderiza a subview correta |
-| `src/views/planning/hooks/useTaskFilters.ts` | Filtros de assignee, status, steps, período para calendar/timeline |
-| `src/views/planning/components/FilterBar.tsx` | Barra de filtros usada por calendar e timeline |
+| `src/views/planning/PlanningView.tsx` | Orquestra dados globais (tasks, members, holidays), aplica filtros via `useTaskFilters` e passa `filteredTasks`, `members`, `onOpenNew` e `onExport` para `CalendarView` e `TimelineView` via prop |
+| `src/views/planning/components/PlanningViewHeader.tsx` | Header compartilhado: tabs de navegação, título/descrição da view e `TasksFilters` para todos os subviews (`demandas`, `calendar`, `timeline`, `kanban`). Recebe `demandasFilters` e `calendarFilters` como props separados. |
+| `src/views/kanban/KanbanView.tsx` | Board Kanban com até 10 colunas cobrindo todos os valores de `SubtaskProgressStatus` (`todo`, `ready`, `in-progress`, `in-review`, `waiting`, `blocked`, `needs-changes`, `paused`, `done`, `canceled`); exibe apenas as 4 padrão + colunas que tiverem cards; demandas mãe concluídas (`concludedAt` preenchido) são excluídas; cards draggáveis com dot colorido por `STEP_META`, badge de prazo, avatares e indicador de bloqueio; ao mover um card chama `onUpdateTask` com `progressStatus` atualizado. |
+| `src/store/usePlanningFiltersStore.ts` | Store Zustand com estado de `viewMode` (step/demand) e filtros legados lidos por `useTaskFilters` |
+| `src/views/planning/hooks/useTaskFilters.ts` | Lê filtros de `usePlanningFiltersStore` e aplica sobre as tasks; expõe `filteredTasks`, contadores e helpers |
+| `src/views/planning/components/FilterBar.tsx` | Barra de filtros legada — não mais usada por `CalendarView` ou `TimelineView` |
 | `src/views/planning/components/MetricsBar.tsx` | Cards de métricas (saúde operacional, em andamento, bloqueadas) |
 | `src/views/planning/components/StepsLegend.tsx` | Legenda de cores das fases |
-| `src/views/planning/components/TasksFilters.tsx` | Barra de filtros do subview `demandas` (busca, etapa, responsável, período, bloqueadas) |
-| `src/views/planning/components/StepGroup.tsx` | Grupo colapsável de tasks por etapa (usado em `demandas`) |
-| `src/views/planning/components/TaskRow.tsx` | Linha de uma demanda no subview `demandas` |
+| `src/views/planning/components/TasksFilters.tsx` | Barra de filtros do subview `demandas` (busca, status de subtask, responsável com avatares, período, bloqueadas, concluídas) |
+| `src/views/planning/components/TaskTable.tsx` | Componente raiz da tabela — itera tasks e delega para `TaskTableRow` |
+| `src/views/planning/components/TaskTableRow.tsx` | Linha-pai colapsável de uma task com progresso, prazo, avatares e painel de subtasks |
+| `src/views/planning/components/SubtaskRow.tsx` | Linha-filho de uma subtask com ícone de status, badge de etapa, popover de andamento, `DatesPopover` e `AssigneesPopover` |
+| `src/views/planning/components/MemberAvatars.tsx` | Avatares empilhados de membros (tamanhos `sm`/`xs`); placeholder `?` quando sem responsável |
+| `src/views/planning/components/AssigneesPopover.tsx` | Popover de atribuição de responsáveis — renderizado via `createPortal` no `document.body` |
+| `src/views/planning/components/DatesPopover.tsx` | Popover de edição de período (start/end) — renderizado via `createPortal` no `document.body` |
+| `src/views/planning/components/SubtaskProgressStatusPopover.tsx` | Popover de edição do andamento da subtask (`progressStatus`) |
+| `src/views/planning/components/usePopover.ts` | Hook de controle de popover: open/close, posicionamento via `getBoundingClientRect`, fechar ao clicar fora ou `Escape` |
+| `src/views/planning/components/StepGroup.tsx` | **Legado** — grupo colapsável por etapa (substituído por `TaskTable`) |
+| `src/views/planning/components/TaskRow.tsx` | **Legado** — linha de demanda no modo "Por etapa" (substituído por `TaskTable`) |
+| `src/views/planning/components/TaskList.tsx` | **Legado** — lista de demandas com subtasks expandidas (substituído por `TaskTable`) |
 | `src/views/planning/components/ActionMenu.tsx` | Dropdown de ações rápidas (abrir, ClickUp, concluir, bloquear) |
 | `src/views/planning/utils.ts` | `formatDueDate` — badge de prazo relativo |
-| `src/views/CalendarView.tsx` | Calendário mensal com drag-drop e slots |
-| `src/views/timeline/TimelineView.tsx` | Timeline/Gantt — componente raiz |
+| `src/views/calendar/CalendarView.tsx` | Calendário mensal — recebe `tasks` (já filtradas) via prop; renderiza apenas header de navegação de mês + grade de semanas. Sem filtros internos. Props: `tasks`, `onEdit`, `onUpdateTask`, `holidays` |
+| `src/views/timeline/TimelineView.tsx` | Timeline/Gantt — recebe `tasks` (já filtradas) via prop; sem filtros internos. Props: `tasks`, `members`, `onEdit`, `onDelete`, `onUpdateTask`, `holidays` |
 | `src/views/timeline/components/TimelineHeader.tsx` | Selector de range (14/30/60/90d) |
 | `src/views/timeline/components/DayColumnHeaders.tsx` | Header de colunas de dias (mês + dia + feriados) |
 | `src/views/timeline/components/TaskCalendarRows.tsx` | Linhas de fases no calendário por tarefa |
@@ -48,45 +67,88 @@ A navegação entre modos é feita via **roteamento global** (`useUIStore`). Cad
 
 ## Subview: Demandas
 
-Lista todas as demandas agrupadas pela **etapa atual** (step ativo). Focada em acompanhamento operacional.
+Lista todas as demandas em **tabela hierárquica** estilo ClickUp. Não há mais toggle de modo — um único layout unifica a visão por task e por subtask.
+
+### TaskTable
+Componente principal do subview `demandas`. Cada **task** é uma linha-pai colapsável; cada **subtask** é uma linha-filho exibida quando a task está expandida.
+
+**Linha da task (pai):**
+- Borda lateral colorida pela fase ativa (ou vermelha se bloqueada)
+- Botão `▾`/`▸` para expandir/colapsar subtasks
+- Título clicável (`onEdit`) com risco se bloqueada ou concluída
+- Badges "Bloqueada" e "Concluída"
+- Ícone `Link2` inline para ClickUp
+- **Barra de progresso** (visível em `md+`): percentual de subtasks concluídas; verde em 100%, cor primária caso contrário
+- Contador de etapas, badge de prazo (da subtask ativa), avatares de todos os responsáveis
+- `ActionMenu` com `stopPropagation`
+
+**Painel expandido das subtasks:** header interno alinhado ao grid + linha vertical da árvore (`absolute left-[18px]`) com traço horizontal em cada subtask. Grid fixo `grid-cols-[180px_150px_1fr_110px_90px_auto]`.
+
+| Coluna | Conteúdo |
+|---|---|
+| Etapa | Ícone de status contextual + pill colorida com `STEP_META.label` |
+| Status | Pill clicável com `Subtask.progressStatus`; abre popover para alterar andamento inline |
+| Título | Texto livre da subtask (`subtask.title`) |
+| Período | `DD/MM → DD/MM` em `font-mono` — clicável; abre `DatesPopover` para editar start/end inline |
+| Prazo | Badge `formatDueDate` — exibido para **todas** as subtasks; `—` quando sem data |
+| Resp. | Avatares dos responsáveis; botão `+` dashed quando sem responsável — clicável; abre `AssigneesPopover` para atribuir/remover membros inline |
+
+**Ícones de status da subtask (`SubtaskStatusIcon`):**
+
+| Estado | Ícone |
+|---|---|
+| Concluída (task) | `CheckCircle2` verde |
+| Ativa + bloqueada | `AlertTriangle` laranja |
+| Ativa + atrasada | `AlertCircle` vermelho |
+| Ativa normal | `PlayCircle` azul |
+| Pendente | `Circle` pequeno em muted |
+
+**Edição inline de subtasks:**
 
-### StepGroup
-Agrupa tasks por `StepType`. Colapsa/expande via `ChevronDown`/`ChevronRight`.
+`AssigneesPopover` — abre ao clicar no avatar ou no botão `+` da coluna Resp. Lista todos os membros com toggle (checkbox visual). Persiste via `useSubtaskQuickEdit.updateSubtaskAssignees` — diff de adds/removes direto em `subtask_assignees`. Update otimista no cache TanStack Query.
 
-Recebe `hasActiveFilters?: boolean`. Comportamento por estado:
-- **Com tasks:** expansível normalmente, cabeçalho com contador colorido
-- **Vazio + filtros ativos:** cabeçalho apagado (contador `0`), mensagem de filtro em itálico
-- **Vazio sem filtros:** renderizado normalmente com contador `0`
+`DatesPopover` — abre ao clicar no período da coluna Período. Dois `<input type="date">` (início/fim) com botões Cancelar/Salvar. Persiste via `useSubtaskQuickEdit.updateSubtaskDates` — UPDATE direto em `task_subtasks`. Fecha ao salvar com sucesso.
 
-**Virtualização (`react-window`):** quando um grupo tem mais de 50 tasks, usa `FixedSizeList` (altura de item `52px`, altura máxima `600px`). Abaixo do threshold usa `.map()` normal.
+`SubtaskProgressStatusPopover` — abre ao clicar no pill da coluna Status. Valores: A fazer, Pronta, Em andamento, Em revisão, Aguardando, Bloqueada, Precisa de ajustes, Pausada, Concluída, Cancelada. Persiste via `useSubtaskQuickEdit.updateSubtaskProgressStatus` — UPDATE direto em `task_subtasks.progress_status`. Fecha ao salvar com sucesso.
 
-### TaskRow
-Linha de uma demanda. A div inteira é clicável (`onEdit`) — `ActionMenu` tem `stopPropagation`.
+Os popovers fecham ao clicar fora ou pressionar `Escape` (hook `usePopover`). Renderizam via `createPortal` no `document.body` com `z-index: 9999` e posicionamento calculado por `getBoundingClientRect + scrollY/scrollX` — isso evita corte por `overflow:hidden` das rows da tabela. `PlanningView` instancia `useSubtaskQuickEdit` e passa `onUpdateSubtaskAssignees`, `onUpdateSubtaskDates` e `onUpdateSubtaskProgressStatus` para `TaskTable`.
 
-Exibe:
-- Título com risco (`line-through`) quando bloqueada
-- Ícone `Link2` inline para abrir o ClickUp diretamente
-- Badge "Bloqueada" (vermelho) — fundo da linha fica vermelho sutil
-- Badge "Concluída" (muted) — linha com opacidade reduzida
-- Badge de prazo dinâmico baseado no `end` do step ativo (`formatDueDate`)
-- Avatares dos responsáveis do step correspondente ao grupo
+**Comportamentos:**
+- Tasks expandidas por padrão quando há filtros ativos
+- Reordenação manual das linhas-pai por drag-and-drop quando não há filtros ativos; a ordem persiste em `tasks.priority_order`
+- Tasks bloqueadas: fundo vermelho sutil em task e subtasks
+- Tasks concluídas: opacidade reduzida, título riscado
+- Subtasks sem datas mostram `—` no campo Período
 
 ### TasksFilters
-Barra de filtros com `CheckboxDropdown` customizado para etapa e responsável. Filtros:
+Barra de filtros do subview `demandas`. Interface `FiltersState`:
 
-| Filtro | Implementação |
-|---|---|
-| Busca por texto/ID | `task.title` e `task.id` case-insensitive |
-| Etapa | `selectedSteps: StepType[]` — verifica `currentStep.type` |
-| Responsável | `selectedMemberIds: string[]` — qualquer assignee de qualquer step |
-| Período (prazo) | Tabs "Todos / 7d / 15d / 30d" — compara `currentStep.end` com `today + N dias` |
-| Bloqueadas | Toggle — filtra `task.status.blocked === true` |
+```ts
+{
+  searchTerm: string;
+  selectedSteps: SubtaskStatus[];           // categoria/fase
+  selectedProgressStatuses: SubtaskProgressStatus[]; // andamento
+  selectedMemberIds: string[];
+  selectedPeriod: string;
+  showOnlyBlocked: boolean;
+  showConcluded: boolean;
+}
+```
 
-### Ordenação dentro dos grupos
-Tasks ordenadas por `end` do step correspondente — da mais atrasada para a mais recente. Sem data ficam no final.
+| Filtro | Campo | Implementação |
+|---|---|---|
+| Busca por texto/ID | `searchTerm` | `task.title`, `task.id` e `subtask.title` case-insensitive |
+| Categoria | `selectedSteps: SubtaskStatus[]` | Dropdown — verifica `subtask.status` de **todas** as subtasks |
+| Status | `selectedProgressStatuses: SubtaskProgressStatus[]` | Dropdown — verifica `subtask.progressStatus` de **todas** as subtasks |
+| Responsável | `selectedMemberIds` | `MemberAvatarPicker` — botão exibe avatares empilhados dos selecionados |
+| Período (prazo) | `selectedPeriod` | Tabs "Todos / 7d / 15d / 30d" — compara `end` da subtask ativa com `today + N dias` |
+| Bloqueadas | `showOnlyBlocked` | Toggle — filtra `task.status.blocked === true` |
+| Concluídas | `showConcluded` | Toggle — mostra tarefas com `task.concludedAt` preenchido (default: ocultas) |
 
-### Agrupamento
-"Etapa atual" é `task.steps.find(s => s.active) ?? task.steps[0]`. Uma task aparece em **todas** as categorias cujos steps estão `active: true`. Com filtro por membro, aparece nos grupos de **todos os steps onde o membro está atribuído**.
+O botão **Nova Demanda** fica na row do título (alinhado à direita), não dentro da barra de filtros.
+
+### Ordenação dentro dos grupos
+Tasks ordenadas por `end` da subtask ativa no grupo — da mais atrasada para a mais recente. Sem data ficam no final.
 
 ## Subview: Calendar
 
diff --git a/docs/views/reports.md b/docs/views/reports.md
index b43f0f2..16d0c6e 100644
--- a/docs/views/reports.md
+++ b/docs/views/reports.md
@@ -48,7 +48,7 @@ Substituímos o foco exclusivo em "médias" por métricas estatísticas mais rob
 * **Interpretação:** Se a vazão média é de 20 tasks/semana, mas a *Timeline* prevê 40 entregas para a próxima semana, o atraso já é garantido matematicamente.
 
 ### D. Heatmap de Risco vs. Capacidade
-* **Fonte de Dados:** `members` x `tasks.steps` x `Lead Time` histórico.
+* **Fonte de Dados:** `members` x `tasks.subtasks` x `Lead Time` histórico.
 * **Visualização:** Matriz (Membros no Eixo Y, Tipos de Step no Eixo X). Cores de verde a vermelho baseadas no tempo médio que cada membro leva para cada tipo de task.
 * **Interpretação:** Identifica se um membro está aparentemente livre, mas alocado em uma atividade onde historicamente tem baixa performance (gargalo de senioridade).
 
diff --git a/package-lock.json b/package-lock.json
index cd8ebca..871c5f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "boneyard-js": "^1.6.7",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "framer-motion": "^12.38.0",
         "lucide-react": "^1.7.0",
         "radix-ui": "^1.4.3",
         "react": "^19.2.4",
@@ -520,7 +521,6 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
       "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -532,7 +532,6 @@
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
       "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -543,7 +542,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
       "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -869,7 +867,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
       "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2644,7 +2641,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2661,7 +2657,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2678,7 +2673,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2695,7 +2689,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2712,7 +2705,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2729,7 +2721,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2746,7 +2737,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2763,7 +2753,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2780,7 +2769,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2797,7 +2785,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2814,7 +2801,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2831,7 +2817,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2848,7 +2833,6 @@
       "cpu": [
         "wasm32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2867,7 +2851,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2884,7 +2867,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3386,7 +3368,6 @@
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
       "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -4925,11 +4906,37 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/framer-motion": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
+      "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.38.0",
+        "motion-utils": "^12.36.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -5241,7 +5248,7 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -5426,7 +5433,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5447,7 +5453,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5468,7 +5473,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5489,7 +5493,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5510,7 +5513,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5531,7 +5533,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5552,7 +5553,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5573,7 +5573,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5594,7 +5593,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5615,7 +5613,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5636,7 +5633,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -6396,6 +6392,21 @@
         "node": "*"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
+      "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.36.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.36.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz",
+      "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 6c20609..d4bae49 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "boneyard-js": "^1.6.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
     "lucide-react": "^1.7.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 27ee9d3..9a8c1b5 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -100,10 +100,10 @@ export function AppLayout(props: AppLayoutProps) {
           <AppSidebar />
 
           <main
-            key={view}
+            key={["calendar","timeline","list","demandas","kanban"].includes(view) ? "planning" : view}
             className={cn(
               "flex-1 overflow-auto animate-blur-fade-in",
-              view === "home" ? "p-0" : "px-4 sm:px-6 lg:px-8 py-8"
+              view === "home" ? "p-0" : "px-4 sm:px-6 lg:px-8 py-8",
             )}
           >
             <TooltipProvider>
diff --git a/src/components/AppModals.tsx b/src/components/AppModals.tsx
index 2b435d0..5525605 100644
--- a/src/components/AppModals.tsx
+++ b/src/components/AppModals.tsx
@@ -4,12 +4,13 @@ import { ClientTransitionOverlay } from "@/components/ClientTransitionOverlay";
 import type { Task } from "@/types/task";
 import type { Member } from "@/types/member";
 import type { Holiday } from "@/utils/holidayUtils";
+import type { TaskModalPayload } from "@/types/props";
 
 interface TaskModalState {
   isOpen: boolean;
   editingTask: Task | null;
   onClose: () => void;
-  onSave: (taskData: Omit<Task, "id" | "createdAt">) => Promise<void>;
+  onSave: (taskData: TaskModalPayload) => Promise<void>;
   onDelete: (id: string) => void;
 }
 
diff --git a/src/components/AppRouter.tsx b/src/components/AppRouter.tsx
index e255832..a09418d 100644
--- a/src/components/AppRouter.tsx
+++ b/src/components/AppRouter.tsx
@@ -22,10 +22,10 @@ function ViewSkeleton() {
   );
 }
 
-type PlanningSubview = "calendar" | "timeline" | "list" | "demandas";
+type PlanningSubview = "calendar" | "timeline" | "list" | "demandas" | "kanban";
 type ToolsSubview = Extract<ViewType, "tools-briefing-analyzer" | "tools-import" | "tools-export" | "tools-integrations">;
 
-const PLANNING_VIEWS = new Set<ViewType>(["calendar", "timeline", "list", "demandas"]);
+const PLANNING_VIEWS = new Set<ViewType>(["calendar", "timeline", "list", "demandas", "kanban"]);
 const TOOLS_VIEWS = new Set<ViewType>(["tools", "tools-briefing-analyzer", "tools-import", "tools-export", "tools-integrations"]);
 const REPORTS_VIEWS = new Set<ViewType>(["reports", "reports-fluxo", "reports-timeline", "reports-membros", "reports-alertas"]);
 
@@ -76,6 +76,7 @@ export function AppRouter() {
       {PLANNING_VIEWS.has(view) && (
         <PlanningView
           subview={view as PlanningSubview}
+          onViewChange={onViewChange}
           onEdit={onEditTask}
           onDelete={onDeleteTask}
           onUpdateTask={onUpdateTask}
diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index da1f503..019972f 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -47,16 +47,7 @@ interface NavItem {
 const NAV_ITEMS: NavItem[] = [
   { label: "Início", Icon: Home, view: "home" },
 
-  {
-    label: "Demandas",
-    Icon: ListChecks,
-    requiresClient: true,
-    children: [
-      { view: "demandas", label: "Todas Demandas" },
-      { view: "calendar", label: "Calendário" },
-      { view: "timeline", label: "Linha do Tempo" },
-    ],
-  },
+  { label: "Demandas", Icon: ListChecks, view: "demandas", requiresClient: true },
 
   { label: "Membros", Icon: Users, view: "members", requiresClient: true },
 
@@ -94,7 +85,6 @@ const NAV_ITEMS: NavItem[] = [
   },
 ]
 
-const CALENDAR_VIEWS: ViewType[] = ["calendar", "timeline", "list"]
 const TOOLS_VIEWS: ViewType[] = ["tools", "tools-briefing-analyzer", "tools-import", "tools-export", "tools-integrations"]
 const REPORTS_VIEWS: ViewType[] = ["reports", "reports-fluxo", "reports-timeline", "reports-membros", "reports-alertas"]
 
@@ -128,7 +118,6 @@ export function AppSidebar() {
   } } = useLayoutContext()
   const [openGroups, setOpenGroups] = useState<string[]>(() => {
     const initial: string[] = []
-    if (CALENDAR_VIEWS.includes(view)) initial.push("Calendário")
     if (TOOLS_VIEWS.includes(view)) initial.push("Ferramentas")
     if (REPORTS_VIEWS.includes(view)) initial.push("Relatórios")
     return initial
@@ -219,7 +208,10 @@ export function AppSidebar() {
       )
     }
 
-    const isActive = view === item.view
+    const PLANNING_VIEWS: ViewType[] = ["demandas", "calendar", "timeline", "list", "kanban"]
+    const isActive = item.view === "demandas"
+      ? PLANNING_VIEWS.includes(view)
+      : view === item.view
 
     const button = (
       <button
diff --git a/src/components/TaskModal.tsx b/src/components/TaskModal.tsx
index 957e30b..8cce3c4 100644
--- a/src/components/TaskModal.tsx
+++ b/src/components/TaskModal.tsx
@@ -1,20 +1,52 @@
 import React, { useState } from 'react';
 import { useMembersQuery } from '@/hooks/members/useMembersQuery';
 import { useClients } from '@/hooks/clients/useClients';
-import { Input, Label, Button, ConfirmModal } from './ui';
-import { Save, ExternalLink, Trash2, Users, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { Input, Button, ConfirmModal } from './ui';
+import {
+  Save, ExternalLink, Trash2, Users, AlertCircle, CheckCircle2,
+  Plus, GripVertical, X, Calendar, Link2, ChevronDown, ListTodo,
+} from 'lucide-react';
 import {
   STEP_META,
-  createDefaultSteps,
+  STEP_TYPES_ORDER,
+  SUBTASK_PROGRESS_META,
+  SUBTASK_PROGRESS_STATUS_ORDER,
   migrateLegacyTask,
-  type Step,
-  type StepType,
+  type Subtask,
+  type SubtaskProgressStatus,
+  type SubtaskStatus,
   type TaskStatus,
 } from '../lib/steps';
 import type { TaskModalProps } from '../types/props';
 import { useFormState } from '@/hooks/ui/useFormState';
 import { isWeekendOrHoliday, getHolidayName, nextNonHolidayBusinessDay } from '../utils/holidayUtils';
 
+let _subtaskCounter = 0;
+function tempId() {
+  return `__new__${++_subtaskCounter}`;
+}
+
+type SubtaskDraft = Subtask & { _tempId: string };
+
+function draftFromSubtask(s: Subtask): SubtaskDraft {
+  return { ...s, _tempId: s.id || tempId() };
+}
+
+function newDraft(order: number): SubtaskDraft {
+  return {
+    _tempId: tempId(),
+    id: '',
+    title: '',
+    status: 'design' as SubtaskStatus,
+    progressStatus: 'todo',
+    start: '',
+    end: '',
+    assignees: [],
+    active: true,
+    order,
+  };
+}
+
 const TaskModal: React.FC<TaskModalProps> = ({ task, members: propMembers, onClose, onSave, onDelete, holidays }) => {
   const { effectiveClientId } = useClients();
   const { data: storeMembers = [] } = useMembersQuery(effectiveClientId);
@@ -30,15 +62,15 @@ const TaskModal: React.FC<TaskModalProps> = ({ task, members: propMembers, onClo
     init.status.blockedAt ?? new Date().toISOString().split('T')[0]
   );
   const [concludedAt, setConcludedAt] = useState<string | undefined>(task?.concludedAt);
-  const [steps, setSteps] = useState<Step[]>(
-    task ? init.steps : createDefaultSteps()
+  const [subtasks, setSubtasks] = useState<SubtaskDraft[]>(
+    init.subtasks.map(draftFromSubtask)
   );
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [pendingSubmitData, setPendingSubmitData] = useState<Parameters<typeof onSave>[0] | null>(null);
   const [confirmMessage, setConfirmMessage] = useState('');
   const [showDirtyCloseConfirm, setShowDirtyCloseConfirm] = useState(false);
 
-  const formSnapshot = { title, clickupLink, blocked, blockedAt, steps, concludedAt };
+  const formSnapshot = { title, clickupLink, blocked, blockedAt, subtasks, concludedAt };
   const { isDirty, submitting, withSubmit } = useFormState(
     formSnapshot,
     !task,
@@ -46,38 +78,49 @@ const TaskModal: React.FC<TaskModalProps> = ({ task, members: propMembers, onClo
   );
 
   const handleRequestClose = () => {
-    if (!isDirty) {
-      onClose();
-      return;
-    }
-
+    if (!isDirty) { onClose(); return; }
     setShowDirtyCloseConfirm(true);
   };
 
+  const activeSubtasks = subtasks.filter(s => s.active);
+
   const validate = () => {
     const e: Record<string, string> = {};
     if (!title || title.length < 3) e.title = 'Título obrigatório (mín. 3 caracteres).';
     if (clickupLink) {
-      try { new URL(clickupLink) } catch { e.clickupLink = 'Insira um URL válido (ex: https://...).'; }
+      try { new URL(clickupLink); } catch { e.clickupLink = 'Insira um URL válido (ex: https://...).'; }
     }
-    if (activeCount === 0) e.steps = 'Selecione pelo menos um step.';
-    steps.filter(s => s.active).forEach(s => {
-      if (!s.start || !s.end) e[`${s.type}-dates`] = 'Datas obrigatórias quando step está ativo.';
-      else if (s.end < s.start) e[`${s.type}-dates`] = 'Fim anterior ao início.';
+    if (activeSubtasks.length === 0) e.subtasks = 'Adicione pelo menos uma subtask ativa.';
+    subtasks.forEach(s => {
+      if (!s.title.trim()) e[`${s._tempId}-title`] = 'Título obrigatório.';
+      if (!s.start || !s.end) e[`${s._tempId}-dates`] = 'Datas obrigatórias.';
+      else if (s.end < s.start) e[`${s._tempId}-dates`] = 'Fim anterior ao início.';
     });
     setErrors(e);
     return Object.keys(e).length === 0;
   };
 
+  const buildTaskData = (drafts: SubtaskDraft[]) => {
+    const finalSubtasks: Subtask[] = drafts.map((s, i) => ({
+      id: s.id,
+      title: s.title,
+      status: s.status,
+      progressStatus: s.progressStatus,
+      start: s.start,
+      end: s.end,
+      assignees: s.assignees,
+      active: s.active,
+      order: i,
+    }));
+    const status: TaskStatus = { blocked, blockedAt: blocked ? blockedAt : undefined };
+    return { ...task, title, clickupLink, status, subtasks: finalSubtasks, concludedAt };
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!validate()) return;
 
-    const status: TaskStatus = {
-      blocked,
-      blockedAt: blocked ? blockedAt : undefined,
-    };
-    const taskData = { ...task, title, clickupLink, status, steps, concludedAt };
+    const taskData = buildTaskData(subtasks);
 
     const describeDateConflict = (date: string): string => {
       const holidayName = getHolidayName(date, holidays);
@@ -86,18 +129,17 @@ const TaskModal: React.FC<TaskModalProps> = ({ task, members: propMembers, onClo
       return `${date} (${dow === 0 ? 'Domingo' : 'Sábado'})`;
     };
 
-    const affected = steps
-      .filter(s => s.active)
+    const affected = subtasks
       .filter(s => (s.start && isWeekendOrHoliday(s.start, holidays)) || (s.end && isWeekendOrHoliday(s.end, holidays)))
       .map(s => {
         const parts: string[] = [];
         if (s.start && isWeekendOrHoliday(s.start, holidays)) parts.push(`início em ${describeDateConflict(s.start)}`);
         if (s.end && isWeekendOrHoliday(s.end, holidays)) parts.push(`fim em ${describeDateConflict(s.end)}`);
-        return `• ${STEP_META[s.type]?.label ?? s.type}: ${parts.join(' e ')}`;
+        return `• ${s.title || STEP_META[s.status]?.label}: ${parts.join(' e ')}`;
       });
 
     if (affected.length > 0) {
-      setConfirmMessage(`As seguintes fases têm datas em fim de semana ou feriado:\n\n${affected.join('\n')}\n\nDeseja salvar mesmo assim?`);
+      setConfirmMessage(`As seguintes subtasks têm datas em fim de semana ou feriado:\n\n${affected.join('\n')}\n\nDeseja salvar mesmo assim?`);
       setPendingSubmitData(taskData as Parameters<typeof onSave>[0]);
       return;
     }
@@ -111,377 +153,423 @@ const TaskModal: React.FC<TaskModalProps> = ({ task, members: propMembers, onClo
     withSubmit(() => onSave(pendingSubmitData));
   };
 
-  const handleCancelWeekend = () => {
-    setPendingSubmitData(null);
-  };
+  const handleCancelWeekend = () => setPendingSubmitData(null);
 
   const handlePostponeWeekend = () => {
     if (!pendingSubmitData) return;
 
-    const adjustedTaskData = {
+    const adjusted = {
       ...pendingSubmitData,
-      steps: pendingSubmitData.steps.map(step => {
-        if (!step.active) return step;
-
-        const adjustedStart = step.start && isWeekendOrHoliday(step.start, holidays)
-          ? nextNonHolidayBusinessDay(step.start, holidays)
-          : step.start;
-        let adjustedEnd = step.end && isWeekendOrHoliday(step.end, holidays)
-          ? nextNonHolidayBusinessDay(step.end, holidays)
-          : step.end;
-
-        if (adjustedStart && adjustedEnd && adjustedEnd < adjustedStart) {
-          adjustedEnd = adjustedStart;
-        }
-
-        return { ...step, start: adjustedStart, end: adjustedEnd };
+      subtasks: pendingSubmitData.subtasks.map((s: Subtask) => {
+        const adjustedStart = s.start && isWeekendOrHoliday(s.start, holidays)
+          ? nextNonHolidayBusinessDay(s.start, holidays)
+          : s.start;
+        let adjustedEnd = s.end && isWeekendOrHoliday(s.end, holidays)
+          ? nextNonHolidayBusinessDay(s.end, holidays)
+          : s.end;
+        if (adjustedStart && adjustedEnd && adjustedEnd < adjustedStart) adjustedEnd = adjustedStart;
+        return { ...s, start: adjustedStart, end: adjustedEnd };
       }),
     };
 
     setPendingSubmitData(null);
-    withSubmit(() => onSave(adjustedTaskData));
+    withSubmit(() => onSave(adjusted));
   };
 
-  const toggleStep = (type: StepType) => {
-    setSteps(prev => prev.map(s => s.type === type ? { ...s, active: !s.active } : s));
+  const addSubtask = () => {
+    setSubtasks(prev => [...prev, newDraft(prev.length)]);
   };
 
-  const updateStep = (type: StepType, field: keyof Step, value: Step[keyof Step]) => {
-    setSteps(prev => prev.map(s => s.type === type ? { ...s, [field]: value } : s));
+  const removeSubtask = (id: string) => {
+    setSubtasks(prev => prev.filter(s => s._tempId !== id));
   };
 
-  const toggleAssignee = (type: StepType, memberId: string) => {
-    setSteps(prev => prev.map(s => {
-      if (s.type !== type) return s;
+  const updateSubtask = <K extends keyof SubtaskDraft>(id: string, field: K, value: SubtaskDraft[K]) => {
+    setSubtasks(prev => prev.map(s => s._tempId === id ? { ...s, [field]: value } : s));
+  };
+
+  const toggleAssignee = (id: string, memberId: string) => {
+    setSubtasks(prev => prev.map(s => {
+      if (s._tempId !== id) return s;
       const has = s.assignees.includes(memberId);
-      return { ...s, assignees: has ? s.assignees.filter(id => id !== memberId) : [...s.assignees, memberId] };
+      return { ...s, assignees: has ? s.assignees.filter(mid => mid !== memberId) : [...s.assignees, memberId] };
     }));
   };
 
-  const activeCount = steps.filter(s => s.active).length;
-
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
-      onClick={handleRequestClose}
-    >
+    <>
+      <style>{`
+        .tm-scrollbar::-webkit-scrollbar { width: 6px; }
+        .tm-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .tm-scrollbar::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--border) 80%, transparent); border-radius: 10px; }
+        .tm-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--border); }
+      `}</style>
+
       <div
-        className="bg-card rounded-2xl shadow-2xl w-full max-w-xl max-h-[92vh] overflow-hidden flex flex-col"
-        onClick={e => e.stopPropagation()}
+        className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/70 backdrop-blur-sm"
+        onClick={handleRequestClose}
       >
+        <div
+          className="bg-card border border-border rounded-2xl shadow-2xl w-full max-w-4xl max-h-[92vh] overflow-hidden flex flex-col"
+          onClick={e => e.stopPropagation()}
+        >
+
+          {/* Header */}
+          <div className="flex justify-between items-center px-6 py-4 border-b border-border bg-muted/30">
+            <div className="flex items-center gap-3">
+              <span className="text-sm font-medium text-muted-foreground">
+                {task ? 'Editar Demanda' : 'Nova Demanda'}
+              </span>
+              {task && (
+                <span className="px-2 py-0.5 rounded text-[10px] bg-muted text-muted-foreground font-mono tracking-wider border border-border">
+                  #{task.id}
+                </span>
+              )}
+            </div>
+            <button
+              onClick={handleRequestClose}
+              className="text-muted-foreground hover:text-foreground hover:bg-muted p-1.5 rounded-md transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
 
-        {/* Header */}
-        <div className="flex justify-between items-center px-6 py-5 border-b border-border">
-          <h2 className="text-lg font-semibold text-foreground">
-            {task ? 'Editar Demanda' : 'Nova Demanda'}
-          </h2>
-          <button
-            onClick={handleRequestClose}
-            className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-          >✕</button>
-        </div>
+          <div className="flex-1 overflow-y-auto tm-scrollbar">
+            <form id="task-form" onSubmit={handleSubmit} noValidate className="p-6 space-y-8">
 
-        <div className="px-6 py-5 overflow-y-auto flex-1 space-y-6 custom-scrollbar">
-          <form id="task-form" onSubmit={handleSubmit} noValidate>
-            <div className="space-y-6">
-
-              {/* Título */}
-              <div className="space-y-1.5">
-                <Label htmlFor="title">Título</Label>
-                <Input
-                  id="title"
-                  value={title}
-                  onChange={e => setTitle(e.target.value)}
-                  placeholder="Ex: Landing Page Black Friday"
-                />
-                {errors.title && <p className="text-xs text-red-500">{errors.title}</p>}
-              </div>
+              {/* Seção 1: Título e metadados */}
+              <div className="space-y-5">
 
-              {/* Link ClickUp */}
-              <div className="space-y-1.5">
-                <Label htmlFor="clickup" className="flex items-center gap-1">
-                  Link ClickUp
-                  <span className="text-muted-foreground font-normal text-xs">(opcional)</span>
-                </Label>
-                <div className="relative">
-                  <Input
-                    id="clickup"
+                {/* Título grande */}
+                <div>
+                  <input
+                    id="title"
                     type="text"
-                    inputMode="url"
-                    value={clickupLink}
-                    onChange={e => setClickupLink(e.target.value)}
-                    placeholder="https://app.clickup.com/t/..."
-                    className="pr-9"
+                    value={title}
+                    onChange={e => setTitle(e.target.value)}
+                    placeholder="Nome da Demanda..."
+                    autoFocus
+                    className="w-full bg-transparent text-3xl font-bold tracking-tight text-foreground placeholder:text-muted-foreground/40 outline-none border-b border-transparent focus:border-primary pb-1 transition-colors"
                   />
-                  {clickupLink && (
-                    <a
-                      href={clickupLink}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-blue-500 transition-colors"
-                    >
-                      <ExternalLink className="w-4 h-4" />
-                    </a>
-                  )}
+                  {errors.title && <p className="text-xs text-red-500 mt-1.5">{errors.title}</p>}
                 </div>
-                {errors.clickupLink && <p className="text-xs text-red-500">{errors.clickupLink}</p>}
-              </div>
 
-              {/* Bloqueado */}
-              <div className={`rounded-xl border p-3 transition-colors ${blocked
-                ? 'bg-red-50 border-red-300 dark:bg-red-950/60 dark:border-red-700'
-                : 'bg-muted border-border'
-              }`}>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <AlertCircle className={`w-4 h-4 shrink-0 ${blocked ? 'text-red-600 dark:text-red-400' : 'text-muted-foreground'}`} />
-                    <div>
-                      <div className={`text-sm font-semibold ${blocked ? 'text-red-800 dark:text-red-200' : 'text-foreground'}`}>
-                        Bloqueado
-                      </div>
-                      <div className="text-[10px] text-muted-foreground">
-                        Steps a partir da data de bloqueio ficam em alerta vermelho
-                      </div>
+                {/* Link ClickUp + toggles Bloqueada/Concluída */}
+                <div className="flex flex-wrap items-center gap-3">
+
+                  <div className="relative flex-1 min-w-[220px] group">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Link2 className="w-4 h-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
                     </div>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => setBlocked(b => !b)}
-                    className={`w-11 h-6 rounded-full transition-colors relative shrink-0 ${blocked ? 'bg-red-500' : 'bg-muted-foreground/30'}`}
-                    aria-label="Alternar bloqueio"
-                  >
-                    <span className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform ${blocked ? 'translate-x-5' : 'translate-x-0'}`} />
-                  </button>
-                </div>
-                {blocked && (
-                  <div className="mt-3 flex items-center gap-2">
-                    <span className="text-[11px] text-red-700 dark:text-red-300 font-medium shrink-0">Data do bloqueio:</span>
                     <Input
-                      type="date"
-                      value={blockedAt}
-                      onChange={e => setBlockedAt(e.target.value)}
-                      className="h-7 text-xs w-auto flex-1 bg-white/70 dark:bg-red-900/30 border-red-300 dark:border-red-700"
+                      type="text"
+                      inputMode="url"
+                      value={clickupLink}
+                      onChange={e => setClickupLink(e.target.value)}
+                      placeholder="Colar link do ClickUp..."
+                      className="pl-9 pr-8"
                     />
+                    {clickupLink && (
+                      <a
+                        href={clickupLink}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-blue-500 transition-colors"
+                      >
+                        <ExternalLink className="w-4 h-4" />
+                      </a>
+                    )}
+                    {errors.clickupLink && <p className="text-xs text-red-500 mt-1">{errors.clickupLink}</p>}
+                  </div>
+
+                  <div className="flex items-center gap-1 bg-muted border border-border p-1 rounded-lg">
+                    <button
+                      type="button"
+                      onClick={() => setBlocked(b => !b)}
+                      className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                        blocked
+                          ? 'bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20'
+                          : 'text-muted-foreground hover:text-foreground hover:bg-background border border-transparent'
+                      }`}
+                    >
+                      <AlertCircle className="w-3.5 h-3.5" />
+                      Bloqueada
+                    </button>
+
+                    <button
+                      type="button"
+                      onClick={() => setConcludedAt(concludedAt ? undefined : new Date().toISOString())}
+                      className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                        concludedAt
+                          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20'
+                          : 'text-muted-foreground hover:text-foreground hover:bg-background border border-transparent'
+                      }`}
+                    >
+                      <CheckCircle2 className="w-3.5 h-3.5" />
+                      Concluída
+                    </button>
+                  </div>
+                </div>
+
+                {/* Datas condicionais (bloqueio / conclusão) */}
+                {(blocked || concludedAt) && (
+                  <div className="flex flex-wrap gap-4 p-3.5 bg-muted/50 rounded-lg border border-border">
+                    {blocked && (
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-medium text-red-600 dark:text-red-400 shrink-0">A partir de:</span>
+                        <Input
+                          type="date"
+                          value={blockedAt}
+                          onChange={e => setBlockedAt(e.target.value)}
+                          className="h-7 text-xs w-auto border-red-300 dark:border-red-700"
+                        />
+                      </div>
+                    )}
+                    {concludedAt && (
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400 shrink-0">Concluída em:</span>
+                        <Input
+                          type="date"
+                          value={concludedAt.split('T')[0]}
+                          onChange={e => setConcludedAt(e.target.value ? e.target.value + 'T00:00:00' : undefined)}
+                          className="h-7 text-xs w-auto border-emerald-300 dark:border-emerald-700"
+                        />
+                      </div>
+                    )}
                   </div>
                 )}
               </div>
 
-              {/* Concluída */}
-              <div className={`rounded-xl border p-3 transition-colors ${concludedAt
-                ? 'bg-emerald-50 border-emerald-300 dark:bg-emerald-950/60 dark:border-emerald-700'
-                : 'bg-muted border-border'
-              }`}>
+              {/* Seção 2: Subtasks */}
+              <div className="space-y-4 pt-4 border-t border-border">
+
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <CheckCircle2 className={`w-4 h-4 shrink-0 ${concludedAt ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`} />
-                    <div>
-                      <div className={`text-sm font-semibold ${concludedAt ? 'text-emerald-800 dark:text-emerald-200' : 'text-foreground'}`}>
-                        Concluída
-                      </div>
-                      <div className="text-[10px] text-muted-foreground">
-                        Demanda finalizada e entregue
-                      </div>
-                    </div>
+                    <span className="text-sm font-semibold text-foreground">Subtasks</span>
+                    {activeSubtasks.length > 0 && (
+                      <span className="px-2 py-0.5 rounded-full bg-muted text-[10px] text-muted-foreground font-medium border border-border">
+                        {activeSubtasks.length} ativa{activeSubtasks.length !== 1 ? 's' : ''}
+                      </span>
+                    )}
                   </div>
                   <button
                     type="button"
-                    onClick={() => setConcludedAt(concludedAt ? undefined : new Date().toISOString())}
-                    className={`w-11 h-6 rounded-full transition-colors relative shrink-0 ${concludedAt ? 'bg-emerald-500' : 'bg-muted-foreground/30'}`}
-                    aria-label="Alternar conclusão"
+                    onClick={addSubtask}
+                    className="flex items-center gap-1.5 text-xs font-medium text-primary hover:opacity-80 hover:bg-muted px-3 py-1.5 rounded-md transition-all"
                   >
-                    <span className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform ${concludedAt ? 'translate-x-5' : 'translate-x-0'}`} />
+                    <Plus className="w-4 h-4" />
+                    Nova Subtask
                   </button>
                 </div>
-                {concludedAt && (
-                  <div className="mt-3 flex items-center gap-2">
-                    <span className="text-[11px] text-emerald-700 dark:text-emerald-300 font-medium shrink-0">Concluída em:</span>
-                    <Input
-                      type="date"
-                      value={concludedAt.split('T')[0]}
-                      onChange={e => setConcludedAt(e.target.value ? e.target.value + 'T00:00:00' : undefined)}
-                      className="h-7 text-xs w-auto flex-1 bg-white/70 dark:bg-emerald-900/30 border-emerald-300 dark:border-emerald-700"
-                    />
-                  </div>
-                )}
-              </div>
 
-              {/* Steps */}
-              <div className="space-y-2">
-                {errors.steps && <p className="text-xs text-red-500">{errors.steps}</p>}
-                <div className="flex items-center justify-between">
-                  <Label>Steps da Demanda</Label>
-                  <span className="text-[10px] text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
-                    {activeCount} ativo{activeCount !== 1 ? 's' : ''}
-                  </span>
-                </div>
-                <div className="space-y-1.5">
-                  {steps.map((step) => {
-                    const meta = STEP_META[step.type as StepType];
-                    if (!meta) return null;
+                {errors.subtasks && <p className="text-xs text-red-500">{errors.subtasks}</p>}
+
+                <div className="space-y-2.5">
+                  {subtasks.map((subtask) => {
+                    const meta = STEP_META[subtask.status];
                     return (
                       <div
-                        key={step.type}
-                        className={`rounded-xl border transition-all ${step.active ? meta.color : 'bg-muted/50 border-border'}`}
+                        key={subtask._tempId}
+                        className={`group relative flex flex-col lg:flex-row lg:items-center gap-4 p-3.5 bg-muted/30 border ${meta.color} rounded-xl hover:bg-muted/50 transition-colors`}
                       >
-                        {/* Step header — always visible */}
-                        <button
-                          type="button"
-                          onClick={() => toggleStep(step.type)}
-                          className="w-full flex items-center gap-3 px-3 py-2.5 text-left"
-                        >
-                          {/* Checkbox */}
-                          <span className={`w-4 h-4 rounded border-2 shrink-0 flex items-center justify-center transition-colors ${
-                            step.active
-                              ? 'bg-current border-current'
-                              : 'border-muted-foreground/40 bg-transparent'
-                          }`}>
-                            {step.active && <span className="text-white text-[9px] leading-none font-bold">✓</span>}
-                          </span>
-                          <span className={`w-2 h-2 rounded-full shrink-0 ${meta.dot}`} />
-                          <span className={`text-xs font-semibold flex-1 ${step.active ? '' : 'text-muted-foreground'}`}>
-                            {meta.label}
-                          </span>
-                          {/* Assignee avatars when active */}
-                          {step.active && step.assignees.length > 0 && (
-                            <div className="flex -space-x-1 shrink-0">
-                              {step.assignees.map(aid => {
-                                const m = resolvedMembers.find(m => m.id === aid);
-                                return m ? (
-                                  <div
-                                    key={aid}
-                                    className="w-5 h-5 rounded-full bg-white/80 dark:bg-black/30 border border-white dark:border-black/20 text-[8px] font-bold flex items-center justify-center text-foreground"
-                                    title={m.name}
-                                  >{m.avatar}</div>
-                                ) : null;
-                              })}
+                        {/* Lado esquerdo: grip + título + selects */}
+                        <div className="flex flex-1 items-center gap-3 min-w-0">
+                          <GripVertical className="w-4 h-4 text-muted-foreground/40 cursor-grab hover:text-muted-foreground shrink-0" />
+
+                          <div className="flex-1 flex flex-col gap-2 min-w-0">
+                            <input
+                              type="text"
+                              value={subtask.title}
+                              onChange={e => updateSubtask(subtask._tempId, 'title', e.target.value)}
+                              placeholder="Nome da subtask…"
+                              className="w-full bg-transparent text-sm font-semibold text-foreground placeholder:text-muted-foreground/40 outline-none border-b border-transparent focus:border-border pb-0.5 transition-colors"
+                            />
+
+                            <div className="flex items-center gap-2 flex-wrap">
+                              <div className="relative">
+                                <select
+                                  value={subtask.status}
+                                  onChange={e => updateSubtask(subtask._tempId, 'status', e.target.value as SubtaskStatus)}
+                                  className="appearance-none bg-background border border-border text-foreground text-[11px] rounded px-2.5 py-1 pr-6 outline-none focus:ring-1 focus:ring-ring cursor-pointer transition-shadow"
+                                >
+                                  {STEP_TYPES_ORDER.map(s => (
+                                    <option key={s} value={s}>{STEP_META[s].label}</option>
+                                  ))}
+                                </select>
+                                <ChevronDown className="w-3 h-3 text-muted-foreground absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none" />
+                              </div>
+
+                              <div className="relative">
+                                <select
+                                  value={subtask.progressStatus}
+                                  onChange={e => updateSubtask(subtask._tempId, 'progressStatus', e.target.value as SubtaskProgressStatus)}
+                                  className="appearance-none bg-background border border-border text-foreground text-[11px] rounded px-2.5 py-1 pr-6 outline-none focus:ring-1 focus:ring-ring cursor-pointer transition-shadow"
+                                  title="Status da subtask"
+                                >
+                                  {SUBTASK_PROGRESS_STATUS_ORDER.map(s => (
+                                    <option key={s} value={s}>{SUBTASK_PROGRESS_META[s].label}</option>
+                                  ))}
+                                </select>
+                                <ChevronDown className="w-3 h-3 text-muted-foreground absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none" />
+                              </div>
                             </div>
-                          )}
-                        </button>
-
-                        {/* Step details — only when active */}
-                        {step.active && (
-                          <div className="px-3 pb-3 space-y-3 border-t border-black/10 dark:border-white/10 pt-2.5">
-
-                            {/* Responsáveis */}
-                            <div>
-                              <span className="text-[10px] opacity-70 font-medium flex items-center gap-1 mb-1.5">
-                                <Users className="w-3 h-3" /> Responsáveis
-                                <span className="opacity-60">(opcional)</span>
-                              </span>
-                              <div className="flex gap-1.5 flex-wrap">
-                                {resolvedMembers.map(m => {
-                                  const sel = step.assignees.includes(m.id);
-                                  return (
-                                    <button
-                                      key={m.id}
-                                      type="button"
-                                      onClick={() => toggleAssignee(step.type, m.id)}
-                                      className={`flex items-center gap-1.5 px-2 py-1 rounded-lg border text-xs font-medium transition-all ${
-                                        sel
-                                          ? 'border-blue-500 bg-blue-50 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200'
-                                          : 'border-transparent bg-white/50 dark:bg-white/10 text-inherit hover:bg-white/80 dark:hover:bg-white/20'
-                                      }`}
-                                    >
-                                      <div className={`w-5 h-5 rounded-full flex items-center justify-center text-[9px] font-bold ${
-                                        sel ? 'bg-blue-500 text-white' : 'bg-black/10 dark:bg-white/20 text-inherit'
-                                      }`}>
+
+                            {errors[`${subtask._tempId}-title`] && (
+                              <span className="text-[10px] text-red-500">{errors[`${subtask._tempId}-title`]}</span>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* Lado direito: responsáveis + datas + remover */}
+                        <div className="flex items-center gap-4 lg:justify-end border-t border-border lg:border-none pt-3 lg:pt-0 flex-wrap">
+
+                          {/* Avatares / responsáveis */}
+                          <div className="flex items-center gap-1.5">
+                            <Users className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                            <div className="flex flex-wrap gap-1">
+                              {resolvedMembers.map(m => {
+                                const sel = subtask.assignees.includes(m.id);
+                                return (
+                                  <button
+                                    key={m.id}
+                                    type="button"
+                                    onClick={() => toggleAssignee(subtask._tempId, m.id)}
+                                    title={m.name}
+                                    className={`relative w-7 h-7 rounded-full overflow-hidden transition-all duration-150 ${
+                                      sel
+                                        ? 'ring-2 ring-primary ring-offset-1 ring-offset-card opacity-100 scale-110 z-10'
+                                        : 'opacity-40 grayscale hover:opacity-70 hover:grayscale-0'
+                                    }`}
+                                  >
+                                    {m.avatar_url ? (
+                                      <img src={m.avatar_url} alt={m.name} className="w-full h-full object-cover" />
+                                    ) : (
+                                      <div className="w-full h-full bg-muted border border-border flex items-center justify-center text-[10px] font-bold text-foreground">
                                         {m.avatar}
                                       </div>
-                                      {m.name}
-                                    </button>
-                                  );
-                                })}
-                              </div>
+                                    )}
+                                  </button>
+                                );
+                              })}
                             </div>
+                          </div>
 
-                            {/* Datas */}
-                            <div className="grid grid-cols-2 gap-2">
-                              <div className="space-y-1">
-                                <span className="text-[10px] opacity-70">Início</span>
-                                <Input
-                                  type="date"
-                                  value={step.start}
-                                  onChange={e => updateStep(step.type, 'start', e.target.value)}
-                                  className="h-8 text-xs bg-white/70 dark:bg-black/20 border-0 focus:ring-1"
-                                />
-                              </div>
-                              <div className="space-y-1">
-                                <span className="text-[10px] opacity-70">Fim</span>
-                                <Input
-                                  type="date"
-                                  value={step.end}
-                                  onChange={e => updateStep(step.type, 'end', e.target.value)}
-                                  className="h-8 text-xs bg-white/70 dark:bg-black/20 border-0 focus:ring-1"
-                                />
-                              </div>
+                          {/* Range de datas compacto */}
+                          <div className="flex items-center bg-background border border-border rounded-md overflow-hidden focus-within:ring-1 focus-within:ring-ring transition-all">
+                            <div className="flex items-center px-2.5 border-r border-border">
+                              <Calendar className="w-3.5 h-3.5 text-muted-foreground mr-2 shrink-0" />
+                              <input
+                                type="date"
+                                value={subtask.start}
+                                onChange={e => updateSubtask(subtask._tempId, 'start', e.target.value)}
+                                className="bg-transparent text-[11px] font-mono text-foreground py-1.5 w-[90px] outline-none"
+                              />
+                            </div>
+                            <div className="flex items-center px-2.5">
+                              <span className="text-[10px] text-muted-foreground mr-2 font-medium">até</span>
+                              <input
+                                type="date"
+                                value={subtask.end}
+                                onChange={e => updateSubtask(subtask._tempId, 'end', e.target.value)}
+                                className="bg-transparent text-[11px] font-mono text-foreground py-1.5 w-[90px] outline-none"
+                              />
                             </div>
-                            {errors[`${step.type}-dates`] && (
-                              <p className="text-[10px] text-red-600">{errors[`${step.type}-dates`]}</p>
-                            )}
                           </div>
+
+                          <button
+                            type="button"
+                            onClick={() => removeSubtask(subtask._tempId)}
+                            className="w-8 h-8 flex items-center justify-center rounded-md text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/50 transition-colors lg:opacity-0 lg:group-hover:opacity-100 focus:opacity-100"
+                            aria-label="Remover subtask"
+                          >
+                            <X className="w-4 h-4" />
+                          </button>
+                        </div>
+
+                        {errors[`${subtask._tempId}-dates`] && (
+                          <p className="absolute -bottom-4 right-10 text-[10px] text-red-500">
+                            {errors[`${subtask._tempId}-dates`]}
+                          </p>
                         )}
                       </div>
                     );
                   })}
                 </div>
+
+                {/* Empty state */}
+                {subtasks.length === 0 && (
+                  <div className="text-center py-10 bg-muted/20 rounded-xl border border-dashed border-border flex flex-col items-center justify-center">
+                    <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-3">
+                      <ListTodo className="w-5 h-5 text-muted-foreground" />
+                    </div>
+                    <p className="text-sm font-medium text-foreground">Nenhuma subtask definida</p>
+                    <p className="text-xs text-muted-foreground mt-1 max-w-sm">
+                      Adicione subtasks para estruturar esta demanda, atribuir responsáveis e definir prazos de entrega.
+                    </p>
+                  </div>
+                )}
+
               </div>
+            </form>
+          </div>
 
+          {/* Footer */}
+          <div className="px-6 py-4 border-t border-border bg-muted/30 flex items-center justify-between">
+            <div>
+              {task && onDelete && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  type="button"
+                  onClick={() => onDelete(task.id)}
+                  className="text-muted-foreground hover:text-destructive flex items-center gap-2"
+                >
+                  <Trash2 className="w-4 h-4" />
+                  <span>Apagar demanda</span>
+                </Button>
+              )}
             </div>
-          </form>
-        </div>
 
-        {/* Footer */}
-        <div className="px-4 sm:px-6 py-3 sm:py-4 border-t border-border bg-muted/50 flex flex-col sm:flex-row gap-2 sm:gap-3 sm:justify-between sm:items-center">
-          <Button className="flex-1 sm:flex-none text-xs sm:text-sm" variant="outline" onClick={handleRequestClose} type="button">Cancelar</Button>
-          <div className="flex gap-2 flex-1 sm:flex-none justify-end">
-            {task && onDelete && (
-              <Button
-                className="flex-1 sm:flex-none text-xs sm:text-sm text-muted-foreground hover:text-destructive"
-                variant="ghost"
-                size="sm"
-                type="button"
-                onClick={() => onDelete(task.id)}
-              >
-                <Trash2 className="w-4 h-4 mr-1.5" />
-                <span className="sm:hidden">Apagar</span>
-                <span className="hidden sm:inline">Apagar demanda</span>
+            <div className="flex items-center gap-3">
+              <Button variant="outline" onClick={handleRequestClose} type="button">
+                Cancelar
+              </Button>
+              <Button type="submit" form="task-form" disabled={!isDirty || submitting} className="flex items-center gap-2">
+                <Save className="w-4 h-4" />
+                <span className="sm:hidden">{submitting ? 'A guardar…' : task ? 'Salvar' : 'Criar'}</span>
+                <span className="hidden sm:inline">{submitting ? 'A guardar…' : task ? 'Salvar Alterações' : 'Criar Demanda'}</span>
               </Button>
-            )}
-            <Button className="flex-1 sm:flex-none text-xs sm:text-sm" type="submit" form="task-form" disabled={!isDirty || submitting}>
-              <Save className="w-4 h-4 mr-1.5" />
-              <span className="sm:hidden">{submitting ? 'A guardar…' : task ? 'Salvar' : 'Criar'}</span>
-              <span className="hidden sm:inline">{submitting ? 'A guardar…' : task ? 'Salvar Alterações' : 'Criar Demanda'}</span>
-            </Button>
+            </div>
           </div>
-        </div>
 
-        {pendingSubmitData && (
-          <ConfirmModal
-            title="Datas em fim de semana ou feriado"
-            message={confirmMessage}
-            secondaryConfirmLabel="Prolongar para próximo dia útil"
-            onSecondaryConfirm={handlePostponeWeekend}
-            onConfirm={handleConfirmWeekend}
-            onCancel={handleCancelWeekend}
-          />
-        )}
-
-        {showDirtyCloseConfirm && (
-          <ConfirmModal
-            title="Descartar alterações"
-            message="Você tem alterações não guardadas. Tem certeza que quer fechar?"
-            confirmLabel="Descartar e fechar"
-            cancelLabel="Continuar editando"
-            onConfirm={() => {
-              setShowDirtyCloseConfirm(false);
-              onClose();
-            }}
-            onCancel={() => setShowDirtyCloseConfirm(false)}
-          />
-        )}
+          {pendingSubmitData && (
+            <ConfirmModal
+              title="Datas em fim de semana ou feriado"
+              message={confirmMessage}
+              secondaryConfirmLabel="Prolongar para próximo dia útil"
+              onSecondaryConfirm={handlePostponeWeekend}
+              onConfirm={handleConfirmWeekend}
+              onCancel={handleCancelWeekend}
+            />
+          )}
+
+          {showDirtyCloseConfirm && (
+            <ConfirmModal
+              title="Descartar alterações"
+              message="Você tem alterações não guardadas. Tem certeza que quer fechar?"
+              confirmLabel="Descartar e fechar"
+              cancelLabel="Continuar editando"
+              onConfirm={() => {
+                setShowDirtyCloseConfirm(false);
+                onClose();
+              }}
+              onCancel={() => setShowDirtyCloseConfirm(false)}
+            />
+          )}
 
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/ui/Tabs.tsx b/src/components/ui/Tabs.tsx
index b4ddc56..7ff8932 100644
--- a/src/components/ui/Tabs.tsx
+++ b/src/components/ui/Tabs.tsx
@@ -51,14 +51,14 @@ const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(
 TabsList.displayName = TabsPrimitive.List.displayName
 
 const tabsTriggerVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default:
           "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
         underline:
-          "border-b-2 border-transparent data-[state=active]:border-foreground rounded-none pb-2",
+          "cursor-pointer border-b-2 border-transparent data-[state=active]:border-foreground rounded-none pb-2 hover:text-foreground data-[state=inactive]:hover:border-border",
         pills:
           "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md",
       },
diff --git a/src/components/ui/ViewTabs.tsx b/src/components/ui/ViewTabs.tsx
new file mode 100644
index 0000000..35b6587
--- /dev/null
+++ b/src/components/ui/ViewTabs.tsx
@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils'
+
+export interface ViewTab<T extends string = string> {
+  value: T
+  label: string
+}
+
+interface ViewTabsProps<T extends string = string> {
+  tabs: readonly ViewTab<T>[]
+  value: T
+  onChange: (value: T) => void
+  className?: string
+}
+
+export function ViewTabs<T extends string = string>({
+  tabs,
+  value,
+  onChange,
+  className,
+}: ViewTabsProps<T>) {
+  return (
+    <div className={cn('flex items-center gap-1', className)}>
+      {tabs.map(tab => (
+        <button
+          key={tab.value}
+          onClick={() => onChange(tab.value)}
+          className={cn(
+            'cursor-pointer px-2.5 py-1 text-xs font-medium rounded transition-colors whitespace-nowrap',
+            value === tab.value
+              ? 'bg-primary text-primary-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+          )}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  )
+}
diff --git a/src/hooks/app/useAppNavigation.ts b/src/hooks/app/useAppNavigation.ts
index 353e45f..e60b8e0 100644
--- a/src/hooks/app/useAppNavigation.ts
+++ b/src/hooks/app/useAppNavigation.ts
@@ -29,6 +29,7 @@ export function urlToView(pathname: string): ViewType {
     if (sub === "calendar") return "calendar"
     if (sub === "timeline") return "timeline"
     if (sub === "list") return "list"
+    if (sub === "kanban") return "kanban"
     return "demandas"
   }
 
@@ -75,6 +76,7 @@ export function viewToPath(view: ViewType, clientSlug: string | null): string {
     calendar: `${base}/tasks/calendar`,
     timeline: `${base}/tasks/timeline`,
     list: `${base}/tasks/list`,
+    kanban: `${base}/tasks/kanban`,
     members: `${base}/members`,
     reports: `${base}/reports`,
     "reports-fluxo": `${base}/reports/fluxo`,
diff --git a/src/hooks/infra/useSupabase.ts b/src/hooks/infra/useSupabase.ts
index 48de44d..0d474c7 100644
--- a/src/hooks/infra/useSupabase.ts
+++ b/src/hooks/infra/useSupabase.ts
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { useThrottledMutation } from '@/hooks/infra/useThrottledMutation'
 import { supabase } from '@/lib/supabase'
-import type { Task, Step } from '@/lib/steps'
+import type { Task, Subtask } from '@/lib/steps'
 import { toast } from 'sonner'
 import { logAudit } from '@/lib/audit'
 import { useTaskStore } from '@/store/useTaskStore'
@@ -33,37 +33,42 @@ interface UseSupabaseOptions {
   isAdmin?: boolean
 }
 
-async function createAllSteps(taskId: string, steps: Step[]): Promise<boolean> {
+async function createAllSubtasks(taskId: string, subtasks: Subtask[]): Promise<boolean> {
+  if (subtasks.length === 0) return true
+
   const { data, error } = await supabase
-    .from('task_steps')
+    .from('task_subtasks')
     .insert(
-      steps.map(step => ({
+      subtasks.map(s => ({
         task_id: taskId,
-        type: step.type,
-        step_order: step.order,
-        active: step.active,
-        start_date: step.start || null,
-        end_date: step.end || null,
+        title: s.title,
+        status: s.status,
+        progress_status: s.progressStatus,
+        subtask_order: s.order,
+        active: s.active,
+        start_date: s.start || null,
+        end_date: s.end || null,
       }))
     )
-    .select('id,type')
+    .select('id,title,status,subtask_order')
 
   if (error || !data) {
-    devLog('[createAllSteps] Erro ao inserir steps:', error?.message)
+    devLog('[createAllSubtasks] Erro ao inserir subtasks:', error?.message)
     return false
   }
 
-  const stepIdByType = new Map(data.map(row => [row.type, row.id]))
-  const assigneeRows = steps.flatMap(step => {
-    const stepId = stepIdByType.get(step.type)
-    if (!stepId || step.assignees.length === 0) return []
-    return step.assignees.map(memberId => ({ step_id: stepId, member_id: memberId }))
+  // Map inserted rows back by order (title+status combo can repeat, order is unique per task)
+  const idByOrder = new Map(data.map(row => [row.subtask_order, row.id]))
+  const assigneeRows = subtasks.flatMap(s => {
+    const subtaskId = idByOrder.get(s.order)
+    if (!subtaskId || s.assignees.length === 0) return []
+    return s.assignees.map(memberId => ({ subtask_id: subtaskId, member_id: memberId }))
   })
 
   if (assigneeRows.length > 0) {
-    const { error: assigneeErr } = await supabase.from('step_assignees').insert(assigneeRows)
+    const { error: assigneeErr } = await supabase.from('subtask_assignees').insert(assigneeRows)
     if (assigneeErr) {
-      devLog('[createAllSteps] Erro ao inserir assignees:', assigneeErr.message)
+      devLog('[createAllSubtasks] Erro ao inserir assignees:', assigneeErr.message)
       return false
     }
   }
@@ -77,6 +82,7 @@ function didTaskFieldsChange(prevTask: Task | undefined, nextTask: Task, resolve
   return (
     prevTask.title !== nextTask.title
     || (prevTask.clickupLink ?? null) !== (nextTask.clickupLink ?? null)
+    || prevTask.priorityOrder !== nextTask.priorityOrder
     || prevTask.status.blocked !== nextTask.status.blocked
     || (prevTask.status.blockedAt ?? null) !== (nextTask.status.blockedAt ?? null)
     || (prevTask.concludedAt ?? null) !== (nextTask.concludedAt ?? null)
@@ -94,14 +100,27 @@ export function useSupabase(options: UseSupabaseOptions = {}) {
     queryClient.invalidateQueries({ queryKey: queryKeys.tasks(clientId ?? null, isAdmin ?? false) })
   }, [queryClient, clientId, isAdmin])
 
-  const createTask = useCallback(async (taskData: Omit<Task, 'id' | 'createdAt'>): Promise<boolean> => {
+  const createTask = useCallback(async (taskData: Omit<Task, 'id' | 'createdAt' | 'priorityOrder'>): Promise<boolean> => {
     const resolvedClientId = taskData.clientId ?? clientId ?? null
+    devLog('[createTask] iniciando criação, clientId:', resolvedClientId, 'title:', taskData.title)
+
+    const priorityQuery = supabase
+      .from('tasks')
+      .select('priority_order')
+      .order('priority_order', { ascending: false })
+      .limit(1)
+
+    const { data: lastTask } = resolvedClientId === null
+      ? await priorityQuery.is('client_id', null)
+      : await priorityQuery.eq('client_id', resolvedClientId)
+    const priorityOrder = (lastTask?.[0]?.priority_order ?? -1) + 1
 
     const { data: taskRow, error: taskErr } = await supabase
       .from('tasks')
       .insert({
         title: taskData.title,
         clickup_link: taskData.clickupLink ?? null,
+        priority_order: priorityOrder,
         blocked: taskData.status.blocked,
         blocked_at: taskData.status.blockedAt ?? null,
         client_id: resolvedClientId,
@@ -109,14 +128,15 @@ export function useSupabase(options: UseSupabaseOptions = {}) {
       .select('id')
       .single()
 
+    devLog('[createTask] insert tasks respondeu, taskRow:', taskRow, 'taskErr:', taskErr)
     if (taskErr || !taskRow) {
       toast.error(toSafeUiErrorMessage(taskErr?.message))
       return false
     }
 
-    const ok = await createAllSteps(taskRow.id, taskData.steps)
+    const ok = await createAllSubtasks(taskRow.id, taskData.subtasks)
     if (!ok) {
-      toast.error('Tarefa criada mas erro ao guardar etapas')
+      toast.error('Tarefa criada mas erro ao guardar subtasks')
       invalidateTasks()
       return false
     }
@@ -169,6 +189,7 @@ export function useSupabase(options: UseSupabaseOptions = {}) {
         .update({
           title: taskData.title,
           clickup_link: taskData.clickupLink ?? null,
+          priority_order: taskData.priorityOrder,
           blocked: taskData.status.blocked,
           blocked_at: taskData.status.blockedAt ?? null,
           concluded_at: taskData.concludedAt ?? null,
@@ -184,43 +205,16 @@ export function useSupabase(options: UseSupabaseOptions = {}) {
       }
     }
 
-    const prevByType = new Map((prevTask?.steps ?? []).map(step => [step.type, step]))
-    const updates = taskData.steps
-      .map(step => {
-        const prevStep = prevByType.get(step.type)
-        const stepId = step.id || prevStep?.id || ''
-
-        if (!stepId || !prevStep) return null
-
-        const stepChanged = (
-          prevStep.type !== step.type
-          || prevStep.order !== step.order
-          || prevStep.active !== step.active
-          || (prevStep.start || '') !== (step.start || '')
-          || (prevStep.end || '') !== (step.end || '')
-        )
-
-        if (!stepChanged) return null
-
-        return {
-          id: stepId,
-          data: {
-            type: step.type,
-            step_order: step.order,
-            active: step.active,
-            start_date: step.start || null,
-            end_date: step.end || null,
-          },
-        }
-      })
-      .filter((item): item is { id: string; data: { type: Step['type']; step_order: number; active: boolean; start_date: string | null; end_date: string | null } } => item !== null)
+    const prevById = new Map((prevTask?.subtasks ?? []).map(s => [s.id, s]))
+    const nextIds = new Set(taskData.subtasks.filter(s => s.id).map(s => s.id))
 
-    for (const update of updates) {
+    // DELETE subtasks removed by the user
+    const removedIds = [...prevById.keys()].filter(id => !nextIds.has(id))
+    if (removedIds.length > 0) {
       const { error } = await supabase
-        .from('task_steps')
-        .update(update.data)
-        .eq('id', update.id)
-
+        .from('task_subtasks')
+        .delete()
+        .in('id', removedIds)
       if (error) {
         rollback()
         toast.error(toSafeUiErrorMessage(error.message))
@@ -228,33 +222,75 @@ export function useSupabase(options: UseSupabaseOptions = {}) {
       }
     }
 
-    const assigneesToAdd: Array<{ step_id: string; member_id: string }> = []
-    const assigneesToRemoveByStep = new Map<string, string[]>()
-
-    for (const step of taskData.steps) {
-      const prevStep = prevByType.get(step.type)
-      const stepId = step.id || prevStep?.id || ''
-      if (!stepId || !prevStep) continue
+    // INSERT new subtasks (id is empty string)
+    const newSubtasks = taskData.subtasks.filter(s => !s.id)
+    if (newSubtasks.length > 0) {
+      const ok = await createAllSubtasks(taskData.id, newSubtasks)
+      if (!ok) {
+        rollback()
+        toast.error('Erro ao guardar novas subtasks')
+        return false
+      }
+    }
 
-      const prevAssignees = new Set(prevStep.assignees)
-      const nextAssignees = new Set(step.assignees)
+    // UPDATE existing subtasks that changed
+    const assigneesToAdd: Array<{ subtask_id: string; member_id: string }> = []
+    const assigneesToRemoveBySubtask = new Map<string, string[]>()
+
+    for (const subtask of taskData.subtasks) {
+      if (!subtask.id) continue
+      const prev = prevById.get(subtask.id)
+      if (!prev) continue
+
+      const changed = (
+        prev.title !== subtask.title
+        || prev.status !== subtask.status
+        || prev.progressStatus !== subtask.progressStatus
+        || prev.order !== subtask.order
+        || prev.active !== subtask.active
+        || (prev.start || '') !== (subtask.start || '')
+        || (prev.end || '') !== (subtask.end || '')
+      )
+
+      if (changed) {
+        const { error } = await supabase
+          .from('task_subtasks')
+          .update({
+            title: subtask.title,
+            status: subtask.status,
+            progress_status: subtask.progressStatus,
+            subtask_order: subtask.order,
+            active: subtask.active,
+            start_date: subtask.start || null,
+            end_date: subtask.end || null,
+          })
+          .eq('id', subtask.id)
+
+        if (error) {
+          rollback()
+          toast.error(toSafeUiErrorMessage(error.message))
+          return false
+        }
+      }
 
-      const toAdd = step.assignees.filter(id => !prevAssignees.has(id))
-      const toRemove = prevStep.assignees.filter(id => !nextAssignees.has(id))
+      const prevAssignees = new Set(prev.assignees)
+      const nextAssignees = new Set(subtask.assignees)
+      const toAdd = subtask.assignees.filter(id => !prevAssignees.has(id))
+      const toRemove = prev.assignees.filter(id => !nextAssignees.has(id))
 
       if (toAdd.length > 0) {
-        assigneesToAdd.push(...toAdd.map(id => ({ step_id: stepId, member_id: id })))
+        assigneesToAdd.push(...toAdd.map(id => ({ subtask_id: subtask.id, member_id: id })))
       }
       if (toRemove.length > 0) {
-        assigneesToRemoveByStep.set(stepId, toRemove)
+        assigneesToRemoveBySubtask.set(subtask.id, toRemove)
       }
     }
 
-    for (const [stepId, memberIds] of assigneesToRemoveByStep.entries()) {
+    for (const [subtaskId, memberIds] of assigneesToRemoveBySubtask.entries()) {
       const { error } = await supabase
-        .from('step_assignees')
+        .from('subtask_assignees')
         .delete()
-        .eq('step_id', stepId)
+        .eq('subtask_id', subtaskId)
         .in('member_id', memberIds)
 
       if (error) {
@@ -266,7 +302,7 @@ export function useSupabase(options: UseSupabaseOptions = {}) {
 
     if (assigneesToAdd.length > 0) {
       const { error } = await supabase
-        .from('step_assignees')
+        .from('subtask_assignees')
         .insert(assigneesToAdd)
 
       if (error) {
@@ -346,8 +382,7 @@ export function useSupabase(options: UseSupabaseOptions = {}) {
   }, [clientId, isAdmin, memberId, queryClient])
 
   const throttledCreateTask = useThrottledMutation(createTask, MUTATION_THROTTLE_MS)
-  const throttledUpdateTask = useThrottledMutation(updateTask, MUTATION_THROTTLE_MS)
   const throttledDeleteTask = useThrottledMutation(deleteTask, MUTATION_THROTTLE_MS)
 
-  return { createTask: throttledCreateTask, updateTask: throttledUpdateTask, deleteTask: throttledDeleteTask }
+  return { createTask: throttledCreateTask, updateTask, deleteTask: throttledDeleteTask }
 }
diff --git a/src/hooks/tasks/useSubtaskQuickEdit.ts b/src/hooks/tasks/useSubtaskQuickEdit.ts
new file mode 100644
index 0000000..b50aacc
--- /dev/null
+++ b/src/hooks/tasks/useSubtaskQuickEdit.ts
@@ -0,0 +1,93 @@
+import { useCallback } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { supabase } from '@/lib/supabase'
+import { toast } from 'sonner'
+import { queryKeys } from '@/lib/queries'
+import type { SubtaskProgressStatus, Task } from '@/lib/steps'
+
+interface UseSubtaskQuickEditOptions {
+  clientId?: string | null
+  isAdmin?: boolean
+}
+
+export function useSubtaskQuickEdit({ clientId, isAdmin }: UseSubtaskQuickEditOptions = {}) {
+  const queryClient = useQueryClient()
+
+  const patchCache = useCallback((taskId: string, subtaskId: string, patch: Partial<Task['subtasks'][number]>) => {
+    const key = queryKeys.tasks(clientId ?? null, isAdmin ?? false)
+    queryClient.setQueryData<Task[]>(key, prev =>
+      prev?.map(t =>
+        t.id !== taskId ? t : {
+          ...t,
+          subtasks: t.subtasks.map(s => s.id !== subtaskId ? s : { ...s, ...patch }),
+        }
+      ) ?? []
+    )
+    return () => queryClient.invalidateQueries({ queryKey: ['tasks'] })
+  }, [queryClient, clientId, isAdmin])
+
+  const updateSubtaskAssignees = useCallback(async (
+    task: Task,
+    subtaskId: string,
+    assignees: string[],
+  ): Promise<boolean> => {
+    const rollback = patchCache(task.id, subtaskId, { assignees })
+
+    const prevAssignees = task.subtasks.find(s => s.id === subtaskId)?.assignees ?? []
+    const toAdd = assignees.filter(a => !prevAssignees.includes(a))
+    const toRemove = prevAssignees.filter(a => !assignees.includes(a))
+
+    if (toRemove.length > 0) {
+      const { error } = await supabase
+        .from('subtask_assignees')
+        .delete()
+        .eq('subtask_id', subtaskId)
+        .in('member_id', toRemove)
+      if (error) { rollback(); toast.error('Erro ao remover responsável'); return false }
+    }
+
+    if (toAdd.length > 0) {
+      const { error } = await supabase
+        .from('subtask_assignees')
+        .insert(toAdd.map(member_id => ({ subtask_id: subtaskId, member_id })))
+      if (error) { rollback(); toast.error('Erro ao atribuir responsável'); return false }
+    }
+
+    return true
+  }, [patchCache])
+
+  const updateSubtaskDates = useCallback(async (
+    task: Task,
+    subtaskId: string,
+    start: string,
+    end: string,
+  ): Promise<boolean> => {
+    const rollback = patchCache(task.id, subtaskId, { start, end })
+
+    const { error } = await supabase
+      .from('task_subtasks')
+      .update({ start_date: start || null, end_date: end || null })
+      .eq('id', subtaskId)
+
+    if (error) { rollback(); toast.error('Erro ao atualizar datas'); return false }
+    return true
+  }, [patchCache])
+
+  const updateSubtaskProgressStatus = useCallback(async (
+    task: Task,
+    subtaskId: string,
+    progressStatus: SubtaskProgressStatus,
+  ): Promise<boolean> => {
+    const rollback = patchCache(task.id, subtaskId, { progressStatus })
+
+    const { error } = await supabase
+      .from('task_subtasks')
+      .update({ progress_status: progressStatus })
+      .eq('id', subtaskId)
+
+    if (error) { rollback(); toast.error('Erro ao atualizar status'); return false }
+    return true
+  }, [patchCache])
+
+  return { updateSubtaskAssignees, updateSubtaskDates, updateSubtaskProgressStatus }
+}
diff --git a/src/hooks/tasks/useTaskActions.ts b/src/hooks/tasks/useTaskActions.ts
index 452586e..eec6435 100644
--- a/src/hooks/tasks/useTaskActions.ts
+++ b/src/hooks/tasks/useTaskActions.ts
@@ -2,9 +2,10 @@ import { useState, useCallback } from "react";
 import { toast } from "sonner";
 import { useUIStore } from "@/store/useUIStore";
 import type { Task } from "@/lib/steps";
+import type { TaskModalPayload } from "@/types/props";
 
 interface UseTaskActionsParams {
-  createTask: (data: Omit<Task, "id" | "createdAt">) => Promise<boolean>;
+  createTask: (data: Omit<Task, "id" | "createdAt" | "priorityOrder">) => Promise<boolean>;
   updateTask: (task: Task) => Promise<boolean>;
   deleteTask: (id: string) => Promise<boolean>;
   effectiveClientId: string | null | undefined;
@@ -65,7 +66,7 @@ export function useTaskActions({
     if (shouldCloseModal) closeTaskModal();
   }, [pendingDeleteTaskId, closeModalOnDelete, deleteTask, closeTaskModal]);
 
-  const saveTask = useCallback(async (taskData: Omit<Task, "id" | "createdAt">) => {
+  const saveTask = useCallback(async (taskData: TaskModalPayload) => {
     let ok: boolean;
 
     if (editingTask) {
diff --git a/src/hooks/tasks/useTaskPriorityOrder.ts b/src/hooks/tasks/useTaskPriorityOrder.ts
new file mode 100644
index 0000000..221e3c0
--- /dev/null
+++ b/src/hooks/tasks/useTaskPriorityOrder.ts
@@ -0,0 +1,58 @@
+import { useCallback } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { supabase } from '@/lib/supabase'
+import { queryKeys } from '@/lib/queries'
+import { useTaskStore } from '@/store/useTaskStore'
+import type { Task } from '@/lib/steps'
+
+interface UseTaskPriorityOrderOptions {
+  clientId?: string | null
+  isAdmin?: boolean
+}
+
+export function useTaskPriorityOrder({ clientId, isAdmin }: UseTaskPriorityOrderOptions = {}) {
+  const queryClient = useQueryClient()
+
+  return useCallback(async (orderedTasks: Task[]): Promise<boolean> => {
+    const key = queryKeys.tasks(clientId ?? null, isAdmin ?? false)
+    const cachedTasks = queryClient.getQueryData<Task[]>(key) ?? []
+    const orderedIds = new Set(orderedTasks.map(task => task.id))
+    const hiddenTasks = cachedTasks
+      .filter(task => !orderedIds.has(task.id))
+      .sort((a, b) => a.priorityOrder - b.priorityOrder || b.createdAt.localeCompare(a.createdAt))
+    const allTasksInNextOrder = [...orderedTasks, ...hiddenTasks]
+    const orderById = new Map(allTasksInNextOrder.map((task, index) => [task.id, index]))
+
+    const nextTasks = cachedTasks
+      .map(task => {
+        const nextOrder = orderById.get(task.id)
+        return nextOrder === undefined ? task : { ...task, priorityOrder: nextOrder }
+      })
+      .sort((a, b) => a.priorityOrder - b.priorityOrder || b.createdAt.localeCompare(a.createdAt))
+
+    queryClient.setQueryData(key, nextTasks)
+    useTaskStore.getState().applyOptimisticUpdate(nextTasks)
+
+    const updates = await Promise.all(
+      allTasksInNextOrder.map((task, index) =>
+        supabase
+          .from('tasks')
+          .update({ priority_order: index })
+          .eq('id', task.id),
+      ),
+    )
+    const error = updates.find(result => result.error)?.error
+
+    if (error) {
+      queryClient.setQueryData(key, cachedTasks)
+      useTaskStore.getState().clearOptimistic()
+      toast.error('Erro ao reordenar demandas')
+      return false
+    }
+
+    useTaskStore.getState().clearOptimistic()
+    toast.success('Prioridade das demandas atualizada')
+    return true
+  }, [clientId, isAdmin, queryClient])
+}
diff --git a/src/hooks/tasks/useTaskQuickActions.ts b/src/hooks/tasks/useTaskQuickActions.ts
index 4563ab0..979e2ed 100644
--- a/src/hooks/tasks/useTaskQuickActions.ts
+++ b/src/hooks/tasks/useTaskQuickActions.ts
@@ -45,8 +45,48 @@ export function useTaskQuickActions(memberId?: string | null) {
     return true
   }, [invalidate])
 
+  const concludeTasks = useCallback(async (tasks: Task[]) => {
+    const pendingTasks = tasks.filter(task => !task.concludedAt)
+    if (pendingTasks.length === 0) {
+      toast.info('As demandas selecionadas já estão concluídas')
+      return false
+    }
+
+    const now = new Date().toISOString()
+    const { error } = await supabase
+      .from('tasks')
+      .update({ concluded_at: now, concluded_by: memberId ?? null })
+      .in('id', pendingTasks.map(task => task.id))
+
+    if (error) { toast.error('Erro ao concluir demandas'); return false }
+    toast.success(`${pendingTasks.length} demanda${pendingTasks.length !== 1 ? 's' : ''} concluída${pendingTasks.length !== 1 ? 's' : ''}`)
+    invalidate()
+    return true
+  }, [memberId, invalidate])
+
+  const blockTasks = useCallback(async (tasks: Task[]) => {
+    const unblockedTasks = tasks.filter(task => !task.status.blocked)
+    if (unblockedTasks.length === 0) {
+      toast.info('As demandas selecionadas já estão bloqueadas')
+      return false
+    }
+
+    const now = new Date().toISOString().split('T')[0]
+    const { error } = await supabase
+      .from('tasks')
+      .update({ blocked: true, blocked_at: now })
+      .in('id', unblockedTasks.map(task => task.id))
+
+    if (error) { toast.error('Erro ao bloquear demandas'); return false }
+    toast.success(`${unblockedTasks.length} demanda${unblockedTasks.length !== 1 ? 's' : ''} bloqueada${unblockedTasks.length !== 1 ? 's' : ''}`)
+    invalidate()
+    return true
+  }, [invalidate])
+
   return {
     concludeTask: useThrottledMutation(concludeTask, THROTTLE_MS),
     toggleBlock: useThrottledMutation(toggleBlock, THROTTLE_MS),
+    concludeTasks,
+    blockTasks,
   }
 }
diff --git a/src/hooks/ui/useFormState.ts b/src/hooks/ui/useFormState.ts
index 4713a19..b257505 100644
--- a/src/hooks/ui/useFormState.ts
+++ b/src/hooks/ui/useFormState.ts
@@ -30,6 +30,8 @@ export function useFormState<T>(
     setSubmitting(true)
     try {
       await fn()
+    } catch (err) {
+      console.error('[withSubmit] Erro inesperado ao submeter formulário:', err)
     } finally {
       setSubmitting(false)
     }
diff --git a/src/hooks/ui/usePhaseDrag.ts b/src/hooks/ui/usePhaseDrag.ts
index 23dac7d..53c59a9 100644
--- a/src/hooks/ui/usePhaseDrag.ts
+++ b/src/hooks/ui/usePhaseDrag.ts
@@ -1,11 +1,11 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import {
   toLocalDate, toDateStr, addDays, normaliseTask,
-  type DragState, type DragPreview, type Task, type Step, type StepType,
+  type DragState, type DragPreview, type Task, type Subtask,
 } from '@/utils/dashboardUtils';
 import { isWeekendOrHoliday, nextNonHolidayBusinessDay, type Holiday } from '@/utils/holidayUtils';
 
-type PendingDragUpdate = { task: Task; stepType: StepType };
+type PendingDragUpdate = { task: Task; subtaskId: string };
 
 export function usePhaseDrag(tasks: Task[], onUpdateTask: (task: Task) => void, holidays: Holiday[] = []) {
   const dragStateRef = useRef<DragState | null>(null);
@@ -20,7 +20,7 @@ export function usePhaseDrag(tasks: Task[], onUpdateTask: (task: Task) => void,
       if (!ds) return;
       const delta = Math.round((e.clientX - ds.startX) / ds.colWidth);
       if (delta !== 0) didDragRef.current = true;
-      setDragPreview({ taskId: ds.taskId, stepType: ds.stepType, deltaDays: delta, type: ds.type });
+      setDragPreview({ taskId: ds.taskId, subtaskId: ds.subtaskId, deltaDays: delta, type: ds.type });
     };
 
     const onUp = (e: MouseEvent) => {
@@ -46,8 +46,8 @@ export function usePhaseDrag(tasks: Task[], onUpdateTask: (task: Task) => void,
           const norm = normaliseTask(task);
           const updatedTask: Task = {
             ...norm,
-            steps: norm.steps.map((s: Step) =>
-              s.type === ds.stepType
+            subtasks: norm.subtasks.map((s: Subtask) =>
+              s.id === ds.subtaskId
                 ? { ...s, start: toDateStr(newStart), end: toDateStr(newEnd) }
                 : s
             ),
@@ -55,16 +55,18 @@ export function usePhaseDrag(tasks: Task[], onUpdateTask: (task: Task) => void,
 
           const startStr = toDateStr(newStart);
           const endStr = toDateStr(newEnd);
-            if (isWeekendOrHoliday(startStr, holidays) || isWeekendOrHoliday(endStr, holidays)) {
-              originalTaskRef.current = { start: ds.originalStart, end: ds.originalEnd };
-              setPendingDragUpdate({ task: updatedTask, stepType: ds.stepType });
-            } else {
-              onUpdateTask(updatedTask);
-            }
+          if (isWeekendOrHoliday(startStr, holidays) || isWeekendOrHoliday(endStr, holidays)) {
+            originalTaskRef.current = { start: ds.originalStart, end: ds.originalEnd };
+            setPendingDragUpdate({ task: updatedTask, subtaskId: ds.subtaskId });
+          } else {
+            onUpdateTask(updatedTask);
+          }
         }
       }
       dragStateRef.current = null;
-      setDragPreview(null);
+      // Clear preview in the next microtask so the parent's state update (onUpdateTask)
+      // and this state update land in the same React batch, preventing a flicker frame.
+      Promise.resolve().then(() => setDragPreview(null));
       setTimeout(() => { didDragRef.current = false; }, 0);
     };
 
@@ -79,17 +81,17 @@ export function usePhaseDrag(tasks: Task[], onUpdateTask: (task: Task) => void,
   const startDrag = useCallback((
     e: React.MouseEvent,
     taskId: string,
-    stepType: StepType,
+    subtaskId: string,
     type: DragState['type'],
-    step: Step,
+    subtask: Subtask,
     colWidth: number,
   ) => {
     e.preventDefault();
     e.stopPropagation();
     dragStateRef.current = {
-      type, taskId, stepType,
-      originalStart: toLocalDate(step.start),
-      originalEnd: toLocalDate(step.end),
+      type, taskId, subtaskId,
+      originalStart: toLocalDate(subtask.start),
+      originalEnd: toLocalDate(subtask.end),
       startX: e.clientX,
       colWidth,
     };
@@ -113,21 +115,19 @@ export function usePhaseDrag(tasks: Task[], onUpdateTask: (task: Task) => void,
 
     const adjustedTask: Task = {
       ...pendingDragUpdate.task,
-      steps: pendingDragUpdate.task.steps.map((step: Step) => {
-        if (step.type !== pendingDragUpdate.stepType) return step;
-
-        const adjustedStart = isWeekendOrHoliday(step.start, holidays)
-          ? nextNonHolidayBusinessDay(step.start, holidays)
-          : step.start;
-        let adjustedEnd = isWeekendOrHoliday(step.end, holidays)
-          ? nextNonHolidayBusinessDay(step.end, holidays)
-          : step.end;
-
-        if (adjustedEnd < adjustedStart) {
-          adjustedEnd = adjustedStart;
-        }
+      subtasks: pendingDragUpdate.task.subtasks.map((s: Subtask) => {
+        if (s.id !== pendingDragUpdate.subtaskId) return s;
+
+        const adjustedStart = isWeekendOrHoliday(s.start, holidays)
+          ? nextNonHolidayBusinessDay(s.start, holidays)
+          : s.start;
+        let adjustedEnd = isWeekendOrHoliday(s.end, holidays)
+          ? nextNonHolidayBusinessDay(s.end, holidays)
+          : s.end;
+
+        if (adjustedEnd < adjustedStart) adjustedEnd = adjustedStart;
 
-        return { ...step, start: adjustedStart, end: adjustedEnd };
+        return { ...s, start: adjustedStart, end: adjustedEnd };
       }),
     };
 
diff --git a/src/index.css b/src/index.css
index 662cd42..f74f259 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,24 +4,24 @@
 
 @layer base {
   :root {
-    --background: oklch(1 0 0);
+    --background: oklch(0.96 0 0);
     --foreground: oklch(0.145 0 0);
-    --card: oklch(0.98 0 0);
+    --card: oklch(1 0 0);
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
     --primary: oklch(0.145 0 0);
     --primary-foreground: oklch(1 0 0);
-    --secondary: oklch(0.961 0 0);
+    --secondary: oklch(0.92 0 0);
     --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.961 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.961 0 0);
+    --muted: oklch(0.92 0 0);
+    --muted-foreground: oklch(0.48 0 0);
+    --accent: oklch(0.92 0 0);
     --accent-foreground: oklch(0.205 0 0);
     --destructive: oklch(0.577 0.245 27.325);
     --destructive-foreground: oklch(1 0 0);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
+    --border: oklch(0.87 0 0);
+    --input: oklch(0.87 0 0);
     --ring: oklch(0.145 0 0);
     --radius: 0.5rem;
   }
diff --git a/src/lib/accessControl.ts b/src/lib/accessControl.ts
index ec4c97d..0bbb8a5 100644
--- a/src/lib/accessControl.ts
+++ b/src/lib/accessControl.ts
@@ -48,6 +48,7 @@ const VIEW_RULES: Record<ViewType, ViewRule> = {
   timeline: { requiresClient: true, roles: ['admin', 'user'], permission: 'view:dashboard' },
   list: { requiresClient: true, roles: ['admin', 'user'], permission: 'view:dashboard' },
   demandas: { requiresClient: true, roles: ['admin', 'user'], permission: 'view:dashboard' },
+  kanban: { requiresClient: true, roles: ['admin', 'user'], permission: 'view:dashboard' },
   members: { requiresClient: true, roles: ['admin', 'user'], permission: 'view:members' },
   reports: { requiresClient: true, roles: ['admin', 'user'], permission: 'view:reports' },
   'reports-fluxo': { requiresClient: true, roles: ['admin', 'user'], permission: 'view:reports' },
diff --git a/src/lib/queries.ts b/src/lib/queries.ts
index e92d252..185eda3 100644
--- a/src/lib/queries.ts
+++ b/src/lib/queries.ts
@@ -1,5 +1,5 @@
 import { supabase } from '@/lib/supabase'
-import type { Task, Step, StepType } from '@/lib/steps'
+import type { SubtaskProgressStatus, Task, Subtask, SubtaskStatus } from '@/lib/steps'
 import type { Member } from '@/hooks/infra/useSupabase'
 import type { DbTaskRow } from '@/types/db'
 import { DbTaskRowSchema } from '@/lib/validators'
@@ -17,16 +17,18 @@ export const queryKeys = {
 
 function dbRowToTask(row: DbTaskRow): Task {
   const parsed = DbTaskRowSchema.parse(row)
-  const steps: Step[] = parsed.task_steps
-    .sort((a, b) => a.step_order - b.step_order)
+  const subtasks: Subtask[] = parsed.task_subtasks
+    .sort((a, b) => a.subtask_order - b.subtask_order)
     .map(s => ({
       id: s.id,
-      type: s.type as StepType,
-      order: s.step_order,
+      title: s.title,
+      status: s.status as SubtaskStatus,
+      progressStatus: s.progress_status as SubtaskProgressStatus,
+      order: s.subtask_order,
       active: s.active,
       start: s.start_date ?? '',
       end: s.end_date ?? '',
-      assignees: s.step_assignees.map(a => a.member_id),
+      assignees: s.subtask_assignees.map(a => a.member_id),
     }))
 
   return {
@@ -34,6 +36,7 @@ function dbRowToTask(row: DbTaskRow): Task {
     title: parsed.title,
     clickupLink: parsed.clickup_link ?? undefined,
     clientId: parsed.client_id ?? undefined,
+    priorityOrder: parsed.priority_order,
     status: {
       blocked: parsed.blocked,
       blockedAt: parsed.blocked_at ?? undefined,
@@ -41,15 +44,15 @@ function dbRowToTask(row: DbTaskRow): Task {
     createdAt: parsed.created_at,
     concludedAt: parsed.concluded_at ?? undefined,
     concludedBy: parsed.concluded_by ?? undefined,
-    steps,
+    subtasks,
   }
 }
 
 const TASK_SELECT = `
-  id, title, clickup_link, blocked, blocked_at, created_at, client_id, concluded_at, concluded_by,
-  task_steps (
-    id, type, step_order, active, start_date, end_date,
-    step_assignees ( member_id )
+  id, title, clickup_link, priority_order, blocked, blocked_at, created_at, client_id, concluded_at, concluded_by,
+  task_subtasks (
+    id, title, status, progress_status, subtask_order, active, start_date, end_date,
+    subtask_assignees ( member_id )
   )
 ` as const
 
@@ -62,6 +65,7 @@ export async function fetchTasksFromDb(
     const { data, error } = await supabase
       .from('tasks')
       .select(TASK_SELECT)
+      .order('priority_order', { ascending: true })
       .order('created_at', { ascending: false })
     if (error) throw new Error(error.message)
     return (data ?? []).map(dbRowToTask)
@@ -71,6 +75,7 @@ export async function fetchTasksFromDb(
     .from('tasks')
     .select(TASK_SELECT)
     .eq('client_id', clientId)
+    .order('priority_order', { ascending: true })
     .order('created_at', { ascending: false })
 
   if (error) throw new Error(error.message)
diff --git a/src/lib/steps.ts b/src/lib/steps.ts
index 9312601..cf1ef2f 100644
--- a/src/lib/steps.ts
+++ b/src/lib/steps.ts
@@ -9,18 +9,42 @@ export const STEP_TYPES_ORDER = [
   'publicacao',
 ] as const;
 
-export type StepType = typeof STEP_TYPES_ORDER[number];
+/** Status possíveis de uma subtask (ex-StepType) */
+export type SubtaskStatus = typeof STEP_TYPES_ORDER[number];
 
-export interface Step {
+export const SUBTASK_PROGRESS_STATUS_ORDER = [
+  'todo',
+  'ready',
+  'in-progress',
+  'in-review',
+  'waiting',
+  'blocked',
+  'needs-changes',
+  'paused',
+  'done',
+  'canceled',
+] as const;
+
+export type SubtaskProgressStatus = typeof SUBTASK_PROGRESS_STATUS_ORDER[number];
+
+/** @deprecated use SubtaskStatus */
+export type StepType = SubtaskStatus;
+
+export interface Subtask {
   id: string;
-  type: StepType;
-  start: string;   // YYYY-MM-DD, empty if not set
-  end: string;     // YYYY-MM-DD, empty if not set
+  title: string;          // nome livre obrigatório
+  status: SubtaskStatus;  // ex-type
+  progressStatus: SubtaskProgressStatus;
+  start: string;          // YYYY-MM-DD, empty if not set
+  end: string;            // YYYY-MM-DD, empty if not set
   assignees: string[];
   active: boolean;
   order: number;
 }
 
+/** @deprecated use Subtask */
+export type Step = Subtask & { type: SubtaskStatus };
+
 export interface TaskStatus {
   blocked: boolean;
   blockedAt?: string; // YYYY-MM-DD — the date when blocked was set
@@ -31,14 +55,15 @@ export interface Task {
   title: string;
   clickupLink?: string;
   clientId?: string;
+  priorityOrder: number;
   status: TaskStatus;
-  steps: Step[];
+  subtasks: Subtask[];
   createdAt: string;
   concludedAt?: string;
   concludedBy?: string;
 }
 
-export const STEP_META: Record<StepType, {
+export const STEP_META: Record<SubtaskStatus, {
   label: string;
   tag: string;
   color: string;      // card bg/text/border in modal
@@ -130,61 +155,105 @@ export const STEP_META: Record<StepType, {
   },
 };
 
-/** Returns the step that should be highlighted as "current" based on today's date */
-export function getCurrentStep(steps: Step[], today: string): Step | null {
-  const active = steps.filter(s => s.active && s.start && s.end);
+export const SUBTASK_PROGRESS_META: Record<SubtaskProgressStatus, {
+  label: string;
+  description: string;
+  className: string;
+}> = {
+  todo: {
+    label: 'A fazer',
+    description: 'Ainda nao iniciada',
+    className: 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-700',
+  },
+  ready: {
+    label: 'Pronta',
+    description: 'Liberada para começar',
+    className: 'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-950 dark:text-sky-300 dark:border-sky-800',
+  },
+  'in-progress': {
+    label: 'Em andamento',
+    description: 'Trabalho ativo',
+    className: 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
+  },
+  'in-review': {
+    label: 'Em revisão',
+    description: 'Aguardando validação interna',
+    className: 'bg-violet-100 text-violet-800 border-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:border-violet-800',
+  },
+  waiting: {
+    label: 'Aguardando',
+    description: 'Dependência externa ou retorno',
+    className: 'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800',
+  },
+  blocked: {
+    label: 'Bloqueada',
+    description: 'Impeditivo claro',
+    className: 'bg-red-100 text-red-800 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800',
+  },
+  'needs-changes': {
+    label: 'Precisa de ajustes',
+    description: 'Retornou com correções',
+    className: 'bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800',
+  },
+  paused: {
+    label: 'Pausada',
+    description: 'Interrompida temporariamente',
+    className: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-zinc-900 dark:text-zinc-300 dark:border-zinc-700',
+  },
+  done: {
+    label: 'Concluída',
+    description: 'Finalizada',
+    className: 'bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-950 dark:text-emerald-300 dark:border-emerald-800',
+  },
+  canceled: {
+    label: 'Cancelada',
+    description: 'Não será executada',
+    className: 'bg-neutral-100 text-neutral-600 border-neutral-200 line-through dark:bg-neutral-900 dark:text-neutral-400 dark:border-neutral-700',
+  },
+};
+
+/** Returns the subtask that should be highlighted as "current" based on today's date */
+export function getCurrentSubtask(subtasks: Subtask[], today: string): Subtask | null {
+  const active = subtasks.filter(s => s.active && s.start && s.end);
   if (active.length === 0) return null;
 
-  // Step whose range includes today
   const current = active.find(s => s.start <= today && s.end >= today);
   if (current) return current;
 
-  // Next upcoming step
   const upcoming = active.filter(s => s.start > today).sort((a, b) => a.start.localeCompare(b.start));
   if (upcoming.length > 0) return upcoming[0];
 
-  // All steps in the past — return the last one
   return active.sort((a, b) => b.end.localeCompare(a.end))[0];
 }
 
+/** @deprecated use getCurrentSubtask */
+export function getCurrentStep(subtasks: Subtask[], today: string): Subtask | null {
+  return getCurrentSubtask(subtasks, today);
+}
+
 /** Returns label like "Em Design · Bloqueado" or "Análise UX · Em andamento" */
-export function getStatusLabel(task: { status: TaskStatus; steps: Step[] }, today: string): string {
-  const step = getCurrentStep(task.steps, today);
-  const stepLabel = step ? (STEP_META[step.type]?.label ?? step.type) : 'Sem steps';
+export function getStatusLabel(task: { status: TaskStatus; subtasks: Subtask[] }, today: string): string {
+  const subtask = getCurrentSubtask(task.subtasks, today);
+  const stepLabel = subtask ? (STEP_META[subtask.status]?.label ?? subtask.status) : 'Sem subtasks';
   const stateLabel = task.status.blocked ? 'Bloqueado' : 'Em andamento';
   return `${stepLabel} · ${stateLabel}`;
 }
 
-/** Returns true if a given step bar should be shown as blocked (red) */
+/** Returns true if a given subtask bar should be shown as blocked (red) */
 export function isStepBlocked(task: { status: TaskStatus }, stepStart: string): boolean {
   if (!task.status.blocked || !task.status.blockedAt) return false;
   return stepStart >= task.status.blockedAt;
 }
 
-/** Creates default steps array for a new task */
-export function createDefaultSteps(): Step[] {
-  return STEP_TYPES_ORDER.map((type, order) => ({
-    id: '',
-    type,
-    start: '',
-    end: '',
-    assignees: [],
-    active: false,
-    order,
-  }));
-}
-
 /**
  * Formato legado de tarefa (localStorage / Google Drive antigo).
- * Pode conter `steps` já migrados ou apenas `phases` + `assignee`.
+ * Pode conter `steps`/`subtasks` já migrados ou apenas `phases` + `assignee`.
  */
 export interface LegacyTask {
   id?: string;
   title?: string;
   clickupLink?: string;
-  /** Assignee global, usado quando não há `phaseAssignees`. */
   assignee?: string;
-  /** Status como string ('bloqueado', 'em andamento', …) ou objeto moderno. */
   status?: string | TaskStatus;
   createdAt?: string;
   phases?: {
@@ -194,64 +263,74 @@ export interface LegacyTask {
     qa?: { start: string; end: string };
   };
   phaseAssignees?: Record<string, string>;
-  /** Presença de `steps` indica tarefa já no formato moderno. */
-  steps?: Step[];
+  /** Suporte a ambos os formatos durante a transição */
+  steps?: Array<{ type?: string; status?: string; progressStatus?: SubtaskProgressStatus; title?: string; id?: string; start?: string; end?: string; assignees?: string[]; active?: boolean; order?: number }>;
+  subtasks?: Subtask[];
 }
 
-/** Migrates a legacy task (with phases/assignee) to the new steps format */
-export function migrateLegacyTask(task: LegacyTask): { status: TaskStatus; steps: Step[] } {
-  if (task.steps) {
+/** Migrates a legacy task to the subtasks format */
+export function migrateLegacyTask(task: LegacyTask): { status: TaskStatus; subtasks: Subtask[] } {
+  if (task.subtasks) {
     const existingStatus = task.status;
     const status: TaskStatus =
       existingStatus && typeof existingStatus === 'object'
         ? existingStatus
         : { blocked: false };
+    return {
+      status,
+      subtasks: task.subtasks.map(s => ({
+        ...s,
+        progressStatus: s.progressStatus ?? 'todo',
+      })),
+    };
+  }
 
-    const stepByType = new Map(task.steps.map(step => [step.type, step]));
-    const steps = STEP_TYPES_ORDER.map((type, order) => {
-      const existing = stepByType.get(type);
-      if (existing) {
-        return {
-          ...existing,
-          order,
-        };
-      }
+  if (task.steps) {
+    const existingStatus = task.status;
+    const status: TaskStatus =
+      existingStatus && typeof existingStatus === 'object'
+        ? existingStatus
+        : { blocked: false };
 
-      return {
-        id: '',
-        type,
-        start: '',
-        end: '',
-        assignees: [],
-        active: false,
-        order,
-      };
-    });
+    const subtasks: Subtask[] = task.steps.map((s, i) => ({
+      id: s.id ?? '',
+      title: s.title ?? s.type ?? s.status ?? '',
+      status: (s.status ?? s.type ?? 'design') as SubtaskStatus,
+      progressStatus: s.progressStatus ?? 'todo',
+      start: s.start ?? '',
+      end: s.end ?? '',
+      assignees: s.assignees ?? [],
+      active: s.active ?? false,
+      order: s.order ?? i,
+    }));
 
-    return { status, steps };
+    return { status, subtasks };
   }
 
-  const legacyMap: Partial<Record<string, StepType>> = {
+  const legacyMap: Record<string, SubtaskStatus> = {
     design: 'design',
     approval: 'aprovacao-design',
     dev: 'desenvolvimento',
     qa: 'qa',
   };
 
-  const steps: Step[] = STEP_TYPES_ORDER.map((type, order) => {
-    const legacyKey = Object.entries(legacyMap).find(([, v]) => v === type)?.[0];
-    const legacyPhase = legacyKey ? task.phases?.[legacyKey as keyof NonNullable<LegacyTask['phases']>] : null;
-    const legacyAssignee = legacyKey ? (task.phaseAssignees?.[legacyKey] || task.assignee) : null;
-    return {
+  const subtasks: Subtask[] = Object.entries(legacyMap).reduce<Subtask[]>((acc, [legacyKey, statusVal], i) => {
+    const legacyPhase = task.phases?.[legacyKey as keyof NonNullable<LegacyTask['phases']>];
+    if (!legacyPhase) return acc;
+    const legacyAssignee = task.phaseAssignees?.[legacyKey] || task.assignee;
+    acc.push({
       id: '',
-      type,
-      start: legacyPhase?.start || '',
-      end: legacyPhase?.end || '',
+      title: statusVal,
+      status: statusVal,
+      progressStatus: 'todo',
+      start: legacyPhase.start,
+      end: legacyPhase.end,
       assignees: legacyAssignee ? [legacyAssignee] : [],
-      active: !!legacyPhase,
-      order,
-    };
-  });
+      active: true,
+      order: i,
+    });
+    return acc;
+  }, []);
 
   const oldStatus = typeof task.status === 'string' ? task.status : undefined;
   const blocked = oldStatus === 'bloqueado';
@@ -260,5 +339,5 @@ export function migrateLegacyTask(task: LegacyTask): { status: TaskStatus; steps
     blockedAt: blocked ? (task.createdAt?.split('T')[0] ?? undefined) : undefined,
   };
 
-  return { status, steps };
+  return { status, subtasks };
 }
diff --git a/src/lib/validators.ts b/src/lib/validators.ts
index 8af8ad7..e5a6a94 100644
--- a/src/lib/validators.ts
+++ b/src/lib/validators.ts
@@ -2,31 +2,34 @@ import { z } from 'zod'
 
 // ─── Tasks ────────────────────────────────────────────────────────────────────
 
-export const DbStepAssigneeSchema = z.object({
+export const DbSubtaskAssigneeSchema = z.object({
   member_id: z.string(),
 })
 
-export const DbStepRowSchema = z.object({
+export const DbSubtaskRowSchema = z.object({
   id: z.string().min(1),
-  type: z.string().min(1),
-  step_order: z.number().int().nonnegative(),
+  title: z.string(),
+  status: z.string().min(1),
+  progress_status: z.string().min(1).default('todo'),
+  subtask_order: z.number().int().nonnegative(),
   active: z.boolean(),
   start_date: z.string().nullable(),
   end_date: z.string().nullable(),
-  step_assignees: z.array(DbStepAssigneeSchema).default([]),
+  subtask_assignees: z.array(DbSubtaskAssigneeSchema).default([]),
 })
 
 export const DbTaskRowSchema = z.object({
   id: z.string().min(1),
   title: z.string().min(1),
   clickup_link: z.string().nullable().transform(v => v === '' ? null : v),
+  priority_order: z.number().int().nonnegative().default(0),
   blocked: z.boolean(),
   blocked_at: z.string().nullable(),
   created_at: z.string(),
   concluded_at: z.string().nullable(),
   concluded_by: z.string().nullable(),
   client_id: z.string().nullable(),
-  task_steps: z.array(DbStepRowSchema).default([]),
+  task_subtasks: z.array(DbSubtaskRowSchema).default([]),
 })
 
 export type ValidatedDbTaskRow = z.infer<typeof DbTaskRowSchema>
diff --git a/src/store/usePlanningFiltersStore.ts b/src/store/usePlanningFiltersStore.ts
new file mode 100644
index 0000000..3f15b26
--- /dev/null
+++ b/src/store/usePlanningFiltersStore.ts
@@ -0,0 +1,54 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import type { StepType } from '@/lib/steps';
+
+export type CalendarViewMode = 'step' | 'demand';
+
+interface PlanningFiltersState {
+  filterAssignee: string;
+  setFilterAssignee: (value: string) => void;
+
+  filterStatus: string;
+  setFilterStatus: (value: string) => void;
+
+  filterSteps: StepType[];
+  toggleStepFilter: (type: StepType) => void;
+
+  filterPeriodDays: number;
+  setFilterPeriodDays: (value: number) => void;
+
+  viewMode: CalendarViewMode;
+  setViewMode: (mode: CalendarViewMode) => void;
+
+  clearFilters: () => void;
+}
+
+export const usePlanningFiltersStore = create<PlanningFiltersState>()(
+  devtools(
+    (set) => ({
+      filterAssignee: '',
+      setFilterAssignee: (filterAssignee) => set({ filterAssignee }),
+
+      filterStatus: '',
+      setFilterStatus: (filterStatus) => set({ filterStatus }),
+
+      filterSteps: [],
+      toggleStepFilter: (type) =>
+        set((s) => ({
+          filterSteps: s.filterSteps.includes(type)
+            ? s.filterSteps.filter((t) => t !== type)
+            : [...s.filterSteps, type],
+        })),
+
+      filterPeriodDays: 60,
+      setFilterPeriodDays: (filterPeriodDays) => set({ filterPeriodDays }),
+
+      viewMode: 'step',
+      setViewMode: (viewMode) => set({ viewMode }),
+
+      clearFilters: () =>
+        set({ filterAssignee: '', filterStatus: '', filterSteps: [], filterPeriodDays: 60 }),
+    }),
+    { name: 'app/planning-filters', enabled: true }
+  )
+);
diff --git a/src/store/useUIStore.ts b/src/store/useUIStore.ts
index 1996f94..4e7a39a 100644
--- a/src/store/useUIStore.ts
+++ b/src/store/useUIStore.ts
@@ -20,6 +20,7 @@ export type ViewType =
   | 'tools-export'
   | 'tools-integrations'
   | 'demandas'
+  | 'kanban'
   | 'profile'
 export type DashboardMode = 'calendar' | 'timeline'
 
diff --git a/src/types/db.ts b/src/types/db.ts
index 8e539fe..1e6f489 100644
--- a/src/types/db.ts
+++ b/src/types/db.ts
@@ -8,10 +8,12 @@
 
 // ─── Supabase rows ────────────────────────────────────────────────────────────
 
+/** @deprecated use DbSubtaskAssigneeRow */
 export interface DbStepAssigneeRow {
   member_id: string;
 }
 
+/** @deprecated use DbSubtaskRow */
 export interface DbStepRow {
   id: string;
   type: string;
@@ -22,7 +24,8 @@ export interface DbStepRow {
   step_assignees: DbStepAssigneeRow[];
 }
 
-export interface DbTaskRow {
+/** @deprecated use DbTaskRow (com task_subtasks) */
+export interface DbTaskRowLegacy {
   id: string;
   title: string;
   clickup_link: string | null;
@@ -35,6 +38,36 @@ export interface DbTaskRow {
   task_steps: DbStepRow[];
 }
 
+export interface DbSubtaskAssigneeRow {
+  member_id: string;
+}
+
+export interface DbSubtaskRow {
+  id: string;
+  title: string;
+  status: string;
+  progress_status: string;
+  subtask_order: number;
+  active: boolean;
+  start_date: string | null;
+  end_date: string | null;
+  subtask_assignees: DbSubtaskAssigneeRow[];
+}
+
+export interface DbTaskRow {
+  id: string;
+  title: string;
+  clickup_link: string | null;
+  priority_order: number;
+  blocked: boolean;
+  blocked_at: string | null;
+  created_at: string;
+  concluded_at: string | null;
+  concluded_by: string | null;
+  client_id: string | null;
+  task_subtasks: DbSubtaskRow[];
+}
+
 // ─── RBAC / Multi-tenant rows ─────────────────────────────────────────────────
 
 export interface DbClientRow {
diff --git a/src/types/props.ts b/src/types/props.ts
index fffa74c..f8ba1ed 100644
--- a/src/types/props.ts
+++ b/src/types/props.ts
@@ -6,9 +6,11 @@
  */
 
 import type { Task } from '../lib/steps';
+import type { ViewType } from '@/store/useUIStore';
 import type { Member } from '@/hooks/infra/useSupabase';
 import type { Holiday } from '../utils/holidayUtils';
-import type { CalendarViewMode } from '../utils/dashboardUtils';
+
+export type TaskModalPayload = Omit<Task, 'id' | 'createdAt' | 'priorityOrder'> & Partial<Pick<Task, 'priorityOrder'>>;
 
 // ─── TaskModal ────────────────────────────────────────────────────────────────
 
@@ -18,7 +20,7 @@ export interface TaskModalProps {
   members: Member[];
   onClose: () => void;
   /** Chamado com os dados prontos a guardar (sem `id` / `createdAt` se nova). */
-  onSave: (taskData: Omit<Task, 'id' | 'createdAt'>) => Promise<void>;
+  onSave: (taskData: TaskModalPayload) => Promise<void>;
   /** Chamado com o id da tarefa a eliminar; omitido no modal de criação. */
   onDelete?: (id: string) => void;
   holidays: Holiday[];
@@ -27,7 +29,8 @@ export interface TaskModalProps {
 // ─── PlanningView ─────────────────────────────────────────────────────────────
 
 export interface PlanningViewProps {
-  subview: 'calendar' | 'timeline' | 'list' | 'demandas';
+  subview: 'calendar' | 'timeline' | 'list' | 'demandas' | 'kanban';
+  onViewChange: (view: ViewType) => void;
   onEdit: (task: Task) => void;
   onDelete: (id: string) => void;
   onUpdateTask: (task: Task) => void;
@@ -40,12 +43,9 @@ export interface PlanningViewProps {
 
 export interface CalendarViewProps {
   tasks: Task[];
-  members: Member[];
   onEdit: (task: Task) => void;
-  onDelete: (id: string) => void;
   onUpdateTask: (task: Task) => void;
   holidays: Holiday[];
-  viewMode?: CalendarViewMode;
 }
 
 // ─── TimelineView ─────────────────────────────────────────────────────────────
@@ -57,7 +57,6 @@ export interface TimelineViewProps {
   onDelete: (id: string) => void;
   onUpdateTask: (task: Task) => void;
   holidays: Holiday[];
-  daysRange: number;
 }
 
 // ─── MembersView ─────────────────────────────────────────────────────────────
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 171ae50..eca079d 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -221,6 +221,36 @@ export type Database = {
           },
         ]
       }
+      subtask_assignees: {
+        Row: {
+          member_id: string
+          subtask_id: string
+        }
+        Insert: {
+          member_id: string
+          subtask_id: string
+        }
+        Update: {
+          member_id?: string
+          subtask_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "subtask_assignees_member_id_fkey"
+            columns: ["member_id"]
+            isOneToOne: false
+            referencedRelation: "members"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "subtask_assignees_subtask_id_fkey"
+            columns: ["subtask_id"]
+            isOneToOne: false
+            referencedRelation: "task_subtasks"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       task_steps: {
         Row: {
           active: boolean
@@ -259,6 +289,53 @@ export type Database = {
           },
         ]
       }
+      task_subtasks: {
+        Row: {
+          active: boolean
+          created_at: string
+          end_date: string | null
+          id: string
+          progress_status: string
+          start_date: string | null
+          status: string
+          subtask_order: number
+          task_id: string
+          title: string
+        }
+        Insert: {
+          active?: boolean
+          created_at?: string
+          end_date?: string | null
+          id?: string
+          progress_status?: string
+          start_date?: string | null
+          status: string
+          subtask_order?: number
+          task_id: string
+          title?: string
+        }
+        Update: {
+          active?: boolean
+          created_at?: string
+          end_date?: string | null
+          id?: string
+          progress_status?: string
+          start_date?: string | null
+          status?: string
+          subtask_order?: number
+          task_id?: string
+          title?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "task_subtasks_task_id_fkey"
+            columns: ["task_id"]
+            isOneToOne: false
+            referencedRelation: "tasks"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       tasks: {
         Row: {
           blocked: boolean
@@ -269,6 +346,7 @@ export type Database = {
           concluded_by: string | null
           created_at: string
           id: string
+          priority_order: number
           title: string
         }
         Insert: {
@@ -280,6 +358,7 @@ export type Database = {
           concluded_by?: string | null
           created_at?: string
           id?: string
+          priority_order?: number
           title: string
         }
         Update: {
@@ -291,6 +370,7 @@ export type Database = {
           concluded_by?: string | null
           created_at?: string
           id?: string
+          priority_order?: number
           title?: string
         }
         Relationships: [
diff --git a/src/utils/dashboardUtils.ts b/src/utils/dashboardUtils.ts
index 0efeb67..b3aebc8 100644
--- a/src/utils/dashboardUtils.ts
+++ b/src/utils/dashboardUtils.ts
@@ -2,11 +2,11 @@ import { formatDate, formatDateDisplay } from '../utils/dateUtils';
 import {
   STEP_META,
   migrateLegacyTask,
-  getCurrentStep,
+  getCurrentSubtask,
   isStepBlocked,
   type Task,
-  type Step,
-  type StepType,
+  type Subtask,
+  type SubtaskStatus,
   type LegacyTask,
 } from '../lib/steps';
 
@@ -65,39 +65,44 @@ export function getMonthWeeks(year: number, month: number): Date[][] {
   return weeks;
 }
 
-/** Garante que a tarefa tem o formato moderno com `steps`. */
+/** Garante que a tarefa tem o formato moderno com `subtasks`. */
 export function normaliseTask(task: Task | LegacyTask): Task {
-  if ((task as Task).steps && typeof (task as Task).status === 'object') {
+  if ((task as Task).subtasks && typeof (task as Task).status === 'object') {
     return task as Task;
   }
   const migrated = migrateLegacyTask(task as LegacyTask);
   return { ...(task as object), ...migrated } as Task;
 }
 
-/** Devolve os steps ativos (com datas preenchidas) de uma tarefa. */
-export function getVisibleSteps(task: Task | LegacyTask): Step[] {
+/** Devolve as subtasks ativas (com datas preenchidas) de uma tarefa. */
+export function getVisibleSubtasks(task: Task | LegacyTask): Subtask[] {
   const norm = normaliseTask(task);
-  return norm.steps.filter(s => s.active && s.start && s.end);
+  return norm.subtasks.filter(s => s.active && s.start && s.end);
+}
+
+/** @deprecated use getVisibleSubtasks */
+export function getVisibleSteps(task: Task | LegacyTask): Subtask[] {
+  return getVisibleSubtasks(task);
 }
 
 export function getTaskStatusDisplay(task: Task | LegacyTask): { label: string; cls: string } {
   const norm = normaliseTask(task);
   const today = todayStr();
-  const step = getCurrentStep(norm.steps, today);
-  const stepLabel = step ? (STEP_META[step.type]?.label ?? step.type) : 'Sem steps';
+  const subtask = getCurrentSubtask(norm.subtasks, today);
+  const stepLabel = subtask ? (STEP_META[subtask.status]?.label ?? subtask.status) : 'Sem subtasks';
   if (norm.status?.blocked) {
     return {
       label: `${stepLabel} · Bloqueado`,
       cls: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100',
     };
   }
-  if (!step) {
-    return { label: 'Sem steps', cls: 'bg-muted text-muted-foreground' };
+  if (!subtask) {
+    return { label: 'Sem subtasks', cls: 'bg-muted text-muted-foreground' };
   }
-  if (step.end < today) {
+  if (subtask.end < today) {
     return { label: `${stepLabel} · Concluído`, cls: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100' };
   }
-  if (step.start > today) {
+  if (subtask.start > today) {
     return { label: `${stepLabel} · Backlog`, cls: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-200' };
   }
   return { label: `${stepLabel} · Em andamento`, cls: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100' };
@@ -110,7 +115,9 @@ export type CalendarViewMode = 'step' | 'demand';
 export interface BarItem {
   taskId: string;
   taskTitle: string;
-  stepType: StepType;
+  subtaskId: string;
+  subtaskTitle: string;
+  subtaskStatus: SubtaskStatus;
   stepStart: string;
   stepEnd: string;
   startCol: number;
@@ -126,65 +133,62 @@ export function layoutWeekBars(weekDays: Date[], tasks: (Task | LegacyTask)[], v
   const raw: Raw[] = [];
 
   for (const task of tasks) {
-    const steps = getVisibleSteps(task);
-    
+    const subtasks = getVisibleSubtasks(task);
+
     if (viewMode === 'demand') {
-      const sortedSteps = steps.filter(s => s.start && s.end).sort((a, b) => toLocalDate(a.start!).getTime() - toLocalDate(b.start!).getTime());
-      
-      let currentGroup: typeof steps[0] | null = null;
+      const sorted = subtasks.filter(s => s.start && s.end).sort((a, b) => toLocalDate(a.start).getTime() - toLocalDate(b.start).getTime());
+
+      let groupSubtask: Subtask | null = null;
       let groupStart = '';
       let groupEnd = '';
-      
-      for (const step of sortedSteps) {
-        const stepStart = step.start!;
-        const stepEnd = step.end!;
-        
-        if (!currentGroup) {
-          currentGroup = step;
-          groupStart = stepStart;
-          groupEnd = stepEnd;
+
+      for (const s of sorted) {
+        if (!groupSubtask) {
+          groupSubtask = s;
+          groupStart = s.start;
+          groupEnd = s.end;
           continue;
         }
-        
+
         const prevEnd = toLocalDate(groupEnd);
-        const currStart = toLocalDate(stepStart);
+        const currStart = toLocalDate(s.start);
         const gapDays = Math.round((currStart.getTime() - prevEnd.getTime()) / 86400000);
-        
+
         if (gapDays > 2) {
-          if (groupStart && groupEnd) {
+          if (groupSubtask && groupStart && groupEnd) {
             const pStart = toLocalDate(groupStart);
             const pEnd = toLocalDate(groupEnd);
             if (pEnd >= weekStart && pStart <= weekEnd) {
               const startCol = Math.max(0, Math.round((pStart.getTime() - weekStart.getTime()) / 86400000));
               const endCol = Math.min(6, Math.round((pEnd.getTime() - weekStart.getTime()) / 86400000));
-              raw.push({ taskId: task.id ?? '', taskTitle: task.title ?? '', stepType: 'desenvolvimento', stepStart: groupStart, stepEnd: groupEnd, startCol, endCol });
+              raw.push({ taskId: task.id ?? '', taskTitle: task.title ?? '', subtaskId: groupSubtask.id, subtaskTitle: groupSubtask.title, subtaskStatus: groupSubtask.status, stepStart: groupStart, stepEnd: groupEnd, startCol, endCol });
             }
           }
-          currentGroup = step;
-          groupStart = stepStart;
-          groupEnd = stepEnd;
+          groupSubtask = s;
+          groupStart = s.start;
+          groupEnd = s.end;
         } else {
-          if (stepEnd > groupEnd) groupEnd = stepEnd;
+          if (s.end > groupEnd) groupEnd = s.end;
         }
       }
-      
-      if (currentGroup && groupStart && groupEnd) {
+
+      if (groupSubtask && groupStart && groupEnd) {
         const pStart = toLocalDate(groupStart);
         const pEnd = toLocalDate(groupEnd);
         if (pEnd >= weekStart && pStart <= weekEnd) {
           const startCol = Math.max(0, Math.round((pStart.getTime() - weekStart.getTime()) / 86400000));
           const endCol = Math.min(6, Math.round((pEnd.getTime() - weekStart.getTime()) / 86400000));
-          raw.push({ taskId: task.id ?? '', taskTitle: task.title ?? '', stepType: 'desenvolvimento', stepStart: groupStart, stepEnd: groupEnd, startCol, endCol });
+          raw.push({ taskId: task.id ?? '', taskTitle: task.title ?? '', subtaskId: groupSubtask.id, subtaskTitle: groupSubtask.title, subtaskStatus: groupSubtask.status, stepStart: groupStart, stepEnd: groupEnd, startCol, endCol });
         }
       }
     } else {
-      for (const step of steps) {
-        const pStart = toLocalDate(step.start);
-        const pEnd = toLocalDate(step.end);
+      for (const s of subtasks) {
+        const pStart = toLocalDate(s.start);
+        const pEnd = toLocalDate(s.end);
         if (pEnd < weekStart || pStart > weekEnd) continue;
         const startCol = Math.max(0, Math.round((pStart.getTime() - weekStart.getTime()) / 86400000));
         const endCol   = Math.min(6, Math.round((pEnd.getTime() - weekStart.getTime()) / 86400000));
-        raw.push({ taskId: task.id ?? '', taskTitle: task.title ?? '', stepType: step.type, stepStart: step.start, stepEnd: step.end, startCol, endCol });
+        raw.push({ taskId: task.id ?? '', taskTitle: task.title ?? '', subtaskId: s.id, subtaskTitle: s.title, subtaskStatus: s.status, stepStart: s.start, stepEnd: s.end, startCol, endCol });
       }
     }
   }
@@ -207,7 +211,7 @@ export function layoutWeekBars(weekDays: Date[], tasks: (Task | LegacyTask)[], v
 export interface DragState {
   type: 'move' | 'resize-start' | 'resize-end';
   taskId: string;
-  stepType: StepType;
+  subtaskId: string;
   originalStart: Date;
   originalEnd: Date;
   startX: number;
@@ -216,10 +220,10 @@ export interface DragState {
 
 export interface DragPreview {
   taskId: string;
-  stepType: StepType;
+  subtaskId: string;
   deltaDays: number;
   type: DragState['type'];
 }
 
 // Re-export used downstream
-export { formatDate, formatDateDisplay, STEP_META, isStepBlocked, type Task, type Step, type StepType, type LegacyTask };
+export { formatDate, formatDateDisplay, STEP_META, isStepBlocked, type Task, type Subtask, type SubtaskStatus, type LegacyTask };
diff --git a/src/utils/holidayUtils.ts b/src/utils/holidayUtils.ts
index 63c42c7..8411a09 100644
--- a/src/utils/holidayUtils.ts
+++ b/src/utils/holidayUtils.ts
@@ -26,5 +26,8 @@ export function nextNonHolidayBusinessDay(date: string, holidays: Holiday[]): st
 }
 
 function toDateStr(d: Date): string {
-  return d.toISOString().split('T')[0];
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
 }
diff --git a/src/views/MembersView/components/MemberCard.tsx b/src/views/MembersView/components/MemberCard.tsx
index e8ad492..c8440f5 100644
--- a/src/views/MembersView/components/MemberCard.tsx
+++ b/src/views/MembersView/components/MemberCard.tsx
@@ -9,7 +9,7 @@ import { ArrowUpRight, CalendarDays } from 'lucide-react';
 import MemberTaskItem from './MemberTaskItem';
 
 function normalizeTask(task: Task | LegacyTask): Task {
-  if ((task as Task).steps && typeof (task as Task).status === 'object') return task as Task;
+  if ((task as Task).subtasks && typeof (task as Task).status === 'object') return task as Task;
   const migrated = migrateLegacyTask(task as LegacyTask);
   return { ...(task as object), ...migrated } as Task;
 }
@@ -32,7 +32,7 @@ const MemberCard: React.FC<MemberCardProps> = React.memo(({ member, tasks, today
   const memberSteps: { task: Task; step: Step }[] = [];
   for (const task of tasks) {
     const norm = normalizeTask(task);
-    const visibleSteps = (norm.steps as Step[]).filter(
+    const visibleSteps = (norm.subtasks as Step[]).filter(
       s => s.active && s.start && s.end && s.assignees.includes(member.id)
     );
     for (const step of visibleSteps) {
@@ -107,7 +107,7 @@ const MemberCard: React.FC<MemberCardProps> = React.memo(({ member, tasks, today
           <div className="rounded-lg border border-border bg-muted/30 px-2.5 py-2 text-xs">
             {nextDeadline ? (
               <p className="text-muted-foreground">
-                Próxima entrega <span className="font-semibold text-foreground">{formatDateLabel(nextDeadline.step.end)}</span> · {STEP_META[nextDeadline.step.type].label}
+                Próxima entrega <span className="font-semibold text-foreground">{formatDateLabel(nextDeadline.step.end)}</span> · {STEP_META[nextDeadline.step.status]?.label ?? nextDeadline.step.title}
               </p>
             ) : (
               <p className="text-muted-foreground">Sem etapas futuras atribuídas.</p>
diff --git a/src/views/MembersView/components/MemberTaskItem.tsx b/src/views/MembersView/components/MemberTaskItem.tsx
index 080844d..26e51da 100644
--- a/src/views/MembersView/components/MemberTaskItem.tsx
+++ b/src/views/MembersView/components/MemberTaskItem.tsx
@@ -9,7 +9,7 @@ interface MemberTaskItemProps {
 }
 
 const MemberTaskItem: React.FC<MemberTaskItemProps> = ({ task, steps, today }) => {
-  const currentStep = getCurrentStep(task.steps, today);
+  const currentStep = getCurrentStep(task.subtasks, today);
   const isBlocked = task.status?.blocked;
 
   return (
@@ -18,7 +18,7 @@ const MemberTaskItem: React.FC<MemberTaskItemProps> = ({ task, steps, today }) =
         {isBlocked ? (
           <span className="w-1.5 h-1.5 rounded-full bg-red-500 shrink-0" />
         ) : (
-          <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${currentStep ? STEP_META[currentStep.type]?.dot : 'bg-muted-foreground'}`} />
+          <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${currentStep ? STEP_META[currentStep.status]?.dot : 'bg-muted-foreground'}`} />
         )}
         <span className="font-medium truncate flex-1">{task.title}</span>
         {isBlocked && (
@@ -29,11 +29,11 @@ const MemberTaskItem: React.FC<MemberTaskItemProps> = ({ task, steps, today }) =
       </div>
       <div className="flex gap-1 flex-wrap pl-3.5">
         {steps.map(step => {
-          const meta = STEP_META[step.type];
+          const meta = STEP_META[step.status];
           const isActive = step.start <= today && step.end >= today;
           return (
             <span
-              key={step.type}
+              key={step.id}
               className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium ${
                 isBlocked && step.start >= (task.status?.blockedAt ?? '')
                   ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200'
diff --git a/src/views/calendar/CalendarView.tsx b/src/views/calendar/CalendarView.tsx
index 09feccb..6e6643c 100644
--- a/src/views/calendar/CalendarView.tsx
+++ b/src/views/calendar/CalendarView.tsx
@@ -1,26 +1,36 @@
 import React from 'react';
-import { MAX_SLOTS } from '../../utils/dashboardUtils';
+import { MAX_SLOTS, PT_MONTHS } from '../../utils/dashboardUtils';
 import type { CalendarViewProps } from '../../types/props';
 import { useCalendarNavigation } from './hooks/useCalendarNavigation';
 import { useCalendarDrag } from './hooks/useCalendarDrag';
-import CalendarHeader from './components/CalendarHeader';
+import { usePlanningFiltersStore } from '@/store/usePlanningFiltersStore';
 import DayHeaders from './components/DayHeaders';
 import WeekRow from './components/WeekRow';
 import { ConfirmModal } from '@/components/ui';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const CalendarView: React.FC<CalendarViewProps> = ({ tasks: filteredTasks, onEdit, onUpdateTask, holidays }) => {
+  const viewMode = usePlanningFiltersStore((s) => s.viewMode);
 
-const CalendarView: React.FC<CalendarViewProps> = ({ tasks, onEdit, onUpdateTask, holidays, viewMode = 'step' }) => {
   const { today, monthDate, weeks, prevMonth, nextMonth, goToday } = useCalendarNavigation();
-  const { dragPreview, didDragRef, startDrag, pendingDragUpdate, confirmDrag, cancelDrag, postponeDragToBusinessDay } = useCalendarDrag(tasks, onUpdateTask, holidays);
+  const { dragPreview, didDragRef, startDrag, pendingDragUpdate, confirmDrag, cancelDrag, postponeDragToBusinessDay } = useCalendarDrag(filteredTasks, onUpdateTask, holidays);
   const rowHeight = `calc(var(--cal-day-header-h) + ${MAX_SLOTS} * var(--cal-slot-height) + var(--cal-row-padding))`;
 
   return (
     <div className="bg-card rounded-xl border border-border shadow-sm overflow-hidden">
-      <CalendarHeader
-        monthDate={monthDate}
-        onPrevMonth={prevMonth}
-        onNextMonth={nextMonth}
-        onGoToday={goToday}
-      />
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 sm:px-5 py-3.5 border-b border-border bg-muted">
+        <div className="flex items-center justify-between sm:justify-start gap-3">
+          <h3 className="text-base font-semibold text-foreground">
+            {PT_MONTHS[monthDate.getMonth()]} {monthDate.getFullYear()}
+          </h3>
+          <button onClick={goToday} className="text-xs px-2 py-0.5 rounded border border-border text-muted-foreground hover:bg-card transition-colors">Hoje</button>
+        </div>
+        <div className="flex items-center justify-end gap-1">
+          <button onClick={prevMonth} className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground transition-colors"><ChevronLeft className="w-4 h-4" /></button>
+          <button onClick={nextMonth} className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground transition-colors"><ChevronRight className="w-4 h-4" /></button>
+        </div>
+      </div>
+
       <div
         className="overflow-x-auto overscroll-x-contain"
         style={{
@@ -36,7 +46,7 @@ const CalendarView: React.FC<CalendarViewProps> = ({ tasks, onEdit, onUpdateTask
               <WeekRow
                 key={wi}
                 week={week}
-                tasks={tasks}
+                tasks={filteredTasks}
                 today={today}
                 currentMonth={monthDate.getMonth()}
                 rowHeight={rowHeight}
diff --git a/src/views/calendar/components/StepBar.tsx b/src/views/calendar/components/StepBar.tsx
index 6393bbc..bea829d 100644
--- a/src/views/calendar/components/StepBar.tsx
+++ b/src/views/calendar/components/StepBar.tsx
@@ -30,7 +30,7 @@ const STEP_BORDER_COLORS: Record<string, string> = {
 };
 
 const StepBar: React.FC<StepBarProps> = React.memo(({ bar, task, isFirstBarOfStep, isLastBarOfStep, dragPreview, onStartDrag, onClick, viewMode = 'step', demandColor }) => {
-  const meta = STEP_META[bar.stepType];
+  const meta = STEP_META[bar.subtaskStatus];
   const colW = 100 / 7;
   const isDemandMode = viewMode === 'demand';
 
@@ -44,7 +44,7 @@ const StepBar: React.FC<StepBarProps> = React.memo(({ bar, task, isFirstBarOfSte
 
   let adjStart = bar.startCol;
   let adjEnd = bar.endCol;
-  if (dragPreview && dragPreview.taskId === bar.taskId && dragPreview.stepType === bar.stepType) {
+  if (dragPreview && dragPreview.taskId === bar.taskId && dragPreview.subtaskId === bar.subtaskId) {
     const d = dragPreview.deltaDays;
     if (dragPreview.type === 'move') { adjStart = bar.startCol + d; adjEnd = bar.endCol + d; }
     else if (dragPreview.type === 'resize-start') { adjStart = Math.min(bar.startCol + d, bar.endCol); }
@@ -56,14 +56,14 @@ const StepBar: React.FC<StepBarProps> = React.memo(({ bar, task, isFirstBarOfSte
   const left = clampedStart * colW;
   const width = (clampedEnd - clampedStart + 1) * colW;
   const top = `calc(var(--cal-day-header-h) + ${bar.slot} * var(--cal-slot-height) + 3px)`;
-  const isDragging = dragPreview?.taskId === bar.taskId && dragPreview?.stepType === bar.stepType;
+  const isDragging = dragPreview?.taskId === bar.taskId && dragPreview?.subtaskId === bar.subtaskId;
   const norm = normaliseTask(task);
   const blocked = isStepBlocked(norm, bar.stepStart);
   const isConcluded = !!task.concludedAt;
-  
+
   let bgClass: string;
   let borderColor: string;
-  
+
   if (isConcluded) {
     bgClass = 'bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-300';
     borderColor = '#9ca3af';
@@ -72,10 +72,10 @@ const StepBar: React.FC<StepBarProps> = React.memo(({ bar, task, isFirstBarOfSte
     borderColor = demandColor;
   } else {
     bgClass = blocked ? 'bg-red-500 dark:bg-red-600 text-white' : meta.bar.replace(/border\s+\S+/g, '');
-    borderColor = blocked ? '#dc2626' : (STEP_BORDER_COLORS[bar.stepType] ?? '#d1d5db');
+    borderColor = blocked ? '#dc2626' : (STEP_BORDER_COLORS[bar.subtaskStatus] ?? '#d1d5db');
   }
 
-  const stepKey = `${bar.taskId}-${bar.stepType}`;
+  const stepKey = `${bar.taskId}-${bar.subtaskId}`;
 
   let borderRadius = '0px';
   if (isFirstBarOfStep && isLastBarOfStep) {
@@ -110,7 +110,7 @@ const StepBar: React.FC<StepBarProps> = React.memo(({ bar, task, isFirstBarOfSte
         cursor: cursorStyle,
         transition: isDragging ? 'none' : 'filter 0.1s',
       }}
-      title={`${task.title}${isDemandMode ? '' : ` · ${meta.label}`}${blocked ? ' · BLOQUEADO' : ''}${isConcluded ? ' · CONCLUÍDA' : ''}`}
+      title={`${task.title}${isDemandMode ? '' : ` · ${bar.subtaskTitle || meta.label}`}${blocked ? ' · BLOQUEADO' : ''}${isConcluded ? ' · CONCLUÍDA' : ''}`}
       onMouseDown={e => !isDemandMode && onStartDrag(e, bar, 'move', task)}
       onMouseEnter={(e) => {
         document.querySelectorAll(`[data-step-key="${stepKey}"]`).forEach(el => {
@@ -137,11 +137,11 @@ const StepBar: React.FC<StepBarProps> = React.memo(({ bar, task, isFirstBarOfSte
             ? <AlertTriangle className="w-3 h-3 shrink-0" />
             : <span className={`shrink-0 text-[9px] font-bold px-1 py-0.5 rounded ${meta.tagBg}`}>{meta.tag}</span>
           }
-          <span className="truncate text-[11px]">{task.title}</span>
+          <span className="truncate text-[11px]">{bar.subtaskTitle || task.title}</span>
         </span>
       )}
       {isDemandMode && demandColor && (
-        <span 
+        <span
           className="flex items-center gap-1 px-1.5 truncate leading-none pointer-events-none min-w-0"
           style={{ color: getContrastColor(demandColor) }}
         >
@@ -159,7 +159,8 @@ const StepBar: React.FC<StepBarProps> = React.memo(({ bar, task, isFirstBarOfSte
   );
 }, (prev, next) =>
   prev.bar.taskId === next.bar.taskId &&
-  prev.bar.stepType === next.bar.stepType &&
+  prev.bar.subtaskId === next.bar.subtaskId &&
+  prev.bar.subtaskStatus === next.bar.subtaskStatus &&
   prev.bar.startCol === next.bar.startCol &&
   prev.bar.endCol === next.bar.endCol &&
   prev.bar.slot === next.bar.slot &&
diff --git a/src/views/calendar/components/WeekRow.tsx b/src/views/calendar/components/WeekRow.tsx
index 47de2df..ac50aac 100644
--- a/src/views/calendar/components/WeekRow.tsx
+++ b/src/views/calendar/components/WeekRow.tsx
@@ -86,7 +86,7 @@ const WeekRow: React.FC<WeekRowProps> = React.memo(({
         const demandColor = viewMode === 'demand' ? getDemandColor(bar.taskId) : undefined;
         return (
           <StepBar
-            key={`${bar.taskId}-${bar.stepType}-${bi}`}
+            key={`${bar.taskId}-${bar.subtaskId}-${bi}`}
             bar={bar}
             task={task}
             isFirstBarOfStep={isFirstBarOfStep}
diff --git a/src/views/calendar/hooks/useCalendarDrag.ts b/src/views/calendar/hooks/useCalendarDrag.ts
index a8ae481..704bb8b 100644
--- a/src/views/calendar/hooks/useCalendarDrag.ts
+++ b/src/views/calendar/hooks/useCalendarDrag.ts
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { normaliseTask, type BarItem, type DragState, type Task, type Step } from '../../../utils/dashboardUtils';
+import { normaliseTask, type BarItem, type DragState, type Task, type Subtask } from '../../../utils/dashboardUtils';
 import { usePhaseDrag } from '@/hooks/ui/usePhaseDrag';
 import type { Holiday } from '@/utils/holidayUtils';
 
@@ -23,9 +23,9 @@ export function useCalendarDrag(tasks: Task[], onUpdateTask: (task: Task) => voi
     const container = (e.currentTarget as HTMLElement).closest('[data-week-row]') as HTMLElement;
     const colWidth = container ? container.getBoundingClientRect().width / 7 : 80;
     const norm = normaliseTask(task);
-    const step = (norm.steps as Step[]).find(s => s.type === bar.stepType);
+    const step = (norm.subtasks as Subtask[]).find(s => s.id === bar.subtaskId);
     if (!step) return;
-    phaseDragStart(e, bar.taskId, bar.stepType, type, step, colWidth);
+    phaseDragStart(e, bar.taskId, bar.subtaskId, type, step, colWidth);
   }, [phaseDragStart]);
 
   return { dragPreview, didDragRef, startDrag, pendingDragUpdate, confirmDrag, cancelDrag, postponeDragToBusinessDay };
diff --git a/src/views/kanban/KanbanView.tsx b/src/views/kanban/KanbanView.tsx
new file mode 100644
index 0000000..dbd5a94
--- /dev/null
+++ b/src/views/kanban/KanbanView.tsx
@@ -0,0 +1,334 @@
+import { useState } from 'react';
+import { Calendar, Lock, GripVertical, Layers } from 'lucide-react';
+import { STEP_META } from '@/lib/steps';
+import type { Task, Subtask, SubtaskProgressStatus } from '@/lib/steps';
+import type { Member } from '@/hooks/infra/useSupabase';
+
+const COLUMNS: { id: SubtaskProgressStatus; label: string; dot: string }[] = [
+  { id: 'todo',          label: 'A Fazer',         dot: 'bg-slate-500' },
+  { id: 'ready',         label: 'Pronta',          dot: 'bg-sky-400' },
+  { id: 'in-progress',   label: 'Em Andamento',    dot: 'bg-blue-500' },
+  { id: 'in-review',     label: 'Em Revisão',      dot: 'bg-violet-500' },
+  { id: 'waiting',       label: 'Aguardando',      dot: 'bg-amber-400' },
+  { id: 'blocked',       label: 'Bloqueada',       dot: 'bg-red-500' },
+  { id: 'needs-changes', label: 'Precisa Ajustes', dot: 'bg-orange-400' },
+  { id: 'paused',        label: 'Pausada',         dot: 'bg-zinc-500' },
+  { id: 'done',          label: 'Concluída',       dot: 'bg-emerald-500' },
+  { id: 'canceled',      label: 'Cancelada',       dot: 'bg-neutral-500' },
+];
+
+interface KanbanItem {
+  task: Task;
+  subtask: Subtask;
+}
+
+interface KanbanCardProps {
+  item: KanbanItem;
+  members: Member[];
+  onEdit: (task: Task) => void;
+  onDragStart: (e: React.DragEvent, taskId: string, subtaskId: string) => void;
+  onDragEnd: () => void;
+  isDragging: boolean;
+}
+
+function KanbanCard({ item, members, onEdit, onDragStart, onDragEnd, isDragging }: KanbanCardProps) {
+  const { task, subtask } = item;
+  const meta = STEP_META[subtask.status] ?? STEP_META['desenvolvimento'];
+  const isBlocked = task.status?.blocked;
+
+  const cardStyle = isDragging
+    ? 'bg-indigo-50 border-indigo-400 text-zinc-900 dark:bg-indigo-950/40 dark:border-indigo-500/70 dark:text-zinc-100 opacity-60 scale-[0.97] rotate-1 shadow-xl'
+    : isBlocked
+      ? 'bg-red-50 border-red-300 text-red-900 dark:bg-red-950/30 dark:border-red-800/80 dark:text-red-100'
+      : 'bg-white border-zinc-200 text-zinc-900 dark:bg-zinc-900/80 dark:border-zinc-700/50 dark:text-zinc-100';
+
+  const assignedMembers = members.filter((m) => subtask.assignees?.includes(m.id));
+
+  return (
+    <div
+      draggable
+      onDragStart={(e) => onDragStart(e, task.id, subtask.id)}
+      onDragEnd={onDragEnd}
+      onClick={() => !isDragging && onEdit(task)}
+      className={`
+        group relative flex flex-col gap-2.5 p-3.5 mb-3 rounded-xl border
+        cursor-grab active:cursor-grabbing hover:brightness-[1.03] transition-all duration-150
+        shadow-sm hover:shadow-md animate-in fade-in-0 zoom-in-95
+        ${isDragging ? 'animate-[wiggle_0.6s_ease-in-out_infinite]' : 'duration-200'}
+        ${cardStyle}
+      `}
+    >
+      {/* Header: grip + fase dot + task mãe */}
+      <div className="flex items-center gap-2">
+        <GripVertical className="w-3.5 h-3.5 shrink-0 text-zinc-400 group-hover:text-zinc-600 dark:text-white/20 dark:group-hover:text-white/40" />
+        <div className={`w-1.5 h-1.5 shrink-0 rounded-full ${meta.dot}`} />
+        <span className="text-[10px] text-zinc-400 dark:text-white/40 truncate leading-none">{task.title}</span>
+        {isBlocked && (
+          <span className="ml-auto flex items-center gap-1 text-[10px] font-bold text-red-600 bg-red-100 px-1.5 py-0.5 rounded border border-red-200 shrink-0 dark:text-red-400 dark:bg-red-950/50 dark:border-red-900/50">
+            <Lock className="w-2.5 h-2.5" /> Bloqueada
+          </span>
+        )}
+      </div>
+
+      {/* Título da subtask */}
+      <h4 className="text-sm font-semibold text-zinc-800 dark:text-white/90 leading-snug pl-[22px]">
+        {subtask.title}
+      </h4>
+
+      {/* Footer: fase badge + prazo + avatares */}
+      <div className="flex items-center justify-between pl-[22px]">
+        <div className="flex items-center gap-2">
+          <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-zinc-100 border border-zinc-200 text-zinc-500 dark:bg-black/20 dark:border-white/10 dark:text-white/60">
+            {meta.label}
+          </span>
+          {subtask.end && (
+            <div className="flex items-center gap-1 text-[11px] text-zinc-400 bg-zinc-100 px-1.5 py-0.5 rounded border border-zinc-200 dark:text-white/40 dark:bg-black/20 dark:border-white/5">
+              <Calendar className="w-3 h-3" />
+              <span>
+                {new Date(subtask.end + 'T00:00:00').toLocaleDateString('pt-BR', {
+                  day: '2-digit',
+                  month: '2-digit',
+                })}
+              </span>
+            </div>
+          )}
+        </div>
+
+        <div className="flex -space-x-1.5">
+          {assignedMembers.length > 0 ? (
+            assignedMembers.map((m) => (
+              <div
+                key={m.id}
+                className="w-6 h-6 rounded-full border-2 border-white dark:border-zinc-900 bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center text-[10px] font-bold text-zinc-700 dark:text-white shadow-sm"
+                title={m.name}
+              >
+                {m.avatar ?? m.name?.charAt(0)}
+              </div>
+            ))
+          ) : (
+            <div className="w-6 h-6 rounded-full border-2 border-dashed border-zinc-300 dark:border-zinc-700 bg-zinc-100 dark:bg-black/40 flex items-center justify-center">
+              <span className="text-[10px] text-zinc-400 dark:text-white/30">?</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface EmptyColumnsGroupProps {
+  columns: typeof COLUMNS;
+  isDragging: boolean;
+}
+
+function EmptyColumnsGroup({ columns, isDragging }: EmptyColumnsGroupProps) {
+  const isHidden = isDragging || columns.length === 0;
+
+  const CARD_W = 300;
+  const STACK_OFFSET = 12;
+  const stackWidth = CARD_W + (columns.length - 1) * STACK_OFFSET;
+
+  return (
+    <div
+      className="flex flex-col shrink-0"
+      style={{
+        width: isHidden ? '0px' : `${stackWidth}px`,
+        overflow: isHidden ? 'hidden' : 'visible',
+        opacity: isHidden ? 0 : 1,
+        pointerEvents: isHidden ? 'none' : 'auto',
+        transition: 'width 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease',
+        marginRight: isHidden ? '-20px' : '0px',
+      }}
+    >
+      <div className="flex items-center gap-2.5 mb-4 pb-2 border-b border-zinc-200 dark:border-white/5">
+        <Layers className="w-3.5 h-3.5 text-zinc-400 dark:text-zinc-500" />
+        <h3 className="text-[13px] font-semibold text-zinc-700 dark:text-zinc-300">Fases Vazias</h3>
+        <span className="text-[11px] font-medium bg-zinc-100 dark:bg-white/5 text-zinc-500 dark:text-zinc-400 px-2 py-0.5 rounded-full border border-zinc-200 dark:border-white/5">
+          {columns.length}
+        </span>
+      </div>
+
+      <div className="relative" style={{ height: '120px', width: `${stackWidth}px` }}>
+        {[...columns].reverse().map((col, revIdx) => {
+          const i = columns.length - 1 - revIdx;
+          return (
+            <div
+              key={col.id}
+              title={col.label}
+              style={{
+                position: 'absolute',
+                left: `${i * STACK_OFFSET}px`,
+                top: 0,
+                width: `${CARD_W}px`,
+                zIndex: i + 1,
+              }}
+              className="flex items-center gap-3 px-3 py-3.5 rounded-xl border border-zinc-200/80 bg-white dark:bg-zinc-900 dark:border-zinc-700/50 shadow-sm"
+            >
+              <div className={`w-2 h-2 rounded-full ${col.dot} shrink-0`} />
+              <span className="text-sm font-medium text-zinc-600 dark:text-zinc-400">{col.label}</span>
+              <span className="ml-auto text-[10px] text-zinc-400 dark:text-zinc-600 uppercase tracking-wider font-semibold">
+                Vazia
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+interface KanbanViewProps {
+  tasks: Task[];
+  members: Member[];
+  onEdit: (task: Task) => void;
+  onUpdateTask: (task: Task) => void;
+}
+
+export function KanbanView({ tasks, members, onEdit, onUpdateTask }: KanbanViewProps) {
+  const [boardTasks, setBoardTasks] = useState<Task[]>(tasks);
+  const [dragged, setDragged] = useState<{ taskId: string; subtaskId: string } | null>(null);
+
+  if (tasks !== boardTasks && dragged === null) {
+    setBoardTasks(tasks);
+  }
+
+  const activeTasks = boardTasks.filter((t) => !t.concludedAt);
+
+  const allItems: KanbanItem[] = activeTasks.flatMap((task) =>
+    (task.subtasks ?? [])
+      .filter((s) => s.active)
+      .map((subtask) => ({ task, subtask })),
+  );
+
+  const handleDragEnd = () => setDragged(null);
+
+  const handleDragStart = (e: React.DragEvent, taskId: string, subtaskId: string) => {
+    setDragged({ taskId, subtaskId });
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDrop = (e: React.DragEvent, columnId: SubtaskProgressStatus) => {
+    e.preventDefault();
+    if (!dragged) return;
+
+    const draggedTask = boardTasks.find((t) => t.id === dragged.taskId);
+    if (!draggedTask) { setDragged(null); return; }
+
+    const draggedSubtask = draggedTask.subtasks.find((s) => s.id === dragged.subtaskId);
+    if ((draggedSubtask?.progressStatus ?? 'todo') === columnId) {
+      setDragged(null);
+      return;
+    }
+
+    const updatedTask = {
+      ...draggedTask,
+      subtasks: draggedTask.subtasks.map((s) =>
+        s.id === dragged.subtaskId ? { ...s, progressStatus: columnId } : s,
+      ),
+    };
+
+    setBoardTasks((prev) =>
+      prev.map((t) => (t.id === dragged.taskId ? updatedTask : t)),
+    );
+    onUpdateTask(updatedTask);
+    setDragged(null);
+  };
+
+  const columnsData = COLUMNS.reduce<Record<string, KanbanItem[]>>((acc, col) => {
+    acc[col.id] = allItems.filter((item) => (item.subtask.progressStatus ?? 'todo') === col.id);
+    return acc;
+  }, {});
+
+  const isDragging = dragged !== null;
+
+  const stackedColumns = isDragging ? [] : COLUMNS.filter((col) => (columnsData[col.id]?.length ?? 0) === 0);
+
+  return (
+    <div className="w-full overflow-x-auto bg-zinc-50 dark:bg-[#0a0a0a] p-4 rounded-2xl custom-kanban-scrollbar" style={{ height: 'calc(100vh - 4rem - 4rem - 3.5rem - 1.25rem)' }}>
+      <div className="flex gap-5 min-w-max h-full items-stretch">
+        {COLUMNS.map((col) => {
+          const isEmpty = (columnsData[col.id]?.length ?? 0) === 0;
+          const isCollapsed = isEmpty && !isDragging;
+          return (
+            <div
+              key={col.id}
+              className="flex flex-col shrink-0 h-full"
+              style={{
+                width: isCollapsed ? '0px' : '300px',
+                overflow: isCollapsed ? 'hidden' : 'visible',
+                opacity: isCollapsed ? 0 : 1,
+                pointerEvents: isCollapsed ? 'none' : 'auto',
+                transition: 'width 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease',
+                marginRight: isCollapsed ? '-20px' : '0px',
+              }}
+            >
+              <div className="flex items-center gap-2.5 mb-4 pb-2 border-b border-zinc-200 dark:border-white/5">
+                <div className={`w-2 h-2 rounded-full ${col.dot}`} />
+                <h3 className="text-[13px] font-semibold text-zinc-700 dark:text-zinc-300">{col.label}</h3>
+                <span className="text-[11px] font-medium bg-zinc-100 dark:bg-white/5 text-zinc-500 dark:text-zinc-400 px-2 py-0.5 rounded-full border border-zinc-200 dark:border-white/5">
+                  {columnsData[col.id]?.length ?? 0}
+                </span>
+              </div>
+
+              <div
+                onDragOver={handleDragOver}
+                onDrop={(e) => handleDrop(e, col.id)}
+                className={`
+                  flex-1 min-h-0 flex flex-col p-2 rounded-2xl border transition-colors duration-300
+                  ${isDragging
+                    ? 'bg-zinc-100/80 border-zinc-300 border-dashed dark:bg-white/[0.04] dark:border-white/10'
+                    : 'bg-zinc-100/60 border-zinc-200/80 dark:bg-white/[0.025] dark:border-white/[0.06]'}
+                `}
+              >
+                {columnsData[col.id]?.map((item) => (
+                  <KanbanCard
+                    key={`${item.task.id}-${item.subtask.id}`}
+                    item={item}
+                    members={members}
+                    onEdit={onEdit}
+                    onDragStart={handleDragStart}
+                    onDragEnd={handleDragEnd}
+                    isDragging={dragged?.taskId === item.task.id && dragged?.subtaskId === item.subtask.id}
+                  />
+                ))}
+
+                {columnsData[col.id]?.length === 0 && (
+                  <div className="flex-1 min-h-[100px] flex items-center justify-center mt-2 rounded-xl border border-zinc-200 dark:border-white/5 bg-zinc-100/50 dark:bg-white/[0.01]">
+                    <span className="text-xs text-zinc-400 dark:text-zinc-600 font-medium tracking-wide">
+                      Nenhuma subtask
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+
+        <EmptyColumnsGroup columns={stackedColumns} isDragging={isDragging} />
+      </div>
+
+      <style>{`
+        .custom-kanban-scrollbar::-webkit-scrollbar { height: 8px; width: 8px; }
+        .custom-kanban-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-kanban-scrollbar::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 10px; }
+        .custom-kanban-scrollbar::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
+        .dark .custom-kanban-scrollbar::-webkit-scrollbar-thumb { background: #27272a; }
+        .dark .custom-kanban-scrollbar::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
+        @keyframes wiggle {
+          0%   { transform: rotate(0deg) scale(0.97); }
+          25%  { transform: rotate(-1.5deg) scale(0.97); }
+          50%  { transform: rotate(1.5deg) scale(0.97); }
+          75%  { transform: rotate(-1deg) scale(0.97); }
+          100% { transform: rotate(1deg) scale(0.97); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default KanbanView;
diff --git a/src/views/kanban/index.ts b/src/views/kanban/index.ts
new file mode 100644
index 0000000..80a14ce
--- /dev/null
+++ b/src/views/kanban/index.ts
@@ -0,0 +1 @@
+export { default as KanbanView } from './KanbanView';
diff --git a/src/views/list/components/DemandRow.tsx b/src/views/list/components/DemandRow.tsx
index f6441dc..3f267e3 100644
--- a/src/views/list/components/DemandRow.tsx
+++ b/src/views/list/components/DemandRow.tsx
@@ -19,7 +19,7 @@ function formatDate(isoDate: string): string {
 }
 
 export const DemandRow = memo(function DemandRow({ task, referenceDate, members, onEdit, onDelete, onConclude, onToggleBlock }: DemandRowProps) {
-  const allAssigneeIds = [...new Set(task.steps.flatMap(s => s.assignees))];
+  const allAssigneeIds = [...new Set(task.subtasks.flatMap(s => s.assignees))];
   const assigneeMembers = allAssigneeIds
     .map(id => members.find(m => m.id === id))
     .filter((m): m is Member => m !== undefined);
diff --git a/src/views/list/hooks/useListFilters.ts b/src/views/list/hooks/useListFilters.ts
index f0df6ad..46e90f1 100644
--- a/src/views/list/hooks/useListFilters.ts
+++ b/src/views/list/hooks/useListFilters.ts
@@ -8,7 +8,7 @@ export interface NormalisedTask {
 }
 
 function getReferenceDate(task: Task): string {
-  const activeEnds = task.steps
+  const activeEnds = task.subtasks
     .filter(s => s.active && s.end)
     .map(s => s.end)
     .sort();
@@ -41,7 +41,7 @@ export function useListFilters(tasks: Task[], _members: Member[]) {
       .filter(({ referenceDate }) => referenceDate >= rangeStart && referenceDate <= rangeEnd)
       .filter(({ task }) => {
         if (filterAssignee) {
-          const allAssignees = task.steps.flatMap(s => s.assignees);
+          const allAssignees = task.subtasks.flatMap(s => s.assignees);
           if (!allAssignees.includes(filterAssignee)) return false;
         }
         if (filterStatus) {
diff --git a/src/views/planning/PlanningView.tsx b/src/views/planning/PlanningView.tsx
index 932febc..d54930d 100644
--- a/src/views/planning/PlanningView.tsx
+++ b/src/views/planning/PlanningView.tsx
@@ -1,25 +1,27 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useUIStore } from '@/store/useUIStore';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTasksQuery } from '@/hooks/tasks/useTasksQuery';
 import { useMembersQuery } from '@/hooks/members/useMembersQuery';
 import { useQueryClient } from '@tanstack/react-query';
 import { useAuthContext } from '@/contexts/AuthContext';
 import { useClients } from '@/hooks/clients/useClients';
 import { useTaskQuickActions } from '@/hooks/tasks/useTaskQuickActions';
+import { useTaskPriorityOrder } from '@/hooks/tasks/useTaskPriorityOrder';
+import { useSubtaskQuickEdit } from '@/hooks/tasks/useSubtaskQuickEdit';
 import { CalendarView } from '@/views/calendar';
 import TimelineView from '@/views/timeline';
 import { ListView } from '@/views/list';
+import { KanbanView } from '@/views/kanban';
 import { useTaskFilters } from './hooks/useTaskFilters';
-import { FilterBar } from './components/FilterBar';
+import { PlanningViewHeader } from './components/PlanningViewHeader';
 import { StepsLegend } from './components/StepsLegend';
-import { TasksFilters, type FiltersState } from './components/TasksFilters';
-import { StepGroup } from './components/StepGroup';
+import { type FiltersState } from './components/TasksFilters';
+import { TaskTable } from './components/TaskTable';
 import type { PlanningViewProps } from '@/types/props';
+import { useUIStore } from '@/store/useUIStore';
 import { ViewState } from '@/components/ViewState';
-import { CalendarX2, DatabaseZap, FilterX, Search, Plus } from 'lucide-react';
+import { CalendarX2, DatabaseZap, FilterX, Search } from 'lucide-react';
 import { Skeleton } from 'boneyard-js/react';
-import { STEP_TYPES_ORDER, type StepType, type Task } from '@/lib/steps';
-import { Button } from '@/components/ui/Button';
+import { toast } from 'sonner';
 
 const PLANNING_BONES = {
   name: 'planning-view',
@@ -37,19 +39,15 @@ const PLANNING_BONES = {
 const EMPTY_FILTERS: FiltersState = {
   searchTerm: '',
   selectedSteps: [],
+  selectedProgressStatuses: [],
   selectedMemberIds: [],
   selectedPeriod: '',
   showOnlyBlocked: false,
+  showConcluded: false,
 };
 
-const VIEW_TITLES: Record<string, { title: string; description: string }> = {
-  calendar: { title: 'Calendário', description: 'Visualize as demandas em calendário mensal.' },
-  timeline: { title: 'Linha do Tempo', description: 'Acompanhe as fases das demandas em Gantt.' },
-  list: { title: 'Lista', description: 'Todas as demandas em formato de tabela.' },
-  demandas: { title: 'Demandas', description: 'Visualize todas as demandas por etapa atual.' },
-};
 
-const PlanningView: React.FC<PlanningViewProps> = ({ subview, onEdit, onDelete, onUpdateTask, onOpenNew, onExport, holidays }) => {
+const PlanningView: React.FC<PlanningViewProps> = ({ subview, onViewChange, onEdit, onDelete, onUpdateTask, onOpenNew, onExport, holidays }) => {
   const { isAdmin, member } = useAuthContext();
   const { effectiveClientId } = useClients();
   const queryClient = useQueryClient();
@@ -60,20 +58,70 @@ const PlanningView: React.FC<PlanningViewProps> = ({ subview, onEdit, onDelete,
   const tasksError = tasksErr?.message ?? null;
   const membersError = membersErr?.message ?? null;
 
-  const { concludeTask, toggleBlock } = useTaskQuickActions(member?.auth_user_id);
+  const { concludeTask, toggleBlock, concludeTasks, blockTasks } = useTaskQuickActions(member?.auth_user_id);
+  const updateTaskPriorityOrder = useTaskPriorityOrder({
+    clientId: effectiveClientId,
+    isAdmin,
+  });
+  const { updateSubtaskAssignees, updateSubtaskDates, updateSubtaskProgressStatus } = useSubtaskQuickEdit({
+    clientId: effectiveClientId,
+    isAdmin,
+  });
 
-  const {
-    filterAssignee, setFilterAssignee,
-    filterStatus, setFilterStatus,
-    filterSteps,
-    filterPeriodDays, setFilterPeriodDays,
-    viewMode, setViewMode,
-    hasActiveFilters,
-    clearFilters, toggleStepFilter,
-    filteredTasks,
-  } = useTaskFilters(tasks ?? [], subview === 'timeline', dashboardRedirect?.assigneeId ?? '');
+  const { clearFilters, filteredTasks: allFilteredTasks } = useTaskFilters(tasks ?? [], subview === 'timeline', dashboardRedirect?.assigneeId ?? '');
 
   const [demandasFilters, setDemandasFilters] = useState<FiltersState>(EMPTY_FILTERS);
+  const [calendarFilters, setCalendarFilters] = useState<FiltersState>(EMPTY_FILTERS);
+
+  const filteredTasks = useMemo(() => {
+    if (subview !== 'calendar' && subview !== 'timeline') return allFilteredTasks;
+    const { searchTerm, selectedSteps, selectedProgressStatuses, selectedMemberIds, showOnlyBlocked, selectedPeriod, showConcluded } = calendarFilters;
+    return allFilteredTasks.filter(task => {
+      const isConcluded = !!task.concludedAt;
+      if (!showConcluded && isConcluded) return false;
+      const lowerSearch = searchTerm.toLowerCase();
+      if (lowerSearch && !(
+        task.title.toLowerCase().includes(lowerSearch) ||
+        task.id.toLowerCase().includes(lowerSearch) ||
+        task.subtasks.some(s => s.title.toLowerCase().includes(lowerSearch))
+      )) return false;
+      if (selectedSteps.length > 0 && !task.subtasks.some(s => selectedSteps.includes(s.status))) return false;
+      if (selectedProgressStatuses.length > 0 && !task.subtasks.some(s => selectedProgressStatuses.includes(s.progressStatus))) return false;
+      if (selectedMemberIds.length > 0 && !task.subtasks.some(s => s.assignees.some(a => selectedMemberIds.includes(a)))) return false;
+      if (showOnlyBlocked && !task.status.blocked) return false;
+      if (selectedPeriod) {
+        const currentStep = task.subtasks.find(s => s.active) ?? task.subtasks[0];
+        if (!currentStep?.end) return false;
+        const due = new Date(currentStep.end + 'T00:00:00');
+        const cutoff = new Date();
+        cutoff.setDate(cutoff.getDate() + parseInt(selectedPeriod));
+        if (due > cutoff) return false;
+      }
+      return true;
+    });
+  }, [allFilteredTasks, calendarFilters, subview]);
+
+  const handleBulkAssign = useCallback(async (selectedTasks: typeof tasks, memberId: string) => {
+    const tasksWithActiveSubtask = selectedTasks
+      .map(task => ({ task, subtask: task.subtasks.find(subtask => subtask.active) ?? task.subtasks[0] }))
+      .filter(({ subtask }) => !!subtask);
+
+    if (tasksWithActiveSubtask.length === 0) {
+      toast.info('As demandas selecionadas não têm etapas para atribuir');
+      return false;
+    }
+
+    for (const { task, subtask } of tasksWithActiveSubtask) {
+      const nextAssignees = subtask.assignees.includes(memberId)
+        ? subtask.assignees
+        : [...subtask.assignees, memberId];
+      const success = await updateSubtaskAssignees(task, subtask.id, nextAssignees);
+      if (!success) return false;
+    }
+
+    toast.success(`${tasksWithActiveSubtask.length} demanda${tasksWithActiveSubtask.length !== 1 ? 's' : ''} atribuída${tasksWithActiveSubtask.length !== 1 ? 's' : ''}`);
+    return true;
+  }, [updateSubtaskAssignees]);
 
   useEffect(() => {
     if (!dashboardRedirect) return;
@@ -91,16 +139,26 @@ const PlanningView: React.FC<PlanningViewProps> = ({ subview, onEdit, onDelete,
 
   const filteredDemandasTasks = useMemo(() => {
     if (subview !== 'demandas') return [];
-    const { searchTerm, selectedSteps, selectedMemberIds, showOnlyBlocked, selectedPeriod } = demandasFilters;
+    const { searchTerm, selectedSteps, selectedProgressStatuses, selectedMemberIds, showOnlyBlocked, selectedPeriod, showConcluded } = demandasFilters;
     return tasks.filter(task => {
+      const isConcluded = !!task.concludedAt;
+      if (!showConcluded && isConcluded) return false;
+
+      const lowerSearch = searchTerm.toLowerCase();
       const matchSearch =
-        task.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        task.id.toLowerCase().includes(searchTerm.toLowerCase());
+        task.title.toLowerCase().includes(lowerSearch) ||
+        task.id.toLowerCase().includes(lowerSearch) ||
+        task.subtasks.some(s => s.title.toLowerCase().includes(lowerSearch));
 
-      const currentStep = task.steps.find(s => s.active) ?? task.steps[0];
-      const matchStep = selectedSteps.length > 0 ? selectedSteps.includes(currentStep?.type) : true;
+      const currentStep = task.subtasks.find(s => s.active) ?? task.subtasks[0];
+      const matchStep = selectedSteps.length > 0
+        ? task.subtasks.some(s => selectedSteps.includes(s.status))
+        : true;
+      const matchProgressStatus = selectedProgressStatuses.length > 0
+        ? task.subtasks.some(s => selectedProgressStatuses.includes(s.progressStatus))
+        : true;
       const matchMember = selectedMemberIds.length > 0
-        ? task.steps.some(s => s.assignees.some(a => selectedMemberIds.includes(a)))
+        ? task.subtasks.some(s => s.assignees.some(a => selectedMemberIds.includes(a)))
         : true;
       const matchBlocked = showOnlyBlocked ? task.status.blocked : true;
 
@@ -114,48 +172,14 @@ const PlanningView: React.FC<PlanningViewProps> = ({ subview, onEdit, onDelete,
         matchPeriod = false;
       }
 
-      return matchSearch && matchStep && matchMember && matchBlocked && matchPeriod;
+      return matchSearch && matchStep && matchProgressStatus && matchMember && matchBlocked && matchPeriod;
     });
   }, [tasks, demandasFilters, subview]);
 
-  const groupedDemandasTasks = useMemo(() => {
-    const { selectedMemberIds } = demandasFilters;
-    const groups = new Map<StepType, Task[]>();
-    STEP_TYPES_ORDER.forEach(step => groups.set(step, []));
-    filteredDemandasTasks.forEach(task => {
-      let stepsToUse = task.steps.filter(s => s.active);
-      if (stepsToUse.length === 0) stepsToUse = task.steps.slice(0, 1);
-
-      if (selectedMemberIds.length > 0) {
-        const memberSteps = task.steps.filter(s =>
-          s.assignees.some(a => selectedMemberIds.includes(a))
-        );
-        if (memberSteps.length > 0) stepsToUse = memberSteps;
-      }
-
-      stepsToUse.forEach(step => {
-        const bucket = groups.get(step.type);
-        if (bucket) bucket.push(task);
-      });
-    });
-
-    groups.forEach((bucket, stepType) => {
-      bucket.sort((a, b) => {
-        const endA = a.steps.find(s => s.type === stepType)?.end;
-        const endB = b.steps.find(s => s.type === stepType)?.end;
-        if (!endA && !endB) return 0;
-        if (!endA) return 1;
-        if (!endB) return -1;
-        return endA < endB ? -1 : endA > endB ? 1 : 0;
-      });
-    });
-
-    return groups;
-  }, [filteredDemandasTasks, demandasFilters]);
-
-  const hasDemandasActiveFilters =
+const hasDemandasActiveFilters =
     demandasFilters.searchTerm !== '' ||
     demandasFilters.selectedSteps.length > 0 ||
+    demandasFilters.selectedProgressStatuses.length > 0 ||
     demandasFilters.selectedMemberIds.length > 0 ||
     demandasFilters.selectedPeriod !== '' ||
     demandasFilters.showOnlyBlocked;
@@ -184,113 +208,81 @@ const PlanningView: React.FC<PlanningViewProps> = ({ subview, onEdit, onDelete,
     );
   }
 
-  const { title, description } = VIEW_TITLES[subview] ?? VIEW_TITLES.calendar;
-
-  const showFilterBar = subview === 'calendar' || subview === 'timeline';
+  const showFilterBar = subview === 'calendar' || subview === 'timeline' || subview === 'kanban';
 
   const content = (
     <div className="space-y-5">
-      <div>
-        <h2 className="text-xl sm:text-2xl font-semibold tracking-tight text-foreground">{title}</h2>
-        <p className="text-muted-foreground text-sm">{description}</p>
-      </div>
-
-      {showFilterBar && (
-        <FilterBar
-          members={members ?? []}
-          filterAssignee={filterAssignee}
-          onChangeAssignee={setFilterAssignee}
-          filterStatus={filterStatus}
-          onChangeStatus={setFilterStatus}
-          filterSteps={filterSteps}
-          onToggleStep={toggleStepFilter}
-          showPeriodFilter={subview === 'timeline'}
-          filterPeriodDays={filterPeriodDays}
-          onChangePeriodDays={setFilterPeriodDays}
-          showViewMode={subview === 'calendar'}
-          viewMode={viewMode}
-          onChangeViewMode={setViewMode}
-          onExport={onExport}
-          onOpenNew={onOpenNew}
-          hasActiveFilters={hasActiveFilters}
-          onClear={clearFilters}
-          filteredCount={filteredTasks.length}
-          totalCount={(tasks ?? []).length}
-        />
-      )}
+      <PlanningViewHeader
+        subview={subview}
+        onViewChange={onViewChange}
+        onOpenNew={onOpenNew}
+        members={members ?? []}
+        demandasFilters={demandasFilters}
+        onChangeDemandasFilters={next => setDemandasFilters(prev => ({ ...prev, ...next }))}
+        onClearDemandasFilters={() => setDemandasFilters(EMPTY_FILTERS)}
+        calendarFilters={calendarFilters}
+        onChangeCalendarFilters={next => setCalendarFilters(prev => ({ ...prev, ...next }))}
+        onClearCalendarFilters={() => setCalendarFilters(EMPTY_FILTERS)}
+      />
 
-      {showFilterBar && filteredTasks.length === 0 ? (
-        <ViewState
-          icon={FilterX}
-          title="Nenhuma demanda com os filtros atuais"
-          description="Limpe os filtros para voltar a ver as demandas deste cliente."
-          actionLabel="Limpar filtros"
-          onAction={clearFilters}
-        />
-      ) : subview === 'calendar' ? (
-        <CalendarView tasks={filteredTasks} members={members} onEdit={onEdit} onDelete={onDelete} onUpdateTask={onUpdateTask} holidays={holidays} viewMode={viewMode} />
-      ) : subview === 'timeline' ? (
-        <TimelineView tasks={filteredTasks} members={members} onEdit={onEdit} onDelete={onDelete} onUpdateTask={onUpdateTask} holidays={holidays} daysRange={filterPeriodDays} />
-      ) : subview === 'list' ? (
-        <ListView onEdit={onEdit} onDelete={(task) => onDelete(task.id)} onOpenNew={onOpenNew} onExport={onExport} />
-      ) : subview === 'demandas' ? (
-        <div className="space-y-5">
-          <div className="flex items-center justify-between">
-            <TasksFilters
-              filters={demandasFilters}
-              members={members}
-              onChange={next => setDemandasFilters(prev => ({ ...prev, ...next }))}
-              onClear={() => setDemandasFilters(EMPTY_FILTERS)}
-            />
-            <Button onClick={onOpenNew} className="ml-3 shrink-0">
-              <Plus className="w-4 h-4" />
-              Nova Demanda
-            </Button>
+      <div key={subview} className="animate-blur-fade-in space-y-5">
+        {showFilterBar && filteredTasks.length === 0 ? (
+          <ViewState
+            icon={FilterX}
+            title="Nenhuma demanda com os filtros atuais"
+            description="Limpe os filtros para voltar a ver as demandas deste cliente."
+            actionLabel="Limpar filtros"
+            onAction={clearFilters}
+          />
+        ) : subview === 'calendar' ? (
+          <CalendarView tasks={filteredTasks} onEdit={onEdit} onUpdateTask={onUpdateTask} holidays={holidays} />
+        ) : subview === 'timeline' ? (
+          <TimelineView tasks={filteredTasks} members={members} onEdit={onEdit} onDelete={onDelete} onUpdateTask={onUpdateTask} holidays={holidays} />
+        ) : subview === 'kanban' ? (
+          <KanbanView tasks={filteredTasks} members={members} onEdit={onEdit} onUpdateTask={onUpdateTask} />
+        ) : subview === 'list' ? (
+          <ListView onEdit={onEdit} onDelete={(task) => onDelete(task.id)} onOpenNew={onOpenNew} onExport={onExport} />
+        ) : subview === 'demandas' ? (
+          <div className="space-y-5">
+            {tasks.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-16 text-muted-foreground border border-dashed border-border rounded-xl bg-muted/10">
+                <Search className="w-8 h-8 mb-3 text-muted-foreground/50" />
+                <p className="text-sm">Nenhuma demanda cadastrada ainda.</p>
+                <button onClick={onOpenNew} className="mt-3 text-xs text-primary hover:underline">
+                  Criar primeira demanda
+                </button>
+              </div>
+            ) : filteredDemandasTasks.length === 0 && hasDemandasActiveFilters ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+                <p className="text-sm">Nenhuma demanda encontrada com os filtros atuais.</p>
+                <button
+                  onClick={() => setDemandasFilters(EMPTY_FILTERS)}
+                  className="mt-2 text-xs text-primary hover:underline"
+                >
+                  Limpar filtros
+                </button>
+              </div>
+            ) : (
+              <TaskTable
+                tasks={filteredDemandasTasks}
+                members={members}
+                onToggleBlock={toggleBlock}
+                onConclude={concludeTask}
+                onEdit={onEdit}
+                onReorder={!hasDemandasActiveFilters ? updateTaskPriorityOrder : undefined}
+                onBulkAssign={handleBulkAssign}
+                onBulkBlock={blockTasks}
+                onBulkConclude={concludeTasks}
+                onUpdateSubtaskAssignees={updateSubtaskAssignees}
+                onUpdateSubtaskDates={updateSubtaskDates}
+                onUpdateSubtaskProgressStatus={updateSubtaskProgressStatus}
+              />
+            )}
           </div>
+        ) : null}
 
-          {tasks.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground border border-dashed border-border rounded-xl bg-muted/10">
-              <Search className="w-8 h-8 mb-3 text-muted-foreground/50" />
-              <p className="text-sm">Nenhuma demanda cadastrada ainda.</p>
-              <button onClick={onOpenNew} className="mt-3 text-xs text-primary hover:underline">
-                Criar primeira demanda
-              </button>
-            </div>
-          ) : (
-            <div className="space-y-3 pb-16">
-              {([...groupedDemandasTasks.entries()] as [StepType, Task[]][])
-                .filter(([stepType]) =>
-                  demandasFilters.selectedSteps.length === 0 || demandasFilters.selectedSteps.includes(stepType)
-                )
-                .map(([stepType, stepTasks]) => (
-                  <StepGroup
-                    key={stepType}
-                    stepType={stepType}
-                    tasks={stepTasks}
-                    members={members}
-                    onToggleBlock={toggleBlock}
-                    onConclude={concludeTask}
-                    onEdit={onEdit}
-                    hasActiveFilters={hasDemandasActiveFilters}
-                  />
-                ))}
-              {filteredDemandasTasks.length === 0 && hasDemandasActiveFilters && (
-                <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-                  <p className="text-sm">Nenhuma demanda encontrada com os filtros atuais.</p>
-                  <button
-                    onClick={() => setDemandasFilters(EMPTY_FILTERS)}
-                    className="mt-2 text-xs text-primary hover:underline"
-                  >
-                    Limpar filtros
-                  </button>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      ) : null}
-
-      {subview !== 'demandas' && <StepsLegend />}
+        {subview !== 'demandas' && subview !== 'kanban' && <StepsLegend />}
+      </div>
     </div>
   );
 
diff --git a/src/views/planning/components/AssigneesPopover.tsx b/src/views/planning/components/AssigneesPopover.tsx
new file mode 100644
index 0000000..1efce72
--- /dev/null
+++ b/src/views/planning/components/AssigneesPopover.tsx
@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Plus, Check } from 'lucide-react';
+import type { Task } from '@/lib/steps';
+import type { Member } from '@/hooks/infra/useSupabase';
+import { MemberAvatars } from './MemberAvatars';
+import { usePopover } from './usePopover';
+
+interface AssigneesPopoverProps {
+  subtask: Task['subtasks'][number];
+  task: Task;
+  members: Member[];
+  onUpdate?: (task: Task, subtaskId: string, assignees: string[]) => Promise<boolean>;
+}
+
+export function AssigneesPopover({ subtask, task, members, onUpdate }: AssigneesPopoverProps) {
+  const { open, setOpen, pos, anchorRef } = usePopover({ align: 'end', contentWidth: 208 });
+  const [pending, setPending] = useState(false);
+  const [localAssignees, setLocalAssignees] = useState<string[]>(subtask.assignees);
+
+  function openPopover(e: React.MouseEvent) {
+    e.stopPropagation();
+    setLocalAssignees(subtask.assignees);
+    setOpen(v => !v);
+  }
+
+  async function toggle(memberId: string) {
+    if (!onUpdate || pending) return;
+    const next = localAssignees.includes(memberId)
+      ? localAssignees.filter(a => a !== memberId)
+      : [...localAssignees, memberId];
+    setLocalAssignees(next);
+    setPending(true);
+    await onUpdate(task, subtask.id, next);
+    setPending(false);
+  }
+
+  const hasMember = localAssignees.length > 0;
+
+  return (
+    <div className="relative flex items-center justify-end">
+      <button
+        ref={anchorRef as React.RefObject<HTMLButtonElement>}
+        type="button"
+        onClick={openPopover}
+        className={`flex items-center gap-1 rounded-full transition-colors focus:outline-none ${
+          hasMember
+            ? 'hover:opacity-80'
+            : 'w-6 h-6 border border-dashed border-muted-foreground/30 hover:border-muted-foreground/60 justify-center text-muted-foreground/40 hover:text-muted-foreground/70'
+        }`}
+        title={hasMember ? 'Editar responsáveis' : 'Atribuir responsável'}
+      >
+        {hasMember
+          ? <MemberAvatars assigneeIds={localAssignees} members={members} size="xs" />
+          : <Plus className="w-3 h-3" />
+        }
+      </button>
+
+      {open && createPortal(
+        <div
+          data-popover
+          style={{ position: 'absolute', top: pos.top, left: pos.left, zIndex: 9999 }}
+          className="w-52 rounded-lg border border-border bg-popover shadow-xl py-1"
+          onClick={e => e.stopPropagation()}
+        >
+          <p className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            Responsáveis
+          </p>
+          {members.map(m => {
+            const selected = localAssignees.includes(m.id);
+            return (
+              <button
+                key={m.id}
+                type="button"
+                disabled={pending}
+                onClick={() => toggle(m.id)}
+                className="w-full flex items-center gap-2.5 px-3 py-1.5 text-sm hover:bg-muted/60 transition-colors disabled:opacity-50"
+              >
+                <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground font-bold text-[10px] flex items-center justify-center overflow-hidden shrink-0">
+                  {m.avatar_url
+                    ? <img src={m.avatar_url} alt={m.name} className="w-full h-full object-cover" />
+                    : m.name.slice(0, 2).toUpperCase()
+                  }
+                </div>
+                <span className="flex-1 text-left truncate text-foreground">{m.name}</span>
+                <span className="text-[10px] text-muted-foreground/60 shrink-0">{m.role}</span>
+                {selected && <Check className="w-3.5 h-3.5 text-primary shrink-0" />}
+              </button>
+            );
+          })}
+          {members.length === 0 && (
+            <p className="px-3 py-2 text-xs text-muted-foreground">Nenhum membro disponível</p>
+          )}
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}
diff --git a/src/views/planning/components/DatesPopover.tsx b/src/views/planning/components/DatesPopover.tsx
new file mode 100644
index 0000000..c94e92d
--- /dev/null
+++ b/src/views/planning/components/DatesPopover.tsx
@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { Task } from '@/lib/steps';
+import { usePopover } from './usePopover';
+
+function formatDateRange(start: string, end: string): string {
+  const fmt = (d: string) => {
+    if (!d) return '—';
+    const [, m, day] = d.split('-');
+    return `${day}/${m}`;
+  };
+  if (!start && !end) return '—';
+  if (!start) return `até ${fmt(end)}`;
+  if (!end) return `de ${fmt(start)}`;
+  return `${fmt(start)} → ${fmt(end)}`;
+}
+
+interface DatesPopoverProps {
+  subtask: Task['subtasks'][number];
+  task: Task;
+  onUpdate?: (task: Task, subtaskId: string, start: string, end: string) => Promise<boolean>;
+}
+
+export function DatesPopover({ subtask, task, onUpdate }: DatesPopoverProps) {
+  const { open, setOpen, pos, anchorRef } = usePopover();
+  const [start, setStart] = useState(subtask.start ?? '');
+  const [end, setEnd] = useState(subtask.end ?? '');
+  const [pending, setPending] = useState(false);
+
+  function openPopover(e: React.MouseEvent) {
+    e.stopPropagation();
+    if (!onUpdate) return;
+    setStart(subtask.start ?? '');
+    setEnd(subtask.end ?? '');
+    setOpen(v => !v);
+  }
+
+  async function save() {
+    if (!onUpdate || pending) return;
+    setPending(true);
+    const ok = await onUpdate(task, subtask.id, start, end);
+    setPending(false);
+    if (ok) setOpen(false);
+  }
+
+  const label = formatDateRange(subtask.start ?? '', subtask.end ?? '');
+
+  return (
+    <div>
+      <button
+        ref={anchorRef as React.RefObject<HTMLButtonElement>}
+        type="button"
+        onClick={openPopover}
+        className={`text-[11px] text-muted-foreground/70 tabular-nums whitespace-nowrap font-mono transition-colors ${
+          onUpdate
+            ? 'hover:text-foreground hover:underline decoration-dashed underline-offset-2 cursor-pointer'
+            : 'cursor-default'
+        }`}
+        title={onUpdate ? 'Editar período' : undefined}
+      >
+        {label}
+      </button>
+
+      {open && createPortal(
+        <div
+          data-popover
+          style={{ position: 'absolute', top: pos.top, left: pos.left, zIndex: 9999 }}
+          className="w-64 rounded-lg border border-border bg-popover shadow-xl p-3 space-y-3"
+          onClick={e => e.stopPropagation()}
+        >
+          <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">Período</p>
+          <div className="space-y-2">
+            <div className="space-y-1">
+              <label className="text-xs text-muted-foreground">Início</label>
+              <input
+                type="date"
+                value={start}
+                onChange={e => setStart(e.target.value)}
+                className="w-full text-xs border border-border rounded-md px-2 py-1.5 bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+              />
+            </div>
+            <div className="space-y-1">
+              <label className="text-xs text-muted-foreground">Fim</label>
+              <input
+                type="date"
+                value={end}
+                min={start || undefined}
+                onChange={e => setEnd(e.target.value)}
+                className="w-full text-xs border border-border rounded-md px-2 py-1.5 bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+              />
+            </div>
+          </div>
+          <div className="flex gap-2 pt-1">
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              className="flex-1 text-xs px-3 py-1.5 rounded-md border border-border hover:bg-muted/60 transition-colors text-muted-foreground"
+            >
+              Cancelar
+            </button>
+            <button
+              type="button"
+              disabled={pending}
+              onClick={save}
+              className="flex-1 text-xs px-3 py-1.5 rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
+            >
+              {pending ? 'Salvando…' : 'Salvar'}
+            </button>
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}
diff --git a/src/views/planning/components/MemberAvatars.tsx b/src/views/planning/components/MemberAvatars.tsx
new file mode 100644
index 0000000..52101e2
--- /dev/null
+++ b/src/views/planning/components/MemberAvatars.tsx
@@ -0,0 +1,45 @@
+import type { Member } from '@/hooks/infra/useSupabase';
+
+export function MemberAvatars({ assigneeIds, members, size = 'sm' }: {
+  assigneeIds: string[];
+  members: Member[];
+  size?: 'sm' | 'xs';
+}) {
+  const dim = size === 'xs' ? 'w-5 h-5 text-[9px]' : 'w-6 h-6 text-[10px]';
+  const resolved = assigneeIds
+    .map(id => members.find(m => m.id === id))
+    .filter((m): m is Member => m !== undefined);
+
+  if (resolved.length === 0) {
+    return (
+      <div
+        className={`${dim} rounded-full border border-dashed border-muted-foreground/30 bg-muted/60 flex items-center justify-center text-muted-foreground/50`}
+        title="Sem responsável"
+      >
+        ?
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex -space-x-1.5">
+      {resolved.slice(0, 3).map(m => (
+        <div
+          key={m.id}
+          title={m.name}
+          className={`${dim} rounded-full ring-2 ring-background bg-primary text-primary-foreground font-bold flex items-center justify-center overflow-hidden`}
+        >
+          {m.avatar_url
+            ? <img src={m.avatar_url} alt={m.name} className="w-full h-full object-cover" />
+            : m.name.slice(0, 2).toUpperCase()
+          }
+        </div>
+      ))}
+      {resolved.length > 3 && (
+        <div className={`${dim} rounded-full ring-2 ring-background bg-muted text-foreground font-bold flex items-center justify-center`}>
+          +{resolved.length - 3}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/views/planning/components/PlanningViewHeader.tsx b/src/views/planning/components/PlanningViewHeader.tsx
new file mode 100644
index 0000000..e880aa6
--- /dev/null
+++ b/src/views/planning/components/PlanningViewHeader.tsx
@@ -0,0 +1,98 @@
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/Tabs';
+import { Button } from '@/components/ui/Button';
+import { Plus } from 'lucide-react';
+import { TasksFilters, type FiltersState } from './TasksFilters';
+import type { Member } from '@/types/member';
+import type { ViewType } from '@/store/useUIStore';
+
+const DEMAND_TABS = [
+  { value: 'demandas', label: 'Todas as Demandas' },
+  { value: 'kanban', label: 'Kanban' },
+  { value: 'calendar', label: 'Calendário' },
+  { value: 'timeline', label: 'Linha do Tempo' },
+] as const;
+
+const VIEW_TITLES: Record<string, { title: string; description: string }> = {
+  calendar: { title: 'Calendário', description: 'Visualize as demandas em calendário mensal.' },
+  timeline: { title: 'Linha do Tempo', description: 'Acompanhe as fases das demandas em Gantt.' },
+  list: { title: 'Lista', description: 'Todas as demandas em formato de tabela.' },
+  demandas: { title: 'Demandas', description: 'Visualize todas as demandas por etapa atual.' },
+  kanban: { title: 'Kanban', description: 'Arraste as demandas entre colunas de progresso.' },
+};
+
+interface PlanningViewHeaderProps {
+  subview: string;
+  onViewChange: (value: ViewType) => void;
+  onOpenNew: () => void;
+  members: Member[];
+  // TasksFilters props (demandas)
+  demandasFilters: FiltersState;
+  onChangeDemandasFilters: (next: Partial<FiltersState>) => void;
+  onClearDemandasFilters: () => void;
+  // TasksFilters props (calendar / timeline)
+  calendarFilters: FiltersState;
+  onChangeCalendarFilters: (next: Partial<FiltersState>) => void;
+  onClearCalendarFilters: () => void;
+}
+
+export function PlanningViewHeader({
+  subview,
+  onViewChange,
+  onOpenNew,
+  members,
+  demandasFilters,
+  onChangeDemandasFilters,
+  onClearDemandasFilters,
+  calendarFilters,
+  onChangeCalendarFilters,
+  onClearCalendarFilters,
+}: PlanningViewHeaderProps) {
+  const { title, description } = VIEW_TITLES[subview] ?? VIEW_TITLES.calendar;
+  const showDemandasFilters = subview === 'demandas';
+  const showCalendarFilters = subview === 'calendar' || subview === 'timeline' || subview === 'kanban';
+
+  return (
+    <div className="space-y-5">
+      <Tabs value={subview} onValueChange={v => onViewChange(v as ViewType)}>
+        <TabsList variant="underline" className="w-full justify-end gap-0">
+          {DEMAND_TABS.map((tab) => (
+            <TabsTrigger key={tab.value} value={tab.value} variant="underline">
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight text-foreground">{title}</h2>
+          <p className="text-muted-foreground text-sm">{description}</p>
+        </div>
+        {showDemandasFilters && (
+          <Button onClick={onOpenNew} className="shrink-0">
+            <Plus className="w-4 h-4" />
+            Nova Demanda
+          </Button>
+        )}
+      </div>
+
+      {showDemandasFilters && (
+        <TasksFilters
+          filters={demandasFilters}
+          members={members}
+          onChange={onChangeDemandasFilters}
+          onClear={onClearDemandasFilters}
+        />
+      )}
+
+      {showCalendarFilters && (
+        <TasksFilters
+          filters={calendarFilters}
+          members={members}
+          onChange={onChangeCalendarFilters}
+          onClear={onClearCalendarFilters}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/views/planning/components/StepGroup.tsx b/src/views/planning/components/StepGroup.tsx
index 33262c0..2bbba61 100644
--- a/src/views/planning/components/StepGroup.tsx
+++ b/src/views/planning/components/StepGroup.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { FixedSizeList as List, type ListChildComponentProps } from 'react-window';
 import { ChevronDown, ChevronRight } from 'lucide-react';
-import { STEP_META, type StepType, type Task } from '@/lib/steps';
+import { STEP_META, type SubtaskStatus, type Task } from '@/lib/steps';
 import type { Member } from '@/hooks/infra/useSupabase';
 import { TaskRow } from './TaskRow';
 
@@ -9,7 +9,7 @@ const TASK_ROW_HEIGHT = 52;
 const VIRTUALIZE_THRESHOLD = 50;
 
 interface StepGroupProps {
-  stepType: StepType;
+  stepType: SubtaskStatus;
   tasks: Task[];
   members: Member[];
   onToggleBlock: (task: Task) => void;
@@ -69,7 +69,7 @@ export function StepGroup({ stepType, tasks, members, onToggleBlock, onConclude,
             >
               {({ index, style, data }: ListChildComponentProps<{
                 tasks: Task[];
-                stepType: StepType;
+                stepType: SubtaskStatus;
                 members: Member[];
                 onToggleBlock: (task: Task) => void;
                 onConclude: (task: Task) => void;
diff --git a/src/views/planning/components/SubtaskProgressStatusPopover.tsx b/src/views/planning/components/SubtaskProgressStatusPopover.tsx
new file mode 100644
index 0000000..0438487
--- /dev/null
+++ b/src/views/planning/components/SubtaskProgressStatusPopover.tsx
@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Check } from 'lucide-react';
+import {
+  SUBTASK_PROGRESS_META,
+  SUBTASK_PROGRESS_STATUS_ORDER,
+  type SubtaskProgressStatus,
+  type Task,
+} from '@/lib/steps';
+import { usePopover } from './usePopover';
+
+interface SubtaskProgressStatusPopoverProps {
+  subtask: Task['subtasks'][number];
+  task: Task;
+  onUpdate?: (task: Task, subtaskId: string, status: SubtaskProgressStatus) => Promise<boolean>;
+}
+
+export function SubtaskProgressStatusPopover({ subtask, task, onUpdate }: SubtaskProgressStatusPopoverProps) {
+  const { open, setOpen, pos, anchorRef } = usePopover({ contentWidth: 240 });
+  const [pending, setPending] = useState(false);
+  const currentStatus = subtask.progressStatus ?? 'todo';
+  const meta = SUBTASK_PROGRESS_META[currentStatus];
+
+  function openPopover(e: React.MouseEvent) {
+    e.stopPropagation();
+    if (!onUpdate) return;
+    setOpen(v => !v);
+  }
+
+  async function selectStatus(status: SubtaskProgressStatus) {
+    if (!onUpdate || pending || status === currentStatus) {
+      setOpen(false);
+      return;
+    }
+    setPending(true);
+    const ok = await onUpdate(task, subtask.id, status);
+    setPending(false);
+    if (ok) setOpen(false);
+  }
+
+  return (
+    <div>
+      <button
+        ref={anchorRef as React.RefObject<HTMLButtonElement>}
+        type="button"
+        onClick={openPopover}
+        className={`max-w-[140px] truncate rounded-full border px-2 py-0.5 text-[10px] font-semibold transition-opacity ${meta.className} ${
+          onUpdate ? 'hover:opacity-80' : 'cursor-default'
+        }`}
+        title={onUpdate ? 'Editar status da subtask' : undefined}
+      >
+        {meta.label}
+      </button>
+
+      {open && createPortal(
+        <div
+          data-popover
+          style={{ position: 'absolute', top: pos.top, left: pos.left, zIndex: 9999 }}
+          className="w-60 rounded-lg border border-border bg-popover py-1 shadow-xl"
+          onClick={e => e.stopPropagation()}
+        >
+          <p className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            Status da subtask
+          </p>
+          {SUBTASK_PROGRESS_STATUS_ORDER.map(status => {
+            const item = SUBTASK_PROGRESS_META[status];
+            const selected = status === currentStatus;
+            return (
+              <button
+                key={status}
+                type="button"
+                disabled={pending}
+                onClick={() => selectStatus(status)}
+                className="flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-muted/60 disabled:opacity-50"
+              >
+                <span className={`shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold ${item.className}`}>
+                  {item.label}
+                </span>
+                <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+                  {item.description}
+                </span>
+                {selected && <Check className="h-3.5 w-3.5 shrink-0 text-primary" />}
+              </button>
+            );
+          })}
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}
diff --git a/src/views/planning/components/SubtaskRow.tsx b/src/views/planning/components/SubtaskRow.tsx
new file mode 100644
index 0000000..78fde20
--- /dev/null
+++ b/src/views/planning/components/SubtaskRow.tsx
@@ -0,0 +1,112 @@
+import { memo } from 'react';
+import { AlertCircle, Circle, CheckCircle2, PlayCircle, AlertTriangle, PauseCircle, XCircle } from 'lucide-react';
+import { STEP_META, type SubtaskProgressStatus, type Task, type SubtaskStatus } from '@/lib/steps';
+import type { Member } from '@/hooks/infra/useSupabase';
+import { formatDueDate } from '../utils';
+import { DatesPopover } from './DatesPopover';
+import { AssigneesPopover } from './AssigneesPopover';
+import { SubtaskProgressStatusPopover } from './SubtaskProgressStatusPopover';
+
+function SubtaskStatusIcon({ subtask, isConcluded, isBlocked }: {
+  subtask: Task['subtasks'][number];
+  isConcluded: boolean;
+  isBlocked: boolean;
+}) {
+  if (isConcluded) return <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500 shrink-0" />;
+  if (subtask.progressStatus === 'done') return <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500 shrink-0" />;
+  if (subtask.progressStatus === 'canceled') return <XCircle className="w-3.5 h-3.5 text-muted-foreground/50 shrink-0" />;
+  if (subtask.progressStatus === 'paused' || subtask.progressStatus === 'waiting') return <PauseCircle className="w-3.5 h-3.5 text-amber-500 shrink-0" />;
+  if (subtask.progressStatus === 'blocked') return <AlertTriangle className="w-3.5 h-3.5 text-red-500 shrink-0" />;
+  if (isBlocked && subtask.active) return <AlertTriangle className="w-3.5 h-3.5 text-orange-500 shrink-0" />;
+  if (subtask.active) {
+    const timeStatus = formatDueDate(subtask.end);
+    if (timeStatus?.label.startsWith('Atrasada')) return <AlertCircle className="w-3.5 h-3.5 text-red-500 shrink-0" />;
+    return <PlayCircle className="w-3.5 h-3.5 text-blue-500 shrink-0" />;
+  }
+  return <Circle className="w-2.5 h-2.5 text-muted-foreground/40 shrink-0 mx-0.5" />;
+}
+
+interface SubtaskRowProps {
+  subtask: Task['subtasks'][number];
+  task: Task;
+  members: Member[];
+  isLast: boolean;
+  onEdit: (task: Task) => void;
+  onUpdateSubtaskAssignees?: (task: Task, subtaskId: string, assignees: string[]) => Promise<boolean>;
+  onUpdateSubtaskDates?: (task: Task, subtaskId: string, start: string, end: string) => Promise<boolean>;
+  onUpdateSubtaskProgressStatus?: (task: Task, subtaskId: string, status: SubtaskProgressStatus) => Promise<boolean>;
+}
+
+export const SubtaskRow = memo(function SubtaskRow({
+  subtask,
+  task,
+  members,
+  isLast,
+  onEdit,
+  onUpdateSubtaskAssignees,
+  onUpdateSubtaskDates,
+  onUpdateSubtaskProgressStatus,
+}: SubtaskRowProps) {
+  const meta = STEP_META[subtask.status as SubtaskStatus];
+  const timeStatus = formatDueDate(subtask.end);
+  const isBlocked = task.status.blocked;
+  const isConcluded = !!task.concludedAt;
+
+  return (
+    <div
+      className={`relative grid grid-cols-[180px_150px_1fr_110px_90px_auto] items-center gap-0 pl-10 pr-3 min-h-[38px] cursor-pointer transition-colors group/sub
+        ${!isLast ? 'border-b border-border/40' : ''}
+        ${isBlocked && subtask.active
+          ? 'hover:bg-red-50/60 dark:hover:bg-red-950/20'
+          : isConcluded
+            ? 'hover:bg-muted/20 opacity-60'
+            : 'hover:bg-muted/40'
+        }`}
+      onClick={() => onEdit(task)}
+    >
+      <div className="absolute left-[18px] top-1/2 w-4 h-px bg-border/60 -translate-y-1/2" />
+
+      <div className="flex items-center gap-2 py-2.5 pr-3">
+        <SubtaskStatusIcon subtask={subtask} isConcluded={isConcluded} isBlocked={isBlocked} />
+        <span className={`text-[11px] font-semibold px-1.5 py-0.5 rounded-sm leading-none whitespace-nowrap ${meta.tagBg}`}>
+          {meta.label}
+        </span>
+      </div>
+
+      <div className="py-2.5 pr-3" onClick={e => e.stopPropagation()}>
+        <SubtaskProgressStatusPopover
+          subtask={subtask}
+          task={task}
+          onUpdate={onUpdateSubtaskProgressStatus}
+        />
+      </div>
+
+      <span className="text-xs text-muted-foreground truncate py-2.5 pr-4">
+        {subtask.title}
+      </span>
+
+      <div className="py-2.5 pr-4" onClick={e => e.stopPropagation()}>
+        <DatesPopover subtask={subtask} task={task} onUpdate={onUpdateSubtaskDates} />
+      </div>
+
+      <div className="py-2.5 pr-3">
+        {timeStatus ? (
+          <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full border whitespace-nowrap ${timeStatus.className}`}>
+            {timeStatus.label}
+          </span>
+        ) : (
+          <span className="text-[10px] text-muted-foreground/30">—</span>
+        )}
+      </div>
+
+      <div className="py-2.5" onClick={e => e.stopPropagation()}>
+        <AssigneesPopover
+          subtask={subtask}
+          task={task}
+          members={members}
+          onUpdate={onUpdateSubtaskAssignees}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/src/views/planning/components/TaskList.tsx b/src/views/planning/components/TaskList.tsx
new file mode 100644
index 0000000..34486a0
--- /dev/null
+++ b/src/views/planning/components/TaskList.tsx
@@ -0,0 +1,175 @@
+import { memo } from 'react';
+import { Link2, AlertCircle, Clock } from 'lucide-react';
+import { STEP_META, type Task } from '@/lib/steps';
+import type { Member } from '@/hooks/infra/useSupabase';
+import { formatDueDate } from '../utils';
+import { ActionMenu } from './ActionMenu';
+
+interface TaskListProps {
+  tasks: Task[];
+  members: Member[];
+  onToggleBlock: (task: Task) => void;
+  onConclude: (task: Task) => void;
+  onEdit: (task: Task) => void;
+}
+
+const SubtaskChip = memo(function SubtaskChip({ subtask, task, members, onEdit }: {
+  subtask: Task['subtasks'][number];
+  task: Task;
+  members: Member[];
+  onEdit: (task: Task) => void;
+}) {
+  const meta = STEP_META[subtask.status];
+  const timeStatus = formatDueDate(subtask.end);
+  const assigneeMembers = subtask.assignees
+    .map(id => members.find(m => m.id === id))
+    .filter((m): m is Member => m !== undefined);
+  const isBlocked = task.status.blocked;
+
+  return (
+    <div
+      className={`group flex items-stretch gap-0 rounded-lg border overflow-hidden transition-all cursor-pointer
+        ${isBlocked
+          ? 'border-red-300/70 dark:border-red-700/60 hover:border-red-400'
+          : 'border-border/50 hover:border-border hover:shadow-sm'
+        }`}
+      onClick={() => onEdit(task)}
+    >
+      <div className={`w-1 shrink-0 ${isBlocked ? 'bg-red-500' : meta.handle}`} />
+
+      <div className={`flex flex-1 items-center gap-3 px-3 py-2 min-w-0
+        ${isBlocked
+          ? 'bg-red-50/50 dark:bg-red-950/20 group-hover:bg-red-50/80'
+          : 'bg-background group-hover:bg-muted/30'
+        }`}
+      >
+        {/* subtask label + task name */}
+        <div className="flex-1 min-w-0 flex flex-col gap-0.5">
+          <div className="flex items-center gap-1.5">
+            <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded leading-none ${meta.tagBg}`}>
+              {meta.label}
+            </span>
+            {subtask.active && (
+              <span className="text-[10px] text-muted-foreground font-medium">ativa</span>
+            )}
+          </div>
+          <span className="text-xs text-muted-foreground truncate">{subtask.title}</span>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {timeStatus && (
+            <div className={`hidden sm:flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold border ${timeStatus.className}`}>
+              <Clock className="w-3 h-3" />
+              {timeStatus.label}
+            </div>
+          )}
+
+          <div className="flex -space-x-1.5">
+            {assigneeMembers.length === 0 ? (
+              <div
+                className="w-5 h-5 rounded-full border border-dashed border-muted-foreground/30 bg-muted/60 flex items-center justify-center text-[9px] text-muted-foreground/50"
+                title="Sem responsável"
+              >?</div>
+            ) : (
+              assigneeMembers.slice(0, 3).map(m => (
+                <div
+                  key={m.id}
+                  title={m.name}
+                  className="w-5 h-5 rounded-full ring-2 ring-background bg-primary text-primary-foreground text-[9px] font-bold flex items-center justify-center overflow-hidden"
+                >
+                  {m.avatar_url
+                    ? <img src={m.avatar_url} alt={m.name} className="w-full h-full object-cover" />
+                    : m.name.slice(0, 2).toUpperCase()
+                  }
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const TaskList = memo(function TaskList({ tasks, members, onToggleBlock, onConclude, onEdit }: TaskListProps) {
+  if (tasks.length === 0) return null;
+
+  return (
+    <div className="space-y-4 pb-16">
+      {tasks.map(task => {
+        const isBlocked = task.status.blocked;
+        const isConcluded = !!task.concludedAt;
+
+        return (
+          <div
+            key={task.id}
+            className={`rounded-xl border overflow-hidden transition-colors
+              ${isConcluded ? 'border-border/40 bg-muted/5 opacity-60' : isBlocked ? 'border-red-300/70 dark:border-red-700/60 bg-red-50/30 dark:bg-red-950/10' : 'border-border bg-card'}
+            `}
+          >
+            {/* Header da task */}
+            <div className="flex items-center gap-2 px-4 py-3">
+              <div className="flex-1 min-w-0 flex items-center gap-2">
+                <span
+                  className={`text-sm font-semibold truncate cursor-pointer hover:underline ${
+                    isConcluded ? 'line-through text-muted-foreground/70' : 'text-foreground'
+                  }`}
+                  onClick={() => onEdit(task)}
+                >
+                  {task.title}
+                </span>
+
+                {task.clickupLink && (
+                  <a
+                    href={task.clickupLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={e => e.stopPropagation()}
+                    title="Abrir no ClickUp"
+                    className="text-muted-foreground hover:text-primary transition-colors shrink-0"
+                  >
+                    <Link2 className="w-3.5 h-3.5" />
+                  </a>
+                )}
+
+                {isBlocked && (
+                  <span className="shrink-0 flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700 border border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800">
+                    <AlertCircle className="w-3 h-3" />
+                    Bloqueada
+                  </span>
+                )}
+                {isConcluded && (
+                  <span className="shrink-0 px-1.5 py-0.5 rounded text-[10px] font-medium bg-muted/80 text-muted-foreground border border-border/60">
+                    Concluída
+                  </span>
+                )}
+              </div>
+
+              <div onClick={e => e.stopPropagation()}>
+                <ActionMenu task={task} onToggleBlock={onToggleBlock} onConclude={onConclude} onEdit={onEdit} />
+              </div>
+            </div>
+
+            {/* Subtasks */}
+            {task.subtasks.length > 0 && (
+              <>
+                <div className="h-px bg-border/60 mx-4" />
+                <div className="p-3 space-y-1.5">
+                  {task.subtasks.map(subtask => (
+                    <SubtaskChip
+                      key={subtask.id}
+                      subtask={subtask}
+                      task={task}
+                      members={members}
+                      onEdit={onEdit}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/src/views/planning/components/TaskRow.tsx b/src/views/planning/components/TaskRow.tsx
index bf0565a..d08a4de 100644
--- a/src/views/planning/components/TaskRow.tsx
+++ b/src/views/planning/components/TaskRow.tsx
@@ -1,13 +1,13 @@
 import { memo } from 'react';
 import { Link2, AlertCircle, Clock } from 'lucide-react';
-import { STEP_META, type Task, type StepType } from '@/lib/steps';
+import { STEP_META, type Task, type SubtaskStatus } from '@/lib/steps';
 import type { Member } from '@/hooks/infra/useSupabase';
-import { formatDueDate } from '../utils';
+import { formatDueDate, getTaskRenderSignature } from '../utils';
 import { ActionMenu } from './ActionMenu';
 
 interface TaskRowProps {
   task: Task;
-  stepType: StepType;
+  stepType: SubtaskStatus;
   members: Member[];
   onToggleBlock: (task: Task) => void;
   onConclude: (task: Task) => void;
@@ -19,12 +19,12 @@ export const TaskRow = memo(function TaskRow({ task, stepType, members, onToggle
   const isConcluded = !!task.concludedAt;
   const meta = STEP_META[stepType];
 
-  const currentStep = task.steps.find(s => s.type === stepType) ?? task.steps.find(s => s.active) ?? task.steps[0];
-  const assigneeMembers = (currentStep?.assignees ?? [])
+  const currentSubtask = task.subtasks.find(s => s.status === stepType && s.active) ?? task.subtasks.find(s => s.active) ?? task.subtasks[0];
+  const assigneeMembers = (currentSubtask?.assignees ?? [])
     .map(id => members.find(m => m.id === id))
     .filter((m): m is Member => m !== undefined);
 
-  const timeStatus = formatDueDate(currentStep?.end);
+  const timeStatus = formatDueDate(currentSubtask?.end);
 
   return (
     <div
@@ -136,9 +136,7 @@ export const TaskRow = memo(function TaskRow({ task, stepType, members, onToggle
     </div>
   );
 }, (prev, next) =>
-  prev.task.id === next.task.id &&
-  prev.task.status?.blocked === next.task.status?.blocked &&
-  prev.task.concludedAt === next.task.concludedAt &&
+  getTaskRenderSignature(prev.task) === getTaskRenderSignature(next.task) &&
   prev.stepType === next.stepType &&
-  prev.members.length === next.members.length
+  prev.members === next.members
 );
diff --git a/src/views/planning/components/TaskTable.tsx b/src/views/planning/components/TaskTable.tsx
new file mode 100644
index 0000000..7400395
--- /dev/null
+++ b/src/views/planning/components/TaskTable.tsx
@@ -0,0 +1,216 @@
+import { memo, useMemo, useState } from 'react';
+import { Ban, CheckCircle2, UserPlus, X } from 'lucide-react';
+import type { SubtaskProgressStatus, Task } from '@/lib/steps';
+import type { Member } from '@/hooks/infra/useSupabase';
+import { Button } from '@/components/ui/Button';
+import { TaskTableRow } from './TaskTableRow';
+
+interface TaskTableProps {
+  tasks: Task[];
+  members: Member[];
+  onToggleBlock: (task: Task) => void;
+  onConclude: (task: Task) => void;
+  onEdit: (task: Task) => void;
+  onBulkAssign?: (tasks: Task[], memberId: string) => Promise<boolean>;
+  onBulkBlock?: (tasks: Task[]) => Promise<boolean>;
+  onBulkConclude?: (tasks: Task[]) => Promise<boolean>;
+  onReorder?: (tasks: Task[]) => Promise<boolean>;
+  onUpdateSubtaskAssignees?: (task: Task, subtaskId: string, assignees: string[]) => Promise<boolean>;
+  onUpdateSubtaskDates?: (task: Task, subtaskId: string, start: string, end: string) => Promise<boolean>;
+  onUpdateSubtaskProgressStatus?: (task: Task, subtaskId: string, status: SubtaskProgressStatus) => Promise<boolean>;
+}
+
+export const TaskTable = memo(function TaskTable({
+  tasks,
+  members,
+  onToggleBlock,
+  onConclude,
+  onEdit,
+  onBulkAssign,
+  onBulkBlock,
+  onBulkConclude,
+  onReorder,
+  onUpdateSubtaskAssignees,
+  onUpdateSubtaskDates,
+  onUpdateSubtaskProgressStatus,
+}: TaskTableProps) {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [assignOpen, setAssignOpen] = useState(false);
+  const [pendingAction, setPendingAction] = useState<'assign' | 'block' | 'conclude' | null>(null);
+  const [dragTaskId, setDragTaskId] = useState<string | null>(null);
+  const [dragOverTaskId, setDragOverTaskId] = useState<string | null>(null);
+
+  const selectedTasks = useMemo(
+    () => tasks.filter(task => selectedIds.includes(task.id)),
+    [tasks, selectedIds],
+  );
+  const selectedCount = selectedTasks.length;
+
+  if (tasks.length === 0) return null;
+
+  function toggleSelection(taskId: string, selected: boolean) {
+    setSelectedIds(prev => {
+      if (selected) return prev.includes(taskId) ? prev : [...prev, taskId];
+      return prev.filter(id => id !== taskId);
+    });
+  }
+
+  async function runBulkAction(action: 'block' | 'conclude', handler?: (tasks: Task[]) => Promise<boolean>) {
+    if (!handler || selectedTasks.length === 0 || pendingAction) return;
+    setAssignOpen(false);
+    setPendingAction(action);
+    const success = await handler(selectedTasks);
+    setPendingAction(null);
+    if (success) setSelectedIds([]);
+  }
+
+  async function assignSelected(memberId: string) {
+    if (!onBulkAssign || selectedTasks.length === 0 || pendingAction) return;
+    setPendingAction('assign');
+    const success = await onBulkAssign(selectedTasks, memberId);
+    setPendingAction(null);
+    if (success) {
+      setAssignOpen(false);
+      setSelectedIds([]);
+    }
+  }
+
+  async function handleDrop(targetTaskId: string) {
+    if (!dragTaskId || dragTaskId === targetTaskId || !onReorder) {
+      setDragTaskId(null);
+      setDragOverTaskId(null);
+      return;
+    }
+
+    const fromIndex = tasks.findIndex(task => task.id === dragTaskId);
+    const toIndex = tasks.findIndex(task => task.id === targetTaskId);
+    if (fromIndex < 0 || toIndex < 0) {
+      setDragTaskId(null);
+      setDragOverTaskId(null);
+      return;
+    }
+
+    const reordered = [...tasks];
+    const [moved] = reordered.splice(fromIndex, 1);
+    reordered.splice(toIndex, 0, moved);
+    setDragTaskId(null);
+    setDragOverTaskId(null);
+    await onReorder(reordered);
+  }
+
+  return (
+    <div className="space-y-2 pb-24">
+      {tasks.map(task => (
+        <TaskTableRow
+          key={task.id}
+          task={task}
+          members={members}
+          onToggleBlock={onToggleBlock}
+          onConclude={onConclude}
+          onEdit={onEdit}
+          selected={selectedIds.includes(task.id)}
+          onSelect={toggleSelection}
+          defaultExpanded={tasks.length > 0}
+          draggable={!!onReorder}
+          dragging={dragTaskId === task.id}
+          dragOver={dragOverTaskId === task.id && dragTaskId !== task.id}
+          onDragStart={() => setDragTaskId(task.id)}
+          onDragOver={() => setDragOverTaskId(task.id)}
+          onDrop={() => handleDrop(task.id)}
+          onDragEnd={() => { setDragTaskId(null); setDragOverTaskId(null); }}
+          onUpdateSubtaskAssignees={onUpdateSubtaskAssignees}
+          onUpdateSubtaskDates={onUpdateSubtaskDates}
+          onUpdateSubtaskProgressStatus={onUpdateSubtaskProgressStatus}
+        />
+      ))}
+
+      {selectedCount > 0 && (
+        <div className="fixed inset-x-4 bottom-4 z-40 mx-auto max-w-3xl rounded-xl border border-border bg-popover/95 p-3 shadow-2xl backdrop-blur supports-[backdrop-filter]:bg-popover/85">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-sm font-semibold text-foreground">
+                {selectedCount} demanda{selectedCount !== 1 ? 's' : ''} selecionada{selectedCount !== 1 ? 's' : ''}
+              </p>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-xs"
+                onClick={() => setSelectedIds([])}
+                aria-label="Limpar seleção"
+              >
+                <X className="w-3.5 h-3.5" />
+              </Button>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <div className="relative">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={!onBulkAssign || pendingAction !== null}
+                  isLoading={pendingAction === 'assign'}
+                  onClick={() => setAssignOpen(open => !open)}
+                >
+                  <UserPlus className="w-4 h-4" />
+                  Atribuir {selectedCount} tarefa{selectedCount !== 1 ? 's' : ''}
+                </Button>
+
+                {assignOpen && (
+                  <div className="absolute bottom-full left-0 mb-2 w-56 overflow-hidden rounded-lg border border-border bg-popover shadow-xl">
+                    <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                      Responsável
+                    </p>
+                    {members.map(member => (
+                      <button
+                        key={member.id}
+                        type="button"
+                        disabled={pendingAction !== null}
+                        onClick={() => assignSelected(member.id)}
+                        className="flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors hover:bg-muted/60 disabled:opacity-50"
+                      >
+                        <div className="flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
+                          {member.avatar_url
+                            ? <img src={member.avatar_url} alt={member.name} className="h-full w-full object-cover" />
+                            : member.name.slice(0, 2).toUpperCase()}
+                        </div>
+                        <span className="flex-1 truncate text-left text-foreground">{member.name}</span>
+                      </button>
+                    ))}
+                    {members.length === 0 && (
+                      <p className="px-3 py-2 text-xs text-muted-foreground">Nenhum membro disponível</p>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={!onBulkConclude || pendingAction !== null}
+                isLoading={pendingAction === 'conclude'}
+                onClick={() => runBulkAction('conclude', onBulkConclude)}
+              >
+                <CheckCircle2 className="w-4 h-4" />
+                Concluir {selectedCount} tarefa{selectedCount !== 1 ? 's' : ''}
+              </Button>
+
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                disabled={!onBulkBlock || pendingAction !== null}
+                isLoading={pendingAction === 'block'}
+                onClick={() => runBulkAction('block', onBulkBlock)}
+              >
+                <Ban className="w-4 h-4" />
+                Bloquear selecionadas
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/src/views/planning/components/TaskTableRow.tsx b/src/views/planning/components/TaskTableRow.tsx
new file mode 100644
index 0000000..df99aec
--- /dev/null
+++ b/src/views/planning/components/TaskTableRow.tsx
@@ -0,0 +1,256 @@
+import { memo, useState } from 'react';
+import { ChevronDown, ChevronRight, Link2, AlertCircle, CheckCircle2, GripVertical } from 'lucide-react';
+import { STEP_META, type SubtaskProgressStatus, type Task, type SubtaskStatus } from '@/lib/steps';
+import type { Member } from '@/hooks/infra/useSupabase';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { formatDueDate, getTaskRenderSignature } from '../utils';
+import { ActionMenu } from './ActionMenu';
+import { MemberAvatars } from './MemberAvatars';
+import { SubtaskRow } from './SubtaskRow';
+
+interface TaskTableRowProps {
+  task: Task;
+  members: Member[];
+  onToggleBlock: (task: Task) => void;
+  onConclude: (task: Task) => void;
+  onEdit: (task: Task) => void;
+  selected: boolean;
+  onSelect: (taskId: string, selected: boolean) => void;
+  defaultExpanded: boolean;
+  draggable?: boolean;
+  dragging?: boolean;
+  dragOver?: boolean;
+  onDragStart?: () => void;
+  onDragOver?: () => void;
+  onDrop?: () => void;
+  onDragEnd?: () => void;
+  onUpdateSubtaskAssignees?: (task: Task, subtaskId: string, assignees: string[]) => Promise<boolean>;
+  onUpdateSubtaskDates?: (task: Task, subtaskId: string, start: string, end: string) => Promise<boolean>;
+  onUpdateSubtaskProgressStatus?: (task: Task, subtaskId: string, status: SubtaskProgressStatus) => Promise<boolean>;
+}
+
+export const TaskTableRow = memo(function TaskTableRow({
+  task,
+  members,
+  onToggleBlock,
+  onConclude,
+  onEdit,
+  selected,
+  onSelect,
+  defaultExpanded,
+  draggable = false,
+  dragging = false,
+  dragOver = false,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  onUpdateSubtaskAssignees,
+  onUpdateSubtaskDates,
+  onUpdateSubtaskProgressStatus,
+}: TaskTableRowProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const isBlocked = task.status.blocked;
+  const isConcluded = !!task.concludedAt;
+
+  const activeSubtask = task.subtasks.find(s => s.active);
+  const allAssigneeIds = [...new Set(task.subtasks.flatMap(s => s.assignees))];
+  const taskTimeStatus = formatDueDate(activeSubtask?.end);
+  const measurableSubtasks = task.subtasks.filter(s => s.progressStatus !== 'canceled');
+  const completedCount = measurableSubtasks.filter(s => s.progressStatus === 'done').length;
+  const progress = task.subtasks.length > 0
+    ? isConcluded ? 100 : Math.round((completedCount / Math.max(measurableSubtasks.length, 1)) * 100)
+    : 0;
+
+  return (
+    <div
+      className={`rounded-xl border overflow-hidden transition-colors
+        ${dragging ? 'opacity-60' : ''}
+        ${dragOver ? 'ring-2 ring-primary/40 border-primary/60' : ''}
+        ${isConcluded
+          ? 'border-border/30 bg-muted/5'
+          : isBlocked
+            ? 'border-red-300/70 dark:border-red-700/50'
+            : 'border-border/60 bg-card'
+      }`}
+      onDragOver={e => {
+        if (!draggable) return;
+        e.preventDefault();
+        onDragOver?.();
+      }}
+      onDrop={e => {
+        if (!draggable) return;
+        e.preventDefault();
+        onDrop?.();
+      }}
+    >
+      <div
+        className={`flex items-center gap-0 cursor-pointer transition-colors group/row
+          ${isConcluded
+            ? 'bg-muted/10 hover:bg-muted/20'
+            : isBlocked
+              ? 'bg-red-50/50 dark:bg-red-950/20 hover:bg-red-50/80 dark:hover:bg-red-950/30'
+              : 'bg-background hover:bg-muted/30'
+          }`}
+        onClick={() => task.subtasks.length > 0 && setExpanded(e => !e)}
+      >
+        <div className={`w-1 self-stretch shrink-0 ${
+          isBlocked ? 'bg-red-500' : isConcluded ? 'bg-muted-foreground/25' : activeSubtask ? STEP_META[activeSubtask.status as SubtaskStatus].handle : 'bg-muted-foreground/30'
+        }`} />
+
+        <button
+          type="button"
+          draggable={draggable}
+          aria-label={`Reordenar demanda ${task.title}`}
+          title={draggable ? 'Arraste para reordenar prioridade' : undefined}
+          className="px-2 py-3 text-muted-foreground/45 hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-30 cursor-grab active:cursor-grabbing shrink-0"
+          disabled={!draggable}
+          onClick={e => e.stopPropagation()}
+          onDragStart={e => {
+            e.stopPropagation();
+            onDragStart?.();
+          }}
+          onDragEnd={e => {
+            e.stopPropagation();
+            onDragEnd?.();
+          }}
+        >
+          <GripVertical className="w-3.5 h-3.5" />
+        </button>
+
+        <div className="pl-3 pr-1 shrink-0" onClick={e => e.stopPropagation()}>
+          <Checkbox
+            checked={selected}
+            aria-label={`Selecionar demanda ${task.title}`}
+            onCheckedChange={checked => onSelect(task.id, checked === true)}
+          />
+        </div>
+
+        <button
+          className="px-2 py-3 text-muted-foreground/60 hover:text-muted-foreground shrink-0"
+          onClick={e => { e.stopPropagation(); setExpanded(v => !v); }}
+          tabIndex={-1}
+        >
+          {task.subtasks.length > 0
+            ? expanded
+              ? <ChevronDown className="w-3.5 h-3.5" />
+              : <ChevronRight className="w-3.5 h-3.5" />
+            : <span className="w-3.5 h-3.5 block" />
+          }
+        </button>
+
+        <div
+          className="flex-1 min-w-0 flex items-center gap-2 py-2.5 pr-2"
+          onClick={e => { e.stopPropagation(); onEdit(task); }}
+        >
+          <span className={`text-sm font-semibold truncate ${
+            isBlocked
+              ? 'line-through text-muted-foreground'
+              : isConcluded
+                ? 'text-muted-foreground/70 line-through'
+                : 'text-foreground'
+          }`}>
+            {task.title}
+          </span>
+
+          {task.clickupLink && (
+            <a
+              href={task.clickupLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={e => e.stopPropagation()}
+              title="Abrir no ClickUp"
+              className="text-muted-foreground hover:text-primary transition-colors shrink-0"
+            >
+              <Link2 className="w-3.5 h-3.5" />
+            </a>
+          )}
+
+          {isBlocked && (
+            <span className="shrink-0 flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700 border border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800">
+              <AlertCircle className="w-3 h-3" />
+              Bloqueada
+            </span>
+          )}
+          {isConcluded && (
+            <span className="shrink-0 flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-muted/80 text-muted-foreground border border-border/60">
+              <CheckCircle2 className="w-3 h-3" />
+              Concluída
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-4 pr-2 shrink-0">
+          {task.subtasks.length > 0 && (
+            <div className="hidden md:flex items-center gap-2 w-[100px]">
+              <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                <div
+                  className={`h-full rounded-full transition-all duration-500 ${progress === 100 ? 'bg-emerald-500' : 'bg-primary'}`}
+                  style={{ width: `${progress}%` }}
+                />
+              </div>
+              <span className="text-[10px] text-muted-foreground/60 tabular-nums w-7 text-right">{progress}%</span>
+            </div>
+          )}
+
+          {task.subtasks.length > 0 && (
+            <span className="text-[10px] text-muted-foreground/50 tabular-nums hidden sm:block whitespace-nowrap">
+              {task.subtasks.length} etapa{task.subtasks.length !== 1 ? 's' : ''}
+            </span>
+          )}
+
+          {taskTimeStatus && !isConcluded && (
+            <span className={`hidden sm:block text-[10px] font-semibold px-2 py-0.5 rounded-full border ${taskTimeStatus.className}`}>
+              {taskTimeStatus.label}
+            </span>
+          )}
+
+          <MemberAvatars assigneeIds={allAssigneeIds.slice(0, 4)} members={members} />
+
+          <div onClick={e => e.stopPropagation()}>
+            <ActionMenu task={task} onToggleBlock={onToggleBlock} onConclude={onConclude} onEdit={onEdit} />
+          </div>
+        </div>
+      </div>
+
+      {expanded && task.subtasks.length > 0 && (
+        <div className="border-t border-border/40 bg-muted/5">
+          <div className="relative pl-10 pr-3 py-1.5 border-b border-border/30 grid grid-cols-[180px_150px_1fr_110px_90px_auto]">
+            <div className="absolute left-[18px] top-0 bottom-0 w-px bg-border/40" />
+            <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/40">Etapa</span>
+            <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/40">Status</span>
+            <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/40">Título</span>
+            <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/40">Período</span>
+            <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/40">Prazo</span>
+            <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/40 text-right">Resp.</span>
+          </div>
+
+          <div className="relative">
+            <div className="absolute left-[18px] top-0 bottom-4 w-px bg-border/40" />
+            {task.subtasks.map((subtask, idx) => (
+              <SubtaskRow
+                key={subtask.id}
+                subtask={subtask}
+                task={task}
+                members={members}
+                isLast={idx === task.subtasks.length - 1}
+                onEdit={onEdit}
+                onUpdateSubtaskAssignees={onUpdateSubtaskAssignees}
+                onUpdateSubtaskDates={onUpdateSubtaskDates}
+                onUpdateSubtaskProgressStatus={onUpdateSubtaskProgressStatus}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}, (prev, next) =>
+  getTaskRenderSignature(prev.task) === getTaskRenderSignature(next.task) &&
+  prev.members === next.members &&
+  prev.selected === next.selected &&
+  prev.defaultExpanded === next.defaultExpanded &&
+  prev.draggable === next.draggable &&
+  prev.dragging === next.dragging &&
+  prev.dragOver === next.dragOver
+);
diff --git a/src/views/planning/components/TasksFilters.tsx b/src/views/planning/components/TasksFilters.tsx
index 47d2391..796c045 100644
--- a/src/views/planning/components/TasksFilters.tsx
+++ b/src/views/planning/components/TasksFilters.tsx
@@ -1,23 +1,26 @@
 import { useState } from 'react';
-import { Search, User, Calendar, AlertCircle, ChevronDown } from 'lucide-react';
+import { Search, Calendar, AlertCircle, ChevronDown, CheckCircle2 } from 'lucide-react';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
-import { STEP_META, STEP_TYPES_ORDER, type StepType } from '@/lib/steps';
+import { ViewTabs, type ViewTab } from '@/components/ui/ViewTabs';
+import { STEP_META, STEP_TYPES_ORDER, SUBTASK_PROGRESS_META, SUBTASK_PROGRESS_STATUS_ORDER, type StepType, type SubtaskProgressStatus } from '@/lib/steps';
 import type { Member } from '@/hooks/infra/useSupabase';
 
-const PERIOD_TABS = [
+const PERIOD_TABS: readonly ViewTab<string>[] = [
   { value: '', label: 'Todos' },
   { value: '7', label: '7d' },
   { value: '15', label: '15d' },
   { value: '30', label: '30d' },
-] as const;
+];
 
 export interface FiltersState {
   searchTerm: string;
   selectedSteps: StepType[];
+  selectedProgressStatuses: SubtaskProgressStatus[];
   selectedMemberIds: string[];
   selectedPeriod: string;
   showOnlyBlocked: boolean;
+  showConcluded: boolean;
 }
 
 interface TasksFiltersProps {
@@ -29,13 +32,13 @@ interface TasksFiltersProps {
 
 function CheckboxDropdown({
   label,
-  icon,
+  width = 'w-44',
   options,
   selected,
   onToggle,
 }: {
   label: string;
-  icon?: React.ReactNode;
+  width?: string;
   options: { value: string; label: string }[];
   selected: string[];
   onToggle: (value: string) => void;
@@ -54,16 +57,13 @@ function CheckboxDropdown({
       <button
         type="button"
         onClick={() => setOpen(v => !v)}
-        className={`flex items-center gap-1.5 px-3 py-2 text-sm rounded-md border transition-colors whitespace-nowrap min-w-[11rem] justify-between ${
+        className={`flex items-center gap-1.5 px-3 py-2 text-sm rounded-md border transition-colors whitespace-nowrap ${width} justify-between ${
           selected.length > 0
             ? 'border-primary bg-primary/5 text-foreground'
             : 'border-input bg-background text-muted-foreground hover:bg-muted'
         }`}
       >
-        <span className="flex items-center gap-1.5 min-w-0">
-          {icon}
-          <span className="truncate">{displayLabel}</span>
-        </span>
+        <span className="truncate">{displayLabel}</span>
         <ChevronDown className={`w-3.5 h-3.5 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
       </button>
 
@@ -92,9 +92,95 @@ function CheckboxDropdown({
   );
 }
 
+function MemberAvatarPicker({
+  members,
+  selectedIds,
+  onToggle,
+}: {
+  members: Member[];
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        className={`flex items-center gap-1.5 px-3 py-2 text-sm rounded-md border transition-colors whitespace-nowrap w-36 justify-between ${
+          selectedIds.length > 0
+            ? 'border-primary bg-primary/5 text-foreground'
+            : 'border-input bg-background text-muted-foreground hover:bg-muted'
+        }`}
+        title="Filtrar por responsável"
+      >
+        {selectedIds.length === 0 ? (
+          <span className="text-sm">Responsável</span>
+        ) : (
+          <span className="flex items-center gap-1">
+            {selectedIds.slice(0, 3).map(id => {
+              const m = members.find(m => m.id === id);
+              return m ? (
+                <span
+                  key={id}
+                  className="w-6 h-6 rounded-full bg-primary text-primary-foreground text-[10px] font-semibold flex items-center justify-center shrink-0 ring-1 ring-background -ml-1 first:ml-0"
+                  title={m.name}
+                >
+                  {m.avatar}
+                </span>
+              ) : null;
+            })}
+            {selectedIds.length > 3 && (
+              <span className="text-xs text-muted-foreground ml-1">+{selectedIds.length - 3}</span>
+            )}
+          </span>
+        )}
+        <ChevronDown className={`w-3.5 h-3.5 shrink-0 transition-transform ml-1 ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div className="absolute left-0 top-full mt-1 z-20 w-56 bg-popover border border-border rounded-md shadow-md py-1">
+            {members.map(m => {
+              const selected = selectedIds.includes(m.id);
+              return (
+                <button
+                  key={m.id}
+                  type="button"
+                  onClick={() => onToggle(m.id)}
+                  className={`flex items-center gap-2.5 px-3 py-2 w-full text-left text-sm hover:bg-muted transition-colors ${selected ? 'bg-primary/5' : ''}`}
+                >
+                  {m.avatar_url ? (
+                    <img src={m.avatar_url} alt={m.name} className="w-7 h-7 rounded-full object-cover shrink-0" />
+                  ) : (
+                    <span className="w-7 h-7 rounded-full bg-primary text-primary-foreground text-xs font-semibold flex items-center justify-center shrink-0">
+                      {m.avatar}
+                    </span>
+                  )}
+                  <span className="flex-1 truncate">{m.name}</span>
+                  {selected && <span className="w-2 h-2 rounded-full bg-primary shrink-0" />}
+                </button>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
 export function TasksFilters({ filters, members, onChange, onClear }: TasksFiltersProps) {
-  const { searchTerm, selectedSteps, selectedMemberIds, selectedPeriod, showOnlyBlocked } = filters;
-  const hasActiveFilters = searchTerm !== '' || selectedSteps.length > 0 || selectedMemberIds.length > 0 || selectedPeriod !== '' || showOnlyBlocked;
+  const { searchTerm, selectedSteps, selectedProgressStatuses, selectedMemberIds, selectedPeriod, showOnlyBlocked, showConcluded } = filters;
+  const hasActiveFilters =
+    searchTerm !== '' ||
+    selectedSteps.length > 0 ||
+    selectedProgressStatuses.length > 0 ||
+    selectedMemberIds.length > 0 ||
+    selectedPeriod !== '' ||
+    showOnlyBlocked ||
+    showConcluded;
 
   function toggleStep(step: StepType) {
     const next = selectedSteps.includes(step)
@@ -103,6 +189,13 @@ export function TasksFilters({ filters, members, onChange, onClear }: TasksFilte
     onChange({ selectedSteps: next });
   }
 
+  function toggleProgressStatus(status: SubtaskProgressStatus) {
+    const next = selectedProgressStatuses.includes(status)
+      ? selectedProgressStatuses.filter(s => s !== status)
+      : [...selectedProgressStatuses, status];
+    onChange({ selectedProgressStatuses: next });
+  }
+
   function toggleMember(id: string) {
     const next = selectedMemberIds.includes(id)
       ? selectedMemberIds.filter(m => m !== id)
@@ -116,7 +209,7 @@ export function TasksFilters({ filters, members, onChange, onClear }: TasksFilte
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
         <Input
           type="text"
-          placeholder="Pesquisar demanda ou ID..."
+          placeholder="Pesquisar demanda, subtask ou ID..."
           value={searchTerm}
           onChange={e => onChange({ searchTerm: e.target.value })}
           className="pl-9 w-full"
@@ -125,35 +218,32 @@ export function TasksFilters({ filters, members, onChange, onClear }: TasksFilte
 
       <div className="flex items-center gap-2 flex-wrap sm:flex-nowrap shrink-0">
         <CheckboxDropdown
-          label="Todas as etapas"
+          label="Categoria"
           options={STEP_TYPES_ORDER.map(s => ({ value: s, label: STEP_META[s].label }))}
           selected={selectedSteps}
           onToggle={v => toggleStep(v as StepType)}
         />
 
         <CheckboxDropdown
-          label="Todos responsáveis"
-          icon={<User className="w-4 h-4 shrink-0" />}
-          options={members.map(m => ({ value: m.id, label: m.name }))}
-          selected={selectedMemberIds}
+          label="Status"
+          options={SUBTASK_PROGRESS_STATUS_ORDER.map(s => ({ value: s, label: SUBTASK_PROGRESS_META[s].label }))}
+          selected={selectedProgressStatuses}
+          onToggle={v => toggleProgressStatus(v as SubtaskProgressStatus)}
+        />
+
+        <MemberAvatarPicker
+          members={members}
+          selectedIds={selectedMemberIds}
           onToggle={toggleMember}
         />
 
         <div className="flex items-center gap-1 border border-input bg-background rounded-md px-2 py-1">
           <Calendar className="w-4 h-4 text-muted-foreground shrink-0" />
-          {PERIOD_TABS.map(tab => (
-            <button
-              key={tab.value}
-              onClick={() => onChange({ selectedPeriod: tab.value })}
-              className={`px-2.5 py-1 text-xs font-medium rounded transition-colors whitespace-nowrap ${
-                selectedPeriod === tab.value
-                  ? 'bg-primary text-primary-foreground shadow-sm'
-                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
-              }`}
-            >
-              {tab.label}
-            </button>
-          ))}
+          <ViewTabs
+            tabs={PERIOD_TABS}
+            value={selectedPeriod}
+            onChange={v => onChange({ selectedPeriod: v })}
+          />
         </div>
 
         <button
@@ -168,6 +258,18 @@ export function TasksFilters({ filters, members, onChange, onClear }: TasksFilte
           Bloqueadas
         </button>
 
+        <button
+          onClick={() => onChange({ showConcluded: !showConcluded })}
+          className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium rounded-md border transition-colors whitespace-nowrap ${
+            showConcluded
+              ? 'bg-emerald-50 text-emerald-600 border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-400 dark:border-emerald-800'
+              : 'bg-background text-muted-foreground border-input hover:bg-muted'
+          }`}
+        >
+          <CheckCircle2 className="w-3.5 h-3.5" />
+          Concluídas
+        </button>
+
         <div className="w-[68px]">
           {hasActiveFilters && (
             <Button variant="ghost" size="sm" onClick={onClear} className="w-full">
diff --git a/src/views/planning/components/__tests__/TaskTable.test.tsx b/src/views/planning/components/__tests__/TaskTable.test.tsx
new file mode 100644
index 0000000..57f0b11
--- /dev/null
+++ b/src/views/planning/components/__tests__/TaskTable.test.tsx
@@ -0,0 +1,98 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { TaskTable } from '../TaskTable'
+import type { SubtaskProgressStatus, Task } from '@/lib/steps'
+
+const baseTask: Omit<Task, 'id' | 'title' | 'priorityOrder'> = {
+  clickupLink: undefined,
+  clientId: 'client-1',
+  status: { blocked: false },
+  subtasks: [],
+  createdAt: '2026-05-12T00:00:00Z',
+  concludedAt: undefined,
+  concludedBy: undefined,
+}
+
+function makeTask(id: string, title: string, priorityOrder: number): Task {
+  return {
+    ...baseTask,
+    id,
+    title,
+    priorityOrder,
+  }
+}
+
+function makeTaskWithSubtask(progressStatus: SubtaskProgressStatus = 'todo'): Task {
+  return {
+    ...makeTask('task-1', 'Demanda A', 0),
+    subtasks: [{
+      id: 'subtask-1',
+      title: 'Subtask A',
+      status: 'design',
+      progressStatus,
+      start: '2026-05-12',
+      end: '2026-05-15',
+      assignees: [],
+      active: true,
+      order: 0,
+    }],
+  }
+}
+
+describe('TaskTable', () => {
+  it('chama onReorder com demandas na nova ordem ao arrastar uma linha-pai', async () => {
+    const tasks = [
+      makeTask('task-1', 'Demanda A', 0),
+      makeTask('task-2', 'Demanda B', 1),
+      makeTask('task-3', 'Demanda C', 2),
+    ]
+    const onReorder = vi.fn().mockResolvedValue(true)
+
+    render(
+      <TaskTable
+        tasks={tasks}
+        members={[]}
+        onToggleBlock={vi.fn()}
+        onConclude={vi.fn()}
+        onEdit={vi.fn()}
+        onReorder={onReorder}
+      />,
+    )
+
+    fireEvent.dragStart(screen.getByRole('button', { name: 'Reordenar demanda Demanda C' }))
+    fireEvent.dragOver(screen.getByText('Demanda A'))
+    fireEvent.drop(screen.getByText('Demanda A'))
+
+    await waitFor(() => expect(onReorder).toHaveBeenCalledTimes(1))
+    expect(onReorder.mock.calls[0][0].map((task: Task) => task.id)).toEqual([
+      'task-3',
+      'task-1',
+      'task-2',
+    ])
+  })
+
+  it('atualiza o status de andamento da subtask pelo popover', async () => {
+    const task = makeTaskWithSubtask('todo')
+    const onUpdateSubtaskProgressStatus = vi.fn().mockResolvedValue(true)
+
+    render(
+      <TaskTable
+        tasks={[task]}
+        members={[]}
+        onToggleBlock={vi.fn()}
+        onConclude={vi.fn()}
+        onEdit={vi.fn()}
+        onUpdateSubtaskProgressStatus={onUpdateSubtaskProgressStatus}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'A fazer' }))
+    fireEvent.click(screen.getByRole('button', { name: /Em andamento/ }))
+
+    await waitFor(() => expect(onUpdateSubtaskProgressStatus).toHaveBeenCalledWith(
+      task,
+      'subtask-1',
+      'in-progress',
+    ))
+  })
+})
diff --git a/src/views/planning/components/usePopover.ts b/src/views/planning/components/usePopover.ts
new file mode 100644
index 0000000..cff9d02
--- /dev/null
+++ b/src/views/planning/components/usePopover.ts
@@ -0,0 +1,58 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+export interface PopoverPosition {
+  top: number;
+  left: number;
+  width: number;
+}
+
+interface UsePopoverOptions {
+  align?: 'start' | 'end';
+  contentWidth?: number;
+}
+
+const VIEWPORT_PADDING = 8;
+
+export function usePopover({ align = 'start', contentWidth = 0 }: UsePopoverOptions = {}) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<PopoverPosition>({ top: 0, left: 0, width: 0 });
+  const anchorRef = useRef<HTMLElement>(null);
+
+  const recalc = useCallback(() => {
+    if (!anchorRef.current) return;
+    const r = anchorRef.current.getBoundingClientRect();
+    const rawLeft = align === 'end' && contentWidth > 0
+      ? r.right + window.scrollX - contentWidth
+      : r.left + window.scrollX;
+    const maxLeft = window.scrollX + window.innerWidth - contentWidth - VIEWPORT_PADDING;
+    const left = contentWidth > 0
+      ? Math.min(Math.max(rawLeft, window.scrollX + VIEWPORT_PADDING), maxLeft)
+      : rawLeft;
+
+    setPos({ top: r.bottom + window.scrollY + 4, left, width: r.width });
+  }, [align, contentWidth]);
+
+  useEffect(() => {
+    if (!open) return;
+    recalc();
+    function onMouseDown(e: MouseEvent) {
+      const target = e.target as Node;
+      if (anchorRef.current && anchorRef.current.contains(target)) return;
+      // portal content has data-popover attribute
+      const portal = document.querySelector('[data-popover]');
+      if (portal && portal.contains(target)) return;
+      setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open, recalc]);
+
+  return { open, setOpen, pos, anchorRef };
+}
diff --git a/src/views/planning/hooks/useTaskFilters.ts b/src/views/planning/hooks/useTaskFilters.ts
index 0fc7a5c..372cda5 100644
--- a/src/views/planning/hooks/useTaskFilters.ts
+++ b/src/views/planning/hooks/useTaskFilters.ts
@@ -1,17 +1,28 @@
-import { useState, useMemo } from 'react';
-import type { StepType } from '@/lib/steps';
+import { useMemo } from 'react';
 import { normaliseTask, todayStr } from '@/utils/dashboardUtils';
 import { getCurrentStep } from '@/lib/steps';
 import type { Task } from '@/types/task';
+import { usePlanningFiltersStore } from '@/store/usePlanningFiltersStore';
 
-export type CalendarViewMode = 'step' | 'demand';
+export type { CalendarViewMode } from '@/store/usePlanningFiltersStore';
 
 export function useTaskFilters(tasks: Task[], enablePeriodFilter = false, initialAssignee = '') {
-  const [filterAssignee, setFilterAssignee] = useState(() => initialAssignee);
-  const [filterStatus, setFilterStatus] = useState('');
-  const [filterSteps, setFilterSteps] = useState<StepType[]>([]);
-  const [filterPeriodDays, setFilterPeriodDays] = useState(60);
-  const [viewMode, setViewMode] = useState<CalendarViewMode>('step');
+  const {
+    filterAssignee, setFilterAssignee,
+    filterStatus, setFilterStatus,
+    filterSteps,
+    filterPeriodDays, setFilterPeriodDays,
+    viewMode, setViewMode,
+    toggleStepFilter,
+    clearFilters,
+  } = usePlanningFiltersStore();
+
+  // seed assignee from redirect only once — store handles persistence
+  useMemo(() => {
+    if (initialAssignee && !filterAssignee) setFilterAssignee(initialAssignee);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialAssignee]);
+
   const periodStart = useMemo(() => {
     const start = new Date();
     start.setHours(0, 0, 0, 0);
@@ -31,19 +42,6 @@ export function useTaskFilters(tasks: Task[], enablePeriodFilter = false, initia
     (enablePeriodFilter && filterPeriodDays !== 60)
   );
 
-  const clearFilters = () => {
-    setFilterAssignee('');
-    setFilterStatus('');
-    setFilterSteps([]);
-    setFilterPeriodDays(60);
-  };
-
-  const toggleStepFilter = (type: StepType) => {
-    setFilterSteps(prev =>
-      prev.includes(type) ? prev.filter(s => s !== type) : [...prev, type]
-    );
-  };
-
   const filteredTasks = useMemo(() => {
     return tasks
       .filter(task => {
@@ -54,40 +52,37 @@ export function useTaskFilters(tasks: Task[], enablePeriodFilter = false, initia
         }
         if (filterAssignee) {
           const norm = normaliseTask(task);
-          const anyStepHas = norm.steps.some(s => s.assignees.includes(filterAssignee));
+          const anyStepHas = norm.subtasks.some(s => s.assignees.includes(filterAssignee));
           if (!anyStepHas) return false;
         }
         if (filterSteps.length > 0) {
           const norm = normaliseTask(task);
-          const activeTypes = norm.steps.filter(s => s.active).map(s => s.type);
+          const activeTypes = norm.subtasks.filter(s => s.active).map(s => s.status);
           if (!filterSteps.some(ft => activeTypes.includes(ft))) return false;
         }
-
         if (enablePeriodFilter) {
           const norm = normaliseTask(task);
-          const intersectsPeriod = norm.steps.some(step => {
+          const intersectsPeriod = norm.subtasks.some(step => {
             if (!step.active || !step.start || !step.end) return false;
             const stepStart = new Date(step.start + 'T00:00:00');
             const stepEnd = new Date(step.end + 'T00:00:00');
             if (Number.isNaN(stepStart.getTime()) || Number.isNaN(stepEnd.getTime())) return false;
-
             return stepEnd >= periodStart && stepStart <= periodEnd;
           });
-
           if (!intersectsPeriod) return false;
         }
         return true;
       })
       .map(task => {
         const norm = normaliseTask(task);
-        let steps = norm.steps;
+        let subtasks = norm.subtasks;
         if (filterSteps.length > 0) {
-          steps = steps.filter(s => filterSteps.includes(s.type));
+          subtasks = subtasks.filter(s => filterSteps.includes(s.status));
         }
         if (filterAssignee) {
-          steps = steps.filter(s => s.assignees.includes(filterAssignee));
+          subtasks = subtasks.filter(s => s.assignees.includes(filterAssignee));
         }
-        return { ...norm, steps };
+        return { ...norm, subtasks };
       });
   }, [tasks, filterAssignee, filterStatus, filterSteps, enablePeriodFilter, periodStart, periodEnd]);
 
@@ -104,21 +99,17 @@ export function useTaskFilters(tasks: Task[], enablePeriodFilter = false, initia
     return tasks.filter(t => {
       const norm = normaliseTask(t);
       if (norm.concludedAt) return false;
-      const step = getCurrentStep(norm.steps ?? [], today);
+      const step = getCurrentStep(norm.subtasks ?? [], today);
       return step && step.start <= today && step.end >= today;
     }).length;
   }, [tasks]);
 
-return {
-    filterAssignee,
-    setFilterAssignee,
-    filterStatus,
-    setFilterStatus,
+  return {
+    filterAssignee, setFilterAssignee,
+    filterStatus, setFilterStatus,
     filterSteps,
-    filterPeriodDays,
-    setFilterPeriodDays,
-    viewMode,
-    setViewMode,
+    filterPeriodDays, setFilterPeriodDays,
+    viewMode, setViewMode,
     hasActiveFilters,
     clearFilters,
     toggleStepFilter,
diff --git a/src/views/planning/utils.ts b/src/views/planning/utils.ts
index 4d233b2..536f785 100644
--- a/src/views/planning/utils.ts
+++ b/src/views/planning/utils.ts
@@ -1,3 +1,29 @@
+import type { Task } from '@/lib/steps';
+
+export function getTaskRenderSignature(task: Task): string {
+  return JSON.stringify([
+    task.id,
+    task.title,
+    task.clickupLink ?? '',
+    task.priorityOrder,
+    task.status.blocked,
+    task.status.blockedAt ?? '',
+    task.concludedAt ?? '',
+    task.concludedBy ?? '',
+    task.subtasks.map(subtask => [
+      subtask.id,
+      subtask.title,
+      subtask.status,
+      subtask.progressStatus,
+      subtask.start,
+      subtask.end,
+      subtask.active,
+      subtask.order,
+      subtask.assignees,
+    ]),
+  ]);
+}
+
 export function formatDueDate(isoDate: string | undefined): { label: string; className: string } | null {
   if (!isoDate) return null;
   const due = new Date(isoDate.length === 10 ? isoDate + 'T00:00:00' : isoDate);
diff --git a/src/views/reports/components/DemandsTable.tsx b/src/views/reports/components/DemandsTable.tsx
index aacc2b7..d08df11 100644
--- a/src/views/reports/components/DemandsTable.tsx
+++ b/src/views/reports/components/DemandsTable.tsx
@@ -35,7 +35,7 @@ const DemandsTable: React.FC<DemandsTableProps> = ({ enriched }) => (
           </thead>
           <tbody>
             {enriched.map((t, i) => {
-              const stepMeta = t.currentStep ? STEP_META[t.currentStep.type as StepType] : null;
+              const stepMeta = t.currentStep ? STEP_META[t.currentStep.status as StepType] : null;
               return (
                 <tr key={t.id} className={cn('border-b border-border last:border-0 hover:bg-muted/30 transition-colors', i % 2 === 0 ? '' : 'bg-muted/10')}>
                   <td className="px-4 py-3">
diff --git a/src/views/reports/components/PredictiveAlerts.tsx b/src/views/reports/components/PredictiveAlerts.tsx
index 0e73df2..d05f5d1 100644
--- a/src/views/reports/components/PredictiveAlerts.tsx
+++ b/src/views/reports/components/PredictiveAlerts.tsx
@@ -24,7 +24,7 @@ const PredictiveAlerts: React.FC<PredictiveAlertsProps> = ({ enriched, p85ByStep
 
     for (const t of enriched) {
       const step = t.currentStep;
-      const p85 = step ? p85ByStep[step.type] : 0;
+      const p85 = step ? p85ByStep[step.status] : 0;
       const plannedDuration = step?.start && step?.end 
         ? Math.ceil((new Date(step.end + 'T00:00:00').getTime() - new Date(step.start + 'T00:00:00').getTime()) / 86400000) + 1
         : 0;
diff --git a/src/views/reports/useReportsData.ts b/src/views/reports/useReportsData.ts
index 7e7cbc2..79456cf 100644
--- a/src/views/reports/useReportsData.ts
+++ b/src/views/reports/useReportsData.ts
@@ -138,7 +138,7 @@ export function useReportsData(): ReportsData {
       if (t.risk === 'concluido') continue;
       for (const step of t.visibleSteps) {
         if (step.start <= today && step.end >= today) {
-          counts[step.type as StepType] = (counts[step.type as StepType] ?? 0) + 1;
+          counts[step.status as StepType] = (counts[step.status as StepType] ?? 0) + 1;
         }
       }
     }
@@ -188,12 +188,12 @@ export function useReportsData(): ReportsData {
         totalDays += days;
         
         for (const step of t.visibleSteps) {
-          if (!byStepCounts[step.type]) {
-            byStepCounts[step.type] = { total: 0, count: 0 };
+          if (!byStepCounts[step.status]) {
+            byStepCounts[step.status] = { total: 0, count: 0 };
           }
           const stepDays = calDaysBetween(step.start, step.end) + 1;
-          byStepCounts[step.type].total += stepDays;
-          byStepCounts[step.type].count += 1;
+          byStepCounts[step.status].total += stepDays;
+          byStepCounts[step.status].count += 1;
         }
       }
     }
@@ -234,12 +234,12 @@ export function useReportsData(): ReportsData {
     const stepStats: Record<string, { avgDuration: number; totalTasks: number; delays: number }> = {};
     for (const t of filteredEnriched) {
       for (const step of t.visibleSteps) {
-        if (!stepStats[step.type]) {
-          stepStats[step.type] = { avgDuration: 0, totalTasks: 0, delays: 0 };
+        if (!stepStats[step.status]) {
+          stepStats[step.status] = { avgDuration: 0, totalTasks: 0, delays: 0 };
         }
-        stepStats[step.type].totalTasks++;
+        stepStats[step.status].totalTasks++;
         const duration = calDaysBetween(step.start, step.end) + 1;
-        stepStats[step.type].avgDuration = Math.round(((stepStats[step.type].avgDuration * (stepStats[step.type].totalTasks - 1)) + duration) / stepStats[step.type].totalTasks);
+        stepStats[step.status].avgDuration = Math.round(((stepStats[step.status].avgDuration * (stepStats[step.status].totalTasks - 1)) + duration) / stepStats[step.status].totalTasks);
       }
     }
     return Object.entries(stepStats)
@@ -272,7 +272,7 @@ export function useReportsData(): ReportsData {
         scatterData.push({
           date: t.lastDeadline,
           duration: t.leadTime,
-          stepType: t.currentStep?.type ?? 'desenvolvimento',
+          stepType: t.currentStep?.status ?? 'desenvolvimento',
           title: t.title,
         });
       }
@@ -282,8 +282,8 @@ export function useReportsData(): ReportsData {
     const stepDurations: Record<string, number[]> = {};
     for (const t of completedTasks) {
       for (const step of t.visibleSteps) {
-        if (!stepDurations[step.type]) stepDurations[step.type] = [];
-        stepDurations[step.type].push(calDaysBetween(step.start, step.end) + 1);
+        if (!stepDurations[step.status]) stepDurations[step.status] = [];
+        stepDurations[step.status].push(calDaysBetween(step.start, step.end) + 1);
       }
     }
     for (const [type, durations] of Object.entries(stepDurations)) {
@@ -301,7 +301,7 @@ export function useReportsData(): ReportsData {
         let count = 0;
         for (const t of filteredEnriched) {
           for (const step of t.visibleSteps) {
-            if (step.assignees.includes(m.id) && step.type === stepType) {
+            if (step.assignees.includes(m.id) && step.status === stepType) {
               totalDays += calDaysBetween(step.start, step.end) + 1;
               count++;
             }
diff --git a/src/views/reports/utils.ts b/src/views/reports/utils.ts
index a22b4ae..ae76dcd 100644
--- a/src/views/reports/utils.ts
+++ b/src/views/reports/utils.ts
@@ -1,5 +1,5 @@
 import { migrateLegacyTask, getCurrentStep } from '@/lib/steps';
-import type { Task, Step, LegacyTask, StepType } from '@/lib/steps';
+import type { Task, Subtask, LegacyTask, StepType } from '@/lib/steps';
 import type { Member } from '@/hooks/infra/useSupabase';
 
 // ─── Pure helpers ─────────────────────────────────────────────────────────────
@@ -47,13 +47,13 @@ export function isTaskStagnant(lastUpdatedAt: string | null, daysThreshold: numb
 }
 
 export function normalizeTask(task: Task | LegacyTask): Task {
-  if ((task as Task).steps && typeof (task as Task).status === 'object') return task as Task;
+  if ((task as Task).subtasks && typeof (task as Task).status === 'object') return task as Task;
   const migrated = migrateLegacyTask(task as LegacyTask);
   return { ...(task as object), ...migrated } as Task;
 }
 
-export function getVisibleSteps(task: Task | LegacyTask): Step[] {
-  return normalizeTask(task).steps.filter(s => s.active && s.start && s.end);
+export function getVisibleSteps(task: Task | LegacyTask): Subtask[] {
+  return normalizeTask(task).subtasks.filter(s => s.active && s.start && s.end);
 }
 
 export function getLastDeadline(task: Task | LegacyTask): string | null {
@@ -87,14 +87,14 @@ export function getRisk(task: Task | LegacyTask, today: string): 'ok' | 'risco'
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 export type EnrichedTask = Task & {
-  visibleSteps: Step[];
+  visibleSteps: Subtask[];
   lastDeadline: string | null;
   firstStart: string | null;
   risk: 'ok' | 'risco' | 'atrasado' | 'concluido';
   daysLeft: number;
   bizLeft: number;
   taskMembers: Member[];
-  currentStep: Step | null;
+  currentStep: Subtask | null;
   progress: number;
   isBlocked: boolean;
   leadTime: number | null;
@@ -135,7 +135,7 @@ export function enrichTask(task: Task | LegacyTask, today: string, members: Memb
   const bizLeft = lastDeadline ? businessDaysLeft(lastDeadline, today) : 0;
   const memberIds = getTaskMembers(task);
   const taskMembers = members.filter(m => memberIds.includes(m.id));
-  const currentStep = getCurrentStep(norm.steps ?? [], today);
+  const currentStep = getCurrentStep(norm.subtasks ?? [], today);
 
   let progress = 0;
   if (visibleSteps.length > 0 && lastDeadline && firstStart) {
diff --git a/src/views/timeline/TimelineView.tsx b/src/views/timeline/TimelineView.tsx
index fdc95f0..6918aa6 100644
--- a/src/views/timeline/TimelineView.tsx
+++ b/src/views/timeline/TimelineView.tsx
@@ -5,7 +5,7 @@ import { usePhaseDrag } from '@/hooks/ui/usePhaseDrag';
 import { useTimelineDays } from './hooks/useTimelineDays';
 import { useRowHeightSync } from './hooks/useRowHeightSync';
 import { useHeaderHeightSync } from './hooks/useHeaderHeightSync';
-import TimelineHeader from './components/TimelineHeader';
+import { usePlanningFiltersStore } from '@/store/usePlanningFiltersStore';
 import DayColumnHeaders from './components/DayColumnHeaders';
 import TaskInfoPanelWrapper from './components/TaskInfoPanelWrapper';
 import TaskCalendarRows from './components/TaskCalendarRows';
@@ -18,25 +18,25 @@ const formatStepRange = (start: string, end: string) => {
   return `${startDate.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' })} - ${endDate.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' })}`;
 };
 
-const TimelineView: React.FC<TimelineViewProps> = ({ tasks, members, onEdit, onDelete, onUpdateTask, holidays, daysRange }) => {
+const TimelineView: React.FC<TimelineViewProps> = ({ tasks: filteredTasks, members, onEdit, onDelete, onUpdateTask, holidays }) => {
+  const daysRange = usePlanningFiltersStore((s) => s.filterPeriodDays);
+
   const { days, today } = useTimelineDays(daysRange);
-  const { dragPreview, didDragRef, startDrag, pendingDragUpdate, confirmDrag, cancelDrag, postponeDragToBusinessDay } = usePhaseDrag(tasks, onUpdateTask, holidays);
+  const { dragPreview, didDragRef, startDrag, pendingDragUpdate, confirmDrag, cancelDrag, postponeDragToBusinessDay } = usePhaseDrag(filteredTasks, onUpdateTask, holidays);
   const containerRef = useRef<HTMLDivElement>(null);
-  const { setInfoRef, setCalRef } = useRowHeightSync(tasks.length);
+  const { setInfoRef, setCalRef } = useRowHeightSync(filteredTasks.length);
   const { infoHeaderRef, calHeaderRef } = useHeaderHeightSync();
 
   return (
     <div className="rounded-xl border border-border bg-card shadow-sm w-full">
-      <TimelineHeader daysRange={daysRange} />
-
       <div className="md:hidden w-full">
-        {tasks.length === 0 ? (
+        {filteredTasks.length === 0 ? (
           <div className="p-6 text-center text-muted-foreground text-sm">
             Nenhuma demanda no período selecionado.
           </div>
         ) : (
           <div className="divide-y divide-border">
-            {tasks.map((task) => {
+            {filteredTasks.map((task) => {
               const visibleSteps = getVisibleSteps(task);
               const status = getTaskStatusDisplay(task);
 
@@ -66,9 +66,9 @@ const TimelineView: React.FC<TimelineViewProps> = ({ tasks, members, onEdit, onD
                           .join(', ');
 
                         return (
-                          <div key={step.type} className="rounded-lg border border-border bg-muted/30 px-2 py-1.5">
+                          <div key={step.id} className="rounded-lg border border-border bg-muted/30 px-2 py-1.5">
                             <div className="flex items-center justify-between gap-2">
-                              <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded ${STEP_META[step.type].tagBg}`}>{STEP_META[step.type].tag}</span>
+                              <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded ${STEP_META[step.status]?.tagBg}`}>{STEP_META[step.status]?.tag ?? step.title}</span>
                               <span className="text-[11px] text-muted-foreground">{formatStepRange(step.start, step.end)}</span>
                             </div>
                             {assignees && <div className="text-[11px] text-muted-foreground mt-1 truncate">{assignees}</div>}
@@ -88,10 +88,9 @@ const TimelineView: React.FC<TimelineViewProps> = ({ tasks, members, onEdit, onD
         {/* Fixed info column */}
         <div className="shrink-0 w-56 border-r border-border z-20 bg-card">
           <div ref={infoHeaderRef} className="border-b border-border bg-muted flex flex-col h-[41px]">
-            
             <div className="px-3 py-1.5 text-xs font-semibold text-muted-foreground flex items-center h-[22px]">Demanda</div>
           </div>
-          {tasks.length > 0 && tasks.map((task, i) => (
+          {filteredTasks.length > 0 && filteredTasks.map((task, i) => (
             <div key={task.id} className={`border-b border-border group hover:bg-muted/30 transition-colors ${i % 2 === 1 ? 'bg-muted/20' : ''}`}>
               <TaskInfoPanelWrapper
                 task={task}
@@ -111,11 +110,11 @@ const TimelineView: React.FC<TimelineViewProps> = ({ tasks, members, onEdit, onD
               <DayColumnHeaders days={days} today={today} containerRef={containerRef} holidays={holidays} />
             </div>
 
-            {tasks.length === 0 ? (
+            {filteredTasks.length === 0 ? (
               <div className="p-12 text-center text-muted-foreground text-sm">
                 Nenhuma demanda. Clique em "Nova Demanda" para comecar.
               </div>
-            ) : tasks.map((task, i) => (
+            ) : filteredTasks.map((task, i) => (
               <TaskCalendarRows
                 key={task.id}
                 task={task}
diff --git a/src/views/timeline/components/PhaseBar.tsx b/src/views/timeline/components/PhaseBar.tsx
index b8ef6ad..1e9f4d4 100644
--- a/src/views/timeline/components/PhaseBar.tsx
+++ b/src/views/timeline/components/PhaseBar.tsx
@@ -2,24 +2,24 @@ import React from 'react';
 import { AlertTriangle, CheckCircle2 } from 'lucide-react';
 import {
   DAY_COL_W, toLocalDate, normaliseTask, isStepBlocked, formatDateDisplay,
-  STEP_META, type DragPreview, type DragState, type Task, type Step, type StepType,
+  STEP_META, type DragPreview, type DragState, type Task, type Subtask,
 } from '@/utils/dashboardUtils';
 
 interface PhaseBarProps {
-  step: Step;
+  subtask: Subtask;
   task: Task;
   days: Date[];
   dragPreview: DragPreview | null;
   didDragRef: React.MutableRefObject<boolean>;
-  startDrag: (e: React.MouseEvent, taskId: string, stepType: StepType, type: DragState['type'], step: Step, colWidth: number) => void;
+  startDrag: (e: React.MouseEvent, taskId: string, subtaskId: string, type: DragState['type'], subtask: Subtask, colWidth: number) => void;
   onEdit: (t: Task) => void;
 }
 
-const PhaseBar: React.FC<PhaseBarProps> = React.memo(({ step, task, days, dragPreview, didDragRef, startDrag, onEdit }) => {
-  if (!step?.start || !step?.end) return null;
+const PhaseBar: React.FC<PhaseBarProps> = React.memo(({ subtask, task, days, dragPreview, didDragRef, startDrag, onEdit }) => {
+  if (!subtask?.start || !subtask?.end) return null;
 
-  const pStart = toLocalDate(step.start);
-  const pEnd = toLocalDate(step.end);
+  const pStart = toLocalDate(subtask.start);
+  const pEnd = toLocalDate(subtask.end);
   const tStart = days[0];
   const tEnd = days[days.length - 1];
   if (pEnd < tStart || pStart > tEnd) return null;
@@ -28,7 +28,7 @@ const PhaseBar: React.FC<PhaseBarProps> = React.memo(({ step, task, days, dragPr
   let e = Math.round((pEnd.getTime() - tStart.getTime()) / 86400000);
 
   const dp = dragPreview;
-  if (dp && dp.taskId === task.id && dp.stepType === step.type) {
+  if (dp && dp.taskId === task.id && dp.subtaskId === subtask.id) {
     if (dp.type === 'move') { s += dp.deltaDays; e += dp.deltaDays; }
     else if (dp.type === 'resize-start') { s = Math.min(s + dp.deltaDays, e); }
     else { e = Math.max(e + dp.deltaDays, s); }
@@ -40,17 +40,17 @@ const PhaseBar: React.FC<PhaseBarProps> = React.memo(({ step, task, days, dragPr
 
   const left = (sC / days.length) * 100;
   const width = ((eC - sC + 1) / days.length) * 100;
-  const meta = STEP_META[step.type];
+  const meta = STEP_META[subtask.status];
   const norm = normaliseTask(task);
-  const blocked = isStepBlocked(norm, step.start);
-  const isDragging = dp?.taskId === task.id && dp?.stepType === step.type;
+  const blocked = isStepBlocked(norm, subtask.start);
+  const isDragging = dp?.taskId === task.id && dp?.subtaskId === subtask.id;
   const startsHere = s >= 0;
   const endsHere = e < days.length;
   const isConcluded = !!task.concludedAt;
-  const barCls = isConcluded 
-    ? 'bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-300 border border-gray-400 dark:border-gray-500' 
-    : blocked 
-      ? meta.barBlocked 
+  const barCls = isConcluded
+    ? 'bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-300 border border-gray-400 dark:border-gray-500'
+    : blocked
+      ? meta.barBlocked
       : meta.bar;
 
   return (
@@ -62,37 +62,39 @@ const PhaseBar: React.FC<PhaseBarProps> = React.memo(({ step, task, days, dragPr
         cursor: isDragging ? 'grabbing' : 'grab',
         transition: isDragging ? 'none' : 'filter 0.1s',
       }}
-      title={`${meta.label}: ${formatDateDisplay(pStart)} → ${formatDateDisplay(pEnd)}`}
-      onMouseDown={e => startDrag(e, task.id, step.type, 'move', step, DAY_COL_W)}
+      title={`${subtask.title || meta.label}: ${formatDateDisplay(pStart)} → ${formatDateDisplay(pEnd)}`}
+      onMouseDown={e => startDrag(e, task.id, subtask.id, 'move', subtask, DAY_COL_W)}
       onClick={() => { if (!didDragRef.current) onEdit(task); }}
     >
       {startsHere && (
         <div
           className={`absolute left-0 top-0 bottom-0 w-2 ${isConcluded ? 'bg-gray-400 dark:bg-gray-500' : meta.handle} cursor-ew-resize z-20`}
           style={{ borderRadius: '5px 0 0 5px' }}
-          onMouseDown={e => { e.stopPropagation(); startDrag(e, task.id, step.type, 'resize-start', step, DAY_COL_W); }}
+          onMouseDown={e => { e.stopPropagation(); startDrag(e, task.id, subtask.id, 'resize-start', subtask, DAY_COL_W); }}
         />
       )}
       {startsHere && (
         <span className="truncate px-2 pointer-events-none flex items-center gap-1">
           {isConcluded && <CheckCircle2 className="w-3 h-3 shrink-0" />}
           {blocked && !isConcluded && <AlertTriangle className="w-3 h-3 shrink-0" />}
-          {meta.label}
+          {subtask.title || meta.label}
         </span>
       )}
       {endsHere && (
         <div
           className={`absolute right-0 top-0 bottom-0 w-2 ${isConcluded ? 'bg-gray-400 dark:bg-gray-500' : meta.handle} cursor-ew-resize z-20`}
           style={{ borderRadius: '0 5px 5px 0' }}
-          onMouseDown={e => { e.stopPropagation(); startDrag(e, task.id, step.type, 'resize-end', step, DAY_COL_W); }}
+          onMouseDown={e => { e.stopPropagation(); startDrag(e, task.id, subtask.id, 'resize-end', subtask, DAY_COL_W); }}
         />
       )}
     </div>
   );
 }, (prev, next) =>
-  prev.step.type === next.step.type &&
-  prev.step.start === next.step.start &&
-  prev.step.end === next.step.end &&
+  prev.subtask.id === next.subtask.id &&
+  prev.subtask.status === next.subtask.status &&
+  prev.subtask.start === next.subtask.start &&
+  prev.subtask.end === next.subtask.end &&
+  prev.subtask.title === next.subtask.title &&
   prev.task.id === next.task.id &&
   prev.task.concludedAt === next.task.concludedAt &&
   prev.task.status?.blocked === next.task.status?.blocked &&
diff --git a/src/views/timeline/components/StepRow.tsx b/src/views/timeline/components/StepRow.tsx
index ecc764f..5e50979 100644
--- a/src/views/timeline/components/StepRow.tsx
+++ b/src/views/timeline/components/StepRow.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DAY_COL_W, type DragPreview, type DragState, type Task, type Step, type StepType } from '@/utils/dashboardUtils';
+import { DAY_COL_W, type DragPreview, type DragState, type Task, type Subtask } from '@/utils/dashboardUtils';
 import type { Holiday } from '@/utils/holidayUtils';
 import { getHolidayName } from '@/utils/holidayUtils';
 import PhaseBar from './PhaseBar';
@@ -9,19 +9,19 @@ const PHASE_ROW_H = 28;
 const toDateStr = (d: Date) => d.toISOString().slice(0, 10);
 
 interface StepRowProps {
-  step: Step | null;
+  subtask: Subtask | null;
   days: Date[];
   daysRange: number;
   task: Task;
   dragPreview: DragPreview | null;
   didDragRef: React.MutableRefObject<boolean>;
-  startDrag: (e: React.MouseEvent, taskId: string, stepType: StepType, type: DragState['type'], step: Step, colWidth: number) => void;
+  startDrag: (e: React.MouseEvent, taskId: string, subtaskId: string, type: DragState['type'], subtask: Subtask, colWidth: number) => void;
   onEdit: (t: Task) => void;
   holidays?: Holiday[];
   flex1?: boolean;
 }
 
-const StepRow: React.FC<StepRowProps> = React.memo(({ step, days, daysRange, task, dragPreview, didDragRef, startDrag, onEdit, holidays = [], flex1 = false }) => (
+const StepRow: React.FC<StepRowProps> = React.memo(({ subtask, days, daysRange, task, dragPreview, didDragRef, startDrag, onEdit, holidays = [], flex1 = false }) => (
   <div className={`relative overflow-hidden${flex1 ? ' flex-1' : ''}`} style={{ minHeight: PHASE_ROW_H, width: daysRange * DAY_COL_W }}>
     <div className="absolute inset-0 flex pointer-events-none">
       {days.map((d, i) => {
@@ -31,9 +31,9 @@ const StepRow: React.FC<StepRowProps> = React.memo(({ step, days, daysRange, tas
         return <div key={i} className={`shrink-0 border-r border-border/50 ${bgClass}`} style={{ width: DAY_COL_W }} />;
       })}
     </div>
-    {step && (
+    {subtask && (
       <PhaseBar
-        step={step}
+        subtask={subtask}
         task={task}
         days={days}
         dragPreview={dragPreview}
@@ -47,9 +47,11 @@ const StepRow: React.FC<StepRowProps> = React.memo(({ step, days, daysRange, tas
   prev.task.id === next.task.id &&
   prev.task.concludedAt === next.task.concludedAt &&
   prev.task.status?.blocked === next.task.status?.blocked &&
-  prev.step?.type === next.step?.type &&
-  prev.step?.start === next.step?.start &&
-  prev.step?.end === next.step?.end &&
+  prev.subtask?.id === next.subtask?.id &&
+  prev.subtask?.status === next.subtask?.status &&
+  prev.subtask?.start === next.subtask?.start &&
+  prev.subtask?.end === next.subtask?.end &&
+  prev.subtask?.title === next.subtask?.title &&
   prev.days.length === next.days.length &&
   prev.daysRange === next.daysRange &&
   prev.dragPreview === next.dragPreview &&
diff --git a/src/views/timeline/components/TaskCalendarRows.tsx b/src/views/timeline/components/TaskCalendarRows.tsx
index d85ab46..c5cf4c4 100644
--- a/src/views/timeline/components/TaskCalendarRows.tsx
+++ b/src/views/timeline/components/TaskCalendarRows.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { getVisibleSteps, type DragPreview, type DragState, type Task, type Step, type StepType } from '@/utils/dashboardUtils';
+import { getVisibleSteps, type DragPreview, type DragState, type Task, type Subtask } from '@/utils/dashboardUtils';
 import type { Member } from '@/types/member';
 import type { Holiday } from '@/utils/holidayUtils';
 import StepRow from './StepRow';
@@ -13,7 +13,7 @@ interface TaskCalendarRowsProps {
   daysRange: number;
   dragPreview: DragPreview | null;
   didDragRef: React.MutableRefObject<boolean>;
-  startDrag: (e: React.MouseEvent, taskId: string, stepType: StepType, type: DragState['type'], step: Step, colWidth: number) => void;
+  startDrag: (e: React.MouseEvent, taskId: string, subtaskId: string, type: DragState['type'], subtask: Subtask, colWidth: number) => void;
   onEdit: (t: Task) => void;
   onDelete: (id: string) => void;
   taskIndex: number;
@@ -34,7 +34,7 @@ const TaskCalendarRows: React.FC<TaskCalendarRowsProps> = ({ task, days, daysRan
     >
       {visibleSteps.length === 0 ? (
         <StepRow
-          step={null}
+          subtask={null}
           days={days}
           daysRange={daysRange}
           task={task}
@@ -45,10 +45,10 @@ const TaskCalendarRows: React.FC<TaskCalendarRowsProps> = ({ task, days, daysRan
           holidays={holidays}
           flex1
         />
-      ) : visibleSteps.map((step) => (
+      ) : visibleSteps.map((subtask) => (
         <StepRow
-          key={step.type}
-          step={step}
+          key={subtask.id}
+          subtask={subtask}
           days={days}
           daysRange={daysRange}
           task={task}
diff --git a/src/views/timeline/components/TaskInfoPanel.tsx b/src/views/timeline/components/TaskInfoPanel.tsx
index bbd90ff..3af9f18 100644
--- a/src/views/timeline/components/TaskInfoPanel.tsx
+++ b/src/views/timeline/components/TaskInfoPanel.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Edit2, Trash2, AlertTriangle, CheckCircle2 } from 'lucide-react';
-import { normaliseTask, getTaskStatusDisplay, type Task, type Step } from '@/utils/dashboardUtils';
+import { normaliseTask, getTaskStatusDisplay, type Task, type Subtask } from '@/utils/dashboardUtils';
 import type { Member } from '@/types/member';
 
 interface TaskInfoPanelProps {
   task: Task;
   members: Member[];
-  visibleSteps: Step[];
+  visibleSteps: Subtask[];
   totalH: number;
   onEdit: (t: Task) => void;
   onDelete: (id: string) => void;
diff --git a/src/views/timeline/components/TaskRow.tsx b/src/views/timeline/components/TaskRow.tsx
index 4ef7cb2..0c172f9 100644
--- a/src/views/timeline/components/TaskRow.tsx
+++ b/src/views/timeline/components/TaskRow.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { getVisibleSteps, type DragPreview, type DragState, type Task, type Step, type StepType } from '@/utils/dashboardUtils';
+import { getVisibleSteps, type DragPreview, type DragState, type Task, type Subtask } from '@/utils/dashboardUtils';
 import type { Member } from '@/types/member';
 import TaskInfoPanel from './TaskInfoPanel';
 import StepRow from './StepRow';
@@ -13,7 +13,7 @@ interface TaskRowProps {
   daysRange: number;
   dragPreview: DragPreview | null;
   didDragRef: React.MutableRefObject<boolean>;
-  startDrag: (e: React.MouseEvent, taskId: string, stepType: StepType, type: DragState['type'], step: Step, colWidth: number) => void;
+  startDrag: (e: React.MouseEvent, taskId: string, subtaskId: string, type: DragState['type'], subtask: Subtask, colWidth: number) => void;
   onEdit: (t: Task) => void;
   onDelete: (id: string) => void;
 }
@@ -35,7 +35,7 @@ const TaskRow: React.FC<TaskRowProps> = ({ task, members, days, daysRange, dragP
       <div className="flex flex-col">
         {visibleSteps.length === 0 ? (
           <StepRow
-            step={null}
+            subtask={null}
             days={days}
             daysRange={daysRange}
             task={task}
@@ -46,8 +46,8 @@ const TaskRow: React.FC<TaskRowProps> = ({ task, members, days, daysRange, dragP
           />
         ) : visibleSteps.map(step => (
           <StepRow
-            key={step.type}
-            step={step}
+            key={step.id}
+            subtask={step}
             days={days}
             daysRange={daysRange}
             task={task}
diff --git a/supabase/migrations/20260512000000_steps_to_subtasks.sql b/supabase/migrations/20260512000000_steps_to_subtasks.sql
new file mode 100644
index 0000000..6405929
--- /dev/null
+++ b/supabase/migrations/20260512000000_steps_to_subtasks.sql
@@ -0,0 +1,78 @@
+-- ============================================================
+-- Migration: Steps → Subtasks
+-- Cria task_subtasks e subtask_assignees como substitutas de
+-- task_steps e step_assignees. Dados existentes são migrados.
+-- As tabelas antigas são mantidas para rollback seguro.
+-- ============================================================
+
+-- ── Criar task_subtasks ──────────────────────────────────────
+CREATE TABLE task_subtasks (
+  id             uuid        PRIMARY KEY DEFAULT gen_random_uuid(),
+  task_id        uuid        NOT NULL REFERENCES tasks(id) ON DELETE CASCADE,
+  title          text        NOT NULL DEFAULT '',
+  status         text        NOT NULL,
+  subtask_order  integer     NOT NULL DEFAULT 0,
+  active         boolean     NOT NULL DEFAULT false,
+  start_date     date,
+  end_date       date,
+  created_at     timestamptz NOT NULL DEFAULT now()
+);
+
+-- ── Criar subtask_assignees ──────────────────────────────────
+CREATE TABLE subtask_assignees (
+  subtask_id  uuid NOT NULL REFERENCES task_subtasks(id) ON DELETE CASCADE,
+  member_id   uuid NOT NULL REFERENCES members(id) ON DELETE CASCADE,
+  PRIMARY KEY (subtask_id, member_id)
+);
+
+-- ── Migrar dados de task_steps ───────────────────────────────
+-- O campo "type" (ex: "design") vira tanto title quanto status.
+-- O usuário poderá renomear o title livremente depois.
+INSERT INTO task_subtasks (id, task_id, title, status, subtask_order, active, start_date, end_date)
+SELECT id, task_id, type, type, step_order, active, start_date, end_date
+FROM task_steps;
+
+-- ── Migrar assignees ─────────────────────────────────────────
+INSERT INTO subtask_assignees (subtask_id, member_id)
+SELECT step_id, member_id
+FROM step_assignees;
+
+-- ── RLS ──────────────────────────────────────────────────────
+ALTER TABLE task_subtasks    ENABLE ROW LEVEL SECURITY;
+ALTER TABLE subtask_assignees ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Authenticated users can read task_subtasks"
+  ON task_subtasks FOR SELECT
+  TO authenticated
+  USING (true);
+
+CREATE POLICY "Authenticated users can insert task_subtasks"
+  ON task_subtasks FOR INSERT
+  TO authenticated
+  WITH CHECK (true);
+
+CREATE POLICY "Authenticated users can update task_subtasks"
+  ON task_subtasks FOR UPDATE
+  TO authenticated
+  USING (true)
+  WITH CHECK (true);
+
+CREATE POLICY "Authenticated users can delete task_subtasks"
+  ON task_subtasks FOR DELETE
+  TO authenticated
+  USING (true);
+
+CREATE POLICY "Authenticated users can read subtask_assignees"
+  ON subtask_assignees FOR SELECT
+  TO authenticated
+  USING (true);
+
+CREATE POLICY "Authenticated users can insert subtask_assignees"
+  ON subtask_assignees FOR INSERT
+  TO authenticated
+  WITH CHECK (true);
+
+CREATE POLICY "Authenticated users can delete subtask_assignees"
+  ON subtask_assignees FOR DELETE
+  TO authenticated
+  USING (true);
diff --git a/supabase/migrations/20260512000001_task_priority_order.sql b/supabase/migrations/20260512000001_task_priority_order.sql
new file mode 100644
index 0000000..d93c74e
--- /dev/null
+++ b/supabase/migrations/20260512000001_task_priority_order.sql
@@ -0,0 +1,22 @@
+-- Manual priority order for parent demands.
+-- Lower numbers appear first within the demand list.
+
+ALTER TABLE tasks
+  ADD COLUMN IF NOT EXISTS priority_order integer NOT NULL DEFAULT 0;
+
+WITH ranked AS (
+  SELECT
+    id,
+    row_number() OVER (
+      PARTITION BY client_id
+      ORDER BY created_at DESC, id ASC
+    ) - 1 AS next_priority_order
+  FROM tasks
+)
+UPDATE tasks
+SET priority_order = ranked.next_priority_order
+FROM ranked
+WHERE tasks.id = ranked.id;
+
+CREATE INDEX IF NOT EXISTS idx_tasks_client_priority_order
+  ON tasks (client_id, priority_order);
diff --git a/supabase/migrations/20260512000002_subtask_progress_status.sql b/supabase/migrations/20260512000002_subtask_progress_status.sql
new file mode 100644
index 0000000..979cd88
--- /dev/null
+++ b/supabase/migrations/20260512000002_subtask_progress_status.sql
@@ -0,0 +1,27 @@
+-- ============================================================
+-- Migration: Subtask progress status
+-- Adds an execution status separate from the subtask phase/type.
+-- ============================================================
+
+ALTER TABLE task_subtasks
+  ADD COLUMN IF NOT EXISTS progress_status text NOT NULL DEFAULT 'todo';
+
+ALTER TABLE task_subtasks
+  DROP CONSTRAINT IF EXISTS task_subtasks_progress_status_check;
+
+ALTER TABLE task_subtasks
+  ADD CONSTRAINT task_subtasks_progress_status_check
+  CHECK (
+    progress_status IN (
+      'todo',
+      'ready',
+      'in-progress',
+      'in-review',
+      'waiting',
+      'blocked',
+      'needs-changes',
+      'paused',
+      'done',
+      'canceled'
+    )
+  );
diff --git a/vite.config.ts b/vite.config.ts
index 94f29ff..c8c325b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
   server: {
     headers: {
       'Content-Security-Policy':
-        "default-src 'self'; connect-src 'self' https://*.supabase.co wss://*.supabase.co; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:;",
+        "default-src 'self'; connect-src 'self' https://*.supabase.co wss://*.supabase.co https://brasilapi.com.br; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:;",
     },
   },
   resolve: {