gabrielb
5a7f4ba07a
- Vue 3.5 + Vite 8 + PrimeVue 4 (Aura) + TailwindCSS 4 + DM Sans - Sistema de tenant multi-prefeitura: bootstrap, prefeituraStore, getTenant - Tema dinâmico por município via applyTemplate (9 paletas) - Logo e foto de fundo resolvidos a partir do VITE_API_URL + path relativo - HomeView: hero split com foto/gradiente, carousel de avisos, cards de serviços - LoginView: fluxo 2 etapas (documento na home → senha em /login) - Roteamento completo: público (/), serviços (/servicos/*), portal autenticado (/portal/*) - authStore + authService estruturados para Keycloak PKCE (integração pendente) - Placeholders para todas as telas da área logada Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
56 lines
2.0 KiB
Vue
56 lines
2.0 KiB
Vue
<script setup>
|
|
import { useAuthStore } from '@/stores/authStore'
|
|
|
|
const auth = useAuthStore()
|
|
|
|
const cards = [
|
|
{ icon: 'pi-receipt', label: 'Débitos em Aberto', valor: '—', cor: 'red' },
|
|
{ icon: 'pi-file-check', label: 'Certidões Ativas', valor: '—', cor: 'green' },
|
|
{ icon: 'pi-briefcase', label: 'Alvarás em Andamento', valor: '—', cor: 'orange' },
|
|
{ icon: 'pi-credit-card', label: 'Último Pagamento', valor: '—', cor: 'blue' },
|
|
]
|
|
|
|
const corMap = {
|
|
red: 'bg-red-50 text-red-700',
|
|
green: 'bg-green-50 text-green-700',
|
|
orange: 'bg-orange-50 text-orange-700',
|
|
blue: 'bg-blue-50 text-blue-700',
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-8">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-slate-800">
|
|
Olá, {{ auth.nomeUsuario || 'Contribuinte' }}
|
|
</h1>
|
|
<p class="text-slate-500 mt-1">Bem-vindo ao seu painel de gestão fiscal.</p>
|
|
</div>
|
|
|
|
<!-- Cards resumo -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div
|
|
v-for="card in cards"
|
|
:key="card.label"
|
|
class="bg-white rounded-xl border border-slate-200 p-5 space-y-3"
|
|
>
|
|
<div :class="['w-10 h-10 rounded-lg flex items-center justify-center', corMap[card.cor]]">
|
|
<i :class="['pi', card.icon]" />
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-bold text-slate-800">{{ card.valor }}</p>
|
|
<p class="text-xs text-slate-500 mt-0.5">{{ card.label }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Placeholder conteúdo -->
|
|
<div class="bg-blue-50 border border-blue-100 rounded-xl p-6 text-center">
|
|
<i class="pi pi-info-circle text-blue-500 text-2xl mb-3 block" />
|
|
<p class="text-sm text-slate-600">
|
|
Os dados do painel serão carregados quando a integração com a API estiver configurada.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|