Mlcavalho1andClaude Sonnet 4.6
79f4a62a1b
- Migration 009: coluna `type` em recurring_expenses + tabela recurring_late - API Go: tipo income/expense em CRUD; endpoints POST /confirm e /late - Dashboard: campo pending_income_recurrings na resposta - Frontend: RecurringView com seções RECEITAS e DESPESAS separadas - HomeView: widget de confirmação (dia 1-5) e badge SALÁRIO PENDENTE (pós dia 5) - Testes unitários: 4 novos casos (income covered, late, confirm, reject expense) Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
118 lines
3.5 KiB
Vue
118 lines
3.5 KiB
Vue
<template>
|
|
<header class="fc-hud">
|
|
<div class="fc-hud__logo">
|
|
<span class="fc-hud__logo-mark" />
|
|
<div>
|
|
<div class="fc-pixel" style="font-size:10px;color:var(--fc-accent-2)">CARVALHO</div>
|
|
<div class="fc-pixel" style="font-size:7px;color:var(--fc-text-dim)">FIN.SYS v2.0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fc-hud__sep" />
|
|
|
|
<div class="fc-hud__stats">
|
|
<HUDStat label="LV" :value="profile?.level ?? 1" color="var(--fc-gold)" />
|
|
<HUDStat label="XP" :value="profile?.xp ?? 0" :sub="`/${profile?.xp_to_next ?? 100}`" color="var(--fc-accent-2)" />
|
|
<HUDStat label="META" :value="metaPct" sub="/40%" color="metaColor" />
|
|
</div>
|
|
|
|
<nav class="fc-hud__nav">
|
|
<RouterLink
|
|
v-for="item in navItems"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="fc-hud__nav-item fc-pixel"
|
|
>{{ item.label }}</RouterLink>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useGameStore } from '@/stores/game'
|
|
import { useDashboardStore } from '@/stores/dashboard'
|
|
import HUDStat from './HUDStat.vue'
|
|
|
|
const gameStore = useGameStore()
|
|
const dashStore = useDashboardStore()
|
|
|
|
const profile = computed(() => gameStore.summary?.profile)
|
|
const metaPct = computed(() => dashStore.data ? `${dashStore.data.savings_pct.toFixed(0)}%` : '--')
|
|
const metaColor = computed(() => {
|
|
if (!dashStore.data) return 'var(--fc-text-dim)'
|
|
return dashStore.data.savings_pct >= 40 ? 'var(--fc-green)' : 'var(--fc-red)'
|
|
})
|
|
|
|
const navItems = [
|
|
{ to: '/', label: 'HOME' },
|
|
{ to: '/transacoes', label: 'TX' },
|
|
{ to: '/importar', label: 'IMPORT' },
|
|
{ to: '/contas', label: 'CONTAS' },
|
|
{ to: '/personagem', label: 'PERS.' },
|
|
{ to: '/recorrencias', label: 'REC.' },
|
|
]
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-hud {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--fc-space-4);
|
|
padding: 10px 20px;
|
|
border-bottom: 2px solid var(--fc-panel-edge);
|
|
background: linear-gradient(180deg, var(--fc-bg-panel), var(--fc-bg));
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
flex-wrap: wrap;
|
|
}
|
|
.fc-hud__logo {
|
|
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
|
|
}
|
|
.fc-hud__logo-mark {
|
|
display: inline-block; width: 26px; height: 26px;
|
|
background: var(--fc-accent);
|
|
box-shadow: 0 0 10px var(--fc-accent);
|
|
position: relative; flex-shrink: 0;
|
|
}
|
|
.fc-hud__logo-mark::before {
|
|
content: ''; position: absolute; inset: 5px; background: var(--fc-bg);
|
|
}
|
|
.fc-hud__logo-mark::after {
|
|
content: ''; position: absolute; top: 8px; left: 8px; width: 10px; height: 10px;
|
|
background: var(--fc-accent-2);
|
|
}
|
|
.fc-hud__sep {
|
|
width: 2px; height: 32px; background: var(--fc-panel-edge); flex-shrink: 0;
|
|
}
|
|
.fc-hud__stats {
|
|
display: flex; gap: var(--fc-space-4); align-items: center; flex-shrink: 0;
|
|
}
|
|
.fc-hud__nav {
|
|
display: flex; gap: var(--fc-space-2); align-items: center; flex-wrap: wrap;
|
|
margin-left: auto;
|
|
}
|
|
.fc-hud__nav-item {
|
|
font-size: 8px;
|
|
padding: 5px 8px;
|
|
border: 1px solid var(--fc-panel-edge);
|
|
border-radius: var(--fc-radius-sm);
|
|
color: var(--fc-text-dim);
|
|
text-decoration: none;
|
|
transition: all .12s;
|
|
white-space: nowrap;
|
|
}
|
|
.fc-hud__nav-item:hover,
|
|
.fc-hud__nav-item.router-link-active {
|
|
border-color: var(--fc-accent-3);
|
|
color: var(--fc-text);
|
|
background: rgba(168,85,247,.15);
|
|
box-shadow: 0 0 8px rgba(168,85,247,.3);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.fc-hud__nav { display: none; }
|
|
.fc-hud__sep { display: none; }
|
|
}
|
|
</style>
|