import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import 'package:mohem_flutter_app/api/monthly_attendance_api_client.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_schedule_shifts_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:mohem_flutter_app/widgets/circular_step_progress_bar.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 { 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 = []; List getDayHoursTypeDetailsList = []; GetTimeCardSummaryList? getTimeCardSummaryList; GetAttendanceTracking? attendanceTracking; GetEmployeeSubordinatesList? getEmployeeSubordinates; GetScheduleShiftsDetailsList? getScheduleShiftsDetailsList; @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); } } 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) { getEmployeeSubordinates ??= ModalRoute.of(context)?.settings.arguments as GetEmployeeSubordinatesList; Map 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(), confirmText: Text(LocaleKeys.confirm.tr()), cancelText: Text(LocaleKeys.cancel.tr()), ).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: [ "${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()), onTap: calendarTapped, 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(); } }, ); } void 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; } if (details.date!.month == formattedDate.month && details.date!.year == formattedDate.year) { int val = details.date!.day; getDayHoursTypeDetailsList?[val - 1].aTTENDEDFLAG == 'Y' ? 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: 49, height: 7, margin: const EdgeInsets.symmetric(vertical: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(25), color: MyColors.darkGreyColor, ), ), Expanded( child: ListView.builder( controller: controller, itemCount: 1, itemBuilder: (_, i) => Container( decoration: const BoxDecoration( borderRadius: BorderRadius.vertical( top: Radius.circular(25.0), ), color: MyColors.backgroundBlackColor, ), child: Column( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ "${DateFormat("MMMM-dd-yyyy").format(dateTime1).replaceAll('-', " ")}".toText24(isBold: true, color: Colors.white), LocaleKeys.attendanceDetails.tr().toText16(color: MyColors.greyACColor), 12.height, CircularStepProgressBar( totalSteps: 16 * 4, currentStep: percentage, width: 224, height: 236, selectedColor: MyColors.gradiantEndColor, unselectedColor: MyColors.grey70Color, child: Column( mainAxisSize: MainAxisSize.min, children: [ "${getScheduleShiftsDetailsList!.pERCENTAGE}".toText44(color: Colors.white, isBold: true), LocaleKeys.completed.tr().toText11(color: MyColors.greyACColor), 28.height, LocaleKeys.shiftTime.tr().toText11(color: MyColors.greyACColor), "${getScheduleShiftsDetailsList!.sHTNAME}".toText22(color: Colors.white, isBold: true), ], ).center, ).center, ], ).paddingOnly(left: 21, right: 21, top: 27, bottom: 37), Stack( children: [ 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: 31, right: 31, top: 30, bottom: 29), child: Column( children: [ Row( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.actualCheckIn.tr().toText11( color: MyColors.grey67Color, ), "${getScheduleShiftsDetailsList!.sHTACTUALSTARTTIME}" != "" ? "${getScheduleShiftsDetailsList!.sHTACTUALSTARTTIME}".toText22(color: Colors.black, isBold: true) : "__".toText22(color: Colors.black, isBold: true), ], ).expanded, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.actualCheckOut.tr().toText11( color: MyColors.grey67Color, ), "${getScheduleShiftsDetailsList!.sHTACTUALENDTIME}" != "" ? "${getScheduleShiftsDetailsList!.sHTACTUALENDTIME}".toText22(color: Colors.black, isBold: true) : "__".toText22(color: Colors.black, isBold: true), ], ).expanded, ], ), 25.height, const Divider( height: 1, thickness: 1, color: MyColors.lightGreyEFColor, ), 25.height, Row( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.approvedCheckIn.tr().toText11( color: MyColors.grey67Color, ), "${getScheduleShiftsDetailsList!.aPPROVEDSTARTTIME}" != "" ? "${getScheduleShiftsDetailsList!.aPPROVEDSTARTTIME}".toText22(color: MyColors.greenColor, isBold: true) : "__".toText22(color: MyColors.greenColor, isBold: true), ], ).expanded, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.approvedCheckOut.tr().toText11( color: MyColors.grey67Color, ), "${getScheduleShiftsDetailsList!.aPPROVEDENDTIME}" != "" ? "${getScheduleShiftsDetailsList!.aPPROVEDENDTIME}".toText22(color: MyColors.greenColor, isBold: true) : "__".toText22(color: MyColors.greenColor, isBold: true), ], ).expanded, ], ), 25.height, const Divider( height: 1, thickness: 1, color: MyColors.lightGreyEFColor, ), 25.height, Row( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.lateIn.tr().toText11( color: MyColors.grey67Color, ), "${getDayHoursTypeDetailsList[index].lATEINHRS}".toText22(color: MyColors.redColor, isBold: true), ], ).expanded, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.excess.tr().toText11( color: MyColors.grey67Color, ), "${getDayHoursTypeDetailsList[index].eXCESSHRS}".toText22(color: MyColors.backgroundBlackColor, isBold: true), ], ).expanded, ], ), 25.height, const Divider( height: 1, thickness: 1, color: MyColors.lightGreyEFColor, ), 25.height, Row( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.shortage.tr().toText11( color: MyColors.grey67Color, ), "${getDayHoursTypeDetailsList[index].sHORTAGEHRS}".toText22(color: MyColors.backgroundBlackColor, isBold: true), ], ).expanded, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.earlyOut.tr().toText11( color: MyColors.grey67Color, ), "${getDayHoursTypeDetailsList[index].eARLYOUTHRS}".toText22(color: Colors.black, isBold: true), ], ).expanded, ], ), ], ), ), ], ), ], ), ), ), ), ], ); }, ); }, ):null; } } List _getDataSource() { List meetings = []; 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 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; }