apskel-owner-flutter/lib/presentation/pages/report/report_page.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:line_icons/line_icons.dart';
import 'dart:math' as math;

import '../../../application/analytic/dashboard_analytic_loader/dashboard_analytic_loader_bloc.dart';
import '../../../common/theme/theme.dart';
import '../../../injection.dart';
import '../../components/appbar/appbar.dart';
import '../../components/button/button.dart';
import '../../components/field/date_range_picker_field.dart';
import '../../components/spacer/spacer.dart';
import 'widgets/payment_method.dart';
import 'widgets/quick_stats.dart';
import 'widgets/revenue_summary.dart';
import 'widgets/sales.dart';
import 'widgets/top_product.dart';

@RoutePage()
class ReportPage extends StatefulWidget implements AutoRouteWrapper {
  const ReportPage({super.key});

  @override
  State<ReportPage> createState() => _ReportPageState();

  @override
  Widget wrappedRoute(BuildContext context) => BlocProvider(
    create: (context) =>
        getIt<DashboardAnalyticLoaderBloc>()
          ..add(DashboardAnalyticLoaderEvent.fetched()),
    child: this,
  );
}

class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
  late AnimationController _fadeController;
  late AnimationController _slideController;
  late AnimationController _rotationController;
  late Animation<double> _fadeAnimation;
  late Animation<Offset> _slideAnimation;
  late Animation<double> _rotationAnimation;

  @override
  void initState() {
    super.initState();

    _fadeController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );

    _slideController = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    );

    _rotationController = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat();

    _fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
    );

    _slideAnimation =
        Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
          CurvedAnimation(parent: _slideController, curve: Curves.elasticOut),
        );

    _rotationAnimation = Tween<double>(
      begin: 0,
      end: 2 * math.pi,
    ).animate(_rotationController);

    _fadeController.forward();
    _slideController.forward();
  }

  @override
  void dispose() {
    _fadeController.dispose();
    _slideController.dispose();
    _rotationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<
      DashboardAnalyticLoaderBloc,
      DashboardAnalyticLoaderState
    >(
      listenWhen: (previous, current) =>
          previous.dateFrom != current.dateFrom ||
          previous.dateTo != current.dateTo,
      listener: (context, state) {
        context.read<DashboardAnalyticLoaderBloc>().add(
          DashboardAnalyticLoaderEvent.fetched(),
        );
      },
      child: Scaffold(
        backgroundColor: AppColor.background,
        body:
            BlocBuilder<
              DashboardAnalyticLoaderBloc,
              DashboardAnalyticLoaderState
            >(
              builder: (context, state) {
                return CustomScrollView(
                  slivers: [
                    SliverAppBar(
                      expandedHeight: 120,
                      floating: false,
                      pinned: true,
                      backgroundColor: AppColor.primary,
                      centerTitle: false,
                      flexibleSpace: CustomAppBar(
                        title: 'Laporan',
                        isBack: false,
                      ),
                      actions: [
                        ActionIconButton(
                          onTap: () {},
                          icon: LineIcons.download,
                        ),
                        ActionIconButton(onTap: () {}, icon: LineIcons.filter),
                        SpaceWidth(8),
                      ],
                    ),

                    SliverToBoxAdapter(
                      child: SlideTransition(
                        position: _slideAnimation,
                        child: FadeTransition(
                          opacity: _fadeAnimation,
                          child: Padding(
                            padding: const EdgeInsets.all(16.0),
                            child: DateRangePickerField(
                              maxDate: DateTime.now(),
                              startDate: state.dateFrom,
                              endDate: state.dateTo,
                              onChanged: (startDate, endDate) {
                                context.read<DashboardAnalyticLoaderBloc>().add(
                                  DashboardAnalyticLoaderEvent.rangeDateChanged(
                                    startDate!,
                                    endDate!,
                                  ),
                                );
                              },
                            ),
                          ),
                        ),
                      ),
                    ),

                    // Content
                    SliverPadding(
                      padding: EdgeInsets.all(AppValue.padding),
                      sliver: SliverList(
                        delegate: SliverChildListDelegate([
                          FadeTransition(
                            opacity: _fadeAnimation,
                            child: SlideTransition(
                              position: _slideAnimation,
                              child: Column(
                                children: [
                                  ReportRevenueSummary(
                                    overview: state.dashboardAnalytic.overview,
                                    rotationAnimation: _rotationAnimation,
                                  ),
                                  const SpaceHeight(24),
                                  ReportQuickStats(
                                    overview: state.dashboardAnalytic.overview,
                                  ),
                                  const SpaceHeight(24),
                                  ReportSales(
                                    salesData:
                                        state.dashboardAnalytic.recentSales,
                                  ),
                                  const SpaceHeight(24),
                                  ReportPaymentMethod(
                                    paymentMethods:
                                        state.dashboardAnalytic.paymentMethods,
                                  ),
                                  const SpaceHeight(24),
                                  ReportTopProduct(
                                    products:
                                        state.dashboardAnalytic.topProducts,
                                  ),
                                  const SpaceHeight(24),
                                ],
                              ),
                            ),
                          ),
                        ]),
                      ),
                    ),
                  ],
                );
              },
            ),
      ),
    );
  }
}