ajustes

front-end/app/components/EditaisTable.vue

@@ -1,41 +1,99 @@
 <!-- front-end/app/components/EditaisTable.vue -->
 <script setup lang="ts">
-import type { Edital } from '~/types'
-
-defineProps<{ editais: Edital[] }>()
-
-const modalidadeLabel: Record<string, string> = {
-  pregao_eletronico: 'Pregão Eletrônico',
-  pregao_presencial: 'Pregão Presencial',
-  concorrencia: 'Concorrência',
-  dispensa: 'Dispensa',
-  inexigibilidade: 'Inexigibilidade',
+interface ApiEdital {
+  ID: string
+  Numero: string
+  Orgao: string
+  Modalidade: string
+  Objeto: string
+  Plataforma: string
+  ValorEstimado: number
+  DataPublicacao: string
+  DataAbertura: string
+  Status: string
 }
 
-const columns = [
-  { id: 'numero', accessorKey: 'numero', header: 'Nº Edital' },
-  { id: 'objeto', accessorKey: 'objeto', header: 'Objeto' },
-  { id: 'orgao', accessorKey: 'orgao', header: 'Órgão' },
-  { id: 'modalidade', accessorKey: 'modalidade', header: 'Modalidade' },
-  { id: 'valorEstimado', accessorKey: 'valorEstimado', header: 'Valor Est.' },
-  { id: 'status', accessorKey: 'status', header: 'Status' },
-  { id: 'dataAbertura', accessorKey: 'dataAbertura', header: 'Abertura' },
-]
+defineProps<{ editais: ApiEdital[] }>()
+
+const MODALIDADE_LABEL: Record<string, string> = {
+  pregao_eletronico:  'Pregão Eletrônico',
+  pregao_presencial:  'Pregão Presencial',
+  concorrencia:       'Concorrência',
+  dispensa:           'Dispensa',
+  inexigibilidade:    'Inexigibilidade',
+}
+
+const STATUS_CFG: Record<string, { label: string; color: string; bg: string }> = {
+  em_analise:          { label: 'Mapeamento',           color: '#0284c7', bg: '#eff6ff' },
+  elaborando_proposta: { label: 'Termo de Referência',  color: '#7c3aed', bg: '#faf5ff' },
+  edital_publicado:    { label: 'Edital Publicado',     color: '#ea580c', bg: '#fff7ed' },
+  fase_lances:         { label: 'Fase de Lances',       color: '#3b82f6', bg: '#eff6ff' },
+  habilitacao:         { label: 'Habilitação',          color: '#d97706', bg: '#fef3c7' },
+  recurso:             { label: 'Recursos',             color: '#d97706', bg: '#fffbeb' },
+  adjudicado:          { label: 'Adjudicado',           color: '#059669', bg: '#ecfdf5' },
+  contrato:            { label: 'Contrato',             color: '#16a34a', bg: '#f0fdf4' },
+  vencida:             { label: 'Vencida',              color: '#16a34a', bg: '#f0fdf4' },
+  perdida:             { label: 'Perdida',              color: '#dc2626', bg: '#fef2f2' },
+  deserta:             { label: 'Deserta/Fracassada',   color: '#64748b', bg: '#f8fafc' },
+}
+
+function formatDate(iso: string): string {
+  if (!iso) return '—'
+  const [y, m, d] = iso.split('T')[0].split('-')
+  return `${d}/${m}/${y}`
+}
+
+function formatBRL(value: number): string {
+  return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL', maximumFractionDigits: 0 }).format(value)
+}
 </script>
 
 <template>
-  <UTable :data="editais" :columns="columns">
-    <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>
+  <table class="tbl">
+    <thead>
+      <tr>
+        <th>Nº Edital</th>
+        <th>Órgão</th>
+        <th>Objeto</th>
+        <th>Modalidade</th>
+        <th>Valor Est.</th>
+        <th>Abertura</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-if="!editais || editais.length === 0">
+        <td colspan="7" class="empty">Nenhum edital encontrado.</td>
+      </tr>
+      <tr v-for="e in editais" :key="e.ID">
+        <td class="numero">{{ e.Numero }}</td>
+        <td>{{ e.Orgao }}</td>
+        <td class="objeto">{{ e.Objeto }}</td>
+        <td>{{ MODALIDADE_LABEL[e.Modalidade] ?? e.Modalidade }}</td>
+        <td>{{ formatBRL(e.ValorEstimado) }}</td>
+        <td>{{ formatDate(e.DataAbertura) }}</td>
+        <td>
+          <span
+            v-if="STATUS_CFG[e.Status]"
+            class="badge"
+            :style="{ background: STATUS_CFG[e.Status].bg, color: STATUS_CFG[e.Status].color }"
+          >{{ STATUS_CFG[e.Status].label }}</span>
+          <span v-else class="badge">{{ e.Status }}</span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </template>
+
+<style scoped>
+.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
+.tbl thead tr { border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
+.tbl th { padding: 10px 14px; text-align: left; font-weight: 600; color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
+.tbl td { padding: 11px 14px; color: #1e293b; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
+.tbl tbody tr:last-child td { border-bottom: none; }
+.tbl tbody tr:hover td { background: #f8fafc; }
+.numero { font-weight: 600; white-space: nowrap; }
+.objeto { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.empty { text-align: center; color: #94a3b8; padding: 40px; }
+.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
+</style>