import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/src/public_ext.dart'; import 'package:flutter/material.dart'; import 'package:flutter/painting.dart'; import 'package:flutter/scheduler.dart'; import 'package:mohem_flutter_app/api/monthlyAttendance_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/models/get_day_hours_type_details_list_model.dart'; import 'package:mohem_flutter_app/models/get_schedule_shifts_details_list_model.dart'; import 'package:mohem_flutter_app/models/get_time_card_summary_list_model.dart'; import 'package:mohem_flutter_app/widgets/circular_step_progress_bar.dart'; import 'package:provider/provider.dart'; import 'package:syncfusion_flutter_calendar/calendar.dart'; import 'package:mohem_flutter_app/generated/locale_keys.g.dart'; import 'package:flutter/cupertino.dart'; import 'package:pie_chart/pie_chart.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:intl/intl.dart'; import 'package:month_year_picker/month_year_picker.dart'; import 'package:month_picker_dialog/month_picker_dialog.dart'; class MonthlyAttendance extends StatefulWidget { MonthlyAttendance({Key? key}) : super(key: key); @override _MonthlyAttendanceState createState() { return _MonthlyAttendanceState(); } } class _MonthlyAttendanceState extends State { 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; List getDayHoursTypeDetailsList = []; GetTimeCardSummaryList? getTimeCardSummaryList; GetScheduleShiftsDetailsList? getScheduleShiftsDetailsList; @override void initState() { super.initState(); formattedDate = date; callTimeCardAndHourDetails(date.day, searchMonth, searchYear); } void callTimeCardAndHourDetails(index, searchMonth, searchYear) async { try { Utils.showLoading(context); getTimeCardSummaryList = await MonthlyAttendanceApiClient().getTimeCardSummary(searchMonth, searchYear); getDayHoursTypeDetailsList = await MonthlyAttendanceApiClient().getDayHoursTypeDetails(searchMonth, searchYear); Utils.hideLoading(context); _calendarController.displayDate = formattedDate; setState(() {}); } catch (ex) { Utils.hideLoading(context); Utils.handleException(ex, context, null); } } Future getScheduleShiftsDetails(index, pRTPID) async { try { Utils.showLoading(context); getScheduleShiftsDetailsList = await MonthlyAttendanceApiClient().getScheduleShiftsDetails(pRTPID); Utils.hideLoading(context); //setState(() {}); } catch (ex) { Utils.hideLoading(context); Utils.handleException(ex, context, null); } } final CalendarController _calendarController = CalendarController(); final List _colorList = [Color(0xff2AB2AB), Color(0xff202529)]; @override Widget build(BuildContext context) { Map dataMap = { "Present": getTimeCardSummaryList?.aTTENDEDDAYS != null ? getTimeCardSummaryList!.aTTENDEDDAYS!.toDouble() : 0, "Absent": getTimeCardSummaryList?.aBSENTDAYS != null ? getTimeCardSummaryList!.aBSENTDAYS!.toDouble() : 0, }; return Scaffold( appBar: AppBar( backgroundColor: MyColors.white, leading: IconButton( icon: const Icon( Icons.arrow_back_ios, color: MyColors.backgroundBlackColor, ), onPressed: () => Navigator.pop(context), ), ), backgroundColor: Colors.white, body: ListView( scrollDirection: Axis.vertical, children: [ Column( children: [ 20.height, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.attendance.tr().toText24(isBold: true, color: MyColors.darkIconColor), Row( children: [ "${DateFormat("MMMM-yyyy").format(formattedDate)}".toText16(color: MyColors.greyACColor), const Icon(Icons.keyboard_arrow_down_rounded, color: MyColors.greyACColor), ], ).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); // _calendarController.selectedDate = formattedDate; callTimeCardAndHourDetails(selectedDate.day, searchMonth, searchYear); } }); }) ], ).paddingOnly(left: 21, right: 21), 18.height, AspectRatio(aspectRatio: 333 / 270, child: calendarWidget()).paddingOnly(left: 18, right: 25), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ optionUI(LocaleKeys.scheduleDays.tr(), "${getTimeCardSummaryList?.sCHEDULEDAYS}"), 6.width, optionUI(LocaleKeys.offDays.tr(), "${getTimeCardSummaryList?.oFFDAYS}"), 6.width, optionUI(LocaleKeys.nonAnalyzed.tr(), "${getTimeCardSummaryList?.uNAUTHORIZEDLEAVE}"), 6.width, optionUI(LocaleKeys.shortageHour.tr(), "${getTimeCardSummaryList?.sHORTAGEHRS}"), ], ).paddingOnly(left: 21, right: 21), 35.height, Container( width: double.infinity, height: 227, decoration: BoxDecoration( color: Colors.white, borderRadius: const BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)), boxShadow: [ BoxShadow( offset: const Offset(0, 2), blurRadius: 26, color: MyColors.darkColor.withOpacity(0.1), ), ], ), child: Row( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Column( children: [ LocaleKeys.attendance.tr().toText12(isBold: true, color: MyColors.grey3AColor), LocaleKeys.stats.tr().toText24(isBold: true, color: MyColors.grey3AColor), ], ).paddingOnly(left: 21, top: 29, bottom: 36, right: 23), Row( children: [ Container( height: 9, width: 9, decoration: BoxDecoration( color: MyColors.lightGreenColor, borderRadius: BorderRadius.circular(100), ), ), Container( margin: const EdgeInsets.only(left: 5, right: 5), child: "${LocaleKeys.present.tr()} ${getTimeCardSummaryList!.aTTENDEDDAYS}".toText16(isBold: true, color: MyColors.lightGreenColor), ), ], ).paddingOnly(left: 21, right: 23), 8.height, Row( children: [ Container( height: 9, width: 9, decoration: BoxDecoration( color: MyColors.backgroundBlackColor, borderRadius: BorderRadius.circular(100), ), ), Container( margin: const EdgeInsets.only(left: 5, right: 5), child: "${LocaleKeys.absent.tr()} ${getTimeCardSummaryList!.aBSENTDAYS}".toText16( isBold: true, color: MyColors.backgroundBlackColor, ), ) ], ).paddingOnly(left: 21, top: 8, right: 23), ], ), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 169, height: 170, 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, )), ), ), ], ).paddingOnly(left: 65, top: 27, right: 21, bottom: 28), ], ), ), ], ), ], ), ); } Widget optionUI(String title, String value) { return AspectRatio( aspectRatio: 1 / 1, child: Container( padding: const EdgeInsets.only(top: 10, left: 8, right: 8, bottom: 10), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(12), boxShadow: [ BoxShadow( offset: const Offset(0, 1), blurRadius: 15, color: MyColors.darkColor.withOpacity(0.1), ), ], ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [title.toText10(color: MyColors.darkTextColor).expanded, value.toText20(color: MyColors.darkTextColor)], ), ), ).expanded; } Widget calendarWidget() { return SfCalendar( view: CalendarView.month, showDatePickerButton: false, controller: _calendarController, headerHeight: 0, 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()), onTap: calendarTapped, monthViewSettings: const MonthViewSettings( dayFormat: 'EEE', showTrailingAndLeadingDates: false, showAgenda: false, navigationDirection: MonthNavigationDirection.horizontal, monthCellStyle: MonthCellStyle( textStyle: TextStyle( fontStyle: FontStyle.normal, fontSize: 13, color: Colors.white, ), ), ), viewHeaderStyle: const ViewHeaderStyle( dayTextStyle: TextStyle(color: MyColors.grey3AColor, fontSize: 13, 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[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: 13, 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: 13, 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: 13, 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: 13, fontWeight: FontWeight.w500, color: Color(0xff1F2428), ), ), ); // return Container( // alignment: Alignment.center, // child: Text("$val"), // ); } else { return const SizedBox(); } }, ); } calendarTapped(CalendarTapDetails details) async { dynamic index = details.date?.day; if (index != null) { index = index - 1; } pRTPID = getDayHoursTypeDetailsList[index].rTPID; await getScheduleShiftsDetails(index, pRTPID); dynamic value = getScheduleShiftsDetailsList!.pERCENTAGE; dynamic percentage; if (value!.indexOf('%') == 3) { percentage = int.parse(value!.substring(0, 3)); } else if (value!.indexOf('%') == 2) { percentage = int.parse(value!.substring(0, 2)); } else if (value!.indexOf('%') == 1 && value!.indexOf('%') != 0 && value!.indexOf('%') != "") { percentage = int.parse(value!.substring(0, 1)); } else if (value!.indexOf('%') == 0 || value!.indexOf('%') == "") { percentage = 0; } showModalBottomSheet( context: context, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)), isScrollControlled: true, backgroundColor: MyColors.backgroundBlackColor, builder: (_) { return DraggableScrollableSheet( maxChildSize: 0.9, expand: false, builder: (_, controller) { dynamic dmyString = getScheduleShiftsDetailsList!.sCHEDULEDATE; DateTime dateTime1 = DateFormat("MM/dd/yyyy hh:mm:ss a").parse(dmyString); return Column( children: [ Container( width: 75, height: 7, margin: const EdgeInsets.symmetric(vertical: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), color: MyColors.darkGreyColor, ), ), Expanded( child: ListView.builder( controller: controller, itemCount: 1, itemBuilder: (_, i) => Container( decoration: const BoxDecoration( borderRadius: BorderRadius.vertical( top: Radius.circular(35.0), ), color: MyColors.backgroundBlackColor, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container(child: "${DateFormat("MMMM-dd-yyyy").format(dateTime1).replaceAll('-', " ")}".toText24(isBold: true, color: Colors.white), ).paddingOnly(top: 26, left: 21, right: 21), Container( child: LocaleKeys.attendanceDetails.tr().toText16(color: MyColors.greyACColor).paddingOnly(left: 21,bottom: 16), ), Center( child: CircularStepProgressBar( totalSteps: 16 * 4, currentStep: percentage, width: 210, height: 210, selectedColor: MyColors.gradiantEndColor, unselectedColor: MyColors.grey70Color, child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ "${getScheduleShiftsDetailsList!.pERCENTAGE}".toText44(color: Colors.white, isBold: true), LocaleKeys.completed.tr().toText11(color: MyColors.greyACColor), 19.height, LocaleKeys.shiftTime.tr().toText11(color: MyColors.greyACColor), "${getScheduleShiftsDetailsList!.sHTNAME}".toText22(color: Colors.white, isBold: true), ], ), ), ), ), Container( padding: const EdgeInsets.only(top: 20, bottom: 20), ), Stack( children: [ Container( height: 5, padding: const EdgeInsets.only(top: 24, bottom: 24), color: MyColors.backgroundBlackColor, ), Container( width: double.infinity, decoration: const BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)), color: Colors.white), padding: const EdgeInsets.only(left: 21, right: 21, top: 28, bottom: 24), child: Column( children: [ Row( children: [ Container( margin: const EdgeInsets.only(right: 30, left: 15), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.actualCheckIn.tr().toText11( color: MyColors.grey67Color, ), 8.height, "${getScheduleShiftsDetailsList!.sHTACTUALSTARTTIME}" !="" ? "${getScheduleShiftsDetailsList!.sHTACTUALSTARTTIME}".toText22(color: Colors.black, isBold: true) : "__".toText22(color: Colors.black, isBold: true), ], ), ), 40.width, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.actualCheckOut.tr().toText11( color: MyColors.grey67Color, ), 8.height, "${getScheduleShiftsDetailsList!.sHTACTUALENDTIME}" != "" ? "${getScheduleShiftsDetailsList!.sHTACTUALENDTIME}".toText22(color: Colors.black, isBold: true) : "__".toText22(color: Colors.black, isBold: true), ], ), ], ), 25.height, const Divider( height: 1, thickness: 1, color: MyColors.whiteColor, ), 25.height, Row( children: [ Container( margin: const EdgeInsets.only(right: 30, left: 15), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.approvedCheckIn.tr().toText11( color: MyColors.grey67Color, ), 8.height, "${getScheduleShiftsDetailsList!.aPPROVEDSTARTTIME}" !="" ? "${getScheduleShiftsDetailsList!.aPPROVEDSTARTTIME}".toText22(color: MyColors.greenColor, isBold: true) :"__".toText22(color: MyColors.greenColor, isBold: true), ], ), ), 30.width, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.approvedCheckOut.tr().toText11( color: MyColors.grey67Color, ), 8.height, "${getScheduleShiftsDetailsList!.aPPROVEDENDTIME}"!= "" ? "${getScheduleShiftsDetailsList!.aPPROVEDENDTIME}".toText22(color: MyColors.greenColor, isBold: true) :"__".toText22(color: MyColors.greenColor, isBold: true), ], ), ], ), 25.height, const Divider( height: 1, thickness: 1, color: MyColors.whiteColor, ), 25.height, Row( children: [ Container( margin: const EdgeInsets.only(right: 30, left: 15), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.lateIn.tr().toText11( color: MyColors.grey67Color, ), 8.height, "${getDayHoursTypeDetailsList[index].lATEINHRS}".toText22(color: MyColors.redColor, isBold: true), ], ), ), 80.width, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.excess.tr().toText11( color: MyColors.grey67Color, ), 8.height, "${getDayHoursTypeDetailsList[index].eXCESSHRS}".toText22(color: Colors.black, isBold: true), ], ), ], ), 25.height, const Divider( height: 1, thickness: 1, color: MyColors.whiteColor, ), 25.height, Row( children: [ Container( margin: const EdgeInsets.only(right: 30, left: 15), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.shortage.tr().toText11( color: MyColors.grey67Color, ), 8.height, "${getDayHoursTypeDetailsList[index].sHORTAGEHRS}".toText22(color: Colors.black, isBold: true), ], ), ), 80.width, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.earlyOut.tr().toText11( color: MyColors.grey67Color, ), 8.height, "${getDayHoursTypeDetailsList[index].eARLYOUTHRS}".toText22(color: Colors.black, isBold: true), ], ), ], ), ], ), ), ], ), ], ), ), ), ), ], ); }, ); }, ); } List _getDataSource() { final List meetings = []; return meetings; } static 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"; } } static 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 'ديسمبر'; } } } class MeetingDataSource extends CalendarDataSource { MeetingDataSource(List 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) { final 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; }