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

- 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

apps/web/src/stores/categories.ts

@@ -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) {
+  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 })
+    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) {
+  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 })
+    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

@@ -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)
+      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 }
+      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>