diff --git a/.currentLang = 2 b/.currentLang = 2
new file mode 100644
index 00000000..c07548c0
--- /dev/null
+++ b/.currentLang = 2	
@@ -0,0 +1,224 @@
+
+                   SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS
+
+      Commands marked with * may be preceded by a number, _N.
+      Notes in parentheses indicate the behavior if _N is given.
+      A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K.
+
+  h  H                 Display this help.
+  q  :q  Q  :Q  ZZ     Exit.
+ ---------------------------------------------------------------------------
+
+                           MMOOVVIINNGG
+
+  e  ^E  j  ^N  CR  *  Forward  one line   (or _N lines).
+  y  ^Y  k  ^K  ^P  *  Backward one line   (or _N lines).
+  f  ^F  ^V  SPACE  *  Forward  one window (or _N lines).
+  b  ^B  ESC-v      *  Backward one window (or _N lines).
+  z                 *  Forward  one window (and set window to _N).
+  w                 *  Backward one window (and set window to _N).
+  ESC-SPACE         *  Forward  one window, but don't stop at end-of-file.
+  d  ^D             *  Forward  one half-window (and set half-window to _N).
+  u  ^U             *  Backward one half-window (and set half-window to _N).
+  ESC-)  RightArrow *  Right one half screen width (or _N positions).
+  ESC-(  LeftArrow  *  Left  one half screen width (or _N positions).
+  ESC-}  ^RightArrow   Right to last column displayed.
+  ESC-{  ^LeftArrow    Left  to first column.
+  F                    Forward forever; like "tail -f".
+  ESC-F                Like F but stop when search pattern is found.
+  r  ^R  ^L            Repaint screen.
+  R                    Repaint screen, discarding buffered input.
+        ---------------------------------------------------
+        Default "window" is the screen height.
+        Default "half-window" is half of the screen height.
+ ---------------------------------------------------------------------------
+
+                          SSEEAARRCCHHIINNGG
+
+  /_p_a_t_t_e_r_n          *  Search forward for (_N-th) matching line.
+  ?_p_a_t_t_e_r_n          *  Search backward for (_N-th) matching line.
+  n                 *  Repeat previous search (for _N-th occurrence).
+  N                 *  Repeat previous search in reverse direction.
+  ESC-n             *  Repeat previous search, spanning files.
+  ESC-N             *  Repeat previous search, reverse dir. & spanning files.
+  ESC-u                Undo (toggle) search highlighting.
+  &_p_a_t_t_e_r_n          *  Display only matching lines
+        ---------------------------------------------------
+        A search pattern may begin with one or more of:
+        ^N or !  Search for NON-matching lines.
+        ^E or *  Search multiple files (pass thru END OF FILE).
+        ^F or @  Start search at FIRST file (for /) or last file (for ?).
+        ^K       Highlight matches, but don't move (KEEP position).
+        ^R       Don't use REGULAR EXPRESSIONS.
+ ---------------------------------------------------------------------------
+
+                           JJUUMMPPIINNGG
+
+  g  <  ESC-<       *  Go to first line in file (or line _N).
+  G  >  ESC->       *  Go to last line in file (or line _N).
+  p  %              *  Go to beginning of file (or _N percent into file).
+  t                 *  Go to the (_N-th) next tag.
+  T                 *  Go to the (_N-th) previous tag.
+  {  (  [           *  Find close bracket } ) ].
+  }  )  ]           *  Find open bracket { ( [.
+  ESC-^F _<_c_1_> _<_c_2_>  *  Find close bracket _<_c_2_>.
+  ESC-^B _<_c_1_> _<_c_2_>  *  Find open bracket _<_c_1_> 
+        ---------------------------------------------------
+        Each "find close bracket" command goes forward to the close bracket 
+          matching the (_N-th) open bracket in the top line.
+        Each "find open bracket" command goes backward to the open bracket 
+          matching the (_N-th) close bracket in the bottom line.
+
+  m_<_l_e_t_t_e_r_>            Mark the current top line with <letter>.
+  M_<_l_e_t_t_e_r_>            Mark the current bottom line with <letter>.
+  '_<_l_e_t_t_e_r_>            Go to a previously marked position.
+  ''                   Go to the previous position.
+  ^X^X                 Same as '.
+  ESC-M_<_l_e_t_t_e_r_>        Clear a mark.
+        ---------------------------------------------------
+        A mark is any upper-case or lower-case letter.
+        Certain marks are predefined:
+             ^  means  beginning of the file
+             $  means  end of the file
+ ---------------------------------------------------------------------------
+
+                        CCHHAANNGGIINNGG FFIILLEESS
+
+  :e [_f_i_l_e]            Examine a new file.
+  ^X^V                 Same as :e.
+  :n                *  Examine the (_N-th) next file from the command line.
+  :p                *  Examine the (_N-th) previous file from the command line.
+  :x                *  Examine the first (or _N-th) file from the command line.
+  :d                   Delete the current file from the command line list.
+  =  ^G  :f            Print current file name.
+ ---------------------------------------------------------------------------
+
+                    MMIISSCCEELLLLAANNEEOOUUSS CCOOMMMMAANNDDSS
+
+  -_<_f_l_a_g_>              Toggle a command line option [see OPTIONS below].
+  --_<_n_a_m_e_>             Toggle a command line option, by name.
+  __<_f_l_a_g_>              Display the setting of a command line option.
+  ___<_n_a_m_e_>             Display the setting of an option, by name.
+  +_c_m_d                 Execute the less cmd each time a new file is examined.
+
+  !_c_o_m_m_a_n_d             Execute the shell command with $SHELL.
+  |XX_c_o_m_m_a_n_d            Pipe file between current pos & mark XX to shell command.
+  s _f_i_l_e               Save input to a file.
+  v                    Edit the current file with $VISUAL or $EDITOR.
+  V                    Print version number of "less".
+ ---------------------------------------------------------------------------
+
+                           OOPPTTIIOONNSS
+
+        Most options may be changed either on the command line,
+        or from within less by using the - or -- command.
+        Options may be given in one of two forms: either a single
+        character preceded by a -, or a name preceded by --.
+
+  -?  ........  --help
+                  Display help (from command line).
+  -a  ........  --search-skip-screen
+                  Search skips current screen.
+  -A  ........  --SEARCH-SKIP-SCREEN
+                  Search starts just after target line.
+  -b [_N]  ....  --buffers=[_N]
+                  Number of buffers.
+  -B  ........  --auto-buffers
+                  Don't automatically allocate buffers for pipes.
+  -c  ........  --clear-screen
+                  Repaint by clearing rather than scrolling.
+  -d  ........  --dumb
+                  Dumb terminal.
+  -D [_x_n_._n]  .  --color=_x_n_._n
+                  Set screen colors. (MS-DOS only)
+  -e  -E  ....  --quit-at-eof  --QUIT-AT-EOF
+                  Quit at end of file.
+  -f  ........  --force
+                  Force open non-regular files.
+  -F  ........  --quit-if-one-screen
+                  Quit if entire file fits on first screen.
+  -g  ........  --hilite-search
+                  Highlight only last match for searches.
+  -G  ........  --HILITE-SEARCH
+                  Don't highlight any matches for searches.
+  -h [_N]  ....  --max-back-scroll=[_N]
+                  Backward scroll limit.
+  -i  ........  --ignore-case
+                  Ignore case in searches that do not contain uppercase.
+  -I  ........  --IGNORE-CASE
+                  Ignore case in all searches.
+  -j [_N]  ....  --jump-target=[_N]
+                  Screen position of target lines.
+  -J  ........  --status-column
+                  Display a status column at left edge of screen.
+  -k [_f_i_l_e]  .  --lesskey-file=[_f_i_l_e]
+                  Use a lesskey file.
+  -K  ........  --quit-on-intr
+                  Exit less in response to ctrl-C.
+  -L  ........  --no-lessopen
+                  Ignore the LESSOPEN environment variable.
+  -m  -M  ....  --long-prompt  --LONG-PROMPT
+                  Set prompt style.
+  -n  -N  ....  --line-numbers  --LINE-NUMBERS
+                  Don't use line numbers.
+  -o [_f_i_l_e]  .  --log-file=[_f_i_l_e]
+                  Copy to log file (standard input only).
+  -O [_f_i_l_e]  .  --LOG-FILE=[_f_i_l_e]
+                  Copy to log file (unconditionally overwrite).
+  -p [_p_a_t_t_e_r_n]  --pattern=[_p_a_t_t_e_r_n]
+                  Start at pattern (from command line).
+  -P [_p_r_o_m_p_t]   --prompt=[_p_r_o_m_p_t]
+                  Define new prompt.
+  -q  -Q  ....  --quiet  --QUIET  --silent --SILENT
+                  Quiet the terminal bell.
+  -r  -R  ....  --raw-control-chars  --RAW-CONTROL-CHARS
+                  Output "raw" control characters.
+  -s  ........  --squeeze-blank-lines
+                  Squeeze multiple blank lines.
+  -S  ........  --chop-long-lines
+                  Chop (truncate) long lines rather than wrapping.
+  -t [_t_a_g]  ..  --tag=[_t_a_g]
+                  Find a tag.
+  -T [_t_a_g_s_f_i_l_e] --tag-file=[_t_a_g_s_f_i_l_e]
+                  Use an alternate tags file.
+  -u  -U  ....  --underline-special  --UNDERLINE-SPECIAL
+                  Change handling of backspaces.
+  -V  ........  --version
+                  Display the version number of "less".
+  -w  ........  --hilite-unread
+                  Highlight first new line after forward-screen.
+  -W  ........  --HILITE-UNREAD
+                  Highlight first new line after any forward movement.
+  -x [_N[,...]]  --tabs=[_N[,...]]
+                  Set tab stops.
+  -X  ........  --no-init
+                  Don't use termcap init/deinit strings.
+  -y [_N]  ....  --max-forw-scroll=[_N]
+                  Forward scroll limit.
+  -z [_N]  ....  --window=[_N]
+                  Set size of window.
+  -" [_c[_c]]  .  --quotes=[_c[_c]]
+                  Set shell quote characters.
+  -~  ........  --tilde
+                  Don't display tildes after end of file.
+  -# [_N]  ....  --shift=[_N]
+                  Horizontal scroll amount (0 = one half screen width)
+                --follow-name
+                  The F command changes files if the input file is renamed.
+                --mouse
+                  Enable mouse input.
+                --no-keypad
+                  Don't send termcap keypad init/deinit strings.
+                --no-histdups
+                  Remove duplicates from command history.
+                --rscroll=C
+                  Set the character used to mark truncated lines.
+                --save-marks
+                  Retain marks across invocations of less.
+                --use-backslash
+                  Subsequent options use backslash as escape char.
+                --wheel-lines=N
+                  Each click of the mouse wheel moves N lines.
+
+
+ ---------------------------------------------------------------------------
diff --git a/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.scss b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.scss
index bdae8c76..269ef263 100644
--- a/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.scss
+++ b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.scss
@@ -88,9 +88,9 @@ button.item-button.button.button-md.button-clear.button-clear-md {
   // padding-left: 10px !important;
   border: solid var(--gray) 1px;
   border-radius: 21px;
-  padding-left: 145px !important;
+  // padding-left: 145px !important;
   margin-left: 86px;
-  padding-right: 129px;
+  // padding-right: 129px;
   margin-right: -143px;
 }
   // {padding-left: unset;
diff --git a/Mohem/src/app/absence/home/home.component.html b/Mohem/src/app/absence/home/home.component.html
index 39a21384..19cd5470 100644
--- a/Mohem/src/app/absence/home/home.component.html
+++ b/Mohem/src/app/absence/home/home.component.html
@@ -61,10 +61,7 @@
           <div class="result-text-container">
   
             <!-- <h2>{{totalnumber}}</h2>  -->
-
                 <!-- <h2>{{accrualNet + accrualUsed + accrualYearly}}</h2> -->
-               
-    
               <!-- <span>{{ts.trPK('absenceList','totalNumber')}}</span> -->
             
           </div>
@@ -76,7 +73,7 @@
                   <div [ngClass]=" direction == 'ltr' ?  'div-green' : 'div-green-ar'">
                   <ion-col>
                       <ion-row>
-                        <label class="green-label">{{ts.trPK('absenceList','accrualNet')}}</label>
+                        <label class="green-label">{{ts.trPK('absenceList','currentBalance')}}</label>
                       </ion-row>
                       <ion-row>
                         <label class="green-amount">{{accrualNet}}</label>
@@ -86,7 +83,7 @@
                   <div [ngClass]=" direction == 'ltr' ?  'div-red' : 'div-red-ar'">
                     <ion-col>
                         <ion-row>
-                          <label class="red-label">{{ts.trPK('absenceList','accrualUsed')}}</label>
+                          <label class="red-label">{{ts.trPK('absenceList','usedBalance')}}</label>
                         </ion-row>
                         <ion-row>
                        
@@ -94,17 +91,17 @@
                       </ion-row>
                     </ion-col>
                   </div>
-                  <div [ngClass]=" direction == 'ltr' ?  'div-orng' : 'div-orng-ar'">
+                  <!-- <div [ngClass]=" direction == 'ltr' ?  'div-orng' : 'div-orng-ar'">
                     <ion-col>
                         <ion-row>
-                          <label class="orng-label">{{ts.trPK('absenceList','accrualYearly')}}</label>
+                          <label class="orng-label">{{ts.trPK('absenceList','annualBalance')}}</label>
                         </ion-row>
                         <ion-row>
                         
                           <label class="orng-amount" for="">{{accrualYearly}}</label>
                       </ion-row>
                     </ion-col>
-                  </div>
+                  </div> -->
 
                   <!-- <div style="position: relative;
                   left: 59%;
diff --git a/Mohem/src/app/absence/home/home.component.scss b/Mohem/src/app/absence/home/home.component.scss
index 28c65f00..0cbd6a21 100644
--- a/Mohem/src/app/absence/home/home.component.scss
+++ b/Mohem/src/app/absence/home/home.component.scss
@@ -213,6 +213,7 @@ margin-top: -13px;
   margin-top: 0px;
 }
 
+
 .red-label{
   font-size: 12px;
   margin-top: -13px;
@@ -224,16 +225,20 @@ margin-top: -13px;
     margin-top: 0px;
   }
 
+ 
+
   .orng-label{
     font-size: 12px;
     margin-top: -13px;
     }
     
+   
     .orng-amount{
       font-size: 15px;
       font-family: WorkSans-Bold;
       margin-top: 0px;
     }
+  
   .contentEit:before {
     position: absolute;
   content: "";
@@ -247,17 +252,18 @@ margin-top: -13px;
  .div-green{
   position: relative;
   left: 82%;
-  bottom: 128px;
+  bottom: 141px;
   color: black;
   background-color: #1FA269;
   width: 11%;
   height: 6px;
  }
- .div-green-ar{
+ .div-orng-ar{
   position: relative;
   bottom: 59px;
   color: black;
-  background-color: #1FA269;
+  background-color: #DDB017;
+  // background-color: #1FA269;
   width: 11%;
   height: 6px;
   right: 9px;
@@ -270,12 +276,12 @@ margin-top: -13px;
   background-color: #CB3232;
   width: 11%;
   height: 6px;
-  right: 102px;
+  right: 92px;
  }
  .div-red{
   position: relative;
   left: 59%;
-  bottom: 131px;
+  bottom: 146px;
   color: black;
   background-color: #CB3232;
   // background-color: #094875;
@@ -293,12 +299,12 @@ margin-top: -13px;
   width: 11%;
   height: 6px;
  }
- .div-orng-ar{
+ .div-green-ar{
   position: relative;
-  bottom: 139px;
+  bottom: 124px;
   color: black;
-  // background-color: #CB3232;
-  background-color: #DDB017;
+  // background-color: #DDB017;
+  background-color: #1FA269;
   width: 11%;
   height: 6px;
   right: 10px;
diff --git a/Mohem/src/app/absence/home/home.component.ts b/Mohem/src/app/absence/home/home.component.ts
index 0ca580f6..760b1f1f 100644
--- a/Mohem/src/app/absence/home/home.component.ts
+++ b/Mohem/src/app/absence/home/home.component.ts
@@ -109,7 +109,9 @@ export class HomeComponent implements OnInit {
     this.data = {
       // labels: ['earingTotal', 'deductionTotal'],
       datasets: [
-          {  data: [this.accrualNet,this.accrualYearly,this.accrualUsed],
+          // { data: [this.accrualNet,this.accrualYearly,this.accrualUsed],
+            { 
+          data: [this.accrualNet,this.accrualUsed],
               backgroundColor: [
                 '#1FA269',
                 '#DDB017', 
@@ -251,6 +253,7 @@ createAbsence() {
         });
     }
   }
+  
   handleAccrualResult(result) {
     if (this.common.validResponse(result)) {
       this.balance = result.GetAccrualBalancesList;
@@ -258,13 +261,15 @@ createAbsence() {
       if(this.balance){
         this.accrualNet = this.balance[0].ACCRUAL_NET_ENTITLEMENT;
         this.accrualUsed = this.balance[0].ACCRUAL_USED_ENTITLEMENT;
-        this.accrualYearly = this.balance[0].ACCRUAL_YEARLY_ENTITLEMENT; 
-        this.totalnumber= this.accrualNet +  this.accrualUsed + this.accrualYearly;
+        // this.accrualYearly = this.balance[0].ACCRUAL_YEARLY_ENTITLEMENT; 
+        // this.totalnumber= this.accrualNet +  this.accrualUsed + this.accrualYearly;
+        this.totalnumber= this.accrualNet +  this.accrualUsed;
         this.totalnumber= this.totalnumber.toFixed(3);
         this.data = {
           // labels: ['earingTotal', 'deductionTotal'],
           datasets: [
-              {  data: [this.accrualNet,this.accrualYearly,this.accrualUsed],
+              // {  data: [this.accrualNet,this.accrualYearly,this.accrualUsed],
+              {  data: [this.accrualNet,this.accrualUsed],
                   backgroundColor: [
                     '#1FA269',
                 '#DDB017', 
diff --git a/Mohem/src/app/absence/submit-absence/submit-absence.component.html b/Mohem/src/app/absence/submit-absence/submit-absence.component.html
index 25cba6c1..1d36cd68 100644
--- a/Mohem/src/app/absence/submit-absence/submit-absence.component.html
+++ b/Mohem/src/app/absence/submit-absence/submit-absence.component.html
@@ -15,20 +15,20 @@
   
   <ion-item class='dynamicField'>
     <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','startDate')}} </ion-label>
-   <ion-datetime  (ionChange)="calcDay()" [(ngModel)]="startDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY"  placeholder="MM/DD/YYYY" required></ion-datetime>
+   <ion-datetime doneText="{{doneText}}" cancelText="{{cancelText}}" (ionChange)="calcDay()" [(ngModel)]="startDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY" placeholder="MM/DD/YYYY" required></ion-datetime>
 </ion-item>
 <ion-item *ngIf="hoursOrDay!='D'" class='dynamicField'>
   <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','startTime')}} </ion-label>
-  <ion-datetime displayFormat="HH:mm" [(ngModel)]="startTime" required></ion-datetime>
+  <ion-datetime doneText="{{doneText}}" cancelText="{{cancelText}}" displayFormat="HH:mm" [(ngModel)]="startTime" required></ion-datetime>
 </ion-item>
 <ion-item class='dynamicField'>
     <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','endDate')}}</ion-label>
-    <ion-datetime (ionChange)="calcDay()" [(ngModel)]="endDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY"  placeholder="MM/DD/YYYY" required ></ion-datetime>
+    <ion-datetime doneText="{{doneText}}" cancelText="{{cancelText}}" (ionChange)="calcDay()" [(ngModel)]="endDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY"  placeholder="MM/DD/YYYY" required ></ion-datetime>
 </ion-item>
 
 <ion-item *ngIf="hoursOrDay!='D'" class='dynamicField'>
   <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','endTime')}}</ion-label>
-  <ion-datetime displayFormat="HH:mm" [(ngModel)]="endTime" required></ion-datetime>
+  <ion-datetime doneText="{{doneText}}" cancelText="{{cancelText}}" displayFormat="HH:mm" [(ngModel)]="endTime" required></ion-datetime>
 </ion-item>
 <ion-item class='dynamicField'>
   <ion-label  class="colBold" >{{ts.trPK('submitAbsence','totalDays')}} </ion-label>
diff --git a/Mohem/src/app/absence/submit-absence/submit-absence.component.ts b/Mohem/src/app/absence/submit-absence/submit-absence.component.ts
index b0287761..cd965432 100644
--- a/Mohem/src/app/absence/submit-absence/submit-absence.component.ts
+++ b/Mohem/src/app/absence/submit-absence/submit-absence.component.ts
@@ -77,6 +77,9 @@ export class SubmitAbsenceComponent implements OnInit {
   /*****for resubmit******* */
   getPassNotificationDetails: any;
   getPassdirfromNotifiPage: boolean = false;
+  direction: string;
+  doneText: string;
+  cancelText: string;
   functionName: string = "";
   private submitAbsObjList: any = [];
   @ViewChild(IonSelect) select: IonSelect;
@@ -93,6 +96,7 @@ export class SubmitAbsenceComponent implements OnInit {
     private changeDetectorRef: ChangeDetectorRef
 
   ) {
+    this.direction = TranslatorService.getCurrentLanguageName();
     ////*new add*/////
     /**********resubmit************ */
       this.getPassNotificationDetails = this.common.sharedService.getSharedData(AbsenceNotificatonBodyResponse.NOT_WORKLIST, true);
@@ -133,6 +137,8 @@ export class SubmitAbsenceComponent implements OnInit {
 
   ngOnInit() {
     this.getAbsenceTypes();
+    this.doneText = this.direction === 'en' ? 'Done' : 'تم';
+    this.cancelText = this.direction === 'en' ? 'Cancel' : 'إلغاء';
   }
   private getAbsenceDffStructure() {
     const body = {
@@ -344,7 +350,8 @@ export class SubmitAbsenceComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             } else {
               this.dateInput = new DateInput(
@@ -354,7 +361,8 @@ export class SubmitAbsenceComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             }
           } else if (feildsList[i].FORMAT_TYPE == "Y") {
@@ -372,7 +380,8 @@ export class SubmitAbsenceComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             } else {
               this.datetimeInput = new DateTimeInput(
@@ -382,7 +391,8 @@ export class SubmitAbsenceComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             }
             const elem = document.getElementById(
@@ -411,7 +421,8 @@ export class SubmitAbsenceComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             } else {
               this.timeInput = new TimeInput(
@@ -421,20 +432,10 @@ export class SubmitAbsenceComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             }
-            const elem = document.getElementById(
-              feildsList[i].APPLICATION_COLUMN_NAME
-            );
-            elem.addEventListener("click", e => {
-              if (feildsList[i].MOBILE_ENABLED != "Y") return false;
-              this.showTimePicker(
-                feildsList[i].APPLICATION_COLUMN_NAME,
-                feildsList[i].MAXIMUM_SIZE
-              );
-              e.stopImmediatePropagation();
-            });
           }
         } else {
           if (feildsList[i].READ_ONLY == "Y") {
@@ -1058,7 +1059,7 @@ export class SubmitAbsenceComponent implements OnInit {
             this.absenceDffresponse[i].DISPLAY_FLAG != "N"
           ) {
             //date
-            //   elemVal = this.common.formatDate(elemVal);
+               elemVal = this.common.formatDate(elemVal);
           } else if (
             this.absenceDffresponse[i].FORMAT_TYPE == "Y" &&
             this.absenceDffresponse[i].DISPLAY_FLAG != "N"
diff --git a/Mohem/src/app/accrual-balances/home/home.component.html b/Mohem/src/app/accrual-balances/home/home.component.html
index c2304685..25354335 100644
--- a/Mohem/src/app/accrual-balances/home/home.component.html
+++ b/Mohem/src/app/accrual-balances/home/home.component.html
@@ -12,7 +12,7 @@
         <ion-label>{{ts.trPK('accrualBalances','selectDate')}}</ion-label>
         <ion-datetime [(ngModel)]="Sdate" min="1900" max="2100" displayFormat="MMM/DD/YYYY " placeholder="MM/DD/YYYY"
           (ionChange)="getAccrualBalance()"></ion-datetime>
-       
+        
       </ion-item>
 
       <ul>
diff --git a/Mohem/src/app/accrual-balances/home/home.component.ts b/Mohem/src/app/accrual-balances/home/home.component.ts
index 1171adb0..7739075c 100644
--- a/Mohem/src/app/accrual-balances/home/home.component.ts
+++ b/Mohem/src/app/accrual-balances/home/home.component.ts
@@ -9,6 +9,7 @@ import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/mo
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
+
 export class HomeComponent implements OnInit {
   Sdate: any;
   emp_no: any;
@@ -57,4 +58,5 @@ export class HomeComponent implements OnInit {
       this.balance=result.GetAccrualBalancesList;
       }
   }
+  
 }
diff --git a/Mohem/src/app/app.component.html b/Mohem/src/app/app.component.html
index 9a5d540e..3a2dbe2b 100644
--- a/Mohem/src/app/app.component.html
+++ b/Mohem/src/app/app.component.html
@@ -61,9 +61,10 @@
   
           <div class="" style="text-align:center">
              <img src="{{companyUrl}}" class="CompanyImg logoImg">
-            <p class="companyTxt">{{companyDesc}}</p>
+            <!-- <p class="companyTxt">{{companyDesc}}</p> -->
           </div>
           <div class="menuFooter">
+            <div> <img src="../assets/imgs/CS.png" class="CompanyImg"></div>
             <p class="companyTxt">{{companyDesc}}</p>
           </div>
         </ion-content>
@@ -112,25 +113,53 @@
               </ion-label>
             </ion-item>
             <ion-item (click)="openChangePassword()"> 
-              <ion-thumbnail slot="start" class="menu-thumb">
-                <img style= "height: 25px !important;" src="../assets/imgs/lock_icon.png" item-left>
-              </ion-thumbnail>
-              <ion-label class="changepassword" >
-                {{ts.trPK('login','changepassword')}}
-                <ion-badge class="end-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
-              </ion-label>
-            </ion-item>
-          </ion-list>
+            <ion-thumbnail slot="start" class="menu-thumb">
+              <img style= "height: 25px !important;" src="../assets/imgs/lock_icon.png" item-left>
+            </ion-thumbnail>
+            <ion-label class="changepassword" >
+              {{ts.trPK('login','changepassword')}}
 
-          <div class="" style="text-align:center">
-            <img src="{{companyUrl}}" class="CompanyImg logoImg">
-            <p class="companyTxt">{{companyDesc}}</p>
-          </div>
-          <div class="menuFooter">
-            <p class="companyTxt">{{companyDesc}}</p>
-          </div>
-        </ion-content>
-      </ion-menu>
+              <ion-badge  [ngClass]=" direction === 'rtl' ?  'end-badge' : 'start-badge'" slot="end" color="danger" class="main-badge">{{notBadge}}</ion-badge>
+            </ion-label>
+            <!-- <button class="menu-item" ion-item  menuClose ion-item  (click)="goToWorkListPage()" >
+               
+               
+            
+            </button> -->
+          </ion-item>
+
+         
+          <!-- <ion-item (click)="profile()">
+            <ion-thumbnail slot="start" class="menu-thumb">
+              <img width="30" src="../assets/imgs/profile_icon.png" item-left>
+            </ion-thumbnail>
+            <ion-label>
+              {{ts.trPK('userProfile','title')}}
+            </ion-label>
+          </ion-item> -->
+          <!-- <ion-item (click)="logout();">
+
+
+            <ion-thumbnail slot="start" class="menu-thumb">
+              <img width="30" src="../assets/imgs/signout.png" item-left>
+            </ion-thumbnail>
+            <ion-label>
+              {{ts.trPK('home','logout')}}
+            </ion-label>
+
+          </ion-item> -->
+        </ion-list>
+
+        <div class="" style="text-align:center">
+           <img src="{{companyUrl}}" class="CompanyImg logoImg">
+          <!-- <p class="companyTxt">{{companyDesc}}</p> -->
+        </div>
+        <div class="menuFooter">
+          <div> <img src="../assets/imgs/CS.png" class="CompanyImg"></div>
+          <p class="companyTxt">{{companyDesc}}</p>
+        </div>
+      </ion-content>
+    </ion-menu>
     <ion-router-outlet main></ion-router-outlet>
   </ion-split-pane>
 
diff --git a/Mohem/src/app/authentication/login/login.component.ts b/Mohem/src/app/authentication/login/login.component.ts
index be12c513..3534711a 100644
--- a/Mohem/src/app/authentication/login/login.component.ts
+++ b/Mohem/src/app/authentication/login/login.component.ts
@@ -163,8 +163,8 @@ export class LoginComponent implements OnInit, OnDestroy {
         const remember = localStorage.getItem('remember'); // ****//
         this.empname =  localStorage.getItem('emp-name');
         this.logintype = localStorage.getItem('login-type');
-      // tslint:disable-next-line: triple-equals
-        if (remember == 'true') { this.remeberMe = true; } else { this.remeberMe = false; }
+        // tslint:disable-next-line: triple-equals
+        if (remember == 'true') { this.remeberMe = true ; } else { this.remeberMe = false; }
     }
 
     ngOnDestroy(): void {
@@ -376,6 +376,11 @@ export class LoginComponent implements OnInit, OnDestroy {
     }
 
     login() {
+        let anotherUser = this.sharedData.getSharedData('anotherUser');
+        if(anotherUser){
+            this.username = '';
+            this.password = '';
+        }
         console.log('login emit');
         console.log('login');
        // this.checkUserAuthentication();
diff --git a/Mohem/src/app/eit/add-eit/add-eit.component.ts b/Mohem/src/app/eit/add-eit/add-eit.component.ts
index 384143a2..48ab9c4d 100644
--- a/Mohem/src/app/eit/add-eit/add-eit.component.ts
+++ b/Mohem/src/app/eit/add-eit/add-eit.component.ts
@@ -23,7 +23,6 @@ import { AddEitResponse } from "../models/add.eit.response";
 import { element } from '@angular/core/src/render3';
 // import { EITNotificatonBodyResponse } from 'src/app/notification/models/EITNotificationBodyRes';
 import { EITNotificatonBodyResponse } from "../models/EITNotificationBodyRes";
-
 @Component({
   selector: "app-add-eit",
   templateUrl: "./add-eit.component.html",
@@ -67,6 +66,7 @@ export class AddEitComponent implements OnInit {
   //private updatedNotObject:any=[];
   private updatedValues: any = [];
   addEITData: any;
+  direction:string;
 
   constructor(
     public modalController: ModalController,
@@ -75,6 +75,7 @@ export class AddEitComponent implements OnInit {
     private eitService: EitService,
     public datePicker: DatePicker
   ) {
+    this.direction = TranslatorService.getCurrentLanguageName();
     this.selEmp = this.cs.sharedService.getSharedData(
       MenuResponse.SHARED_SEL_EMP,
       false
@@ -216,7 +217,8 @@ export class AddEitComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             } else {
               this.dateInput = new DateInput(
@@ -226,7 +228,8 @@ export class AddEitComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             }
             // else if(feildsList[i].DEFAULT_TYPE=="D"){//current date
@@ -251,7 +254,8 @@ export class AddEitComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             } else {
               this.datetimeInput = new DateTimeInput(
@@ -261,20 +265,21 @@ export class AddEitComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             }
             const elem = document.getElementById(
               feildsList[i].APPLICATION_COLUMN_NAME
             );
-            elem.addEventListener("click", e => {
-              if (feildsList[i].MOBILE_ENABLED != "Y") return false;
-              this.showDateTimePicker(
-                feildsList[i].APPLICATION_COLUMN_NAME,
-                feildsList[i].MAXIMUM_SIZE
-              );
-              e.stopImmediatePropagation();
-            });
+            // elem.addEventListener("click", e => {
+            //   if (feildsList[i].MOBILE_ENABLED != "Y") return false;
+            //   this.showDateTimePicker(
+            //     feildsList[i].APPLICATION_COLUMN_NAME,
+            //     feildsList[i].MAXIMUM_SIZE
+            //   );
+            //   e.stopImmediatePropagation();
+            // });
             // else if(feildsList[i].DEFAULT_TYPE=="D"){
             //   this.datetimeInput = new DateTimeInput(feildsList[i].SEGMENT_PROMPT,feildsList[i].APPLICATION_COLUMN_NAME,"currentDateTime",containerId,feildsList[i].MOBILE_ENABLED);
             // }else if(feildsList[i].DEFAULT_TYPE=="P"||feildsList[i].DEFAULT_TYPE=="S"){
@@ -291,11 +296,12 @@ export class AddEitComponent implements OnInit {
               this.timeInput = new TimeInput(
                 feildsList[i].SEGMENT_PROMPT,
                 feildsList[i].APPLICATION_COLUMN_NAME,
-                defaultVal,
+                "",
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             } else {
               this.timeInput = new TimeInput(
@@ -305,25 +311,10 @@ export class AddEitComponent implements OnInit {
                 containerId,
                 feildsList[i].MOBILE_ENABLED,
                 feildsList[i].DISPLAY_FLAG,
-                feildsList[i].REQUIRED_FLAG
+                feildsList[i].REQUIRED_FLAG,
+                this.direction
               );
             }
-            const elem = document.getElementById(
-              feildsList[i].APPLICATION_COLUMN_NAME
-            );
-            elem.addEventListener("click", e => {
-              if (feildsList[i].MOBILE_ENABLED != "Y") return false;
-              this.showTimePicker(
-                feildsList[i].APPLICATION_COLUMN_NAME,
-                feildsList[i].MAXIMUM_SIZE
-              );
-              e.stopImmediatePropagation();
-            });
-            // else if(feildsList[i].DEFAULT_TYPE=="T"){
-            //   this.timeInput = new TimeInput(feildsList[i].SEGMENT_PROMPT,feildsList[i].APPLICATION_COLUMN_NAME,"currentTime",containerId,feildsList[i].MOBILE_ENABLED);
-            // }else if(feildsList[i].DEFAULT_TYPE=="P"||feildsList[i].DEFAULT_TYPE=="S"){
-            //   this.timeInput = new TimeInput(feildsList[i].SEGMENT_PROMPT,feildsList[i].APPLICATION_COLUMN_NAME,this.getDefaultValue(feildsList[i].DESC_FLEX_NAME,feildsList[i].DESC_FLEX_CONTEXT_CODE,feildsList[i].SEGMENT_NAME,feildsList[i].PARENT_SEGMENTS_VS_SplitedVS,feildsList[i].PARENT_SEGMENTS_DV_Splited),containerId,feildsList[i].MOBILE_ENABLED);
-            // }
           }
         } else {
           if (feildsList[i].READ_ONLY == "Y") {
@@ -532,7 +523,7 @@ export class AddEitComponent implements OnInit {
         select.value = select.dataset.hiddenval;
         //select.dataset.hiddenval="";
       } else {
-        select.value = DV.P_VALUE_COLUMN_NAME;
+        select.value = DV.P_ID_COLUMN_NAME;
       }
       select.disabled = false;
     }
@@ -1225,7 +1216,7 @@ export class AddEitComponent implements OnInit {
             this.eitResponse[i].DISPLAY_FLAG != "N"
           ) {
             //time
-            elemVal = elem.dataset.dtvalue;
+            elemVal = elemVal.substring(11, 16);
           }
           if (this.eitResponse[i].REQUIRED_FLAG == "Y" && !elemVal) {
             elem.classList.add("requiredClassElm");
diff --git a/Mohem/src/app/eit/eit-list/eit-list.component.html b/Mohem/src/app/eit/eit-list/eit-list.component.html
index 8855aa28..64c9c34f 100644
--- a/Mohem/src/app/eit/eit-list/eit-list.component.html
+++ b/Mohem/src/app/eit/eit-list/eit-list.component.html
@@ -3,8 +3,6 @@
   [headerText]="headerTitle">
 </app-generic-header>
 
-
-
 <ion-content>
   <div class="">
     <!-- class="colorBG" -->
@@ -16,6 +14,17 @@
       <div style="color: black;"> 
       
        <div class="result-graph">
+
+        <div >
+          <ion-datetime [(ngModel)]="Sdate" class="datetime" displayFormat="DD MMMM YYYY" placeholder="DD MMMM YYYY"
+           (ionChange)="getAccrualBalance()"></ion-datetime>
+          <ion-icon class="iconCalendar" ios="ios-calendar" md="md-calendar"></ion-icon>
+        </div>
+        <div style=" border-bottom: 1px solid #a7a4a4; margin-bottom: 12px;
+        margin-top: -10px; margin-right: -9px;"></div>
+        
+              <!-- <div class="result-text-container"> 
+              </div> -->
      
 <p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
 
diff --git a/Mohem/src/app/eit/eit-list/eit-list.component.scss b/Mohem/src/app/eit/eit-list/eit-list.component.scss
index 2dfdf5be..25220405 100644
--- a/Mohem/src/app/eit/eit-list/eit-list.component.scss
+++ b/Mohem/src/app/eit/eit-list/eit-list.component.scss
@@ -4,6 +4,26 @@
   min-height: 45px;
   min-width: 200px;
 }
+
+.datetime{
+  // text-align: center;
+  // font-family: WorkSans-Bold;
+  // margin-left: 111px;
+  text-align: center;
+  font-family: WorkSans-Bold;
+  margin-left: 47px;
+  margin-top: -19px;
+
+ } 
+.iconCalendar{
+  // margin-left: -241px;
+  // margin-top: 5px;
+  margin-left: 30px !important;
+  width: 22% !important;
+  height: 26px !important;
+  margin-top: -69px !important;
+  margin-bottom: 20px !important;
+ } 
 h4 {
   font-size: 2.2rem;
   text-align: center;
diff --git a/Mohem/src/app/eit/eit-list/eit-list.component.ts b/Mohem/src/app/eit/eit-list/eit-list.component.ts
index 5b43290c..346c46ab 100644
--- a/Mohem/src/app/eit/eit-list/eit-list.component.ts
+++ b/Mohem/src/app/eit/eit-list/eit-list.component.ts
@@ -9,6 +9,9 @@ import { EitService } from '../services/eit.service';
 import { EIT_ACTION } from '../models/submit.eit.action';
 import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
 import { AddEitResponse } from '../models/add.eit.response';
+import { AccrualService } from 'src/app/accrual-balances/services/accrual.service';
+import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
+import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
 
 @Component({
   selector: 'app-eit-list',
@@ -16,7 +19,10 @@ import { AddEitResponse } from '../models/add.eit.response';
   styleUrls: ['./eit-list.component.scss'],
 })
 export class EitListComponent implements OnInit {
-
+  Sdate: any;
+  emp_no: any;
+  balance:any;
+  //////////////up
   P_PAGE_NUM: number;
   P_PAGE_LIMIT: number;
   IsReachEnd = false;
@@ -56,7 +62,8 @@ export class EitListComponent implements OnInit {
     // gaugeLabel = "";
 
   // tslint:disable-next-line: max-line-length
-  constructor(private cs: CommonService, private EITService: EitService, public ts: TranslatorService, private modalCtrl: ModalController) {
+  constructor(private cs: CommonService, private EITService: EitService, public ts: TranslatorService, 
+    private modalCtrl: ModalController, public accrualService: AccrualService, public authService:AuthenticationService,) {
     this.direction = TranslatorService.getCurrentLanguageName();
     this.selMenu = this.cs.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
     this.selEmp = this.cs.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
@@ -72,6 +79,10 @@ export class EitListComponent implements OnInit {
   }
 
   ngOnInit() {
+    /////////////
+    this.Sdate = new Date().toISOString();
+    this.getUserDetails();
+    ////////////////up
     this.getEITTransactions();
 
     this.accrualBalancesList = this.cs.sharedService.getSharedData('tickitsbalance', false);
@@ -96,8 +107,44 @@ export class EitListComponent implements OnInit {
       };
   }
 
+  getUserDetails(){
+    this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => {
+        if (user) {
+         // this.emp_no=user.EMPLOYEE_NUMBER;
+       
+        }
+      });
+  }
+  public getAccrualBalance() {
+    if (this.Sdate) {
+      let today = new Date(this.Sdate);
+      let day = today.getDate();
+      let month = today.getMonth() + 1;
+      let year = today.getFullYear();
+      let todayDate = month + '/' + day + '/' + year;
+      let effectiveDate = todayDate;
+      const request = {
+        P_SELECTED_EMPLOYEE_NUMBER: this.selEmp,
+        P_EFFECTIVE_DATE: effectiveDate
+      };
+      this.accrualService
+        .getAccrualBalances(request)
+        .subscribe((result: any) => {
+          this.handleAccrualResult(result);
+        });
+    }
+  }
+  handleAccrualResult(result) {
+    if (this.cs.validResponse(result)) {
+      this.balance=result.GetAccrualBalancesList;
+      this.accrualNetAdult = this.balance[1].ACCRUAL_NET_ENTITLEMENT;
+      this.accrualUNetChild = this.balance[2].ACCRUAL_NET_ENTITLEMENT;
+      this. accrualNetInfants = this.balance[3].ACCRUAL_NET_ENTITLEMENT;
+      }
+  }
+  ///////////////////////////////////
+
   getEITTransactions() {
-    console.log('jkfdjkdfsffjhfsdahffg');
     this.IsReachEnd = false;
     this.EITTransactionsListObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT;
     this.EITTransactionsListObj.P_PAGE_NUM = this.P_PAGE_NUM;
@@ -520,5 +567,42 @@ export class EitListComponent implements OnInit {
     this.removeItems(item.Collection_Transaction[0].TRANSACTION_NUMBER);
   }
 
-
+ 
+//////////////////////////
+// getUserDetails(){
+//   this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => {
+//       if (user) {
+//         this.emp_no=user.EMPLOYEE_NUMBER;
+     
+//       }
+//     });
+// }
+// public getAccrualBalance() {
+//   if (this.Sdate) {
+//     let today = new Date(this.Sdate);
+//     let day = today.getDate();
+//     let month = today.getMonth() + 1;
+//     let year = today.getFullYear();
+//     let todayDate = month + '/' + day + '/' + year;
+//     let effectiveDate = todayDate;
+//     const request = {
+//       P_SELECTED_EMPLOYEE_NUMBER: this.emp_no,
+//       P_EFFECTIVE_DATE: effectiveDate
+//     };
+//     this.accrualService
+//       .getAccrualBalances(request)
+//       .subscribe((result: any) => {
+//         this.handleAccrualResult(result);
+//       });
+//   }
+// }
+// handleAccrualResult(result) {
+//   if (this.cs.validResponse(result)) {
+//     this.balance=result.GetAccrualBalancesList;
+//     }
+// }
 }
+////////////////////////////////up
+
+
+
diff --git a/Mohem/src/app/hmg-common/services/common/common.service.ts b/Mohem/src/app/hmg-common/services/common/common.service.ts
index 711a8ec5..42d94901 100644
--- a/Mohem/src/app/hmg-common/services/common/common.service.ts
+++ b/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']);
   }
 
 
diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html
index ab15461a..ae22d581 100644
--- a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html
+++ b/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>
 
diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts
index 03f29490..4fdee44e 100644
--- a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts
+++ b/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);
   }
diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html
index a33eed5b..26f5e38c 100644
--- a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html
+++ b/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>
diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss
index ca98d91b..585627d0 100644
--- a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss
+++ b/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%);
     }
     
diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts
index f40342f9..dbed1746 100644
--- a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts
+++ b/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()];
+    }
   }
 }
diff --git a/Mohem/src/app/hmg-common/ui/fab-button/fab-button.component.html b/Mohem/src/app/hmg-common/ui/fab-button/fab-button.component.html
index 18d70a13..0cd4bf1f 100644
--- a/Mohem/src/app/hmg-common/ui/fab-button/fab-button.component.html
+++ b/Mohem/src/app/hmg-common/ui/fab-button/fab-button.component.html
@@ -2,7 +2,6 @@
   <div class="circle pulse"></div>
   <div class="circle">
       <ion-fab class="fab-i ">
-
           <ion-fab-button [ngClass]="type === 'add' ? 'addnon' : 'cbookApointmentBtn' " (click)="onClick()"  >
               <!-- <img style="width: 39%; margin-top: -29%;" src="assets/icon/booking.png" /> -->
              <div *ngIf="type != 'add' "> 
@@ -14,7 +13,6 @@
                     <!-- <ion-icon name="add-outline"></ion-icon> -->
             </div>
           </ion-fab-button>
-
       </ion-fab>
   </div>
 </div>
\ No newline at end of file
diff --git a/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.html b/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.html
index 554414ee..9f4f7175 100644
--- a/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.html
+++ b/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.html
@@ -1,4 +1,4 @@
-<div feedback class="custom-button">
+<div feedback class="custom-button" *ngIf='show'>
   <div class="iconBox">
     <img [src]="icon" class="icon">
   </div>
diff --git a/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.ts b/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.ts
index b204d12d..65bc8ecc 100644
--- a/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.ts
+++ b/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.ts
@@ -16,6 +16,7 @@ export class StatsButtonComponent implements OnInit {
   @Output() trigger = new EventEmitter();
   @Input() focusicon: string;
   @Input() disabled = false;
+  @Input() show: boolean ;
   public direction: string;
   public style: any;
   constructor(
diff --git a/Mohem/src/app/hmg-common/ui/welcome-login/welcome.component.ts b/Mohem/src/app/hmg-common/ui/welcome-login/welcome.component.ts
index e7285713..39703cbe 100644
--- a/Mohem/src/app/hmg-common/ui/welcome-login/welcome.component.ts
+++ b/Mohem/src/app/hmg-common/ui/welcome-login/welcome.component.ts
@@ -15,6 +15,7 @@ import { ConfirmLoginComponent } from 'src/app/authentication/confirm-login/conf
 import * as moment from 'moment'
 import { ButtonSettings } from '../button/models/button-settingsl';
 import { Events } from '@ionic/angular';
+import { SharedDataService } from '../../services/shared-data-service/shared-data.service';
 
 @Component({
   selector: "welcome-login",
@@ -76,7 +77,8 @@ export class WelcomeComponent implements OnInit, AfterViewInit, OnDestroy {
     public ts: TranslatorService,
     public cs: CommonService,
     public authservice: AuthenticationService,
-    public events: Events
+    public events: Events,
+    public sharedData: SharedDataService,
   ) { }
 
   ngOnInit() {
@@ -211,6 +213,7 @@ export class WelcomeComponent implements OnInit, AfterViewInit, OnDestroy {
 
  
   login() {
+    this.sharedData.setSharedData(true, "anotherUser")
     this.onLogin.emit();
   }
   loginwithuser() {
diff --git a/Mohem/src/app/home/home.page.html b/Mohem/src/app/home/home.page.html
index 1466b033..dc681d97 100644
--- a/Mohem/src/app/home/home.page.html
+++ b/Mohem/src/app/home/home.page.html
@@ -14,6 +14,7 @@
                 [title]="button.title"
                 [statsValue]="button.statsValue"
                 [icon]="button.icon"
+                [show]="button.show"
                 (click)="openStatsButton(button.link)">
               </app-stats-button>
         </ion-slide>
@@ -21,7 +22,6 @@
     </ion-row>
 
     <ion-row *ngFor="let menuItem of menuEntries;  let i=index">
-
       <ion-row class="attendance-module" *ngIf="i == 1">
           <ion-col [size]="8">
               <h3>{{'home,monthly-attendance' | translate}}</h3>
@@ -46,7 +46,7 @@
                 [icon]="subMenu.ICON">
             </app-services-button>
         </ion-slide>
-        <ion-slide *ngIf="i == 0"> 
+        <ion-slide *ngIf="i == 0 && showVcationRule"> 
           <app-services-button
               (click)="Vacation_Rule()"
               [title]="vacationRuleTitle"
diff --git a/Mohem/src/app/home/home.page.ts b/Mohem/src/app/home/home.page.ts
index 46192dcd..32e8a558 100644
--- a/Mohem/src/app/home/home.page.ts
+++ b/Mohem/src/app/home/home.page.ts
@@ -34,6 +34,7 @@ import { GetSubordinatesLeavesResponse } from '../hmg-common/services/dashbored/
 import { AccrualService } from '../accrual-balances/services/accrual.service';
 import { TimeCardService } from '../time-card/service/time-card.service';
 import { WorklistMainService } from '../notification/service/work-list.main.service';
+import { isThisISOWeek } from 'date-fns';
 
 @Component({
   selector: 'app-home',
@@ -57,12 +58,15 @@ export class HomePage implements OnInit {
   ticketRequestObject: any;
   leaveRequestObject: any;
   missingSwipeRequestObject: any;
+  public isShow = false;
+  public showVcationRule = false;
   public statsButtons = [
     {
       title: this.ts.trPK('home','worklist'),
       statsValue: 0,
       icon: 'assets/icon/new-design/work_list.png',
-      link: '1'
+      link: '1',
+      show: true
     },
     // {
     //   title: 'Pending Request',
@@ -74,19 +78,22 @@ export class HomePage implements OnInit {
       title: this.ts.trPK('home','missing-swipes'),
       statsValue: 0,
       icon: 'assets/icon/new-design/missing_swipe.png',
-      link: '2'
+      link: '2',
+      show:true
     },
     {
       title: this.ts.trPK('home','leave-balance'),
       statsValue: 0,
       icon: 'assets/icon/new-design/leave_balance.png',
-      link: '3'
+      link: '3',
+      show: this.isShow,
     },
     {
       title: this.ts.trPK('absenceList','tickets-balance'),
       statsValue: 0,
       icon: 'assets/icon/new-design/ticket_balance.png',
-      link: '4'
+      link: '4',
+      show: this.isShow
     }
   ];
 
@@ -256,11 +263,22 @@ export class HomePage implements OnInit {
   setServicesPrivilage() {
     for (const servicePrivilage of AuthenticationService.servicePrivilage) {
       if (servicePrivilage.Previlege === false) {
-        document
-          .getElementById(servicePrivilage.ServiceName)
-          .setAttribute('disabled', 'disabled');
-        document.getElementById(servicePrivilage.ServiceName).style.filter =
-          'grayscale(1)';
+        if(servicePrivilage.ServiceName === 'accrualBalance'){
+          this.statsButtons[2].show = false;
+          this.statsButtons[3].show = false;
+        }
+        if(servicePrivilage.ServiceName === 'vacationRule'){
+          this.showVcationRule = false;
+        }
+        // document
+        //   .getElementById(servicePrivilage.ServiceName)
+        //   .setAttribute('disabled', 'disabled');
+        // document.getElementById(servicePrivilage.ServiceName).style.filter =
+        //   'grayscale(1)';
+      }else{
+        this.statsButtons[2].show = true;
+        this.statsButtons[3].show = true;
+        this.showVcationRule = true;
       }
     }
   }
diff --git a/Mohem/src/app/my-team/details/details.component.html b/Mohem/src/app/my-team/details/details.component.html
index 081b6b44..f2837622 100644
--- a/Mohem/src/app/my-team/details/details.component.html
+++ b/Mohem/src/app/my-team/details/details.component.html
@@ -60,7 +60,7 @@
           </ion-segment-button>
           <ion-segment-button
               value="Team Members"
-              [ngClass]="activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment'">
+              [ngClass]="[activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment', empSubordinate.length === 0 ? 'disable-phone': '']">
               <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label>
           </ion-segment-button>
           <ion-segment-button
@@ -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 == 'en' ? '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">
diff --git a/Mohem/src/app/my-team/details/details.component.scss b/Mohem/src/app/my-team/details/details.component.scss
index 026d61dc..08556352 100644
--- a/Mohem/src/app/my-team/details/details.component.scss
+++ b/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;
+    }
+  }
 
   
 
diff --git a/Mohem/src/app/my-team/details/details.component.ts b/Mohem/src/app/my-team/details/details.component.ts
index 6de1e116..89434b9b 100644
--- a/Mohem/src/app/my-team/details/details.component.ts
+++ b/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;
diff --git a/Mohem/src/app/my-team/home/home.component.ts b/Mohem/src/app/my-team/home/home.component.ts
index 46d4048a..262d9ead 100644
--- a/Mohem/src/app/my-team/home/home.component.ts
+++ b/Mohem/src/app/my-team/home/home.component.ts
@@ -27,6 +27,7 @@ export class HomeComponent implements OnInit {
   public selMenu: any;
   public selEmpNo: any;
   public totalEmployees = 0;
+  public pageFirstVisit = false;
 
   public options = {
     cutoutPercentage: 80,
@@ -146,7 +147,10 @@ export class HomeComponent implements OnInit {
     this.getEmployeeSubordinatesRequestObject = body;
     this.myTeamService.getEmployeeSubordinates(body).subscribe((result: any) => {
         if (this.common.validResponse(result)) {
-          this.totalEmployees = result.P_NUM_OF_SUBORDINATES;
+          if (!this.pageFirstVisit) {
+            this.pageFirstVisit = true;
+            this.totalEmployees = result.P_NUM_OF_SUBORDINATES;
+          }
           this.handleEmpResult(result.GetEmployeeSubordinatesList);
         }
     });
diff --git a/Mohem/src/app/notification/home/home.component.html b/Mohem/src/app/notification/home/home.component.html
index 83571b02..ebd99437 100644
--- a/Mohem/src/app/notification/home/home.component.html
+++ b/Mohem/src/app/notification/home/home.component.html
@@ -12,7 +12,7 @@
       </div>
       <div class="result-text-container" [ngStyle]="showChart === false ? {'visibility': 'hidden'} : {}">
           <span *ngIf="selectedFilter === 'ALL'">{{newWorkListResponse.length + ITGCount}} {{ts.trPK('work-list','of')}} </span>
-          <span *ngIf="showSearchButton && newWorkListResponse.length > 0 && selectedFilter !== 'ALL' && itemType !== ''">{{newWorkListResponse.length}} of </span>
+          <span *ngIf="showSearchButton && newWorkListResponse.length > 0 && selectedFilter !== 'ALL' && itemType !== ''">{{newWorkListResponse.length}} {{ts.trPK('work-list','of')}} </span>
           <h2 *ngIf="!showSearchButton">{{totalRequestCount}}</h2>
           <h2 *ngIf="showSearchButton && newWorkListResponse.length > 0 && itemType === ''">{{newWorkListResponse[0].NO_OF_ROWS + ITGCount}}</h2>
           <h2 *ngIf="showSearchButton && newWorkListResponse.length > 0 && selectedFilter !== 'ALL' && itemType !== ''">{{newWorkListResponse[0].NO_OF_ROWS}}</h2>
@@ -69,7 +69,7 @@
           </div>
         </div>
       </div>
-      <div [ngClass]="showFormattedData.length > 0 ? 'work-list-container' : ''" *ngIf="selectedFilter == 'ITG'" >
+      <div [ngClass]="ITGItem.length > 0 ? 'work-list-container' : ''" *ngIf="selectedFilter == 'ITG'" >
           <!-- <div  *ngFor='let segmentInfo of ITGItem[0]; let i= index' (click)='openITG(segmentInfo)'> -->
           <div  *ngFor='let segmentInfo of ITGItem[0]; let i= index' >
           
@@ -90,7 +90,10 @@
           </div>
         </div>
       </div>
-      <div class="no-data-available" *ngIf="showFormattedData.length === 0">
+      <div class="no-data-available" *ngIf="showFormattedData.length === 0 && selectedFilter != 'ITG'">
+        <span>{{ts.trPK('work-list','No-data-available')}}</span>
+      </div>
+      <div class="no-data-available" *ngIf="ITGItem.length === 0 && selectedFilter == 'ITG'">
         <span>{{ts.trPK('work-list','No-data-available')}}</span>
       </div>
     </div>
diff --git a/Mohem/src/app/notification/home/home.component.ts b/Mohem/src/app/notification/home/home.component.ts
index 4a2dac84..8092dbf6 100644
--- a/Mohem/src/app/notification/home/home.component.ts
+++ b/Mohem/src/app/notification/home/home.component.ts
@@ -214,10 +214,8 @@ export class HomeComponent implements OnInit {
       } else if (notification.ITEM_TYPE === 'INVMOA') {
           this.filters[4].value = this.totalMR;
           this.data.datasets[0].data[3] = notification.OPEN_NTF_NUMBER;
-      } else if (notification.ITEM_TYPE === 'ITG') {
-        this.filters[5].value = notification.OPEN_NTF_NUMBER;
-        this.data.datasets[0].data[4] = notification.OPEN_NTF_NUMBER;
       }
+      this.data.datasets[0].data[4] = this.ITGCount;
     }
     this.showChart = true;
     this.common.stopLoading();
@@ -433,6 +431,9 @@ export class HomeComponent implements OnInit {
       }
     } else {
       this.newWorkListResponse = [];
+      this.data.datasets[0].data[4] = this.ITGCount;
+      this.showChart = true;
+      this.common.stopLoading();
     }
   }
 
@@ -525,21 +526,12 @@ export class HomeComponent implements OnInit {
   Details() {
     this.workListService.getITGDetails('', '', this.isPostNoLoad)
       .subscribe((result: any) => {
+        this.ITGCount = result.TotalCount;
         this.totalRequestCount = this.totalRequestCount + result.TotalCount;
         this.filters[5].value = result.TotalCount;
       });
   }
 
-  ITGNotification() {
-    // this.Details();
-    this.isAll = false;
-    this.isPR = false;
-    this.isPO = false;
-    this.isMR = false;
-    this.isHR = false;
-    this.isITG = true;
-  }
-
   searchBtn() {
     this.isSearch = !this.isSearch;
   }
diff --git a/Mohem/src/app/notification/work-list-replacement-roll/work-list-replacement-roll.component.scss b/Mohem/src/app/notification/work-list-replacement-roll/work-list-replacement-roll.component.scss
index 5bcfe464..8266747c 100644
--- a/Mohem/src/app/notification/work-list-replacement-roll/work-list-replacement-roll.component.scss
+++ b/Mohem/src/app/notification/work-list-replacement-roll/work-list-replacement-roll.component.scss
@@ -87,7 +87,7 @@ button.item-button.button.button-md.button-clear.button-clear-md {
   // padding-left: 10px !important;
   border: solid var(--gray) 1px;
   border-radius: 21px;
-  padding-left: 145px !important;
+  // padding-left: 145px !important;
   margin-left: 86px;
   padding-right: 129px;
   margin-right: -143px;
diff --git a/Mohem/src/app/payslip/home/home.component.html b/Mohem/src/app/payslip/home/home.component.html
index 20d46def..d32e9a56 100644
--- a/Mohem/src/app/payslip/home/home.component.html
+++ b/Mohem/src/app/payslip/home/home.component.html
@@ -48,7 +48,8 @@
           </button>
       </ion-col>
        <ion-col>
-        <p class="label"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
+        <p class="label" *ngIf="direction==='en'"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
+        <p class="label" *ngIf="direction==='ar'"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(23,17) }}</b></p>
           </ion-col>
       <ion-col>
            <button ion-button icon-end  class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
@@ -65,7 +66,7 @@
     </ion-icon>
 
     <!-- <ion-icon [ngClass]="{'disabledArrow' : payslipIndex === 0 , 'activeArrow' : payslipIndex != 0 , 'disabledArrow-ar' : direction != 'en' ,'disabledArrow' : direction == 'en'}" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
-        
+  
     </ion-icon> -->
               </button>
           </ion-col>
@@ -120,7 +121,7 @@
               <!-- <span>TOTAL <br> OPEN REQUEST</span> -->
               <span>{{ts.trPK('payslip','total')}} <br> {{ts.trPK('payslip','salary')}}</span>
           </div>
-          <p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
+          <p-chart #chart [ngClass]="direction == 'en'? 'today-graph':'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
     
         </div>
                   <div [ngClass]=" direction == 'en' ? 'div-green':'div-green-ar'">
diff --git a/Mohem/src/app/payslip/home/home.component.scss b/Mohem/src/app/payslip/home/home.component.scss
index 46a732d0..4d072688 100644
--- a/Mohem/src/app/payslip/home/home.component.scss
+++ b/Mohem/src/app/payslip/home/home.component.scss
@@ -159,6 +159,21 @@
     -o-transform: scaleX(-1);
     transform: scaleX(-1);  
    }
+   .today-graph{
+    display: block !important;
+    height: 162px;
+    width: 335px;
+    /* padding-left: 51px; */
+    margin-left: 3px !important;
+  }
+
+  .today-graph-ar{
+    display: block !important;
+    height: 162px;
+    width: 335px;
+    margin-right: 45px;
+    margin-left: -25px !important;
+}
 
    .result-graph{
     font-size: 14px;
@@ -191,7 +206,8 @@
     padding: 0;
     margin: 0;
     position: absolute;
-    left: 54%;
+    // left: 54%;
+    left: 45%;
     top: 50%;
     display: block;
     text-align: center;
@@ -199,7 +215,7 @@
 
     h2 {
 
-        font-size: 25px;
+        font-size: 23px;
         font-family: WorkSans-Bold;
         margin: 0 auto;
         line-height: 36px;
@@ -211,7 +227,7 @@
         width: 125px;
         display: block;
         margin: 0 auto;
-        font-size: 15px;
+        font-size: 14px;
         font-family: workSans-Regular;
     }
   }
@@ -221,7 +237,7 @@
     padding: 0;
     margin: 0;
     position: absolute;
-    left: 42%;
+    left: 40%;
     top: 50%;
     display: block;
     text-align: center;
@@ -251,7 +267,7 @@
 }
 
 .green-amount{
-  font-size: 14px;
+  font-size: 13px;
   font-family: WorkSans-Bold;
   margin-top: -3px;
 }
@@ -262,7 +278,7 @@
   }
   
   .blue-amount{
-    font-size: 14px;
+    font-size: 13px;
     font-family: WorkSans-Bold;
     margin-top: -4px;
   }
diff --git a/Mohem/src/app/payslip/home/home.component.ts b/Mohem/src/app/payslip/home/home.component.ts
index b43a3bc6..9943440a 100644
--- a/Mohem/src/app/payslip/home/home.component.ts
+++ b/Mohem/src/app/payslip/home/home.component.ts
@@ -54,7 +54,7 @@ export class HomeComponent implements OnInit {
 
   @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  public options = {
-        cutoutPercentage: 80,
+        cutoutPercentage: 85,
         tooltips: { enabled: false },
         legend: { display: false }};
         gaugeType = "full";
diff --git a/Mohem/src/app/profile/performance-evaluation/performance-evaluation.component.scss b/Mohem/src/app/profile/performance-evaluation/performance-evaluation.component.scss
index 9edffc6c..202c73a9 100644
--- a/Mohem/src/app/profile/performance-evaluation/performance-evaluation.component.scss
+++ b/Mohem/src/app/profile/performance-evaluation/performance-evaluation.component.scss
@@ -147,11 +147,10 @@
 
 }
 .labelvalue-ar{
-  
+  // margin-right: 19px !important;
   font-size: 24px !important;
   font-weight: bold !important;
-  /* margin-top: 7px !important; */
-  margin-right: 19px !important;
+  margin-right: 25px !important;
 }
 
 
@@ -162,8 +161,9 @@
 
 }
 .percentage-ar{
+  // margin-right: -54px;
   font-size: 19px !important;
-  margin-right: -54px;
+    margin-right: -51px;
 }
 
 .gauge{
diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.html b/Mohem/src/app/time-card/time-card-details/time-card-details.component.html
index 0ee3c5c0..0ac19449 100644
--- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.html
+++ b/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">
diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss b/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss
index b56654f8..6eb7fc02 100644
--- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss
+++ b/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;
   }
 }
 
diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts b/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts
index 1bb869c7..18765a80 100644
--- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts
+++ b/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';
-
-    }
-  }
 }
diff --git a/Mohem/src/app/uI-elements/date-time.input.ts b/Mohem/src/app/uI-elements/date-time.input.ts
index 9225c9fc..05e63bad 100644
--- a/Mohem/src/app/uI-elements/date-time.input.ts
+++ b/Mohem/src/app/uI-elements/date-time.input.ts
@@ -8,7 +8,8 @@ export class DateTimeInput extends UiElement {
         private containerId: string,
         private disabled: string,
         private hidden: string,
-        private required: string) {
+        private required: string,
+        private language: string = 'en') {
         super(elementId, containerId, '');
         this.createElement(this.getTemplate());
 
@@ -20,6 +21,8 @@ export class DateTimeInput extends UiElement {
     }
     public getTemplate() {
         let requiredClass: string = "";
+        const doneText = this.language === 'en' ? 'Done' : 'تم';
+        const cancelText = this.language === 'en' ? 'Cancel' : 'إلغاء';
         let disaledClass = "";
         //let timeValue=null;
         //let dateValue=null;
@@ -45,7 +48,7 @@ export class DateTimeInput extends UiElement {
             "<ion-item class='dynamicField'>" +
             " <ion-label position='floating' style='font-size: medium !important;' class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</ion-label>" +
             // " <div class='daynamicForm-DateTime " + disaledClass + "'  id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + ">" + this.value + "</div>" +
-            "<ion-datetime min='1900' max='2100' displayFormat='DD/MM/YYYY' value='" + this.value + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + "></ion-datetime>" +
+            "<ion-datetime min='1900' max='2100' displayFormat='DD/MM/YYYY' value='" + this.value + "' done-text='" + doneText + "' cancel-text='" + cancelText + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + "></ion-datetime>" +
             // " <input class='daynamicForm-DateTime' type='text' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" (click)='showDateTimePicker()'/>"+
             // " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + dateValue+ "' "+this.disabled+" />"+
             // " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "Time' value='" + timeValue + "' "+this.disabled+" />"+
diff --git a/Mohem/src/app/uI-elements/date.input.ts b/Mohem/src/app/uI-elements/date.input.ts
index a813416e..c0f7b0a6 100644
--- a/Mohem/src/app/uI-elements/date.input.ts
+++ b/Mohem/src/app/uI-elements/date.input.ts
@@ -1,7 +1,6 @@
-import { UiElement } from "./ui-element";
-
+import { UiElement } from './ui-element';
 export class DateInput extends UiElement {
-    private currentDate: any = ""
+    private currentDate: any = '';
     constructor(
         private label: string,
         private elementId: string,
@@ -9,10 +8,10 @@ export class DateInput extends UiElement {
         private containerId: string,
         private disabled: string,
         private hidden: string,
-        private required: string) {
+        private required: string,
+        private language: string = 'en') {
         super(elementId, containerId, '');
         this.createElement(this.getTemplate());
-
     }
 
     formatDate() {
@@ -24,6 +23,8 @@ export class DateInput extends UiElement {
     }
     public getTemplate() {
         let requiredClass: string = "";
+        const doneText = this.language === 'en' ? 'Done' : 'تم';
+        const cancelText = this.language === 'en' ? 'Cancel' : 'إلغاء';
         if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" }
         if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
         if (this.value == "currentDate") {
@@ -44,7 +45,7 @@ export class DateInput extends UiElement {
             "<ion-item class='dynamicField'>" +
             " <ion-label position='floating' style='font-size: medium !important;' class='dynamiclable-float " + requiredClass + "' id='title' >" + this.label + "</ion-label>" +
             // " <div class='daynamicForm-DateTime " + disaledClass + "'  id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + ">" + this.value + "</div>" +
-            "<ion-datetime min='1900' max='2100' class='onic-date' (ionChange)='setDate()'  displayFormat='MMM/DD/YYYY'   value='" + this.value + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + " ></ion-datetime>" +
+            "<ion-datetime min='1900' max='2100' class='onic-date' (ionChange)='setDate()'  displayFormat='MMM/DD/YYYY'   value='" + this.value + "' done-text='" + doneText + "' cancel-text='" + cancelText + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + " ></ion-datetime>" +
             // " <input class='daynamicForm-DateTime' type='text' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" (click)='showDateTimePicker()'/>"+
             // " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + dateValue+ "' "+this.disabled+" />"+
             // " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "Time' value='" + timeValue + "' "+this.disabled+" />"+
diff --git a/Mohem/src/app/uI-elements/time.input.ts b/Mohem/src/app/uI-elements/time.input.ts
index 84da28a6..2c7d5591 100644
--- a/Mohem/src/app/uI-elements/time.input.ts
+++ b/Mohem/src/app/uI-elements/time.input.ts
@@ -1,5 +1,4 @@
 import { UiElement } from './ui-element';
-// import { TranslatorService } from '../hmg-common/services/translator/translator.service';
 
 export class TimeInput extends UiElement {
     // public direction: string;
@@ -10,9 +9,9 @@ export class TimeInput extends UiElement {
         private containerId: string,
         private disabled: string,
         private hidden: string,
-        private required: string) {
+        private required: string,
+        private language: string = 'en') {
         super(elementId, containerId, '');
-        // this.direction = TranslatorService.getCurrentLanguageName();
         this.createElement(this.getTemplate());
 
     }
@@ -22,11 +21,16 @@ export class TimeInput extends UiElement {
         this.value = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
     }
 
+    setDate() {
+        console.log('umar');
+    }
 
     public getTemplate() {
 
         let requiredClass = '';
         let disaledClass = '';
+        const doneText = this.language === 'en' ? 'Done' : 'تم';
+        const cancelText = this.language === 'en' ? 'Cancel' : 'إلغاء';
         // tslint:disable-next-line: triple-equals
         if (this.required == 'Y') {
             requiredClass = 'requiredClass';
@@ -37,29 +41,12 @@ export class TimeInput extends UiElement {
         if (this.value === 'currentTime') {
             this.formatDate();
         }
-        const template =
-            '<div class=\'custom-text-area-element\' style=\'' + this.hidden + '\'>' +
-            ' <label class=\'daynamicForm-Label ' + requiredClass + '\'  id=\'title\' >' + this.label + '</label>' +
-            // tslint:disable-next-line: max-line-length
-            // " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" />"+
-            // tslint:disable-next-line: max-line-length
-            ' <div class=\'daynamicForm-DateTime ' + disaledClass + '\'  id=\'' + this.elementId + '\' data-dtvalue=\'' + this.value + '\' ' + this.disabled + '>' + this.value + '</div>' +
-            '</div>';
-
 
-        // "<ion-item>" +
-        // " <ion-label style='font-size: medium !important;' id='title' >" + this.label + "</ion-label>" +
-        // tslint:disable-next-line: max-line-length
-        // // " <div class='daynamicForm-DateTime " + disaledClass + "'  id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + ">" + this.value + "</div>" +
-        // tslint:disable-next-line: max-line-length
-        // "<ion-datetime displayFormat='hh:mm' value='" + this.value + "' id='" + this.elementId + "' " + this.disabled + "></ion-datetime>" +
-        // tslint:disable-next-line: max-line-length
-        // // " <input class='daynamicForm-DateTime' type='text' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" (click)='showDateTimePicker()'/>"+
-        // // " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + dateValue+ "' "+this.disabled+" />"+
-        // tslint:disable-next-line: max-line-length
-        // // " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "Time' value='" + timeValue + "' "+this.disabled+" />"+
-        // "</ion-item>"
+        const template =
+        "<ion-item class='dynamicField' style='" + this.hidden + "'>" +
+        " <ion-label position='floating' style='font-size: medium !important;' class='dynamiclable-float " + requiredClass + "' id='title' >" + this.label + "</ion-label>" +
+        "<ion-datetime display-format='h:mm' picker-format='h:mm' class='onic-date'  value='" + this.value + "' done-text='" + doneText + "' cancel-text='" + cancelText + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + " ></ion-datetime>" +
+        "</ion-item>"
         return template;
     }
-
 }
diff --git a/Mohem/src/app/vacation-rule/create-vacation-rule/create-vacation-rule.component.ts b/Mohem/src/app/vacation-rule/create-vacation-rule/create-vacation-rule.component.ts
index 238f5e77..0e844ddc 100644
--- a/Mohem/src/app/vacation-rule/create-vacation-rule/create-vacation-rule.component.ts
+++ b/Mohem/src/app/vacation-rule/create-vacation-rule/create-vacation-rule.component.ts
@@ -60,10 +60,12 @@ export class CreateVacationRuleComponent implements OnInit {
   private textInput: TextInput;
   private selectInput: SelectInput;
   private dateInput: DateInput;
-
+  direction:string;
   constructor(public vacationRuleService: VacationRuleServiceService, public ts: TranslatorService, public cs: CommonService,
     private elementRef: ElementRef, public navCtrl: NavController, public router: Router, public modalController: ModalController,
     private route: ActivatedRoute) {
+    this.direction = TranslatorService.getCurrentLanguageName();
+
     this.Sdate = moment().format('YYYY-MM-DDTHH:mm:ssZ');
 
     this.isUpdate = this.cs.sharedService.getSharedData('isUpdate');
@@ -512,7 +514,7 @@ export class CreateVacationRuleComponent implements OnInit {
       } else if (RespondAttributesList[i].ATTRIBUTE_TYPE == "DATE") {
         console.log("3");
 
-        this.dateInput = new DateInput(RespondAttributesList[i].ATTRIBUTE_DISPLAY_NAME, RespondAttributesList[i].ATTRIBUTE_NAME, "", containerId, "", "", "");
+        this.dateInput = new DateInput(RespondAttributesList[i].ATTRIBUTE_DISPLAY_NAME, RespondAttributesList[i].ATTRIBUTE_NAME, "", containerId, "", "", "", this.direction);
       } else if (RespondAttributesList[i].ATTRIBUTE_TYPE == "NUMBER") {
         console.log("4");
 
diff --git a/Mohem/src/app/vacation-rule/replacement-list/replacement-list.component.scss b/Mohem/src/app/vacation-rule/replacement-list/replacement-list.component.scss
index f24f0ebd..602cf3e7 100644
--- a/Mohem/src/app/vacation-rule/replacement-list/replacement-list.component.scss
+++ b/Mohem/src/app/vacation-rule/replacement-list/replacement-list.component.scss
@@ -111,9 +111,9 @@ button.item-button.button.button-md.button-clear.button-clear-md {
 .filterInput-ar{
   border: solid var(--gray) 1px;
   border-radius: 21px;
-  padding-left: 100px !important;
+  // padding-left: 100px !important;
   margin-left: 86px;
-  padding-right: 129px;
+  // padding-right: 129px;
   margin-right: -139px;
   
 }
diff --git a/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.ts b/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.ts
index 4a3cc594..eeef7508 100644
--- a/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.ts
+++ b/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.ts
@@ -66,15 +66,14 @@ export class VacationTypeComponent implements OnInit {
   P_RESPOND_ATTRIBUTES_TBL: any=[];
   vacationRuleRequest: createVacationRequest;
   confirmMsg: string;
+  direction: string;
 
   constructor(public vacationRuleService: VacationRuleServiceService,
     public ts: TranslatorService,
     public cs: CommonService,
     public modalController: ModalController,
     private elementRef: ElementRef) {
-
-    
-
+      this.direction = TranslatorService.getCurrentLanguageName();
    }
 
   ngOnInit() {
@@ -433,7 +432,7 @@ createVacationDynamicFields(RespondAttributesList) {
     } else if (RespondAttributesList[i].ATTRIBUTE_TYPE == "DATE") {
       console.log("3");
 
-      this.dateInput = new DateInput(RespondAttributesList[i].ATTRIBUTE_DISPLAY_NAME, RespondAttributesList[i].ATTRIBUTE_NAME, "", containerId, "", "", "");
+      this.dateInput = new DateInput(RespondAttributesList[i].ATTRIBUTE_DISPLAY_NAME, RespondAttributesList[i].ATTRIBUTE_NAME, "", containerId, "", "", "", this.direction);
     } else if (RespondAttributesList[i].ATTRIBUTE_TYPE == "NUMBER") {
       console.log("4");
 
diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json
index 972d306f..75f39487 100644
--- a/Mohem/src/assets/localization/i18n.json
+++ b/Mohem/src/assets/localization/i18n.json
@@ -161,9 +161,15 @@
             "en": "Verify its you",
             "ar": "Verify its you"
         },
+<<<<<<< HEAD
         "check-user-text1": {
             "en": "Please Enter your Employee ID, A ",
             "ar": "يرجى ادخال رقم الموظف "
+=======
+        "check-user-text1":{
+            "en":"Employee ID",
+            "ar":"رقم الموظف "
+>>>>>>> d6e378c69904c2fe55904db983560b1858c9e431
         },
         "check-user-text2": {
             "en": "login Code ",
@@ -1383,17 +1389,17 @@
             "en": "Accrual Balances",
             "ar": "رصيد حساب المستحقات"
         },
-        "accrualNet": {
-            "en": "Accrual Net",
-            "ar": "صافي الاستحقاق"
+        "currentBalance": {
+            "en": "Current Balance",
+            "ar": " الرصيد الحالي"
         },
-        "accrualUsed": {
-            "en": "Accrual Used",
-            "ar": "الاستحقاق المستخدم"
+        "usedBalance": {
+            "en": "Used Balance",
+            "ar": "الرصيد المستخدم"
         },
-        "accrualYearly": {
-            "en": "Accrual Yearly",
-            "ar": "الاستحقاق السنوي"
+        "annualBalance": {
+            "en": "Annual Balance",
+            "ar": "الرصيد السنوي"
         },
         "totalNumber": {
             "en": "TOTAL NUMBERS",
@@ -1559,6 +1565,14 @@
         }
     },
     "eit": {
+        "done-text": {
+            "en": "Done",
+            "ar": "تم"
+        },
+        "cancel-text": {
+            "en": "Cancel",
+            "ar": "إلغاء"
+        },
         "my-requests": {
             "en": "My Requests",
             "ar": "طلباتي"
@@ -2442,7 +2456,7 @@
         },
         "earnings": {
             "en": "Earnings",
-            "ar": "أرباح "
+            "ar":"مستحقات "
         },
         "deductions": {
             "en": "Deductions",
diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss
index 66492f00..f9d46c41 100644
--- a/Mohem/src/theme/styles.scss
+++ b/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;
     }
     
