gabrielb
3fb5cdb6a8
All checks were successful
Dev Build & Deploy Portal / build-deploy (push) Successful in 2m29s
196 lines
9.6 KiB
Vue
196 lines
9.6 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { portalService } from '@/services/portalService'
|
|
|
|
definePageMeta({
|
|
layout: 'portal',
|
|
middleware: 'auth',
|
|
})
|
|
|
|
// ─── MOCKS APRESENTAÇÃO — remover antes do deploy ─────────────────────────
|
|
const MOCK_ATIVO = true
|
|
const ALVARAS_MOCK = [
|
|
{
|
|
id: 1,
|
|
tipo: 'Alvará de Funcionamento',
|
|
numero: 'ALV-2024/0051',
|
|
status: 'EM_ANALISE',
|
|
etapas: [
|
|
{ nome: 'Protocolo', concluida: true, atual: false },
|
|
{ nome: 'Pagamento', concluida: true, atual: false },
|
|
{ nome: 'Análise', concluida: false, atual: true },
|
|
{ nome: 'Emissão', concluida: false, atual: false },
|
|
],
|
|
},
|
|
{
|
|
id: 2,
|
|
tipo: 'Licença Sanitária',
|
|
numero: 'ALV-2023/0198',
|
|
status: 'DEFERIDO',
|
|
etapas: [
|
|
{ nome: 'Protocolo', concluida: true, atual: false },
|
|
{ nome: 'Pagamento', concluida: true, atual: false },
|
|
{ nome: 'Análise', concluida: true, atual: false },
|
|
{ nome: 'Emissão', concluida: true, atual: false },
|
|
],
|
|
},
|
|
]
|
|
// ──────────────────────────────────────────────────────────────────────────
|
|
|
|
const alvaras = ref([])
|
|
const carregando = ref(true)
|
|
const mensagemErro = ref('')
|
|
const filtroStatus = ref(null)
|
|
|
|
const situacaoMap = {
|
|
EM_ANALISE: 0,
|
|
AGUARDANDO_DOCUMENTOS: 1,
|
|
DEFERIDO: 2,
|
|
INDEFERIDO: 3,
|
|
CANCELADO: 4,
|
|
}
|
|
|
|
const statusOptions = [
|
|
{ value: 'EM_ANALISE', label: 'Em análise' },
|
|
{ value: 'AGUARDANDO_DOCUMENTOS', label: 'Aguardando documentos' },
|
|
{ value: 'DEFERIDO', label: 'Deferido' },
|
|
{ value: 'INDEFERIDO', label: 'Indeferido' },
|
|
{ value: 'CANCELADO', label: 'Cancelado' },
|
|
]
|
|
|
|
const statusMap = {
|
|
EM_ANALISE: { label: 'Em análise', classe: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400', icone: 'pi-clock' },
|
|
AGUARDANDO_DOCUMENTOS: { label: 'Aguard. docs', classe: 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400', icone: 'pi-file-edit' },
|
|
DEFERIDO: { label: 'Deferido', classe: 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400', icone: 'pi-check-circle' },
|
|
INDEFERIDO: { label: 'Indeferido', classe: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400', icone: 'pi-times-circle' },
|
|
CANCELADO: { label: 'Cancelado', classe: 'bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400', icone: 'pi-ban' },
|
|
}
|
|
|
|
onMounted(() => carregar())
|
|
|
|
async function carregar() {
|
|
carregando.value = true
|
|
mensagemErro.value = ''
|
|
try {
|
|
const params = filtroStatus.value
|
|
? { situacao: situacaoMap[filtroStatus.value] }
|
|
: {}
|
|
const res = await portalService.getAlvaras(params)
|
|
alvaras.value = res.data ?? []
|
|
if (MOCK_ATIVO && alvaras.value.length === 0) {
|
|
const mockFiltrado = filtroStatus.value
|
|
? ALVARAS_MOCK.filter(a => a.status === filtroStatus.value)
|
|
: ALVARAS_MOCK
|
|
alvaras.value = mockFiltrado
|
|
}
|
|
} catch (e) {
|
|
mensagemErro.value = e?.data?.description ?? 'Não foi possível carregar os alvarás.'
|
|
if (MOCK_ATIVO) {
|
|
const mockFiltrado = filtroStatus.value
|
|
? ALVARAS_MOCK.filter(a => a.status === filtroStatus.value)
|
|
: ALVARAS_MOCK
|
|
alvaras.value = mockFiltrado
|
|
mensagemErro.value = ''
|
|
}
|
|
} finally {
|
|
carregando.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Alvarás</h1>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Acompanhe o andamento dos seus processos de alvará.</p>
|
|
</div>
|
|
|
|
<div class="flex gap-3 flex-wrap">
|
|
<button
|
|
:class="['px-4 py-2 rounded-lg text-sm font-semibold border transition-colors', filtroStatus === null ? 'bg-primary text-white border-primary' : 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-slate-300']"
|
|
@click="filtroStatus = null; carregar()"
|
|
>
|
|
Todos
|
|
</button>
|
|
<button
|
|
v-for="opt in statusOptions"
|
|
:key="opt.value"
|
|
:class="['px-4 py-2 rounded-lg text-sm font-semibold border transition-colors', filtroStatus === opt.value ? 'bg-primary text-white border-primary' : 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-slate-300']"
|
|
@click="filtroStatus = opt.value; carregar()"
|
|
>
|
|
{{ opt.label }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
|
|
|
|
<div v-if="carregando" class="divide-y divide-slate-100 dark:divide-slate-700">
|
|
<div v-for="i in 3" :key="i" class="p-5 space-y-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse w-1/3" />
|
|
<div class="h-6 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse w-24 ml-auto" />
|
|
</div>
|
|
<div class="h-3 bg-slate-200 dark:bg-slate-700 rounded animate-pulse w-2/3" />
|
|
<div class="h-2.5 bg-slate-200 dark:bg-slate-700 rounded animate-pulse w-1/4" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="mensagemErro" class="p-8 text-center">
|
|
<p class="text-sm text-slate-600 dark:text-slate-300">{{ mensagemErro }}</p>
|
|
<Button label="Tentar novamente" severity="secondary" size="small" class="mt-4" @click="carregar" />
|
|
</div>
|
|
|
|
<div v-else-if="alvaras.length === 0" class="p-12 text-center">
|
|
<i class="pi pi-briefcase text-slate-300 dark:text-slate-600 text-4xl mb-3 block" aria-hidden="true" />
|
|
<p class="font-semibold text-slate-700 dark:text-slate-200">Nenhum alvará encontrado</p>
|
|
<p class="text-sm text-slate-400 dark:text-slate-500 mt-1">Solicitações de alvará aparecem aqui após o protocolo.</p>
|
|
</div>
|
|
|
|
<div v-else class="divide-y divide-slate-100 dark:divide-slate-700">
|
|
<div
|
|
v-for="alv in alvaras"
|
|
:key="alv.id"
|
|
class="p-5 hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors"
|
|
>
|
|
<div class="flex items-start justify-between gap-4 mb-2">
|
|
<div>
|
|
<p class="font-semibold text-slate-800 dark:text-slate-100 text-sm">{{ alv.tipo }}</p>
|
|
<p class="text-xs text-slate-400 dark:text-slate-500 mt-0.5">Processo nº {{ alv.numero }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
<i :class="['pi', statusMap[alv.status]?.icone ?? 'pi-circle', 'text-xs', statusMap[alv.status]?.classe?.split(' ').find(c => c.startsWith('text'))]" aria-hidden="true" />
|
|
<span :class="['text-xs font-semibold px-2 py-1 rounded-full whitespace-nowrap', statusMap[alv.status]?.classe ?? 'bg-slate-100 text-slate-500']">
|
|
{{ statusMap[alv.status]?.label ?? alv.status }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="alv.etapas?.length" class="mt-4 flex items-center gap-1 overflow-x-auto pb-1">
|
|
<template v-for="(etapa, idx) in alv.etapas" :key="idx">
|
|
<div class="flex flex-col items-center gap-1 min-w-[72px]">
|
|
<div
|
|
class="w-6 h-6 rounded-full flex items-center justify-center text-xs"
|
|
:class="etapa.concluida
|
|
? 'bg-primary text-white'
|
|
: etapa.atual
|
|
? 'bg-primary/20 dark:bg-primary/30 text-primary border-2 border-primary'
|
|
: 'bg-slate-100 dark:bg-slate-700 text-slate-400'"
|
|
>
|
|
<i v-if="etapa.concluida" class="pi pi-check text-xs" aria-hidden="true" />
|
|
<span v-else class="text-xs font-bold">{{ idx + 1 }}</span>
|
|
</div>
|
|
<span class="text-xs text-slate-500 dark:text-slate-400 text-center leading-tight w-16">{{ etapa.nome }}</span>
|
|
</div>
|
|
<div
|
|
v-if="idx < alv.etapas.length - 1"
|
|
class="flex-1 h-px min-w-[12px]"
|
|
:class="alv.etapas[idx + 1].concluida || alv.etapas[idx + 1].atual ? 'bg-primary/40' : 'bg-slate-200 dark:bg-slate-700'"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|