fixed my team design

zohaib-huawei-q2
Fatimah Alshammari 5 years ago
parent 0aafef42ea
commit bc3251b525

@ -3,15 +3,21 @@
[headerText]="'submitAbsence, submitAbsence' | translate">
</app-generic-header>
<ion-content padding>
<ion-item class='dynamicField'>
<content padding>
<div [ngClass]=" direction === 'en' ? 'custom-text-area-element Field-en' : 'custom-text-area-element Field-ar'" >
<label class="label" position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </label>
<select class="label-Select" (ionChange)="calcDay()" [(ngModel)]="absenceType" (ionChange)="onTypeAbsenceChange()" required>
<option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </option>
</select>
</div>
<!-- <ion-item class='dynamicField'>
<ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </ion-label>
<ion-select (ionChange)="calcDay()" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="absenceType" (ionChange)="onTypeAbsenceChange()" required>
<ion-select (ionChange)="calcDay()" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="absenceType" (ionChange)="onTypeAbsenceChange()" required> -->
<!-- let item of AbsenceType; let i=index; -->
<ion-select-option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </ion-select-option>
<!-- <ion-select-option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </ion-select-option>
</ion-select>
</ion-item>
</ion-item> -->
<ion-item class='dynamicField'>
<ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','startDate')}} </ion-label>
@ -52,7 +58,7 @@
</ion-item>
<div id="dynamic-abs-container" >
</div>
</ion-content>
</content>
<ion-footer>
<div class="centerDiv">
<ion-button class="confirmEitOkButton" (click)="validateAbcenseTransaction()">{{ts.trPK('general','next')}}</ion-button>

@ -21,3 +21,94 @@
}
.label-Select{
color: var(--dark);
font-size: 15px;
border: none;
font-weight: 400;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 80%;
padding: 1px 0px;
background-color: var(--light);
border-bottom: var(--cusgray) solid 1px;
border-radius: 0px;
// margin-left: 20px;
margin-left: 34px;
margin-top: -10px;
// -webkit-appearance: none;
// -moz-appearance: none;
text-indent: 1px;
// text-overflow: '';
box-shadow: none;
-webkit-box-shadow:none;
-moz-box-shadow: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
:root[dir="ltr"]{
background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-right: 20px;
}
:root[dir="rtl"]{
background-image: linear-gradient(-135deg, #999 50%, transparent 50%),linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-left: 20px;
}
}
.label{
font-size: 16px;
// margin-left: 15px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
/* font-size: inherit; */
// text-overflow: ellipsis;
// white-space: nowrap;
white-space: normal;
// padding-top: 10px;
padding: 5px 0px;
padding-left: 10px !important;
margin: 10px auto;
:root[dir="ltr"]{
font-family: var(--fontFamilySemiBoldEN) !important;
}
:root[dir="rtl"]{
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold;
}
}
.Field-en{
border-radius: 30px;
border: 1px solid #a2a5a6!important;
margin-bottom: 20px;
padding-left: 20px !important;
padding-top: 6px !important;
color: #999999 !important;
}
.Field-ar{
border-radius: 30px;
border: 1px solid #a2a5a6!important;
margin-bottom: 20px;
padding-right: 20px !important;
padding-top: 6px !important;
color: #999999 !important;
}

@ -110,6 +110,7 @@ import { ChartModule } from 'primeng/chart';
import { GenericHeaderComponent } from './ui/generic-header/generic-header.component';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';
import { AttendanceOptionsComponent } from '../home/attendance-options/attendance-options.component';
import { CardCalendarComponent } from './ui/card-calendar/card-calendar.component';
@NgModule({
imports: [
@ -192,7 +193,8 @@ import { AttendanceOptionsComponent } from '../home/attendance-options/attendanc
DateInfoModalComponent,
Modal,
GenericHeaderComponent,
AttendanceOptionsComponent
AttendanceOptionsComponent,
CardCalendarComponent
],
exports: [
FabButtonComponent,
@ -262,7 +264,8 @@ import { AttendanceOptionsComponent } from '../home/attendance-options/attendanc
FileUploadModule,
Modal,
GenericHeaderComponent,
AttendanceOptionsComponent
AttendanceOptionsComponent,
CardCalendarComponent
],
providers: [
AttendScanService,

@ -133,7 +133,7 @@ export class AuthenticationService {
}else{
mobileType = 'android';
}
request.VersionID = 2.8;
request.VersionID = 2.9;
request.Channel = 31;
request.LanguageID = TranslatorService.getCurrentLanguageCode();
request.MobileType = mobileType;

@ -27,8 +27,8 @@ export class ConnectorService {
public static retryTimes = 0;
public static timeOut = 120 * 1000;
// public static host = 'https://uat.hmgwebservices.com/';
public static host = 'https://hmgwebservices.com/';
public static host = 'https://uat.hmgwebservices.com/';
//public static host = 'https://hmgwebservices.com/';
constructor(public httpClient: HttpClient,
public cs: CommonService,

@ -0,0 +1,6 @@
<div class="main-container" [ngStyle]="active === true ? {'color': color} : {}">
<div class="main-container-radius" [ngStyle]="active === true ? {'color': '#ffffff'} : {'color': color}"></div>
<span class="text-span" [ngStyle]="active === true ? {'color': '#269DB8'} : {}">{{text}}</span>
</div>

@ -0,0 +1,20 @@
.main-container{
width: 47px;
position: relative;
margin-left: 9px;
}
.main-container-radius{
position: absolute;
width: 30px;
}
.number-span{
display: block;
}
.text-span{
font-size: 13px;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CardCalendarComponent } from './card-calendar.component';
describe('CardCalendarComponent', () => {
let component: CardCalendarComponent;
let fixture: ComponentFixture<CardCalendarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CardCalendarComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CardCalendarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,18 @@
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-card-calendar',
templateUrl: './card-calendar.component.html',
styleUrls: ['./card-calendar.component.scss'],
})
export class CardCalendarComponent implements OnInit {
@Input() text: string;
@Input() active: boolean;
@Input() color: string;
constructor() { }
ngOnInit() {}
}

@ -14,7 +14,8 @@
<span class="title">{{title}}</span>
</span>
<a [ngClass]="employeePhoneNumber == '' ? 'disable-phone image-container' : 'image-container'" href="tel:{{employeePhoneNumber}}">
<img src="../assets/imgs/green_call_icon.png" >
<!-- <img src="../assets/imgs/green_call_icon.png" > -->
<img src="../assets/imgs/call.svg" >
</a>
</div>
<!-- <div class="swipe-information">

@ -1,16 +1,26 @@
.team-member-container{
// background: white;
// border-radius: 100px 20px 20px 100px;
// margin-top: 15px;
// font-family: WorkSans-Regular;
// border: 1px solid #ccc;
// border-radius: 15px;
// padding-bottom: 8px;
background: white;
border-radius: 100px 20px 20px 100px;
margin-top: 15px;
/* margin-top: 2px; */
font-family: WorkSans-Regular;
border: 1px solid #ccc;
border-radius: 15px;
padding-bottom: 8px;
margin-bottom: 7px;
}
.user-image-container{
position: relative;
width: 70px;
height: 70px;
display: block;
margin: 0 auto;
// .user-image-container{
// position: relative;
// width: 70px;
// height: 70px;
// display: block;
// margin: 0 auto;
// &:before{
// position: absolute;
// content: "";
@ -26,19 +36,24 @@
// &.present:before{
// background-color: green !important;
// }
}
// }
.user-image{
overflow: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
margin: 0px auto 6px;
// overflow: hidden;
// position: relative;
// display: block;
// width: 100%;
// height: 100%;
// border-radius: 80px;
// border: 1px solid #ccc;
// margin: 0px auto 6px;
img {
width: 100%;
max-height: 100%;
// width: 100%;
// max-height: 100%;
width: 74%;
max-height: 74%;
margin-top: 4px;
margin-left: 6px;
}
}
@ -48,11 +63,14 @@
.name{
font-size: 16px;
color: black;
margin: 0;
// margin: 0;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-left: -10px;
margin-top: -5px;
font-family: 'WorkSans-Bold';
}
.title{
font-size: 13px;
@ -62,6 +80,9 @@
white-space: nowrap;
overflow: hidden;
display: block;
margin-left: -10px;
margin-top: -6px;
color: black;
}
}
.image-container{

@ -9,17 +9,101 @@
<ion-content>
<div class="contentBg">
<div class="result-graph" style="padding-top: 12px;">
<div class="result-graph" >
<div class="user-info">
<div class="user-image-container">
<div>
<img style="height: 18px; margin-left: 23px;" src="../assets/imgs/fav.svg">
<!-- <ion-col><img src="../assets/imgs/fav filled.svg"></ion-col> -->
</div>
<div class="user-image">
<img [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div>
<div style="margin-right: 16px;" slot="end" >
<a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}"></a>
<img src="../assets/imgs/call-o.svg"></div>
<!-- <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
<img src="../assets/imgs/profile.svg">
</a> -->
</div>
<div style="margin-top: 18px;">
<h1>{{employee.EMPLOYEE_NAME}}</h1>
<span>{{employee.JOB_NAME}}</span>
<span>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</span>
<!-- <span>{{employee.JOB_NAME}}</span> -->
</div>
<div >
<ion-row>
<ion-col style="border-right: 1px solid rgb(221 221 221);">
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','role')}}</p>
<span class="Boldtext">{{employee.JOB_NAME}}</span>
</ion-col>
<ion-col>
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{employee.EMPLOYEE_NUMBER}}</span>
</ion-col>
</ion-row>
</div>
</div>
<div class="user-actions">
<div >
<ion-row>
<ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment">
<ion-segment-button
value="About"
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
<!-- <ion-label> Team Members</ion-label> -->
<img class="imgSize" src="../assets/imgs/profile.svg">
</ion-segment-button>
<ion-segment-button
value="create-request"
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
<img (click)="getMenuEntries(employee)" class="imgSize" src="../assets/imgs/create-req.svg">
<!-- <ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label> -->
</ion-segment-button>
<ion-segment-button
value="Attendance"
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
<!-- <ion-label>{{ts.trPK('attendance','attendance')}}</ion-label> -->
<img class="imgSize" src="../assets/imgs/view-attendance.svg">
</ion-segment-button>
<ion-segment-button
value="Team Members"
[ngClass]="activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment'">
<!-- <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label> -->
<img class="imgSize" src="../assets/imgs/team-members.svg">
</ion-segment-button>
</ion-segment>
</ion-row>
</div>
<div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="3">
<div class="action-button col-button">
<span>{{ts.trPK('myTeam','profile-details')}}</span>
</div>
</ion-col>
<ion-col [size]="3" (click)="getMenuEntries(employee)">
<div class="action-button col-button">
<span>{{ts.trPK('vacation-rule','create-request')}}</span>
</div>
</ion-col>
<ion-col [size]="3" >
<div class="action-button col-button">
<span>{{ts.trPK('myTeam','view-attendence')}} </span>
</div>
</ion-col>
<ion-col [size]="3" >
<div class="action-button col-button">
<span>{{ts.trPK('myTeam','team-members')}}</span>
</div>
</ion-col>
</ion-row>
</div>
<!-- <div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="4">
<div class="action-button col-button">
@ -46,10 +130,10 @@
</div>
</ion-col>
</ion-row>
</div>
</div> -->
</div>
<div class="segments-container">
<!-- <div class="user-actions">
<ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment">
@ -57,36 +141,49 @@
value="Attendance"
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
<ion-label>{{ts.trPK('attendance','attendance')}}</ion-label>
<img src="../assets/imgs/days.svg">
</ion-segment-button>
<ion-segment-button
value="Team Members"
[ngClass]="[activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment', empSubordinate.length === 0 ? 'disable-phone': '']">
<ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label>
<img src="../assets/imgs/days.svg">
</ion-segment-button>
<ion-segment-button
value="About"
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{ts.trPK('general','about')}}</ion-label>
<ion-label> Team Members</ion-label>
<img src="../assets/imgs/profile.svg">
</ion-segment-button>
<ion-segment-button
value="create-request"
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
<img src="../assets/imgs/create_request_icon.png">
<ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label>
</ion-segment-button>
</ion-segment>
</div>
</div> -->
<!-- <div *ngIf="activeSegment === 'create-request'">
</div> -->
<div *ngIf="activeSegment === 'Attendance'">
<div>
<p style="margin-bottom: 1px;">
<div class="attendence">
<p class="attendence-text">
{{ts.trPK('myTeam','todayAttendance')}}
</p>
<ion-row style="margin: 0 -5px;">
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','check-in')}}</span>
<span style="color: green; ">{{ts.trPK('myTeam','check-in')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
</div>
</ion-col>
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','check-out')}}</span>
<span style="color: red; ">{{ts.trPK('myTeam','check-out')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
</div>
@ -98,16 +195,54 @@
</div>
</ion-col>
</ion-row>
<!-- <ion-row *ngIf="attendanceTrackingList.stats == '' || attendanceTrackingList.stats == '' "> Hello </ion-row>
</div> -->
</div>
<div *ngIf="showAttendence" class="result-graph-attendence">
<div >
<ion-row style="margin-top: 8px; margin-left: 12px;">
<ion-col [size]="8">
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
</ion-col>
<ion-col [size]="4">
<ion-row>
<button (click)="showCalender()" style="background: white; margin-left: 15px;">
<label class="stats" >{{ts.trPK('attendance-tracking','view-days')}}</label>
<img src="../assets/imgs/view-days.svg">
</button>
</ion-row>
</ion-col>
</ion-row>
</div>
<div class="header">
<div>
<div>
<ion-row >
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
<app-card-calendar
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-calendar>
</ion-slide>
</ion-slides>
</ion-row>
</div>
<!--
<ion-row *ngIf="direction == 'en'">
<ion-col [size]="2" style="text-align: left;">
<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>
<span class="month-year-span">{{month}} </span>
</ion-col>
<ion-col [size]="2" style="text-align: right;">
<ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
@ -119,72 +254,137 @@
<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>
<span class="month-year-span">{{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>
</ion-row> -->
</div>
</div>
<div class="result-graph">
<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">
<div class="green-label-container">
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
<span class="span-two">{{attendedDays}}</span>
<div>
<ion-row class="attendance-summary">
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','schedule')}}</span>
<h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="2">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','off-days')}}</span>
<h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
</div>
<div class="blue-label-container">
<span class="span-one">{{ts.trPK('attendance','absent')}}</span>
<span class="span-two">{{absentDays}}</span>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
<h2>{{timeCardSummaryData.NOT_ANALYZED_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
<h2>{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
</div>
</ion-col>
</ion-row>
</div>
<div style="position: relative;">
<div class="label-container">
<ion-row>
<label class="green-label-container"> </label>
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
<span class="span-two">{{attendedDays}}</span>
</ion-row>
</div>
<div class="label-container">
<ion-row>
<label class="blue-label-container"> </label>
<span class="spa-one">{{ts.trPK('attendance','absent')}}</span>
<span class="spa-two">{{absentDays}}</span>
</ion-row>
</div>
<div class="graph-container">
<div class="result-text-container">
<h2>{{totalAttendancePrecentage}}</h2>
<span>{{ts.trPK('absenceList','days')}}</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options" ></p-chart>
</div>
</div>
</div>
<!-- //////////////////////////////////CALENDAR/////////////////////////////////////////////////////// -->
<div *ngIf="!showAttendence">
<div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
<div>
<ion-row style="margin-top: 8px; margin-left: 12px;">
<ion-col [size]="8">
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
</ion-col>
<ion-col [size]="4">
<ion-row>
<button (click)="showCalender()" style="background: white; margin-left: 15px; margin-top: 6px;">
<label class="stats" >{{ts.trPK('attendance-tracking','view-stats')}}</label>
<img src="../assets/imgs/view-stats.svg">
</button>
</ion-row>
</ion-col>
</ion-row>
</div>
<div class="header">
<div>
<div>
<ion-row >
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
<app-card-calendar
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-calendar>
</ion-slide>
</ion-slides>
</ion-row>
</div>
<ion-row class="attendance-summary">
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','schedule')}}</span>
<h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','off-days')}}</span>
<h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
<h2>{{timeCardSummaryData.NOT_ANALYZED_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
<h2>{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
</div>
</ion-col>
</ion-row>
<!-- <ion-row *ngIf="direction == 'en'">
<ion-col [size]="2" style="text-align: left;">
<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}} </span>
</ion-col>
<ion-col [size]="2" style="text-align: right;">
<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>
<div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
<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">{{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>
<app-circle-calendar
[currentDateParent]="currentDate"
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
@ -192,11 +392,18 @@
(currentYear)=changeYear($event)>
</app-circle-calendar>
</div>
</div>
</div>
<div *ngIf="activeSegment === 'Team Members'">
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<div style="margin-top: -23px;">
<ion-row>
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
<ion-col> <div class="number"><p class="numberEmp">{{EmpTotal}}</p></div></ion-col>
</ion-row>
</div>
<!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
@ -214,16 +421,16 @@
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
</ion-col>
</ion-row>
</div>
</div> -->
<div *ngIf="isSearch">
<!-- <div *ngIf="isSearch">
<ion-row class="search-container">
<ion-col style="float: left;" size=[6] (click)="clearSearchTwo()">
<span style="margin-left: 5px;">{{ts.trPK('work-list','clear-search')}}</span>
<ion-icon name="close" ></ion-icon>
</ion-col>
</ion-row>
</div>
</div> -->
<ng-container *ngFor="let subordinate of empSubordinate;let i=index">
<app-employee-information
@ -234,6 +441,7 @@
(onGetDetails)="getDetails(i)">
</app-employee-information>
</ng-container>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
@ -241,12 +449,15 @@
</div>
<div class="employee-information-indetail" *ngIf="activeSegment === 'About'">
<ion-row>
<ion-col [size]="6" [ngStyle]="direction == 'en' ? {'border-right': '1px solid #ccc'} : {'border-left': '1px solid #ccc'}">
<ion-row style=" padding-left: 13px;">
<!-- <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> -->
<ion-col>
<p style="font-size: 16px; font-family: WorkSans-Bold; margin-top: 15px;">{{ts.trPK('userProfile','profile-details')}}</p>
</ion-col>
<ion-col [size]="6">
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','category')}}</h2>
<p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
</ion-col>
@ -270,10 +481,10 @@
<h2>{{ts.trPK('userProfile','payrol')}}</h2>
<p>{{employee.PAYROLL_NAME}}</p>
</ion-col>
<ion-col [size]="12">
<!-- <ion-col [size]="12">
<h2>{{ts.trPK('userProfile','orgEmail')}}</h2>
<p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p>
</ion-col>
</ion-col> -->
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','position')}}</h2>
<p>{{employee.POSITION_NAME}}</p>

@ -32,11 +32,19 @@ ion-title{
text-align: center;
margin-bottom: 15px;
.user-image-container{
position: relative;
width: 80px;
height: 80px;
display: block;
margin: 0 auto;
position: relative;
width: 100%;
height: 24px;
justify-content: space-between;
display: flex;
margin: 0 auto;
align-items: center;
}
// position: relative;
// width: 80px;
// height: 80px;
// display: block;
// margin: 0 auto;
// &:before{
// position: absolute;
// content: "";
@ -53,16 +61,27 @@ ion-title{
// background-color: green !important;
// }
}
@media screen and (min-width: 1px) and (max-width:767px){
.user-image{
overflow: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
margin: 0px auto 6px;
}
position: relative;
display: block;
width: 30%;
height: 100%;
border-radius: 80px;
/* border: 1px solid #ccc; */
margin-top: -125px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.user-image{
position: relative;
display: block;
width: 30%;
height: 100%;
border-radius: 80px;
margin-bottom: 371px;
}}
h1{
margin: 0;
padding: 0;
@ -71,18 +90,20 @@ ion-title{
margin-bottom: 4px;
}
span{
font-size: 14px;
font-size: 11px;
display: block;
color: #888
// color: #888
}
}
$actionBtnSize : 36px;
.user-actions{
text-align: center;
.action-button{
font-size: 11px;
white-space: nowrap;
color: #888;
font-weight: bold;
// white-space: nowrap;
// color: #888;
.action-button-icon{
width: $actionBtnSize;
height: $actionBtnSize;
@ -104,19 +125,24 @@ ion-title{
margin-top: 15px;
border-radius: 20px;
margin-bottom: 15px;
border-radius: 20px;
border: 1px solid #ccc;
ion-col{
padding: 15px;
border-bottom: 1px solid #ccc;
// border-bottom: 1px solid #ccc;
}
h2{
font-size: 13px;
font-family: WorkSans-Bold;
// font-family: WorkSans-Bold;
margin: 0;
font-weight: bold;
color: rgb(128, 124, 124);
}
p{
font-size: 13px;
margin: 0;
font-family: WorkSans-Bold;
// margin-bottom: 10px;
}
}
@ -128,28 +154,80 @@ ion-title{
color: black;
}
.active-Segment {
font-size: 0.3cm !important;
background: #269DB8 !important;
text-transform: none;
--color-checked: none;
border-radius: 100px;
border:0;
}
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm !important;
text-transform: none;
--color-checked: none;
border: 0;
}
@media screen and (min-width: 1px) and (max-width:767px){
.active-Segment {
width: 11%;
max-width: 11%;
min-width: 11%;
height: 30% !important;
min-height: 36px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 22px;
margin-left: 22px;
background-color: #269DB8;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.active-Segment{
width: 11%;
max-width: 11%;
min-width: 11%;
height: 56% !important;
min-height: 68px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 62px;
margin-left: 45px;
background: #269DB8 !important;
padding-left: 17px;}}
@media screen and (min-width: 1px) and (max-width:767px){
.normal-Segment {
width: 11%;
max-width: 11%;
min-width: 11%;
height: 30% !important;
min-height: 36px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 22px;
margin-left: 22px;
background: #414040 !important;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.normal-Segment{
width: 11%;
max-width: 11%;
min-width: 11%;
height: 56% !important;
min-height: 68px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 62px;
margin-left: 45px;
background: #414040 !important;
padding-left: 17px;}}
@media screen and (min-width: 1px) and (max-width:767px){
.imgSize{
position: absolute;
/* right: 15px; */
top: 0;
bottom: 0;
left: 7px;
margin: auto;
height: 18px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.imgSize{position: absolute;
top: 0;
bottom: 0;
left: 9px;
margin: auto;
height: 28px;}}
.colum-container{
padding: 15px;
border-bottom: 1px solid #ccc;
@ -207,7 +285,8 @@ ion-title{
/////////////////////////////////////////////////////// Attendance ///////////////////////
.header{
margin-top: 20px;
// margin-top: 20px;
margin-top: 1px;
}
.slidPrev{
@ -244,14 +323,47 @@ ion-title{
/* margin-left: 136px; */
margin-right: -251px;
}
@media screen and (min-width: 1px) and (max-width:767px){
.result-graph {
position: relative;
background: white;
margin-top: 20px;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 56px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 12px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.result-graph {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 89px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 114px !important;
}}
.result-graph-attendence {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 20px;
border: 1px solid #ccc;
}
.request-heading {
@ -273,7 +385,7 @@ ion-title{
padding: 0;
margin: 0;
position: absolute;
left: 50%;
left: 85%;
top: 50%;
display: block;
text-align: center;
@ -293,8 +405,12 @@ ion-title{
}
}
.today-graph {
width: 100%;
// width: 100%;
max-height: 4cm;
display: block;
height: 132px;
width: 264px;
margin-left: 154px;
}
.green-label{
@ -359,7 +475,10 @@ ion-title{
.attendance-information{
background: white;
border-radius: 20px;
padding: 10px;
padding: 9px;
font-weight: bolder;
// border-right: 1px solid rgb(221, 221, 221);
@media screen and (min-width: 300px) and (max-width:359px) {
h2{
padding: 0;
@ -369,45 +488,100 @@ ion-title{
span{
font-size: 9px;
}
}
@media screen and (min-width: 360px) {
h2{
padding: 0;
margin: 0;
font-size: 18px;
font-size: 14px;
}
span{
font-size: 11px;
margin-bottom: 3px;
}
}
}
.month-year-span{
font-size: 20px;
font-family: WorkSans-Bold;
font-size: 16px;
// font-family: WorkSans-Bold;
font-weight: bold;
}
.green-label-container{
border-top: 5px solid #269DB8;
padding: 1px 0px;
margin: 15px 0px
// border-top: 5px solid #269DB8;
// padding: 1px 0px;
// margin: 15px 0px
width: 12px;
height: 12px;
padding-right: -10px;
border-radius: 100%;
background-color: #269DB8;
}
.blue-label-container{
border-top: 5px solid #292F42;
padding: 1px 0px;
margin: 15px 0px
// border-top: 5px solid #292F42;
// padding: 1px 0px;
// margin: 15px 0px
width: 12px;
height: 12px;
padding-right: -10px;
border-radius: 100%;
background-color: #292F42;
margin-top: 30px;
}
.span-one{
// display: block;
// font-size: 12px;
// color: black;
display: block;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: -2px;
font-weight: bold;
}
.span-two{
// display: block;
// font-size: 22px;
display: block;
font-size: 22px;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: -2px;
font-weight: bold;
font-family: WorkSans-Bold;
}
.spa-one{
// display: block;
// font-size: 12px;
// color: black;
display: block;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: 28px;
font-weight: bold;
}
.spa-two{
// display: block;
// font-size: 22px;
display: block;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: 28px;
font-weight: bold;
font-family: WorkSans-Bold;
}
.graph-container{
margin-left: -50px;
@ -416,10 +590,12 @@ ion-title{
}
.label-container{
position: absolute;
width: 20%;
right: 30px;
// width: 20%;
// right: 30px;
top: 50%;
margin-top: -60px;
margin-top: -27px;
left: 20px;
}
.attendance-summary .attendance-information {
span{
@ -428,8 +604,10 @@ ion-title{
line-height: 14px;
}
h2{
text-align: right;
font-family: WorkSans-Bold;
// text-align: right;
// font-family: WorkSans-Bold;
font-weight: bolder;
font-size: 13px;
}
}
@ -437,8 +615,10 @@ ion-title{
.calendar-container{
background: white;
margin-bottom: 100px;
margin-top: 20px;
margin-top: 10px;
border-radius: 20px;
border: 1px solid #ccc;
padding-bottom: 25px;
span{
text-align: left;
display: block;
@ -462,4 +642,76 @@ ion-title{
}
.Boldtext{
font-size: 13px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
}
.attendence{
position: relative;
background: white;
border-radius: 20px;
border: 1px solid #ccc;
}
.attendence-text{
margin-bottom: 1px;
margin-left: 10px;
font-family: WorkSans-Bold;
font-size: 16px;
}
.stats{
color: #289DB8; font-size: 9px;
margin-right: 5px;
font-family: 'WorkSans-Bold';
}
.text{
font-size: 16px;
font-weight: bolder;
font-family: 'WorkSans-Bold';
margin-top: 27px;
}
.number{
width: 20px;
height: 20px;
padding-right: -10px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 26px;
}
.numberEmp{
color: white;
font-size: 13px;
font-weight: bolder;
margin-left: 6px;
}
.slider-container{
padding-bottom: 20px;
}
.filters-row {
margin-top: 10px;
margin-left: 20px;
}
.disable-filter {
pointer-events: none;
opacity: .3;
}

@ -57,7 +57,8 @@ export class DetailsComponent implements OnInit {
public yearTitle: string;
public activeMonth: any;
public currentMonthName = '';
public showAttendence = false;
public showData = false;
public currentYear = new Date().getFullYear();
public attendanceTrackingList: any = [];
@ -67,6 +68,7 @@ export class DetailsComponent implements OnInit {
year: any;
preMonth: number;
nextMonth: any;
currentMonth: any;
public direction: string;
public options = {
cutoutPercentage: 80,
@ -85,8 +87,128 @@ export class DetailsComponent implements OnInit {
// 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;
public EmpTotal = [];
public selectedFilter = '';
public itemType = '';
public monthNo : any;
public filters = [
{
// value: '',
name: 'JAN',
active: true,
color: '#0a0a0a',
key: 'January',
monthNo: 1,
disable: false
},
{
// value: '',
name: 'FEB',
active: false,
color: '#0a0a0a',
key: 'February',
monthNo: 2,
disable: false
},
{
// value: '',
name: 'MAR',
active: false,
color: '#0a0a0a',
key: 'March',
monthNo: 3,
disable: false
},
{
// value: '',
name: 'APRIL',
active: false,
color: '#0a0a0a',
key: 'April',
monthNo: 4,
disable: false
},
{
// value: '',
name: 'MAY',
active: false,
color: '#0a0a0a',
key: 'May',
monthNo: 5,
disable: false
},
{
// value: '',
name: 'JUN',
active: false,
color: '#0a0a0a',
key: 'June',
monthNo: 6,
disable: false
},
{
// value: '',
name: 'JUL',
active: false,
color: '#0a0a0a',
key: 'July',
monthNo: 7,
disable: false
},
{
// value: '',
name: 'AUG',
active: false,
color: '#0a0a0a',
key: 'Augest',
monthNo: 8,
disable: false
},
{
// value: '',
name: 'SEP',
active: false,
color: '#0a0a0a',
key: 'September',
monthNo: 9,
disable: false
},
{
// value: '',
name: 'NOV',
active: false,
color: '#0a0a0a',
key: 'November',
monthNo: 10,
disable: false
},
{
// value: '',
name: 'OCT',
active: false,
color: '#0a0a0a',
key: 'October',
monthNo: 11,
disable: false
},
{
// value: '',
name: 'DEC',
active: false,
color: '#0a0a0a',
key: 'December',
monthNo: 12,
disable: false
}
];
public slideOptsOne = {
slidesPerView: 7,
spaceBetween: 1
};
constructor(
public timeCardService: TimeCardService,
public menuService: MenuService,
@ -106,6 +228,8 @@ export class DetailsComponent implements OnInit {
this.showAttendanceTracking();
// tslint:disable-next-line: max-line-length
this.currentMonthName = this.direction === 'en' ? this.common.getMonthName(this.monthIndex) : this.common.getMonthNameAr(this.monthIndex);
this.getSuborinatesAttStatus();
}
showAttendanceTracking() {
@ -130,6 +254,7 @@ export class DetailsComponent implements OnInit {
}
}
initAttendance() {
this.data = {};
// tslint:disable-next-line: max-line-length
@ -176,6 +301,17 @@ export class DetailsComponent implements OnInit {
});
}
monthCardSliders(monthNo){
console.log(monthNo+"__________________")
// this.common.startLoading();
// this.showData = false;
// this.currentMonth = this.nextMonth - 1;
// this.currentDate = new Date(this.currentYear, (this.preMonth + 1), 1);
this.calendarConfig(this.getMonthName(this.monthNo) , this.currentYear);
console.log("next month =" + this.nextMonth );
console.log(" Month Name =" + this.currentMonthName);
}
nextSlide() {
if (this.currentMonthName !== this.month) {
@ -189,6 +325,7 @@ export class DetailsComponent implements OnInit {
this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
this.nextMonth = this.nextMonth + 1;
this.preMonth = this.nextMonth - 2;
}
}
@ -276,15 +413,24 @@ export class DetailsComponent implements OnInit {
this.totalAttendancePrecentage = this.absentDays + this.attendedDays;
if (this.totalAttendancePrecentage > 0) {
this.data = {
// labels: ['Apsent', 'Present'],
datasets: [
{
label: "# of Votes",
data: [this.absentDays, this.attendedDays],
backgroundColor: [
'#269DB8',
'black',
'#269DB8'
],
borderWidth: 2
}]
borderWidth: 1,
// cutoutPrecentage:20 ,
}],
labels: [
'Apsent',
'Present'
]
};
}
}
@ -546,4 +692,75 @@ doInfinite(infiniteScroll) {
this.showEmailInput = true;
}
}
showCalender(){
if(this.showAttendence){
this.showAttendence = false
}else{
this.showAttendence = true
}
}
getSuborinatesAttStatus(){
const request = {
// VersionID:2.8,
// Channel:37,
// LanguageID:2,
// MobileType:"android",
// P_SESSION_ID:1142449920,
// MobileNumber:"0508079569",
// TokenID:"VHR_Token",
// P_USER_NAME:"111209",
// UserName:"111209",
// P_EMAIL_ADDRESS:"Faisal.AlQurashi@cloudsolutions.com.sa",
SearchMonth:"January",
SearchYear:2021
};
// this.myTeamService.getSuborinatesAttStatus().subscribe((result: any) =>
this.myTeamService.getSuborinatesAttStatus(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleRespondSuborinatesAttStatusResult(result);
})
}
handleRespondSuborinatesAttStatusResult(result){
// this.EmpTotal = result.GetSubordinatesAttdStatusList.length;
this.EmpTotal = result.GetSubordinatesAttdStatusList[0].NUMBER_OF_EMPLOYEES;
console.log("total no "+this.EmpTotal)
}
activeFilter(index: number) {
console.log(this.filters);
if (this.currentActiveIndex !== index) {
this.previousActiveIndex = this.currentActiveIndex;
this.currentActiveIndex = index;
this.filters[this.previousActiveIndex].active = false;
this.filters[this.currentActiveIndex].active = true;
this.selectedFilter = this.filters[this.currentActiveIndex].key;
}
}
disableFilters() {
for (const filter of this.filters) {
if (filter.key === this.itemType) {
filter.disable = false;
filter.active = true;
// filter.value = this.nextMonth - 1;
this.selectedFilter = filter.name;
} else if (this.itemType === '') {
filter.disable = false;
filter.active = false;
} else {
filter.disable = true;
filter.active = false;
}
}
if (this.itemType === '') {
this.filters[0].active = true;
}
}
}

@ -7,7 +7,54 @@
<ion-content>
<div class="contentBg">
<div class="result-graph">
<div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','search-by')}}</span>
</div>
<div>
<ion-row class="custom-radio">
<!-- <ion-col [size]="3" class="search-dropdown" no-padding> -->
<ion-radio-group [(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)" class="radio-list">
<ion-radio value="Name" [checked]="this.searchKeySelect === 'Name'" [color]="myColor" >{{ts.trPK('searchForReplacment','name')}}</ion-radio>
<ion-label class="text-label" >{{ts.trPK('searchForReplacment','name')}}</ion-label>
<ion-radio value="User Name" [checked]="this.searchKeySelect === 'User Name'" [color]="myColor" >{{ts.trPK('searchForReplacment','userName')}}</ion-radio>
<ion-label class="text-label">{{ts.trPK('searchForReplacment','userName')}}</ion-label>
<ion-radio value="Email" [checked]="this.searchKeySelect === 'Email'" [color]="myColor" >{{ts.trPK('searchForReplacment','email')}}</ion-radio>
<ion-label class="text-label">{{ts.trPK('searchForReplacment','email')}}</ion-label>
</ion-radio-group>
</ion-row>
<!-- <ion-row>
<ion-input placeholder="Search by" class="search-label"[(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)" ></ion-input>
</ion-row> -->
<ion-row>
<ion-col class="search-label">
<ion-input *ngIf="showEmailInput" placeholder="Search by Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder ="Search by Name or Username" [(ngModel)]="searchNameOrUserName"></ion-input>
</ion-col>
</ion-row>
</div>
<!-- <div class="result-text-container">
<h2>{{totalEmployees}}</h2>
<span>{{ts.trPK('myTeam','total')}} <br> {{ts.trPK('myTeam','team-members')}}</span>
</div> -->
</div>
<div>
<ion-row>
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
<ion-col> <div class="number"><p class="numberEmp">{{EmpTotal}}</p></div></ion-col>
</ion-row>
</div>
<!-- <div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','team-stats')}}</span>
</div>
@ -17,7 +64,7 @@
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div> -->
<!-- <ion-row class="filters-row">
<ion-slides [options]="slideOptsOne">
@ -33,7 +80,7 @@
</ion-slides>
</ion-row> -->
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
@ -44,14 +91,17 @@
</ion-select>
</ion-col>
<ion-col [size]="7" class="input-container" no-padding>
<ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder ="{{ts.trPK('general','search')}}" [(ngModel)]="searchNameOrUserName"></ion-input>
</ion-col>
<ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployee()">
</ion-col>
<ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployee()">
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
</ion-col>
</ion-row>
</div>
</div> -->
<div *ngIf="isSearch">
<ion-row class="search-container">
@ -77,5 +127,9 @@
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</ion-content>

@ -30,20 +30,37 @@ ion-content {
}
.request-heading {
span {
text-align: center;
// text-align: center;
// display: block;
// padding-top: 8px;
// font-family: workSans-Regular;
display: block;
padding-top: 8px;
font-family: workSans-Regular;
padding-left: 15px;
font-weight: bold;
font-size: 12px;
margin-top: 9px;
}
}
.search-label{
border: 1px solid #ccc;
margin-left: 15px;
margin-right: 15px;
border-radius: 22px;
margin-top: 24px;
font-size: 11px;
color: rgb(143, 141, 141);
}
.result-graph {
position: relative;
background: white;
margin-top: 20px;
padding-bottom: 20px;
padding-bottom: 35px;
border-radius: 20px;
z-index: 1;
border: 1px solid #ccc;
}
.result-text-container {
padding: 0;
@ -139,7 +156,7 @@ ion-content {
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
border: 1px solid rgb(170, 169, 169);
margin: 0px auto 6px;
}
@ -162,3 +179,64 @@ ion-content {
}
}
}
// .myClass .toggle-icon {
// background-color: purple; // this changes the background, ie the grey stripe.
// .toggle-inner {
// background-color: yellow; // this changes the backgroundcolor of the toggle dot.
// }
// }
.text-label{
--color: black !important;
font-size: 13px;
margin-left: 15px;
margin-right: 18px;
}
.radio-list{
background: white;
margin-left: 18px;
/* margin-right: 10px; */
margin-top: 12px;
}
// .selected .radio-icon {
// border-color: #0064D9;
// color: red;
// }
.radio-icon{
.custom-radio .radio-icon {
margin: 0px;
border-radius: 50%;
border-width: var(--border-width);
border-style: var(--border-style);
border-color: #dcdcdc;
margin-top: 6px !important;
border-color: #d8d4d4 !important;}
}
.text{
font-size: 16px;
font-weight: bolder;
font-family: 'WorkSans-Bold';
margin-top: 27px;
}
.number{
width: 20px;
height: 20px;
padding-right: -10px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 26px;
}
.numberEmp{
color: white;
font-size: 13px;
font-weight: bolder;
margin-left: 6px;
}

@ -7,6 +7,7 @@ import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-respo
import { MyTeamService } from '../service/my-team.service';
import { ModalController, IonInfiniteScroll } from '@ionic/angular';
import { DetailsComponent } from '../details/details.component';
import { Body } from '@angular/http/src/body';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
@ -28,6 +29,8 @@ export class HomeComponent implements OnInit {
public selEmpNo: any;
public totalEmployees = 0;
public pageFirstVisit = false;
myColor: string = 'secondary';
public EmpTotal = [];
public options = {
cutoutPercentage: 80,
@ -95,7 +98,13 @@ export class HomeComponent implements OnInit {
ngOnInit() {
this.common.sharedService.setSharedData( [], DetailsComponent.opendEmployeesARR);
this.setIntitial();
this.getSuborinatesAttStatus();
}
toggleColor() {
this.myColor = 'secondary';
// this.myColor = '#269DB8'
}
// activeFilter(index: number) {
// this.previousActiveIndex = this.currentActiveIndex;
@ -228,4 +237,36 @@ export class HomeComponent implements OnInit {
this.showEmailInput = true;
}
}
getSuborinatesAttStatus(){
const request = {
// VersionID:2.8,
// Channel:37,
// LanguageID:2,
// MobileType:"android",
// P_SESSION_ID:1142449920,
// MobileNumber:"0508079569",
// TokenID:"VHR_Token",
// P_USER_NAME:"111209",
// UserName:"111209",
// P_EMAIL_ADDRESS:"Faisal.AlQurashi@cloudsolutions.com.sa",
SearchMonth:"January",
SearchYear:2021
};
// this.myTeamService.getSuborinatesAttStatus().subscribe((result: any) =>
this.myTeamService.getSuborinatesAttStatus(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleRespondSuborinatesAttStatusResult(result);
})
}
handleRespondSuborinatesAttStatusResult(result){
// this.EmpTotal = result.GetSubordinatesAttdStatusList.length;
this.EmpTotal = result.GetSubordinatesAttdStatusList[0].NUMBER_OF_EMPLOYEES;
console.log("total no "+this.EmpTotal)
}
}

@ -7,6 +7,7 @@ import { AuthenticationService } from "src/app/hmg-common/services/authenticatio
export class MyTeamService {
public static EMPLOYEE_SHARED_DATA = 'employee';
public static getMyTeam = 'Services/ERP.svc/REST/GET_EMPLOYEE_SUBORDINATES';
public static getSuborinateStatus = 'Services/ERP.svc/REST/GET_SUBORDINATES_ATTD_STATUS';
constructor(
public con: ConnectorService,
private authService: AuthenticationService
@ -16,4 +17,11 @@ export class MyTeamService {
this.authService.authenticateRequest(request);
return this.con.post(MyTeamService.getMyTeam, request, onError, errorLabel);
}
public getSuborinatesAttStatus(absence: any, onError?: any, errorLabel?: string){
const request = absence;
this.authService.authenticateRequest(request);
return this.con.post(MyTeamService.getSuborinateStatus, request, onError, errorLabel);
}
}

@ -30,16 +30,15 @@
<label class="stepHeaderLebal">{{ 'vacation-rule, apply-for-vacation-rule' | translate}} </label><br>
<label class="stepHeaderLebal"> {{ 'vacation-rule, step-1' | translate}}</label>
</div>
<ion-item class="selectItem">
<ion-label>{{'vacation-rule, itemType' | translate}}</ion-label>
<ion-select mode="ios" okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
[(ngModel)]="index" (ionChange)="vacationRuleSel($event)" required>
<ion-select-option [selected]="x.ITEM_TYPE_DISPLAY_NAME" value="{{i}}"
*ngFor="let x of ruleTypeList; let i=index;">
{{x.ITEM_TYPE_DISPLAY_NAME}} </ion-select-option>
</ion-select>
</ion-item>
<!-- //// okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'/// -->
<div class="selectItem">
<label class="label">{{'vacation-rule, itemType' | translate}}</label>
<select class="label-Select" [(ngModel)]="index" (ionChange)="vacationRuleSel($event)" required>
<option [selected]="x.ITEM_TYPE_DISPLAY_NAME" value="{{i}}"
*ngFor="let x of ruleTypeList; let i=index;">
{{x.ITEM_TYPE_DISPLAY_NAME}} </option>
</select>
</div>
</ion-row>

@ -162,3 +162,72 @@ color: black !important;
// .cusprogressbar li.active:before {
// background-color: #209a83;
// }
.label-Select{
color: var(--dark);
font-size: 15px;
border: none;
font-weight: 400;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 80%;
// padding: 1px 0px;
background-color: var(--light);
border-bottom: var(--cusgray) solid 1px;
border-radius: 0px;
// margin-left: 20px;
margin-left: 34px;
margin-top: -10px;
// -webkit-appearance: none;
// -moz-appearance: none;
text-indent: 1px;
// text-overflow: '';
box-shadow: none;
-webkit-box-shadow:none;
-moz-box-shadow: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
:root[dir="ltr"]{
background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-right: 20px;
}
:root[dir="rtl"]{
background-image: linear-gradient(-135deg, #999 50%, transparent 50%),linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-left: 20px;
}
}
.label{
font-size: 16px;
// margin-left: 15px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
white-space: normal;
// padding-top: 10px;
// padding: 5px 0px;
padding-left: 10px !important;
margin: 10px auto;
:root[dir="ltr"]{
font-family: var(--fontFamilySemiBoldEN) !important;
}
:root[dir="rtl"]{
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold;
}
}

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<g id="Group_7231" data-name="Group 7231" transform="translate(-111.351 -245.557)">
<circle id="Ellipse_152" data-name="Ellipse 152" cx="15" cy="15" r="15" transform="translate(111.351 245.557)" fill="#1fa169"/>
<path id="Path_13" data-name="Path 13" d="M11.706,9.111c-.791-.676-1.593-1.086-2.375-.411l-.466.408c-.341.3-.976,1.681-3.429-1.141S4.443,4.71,4.785,4.416l.469-.409c.777-.677.484-1.529-.077-2.406L4.839,1.07C4.276.2,3.663-.38,2.884.3L2.463.664A3.952,3.952,0,0,0,.922,3.279C.641,5.138,1.528,7.266,3.559,9.6s4.014,3.51,5.895,3.489a3.962,3.962,0,0,0,2.8-1.161l.422-.368c.777-.675.294-1.363-.5-2.041Z" transform="translate(119.204 254.187)" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 769 B

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.572" height="21" viewBox="0 0 19.572 21">
<g id="phone-receiver-silhouette" transform="translate(-0.872 0)">
<path id="Path_13" data-name="Path 13" d="M18.252,14.616c-1.269-1.085-2.556-1.742-3.809-.659l-.748.655c-.547.475-1.565,2.7-5.5-1.831S6.6,7.556,7.149,7.085L7.9,6.429c1.246-1.086.776-2.453-.123-3.86l-.543-.852C6.332.313,5.349-.609,4.1.475l-.675.59A6.339,6.339,0,0,0,.953,5.26C.5,8.242,1.924,11.656,5.182,15.4s6.439,5.63,9.456,5.6a6.356,6.356,0,0,0,4.5-1.862l.678-.591c1.246-1.083.472-2.186-.8-3.274Z" transform="translate(0 0)" fill="#259cb8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 622 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.876" height="17.876" viewBox="0 0 17.876 17.876">
<g id="new-page" transform="translate(-1 -1)">
<path id="Path_14" data-name="Path 14" d="M20.7,7H7.6a.6.6,0,0,0-.6.6V20.7a.6.6,0,0,0,.6.6H20.7a.6.6,0,0,0,.6-.6V7.6A.6.6,0,0,0,20.7,7Zm-2.979,7.746H14.746v2.979H13.554V14.746H10.575V13.554h2.979V10.575h1.192v2.979h2.979Z" transform="translate(-2.425 -2.425)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M15.3,3.383V1.6a.6.6,0,0,0-.6-.6H1.6a.6.6,0,0,0-.6.6V14.7a.6.6,0,0,0,.6.6H3.383V5.171A1.788,1.788,0,0,1,5.171,3.383Z" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 619 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.876" height="17.876" viewBox="0 0 17.876 17.876">
<g id="new-page" transform="translate(-1 -1)">
<path id="Path_14" data-name="Path 14" d="M20.7,7H7.6a.6.6,0,0,0-.6.6V20.7a.6.6,0,0,0,.6.6H20.7a.6.6,0,0,0,.6-.6V7.6A.6.6,0,0,0,20.7,7Zm-2.979,7.746H14.746v2.979H13.554V14.746H10.575V13.554h2.979V10.575h1.192v2.979h2.979Z" transform="translate(-2.425 -2.425)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M15.3,3.383V1.6a.6.6,0,0,0-.6-.6H1.6a.6.6,0,0,0-.6.6V14.7a.6.6,0,0,0,.6.6H3.383V5.171A1.788,1.788,0,0,1,5.171,3.383Z" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 619 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14.004" height="13.318" viewBox="0 0 14.004 13.318">
<path id="Path_4" data-name="Path 4" d="M18.964,10.97a.368.368,0,0,0-.343-.255l-4.738-.1L12.328,6.157a.368.368,0,0,0-.7,0L10.077,10.62l-4.738.1a.368.368,0,0,0-.214.662L8.9,14.231,7.528,18.753a.368.368,0,0,0,.562.409l3.89-2.7,3.89,2.7a.368.368,0,0,0,.562-.409L15.06,14.231l3.775-2.854A.368.368,0,0,0,18.964,10.97Z" transform="translate(-4.978 -5.91)" fill="#259cb8"/>
</svg>

After

Width:  |  Height:  |  Size: 476 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.025" height="14.335" viewBox="0 0 15.025 14.335">
<path id="Path_4" data-name="Path 4" d="M18.964,10.97a.368.368,0,0,0-.343-.255l-4.738-.1L12.328,6.157a.368.368,0,0,0-.7,0L10.077,10.62l-4.738.1a.368.368,0,0,0-.214.662L8.9,14.231,7.528,18.753a.368.368,0,0,0,.562.409l3.89-2.7,3.89,2.7a.368.368,0,0,0,.562-.409L15.06,14.231l3.775-2.854A.368.368,0,0,0,18.964,10.97Z" transform="translate(-4.467 -5.41)" fill="none" stroke="#259cb8" stroke-width="1"/>
</svg>

After

Width:  |  Height:  |  Size: 507 B

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.663" height="17.821" viewBox="0 0 15.663 17.821">
<g id="user_19_" data-name="user (19)" transform="translate(-31)">
<g id="Group_7233" data-name="Group 7233" transform="translate(34.133)">
<g id="Group_7232" data-name="Group 7232">
<path id="Path_16" data-name="Path 16" d="M125.7,0a4.7,4.7,0,1,0,4.7,4.7A4.7,4.7,0,0,0,125.7,0Z" transform="translate(-121)" fill="#fff"/>
</g>
</g>
<g id="Group_7235" data-name="Group 7235" transform="translate(31 10.442)">
<g id="Group_7234" data-name="Group 7234">
<path id="Path_17" data-name="Path 17" d="M44.678,302.026a6.7,6.7,0,0,0-4.8-2.026H37.787a6.7,6.7,0,0,0-4.8,2.026A6.848,6.848,0,0,0,31,306.857a.522.522,0,0,0,.522.522H46.141a.522.522,0,0,0,.522-.522A6.848,6.848,0,0,0,44.678,302.026Z" transform="translate(-31 -300)" fill="#fff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 912 B

@ -0,0 +1,34 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.515" height="19.099" viewBox="0 0 22.515 19.099">
<g id="group_2_" data-name="group (2)" transform="translate(0 -38.84)">
<g id="Group_7238" data-name="Group 7238" transform="translate(17.523 49.151)">
<g id="Group_7237" data-name="Group 7237" transform="translate(0 0)">
<path id="Path_23" data-name="Path 23" d="M400.235,273.32h-1.741a4.53,4.53,0,0,1,.274,1.557v6.581a1.94,1.94,0,0,1-.112.65h2.879a1.952,1.952,0,0,0,1.95-1.95V276.57A3.254,3.254,0,0,0,400.235,273.32Z" transform="translate(-398.494 -273.32)" fill="#fff"/>
</g>
</g>
<g id="Group_7240" data-name="Group 7240" transform="translate(0 49.151)">
<g id="Group_7239" data-name="Group 7239">
<path id="Path_24" data-name="Path 24" d="M4.717,274.878a4.529,4.529,0,0,1,.274-1.557H3.25A3.254,3.254,0,0,0,0,276.571v3.587a1.952,1.952,0,0,0,1.95,1.95H4.829a1.941,1.941,0,0,1-.112-.65Z" transform="translate(0 -273.321)" fill="#fff"/>
</g>
</g>
<g id="Group_7242" data-name="Group 7242" transform="translate(6.017 47.458)">
<g id="Group_7241" data-name="Group 7241" transform="translate(0 0)">
<path id="Path_25" data-name="Path 25" d="M144.06,234.815h-3.981a3.254,3.254,0,0,0-3.25,3.25v6.581a.65.65,0,0,0,.65.65h9.181a.65.65,0,0,0,.65-.65v-6.581A3.254,3.254,0,0,0,144.06,234.815Z" transform="translate(-136.829 -234.815)" fill="#fff"/>
</g>
</g>
<g id="Group_7244" data-name="Group 7244" transform="translate(7.349 38.84)">
<g id="Group_7243" data-name="Group 7243" transform="translate(0 0)">
<path id="Path_26" data-name="Path 26" d="M171.023,38.84a3.908,3.908,0,1,0,3.909,3.909A3.913,3.913,0,0,0,171.023,38.84Z" transform="translate(-167.114 -38.84)" fill="#fff"/>
</g>
</g>
<g id="Group_7246" data-name="Group 7246" transform="translate(1.471 42.483)">
<g id="Group_7245" data-name="Group 7245" transform="translate(0 0)">
<path id="Path_27" data-name="Path 27" d="M36.366,121.689a2.922,2.922,0,1,0,2.923,2.923A2.926,2.926,0,0,0,36.366,121.689Z" transform="translate(-33.443 -121.689)" fill="#fff"/>
</g>
</g>
<g id="Group_7248" data-name="Group 7248" transform="translate(15.198 42.483)">
<g id="Group_7247" data-name="Group 7247" transform="translate(0 0)">
<path id="Path_28" data-name="Path 28" d="M348.53,121.689a2.923,2.923,0,1,0,2.923,2.923A2.926,2.926,0,0,0,348.53,121.689Z" transform="translate(-345.607 -121.689)" fill="#fff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12.339" height="14.601" viewBox="0 0 12.339 14.601">
<g id="calendar_26_" data-name="calendar (26)" transform="translate(-7.31 -1.5)">
<path id="Path_18" data-name="Path 18" d="M7.31,38.632a.993.993,0,0,0,.993.993H18.656a.993.993,0,0,0,.993-.993V30.71H7.31Zm8.545-5.813h1.61v1.61h-1.61Zm0,2.737h1.61v1.61h-1.61Zm-3.179-2.737h1.608v1.61H12.675Zm0,2.737h1.608v1.61H12.675ZM9.492,32.818H11.1v1.61H9.492Zm0,2.737H11.1v1.61H9.492Z" transform="translate(0 -23.523)" fill="#259cb8"/>
<path id="Path_19" data-name="Path 19" d="M54.275,4.755a.175.175,0,0,0,.175-.175v-2.9a.175.175,0,1,0-.35,0v2.9A.175.175,0,0,0,54.275,4.755Z" transform="translate(-37.681)" fill="#259cb8"/>
<path id="Path_20" data-name="Path 20" d="M18.656,9.4H17.114v1.542a.528.528,0,1,1-1.055,0V9.4H10.9v1.542a.528.528,0,1,1-1.053,0V9.4H8.3a1,1,0,0,0-.993.993V13.2H19.649V10.393a1,1,0,0,0-.993-.993Z" transform="translate(0 -6.362)" fill="#259cb8"/>
<path id="Path_21" data-name="Path 21" d="M22.275,4.824a.175.175,0,0,0,.177-.175v-2.9a.177.177,0,0,0-.352,0v2.9a.175.175,0,0,0,.175.175Z" transform="translate(-11.911 -0.069)" fill="#259cb8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,6 @@
<svg id="data-management_1_" data-name="data-management (1)" xmlns="http://www.w3.org/2000/svg" width="14.455" height="14.455" viewBox="0 0 14.455 14.455">
<path id="Path_209" data-name="Path 209" d="M271.424,0H271V6.8h6.8V6.381A6.408,6.408,0,0,0,271.424,0Z" transform="translate(-263.349)" fill="#259cb8"/>
<path id="Path_210" data-name="Path 210" d="M78.084,276.2a6.32,6.32,0,0,0,10.529-4.775V271h-5.33Z" transform="translate(-75.879 -263.349)" fill="#259cb8"/>
<path id="Path_211" data-name="Path 211" d="M98.924,61H98.5a6.31,6.31,0,0,0-3.7,1.2l4.128,4.128Z" transform="translate(-92.12 -59.278)" fill="#259cb8"/>
<path id="Path_212" data-name="Path 212" d="M2.021,122.787a6.25,6.25,0,0,0-.415,8.784l4.6-4.6Z" transform="translate(0 -119.32)" fill="#259cb8"/>
</svg>

After

Width:  |  Height:  |  Size: 778 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.567" height="19.604" viewBox="0 0 16.567 19.604">
<g id="calendar_26_" data-name="calendar (26)" transform="translate(-7.31 -1.5)">
<path id="Path_18" data-name="Path 18" d="M7.31,41.346a1.333,1.333,0,0,0,1.333,1.333h13.9a1.333,1.333,0,0,0,1.333-1.333V30.71H7.31Zm11.472-7.805h2.162V35.7H18.782Zm0,3.675h2.162v2.162H18.782Zm-4.268-3.675h2.159V35.7H14.514Zm0,3.675h2.159v2.162H14.514ZM10.24,33.541H12.4V35.7H10.24Zm0,3.675H12.4v2.162H10.24Z" transform="translate(0 -21.575)" fill="#fff"/>
<path id="Path_19" data-name="Path 19" d="M54.335,5.87a.235.235,0,0,0,.235-.235v-3.9a.235.235,0,0,0-.47,0v3.9a.235.235,0,0,0,.235.235Z" transform="translate(-34.56)" fill="#fff"/>
<path id="Path_20" data-name="Path 20" d="M22.544,9.4h-2.07v2.07a.708.708,0,0,1-1.417,0V9.4H12.127v2.07a.708.708,0,1,1-1.414,0V9.4H8.643A1.336,1.336,0,0,0,7.31,10.733V14.5H23.877V10.733A1.336,1.336,0,0,0,22.544,9.4Z" transform="translate(0 -5.835)" fill="#fff"/>
<path id="Path_21" data-name="Path 21" d="M22.335,5.933a.235.235,0,0,0,.238-.235V1.8a.238.238,0,0,0-.473,0V5.7a.235.235,0,0,0,.235.235Z" transform="translate(-10.924 -0.063)" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12.339" height="14.601" viewBox="0 0 12.339 14.601">
<g id="calendar_26_" data-name="calendar (26)" transform="translate(-7.31 -1.5)">
<path id="Path_18" data-name="Path 18" d="M7.31,38.632a.993.993,0,0,0,.993.993H18.656a.993.993,0,0,0,.993-.993V30.71H7.31Zm8.545-5.813h1.61v1.61h-1.61Zm0,2.737h1.61v1.61h-1.61Zm-3.179-2.737h1.608v1.61H12.675Zm0,2.737h1.608v1.61H12.675ZM9.492,32.818H11.1v1.61H9.492Zm0,2.737H11.1v1.61H9.492Z" transform="translate(0 -23.523)" fill="#259cb8"/>
<path id="Path_19" data-name="Path 19" d="M54.275,4.755a.175.175,0,0,0,.175-.175v-2.9a.175.175,0,1,0-.35,0v2.9A.175.175,0,0,0,54.275,4.755Z" transform="translate(-37.681)" fill="#259cb8"/>
<path id="Path_20" data-name="Path 20" d="M18.656,9.4H17.114v1.542a.528.528,0,1,1-1.055,0V9.4H10.9v1.542a.528.528,0,1,1-1.053,0V9.4H8.3a1,1,0,0,0-.993.993V13.2H19.649V10.393a1,1,0,0,0-.993-.993Z" transform="translate(0 -6.362)" fill="#259cb8"/>
<path id="Path_21" data-name="Path 21" d="M22.275,4.824a.175.175,0,0,0,.177-.175v-2.9a.177.177,0,0,0-.352,0v2.9a.175.175,0,0,0,.175.175Z" transform="translate(-11.911 -0.069)" fill="#259cb8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,6 @@
<svg id="data-management_1_" data-name="data-management (1)" xmlns="http://www.w3.org/2000/svg" width="14.455" height="14.455" viewBox="0 0 14.455 14.455">
<path id="Path_209" data-name="Path 209" d="M271.424,0H271V6.8h6.8V6.381A6.408,6.408,0,0,0,271.424,0Z" transform="translate(-263.349)" fill="#259cb8"/>
<path id="Path_210" data-name="Path 210" d="M78.084,276.2a6.32,6.32,0,0,0,10.529-4.775V271h-5.33Z" transform="translate(-75.879 -263.349)" fill="#259cb8"/>
<path id="Path_211" data-name="Path 211" d="M98.924,61H98.5a6.31,6.31,0,0,0-3.7,1.2l4.128,4.128Z" transform="translate(-92.12 -59.278)" fill="#259cb8"/>
<path id="Path_212" data-name="Path 212" d="M2.021,122.787a6.25,6.25,0,0,0-.415,8.784l4.6-4.6Z" transform="translate(0 -119.32)" fill="#259cb8"/>
</svg>

After

Width:  |  Height:  |  Size: 778 B

@ -1077,6 +1077,10 @@
"en": "My Profile",
"ar": "معلوماتي"
},
"profile-details": {
"en": "Profile Details",
"ar": "تفاصيل الملف الشخصي"
},
"edit-profile": {
"en": "Edit Profile",
"ar": "تعديل المعلومات"
@ -1125,6 +1129,10 @@
"en": "Employee Detail",
"ar": "بيانات الموظف"
},
"role": {
"en": "Role",
"ar": "Role"
},
"address": {
"en": "Address",
"ar": "العنوان"
@ -1227,7 +1235,7 @@
},
"monthly-attendance-calendar": {
"ar": "سجل الحضور الشهري",
"en": "Monthly Attendance Calendar"
"en": "Monthly Attendance"
},
"completed": {
"ar": "منجز",
@ -1577,6 +1585,10 @@
"en": "Late",
"ar": "التأخير"
},
"search-by": {
"en": "Search By",
"ar": "البحث بواسطة"
},
"attendance-statistics": {
"en": "Attendance Statistics",
"ar": "احصائيات الحضور"
@ -1590,7 +1602,19 @@
"ar": "عدد"
},
"team-members": {
"en": "TEAM MEMBERS",
"en": "Team Members",
"ar": " اعضاء الفريق"
},
"view-attendence": {
"en": "View Attendance",
"ar": " عرض الحضور"
},
"profile-details": {
"en": "Profile Detailes",
"ar": " الملف الشخصي"
},
"my-team-members": {
"en": "My Team Members",
"ar": " اعضاء الفريق"
},
"team-stats": {
@ -2660,7 +2684,7 @@
"ar": "ساعات التقصير"
},
"schedule": {
"en": "Schedule",
"en": "Scheduled Days",
"ar": "ايام العمل"
},
"off-days": {
@ -2671,6 +2695,14 @@
"en": "Non Analyzed",
"ar": "لايوجد تحليل"
},
"view-days": {
"en": "View Days",
"ar": "عرض الأيام"
},
"view-stats": {
"en": "View Stats",
"ar": "عرض الأحصائيات"
},
"attendance-statistics": {
"en": "Attendance Statistics",
"ar": "احصائيات الحضور"

Loading…
Cancel
Save