rluv_client/lib/features/budget/screens/budget_overview.dart

321 lines
15 KiB
Dart
Raw Normal View History

2023-07-19 02:16:13 -06:00
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:helpers/helpers.dart';
2023-07-22 21:29:32 -06:00
import 'package:rluv/features/budget/screens/transactions_listview.dart';
2023-07-19 02:16:13 -06:00
import 'package:rluv/features/budget/widgets/add_transaction_dialog.dart';
2023-07-22 21:29:32 -06:00
import 'package:rluv/features/budget/widgets/budget_category_bar.dart';
2023-07-19 02:16:13 -06:00
import 'package:rluv/features/budget/widgets/budget_net_bar.dart';
import 'package:rluv/global/styles.dart';
import 'package:rluv/global/utils.dart';
import '../../../global/store.dart';
2023-08-17 13:34:30 -06:00
import '../../../global/widgets/ui_button.dart';
2023-07-22 21:29:32 -06:00
import '../../../models/transaction_model.dart';
import '../widgets/add_budget_category_dialog.dart';
2023-07-19 02:16:13 -06:00
class BudgetOverviewScreen extends ConsumerStatefulWidget {
2023-07-22 21:29:32 -06:00
const BudgetOverviewScreen({super.key, required this.initialData});
final Map<String, dynamic> initialData;
2023-07-19 02:16:13 -06:00
@override
ConsumerState<BudgetOverviewScreen> createState() =>
_BudgetOverviewScreenState();
}
class _BudgetOverviewScreenState extends ConsumerState<BudgetOverviewScreen> {
final budgetListScrollController = ScrollController();
@override
Widget build(BuildContext context) {
2023-08-17 13:34:30 -06:00
final budget = ref.watch(budgetProvider);
2023-07-27 01:40:26 -06:00
final budgetCategories = ref.watch(budgetCategoriesProvider);
final transactions = ref.watch(transactionsProvider);
2023-07-19 02:16:13 -06:00
final screen = BuildMedia(context).size;
2023-07-22 21:29:32 -06:00
double netExpense = 0.0;
double netIncome = 0.0;
2023-08-17 13:34:30 -06:00
double expectedExpenses = 0.0;
2023-07-22 21:29:32 -06:00
Map<int, double> budgetCategoryNetMap = {};
2023-07-27 01:40:26 -06:00
netExpense = transactions
.where((t) => t.type == TransactionType.expense)
.fold(netExpense, (net, t) => net + t.amount);
netIncome = transactions
.where((t) => t.type == TransactionType.income)
.fold(netIncome, (net, t) => net + t.amount);
for (final bud in budgetCategories) {
double net = 0.0;
2023-08-17 13:34:30 -06:00
expectedExpenses += bud.amount;
2023-07-27 01:40:26 -06:00
net = transactions
.where((t) => t.budgetCategoryId == bud.id)
.fold(net, (net, t) => net + t.amount);
budgetCategoryNetMap[bud.id!] = net;
}
return Stack(
children: [
Column(
children: [
/// TOP HALF, TITLE & OVERVIEW
Container(
height: screen.height * 0.3,
2023-07-22 21:29:32 -06:00
width: screen.width,
2023-07-27 01:40:26 -06:00
color: Styles.purpleNurple,
2023-07-22 21:29:32 -06:00
child: Column(
2023-07-27 01:40:26 -06:00
crossAxisAlignment: CrossAxisAlignment.center,
2023-07-22 21:29:32 -06:00
children: [
2023-07-27 01:40:26 -06:00
const Spacer(flex: 2),
Text(
formatDate(DateTime.now()),
style: const TextStyle(
fontSize: 16, color: Styles.electricBlue),
),
const Spacer(),
const Text('MONTHLY',
style:
TextStyle(fontSize: 42, color: Styles.electricBlue)),
const Spacer(flex: 2),
2023-08-17 13:34:30 -06:00
BudgetNetBar(
isPositive: true,
net: netIncome,
expected: budget?.expectedIncome ?? 0.0),
2023-07-27 01:40:26 -06:00
const Spacer(),
2023-08-17 13:34:30 -06:00
BudgetNetBar(
isPositive: false,
net: netExpense,
expected: expectedExpenses),
2023-07-27 01:40:26 -06:00
const Spacer(),
],
),
),
/// BOTTOM HALF, BUDGET BREAKDOWN
Expanded(
child: Container(
color: Styles.sunflower,
width: screen.width,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsets.all(14.0),
child: Container(
decoration: BoxDecoration(
color: Styles.blushingPink,
borderRadius: BorderRadius.circular(16.0),
),
child: Column(
children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'BUDGET',
style: TextStyle(
fontSize: 28, color: Styles.electricBlue),
),
2023-07-19 02:16:13 -06:00
),
2023-07-27 01:40:26 -06:00
budgetCategories.isEmpty
? Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: screen.width * 0.8,
child: Column(
2023-07-22 21:29:32 -06:00
children: [
2023-07-27 01:40:26 -06:00
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'No budget categories created yet, add some!'),
),
2023-08-17 13:34:30 -06:00
UiButton(
2023-07-27 01:40:26 -06:00
onPressed:
ref.watch(budgetProvider) ==
null
? null
: () => showDialog(
context: context,
builder: (context) => Dialog(
shape: Styles
.dialogShape,
backgroundColor:
Styles
.dialogColor,
child:
2023-08-17 13:34:30 -06:00
const BudgetCategoryDialog()),
2023-07-27 01:40:26 -06:00
),
2023-08-17 13:34:30 -06:00
text: 'Add Category',
2023-07-19 02:16:13 -06:00
),
2023-07-22 21:29:32 -06:00
],
2023-07-19 02:16:13 -06:00
),
),
2023-07-27 01:40:26 -06:00
)
: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 2.0, vertical: 4.0),
child: SizedBox(
height: screen.height * 0.36,
child: Scrollbar(
controller: budgetListScrollController,
thumbVisibility: true,
child: ListView(
physics:
const BouncingScrollPhysics(),
controller:
budgetListScrollController,
shrinkWrap: true,
children: [
...budgetCategories
.mapIndexed((i, category) {
return BudgetCategoryBar(
budgetCategory: category,
currentAmount:
budgetCategoryNetMap[
category.id]!,
index: i,
);
}).toList(),
const SizedBox(height: 20),
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
SizedBox(
width: 140,
child: ElevatedButton(
onPressed: ref.watch(
budgetProvider) ==
null
? null
: () => showDialog(
context: context,
builder: (context) => Dialog(
shape: Styles
.dialogShape,
backgroundColor:
Styles
.dialogColor,
child:
2023-08-17 13:34:30 -06:00
const BudgetCategoryDialog()),
2023-07-27 01:40:26 -06:00
),
child: const Text(
'Add Category'),
),
),
],
),
const SizedBox(height: 20),
],
),
),
),
2023-07-19 02:16:13 -06:00
),
2023-07-27 01:40:26 -06:00
],
),
2023-07-22 21:29:32 -06:00
),
),
2023-07-27 01:40:26 -06:00
const Spacer(),
Row(
children: [
Expanded(
child: Padding(
padding:
const EdgeInsets.only(left: 20.0, right: 15.0),
child: Container(
height: 70,
decoration: BoxDecoration(
color: Styles.seaweedGreen,
borderRadius: BorderRadius.circular(15.0),
),
child: InkWell(
child: const Center(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 20.0, vertical: 14.0),
child: FittedBox(
child: Text(
'Transaction History',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25),
),
2023-07-19 02:16:13 -06:00
),
),
),
2023-07-27 01:40:26 -06:00
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const TransactionsListview()));
},
2023-07-19 02:16:13 -06:00
),
2023-07-22 21:29:32 -06:00
),
2023-07-19 02:16:13 -06:00
),
),
2023-07-27 01:40:26 -06:00
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Container(
decoration: BoxDecoration(
color: Styles.purpleNurple,
borderRadius: BorderRadius.circular(40.0),
),
height: 80,
width: 80,
child: IconButton(
icon: const Icon(
Icons.add,
size: 48,
color: Styles.lavender,
),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
backgroundColor: Styles.dialogColor,
shape: Styles.dialogShape,
2023-08-17 13:34:30 -06:00
child: const TransactionDialog());
2023-07-27 01:40:26 -06:00
},
);
},
2023-07-22 21:29:32 -06:00
),
),
),
2023-07-27 01:40:26 -06:00
],
),
const Spacer(),
],
),
2023-07-22 21:29:32 -06:00
),
2023-07-27 01:40:26 -06:00
)
],
),
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(top: 5.0, right: 5.0),
child: IconButton(
icon: const Icon(Icons.loop),
color: Styles.seaweedGreen,
onPressed: () =>
ref.read(dashboardProvider.notifier).fetchDashboard(),
2023-07-19 02:16:13 -06:00
),
2023-07-27 01:40:26 -06:00
),
),
IgnorePointer(
child: AnimatedOpacity(
duration: const Duration(milliseconds: 150),
opacity: ref.watch(loadingStateProvider) ? 0.75 : 0.0,
child: Container(
color: Colors.black12,
height: screen.height,
width: screen.width,
child: const Center(
child: CircularProgressIndicator(
color: Styles.lavender,
strokeWidth: 2.5,
),
),
),
),
)
],
2023-07-19 02:16:13 -06:00
);
}
}