feat: kanban de processos por etapa do ciclo licitatório

front-end/app/pages/pipeline/index.vue

@@ -0,0 +1,86 @@
+<!-- front-end/app/pages/pipeline/index.vue -->
+<script setup lang="ts">
+import { editais } from '~/data/mock/editais'
+import { PIPELINE_ETAPAS } from '~/types'
+
+const statusParaEtapa: Record<string, number> = {
+  em_analise: 1,
+  elaborando_proposta: 3,
+  impugnacao: 2,
+  participando: 4,
+  recurso: 6,
+  vencida: 8,
+  perdida: 8,
+  deserta: 8,
+}
+
+const colunas = computed(() =>
+  PIPELINE_ETAPAS.map((etapa, idx) => ({
+    etapa,
+    numero: idx + 1,
+    cards: editais.filter(e => statusParaEtapa[e.status] === idx + 1),
+  }))
+)
+
+const modalidadeAbrev: Record<string, string> = {
+  pregao_eletronico: 'PE',
+  pregao_presencial: 'PP',
+  concorrencia: 'CC',
+  dispensa: 'DI',
+  inexigibilidade: 'IN',
+}
+</script>
+
+<template>
+  <div class="page">
+    <AppTopbar title="Kanban de Processos" breadcrumb="Pipeline" />
+    <div class="kanban-scroll">
+      <div class="kanban-board">
+        <div v-for="col in colunas" :key="col.numero" class="kanban-col">
+          <div class="col-header">
+            <span class="col-num">{{ col.numero }}</span>
+            <span class="col-title">{{ col.etapa }}</span>
+            <UBadge :label="String(col.cards.length)" variant="soft" color="neutral" size="xs" />
+          </div>
+          <div class="col-cards">
+            <div v-for="card in col.cards" :key="card.id" class="kanban-card">
+              <div class="card-top">
+                <span class="card-num">{{ card.numero }}</span>
+                <StatusChip :status="card.status" />
+              </div>
+              <p class="card-objeto">{{ card.objeto }}</p>
+              <p class="card-orgao">{{ card.orgao }}</p>
+              <div class="card-bottom">
+                <span class="card-modal">{{ modalidadeAbrev[card.modalidade] }}</span>
+                <span class="card-valor">
+                  {{ new Intl.NumberFormat('pt-BR', { notation: 'compact', currency: 'BRL', style: 'currency' }).format(card.valorEstimado) }}
+                </span>
+              </div>
+            </div>
+            <p v-if="!col.cards.length" class="col-empty">Sem editais</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page { display: flex; flex-direction: column; height: 100vh; }
+.kanban-scroll { flex: 1; overflow-x: auto; padding: 20px 22px; }
+.kanban-board { display: flex; gap: 12px; min-width: max-content; align-items: flex-start; }
+.kanban-col { width: 220px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; flex-shrink: 0; }
+.col-header { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
+.col-num { width: 20px; height: 20px; background: #667eea; color: white; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.col-title { font-size: 11.5px; font-weight: 600; color: #374151; flex: 1; }
+.col-cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
+.kanban-card { background: white; border-radius: 8px; padding: 10px 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
+.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.card-num { font-size: 11px; font-weight: 700; color: #0f172a; }
+.card-objeto { font-size: 12px; color: #374151; font-weight: 500; margin-bottom: 3px; line-height: 1.3; }
+.card-orgao { font-size: 10.5px; color: #94a3b8; margin-bottom: 8px; }
+.card-bottom { display: flex; justify-content: space-between; align-items: center; }
+.card-modal { font-size: 10px; font-weight: 600; background: #f1f5f9; color: #64748b; padding: 2px 6px; border-radius: 4px; }
+.card-valor { font-size: 11px; font-weight: 700; color: #667eea; }
+.col-empty { font-size: 11px; color: #94a3b8; text-align: center; padding: 16px 0; }
+</style>