Adiciona GET /api/dashboard?month=YYYY-MM com resumo mensal (% poupado, gastos por categoria, evolução 6 meses, últimas 10 transações, recorrências pendentes). HomeView.vue reescrita com 4 widgets e gráficos CSS nativos. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { ref } from 'vue'
|
|
import { api } from '@/services/api'
|
|
|
|
export interface CategoryTotal {
|
|
category_id: number | null
|
|
category_name: string
|
|
color: string
|
|
total: number
|
|
}
|
|
|
|
export interface MonthEvolution {
|
|
month: string
|
|
income: number
|
|
expenses: number
|
|
saved: number
|
|
}
|
|
|
|
export interface RecentTransaction {
|
|
id: number
|
|
date: string
|
|
description: string
|
|
category_name: string
|
|
amount: number
|
|
type: 'income' | 'expense'
|
|
}
|
|
|
|
export interface DashboardData {
|
|
month: string
|
|
total_income: number
|
|
total_expenses: number
|
|
savings_pct: number
|
|
by_category: CategoryTotal[]
|
|
monthly_evolution: MonthEvolution[]
|
|
recent_transactions: RecentTransaction[]
|
|
pending_recurring: number
|
|
}
|
|
|
|
export const useDashboardStore = defineStore('dashboard', () => {
|
|
const data = ref<DashboardData | null>(null)
|
|
const loading = ref(false)
|
|
const error = ref<string | null>(null)
|
|
|
|
async function fetch(month: string) {
|
|
loading.value = true
|
|
error.value = null
|
|
try {
|
|
data.value = await api.get<DashboardData>(`/dashboard?month=${month}`)
|
|
} catch (e: any) {
|
|
error.value = e.message
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
return { data, loading, error, fetch }
|
|
})
|