From bc51b147ae4bff1f65a492864477c6ccc1d4f93d Mon Sep 17 00:00:00 2001
From: Junior <josegouveiajunior@gmail.com>
Date: Sat, 14 Mar 2026 10:41:26 -0300
Subject: [PATCH] feat: dashboard completo com stats, pipeline, alertas e
 tabela

---
 front-end/app/pages/index.vue | 239 ++++++++++++++++++++++++----------
 1 file changed, 168 insertions(+), 71 deletions(-)

diff --git a/front-end/app/pages/index.vue b/front-end/app/pages/index.vue
index 6a408d8..913a96c 100644
--- a/front-end/app/pages/index.vue
+++ b/front-end/app/pages/index.vue
@@ -1,76 +1,173 @@
+<!-- front-end/app/pages/index.vue -->
+<script setup lang="ts">
+import { editais } from '~/data/mock/editais'
+import { prazos } from '~/data/mock/prazos'
+import { documentos } from '~/data/mock/documentos'
+import { dashboardStats } from '~/data/mock/stats'
+
+const hoje = new Date()
+const dataFormatada = hoje.toLocaleDateString('pt-BR', { day: 'numeric', month: 'long', year: 'numeric' })
+
+const valorFormatado = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL', maximumFractionDigits: 0 }).format(dashboardStats.valorGanho)
+
+const editaisRecentes = computed(() => [...editais].sort((a, b) => b.dataAbertura.getTime() - a.dataAbertura.getTime()).slice(0, 5))
+
+const prazosUrgentes = computed(() => prazos.filter(p => p.urgencia === 'critico' || p.urgencia === 'urgente'))
+
+const docsAlerta = computed(() => documentos.filter(d => d.status === 'vencendo' || d.status === 'vencida'))
+
+function urgenciaCor(urgencia: string) {
+  if (urgencia === 'critico') return '#ef4444'
+  if (urgencia === 'urgente') return '#f59e0b'
+  return '#667eea'
+}
+
+function urgenciaLabel(p: typeof prazos[0]) {
+  const diff = Math.ceil((p.dataLimite.getTime() - hoje.getTime()) / (1000 * 60 * 60 * 24))
+  if (diff <= 0) return 'Hoje'
+  if (diff === 1) return 'Amanhã'
+  return p.dataLimite.toLocaleDateString('pt-BR')
+}
+
+function docStatusCor(status: string) {
+  if (status === 'vencida') return '#dc2626'
+  if (status === 'vencendo') return '#d97706'
+  return '#16a34a'
+}
+
+const modalidadeLabel: Record<string, string> = {
+  pregao_eletronico: 'Pregão Eletrônico',
+  pregao_presencial: 'Pregão Presencial',
+  concorrencia: 'Concorrência',
+  dispensa: 'Dispensa',
+  inexigibilidade: 'Inexigibilidade',
+}
+</script>
+
 <template>
-  <div>
-    <UPageHero
-      title="Nuxt Starter Template"
-      description="A production-ready starter template powered by Nuxt UI. Build beautiful, accessible, and performant applications in minutes, not hours."
-      :links="[{
-        label: 'Get started',
-        to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
-        target: '_blank',
-        trailingIcon: 'i-lucide-arrow-right',
-        size: 'xl'
-      }, {
-        label: 'Use this template',
-        to: 'https://github.com/nuxt-ui-templates/starter',
-        target: '_blank',
-        icon: 'i-simple-icons-github',
-        size: 'xl',
-        color: 'neutral',
-        variant: 'subtle'
-      }]"
-    />
+  <div class="page">
+    <AppTopbar title="Dashboard" :breadcrumb="`Visão geral · ${dataFormatada}`">
+      <template #actions>
+        <UButton variant="outline" color="neutral" size="sm">Importar Edital</UButton>
+        <UButton size="sm" class="btn-primary">+ Nova Oportunidade</UButton>
+      </template>
+    </AppTopbar>
 
-    <UPageSection
-      id="features"
-      title="Everything you need to build modern Nuxt apps"
-      description="Start with a solid foundation. This template includes all the essentials for building production-ready applications with Nuxt UI's powerful component system."
-      :features="[{
-        icon: 'i-lucide-rocket',
-        title: 'Production-ready from day one',
-        description: 'Pre-configured with TypeScript, ESLint, Tailwind CSS, and all the best practices. Focus on building features, not setting up tooling.'
-      }, {
-        icon: 'i-lucide-palette',
-        title: 'Beautiful by default',
-        description: 'Leveraging Nuxt UI\'s design system with automatic dark mode, consistent spacing, and polished components that look great out of the box.'
-      }, {
-        icon: 'i-lucide-zap',
-        title: 'Lightning fast',
-        description: 'Optimized for performance with SSR/SSG support, automatic code splitting, and edge-ready deployment. Your users will love the speed.'
-      }, {
-        icon: 'i-lucide-blocks',
-        title: '100+ components included',
-        description: 'Access Nuxt UI\'s comprehensive component library. From forms to navigation, everything is accessible, responsive, and customizable.'
-      }, {
-        icon: 'i-lucide-code-2',
-        title: 'Developer experience first',
-        description: 'Auto-imports, hot module replacement, and TypeScript support. Write less boilerplate and ship more features.'
-      }, {
-        icon: 'i-lucide-shield-check',
-        title: 'Built for scale',
-        description: 'Enterprise-ready architecture with proper error handling, SEO optimization, and security best practices built-in.'
-      }]"
-    />
+    <div class="content">
+      <!-- Stats -->
+      <div class="stats-grid">
+        <StatCard label="Total de Editais" :value="dashboardStats.totalEditais" sub="Este ano" />
+        <StatCard label="Taxa de Vitória" :value="`${dashboardStats.taxaVitoria}%`" sub="Processos ganhos" color="#10b981" />
+        <StatCard label="Valor Ganho" :value="valorFormatado" sub="Em contratos ativos" color="#667eea" />
+        <StatCard label="Alertas Ativos" :value="dashboardStats.alertasAtivos" sub="Requerem atenção" color="#f59e0b" />
+      </div>
 
-    <UPageSection>
-      <UPageCTA
-        title="Ready to build your next Nuxt app?"
-        description="Join thousands of developers building with Nuxt and Nuxt UI. Get this template and start shipping today."
-        variant="subtle"
-        :links="[{
-          label: 'Start building',
-          to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
-          target: '_blank',
-          trailingIcon: 'i-lucide-arrow-right',
-          color: 'neutral'
-        }, {
-          label: 'View on GitHub',
-          to: 'https://github.com/nuxt-ui-templates/starter',
-          target: '_blank',
-          icon: 'i-simple-icons-github',
-          color: 'neutral',
-          variant: 'outline'
-        }]"
-      />
-    </UPageSection>
+      <!-- Pipeline -->
+      <div class="card mb-4">
+        <div class="card-header">
+          <h3>Pipeline de Oportunidades</h3>
+          <NuxtLink to="/pipeline" class="card-link">Ver kanban →</NuxtLink>
+        </div>
+        <div class="px-4">
+          <PipelineBar :contagem-por-etapa="dashboardStats.editalsPorEtapaPipeline" />
+        </div>
+      </div>
+
+      <!-- Grid 2 colunas -->
+      <div class="grid-2 mb-4">
+        <!-- Alertas de Prazo -->
+        <div class="card">
+          <div class="card-header">
+            <h3>Alertas de Prazo</h3>
+            <NuxtLink to="/gestao/prazos" class="card-link">Ver todos →</NuxtLink>
+          </div>
+          <div v-for="p in prazosUrgentes" :key="p.id" class="alert-item">
+            <div class="alert-dot" :style="{ background: urgenciaCor(p.urgencia) }" />
+            <div class="alert-text">
+              <p class="at">{{ p.titulo }}</p>
+              <p class="as">{{ p.descricao }}</p>
+            </div>
+            <span class="alert-date" :style="{ color: urgenciaCor(p.urgencia) }">{{ urgenciaLabel(p) }}</span>
+          </div>
+        </div>
+
+        <!-- Documentos -->
+        <div class="card">
+          <div class="card-header">
+            <h3>Documentos da Empresa</h3>
+            <NuxtLink to="/gestao/documentos" class="card-link">Gerenciar →</NuxtLink>
+          </div>
+          <div v-for="d in docsAlerta" :key="d.id" class="doc-item">
+            <div>
+              <p class="doc-nome">{{ d.nome }}</p>
+              <p class="doc-sub">
+                {{ d.status === 'vencida' ? 'Vencida' : 'Vencendo em breve' }}
+              </p>
+            </div>
+            <span class="doc-badge" :style="{ color: docStatusCor(d.status), background: docStatusCor(d.status) + '18' }">
+              {{ d.status === 'vencida' ? 'Vencida' : 'Vencendo' }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tabela Editais Recentes -->
+      <div class="card">
+        <div class="card-header">
+          <h3>Editais Recentes</h3>
+          <NuxtLink to="/oportunidades" class="card-link">Ver todos →</NuxtLink>
+        </div>
+        <UTable
+          :data="editaisRecentes"
+          :columns="[
+            { key: 'numero', label: 'Nº Edital' },
+            { key: 'objeto', label: 'Objeto' },
+            { key: 'orgao', label: 'Órgão' },
+            { key: 'modalidade', label: 'Modalidade' },
+            { key: 'valorEstimado', label: 'Valor Est.' },
+            { key: 'status', label: 'Status' },
+            { key: 'dataAbertura', label: 'Abertura' },
+          ]"
+        >
+          <template #modalidade-cell="{ row }">
+            {{ modalidadeLabel[row.original.modalidade] }}
+          </template>
+          <template #valorEstimado-cell="{ row }">
+            {{ new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL', maximumFractionDigits: 0 }).format(row.original.valorEstimado) }}
+          </template>
+          <template #status-cell="{ row }">
+            <StatusChip :status="row.original.status" />
+          </template>
+          <template #dataAbertura-cell="{ row }">
+            {{ row.original.dataAbertura.toLocaleDateString('pt-BR') }}
+          </template>
+        </UTable>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.page { display: flex; flex-direction: column; height: 100vh; }
+.content { padding: 20px 22px; flex: 1; overflow-y: auto; }
+.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
+.card { background: white; border-radius: 11px; border: 1px solid #e2e8f0; overflow: hidden; }
+.mb-4 { margin-bottom: 14px; }
+.card-header { padding: 14px 18px 10px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
+.card-header h3 { font-size: 13px; font-weight: 700; color: #0f172a; }
+.card-link { font-size: 11px; color: #667eea; text-decoration: none; font-weight: 500; }
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.alert-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #f8fafc; }
+.alert-item:last-child { border-bottom: none; }
+.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.at { font-size: 12px; font-weight: 600; color: #0f172a; }
+.as { font-size: 11px; color: #94a3b8; }
+.alert-date { font-size: 11px; font-weight: 600; flex-shrink: 0; }
+.doc-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid #f8fafc; }
+.doc-item:last-child { border-bottom: none; }
+.doc-nome { font-size: 12px; font-weight: 500; color: #0f172a; }
+.doc-sub { font-size: 10.5px; color: #94a3b8; }
+.doc-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
+.btn-primary { background: linear-gradient(135deg, #667eea, #764ba2) !important; }
+.px-4 { padding: 0 18px; }
+</style>