diff --git a/lib/ui/attendance/monthly_attendance_screen.dart b/lib/ui/attendance/monthly_attendance_screen.dart
index 9c4ffd7..c45dc0b 100644
--- a/lib/ui/attendance/monthly_attendance_screen.dart
+++ b/lib/ui/attendance/monthly_attendance_screen.dart
@@ -14,6 +14,7 @@ import 'package:mohem_flutter_app/generated/locale_keys.g.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/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';
@@ -28,8 +29,6 @@ class MonthlyAttendanceScreen extends StatefulWidget {
   }
 }
 
-// todo '@fatima' use extension methods for widgets
-
 class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
   bool isPresent = false;
   bool isAbsent = false;
@@ -86,55 +85,50 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
   @override
   Widget build(BuildContext context) {
     Map<String, double> dataMap = {
-      "Present": getTimeCardSummaryList?.aTTENDEDDAYS != null ? getTimeCardSummaryList!.aTTENDEDDAYS!.toDouble() : 0,
-      "Absent": getTimeCardSummaryList?.aBSENTDAYS != null ? getTimeCardSummaryList!.aBSENTDAYS!.toDouble() : 0,
+      "Present": getTimeCardSummaryList?.aTTENDEDDAYS?.toDouble() ?? 75,
+      "Absent": getTimeCardSummaryList?.aBSENTDAYS?.toDouble() ?? 25,
     };
     return Scaffold(
-      backgroundColor: MyColors.backgroundColor,
+      backgroundColor: Colors.white,
+      appBar: AppBarWidget(
+        context,
+        // title: LocaleKeys.mowadhafhiRequest.tr(),
+        title: "",
+        //  showHomeButton: true,
+      ),
       body: ListView(
         scrollDirection: Axis.vertical,
         children: [
           Column(
             children: [
-              Container(
-                color: Colors.white,
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    IconButton(
-                      icon: const Icon(
-                        Icons.arrow_back_ios,
-                        color: MyColors.backgroundBlackColor,
-                      ),
-                      onPressed: () => Navigator.pop(context),
-                    ),
-                    20.height,
-                    LocaleKeys.attendance.tr().toText24(isBold: true, color: MyColors.grey3AColor),
-                    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);
-                          callTimeCardAndHourDetails(selectedDate.day, searchMonth, searchYear);
-                        }
-                      });
-                    }),
-                    18.height,
-                    AspectRatio(aspectRatio: 304 / 244, child: calendarWidget()),
-                  ],
-                ).paddingOnly(left: 21, right: 21, top:40),
-              ),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  LocaleKeys.attendance.tr().toText24(isBold: true, color: MyColors.grey3AColor),
+                  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);
+                        callTimeCardAndHourDetails(selectedDate.day, searchMonth, searchYear);
+                      }
+                    });
+                  }),
+                  18.height,
+                  AspectRatio(aspectRatio: 304 / 244, child: calendarWidget()),
+                ],
+              ).paddingOnly(left: 21, right: 21, top: 21),
               Row(
                 mainAxisAlignment: MainAxisAlignment.start,
                 children: [
@@ -148,92 +142,102 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
                 ],
               ).paddingOnly(left: 21, right: 21),
               38.height,
-              Container(
-                decoration: BoxDecoration(
-                  color: Colors.white,
-                  borderRadius: const BorderRadius.only(
-                    topLeft: Radius.circular(25.0),
-                    topRight: Radius.circular(25.0),
-                  ),
-                  boxShadow: [
-                    BoxShadow(
-                      offset: const Offset(0, 1),
-                      blurRadius: 26,
-                      color: Color(0xff000014).withOpacity(0.1),
+              AspectRatio(
+                aspectRatio: 375 / 226,
+                child: Container(
+                  padding: const EdgeInsets.only(top: 28, bottom: 28, left: 21, right: 21),
+                  decoration: BoxDecoration(
+                    color: Colors.white,
+                    borderRadius: const BorderRadius.only(
+                      topLeft: Radius.circular(25.0),
+                      topRight: Radius.circular(25.0),
                     ),
-                  ],
-                ),
-                child: 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),
+                    boxShadow: [
+                      BoxShadow(
+                        offset: const Offset(0, 1),
+                        blurRadius: 26,
+                        color: MyColors.darkColor.withOpacity(0.1),
+                      ),
+                    ],
+                  ),
+                  child: 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 != 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),
+                              7.width,
+                              "${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),
+                                ),
                               ),
-                            ),
-                            7.width,
-                            "${LocaleKeys.absent.tr()} ${getTimeCardSummaryList?.aBSENTDAYS != null ? 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(
+                              7.width,
+                              "${LocaleKeys.absent.tr()} ${getTimeCardSummaryList?.aBSENTDAYS != null ? getTimeCardSummaryList?.aBSENTDAYS : 0}".toText16(
+                                isBold: true,
+                                color: MyColors.backgroundBlackColor,
+                              )
+                            ],
+                          ),
+                        ],
+                      ).expanded,
+                      //44.width,
+                      SizedBox(
+                        height: 170,
+                        width: 170,
+                        child: PieChart(
+                          dataMap: dataMap,
+                          animationDuration: const Duration(milliseconds: 800),
+                          chartLegendSpacing: 0,
+                          chartRadius: MediaQuery.of(context).size.width / 5.2,
+                          colorList: _colorList,
+                          initialAngleInDegree: 270,
+                          chartType: ChartType.ring,
+                          emptyColor: MyColors.greyACColor,
+                          ringStrokeWidth: 80,
+                          legendOptions: const LegendOptions(
+                            showLegendsInRow: false,
+                            showLegends: false,
+                          ),
+                          chartValuesOptions: const ChartValuesOptions(
                             showChartValueBackground: false,
                             showChartValues: true,
                             showChartValuesInPercentage: true,
-                            showChartValuesOutside: false,
-                            decimalPlaces: 1,
+                            showChartValuesOutside: true,
+                            decimalPlaces: 0,
                             chartValueStyle: TextStyle(
                               fontWeight: FontWeight.bold,
                               fontSize: 16,
+                              letterSpacing: -0.64,
                               color: MyColors.white,
-                            )),
+                            ),
+                          ),
+                        ),
                       ),
-                    ).expanded,
-                  ],
-                ).paddingOnly(left: 21, right: 21, top: 29, bottom: 28),
+                    ],
+                  ),
+                ),
               ),
             ],
           ),
@@ -298,85 +302,72 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
         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.isNotEmpty) {
+            bool isDayIsOff = getDayHoursTypeDetailsList[val - 1].aTTENDEDFLAG == 'N' && getDayHoursTypeDetailsList[val - 1].dAYTYPE == 'OFF';
+            bool isDayIsPresent = getDayHoursTypeDetailsList[val - 1].aTTENDEDFLAG == 'Y';
+            bool isDayIsAbsent = getDayHoursTypeDetailsList[val - 1].aTTENDEDFLAG == 'N' && getDayHoursTypeDetailsList[val - 1].aBSENTFLAG == 'Y';
 
-            {
-              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),
-                      ),
-                    ],
+            if (isDayIsOff) {
+              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 (isDayIsPresent) {
+              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],
                   ),
-                  alignment: Alignment.center,
-                  child: Text(
-                    "$val",
-                    style: const TextStyle(
-                      fontSize: 12,
-                      fontWeight: FontWeight.w500,
-                      color: MyColors.white,
+                  shape: BoxShape.circle,
+                  boxShadow: [
+                    BoxShadow(
+                      offset: const Offset(0, 2),
+                      blurRadius: 26,
+                      color: MyColors.blackColor.withOpacity(0.100),
                     ),
-                  ),
-                );
-              }
-              //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,
+                  ],
+                ),
+                alignment: Alignment.center,
+                child: Text(
+                  "$val",
+                  style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500, color: MyColors.white),
+                ),
+              );
+            }
+            //check day is Absent
+            else if (isDayIsAbsent) {
+              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(
@@ -395,7 +386,7 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
               "$val",
               style: const TextStyle(
                 fontSize: 13,
-                fontWeight: FontWeight.w600,
+                fontWeight: FontWeight.w500,
                 color: Color(0xff1F2428),
               ),
             ),
@@ -491,8 +482,7 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
                             children: [
                               Container(
                                 width: double.infinity,
-                                decoration: const BoxDecoration(
-                                 borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)), color: Colors.white),
+                                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: [
@@ -501,16 +491,20 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
                                         Column(
                                           crossAxisAlignment: CrossAxisAlignment.start,
                                           children: [
-                                            LocaleKeys.actualCheckIn.tr().toText11(color: MyColors.grey67Color,),
+                                            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,
+                                          crossAxisAlignment: CrossAxisAlignment.start,
                                           children: [
-                                            LocaleKeys.actualCheckOut.tr().toText11(color: MyColors.grey67Color,),
+                                            LocaleKeys.actualCheckOut.tr().toText11(
+                                                  color: MyColors.grey67Color,
+                                                ),
                                             "${getScheduleShiftsDetailsList!.sHTACTUALENDTIME}" != ""
                                                 ? "${getScheduleShiftsDetailsList!.sHTACTUALENDTIME}".toText22(color: Colors.black, isBold: true)
                                                 : "__".toText22(color: Colors.black, isBold: true),
@@ -530,7 +524,9 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
                                         Column(
                                           crossAxisAlignment: CrossAxisAlignment.start,
                                           children: [
-                                            LocaleKeys.approvedCheckIn.tr().toText11(color: MyColors.grey67Color,),
+                                            LocaleKeys.approvedCheckIn.tr().toText11(
+                                                  color: MyColors.grey67Color,
+                                                ),
                                             "${getScheduleShiftsDetailsList!.aPPROVEDSTARTTIME}" != ""
                                                 ? "${getScheduleShiftsDetailsList!.aPPROVEDSTARTTIME}".toText22(color: MyColors.greenColor, isBold: true)
                                                 : "__".toText22(color: MyColors.greenColor, isBold: true),
@@ -539,7 +535,9 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
                                         Column(
                                           crossAxisAlignment: CrossAxisAlignment.start,
                                           children: [
-                                            LocaleKeys.approvedCheckOut.tr().toText11(color: MyColors.grey67Color,),
+                                            LocaleKeys.approvedCheckOut.tr().toText11(
+                                                  color: MyColors.grey67Color,
+                                                ),
                                             "${getScheduleShiftsDetailsList!.aPPROVEDENDTIME}" != ""
                                                 ? "${getScheduleShiftsDetailsList!.aPPROVEDENDTIME}".toText22(color: MyColors.greenColor, isBold: true)
                                                 : "__".toText22(color: MyColors.greenColor, isBold: true),
@@ -559,15 +557,19 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
                                         Column(
                                           crossAxisAlignment: CrossAxisAlignment.start,
                                           children: [
-                                            LocaleKeys.lateIn.tr().toText11(color: MyColors.grey67Color,),
+                                            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),
+                                            LocaleKeys.excess.tr().toText11(
+                                                  color: MyColors.grey67Color,
+                                                ),
+                                            "${getDayHoursTypeDetailsList[index].eXCESSHRS}".toText22(color: MyColors.backgroundBlackColor, isBold: true),
                                           ],
                                         ).expanded,
                                       ],
@@ -584,14 +586,18 @@ class _MonthlyAttendanceScreenState extends State<MonthlyAttendanceScreen> {
                                         Column(
                                           crossAxisAlignment: CrossAxisAlignment.start,
                                           children: [
-                                            LocaleKeys.shortage.tr().toText11(color: MyColors.grey67Color,),
+                                            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,),
+                                            LocaleKeys.earlyOut.tr().toText11(
+                                                  color: MyColors.grey67Color,
+                                                ),
                                             "${getDayHoursTypeDetailsList[index].eARLYOUTHRS}".toText22(color: Colors.black, isBold: true),
                                           ],
                                         ).expanded,
diff --git a/lib/ui/my_team/view_attendance.dart b/lib/ui/my_team/view_attendance.dart
index d0f9f14..7d8a6e0 100644
--- a/lib/ui/my_team/view_attendance.dart
+++ b/lib/ui/my_team/view_attendance.dart
@@ -35,8 +35,8 @@ class _ViewAttendanceState extends State<ViewAttendance> {
   int searchYear = DateTime.now().year;
   int? pRTPID;
 
-  String searchEmpEmail ="";
-  String searchEmpName ="";
+  String searchEmpEmail = "";
+  String searchEmpName = "";
   String searchEmpNo = "";
   String? empId;
   List<GetEmployeeSubordinatesList> getEmployeeSubordinatesList = [];
@@ -52,12 +52,11 @@ class _ViewAttendanceState extends State<ViewAttendance> {
     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);
+      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);
@@ -69,8 +68,6 @@ class _ViewAttendanceState extends State<ViewAttendance> {
     }
   }
 
-
-
   final CalendarController _calendarController = CalendarController();
   final List<Color> _colorList = [Color(0xff2AB2AB), Color(0xff202529)];
 
@@ -90,157 +87,165 @@ class _ViewAttendanceState extends State<ViewAttendance> {
       backgroundColor: MyColors.backgroundColor,
       body: ListView(
         children: [
-        Container(
-          margin: EdgeInsets.all(21),
-          child: Column(
+          Container(
+            margin: EdgeInsets.all(21),
+            child: Column(
               children: [
-              Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                LocaleKeys.todayAttendance.tr().toText16(color: MyColors.darkTextColor),
-               7.height,
-                Row(
+                Column(
                   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,
+                    LocaleKeys.todayAttendance.tr().toText16(color: MyColors.darkTextColor),
+                    7.height,
                     Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      // mainAxisAlignment: MainAxisAlignment.start,
                       children: [
-                        Container(height: 30, width: 1, color: const Color(0xffF0F0F0)),
-                        11.width,
                         Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            LocaleKeys.checkIn.tr().toText10(color: MyColors.green69Color),
+                            "${(attendanceTracking?.pSwipeIn) ?? "- - : - -"}".toText14(color: MyColors.grey57Color),
+                          ],
+                        ).expanded,
+                        Row(
                           children: [
-                            LocaleKeys.checkOut.tr().toText10(color: MyColors.redA3Color),
-                            "${(attendanceTracking?.pSwipeOut)?? "- - : - -"}".toText14( color: MyColors.grey57Color),
+                            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,
                       ],
-                    ).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: [
-                        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),
+                          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,
                       ],
-                    ).expanded,
+                    ),
                   ],
-                )
+                ).paddingOnly(top: 17, left: 14, right: 14, bottom: 35).objectContainerView(disablePadding: true, radius: 10),
               ],
-            ).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 != 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),
-                                ),
-                              ),
-                              7.width,
-                              "${LocaleKeys.absent.tr()} ${getTimeCardSummaryList?.aBSENTDAYS != null ? 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,),
-          ]
-    ),
-        ),
-    ]
+            ),
+          ),
+        ],
       ),
     );
   }
@@ -383,7 +388,6 @@ class _ViewAttendanceState extends State<ViewAttendance> {
     );
   }
 
-
   List<Meeting> _getDataSource() {
     List<Meeting> meetings = <Meeting>[];
     return meetings;