Mlcavalho1/carvalho-finances
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): #50 meta mensal em Categorias + conquistas dinâmicas em /personagem

Browse Source 
- CategoriesView: campo META MENSAL (R$) no formulário de criação/edição
- CategoriesView: badge verde com valor da meta na listagem
- categories store: monthly_budget nos tipos e chamadas de API
- CharacterView: sem alteração — conquistas dinâmicas já renderizam via title/icon/earned existentes
This commit is contained in:
Mlcavalho1
2026-05-28 23:26:51 -03:00
parent 8632251f8a
commit e1f5eb2281
2 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/stores/categories.ts
+5 -4
View File
@@ -8,6 +8,7 @@ export interface Category {
color: string
is_default: boolean
is_tax: boolean
monthly_budget: number | null
created_at: string
updated_at: string
}
@@ -29,14 +30,14 @@ export const useCategoriesStore = defineStore('categories', () => {
}
}
async function create(name: string, color: string, isTax = false) {
const cat = await api.post<Category>('/categories', { name, color, is_tax: isTax })
async function create(name: string, color: string, isTax = false, monthlyBudget: number | null = null) {
const cat = await api.post<Category>('/categories', { name, color, is_tax: isTax, monthly_budget: monthlyBudget })
categories.value.push(cat)
return cat
}
async function update(id: number, name: string, color: string, isTax = false) {
const cat = await api.put<Category>(`/categories/${id}`, { name, color, is_tax: isTax })
async function update(id: number, name: string, color: string, isTax = false, monthlyBudget: number | null = null) {
const cat = await api.put<Category>(`/categories/${id}`, { name, color, is_tax: isTax, monthly_budget: monthlyBudget })
const idx = categories.value.findIndex((c) => c.id === id)
if (idx !== -1) categories.value[idx] = cat
return cat
apps/web/src/views/CategoriesView.vue
+49 -8
View File
@@ -6,19 +6,19 @@ import NeonPanel from '@/components/NeonPanel.vue'
const store = useCategoriesStore()
onMounted(() => store.fetchAll())
const form = ref({ name: '', color: '#a855f7', is_tax: false })
const form = ref({ name: '', color: '#a855f7', is_tax: false, monthly_budget: null as number | null })
const editId = ref<number | null>(null)
const formError = ref<string | null>(null)
function startEdit(id: number, name: string, color: string, isTax: boolean) {
function startEdit(id: number, name: string, color: string, isTax: boolean, budget: number | null) {
editId.value = id
form.value = { name, color, is_tax: isTax }
form.value = { name, color, is_tax: isTax, monthly_budget: budget }
formError.value = null
}
function cancelEdit() {
editId.value = null
form.value = { name: '', color: '#a855f7', is_tax: false }
form.value = { name: '', color: '#a855f7', is_tax: false, monthly_budget: null }
formError.value = null
}
@@ -26,11 +26,11 @@ async function submit() {
formError.value = null
try {
if (editId.value !== null) {
await store.update(editId.value, form.value.name, form.value.color, form.value.is_tax)
await store.update(editId.value, form.value.name, form.value.color, form.value.is_tax, form.value.monthly_budget)
cancelEdit()
} else {
await store.create(form.value.name, form.value.color, form.value.is_tax)
form.value = { name: '', color: '#a855f7', is_tax: false }
await store.create(form.value.name, form.value.color, form.value.is_tax, form.value.monthly_budget)
form.value = { name: '', color: '#a855f7', is_tax: false, monthly_budget: null }
}
} catch (e: any) {
formError.value = e.message
@@ -66,6 +66,17 @@ async function remove(id: number, name: string) {
IMPOSTO
</label>
</div>
<div class="fc-cat-form__budget-row">
<label class="fc-mono fc-cat-form__budget-label">META MENSAL (R$)</label>
<input
v-model.number="form.monthly_budget"
type="number"
min="0"
step="0.01"
placeholder="opcional"
class="fc-input fc-cat-form__budget"
/>
</div>
<p v-if="formError" class="fc-cat-form__error fc-mono">{{ formError }}</p>
<div class="fc-cat-form__actions">
<button type="submit" class="fc-btn fc-btn--primary">{{ editId !== null ? 'SALVAR' : 'CRIAR' }}</button>
@@ -89,8 +100,11 @@ async function remove(id: number, name: string) {
<span class="fc-body fc-cat-item__name">{{ cat.name }}</span>
<span v-if="cat.is_default" class="fc-pixel fc-cat-item__default">PADRÃO</span>
<span v-if="cat.is_tax" class="fc-pixel fc-cat-item__tax">IMPOSTO</span>
<span v-if="cat.monthly_budget != null" class="fc-pixel fc-cat-item__budget">
R$ {{ cat.monthly_budget.toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) }}
</span>
<div class="fc-cat-item__actions">
<button class="fc-btn fc-btn--sm fc-btn--ghost" @click="startEdit(cat.id, cat.name, cat.color, cat.is_tax)">EDITAR</button>
<button class="fc-btn fc-btn--sm fc-btn--ghost" @click="startEdit(cat.id, cat.name, cat.color, cat.is_tax, cat.monthly_budget)">EDITAR</button>
<button
v-if="!cat.is_default"
class="fc-btn fc-btn--sm fc-btn--danger"
@@ -235,5 +249,32 @@ async function remove(id: number, name: string) {
flex-shrink: 0;
}
.fc-cat-form__budget-row {
display: flex;
align-items: center;
gap: var(--fc-space-2);
margin-top: var(--fc-space-2);
}
.fc-cat-form__budget-label {
font-size: 9px;
color: var(--fc-text-dim);
white-space: nowrap;
flex-shrink: 0;
}
.fc-cat-form__budget {
width: 120px;
}
.fc-cat-item__budget {
font-size: 6px;
color: var(--fc-green);
background: rgba(57, 255, 122, .1);
border: 1px solid rgba(57, 255, 122, .3);
padding: 3px 6px;
border-radius: 2px;
}
.fc-cat-item__actions { display: flex; gap: var(--fc-space-1); }
</style>