MM-280

MM-160
MM-202

Mohem/src/app/hmg-common/services/common/common.service.ts

@@ -116,58 +116,58 @@ export class CommonService {
   public getMonthName(value: number): string {
     switch (value) {
         case 1:
-            return "January";
+            return 'January';
         case 2:
-            return "February";
+            return 'February';
         case 3:
-            return "March";
+            return 'March';
         case 4:
-            return "April";
+            return 'April';
         case 5:
-            return "May";
+            return 'May';
         case 6:
-            return "June";
+            return 'June';
         case 7:
-            return "July";
+            return 'July';
         case 8:
-            return "August";
+            return 'August';
         case 9:
-            return "September";
+            return 'September';
         case 10:
-            return "October";
+            return 'October';
         case 11:
-            return "November";
+            return 'November';
         case 12:
-            return "December";
+            return 'December';
     }
 }
 
 public getMonthNameAr(value: number): string {
     switch (value) {
         case 1:
-            return "يناير";
+            return 'يناير';
         case 2:
-            return " فبراير";
+            return ' فبراير';
         case 3:
-            return "مارس";
+            return 'مارس';
         case 4:
-            return "أبريل";
+            return 'أبريل';
         case 5:
-            return "مايو";
+            return 'مايو';
         case 6:
-            return "يونيو";
+            return 'يونيو';
         case 7:
-            return "يوليو";
+            return 'يوليو';
         case 8:
-            return "أغسطس";
+            return 'أغسطس';
         case 9:
-            return "سبتمبر";
+            return 'سبتمبر';
         case 10:
-            return " اكتوبر";
+            return ' اكتوبر';
         case 11:
-            return " نوفمبر";
+            return ' نوفمبر';
         case 12:
-            return "ديسمبر";
+            return 'ديسمبر';
     }
 }
 
@@ -482,8 +482,8 @@ public getMonthNameAr(value: number): string {
       buttons: [
         {
           text: cancelLabel,
-          role: "cancel",
-          cssClass: "checkOutCancelBtn",
+          role: 'cancel',
+          cssClass: 'checkOutCancelBtn',
           handler: () => {
             if (onCancel) {
               onCancel();
@@ -495,7 +495,7 @@ public getMonthNameAr(value: number): string {
           text: acceptLabel,
           role: 'Confirm',
 
-          cssClass: "checkOutOkBtn",
+          cssClass: 'checkOutOkBtn',
 
           handler: () => {
 
@@ -522,13 +522,13 @@ public getMonthNameAr(value: number): string {
   ) {
     this.clearAllAlerts();
     const alert = await this.alertControllerIonic.create({
-      header: this.ts.trPK("general", "confirm"),
+      header: this.ts.trPK('general', 'confirm'),
       message: message,
       buttons: [
         {
           text: cancelLabel,
-          role: "cancel",
-          cssClass: "checkOutCancelBtn",
+          role: 'cancel',
+          cssClass: 'checkOutCancelBtn',
           handler: () => {
             if (onCancel) {
               onCancel();
@@ -538,9 +538,9 @@ public getMonthNameAr(value: number): string {
         },
         {
           text: acceptLabel,
-          role: "Confirm",
+          role: 'Confirm',
 
-          cssClass: "checkOutOkBtn",
+          cssClass: 'checkOutOkBtn',
 
           handler: () => {
 
@@ -1074,7 +1074,7 @@ public getMonthNameAr(value: number): string {
       open calls
       */
   public   openAttenTrackingpage(){
-    this.nav.navigateForward(["/attendance-tracking/home"]);
+    this.nav.navigateForward(['/attendance-tracking/home']);
 
   }
   public openEitListPage() {
@@ -1099,7 +1099,7 @@ public getMonthNameAr(value: number): string {
     this.nav.navigateForward(['/profile/home']);
   }
   public openEditProfile() {
-    this.nav.navigateForward(["/profile/editprofile"]);
+    this.nav.navigateForward(['/profile/editprofile']);
   }
   public openAccuralPage() {
     this.nav.navigateForward(['/accrual-balances/home']);
@@ -1173,7 +1173,7 @@ public getMonthNameAr(value: number): string {
   }
 
   public   openMOItemHistoryPage(){
-    this.nav.navigateForward(["/notification/item-history-MO"]);
+    this.nav.navigateForward(['/notification/item-history-MO']);
 
   }
   public openQutationAnalysisPage() {
@@ -1199,7 +1199,7 @@ public getMonthNameAr(value: number): string {
     this.nav.navigateForward(['/payslip/home']);
   }
   public openTimeCardPage() {
-    this.nav.navigateForward(["/time-card/time-card-details"]);
+    this.nav.navigateForward(['/time-card/time-card-details']);
   }
   public openEarningsPage() {
     this.nav.navigateForward(['/payslip/Earnings']);
@@ -1211,13 +1211,13 @@ public getMonthNameAr(value: number): string {
     this.nav.navigateForward(['/authentication/confirmLogin']);
   }
   public openEditprofile() {
-    this.nav.navigateForward(["/profile/editProfile"]);
+    this.nav.navigateForward(['/profile/editProfile']);
   }
   public openPerformanceevaluation() {
-    this.nav.navigateForward(["/profile/performanceevaluation"]);
+    this.nav.navigateForward(['/profile/performanceevaluation']);
   }
   public eitUpdate() {
-    this.nav.navigateForward(["/eit/eit-update-list"]);
+    this.nav.navigateForward(['/eit/eit-update-list']);
   }
 
 

Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html

@@ -4,6 +4,7 @@
     [calendarMode]="calendar.mode"
     [currentDate]="currentDateParent"
     [lockSwipes]="true"
+    [dateFormatter]="calendar.dateFormatter"
     (onTimeSelected)="onDayClicked($event)">
 </calendar>
 

Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts

@@ -4,12 +4,10 @@ import { SharedDataService } from '../../services/shared-data-service/shared-dat
 import { ModalController } from '@ionic/angular';
 import { DateInfoModalComponent } from './date-info-modal/date-info-modal.component';
 import { MenuResponse } from '../../services/menu/models/menu-response';
-import * as moment from 'moment';
 import { CommonService } from '../../services/common/common.service';
-import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
 import { TimeCardService } from 'src/app/time-card/service/time-card.service';
 import { GetShiftDetailRequest } from 'src/app/time-card/service/models/get-shift-detail.request';
-import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-request';
+import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
 
 @Component({
   selector: 'app-circle-calendar',
@@ -41,7 +39,13 @@ export class CircleCalendarComponent implements OnInit {
   eventsdata: any = [];
 
   public calendar = {
-    mode: 'month'
+    mode: 'month',
+    dateFormatter: {
+      formatMonthViewDayHeader: (date: Date) => {
+        return this.getHeaderDay(date);
+      }
+
+    }
   };
 
   public currentAvailableAppoDate: any;
@@ -51,6 +55,7 @@ export class CircleCalendarComponent implements OnInit {
   public selectedDate: string;
   public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
   public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  public weekDaysAr = ['الاحد', 'الاثنين', 'الثلاثاء', 'الاربعاء', 'الخميس', 'الجمعه', 'السبت'];
   public lockSwipeToPrev: any = true;
   public currentDate: any;
   public selectedDateObject: any;
@@ -61,15 +66,18 @@ export class CircleCalendarComponent implements OnInit {
   arrFutrueDays: any;
   eventsdateFutrue: any;
   detailData: any;
+  direction: string;
   constructor(
     public sharedData: SharedDataService,
     public mod: ModalController,
     public common: CommonService,
-    public timeCardService: TimeCardService) { }
+    public timeCardService: TimeCardService,
+    public ts: TranslatorService) { }
   @ViewChild('slider') slides: ElementRef;
 
   ngOnInit() {
     // this.reRenderCalendar();
+    this.direction = TranslatorService.getCurrentLanguageName();
   }
 
   // tslint:disable-next-line: use-life-cycle-interface
@@ -79,6 +87,14 @@ export class CircleCalendarComponent implements OnInit {
     }, 1000);
   }
 
+  getHeaderDay(date: any) {
+    if (this.direction === 'en') {
+      return this.weekDaysEnSort[date.getDay()];
+    } else {
+      return this.weekDaysAr[date.getDay()];
+    }
+  }
+
   reRenderCalendar() {
     this.renderDate(this.dayHoursTypeDetailsList);
   }

Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html

@@ -6,7 +6,7 @@
               <ion-col size="8">
                 <div style="width: 100%;">
                     <div class="result-graph">
-                      <div class="result-text-container">
+                      <div class="result-text-container" [ngStyle]="direction === 'rtl' ? {'left': '65%'} : {}">
                           <h2 class="percentage">{{percentage}}</h2>
                           <span>{{ts.trPK('attendance','completed')}}<br><br><br><br></span>
                       </div>
@@ -80,7 +80,7 @@
                 </ion-row>
               </ion-col>
 
-              <ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
+              <ion-col [size]="6" style="border-bottom: none;" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
                 <ion-row class="amountlabel">  <p >{{shortage}}</p> </ion-row>
                 <ion-row class="rowlabel"> 
                   <p>{{ts.trPK('attendance-tracking','shortage')}}</p>

Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss

@@ -71,8 +71,7 @@
     display: block;
     height: 127px;
     width: 270px;
-    /* margin-left: -61px; */
-    margin-right: -18px;
+    margin-right: -70px;
 }
 .amountlabel{
     color: black !important;
@@ -210,15 +209,9 @@ height: 360px !important;
     .col{
         border-bottom: 1px solid rgb(204, 204, 204);
         border-right: 1px solid rgb(204, 204, 204);
-        flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
-        width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
-        max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
     }
     .col-ar{
         border-bottom: 1px solid rgb(204, 204, 204);
         border-left: 1px solid rgb(204, 204, 204);
-        flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
-        width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
-        max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
     }
     

Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { ModalController, NavParams, IonInfiniteScroll } from '@ionic/angular';
 import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
 import { IonSlides } from '@ionic/angular';
+import { CommonService } from 'src/app/hmg-common/services/common/common.service';
 
 @Component({
   selector: 'app-date-info-modal',
@@ -31,11 +32,11 @@ export class DateInfoModalComponent implements OnInit {
   percentage: any;
   data: any;
   scheduleDate: any;
-  tests: any;
   year: any;
   nameMonth: any;
   nameDay: any;
   public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  public weekDaysAr = ['الاحد', 'الاثنين', 'الثلاثاء', 'الاربعاء', 'الخميس', 'الجمعه', 'السبت'];
   public direction: string;
   public options = {
     cutoutPercentage: 85,
@@ -51,7 +52,8 @@ export class DateInfoModalComponent implements OnInit {
   constructor(
     public modalController: ModalController,
     public navParams: NavParams,
-    public ts: TranslatorService
+    public ts: TranslatorService,
+    public common: CommonService
     ) {
       this.direction = TranslatorService.getCurrentDirection();
      }
@@ -73,16 +75,15 @@ export class DateInfoModalComponent implements OnInit {
     this.endDate = shiftDetails.SHT_ACTUAL_END_TIME;
     this.percentage = shiftDetails.PERCENTAGE;
     this.percChart = this.percentage.substring(0, this.percentage.indexOf('%'));
-    const test = this.scheduleDate;
-    const splitdate = test.split(' ');
+    // const test = this.scheduleDate;
+    const splitdate = this.scheduleDate.split(' ');
     const date = splitdate[0];
-    const test1 = date.split('/');
-    this.day = test1[1];
-    this.year = test1[2];
-    this.month = test1[0];
-
+    const localDate = date.split('/');
+    this.day = localDate[1];
+    this.year = localDate[2];
     // tslint:disable-next-line: radix
-    this.nameMonth = this.getMonthName(parseInt(this.month));
+    this.month = parseInt(localDate[0]) + 1;
+    this.nameMonth = this.direction === 'ltr' ? this.common.getMonthName(this.month) : this.common.getMonthNameAr(this.month);
     this.nameDay = this.getHeaderDay(new Date(date));
     const d = new Date(date);
     this.data = {
@@ -105,36 +106,11 @@ slideChanged(ev) {
   });
 }
 
-  public getMonthName(value: number): string {
-    switch (value) {
-      case 1:
-        return 'Jan';
-      case 2:
-        return 'Feb';
-      case 3:
-        return 'Mar';
-      case 4:
-        return 'Apr';
-      case 5:
-        return 'May';
-      case 6:
-        return 'Jun';
-      case 7:
-        return 'Jul';
-      case 8:
-        return 'Aug';
-      case 9:
-        return 'Sep';
-      case 10:
-        return 'Oct';
-      case 11:
-        return 'Nov';
-      case 12:
-        return 'Dec';
-    }
-  }
-
   getHeaderDay(date: any) {
-    return this.weekDaysEn[date.getDay()];
+    if (this.direction === 'ltr') {
+      return this.weekDaysEn[date.getDay()];
+    } else {
+      return this.weekDaysAr[date.getDay()];
+    }
   }
 }

Mohem/src/app/my-team/details/details.component.html

@@ -102,10 +102,9 @@
 
       <div class="header">
         <div>
-          <ion-row>
-
+          <ion-row *ngIf="direction == 'en'">
             <ion-col [size]="2" style="text-align: left;">
-              <ion-icon [ngClass]="direction == 'en'? 'activeArrow':'activeArrow-ar'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
+              <ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
             </ion-col>
             <ion-col [size]="8" style="text-align: center;">
                 <span class="month-year-span">{{month}} {{year}}</span>
@@ -114,12 +113,24 @@
               <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
             </ion-col>
           </ion-row>
+
+          <ion-row *ngIf="direction == 'ar'">
+            <ion-col [size]="2" style="text-align: right;">
+              <ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon>
+            </ion-col>
+            <ion-col [size]="8" style="text-align: center;">
+                <span class="month-year-span">{{year}} {{month}}</span>
+            </ion-col>
+            <ion-col [size]="2" style="text-align: left;">
+              <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
+            </ion-col>
+          </ion-row>
         </div>
       </div>
       
       <div class="result-graph">
-        <div class="request-heading">
-          <span>{{ts.trPK('myTeam','attendance-statistics')}}</span>
+        <div>
+          <span [ngClass]="direction == 'ltr' ? 'request-heading':'request-heading-ar'">{{ts.trPK('myTeam','attendance-statistics')}}</span>
         </div>
         <div style="position: relative;">
           <div class="label-container">
@@ -172,7 +183,7 @@
         </ion-col>
       </ion-row>
 
-      <div *ngIf="showData" class="calendar-container">
+      <div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
         <span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
         <app-circle-calendar
           [currentDateParent]="currentDate"
@@ -231,7 +242,7 @@
 
     <div class="employee-information-indetail" *ngIf="activeSegment === 'About'">
       <ion-row>
-        <ion-col [size]="6" style="border-right: 1px solid #ccc;">
+        <ion-col [size]="6" [ngStyle]="direction == 'en' ? {'border-right': '1px solid #ccc'} : {'border-left': '1px solid #ccc'}">
             <h2>{{ts.trPK('userProfile','empNo')}}</h2>
             <p>{{employee.EMPLOYEE_NUMBER}}</p>
         </ion-col>
@@ -240,7 +251,7 @@
           <p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
         </ion-col>
         <ion-col [size]="12">
-          <h2>{{ts.trPK('userProfile','Address')}}</h2>
+          <h2>{{ts.trPK('userProfile','address')}}</h2>
           <p>{{employee.LOCATION_NAME}}</p>
         </ion-col>
         <ion-col [size]="12">

Mohem/src/app/my-team/details/details.component.scss

@@ -112,6 +112,7 @@ ion-title{
         font-size: 13px;
         font-family: WorkSans-Bold;
         margin: 0;
+        font-weight: bold;
     }
     p{
         font-size: 13px;
@@ -252,15 +253,22 @@ ion-title{
     z-index: 1;
     margin-bottom: 10px;
 }
+
 .request-heading {
-    span {
-        text-align: left;
-        display: block;
-        padding-top: 8px;
-        margin-bottom: 10px;
-        margin-left: 10px;
-    }
+    text-align: left;
+    display: block;
+    padding-top: 8px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+}
+.request-heading-ar{
+    text-align: right;
+    display: block;
+    padding-top: 8px;
+    margin-bottom: 10px;
+    margin-right: 12px;
 }
+
 .result-text-container {
     padding: 0;
     margin: 0;
@@ -347,6 +355,7 @@ ion-title{
     height: 321px !important;
     border: 1px solid #d6d4d4 !important;
 }
+
 .attendance-information{
     background: white;
     border-radius: 20px;
@@ -354,12 +363,12 @@ ion-title{
     h2{
         padding: 0;
         margin: 0;
-        font-size: 22px;
+        font-size: 18px;
     }
     span{
         font-size: 11px;
     }
-}
+  }
 
 .month-year-span{
     font-size: 20px;
@@ -411,6 +420,7 @@ ion-title{
     }
     
 }
+
 .calendar-container{
     background: white;
     margin-bottom: 100px;
@@ -423,7 +433,20 @@ ion-title{
         margin-bottom: 10px;
         margin-left: 10px;
     }
-}
+  }
+  .calendar-container-ar{
+    background: white;
+    margin-bottom: 100px;
+    margin-top: 20px;
+    border-radius: 20px;
+    span{
+      text-align: right;
+      display: block;
+      padding-top: 8px;
+      margin-bottom: 6px;
+      margin-right: 12px;
+    }
+  }
 
   
 

Mohem/src/app/my-team/details/details.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { Location } from '@angular/common';
 import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
 import { CommonService } from 'src/app/hmg-common/services/common/common.service';
 import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
@@ -57,7 +56,7 @@ export class DetailsComponent implements OnInit {
   public monthTitle: string = moment().format('MMMM');
   public yearTitle: string;
   public activeMonth: any;
-  public currentMonthName = this.getMonthName(new Date().getMonth() + 1);
+  public currentMonthName = '';
 
   public showData = false;
   public currentYear = new Date().getFullYear();
@@ -83,6 +82,9 @@ export class DetailsComponent implements OnInit {
   public searchEmail = '';
   public showEmailInput = false;
   public showUserNameOrNameInput = true;
+  // tslint:disable-next-line: max-line-length
+  public monthsNameArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  public monthIndex = new Date().getMonth() + 1;
 
 
   constructor(
@@ -92,7 +94,6 @@ export class DetailsComponent implements OnInit {
     public myTeamService: MyTeamService,
     public ts: TranslatorService,
     public modalController: ModalController,
-    private location: Location,
     public authService: AuthenticationService,
     public dashboardService: DashboredService,
   ) {
@@ -103,6 +104,8 @@ export class DetailsComponent implements OnInit {
     this.common.startLoading();
     this.intializeMemberDetail();
     this.showAttendanceTracking();
+    // tslint:disable-next-line: max-line-length
+    this.currentMonthName = this.direction === 'en' ? this.common.getMonthName(this.monthIndex) : this.common.getMonthNameAr(this.monthIndex);
   }
 
   showAttendanceTracking() {
@@ -129,22 +132,19 @@ export class DetailsComponent implements OnInit {
 
   initAttendance() {
     this.data = {};
-    this.currentMonthName = this.getMonthName(new Date().getMonth() + 1);
+    // tslint:disable-next-line: max-line-length
+    this.currentMonthName = this.direction === 'en' ? this.common.getMonthName(this.monthIndex) : this.common.getMonthNameAr(this.monthIndex);
     this.currentYear = new Date().getFullYear();
     this.currentDate = new Date();
     this.showData = false;
     this.nextMonth = new Date().getMonth() + 2;
     this.preMonth = new Date().getMonth();
-    if (this.direction === 'en') {
-      this.currentMonthName = this.getMonthName(new Date().getMonth() + 1);
-    } else {
-      this.currentMonthName = this.getMonthNameAr(new Date().getMonth() + 1);
-    }
-    this.calendarConfig(this.currentMonthName, new Date().getFullYear());
+    this.calendarConfig(this.common.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear());
   }
 
   calendarConfig(month?, year?) {
-    this.month = month;
+    const index = this.monthsNameArray.indexOf(month);
+    this.month = this.direction === 'en' ? month : this.common.getMonthNameAr(index + 1);
     this.year = year;
     this.getTimeCardSummaryDetails(month, year);
     this.getDayHoursTypeDetails(month, year);
@@ -178,8 +178,8 @@ export class DetailsComponent implements OnInit {
 
 
   nextSlide() {
-    this.common.startLoading();
     if (this.currentMonthName !== this.month) {
+        this.common.startLoading();
         this.showData = false;
         if (this.nextMonth > 12) {
               this.currentYear = this.currentYear + 1;

Mohem/src/app/time-card/time-card-details/time-card-details.component.html

@@ -21,13 +21,13 @@
           </ion-row>
           
           <ion-row *ngIf="direction == 'rtl'">
-            <ion-col [size]="2" style="text-align: left;">
+            <ion-col [size]="2" style="text-align: right;">
               <ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon>
             </ion-col>
             <ion-col [size]="8" style="text-align: center;">
-                <span class="month-year-span">{{month}} {{year}}</span>
+                <span class="month-year-span">{{year}} {{month}}</span>
             </ion-col>
-            <ion-col [size]="2" style="text-align: right;">
+            <ion-col [size]="2" style="text-align: left;">
               <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
             </ion-col>
           </ion-row>
@@ -36,7 +36,7 @@
       
       <div class="result-graph">
         <div >
-          <span [ngClass]="direction == 'ltr' ? 'request-heading':'request-heading-ar' ">{{ts.trPK('myTeam','attendance-statistics')}}</span>
+          <span [ngClass]="direction == 'ltr' ? 'request-heading':'request-heading-ar'">{{ts.trPK('myTeam','attendance-statistics')}}</span>
         </div>
         <div style="position: relative;">
           <div class="label-container">

Mohem/src/app/time-card/time-card-details/time-card-details.component.scss

@@ -730,20 +730,18 @@ $actionBtnSize : 36px;
   margin-bottom: 10px;
 }
 .request-heading {
-  // span {
       text-align: left;
       display: block;
       padding-top: 8px;
       margin-bottom: 10px;
       margin-left: 10px;
-  // }
 }
 .request-heading-ar{
-  text-align: left;
+  text-align: right;
   display: block;
   padding-top: 8px;
   margin-bottom: 10px;
-  margin-left: 215px;
+  margin-right: 12px;
 }
 
 .result-text-container {
@@ -839,7 +837,7 @@ $actionBtnSize : 36px;
   h2{
       padding: 0;
       margin: 0;
-      font-size: 22px;
+      font-size: 18px;
   }
   span{
       font-size: 11px;
@@ -916,11 +914,11 @@ $actionBtnSize : 36px;
   margin-top: 20px;
   border-radius: 20px;
   span{
-      text-align: left;
-      display: block;
-      padding-top: 8px;
-      margin-bottom: 10px;
-      margin-left: 196px;
+    text-align: right;
+    display: block;
+    padding-top: 8px;
+    margin-bottom: 6px;
+    margin-right: 12px;
   }
 }
 

Mohem/src/app/time-card/time-card-details/time-card-details.component.ts

@@ -30,7 +30,6 @@ export class TimeCardDetailsComponent implements OnInit {
     public ts: TranslatorService
   ) {
     this.direction = TranslatorService.getCurrentDirection();
-    console.log(this.direction);
   }
 
   public showMore: any = true;
@@ -60,7 +59,7 @@ export class TimeCardDetailsComponent implements OnInit {
   public yearTitle: string;
   public isChange = false;
   public activeMonth: any;
-  public currentMonthName = this.getMonthName(new Date().getMonth() + 1);
+  public currentMonthName = '';
   public showData = false;
   public currentYear = new Date().getFullYear();
   public dayHoursTypeDetailsList = [];
@@ -72,24 +71,29 @@ export class TimeCardDetailsComponent implements OnInit {
     legend: { display: false }
   };
   public data = {};
+  // tslint:disable-next-line: max-line-length
+  public monthsNameArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
 
   ngOnInit() {
     this.common.startLoading();
     this.showData = false;
     this.nextMonth = new Date().getMonth() + 2;
     this.preMonth = new Date().getMonth();
-    this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear());
+    const monthIndex = new Date().getMonth() + 1;
+    this.currentMonthName = this.direction === 'ltr' ? this.common.getMonthName(monthIndex) : this.common.getMonthNameAr(monthIndex);
+    this.calendarConfig(this.common.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear());
   }
 
   calendarConfig(month?, year?) {
-    this.month = month;
+    const index = this.monthsNameArray.indexOf(month);
+    this.month = this.direction === 'ltr' ? month : this.common.getMonthNameAr(index + 1);
     this.year = year;
     this.getTimeCardSummaryDetails(month, year);
     this.getDayHoursTypeDetails(month, year);
   }
 
   public getDayHoursTypeDetails(month?, year?) {
-    console.log('getDayHoursTypeDetails');
     const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
     this.monthName = month;
     this.yearDate = year;
@@ -108,7 +112,6 @@ export class TimeCardDetailsComponent implements OnInit {
 
     this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj, '', '', this.isPostNoLoad).subscribe((result) => {
       if (this.common.validResponse(result)) {
-        console.log(result.GetDayHoursTypeDetailsList);
         this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'RTP_IDs');
         this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
       }
@@ -192,15 +195,15 @@ export class TimeCardDetailsComponent implements OnInit {
   }
 
   nextSlide() {
-    this.common.startLoading();
     if (this.currentMonthName !== this.month) {
+        this.common.startLoading();
         this.showData = false;
         if (this.nextMonth > 12) {
               this.currentYear = this.currentYear + 1;
               this.nextMonth = 1;
         }
         this.currentDate = new Date(this.currentYear, (this.nextMonth - 1), 1);
-        this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
+        this.calendarConfig(this.common.getMonthName(this.nextMonth) , this.currentYear);
         this.nextMonth = this.nextMonth + 1;
         this.preMonth = this.nextMonth - 2;
     }
@@ -214,8 +217,7 @@ export class TimeCardDetailsComponent implements OnInit {
         this.preMonth = 12;
     }
     this.currentDate = new Date(this.currentYear, (this.preMonth - 1), 1);
-    console.log(this.currentDate);
-    this.calendarConfig(this.getMonthName(this.preMonth) , this.currentYear);
+    this.calendarConfig(this.common.getMonthName(this.preMonth) , this.currentYear);
     this.preMonth = this.preMonth - 1;
     this.nextMonth = this.preMonth + 2;
   }
@@ -228,34 +230,4 @@ export class TimeCardDetailsComponent implements OnInit {
   changeYear(year) {
     this.yearTitle = year;
   }
-
-  public getMonthName(value: any): any {
-    switch (value) {
-      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';
-
-    }
-  }
 }

Mohem/src/theme/styles.scss

@@ -1376,7 +1376,7 @@ border:0px
 
 .monthview-datetable {
     *{
-        font-size: 12px !important;
+        font-size: 11px !important;
         font-weight: normal !important;
     }