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/config/routes.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/month_picker_dialog.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; @override void initState() { super.initState(); formattedDate = date; callTimeCardAndHourDetails(date.day, searchMonth, searchYear); // setState(() {}); } 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 _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, }; //if(getTimeCardSummaryList ==null) // callTimeCardAndHourDetails(date.day, searchMonth, searchYear); return Scaffold( appBar: AppBarWidget( context, title: "View Attendance", ), backgroundColor: MyColors.backgroundColor, body: SingleChildScrollView( child: Column(children: [ Container( width: double.infinity, margin: EdgeInsets.only( top: 28, left: 18, right: 18, ), padding: EdgeInsets.only(left: 16, right: 16, top: 16, bottom: 16), // height: 120, decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 5, blurRadius: 26, offset: Offset(0, 3), ), ], color: Colors.white, borderRadius: BorderRadius.circular(10.0), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ "Today's Attendance".toText20(color: MyColors.blackColor), SizedBox( height: 10, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Column( children: [ LocaleKeys.checkIn.tr().toText12(isBold: true, color: MyColors.greenColor), "${(attendanceTracking?.pSwipeIn)?? "- - : - -"}".toText16(isBold: true, color: MyColors.grey57Color), ], ), Column( children: [ LocaleKeys.checkOut.tr().toText12(isBold: true, color: MyColors.redColor), "${(attendanceTracking?.pSwipeOut)?? "- - : - -"}".toText16(isBold: true, color: MyColors.grey57Color), ], ), Column( children: [ LocaleKeys.lateIn.tr().toText12(isBold: true, color: MyColors.blackColor), "${(attendanceTracking?.pLateInHours)?? "- - : - -"}".toText16(isBold: true, color: MyColors.grey57Color), ], ), ], ) ], ), ), Container( width: double.infinity, margin: EdgeInsets.only( top: 18, left: 18, right: 18, bottom: 28, ), padding: EdgeInsets.only(left: 16, right: 16, top: 16, bottom: 16), decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 5, blurRadius: 26, offset: Offset(0, 3), ), ], color: Colors.white, borderRadius: BorderRadius.circular(10.0), ), child: Column( children: [ //20.height, Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ "${DateFormat("MMMM-yyyy").format(formattedDate)}".toText16(color: MyColors.blackColor), const Icon(Icons.keyboard_arrow_down_rounded, color: MyColors.blackColor), ], ).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); } }); }) ], ), 18.height, AspectRatio(aspectRatio: 333 / 270, child: calendarWidget()), 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), ], ), 30.height, Row( children: [ Container( height: 8, width: 8, decoration: BoxDecoration( color: MyColors.lightGreenColor, borderRadius: BorderRadius.circular(100), ), ), Container( margin: const EdgeInsets.only(left: 5, right: 5), child: "${LocaleKeys.present.tr()} ${getTimeCardSummaryList?.aTTENDEDDAYS != null ? 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), ), ), Container( margin: const EdgeInsets.only(left: 5, right: 5), child: "${LocaleKeys.absent.tr()} ${getTimeCardSummaryList?.aBSENTDAYS != null ? getTimeCardSummaryList?.aBSENTDAYS : 0 }".toText16( isBold: true, color: MyColors.backgroundBlackColor, ), ) ], ), ], ), SizedBox( width: 20, ), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 170, 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: 21, right: 21, bottom: 21), ], ), ], ), ), ]), ), ); } 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, //navigationDirection: MonthNavigationDirection.vertical, 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.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: 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(); } }, ); } List _getDataSource() { final 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) { 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; }