feat: componentes reutilizáveis StatusChip, StatCard, PipelineBar

front-end/app/components/PipelineBar.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { PIPELINE_ETAPAS } from '~/types'
+
+defineProps<{
+  contagemPorEtapa: Record<number, number>
+  etapaAtual?: number
+}>()
+</script>
+
+<template>
+  <div class="pipeline">
+    <div
+      v-for="(etapa, idx) in PIPELINE_ETAPAS"
+      :key="idx"
+      class="pipe-step"
+      :class="{
+        done: etapaAtual !== undefined && idx + 1 < etapaAtual,
+        active: etapaAtual === idx + 1,
+      }"
+    >
+      <div class="pipe-circle">
+        <UIcon v-if="etapaAtual !== undefined && idx + 1 < etapaAtual" name="i-heroicons-check" class="w-3 h-3" />
+        <span v-else>{{ idx + 1 }}</span>
+      </div>
+      <p class="pipe-label">{{ etapa }}</p>
+      <p class="pipe-count">{{ contagemPorEtapa[idx + 1] ?? 0 }} editais</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pipeline { display: flex; gap: 0; overflow-x: auto; padding: 14px 0; }
+.pipe-step {
+  flex: 1; min-width: 80px; text-align: center;
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  position: relative;
+}
+.pipe-step:not(:last-child)::after {
+  content: ''; position: absolute; top: 13px; left: 60%; right: -40%;
+  height: 2px; background: #e2e8f0; z-index: 0;
+}
+.pipe-step.done:not(:last-child)::after { background: #667eea; }
+.pipe-circle {
+  width: 28px; height: 28px; border-radius: 50%;
+  background: #f1f5f9; border: 2px solid #e2e8f0;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 10px; font-weight: 700; color: #94a3b8; position: relative; z-index: 1;
+}
+.pipe-step.done .pipe-circle { background: #667eea; border-color: #667eea; color: white; }
+.pipe-step.active .pipe-circle { background: white; border-color: #667eea; color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
+.pipe-label { font-size: 9.5px; color: #94a3b8; line-height: 1.2; }
+.pipe-step.done .pipe-label, .pipe-step.active .pipe-label { color: #667eea; font-weight: 600; }
+.pipe-count { font-size: 9px; color: #94a3b8; font-weight: 600; }
+</style>