100 lines
3.9 KiB
Vue
100 lines
3.9 KiB
Vue
<!-- front-end/app/components/EditaisTable.vue -->
|
|
<script setup lang="ts">
|
|
interface ApiEdital {
|
|
ID: string
|
|
Numero: string
|
|
Orgao: string
|
|
Modalidade: string
|
|
Objeto: string
|
|
Plataforma: string
|
|
ValorEstimado: number
|
|
DataPublicacao: string
|
|
DataAbertura: string
|
|
Status: string
|
|
}
|
|
|
|
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>
|
|
<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>
|