You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
566 lines
20 KiB
Dart
566 lines
20 KiB
Dart
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<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);
|
|
// 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<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,
|
|
};
|
|
//if(getTimeCardSummaryList ==null)
|
|
// callTimeCardAndHourDetails(date.day, searchMonth, searchYear);
|
|
return Scaffold(
|
|
appBar: AppBarWidget(
|
|
context,
|
|
title: LocaleKeys.viewAttendance.tr(),
|
|
),
|
|
backgroundColor: MyColors.backgroundColor,
|
|
body: SingleChildScrollView(
|
|
child: Column(children: [
|
|
Container(
|
|
width: double.infinity,
|
|
margin: EdgeInsets.only(
|
|
top: 21,
|
|
left: 21,
|
|
right: 21,
|
|
),
|
|
padding: EdgeInsets.only(left: 14, right: 14, top: 15, bottom: 15),
|
|
// 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: [
|
|
LocaleKeys.todayAttendance.tr().toText16(isBold: true, color: MyColors.darkColor),
|
|
SizedBox(
|
|
height: 10,
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
children: [
|
|
LocaleKeys.checkIn.tr().toText10(isBold: true, color: MyColors.green69Color),
|
|
"${(attendanceTracking?.pSwipeIn)?? "- - : - -"}".toText14(isBold: true, color: MyColors.grey57Color),
|
|
],
|
|
),
|
|
Column(
|
|
children: [
|
|
LocaleKeys.checkOut.tr().toText10(isBold: true, color: MyColors.redA3Color),
|
|
"${(attendanceTracking?.pSwipeOut)?? "- - : - -"}".toText14(isBold: true, color: MyColors.grey57Color),
|
|
],
|
|
),
|
|
Column(
|
|
children: [
|
|
LocaleKeys.lateIn.tr().toText10(isBold: true, color: MyColors.darkGreyColor),
|
|
"${(attendanceTracking?.pLateInHours)?? "- - : - -"}".toText14(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.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);
|
|
// _calendarController.selectedDate = formattedDate;
|
|
callTimeCardAndHourDetails(selectedDate.day, searchMonth, searchYear);
|
|
}
|
|
});
|
|
})
|
|
],
|
|
),
|
|
18.height,
|
|
AspectRatio(aspectRatio: 333 / 270, child: calendarWidget()),
|
|
Row(
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
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: <Widget>[
|
|
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),
|
|
),
|
|
),
|
|
);
|
|
} else {
|
|
return const SizedBox();
|
|
}
|
|
},
|
|
);
|
|
}
|
|
|
|
|
|
List<Meeting> _getDataSource() {
|
|
final 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) {
|
|
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;
|
|
}
|