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

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:helpers/helpers.dart';
import 'package:rluv/features/budget/screens/transactions_listview.dart';
import 'package:rluv/features/budget/widgets/add_transaction_dialog.dart';
import 'package:rluv/features/budget/widgets/budget_category_bar.dart';
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';
import '../../../models/transaction_model.dart';
import '../widgets/add_budget_category_dialog.dart';

class BudgetOverviewScreen extends ConsumerStatefulWidget {
  const BudgetOverviewScreen({super.key, required this.initialData});

  final Map<String, dynamic> initialData;

  @override
  ConsumerState<BudgetOverviewScreen> createState() =>
      _BudgetOverviewScreenState();
}

class _BudgetOverviewScreenState extends ConsumerState<BudgetOverviewScreen> {
  final budgetListScrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    final budgetCategories = ref.watch(Store().budgetCategoriesProvider);
    final transactions = ref.watch(Store().transactionsProvider);
    final screen = BuildMedia(context).size;
    double netExpense = 0.0;
    double netIncome = 0.0;
    Map<int, double> budgetCategoryNetMap = {};
      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;
        net = transactions
            .where((t) => t.budgetCategoryId == bud.id)
            .fold(net, (net, t) => net + t.amount);
        budgetCategoryNetMap[bud.id!] = net;
      }
    return RefreshIndicator(
      displacement: 20.0,
      onRefresh: () async {
        final family = ref.read(Store().familyProvider).valueOrNull;
        final _ =
            ref.read(Store().dashboardProvider.notifier).fetchDashboard(family);
      },
      child: Column(
        children: [
          /// TOP HALF, TITLE & OVERVIEW
          Container(
            height: screen.height * 0.3,
            width: screen.width,
            color: Styles.purpleNurple,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                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),
                BudgetNetBar(isPositive: true, net: netIncome),
                const Spacer(),
                BudgetNetBar(isPositive: false, net: netExpense),
                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),
                            ),
                          ),
                          budgetCategories.isEmpty
                              ? Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: SizedBox(
                                    width: screen.width * 0.8,
                                    child: Column(
                                      children: [
                                        const Padding(
                                          padding: EdgeInsets.all(8.0),
                                          child: Text(
                                              'No budget categories created yet, add some!'),
                                        ),
                                        ElevatedButton(
                                          onPressed: ref.watch(
                                                      Store().budgetProvider) ==
                                                  null
                                              ? null
                                              : () => showDialog(
                                                    context: context,
                                                    builder: (context) => Dialog(
                                                        shape:
                                                            Styles.dialogShape,
                                                        backgroundColor:
                                                            Styles.dialogColor,
                                                        child:
                                                            const AddBudgetCategoryDialog()),
                                                  ),
                                          child: const Text('Add Category'),
                                        ),
                                      ],
                                    ),
                                  ),
                                )
                              : 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(Store()
                                                              .budgetProvider) ==
                                                          null
                                                      ? null
                                                      : () => showDialog(
                                                            context: context,
                                                            builder: (context) => Dialog(
                                                                shape: Styles
                                                                    .dialogShape,
                                                                backgroundColor:
                                                                    Styles
                                                                        .dialogColor,
                                                                child:
                                                                    const AddBudgetCategoryDialog()),
                                                          ),
                                                  child: const Text(
                                                      'Add Category'),
                                                ),
                                              ),
                                            ],
                                          ),
                                          const SizedBox(height: 20),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                        ],
                      ),
                    ),
                  ),
                  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),
                                    ),
                                  ),
                                ),
                              ),
                              onTap: () {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) =>
                                            const TransactionsListview()));
                              },
                            ),
                          ),
                        ),
                      ),
                      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,
                                      child: const AddTransactionDialog());
                                },
                              );
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                  const Spacer(),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}