diff --git a/src/modules/expenses/views/TransactionsPage.vue b/src/modules/expenses/views/TransactionsPage.vue index 62cac0c..ae0618d 100644 --- a/src/modules/expenses/views/TransactionsPage.vue +++ b/src/modules/expenses/views/TransactionsPage.vue @@ -17,7 +17,8 @@ import { Flag, XCircle, RefreshCw, - Calendar + Calendar, + Filter } from 'lucide-vue-next' const { user } = useAuth() @@ -29,6 +30,13 @@ const isLoading = ref(false) const dateRangeType = ref(15) // 15, 30, 60, or 'custom' const customStartDate = ref('') const customEndDate = ref('') +const typeFilter = ref<'all' | 'income' | 'expense'>('all') + +const typeFilterOptions = [ + { label: 'All', value: 'all' as const }, + { label: 'Income', value: 'income' as const }, + { label: 'Expenses', value: 'expense' as const } +] function isIncome(t: Transaction): boolean { return t.tags?.includes('income-entry') ?? false @@ -63,9 +71,12 @@ const searchOptions: FuzzySearchOptions = { matchAllWhenSearchEmpty: true } -// Transactions to display (search results or all transactions) +// Transactions to display (search results or all transactions), filtered by type const transactionsToDisplay = computed(() => { - return searchResults.value.length > 0 ? searchResults.value : transactions.value + const base = searchResults.value.length > 0 ? searchResults.value : transactions.value + if (typeFilter.value === 'income') return base.filter(isIncome) + if (typeFilter.value === 'expense') return base.filter(isExpense) + return base }) // Handle search results @@ -213,6 +224,22 @@ onMounted(() => { + +
+ + +
+