mohemm-flutter-app/lib/ui/my_team/view_attendance.dart

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:mohem_flutter_app/api/my_team/my_team_api_client.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/utils.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/models/dashboard/get_attendance_tracking_list_model.dart';
import 'package:mohem_flutter_app/models/get_day_hours_type_details_list_model.dart';
import 'package:mohem_flutter_app/models/get_time_card_summary_list_model.dart';
import 'package:mohem_flutter_app/models/my_team/get_employee_subordinates_list.dart';
import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
import 'package:month_picker_dialog_2/month_picker_dialog_2.dart';
import 'package:pie_chart/pie_chart.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

class ViewAttendance extends StatefulWidget {
  const ViewAttendance({Key? key}) : super(key: key);

  @override
  _ViewAttendanceState createState() => _ViewAttendanceState();
}

class _ViewAttendanceState extends State<ViewAttendance> {
  bool isPresent = false;
  bool isAbsent = false;
  bool isMissing = false;
  bool isOff = false;
  DateTime date = DateTime.now();
  late DateTime formattedDate;
  var currentMonth = DateTime.now().month;
  String searchMonth = getMonth(DateTime.now().month);
  int searchYear = DateTime.now().year;
  int? pRTPID;

  String searchEmpEmail = "";
  String searchEmpName = "";
  String searchEmpNo = "";
  String? empId;
  List<GetEmployeeSubordinatesList> getEmployeeSubordinatesList = [];
  List<GetDayHoursTypeDetailsList> getDayHoursTypeDetailsList = [];
  GetTimeCardSummaryList? getTimeCardSummaryList;
  GetAttendanceTracking? attendanceTracking;
  GetEmployeeSubordinatesList? getEmployeeSubordinates;

  @override
  void initState() {
    super.initState();
    formattedDate = date;
    callTimeCardAndHourDetails(date.day, searchMonth, searchYear);
  }

  void callTimeCardAndHourDetails(index, searchMonth, searchYear) async {
    try {
      Utils.showLoading(context);
      getEmployeeSubordinatesList = await MyTeamApiClient().getEmployeeSubordinates(searchEmpEmail.toString(), searchEmpName.toString(), searchEmpNo.toString());
      getTimeCardSummaryList = await MyTeamApiClient().getTimeCardSummary(searchMonth, searchYear, getEmployeeSubordinates?.eMPLOYEENUMBER);
      getDayHoursTypeDetailsList = await MyTeamApiClient().getDayHoursTypeDetails(searchMonth, searchYear, getEmployeeSubordinates?.eMPLOYEENUMBER);
      attendanceTracking = await MyTeamApiClient().getAttendanceTracking(getEmployeeSubordinates?.eMPLOYEENUMBER);
      Utils.hideLoading(context);
      _calendarController.displayDate = formattedDate;
      setState(() {});
    } catch (ex) {
      Utils.hideLoading(context);
      Utils.handleException(ex, context, null);
    }
  }

  final CalendarController _calendarController = CalendarController();
  final List<Color> _colorList = [Color(0xff2AB2AB), Color(0xff202529)];

  @override
  Widget build(BuildContext context) {
    getEmployeeSubordinates ??= ModalRoute.of(context)?.settings.arguments as GetEmployeeSubordinatesList;
    Map<String, double> dataMap = {
      "Present": getTimeCardSummaryList?.aTTENDEDDAYS != null ? getTimeCardSummaryList!.aTTENDEDDAYS!.toDouble() : 0,
      "Absent": getTimeCardSummaryList?.aBSENTDAYS != null ? getTimeCardSummaryList!.aBSENTDAYS!.toDouble() : 0,
    };

    return Scaffold(
      appBar: AppBarWidget(
        context,
        title: LocaleKeys.viewAttendance.tr(),
      ),
      backgroundColor: MyColors.backgroundColor,
      body: ListView(
        children: [
          Container(
            margin: EdgeInsets.all(21),
            child: Column(
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    LocaleKeys.todayAttendance.tr().toText16(color: MyColors.darkTextColor),
                    7.height,
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      // mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            LocaleKeys.checkIn.tr().toText10(color: MyColors.green69Color),
                            "${(attendanceTracking?.pSwipeIn) ?? "- - : - -"}".toText14(color: MyColors.grey57Color),
                          ],
                        ).expanded,
                        Row(
                          children: [
                            Container(height: 30, width: 1, color: const Color(0xffF0F0F0)),
                            11.width,
                            Column(
                              children: [
                                LocaleKeys.checkOut.tr().toText10(color: MyColors.redA3Color),
                                "${(attendanceTracking?.pSwipeOut) ?? "- - : - -"}".toText14(color: MyColors.grey57Color),
                              ],
                            ),
                          ],
                        ).expanded,
                        Row(
                          children: [
                            Container(height: 30, width: 1, color: const Color(0xffF0F0F0)),
                            11.width,
                            Column(
                              children: [
                                LocaleKeys.lateIn.tr().toText10(color: MyColors.darkGreyColor),
                                "${(attendanceTracking?.pLateInHours) ?? "- - : - -"}".toText14(color: MyColors.grey57Color),
                              ],
                            ),
                          ],
                        ).expanded,
                      ],
                    )
                  ],
                ).paddingOnly(top: 15, left: 14, right: 14, bottom: 20).objectContainerView(
                      disablePadding: true,
                      radius: 10,
                    ),
                12.height,
                Column(
                  children: [
                    Row(
                      children: [
                        "${DateFormat("MMMM-yyyy").format(formattedDate)}".toText16(color: MyColors.grey3AColor),
                        const Icon(Icons.keyboard_arrow_down_rounded, color: MyColors.grey3AColor),
                      ],
                    ).onPress(
                      () async {
                        showMonthPicker(
                          context: context, //locale: EasyLocalization.of(context)?.locale,
                          initialDate: formattedDate,
                          firstDate: DateTime(searchYear - 2),
                          lastDate: DateTime.now(),
                        ).then(
                          (selectedDate) {
                            if (selectedDate != null) {
                              searchMonth = getMonth(selectedDate.month);
                              searchYear = selectedDate.year;
                              formattedDate = selectedDate; //DateFormat('MMMM-yyyy').format(selectedDate);
                              callTimeCardAndHourDetails(selectedDate.day, searchMonth, searchYear);
                            }
                          },
                        );
                      },
                    ),
                    8.height,
                    AspectRatio(aspectRatio: 304 / 244, child: calendarWidget()),
                    //  45.height,
                    Row(
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            "${LocaleKeys.attendance.tr()} ${LocaleKeys.stats.tr()}".toSectionHeading(),
                            29.height,
                            Row(
                              children: [
                                Container(
                                  height: 9,
                                  width: 9,
                                  decoration: BoxDecoration(
                                    color: MyColors.lightGreenColor,
                                    borderRadius: BorderRadius.circular(100),
                                  ),
                                ),
                                7.width,
                                "${LocaleKeys.present.tr()} ${getTimeCardSummaryList?.aTTENDEDDAYS ?? 0}".toText16(isBold: true, color: MyColors.lightGreenColor),
                              ],
                            ),
                            8.height,
                            Row(
                              children: [
                                Container(
                                  height: 9,
                                  width: 9,
                                  decoration: BoxDecoration(
                                    color: MyColors.backgroundBlackColor,
                                    borderRadius: BorderRadius.circular(100),
                                  ),
                                ),
                                7.width,
                                "${LocaleKeys.absent.tr()} ${getTimeCardSummaryList?.aBSENTDAYS ?? 0}".toText16(
                                  isBold: true,
                                  color: MyColors.backgroundBlackColor,
                                )
                              ],
                            ),
                          ],
                        ).expanded,
                        44.width,
                        AspectRatio(
                          aspectRatio: 1 / 1,
                          child: PieChart(
                            dataMap: dataMap,
                            animationDuration: const Duration(milliseconds: 800),
                            chartLegendSpacing: 0,
                            chartRadius: MediaQuery.of(context).size.width / 5.2,
                            colorList: _colorList,
                            initialAngleInDegree: 0,
                            chartType: ChartType.ring,
                            ringStrokeWidth: 80,
                            legendOptions: const LegendOptions(
                              showLegendsInRow: false,
                              showLegends: false,
                            ),
                            chartValuesOptions: const ChartValuesOptions(
                                showChartValueBackground: false,
                                showChartValues: true,
                                showChartValuesInPercentage: true,
                                showChartValuesOutside: false,
                                decimalPlaces: 1,
                                chartValueStyle: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 16,
                                  color: MyColors.white,
                                )),
                          ),
                        ).expanded,
                      ],
                    ),
                  ],
                ).paddingOnly(top: 17, left: 14, right: 14, bottom: 35).objectContainerView(disablePadding: true, radius: 10),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget calendarWidget() {
    return SfCalendar(
      view: CalendarView.month,
      showDatePickerButton: false,
      controller: _calendarController,
      backgroundColor: Colors.white,
      headerHeight: 0,
      viewNavigationMode: ViewNavigationMode.none,
      todayHighlightColor: MyColors.grey3AColor,
      showNavigationArrow: false,
      showCurrentTimeIndicator: false,
      showWeekNumber: false,
      cellBorderColor: Colors.white,
      selectionDecoration: BoxDecoration(
        border: Border.all(color: MyColors.white, width: 10),
        borderRadius: const BorderRadius.all(Radius.circular(100)),
        shape: BoxShape.circle,
      ),
      dataSource: MeetingDataSource(_getDataSource()),
      monthViewSettings: const MonthViewSettings(
        dayFormat: 'EEE',
        showTrailingAndLeadingDates: false,
        showAgenda: false,
      ),
      viewHeaderStyle: const ViewHeaderStyle(
        dayTextStyle: TextStyle(color: MyColors.grey3AColor, fontSize: 12, fontWeight: FontWeight.w600),
      ),
      monthCellBuilder: (build, details) {
        if (details.date.month == formattedDate.month && details.date.year == formattedDate.year) {
          int val = details.date.day;
          //check day is off
          if (getDayHoursTypeDetailsList.isNotEmpty) {
            if (getDayHoursTypeDetailsList?[val - 1].aTTENDEDFLAG == 'N' && getDayHoursTypeDetailsList?[val - 1].dAYTYPE == 'OFF') {
              return Container(
                margin: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  color: MyColors.greyACColor.withOpacity(.12),
                  shape: BoxShape.circle,
                ),
                alignment: Alignment.center,
                child: Text(
                  "$val",
                  style: const TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.w500,
                    color: MyColors.greyA5Color,
                  ),
                ),
              );
            }
            //check day is Present
            else if (getDayHoursTypeDetailsList?[val - 1].aTTENDEDFLAG == 'Y') {
              return Container(
                margin: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    transform: GradientRotation(.46),
                    begin: Alignment.topRight,
                    end: Alignment.bottomLeft,
                    colors: [MyColors.gradiantEndColor, MyColors.gradiantStartColor],
                  ),
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      offset: const Offset(0, 2),
                      blurRadius: 26,
                      color: MyColors.blackColor.withOpacity(0.100),
                    ),
                  ],
                ),
                alignment: Alignment.center,
                child: Text(
                  "$val",
                  style: const TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.w500,
                    color: MyColors.white,
                  ),
                ),
              );
            }
            //check day is Absent
            else if (getDayHoursTypeDetailsList?[val - 1].aTTENDEDFLAG == 'N' && getDayHoursTypeDetailsList?[val - 1].aBSENTFLAG == 'Y') {
              return Container(
                margin: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  color: MyColors.backgroundBlackColor,
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      offset: const Offset(0, 2),
                      blurRadius: 26,
                      color: MyColors.blackColor.withOpacity(0.100),
                    ),
                  ],
                ),
                alignment: Alignment.center,
                child: Text(
                  "$val",
                  style: const TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.w500,
                    color: MyColors.white,
                  ),
                ),
              );
            }
          }
          return Container(
            margin: const EdgeInsets.all(4),
            decoration: BoxDecoration(
              border: Border.all(color: MyColors.backgroundBlackColor, width: 2.0, style: BorderStyle.solid), //Border.all
              shape: BoxShape.circle,
              boxShadow: [
                BoxShadow(
                  offset: const Offset(0, 2),
                  blurRadius: 26,
                  color: MyColors.blackColor.withOpacity(0.100),
                ),
              ],
            ),
            alignment: Alignment.center,
            child: Text(
              "$val",
              style: const TextStyle(
                fontSize: 10,
                fontWeight: FontWeight.w600,
                color: Color(0xff1F2428),
              ),
            ),
          );
        } else {
          return const SizedBox();
        }
      },
    );
  }

  List<Meeting> _getDataSource() {
    List<Meeting> meetings = <Meeting>[];
    return meetings;
  }

  static String getMonth(int month) {
    switch (month) {
      case 1:
        return "January";
      case 2:
        return "February";
      case 3:
        return "March";
      case 4:
        return "April";
      case 5:
        return "May";
      case 6:
        return "June";
      case 7:
        return "July";
      case 8:
        return "August";
      case 9:
        return "September";
      case 10:
        return "October";
      case 11:
        return "November";
      case 12:
        return "December";
      default:
        return "";
    }
  }

  static String getMonthAr(int month) {
    switch (month) {
      case 1:
        return 'يناير';
      case 2:
        return ' فبراير';
      case 3:
        return 'مارس';
      case 4:
        return 'أبريل';
      case 5:
        return 'مايو';
      case 6:
        return 'يونيو';
      case 7:
        return 'يوليو';
      case 8:
        return 'أغسطس';
      case 9:
        return 'سبتمبر';
      case 10:
        return ' اكتوبر';
      case 11:
        return ' نوفمبر';
      case 12:
        return 'ديسمبر';
      default:
        return "";
    }
  }
}

class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List<Meeting> source) {
    appointments = source;
  }

  @override
  DateTime getStartTime(int index) {
    return _getMeetingData(index).from;
  }

  @override
  DateTime getEndTime(int index) {
    return _getMeetingData(index).to;
  }

  @override
  String getSubject(int index) {
    return _getMeetingData(index).eventName;
  }

  @override
  Color getColor(int index) {
    return _getMeetingData(index).background;
  }

  @override
  bool isAllDay(int index) {
    return _getMeetingData(index).isAllDay;
  }

  Meeting _getMeetingData(int index) {
    dynamic meeting = appointments;
    Meeting meetingData;
    if (meeting is Meeting) {
      meetingData = meeting;
    }
    return meeting;
  }
}

class Meeting {
  Meeting(this.eventName, this.from, this.to, this.background, this.isAllDay);

  String eventName;
  DateTime from;
  DateTime to;
  Color background;
  bool isAllDay;
}