|
|
|
|
<ion-header>
|
|
|
|
|
<ion-toolbar class="header-toolbar">
|
|
|
|
|
<ion-buttons slot="start">
|
|
|
|
|
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
|
|
|
|
</ion-buttons>
|
|
|
|
|
<ion-title color="light">{{ts.trPK('attendance','attendance')}}</ion-title>
|
|
|
|
|
</ion-toolbar>
|
|
|
|
|
</ion-header>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ion-content class="colorBG">
|
|
|
|
|
<div class="header-div">
|
|
|
|
|
<div class="header-div">
|
|
|
|
|
<p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p>
|
|
|
|
|
<ion-slides>
|
|
|
|
|
<ion-slide>
|
|
|
|
|
<ion-grid class="headerGrid">
|
|
|
|
|
<div style="color: black;">
|
|
|
|
|
<!-- <ngx-gauge
|
|
|
|
|
[type]="gaugeType"
|
|
|
|
|
[value]="gaugeValue"
|
|
|
|
|
[label]="gaugeLabel">
|
|
|
|
|
</ngx-gauge> -->
|
|
|
|
|
<div class="result-graph">
|
|
|
|
|
|
|
|
|
|
<div class="request-heading">
|
|
|
|
|
|
|
|
|
|
<span>Open Request Analysis</span>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="result-text-container">
|
|
|
|
|
|
|
|
|
|
<h2>287</h2>
|
|
|
|
|
|
|
|
|
|
<span>TOTAL <br> OPEN REQUEST</span>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div style="position: relative;
|
|
|
|
|
left: 79%;
|
|
|
|
|
bottom: 35px;
|
|
|
|
|
color: black;
|
|
|
|
|
background-color: #024d71;
|
|
|
|
|
width: 20%; height: 6px;">
|
|
|
|
|
</div>
|
|
|
|
|
<div style="position: relative;
|
|
|
|
|
left: 79%;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
color: black;
|
|
|
|
|
background-color: #024d71;
|
|
|
|
|
width: 20%; height: 6px;">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
|
|
|
|
|
</ion-slide>
|
|
|
|
|
</ion-slides>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 45%;">
|
|
|
|
|
<ion-grid>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-grid class="labelGrid">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<label style="font-size: 13px;">SCHEDULE</label>
|
|
|
|
|
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<h2 style="margin-left: 45%; font-size: 25px;">23</h2>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-grid class="labelGrid">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<label style="font-size: 12px;">OFF DAYS</label>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<h2 style="margin-left: 45%; font-size: 25px;">08</h2>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-grid class="labelGrid">
|
|
|
|
|
<label style="font-size: 13px;">NON ANALYZED</label>
|
|
|
|
|
<h2 style="margin-left: 45%; font-size: 25px;">01</h2>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-grid class="labelGrid">
|
|
|
|
|
<label style="font-size: 13px;">SHORTAGE HOURS</label>
|
|
|
|
|
<h2 style="margin-left: 45%; font-size: 25px;">03</h2>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</div>
|
|
|
|
|
<div >
|
|
|
|
|
<ion-grid class="bodyGrid">
|
|
|
|
|
<app-circle-calendar></app-circle-calendar>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-content>
|