mirror of
https://github.com/koloideal/Casha.git
synced 2026-06-10 10:25:28 +03:00
597 lines
20 KiB
Dart
597 lines
20 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:intl/intl.dart';
|
|
import '../../core/constants.dart';
|
|
import '../../shared/models/transaction.dart';
|
|
import '../settings/provider.dart';
|
|
import 'provider.dart';
|
|
|
|
class DashboardScreen extends ConsumerStatefulWidget {
|
|
const DashboardScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<DashboardScreen> createState() => _DashboardScreenState();
|
|
}
|
|
|
|
class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
|
final _searchController = TextEditingController();
|
|
|
|
@override
|
|
void dispose() {
|
|
_searchController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final balance = ref.watch(totalBalanceProvider);
|
|
final income = ref.watch(totalIncomeProvider);
|
|
final expense = ref.watch(totalExpenseProvider);
|
|
final monthExpense = ref.watch(currentMonthExpenseProvider);
|
|
final budget = ref.watch(budgetProvider);
|
|
final recent = ref.watch(recentTransactionsProvider);
|
|
final filter = ref.watch(transactionFilterProvider);
|
|
final currencyInfo = ref.watch(currencyProvider);
|
|
|
|
final budgetExceeded = budget != null && monthExpense > budget;
|
|
|
|
return Scaffold(
|
|
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
|
appBar: AppBar(
|
|
title: Row(
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'My Finances',
|
|
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
),
|
|
),
|
|
Text(
|
|
DateFormat('MMMM yyyy').format(DateTime.now()),
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
actions: [
|
|
IconButton(
|
|
icon: const Icon(Icons.add_circle_rounded),
|
|
iconSize: 32,
|
|
color: AppColors.accent,
|
|
onPressed: () => context.push('/add'),
|
|
tooltip: 'Add Transaction',
|
|
),
|
|
],
|
|
),
|
|
body: SafeArea(
|
|
child: CustomScrollView(
|
|
cacheExtent: 300,
|
|
slivers: [
|
|
SliverToBoxAdapter(
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(20, 16, 20, 0),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_BalanceCard(balance: balance, currencyInfo: currencyInfo),
|
|
const SizedBox(height: 16),
|
|
_SummaryRow(income: income, expense: expense, currencyInfo: currencyInfo),
|
|
if (budget != null) ...[
|
|
const SizedBox(height: 16),
|
|
_BudgetProgress(spent: monthExpense, budget: budget, currencyInfo: currencyInfo),
|
|
],
|
|
if (budgetExceeded) ...[
|
|
const SizedBox(height: 12),
|
|
_BudgetWarning(spent: monthExpense, budget: budget, currencyInfo: currencyInfo),
|
|
],
|
|
const SizedBox(height: 24),
|
|
_SearchBar(controller: _searchController, ref: ref),
|
|
const SizedBox(height: 12),
|
|
_FilterChips(selected: filter, ref: ref),
|
|
const SizedBox(height: 20),
|
|
Text(
|
|
'Transactions',
|
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
if (recent.isEmpty)
|
|
const SliverFillRemaining(
|
|
hasScrollBody: false,
|
|
child: _EmptyState(),
|
|
)
|
|
else
|
|
SliverPadding(
|
|
padding: const EdgeInsets.fromLTRB(20, 0, 20, 100),
|
|
sliver: SliverList.builder(
|
|
itemCount: recent.length,
|
|
itemBuilder: (context, i) => Padding(
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
child: RepaintBoundary(
|
|
child: _TransactionTile(transaction: recent[i]),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SearchBar extends StatelessWidget {
|
|
final TextEditingController controller;
|
|
final WidgetRef ref;
|
|
const _SearchBar({required this.controller, required this.ref});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return TextField(
|
|
controller: controller,
|
|
decoration: InputDecoration(
|
|
hintText: 'Search transactions...',
|
|
prefixIcon: Icon(Icons.search_rounded, color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6)),
|
|
suffixIcon: controller.text.isNotEmpty
|
|
? IconButton(
|
|
icon: const Icon(Icons.clear_rounded, size: 20),
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
onPressed: () {
|
|
controller.clear();
|
|
ref.read(searchQueryProvider.notifier).state = '';
|
|
},
|
|
)
|
|
: null,
|
|
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
),
|
|
onChanged: (v) => ref.read(searchQueryProvider.notifier).state = v,
|
|
);
|
|
}
|
|
}
|
|
|
|
class _FilterChips extends StatelessWidget {
|
|
final TransactionFilter selected;
|
|
final WidgetRef ref;
|
|
const _FilterChips({required this.selected, required this.ref});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Row(
|
|
children: [
|
|
_FilterChip(
|
|
label: 'All',
|
|
isSelected: selected == TransactionFilter.all,
|
|
onTap: () => ref.read(transactionFilterProvider.notifier).state = TransactionFilter.all,
|
|
),
|
|
const SizedBox(width: 8),
|
|
_FilterChip(
|
|
label: 'Income',
|
|
isSelected: selected == TransactionFilter.income,
|
|
color: AppColors.income,
|
|
onTap: () => ref.read(transactionFilterProvider.notifier).state = TransactionFilter.income,
|
|
),
|
|
const SizedBox(width: 8),
|
|
_FilterChip(
|
|
label: 'Expense',
|
|
isSelected: selected == TransactionFilter.expense,
|
|
color: AppColors.expense,
|
|
onTap: () => ref.read(transactionFilterProvider.notifier).state = TransactionFilter.expense,
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _FilterChip extends StatelessWidget {
|
|
final String label;
|
|
final bool isSelected;
|
|
final Color? color;
|
|
final VoidCallback onTap;
|
|
const _FilterChip({
|
|
required this.label,
|
|
required this.isSelected,
|
|
this.color,
|
|
required this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final chipColor = color ?? AppColors.accent;
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: isSelected ? chipColor.withOpacity(0.2) : Theme.of(context).colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: isSelected ? chipColor : Theme.of(context).dividerColor,
|
|
width: isSelected ? 1.5 : 1,
|
|
),
|
|
),
|
|
child: Text(
|
|
label,
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: isSelected ? chipColor : Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _BudgetProgress extends StatelessWidget {
|
|
final double spent;
|
|
final double budget;
|
|
final CurrencyInfo currencyInfo;
|
|
const _BudgetProgress({required this.spent, required this.budget, required this.currencyInfo});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final ratio = spent / budget;
|
|
final color = ratio >= 1.0
|
|
? AppColors.expense
|
|
: ratio >= 0.8
|
|
? AppColors.warning
|
|
: AppColors.income;
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(color: Theme.of(context).dividerColor),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'Monthly Budget',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
Text(
|
|
'${(ratio * 100).toStringAsFixed(0)}%',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: color,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: LinearProgressIndicator(
|
|
value: ratio.clamp(0.0, 1.0),
|
|
backgroundColor: Theme.of(context).dividerColor,
|
|
valueColor: AlwaysStoppedAnimation<Color>(color),
|
|
minHeight: 8,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'Spent: ${currencyInfo.symbol}${spent.toStringAsFixed(2)}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
Text(
|
|
'Limit: ${currencyInfo.symbol}${budget.toStringAsFixed(2)}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _BudgetWarning extends StatelessWidget {
|
|
final double spent;
|
|
final double budget;
|
|
final CurrencyInfo currencyInfo;
|
|
const _BudgetWarning({required this.spent, required this.budget, required this.currencyInfo});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final over = spent - budget;
|
|
return Container(
|
|
padding: const EdgeInsets.all(14),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.expense.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: AppColors.expense.withOpacity(0.3)),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
const Icon(Icons.warning_rounded, color: AppColors.expense, size: 20),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Text(
|
|
'Budget exceeded by ${currencyInfo.symbol}${over.toStringAsFixed(2)}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: AppColors.expense,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _BalanceCard extends StatelessWidget {
|
|
final double balance;
|
|
final CurrencyInfo currencyInfo;
|
|
const _BalanceCard({required this.balance, required this.currencyInfo});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
Theme.of(context).colorScheme.primary,
|
|
Theme.of(context).colorScheme.primary.withOpacity(0.7),
|
|
],
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
),
|
|
borderRadius: BorderRadius.circular(20),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.accent.withOpacity(0.3),
|
|
blurRadius: 20,
|
|
offset: const Offset(0, 8),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Total Balance',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: Theme.of(context).colorScheme.onPrimary.withOpacity(0.7),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'${currencyInfo.symbol}${balance.toStringAsFixed(2)}',
|
|
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
|
color: Theme.of(context).colorScheme.onPrimary,
|
|
fontWeight: FontWeight.w700,
|
|
letterSpacing: -0.5,
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
'Converted to ${currencyInfo.symbol}${currencyInfo.code}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onPrimary.withOpacity(0.6),
|
|
fontSize: 11,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SummaryRow extends StatelessWidget {
|
|
final double income;
|
|
final double expense;
|
|
final CurrencyInfo currencyInfo;
|
|
const _SummaryRow({required this.income, required this.expense, required this.currencyInfo});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Row(
|
|
children: [
|
|
Expanded(child: _SummaryCard(label: 'Income', amount: income, color: AppColors.income, icon: Icons.arrow_downward_rounded, currencyInfo: currencyInfo)),
|
|
const SizedBox(width: 12),
|
|
Expanded(child: _SummaryCard(label: 'Expenses', amount: expense, color: AppColors.expense, icon: Icons.arrow_upward_rounded, currencyInfo: currencyInfo)),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SummaryCard extends StatelessWidget {
|
|
final String label;
|
|
final double amount;
|
|
final Color color;
|
|
final IconData icon;
|
|
final CurrencyInfo currencyInfo;
|
|
const _SummaryCard({required this.label, required this.amount, required this.color, required this.icon, required this.currencyInfo});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(color: Theme.of(context).dividerColor),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Icon(icon, color: color, size: 18),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(label, style: Theme.of(context).textTheme.bodySmall?.copyWith(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6))),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
'${currencyInfo.symbol}${amount.toStringAsFixed(2)}',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: color,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TransactionTile extends StatelessWidget {
|
|
final Transaction transaction;
|
|
const _TransactionTile({required this.transaction});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isIncome = transaction.type == TransactionType.income;
|
|
final color = isIncome ? AppColors.income : AppColors.expense;
|
|
final catColor = AppCategories.colors[transaction.category] ?? AppColors.accent;
|
|
final catIcon = AppCategories.icons[transaction.category] ?? Icons.category_rounded;
|
|
|
|
return GestureDetector(
|
|
onTap: () => context.push('/add', extra: transaction),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(14),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(color: Theme.of(context).dividerColor),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: catColor.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Icon(catIcon, color: catColor, size: 20),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
transaction.category,
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
),
|
|
),
|
|
if (transaction.note != null && transaction.note!.isNotEmpty)
|
|
Text(
|
|
transaction.note!,
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
)
|
|
else
|
|
Text(
|
|
DateFormat('MMM d, yyyy').format(transaction.date),
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Text(
|
|
'${isIncome ? '+' : '-'}${transaction.currency}${transaction.amount.toStringAsFixed(2)}',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: color,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _EmptyState extends StatelessWidget {
|
|
const _EmptyState();
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
Icons.receipt_long_rounded,
|
|
size: 48,
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Text(
|
|
'No transactions found',
|
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 6),
|
|
Text(
|
|
'Tap + to add your first transaction',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|