feat(#19): registro manual de transações e recorrências fixas
Adiciona CRUD manual de transações (income/expense) com filtro mensal, CRUD de recorrências fixas com verificação mensal de cobertura (±10% por categoria), endpoint de ignore/unignore e telas Vue para Transações e Configurações. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
This commit is contained in:
Claude Sonnet 4.6
@@ -7,7 +7,9 @@
|
||||
<nav class="app-nav">
|
||||
<RouterLink to="/">Início</RouterLink>
|
||||
<RouterLink to="/categorias">Categorias</RouterLink>
|
||||
<RouterLink to="/transacoes">Transações</RouterLink>
|
||||
<RouterLink to="/importar">Importar</RouterLink>
|
||||
<RouterLink to="/configuracoes">Configurações</RouterLink>
|
||||
</nav>
|
||||
</header>
|
||||
<RouterView />
|
||||
|
||||
@@ -19,6 +19,16 @@ const router = createRouter({
|
||||
name: 'import',
|
||||
component: () => import('../views/ImportView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/transacoes',
|
||||
name: 'transactions',
|
||||
component: () => import('../views/TransactionsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/configuracoes',
|
||||
name: 'settings',
|
||||
component: () => import('../views/SettingsView.vue'),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { api } from '@/services/api'
|
||||
import type { Category } from './categories'
|
||||
|
||||
export interface RecurringExpense {
|
||||
id: number
|
||||
name: string
|
||||
expected_amount: number
|
||||
day_of_month: number
|
||||
category_id: number | null
|
||||
active: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface RecurringStatus extends RecurringExpense {
|
||||
covered: boolean
|
||||
ignored: boolean
|
||||
reason?: string
|
||||
}
|
||||
|
||||
export const useRecurringStore = defineStore('recurring', () => {
|
||||
const items = ref<RecurringExpense[]>([])
|
||||
const monthlyStatus = ref<RecurringStatus[]>([])
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
async function fetchAll() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
items.value = await api.get<RecurringExpense[]>('/recurring')
|
||||
} catch (e: any) {
|
||||
error.value = e.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchMonthlyStatus(month: string) {
|
||||
try {
|
||||
monthlyStatus.value = await api.get<RecurringStatus[]>(`/recurring/status?month=${month}`)
|
||||
} catch {
|
||||
monthlyStatus.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function create(input: Omit<RecurringExpense, 'id' | 'active' | 'created_at' | 'updated_at'>) {
|
||||
const item = await api.post<RecurringExpense>('/recurring', input)
|
||||
items.value.push(item)
|
||||
return item
|
||||
}
|
||||
|
||||
async function update(id: number, input: Omit<RecurringExpense, 'id' | 'active' | 'created_at' | 'updated_at'>) {
|
||||
const item = await api.put<RecurringExpense>(`/recurring/${id}`, input)
|
||||
const idx = items.value.findIndex((x) => x.id === id)
|
||||
if (idx !== -1) items.value[idx] = item
|
||||
return item
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
await api.delete(`/recurring/${id}`)
|
||||
items.value = items.value.filter((x) => x.id !== id)
|
||||
}
|
||||
|
||||
async function ignore(id: number, month: string, reason: string) {
|
||||
await api.post(`/recurring/${id}/ignore`, { month, reason })
|
||||
await fetchMonthlyStatus(month)
|
||||
}
|
||||
|
||||
async function unignore(id: number, month: string) {
|
||||
await api.delete(`/recurring/${id}/ignore?month=${month}`)
|
||||
await fetchMonthlyStatus(month)
|
||||
}
|
||||
|
||||
const pendingCount = (month: string) =>
|
||||
monthlyStatus.value.filter((s) => !s.covered).length
|
||||
|
||||
return { items, monthlyStatus, loading, error, fetchAll, fetchMonthlyStatus, create, update, remove, ignore, unignore, pendingCount }
|
||||
})
|
||||
@@ -0,0 +1,62 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { api } from '@/services/api'
|
||||
|
||||
export interface Transaction {
|
||||
id: number
|
||||
date: string
|
||||
amount: number
|
||||
description: string
|
||||
type: 'income' | 'expense'
|
||||
source: 'manual' | 'import'
|
||||
category_id: number | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface TransactionInput {
|
||||
date: string
|
||||
amount: number
|
||||
description: string
|
||||
type: 'income' | 'expense'
|
||||
category_id: number | null
|
||||
}
|
||||
|
||||
export const useTransactionsStore = defineStore('transactions', () => {
|
||||
const transactions = ref<Transaction[]>([])
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
async function fetchAll(month?: string) {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const q = month ? `?month=${month}` : ''
|
||||
transactions.value = await api.get<Transaction[]>(`/transactions${q}`)
|
||||
} catch (e: any) {
|
||||
error.value = e.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function create(input: TransactionInput) {
|
||||
const t = await api.post<Transaction>('/transactions', input)
|
||||
transactions.value.unshift(t)
|
||||
return t
|
||||
}
|
||||
|
||||
async function update(id: number, input: TransactionInput) {
|
||||
const t = await api.put<Transaction>(`/transactions/${id}`, input)
|
||||
const idx = transactions.value.findIndex((x) => x.id === id)
|
||||
if (idx !== -1) transactions.value[idx] = t
|
||||
return t
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
await api.delete(`/transactions/${id}`)
|
||||
transactions.value = transactions.value.filter((x) => x.id !== id)
|
||||
}
|
||||
|
||||
return { transactions, loading, error, fetchAll, create, update, remove }
|
||||
})
|
||||
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRecurringStore } from '@/stores/recurring'
|
||||
import { useCategoriesStore } from '@/stores/categories'
|
||||
|
||||
const store = useRecurringStore()
|
||||
const catStore = useCategoriesStore()
|
||||
|
||||
onMounted(() => {
|
||||
store.fetchAll()
|
||||
catStore.fetchAll()
|
||||
})
|
||||
|
||||
const blank = () => ({ name: '', expected_amount: 0, day_of_month: 1, category_id: null as number | null })
|
||||
const form = ref(blank())
|
||||
const editId = ref<number | null>(null)
|
||||
const amountRaw = ref('')
|
||||
const formError = ref<string | null>(null)
|
||||
|
||||
function parseAmount(s: string) {
|
||||
return parseFloat(s.replace(/\./g, '').replace(',', '.')) || 0
|
||||
}
|
||||
|
||||
function startEdit(id: number) {
|
||||
const item = store.items.find((x) => x.id === id)
|
||||
if (!item) return
|
||||
editId.value = id
|
||||
form.value = { name: item.name, expected_amount: item.expected_amount, day_of_month: item.day_of_month, category_id: item.category_id }
|
||||
amountRaw.value = item.expected_amount.toLocaleString('pt-BR', { minimumFractionDigits: 2 })
|
||||
formError.value = null
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editId.value = null
|
||||
form.value = blank()
|
||||
amountRaw.value = ''
|
||||
formError.value = null
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
formError.value = null
|
||||
form.value.expected_amount = parseAmount(amountRaw.value)
|
||||
try {
|
||||
if (editId.value !== null) {
|
||||
await store.update(editId.value, form.value)
|
||||
cancelEdit()
|
||||
} else {
|
||||
await store.create(form.value)
|
||||
form.value = blank()
|
||||
amountRaw.value = ''
|
||||
}
|
||||
} catch (e: any) {
|
||||
formError.value = e.message
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(id: number, name: string) {
|
||||
if (!confirm(`Excluir recorrência "${name}"?`)) return
|
||||
await store.remove(id)
|
||||
}
|
||||
|
||||
function catName(id: number | null) {
|
||||
if (!id) return '—'
|
||||
return catStore.categories.find((c) => c.id === id)?.name ?? '—'
|
||||
}
|
||||
|
||||
function fmt(v: number) {
|
||||
return v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<h1>Configurações — Recorrências</h1>
|
||||
|
||||
<form class="form-card" @submit.prevent="submit">
|
||||
<h2>{{ editId !== null ? 'Editar recorrência' : 'Nova recorrência' }}</h2>
|
||||
<div class="form-row">
|
||||
<input v-model="form.name" placeholder="Nome (ex: Netflix)" required class="input-name" />
|
||||
<input v-model="amountRaw" placeholder="55,90" required class="input-sm input-amount" />
|
||||
<input type="number" v-model.number="form.day_of_month" min="1" max="31" class="input-sm input-day" placeholder="Dia" />
|
||||
<select v-model="form.category_id" class="input-sm">
|
||||
<option :value="null">Sem categoria</option>
|
||||
<option v-for="c in catStore.categories" :key="c.id" :value="c.id">{{ c.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<p v-if="formError" class="form-error">{{ formError }}</p>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">{{ editId !== null ? 'Salvar' : 'Adicionar' }}</button>
|
||||
<button v-if="editId !== null" type="button" class="btn btn-ghost" @click="cancelEdit">Cancelar</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p v-if="store.loading">Carregando…</p>
|
||||
|
||||
<ul v-else class="recurring-list">
|
||||
<li v-for="item in store.items" :key="item.id" class="recurring-item" :class="{ editing: editId === item.id }">
|
||||
<div class="item-info">
|
||||
<strong>{{ item.name }}</strong>
|
||||
<span class="item-meta">
|
||||
Todo dia {{ item.day_of_month }} · {{ fmt(item.expected_amount) }} · {{ catName(item.category_id) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<button class="btn btn-sm" @click="startEdit(item.id)">Editar</button>
|
||||
<button class="btn btn-sm btn-danger" @click="remove(item.id, item.name)">Excluir</button>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="store.items.length === 0" class="empty">Nenhuma recorrência cadastrada</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page { max-width: 640px; margin: 0 auto; padding: 1.5rem 1rem; font-family: sans-serif; }
|
||||
h1 { font-size: 1.5rem; margin-bottom: 1.25rem; }
|
||||
h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.75rem; }
|
||||
.form-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; }
|
||||
.form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
|
||||
.input-name { flex: 1; min-width: 150px; padding: 0.45rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; }
|
||||
.input-sm { padding: 0.45rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; }
|
||||
.input-amount { width: 90px; }
|
||||
.input-day { width: 60px; }
|
||||
.form-error { color: #dc2626; font-size: 0.875rem; margin: 0.5rem 0 0; }
|
||||
.form-actions { margin-top: 0.75rem; display: flex; gap: 0.5rem; }
|
||||
.btn { padding: 0.4rem 1rem; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font-size: 0.875rem; background: #fff; }
|
||||
.btn-primary { background: #4f46e5; color: #fff; border-color: #4f46e5; }
|
||||
.btn-ghost { background: transparent; }
|
||||
.btn-sm { padding: 0.25rem 0.6rem; }
|
||||
.btn-danger { color: #dc2626; border-color: #fca5a5; }
|
||||
.recurring-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.recurring-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; flex-wrap: wrap; gap: 0.5rem; }
|
||||
.recurring-item.editing { border-color: #4f46e5; box-shadow: 0 0 0 2px #e0e7ff; }
|
||||
.item-info { display: flex; flex-direction: column; gap: 0.2rem; }
|
||||
.item-meta { font-size: 0.8rem; color: #6b7280; }
|
||||
.item-actions { display: flex; gap: 0.4rem; }
|
||||
.empty { color: #9ca3af; text-align: center; padding: 2rem; }
|
||||
</style>
|
||||
@@ -0,0 +1,202 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useTransactionsStore, type TransactionInput } from '@/stores/transactions'
|
||||
import { useCategoriesStore } from '@/stores/categories'
|
||||
|
||||
const store = useTransactionsStore()
|
||||
const catStore = useCategoriesStore()
|
||||
|
||||
const currentMonth = ref(new Date().toISOString().slice(0, 7))
|
||||
|
||||
onMounted(() => {
|
||||
store.fetchAll(currentMonth.value)
|
||||
catStore.fetchAll()
|
||||
})
|
||||
|
||||
function changeMonth(delta: number) {
|
||||
const [y, m] = currentMonth.value.split('-').map(Number)
|
||||
const d = new Date(y, m - 1 + delta, 1)
|
||||
currentMonth.value = d.toISOString().slice(0, 7)
|
||||
store.fetchAll(currentMonth.value)
|
||||
}
|
||||
|
||||
const blank = (): TransactionInput => ({
|
||||
date: new Date().toISOString().slice(0, 10),
|
||||
amount: 0,
|
||||
description: '',
|
||||
type: 'expense',
|
||||
category_id: null,
|
||||
})
|
||||
|
||||
const form = ref(blank())
|
||||
const editId = ref<number | null>(null)
|
||||
const formError = ref<string | null>(null)
|
||||
const amountRaw = ref('')
|
||||
|
||||
function parseAmount(s: string): number {
|
||||
return parseFloat(s.replace(/\./g, '').replace(',', '.')) || 0
|
||||
}
|
||||
|
||||
function startEdit(id: number) {
|
||||
const t = store.transactions.find((x) => x.id === id)
|
||||
if (!t || t.source !== 'manual') return
|
||||
editId.value = id
|
||||
form.value = { date: t.date, amount: t.amount, description: t.description, type: t.type as any, category_id: t.category_id }
|
||||
amountRaw.value = t.amount.toLocaleString('pt-BR', { minimumFractionDigits: 2 })
|
||||
formError.value = null
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editId.value = null
|
||||
form.value = blank()
|
||||
amountRaw.value = ''
|
||||
formError.value = null
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
formError.value = null
|
||||
form.value.amount = parseAmount(amountRaw.value)
|
||||
try {
|
||||
if (editId.value !== null) {
|
||||
await store.update(editId.value, form.value)
|
||||
cancelEdit()
|
||||
} else {
|
||||
await store.create(form.value)
|
||||
form.value = blank()
|
||||
amountRaw.value = ''
|
||||
}
|
||||
} catch (e: any) {
|
||||
formError.value = e.message
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
if (!confirm('Excluir esta transação?')) return
|
||||
try {
|
||||
await store.remove(id)
|
||||
} catch (e: any) {
|
||||
alert(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
function fmt(v: number) {
|
||||
return v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
|
||||
}
|
||||
|
||||
function catName(id: number | null) {
|
||||
if (!id) return '—'
|
||||
return catStore.categories.find((c) => c.id === id)?.name ?? '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<h1>Transações</h1>
|
||||
<div class="month-nav">
|
||||
<button class="btn" @click="changeMonth(-1)">‹</button>
|
||||
<span class="month-label">{{ currentMonth }}</span>
|
||||
<button class="btn" @click="changeMonth(1)">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="form-card" @submit.prevent="submit">
|
||||
<h2>{{ editId !== null ? 'Editar transação' : 'Nova transação' }}</h2>
|
||||
<div class="form-row">
|
||||
<input type="date" v-model="form.date" required class="input-sm" />
|
||||
<select v-model="form.type" class="input-sm">
|
||||
<option value="expense">Gasto</option>
|
||||
<option value="income">Receita</option>
|
||||
</select>
|
||||
<input
|
||||
v-model="amountRaw"
|
||||
placeholder="150,90"
|
||||
required
|
||||
class="input-sm input-amount"
|
||||
/>
|
||||
<select v-model="form.category_id" class="input-sm">
|
||||
<option :value="null">Sem categoria</option>
|
||||
<option v-for="c in catStore.categories" :key="c.id" :value="c.id">{{ c.name }}</option>
|
||||
</select>
|
||||
<input v-model="form.description" placeholder="Descrição" required class="input-desc" />
|
||||
</div>
|
||||
<p v-if="formError" class="form-error">{{ formError }}</p>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">{{ editId !== null ? 'Salvar' : 'Adicionar' }}</button>
|
||||
<button v-if="editId !== null" type="button" class="btn btn-ghost" @click="cancelEdit">Cancelar</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p v-if="store.loading">Carregando…</p>
|
||||
|
||||
<div v-else class="table-wrap">
|
||||
<table class="tx-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Data</th>
|
||||
<th>Descrição</th>
|
||||
<th>Categoria</th>
|
||||
<th>Valor</th>
|
||||
<th>Origem</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="t in store.transactions" :key="t.id" :class="{ 'row-editing': editId === t.id }">
|
||||
<td>{{ t.date }}</td>
|
||||
<td>{{ t.description }}</td>
|
||||
<td>{{ catName(t.category_id) }}</td>
|
||||
<td :class="t.type === 'income' ? 'amt-income' : 'amt-expense'">{{ fmt(t.amount) }}</td>
|
||||
<td>
|
||||
<span class="badge" :class="t.source === 'manual' ? 'badge-manual' : 'badge-import'">
|
||||
{{ t.source === 'manual' ? 'manual' : 'extrato' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<button v-if="t.source === 'manual'" class="btn btn-sm" @click="startEdit(t.id)">Editar</button>
|
||||
<button v-if="t.source === 'manual'" class="btn btn-sm btn-danger" @click="remove(t.id)">Excluir</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="store.transactions.length === 0">
|
||||
<td colspan="6" style="text-align:center;color:#9ca3af;padding:2rem">Nenhuma transação</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem; font-family: sans-serif; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem; }
|
||||
h1 { font-size: 1.5rem; margin: 0; }
|
||||
h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.75rem; }
|
||||
.month-nav { display: flex; align-items: center; gap: 0.5rem; }
|
||||
.month-label { font-size: 0.9rem; font-weight: 600; min-width: 6rem; text-align: center; }
|
||||
|
||||
.form-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; }
|
||||
.form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
|
||||
.input-sm { padding: 0.45rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; }
|
||||
.input-amount { width: 100px; }
|
||||
.input-desc { flex: 1; min-width: 160px; padding: 0.45rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; }
|
||||
.form-error { color: #dc2626; font-size: 0.875rem; margin: 0.5rem 0 0; }
|
||||
.form-actions { margin-top: 0.75rem; display: flex; gap: 0.5rem; }
|
||||
|
||||
.btn { padding: 0.4rem 1rem; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font-size: 0.875rem; background: #fff; }
|
||||
.btn-primary { background: #4f46e5; color: #fff; border-color: #4f46e5; }
|
||||
.btn-ghost { background: transparent; }
|
||||
.btn-sm { padding: 0.25rem 0.6rem; }
|
||||
.btn-danger { color: #dc2626; border-color: #fca5a5; }
|
||||
|
||||
.table-wrap { overflow-x: auto; }
|
||||
.tx-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
|
||||
.tx-table th { text-align: left; padding: 0.5rem 0.75rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
|
||||
.tx-table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid #f3f4f6; }
|
||||
.row-editing { background: #eef2ff; }
|
||||
.amt-income { color: #059669; font-weight: 500; }
|
||||
.amt-expense { color: #dc2626; font-weight: 500; }
|
||||
.badge { font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: 4px; }
|
||||
.badge-manual { background: #ede9fe; color: #5b21b6; }
|
||||
.badge-import { background: #dbeafe; color: #1e40af; }
|
||||
.actions { display: flex; gap: 0.4rem; white-space: nowrap; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user