58 lines
2.4 KiB
Vue
58 lines
2.4 KiB
Vue
<!-- front-end/app/pages/gestao/prazos.vue -->
|
|
<script setup lang="ts">
|
|
import { prazos } from '~/data/mock/prazos'
|
|
|
|
const hoje = new Date()
|
|
|
|
const urgenciaConfig = {
|
|
critico: { label: 'Crítico — Hoje', color: '#dc2626', bg: '#fef2f2' },
|
|
urgente: { label: 'Urgente', color: '#d97706', bg: '#fffbeb' },
|
|
normal: { label: 'Normal', color: '#667eea', bg: '#eff6ff' },
|
|
}
|
|
|
|
function diasRestantes(data: Date) {
|
|
const diff = Math.ceil((data.getTime() - hoje.getTime()) / (1000 * 60 * 60 * 24))
|
|
if (diff <= 0) return 'Hoje'
|
|
if (diff === 1) return 'Amanhã'
|
|
return `${diff} dias`
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<AppTopbar title="Prazos" breadcrumb="Gestão · Prazos" />
|
|
<div class="content">
|
|
<div class="card">
|
|
<div v-for="prazo in prazos" :key="prazo.id" class="prazo-row">
|
|
<div class="prazo-dot" :style="{ background: urgenciaConfig[prazo.urgencia].color }" />
|
|
<div class="prazo-info">
|
|
<p class="prazo-titulo">{{ prazo.titulo }}</p>
|
|
<p class="prazo-desc">{{ prazo.descricao }}</p>
|
|
</div>
|
|
<div class="prazo-right">
|
|
<span class="prazo-badge" :style="{ color: urgenciaConfig[prazo.urgencia].color, background: urgenciaConfig[prazo.urgencia].bg }">
|
|
{{ urgenciaConfig[prazo.urgencia].label }}
|
|
</span>
|
|
<p class="prazo-data">{{ prazo.dataLimite.toLocaleDateString('pt-BR') }} · {{ diasRestantes(prazo.dataLimite) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page { display: flex; flex-direction: column; height: 100vh; }
|
|
.content { padding: 20px 22px; flex: 1; overflow-y: auto; }
|
|
.card { background: white; border-radius: 11px; border: 1px solid #e2e8f0; overflow: hidden; }
|
|
.prazo-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f8fafc; }
|
|
.prazo-row:last-child { border-bottom: none; }
|
|
.prazo-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
|
.prazo-info { flex: 1; }
|
|
.prazo-titulo { font-size: 13px; font-weight: 600; color: #0f172a; }
|
|
.prazo-desc { font-size: 11px; color: #94a3b8; margin-top: 2px; }
|
|
.prazo-right { text-align: right; flex-shrink: 0; }
|
|
.prazo-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 4px; }
|
|
.prazo-data { font-size: 11px; color: #64748b; }
|
|
</style>
|