You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
12 KiB
HTML
315 lines
12 KiB
HTML
|
|
|
|
<!-- <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('payslip','title')}}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header> -->
|
|
|
|
<ion-header>
|
|
<ion-toolbar class="header-toolbar-new">
|
|
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
|
|
<ion-title style="color: white;">{{ts.trPK('payslip','monthly-payslip')}}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="colorBG">
|
|
|
|
<div class="header-div">
|
|
<!-- <ion-buttons slot="start">
|
|
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
|
</ion-buttons>
|
|
<p class="Title">{{ts.trPK('payslip','monthly-payslip')}}</p>
|
|
|
|
<div class="Imgdiv">
|
|
<img class="Imgsrc">
|
|
</div> -->
|
|
</div>
|
|
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
|
|
|
|
|
|
|
|
|
|
<div class="">
|
|
<div class="header">
|
|
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
|
|
|
|
<div>
|
|
<ion-row>
|
|
<ion-col>
|
|
<button ion-button icon-start class="slidBtn" (click)="slidePrev(sliderOne,slideWithNav)">
|
|
<ion-icon [ngClass]=" payslipIndex === GetPayslipList.length-1 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
|
|
</ion-icon>
|
|
</button>
|
|
</ion-col>
|
|
<ion-col>
|
|
<p class="label"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
|
|
|
|
<!-- <label class="label" for="">{{showPaySlip.PAYSLIP_CHOICE}}</label> -->
|
|
|
|
<!-- <label class="p" for="">{{showPaySlip.PERIOD_NAME}}</label> -->
|
|
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
|
|
</ion-col>
|
|
<ion-col>
|
|
<button ion-button icon-end class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
|
|
<ion-icon [ngClass]=" payslipIndex === 0 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
|
|
</ion-icon>
|
|
</button>
|
|
</ion-col>
|
|
</ion-row>
|
|
</div>
|
|
|
|
|
|
<ion-slides [options]="slideOptsOne" #slideWithNav (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
|
|
<ion-slide >
|
|
<ion-grid class="headerGrid">
|
|
|
|
<ion-row >
|
|
<label class="date" for="">{{showPaySlip.PERIOD_START_DATE}}</label>
|
|
<label class="label" for="">{{showPaySlip.PERIOD_END_DATE}}</label>
|
|
</ion-row>
|
|
<div style="color: black;">
|
|
<!-- <ngx-gauge
|
|
*ngFor="let s of showPaySlip"
|
|
[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>{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</h2>
|
|
|
|
<!-- <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>
|
|
|
|
</div>
|
|
<div style="position: relative;
|
|
left: 77%;
|
|
bottom: 117px;
|
|
color: black;
|
|
background-color: #22c6b3;
|
|
width: 20%; height: 6px;">
|
|
<ion-col>
|
|
<ion-row>
|
|
<label class="green-label">{{ts.trPK('payslip','earnings-key')}}</label>
|
|
</ion-row>
|
|
<ion-row>
|
|
<label class="green-amount">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
</div>
|
|
<div style="position: relative;
|
|
left: 77%;
|
|
bottom: 67px;
|
|
color: black;
|
|
background-color: #094875;
|
|
width: 20%; height: 6px;">
|
|
<ion-col>
|
|
<ion-row>
|
|
<label class="blue-label">{{ts.trPK('payslip','deductions-key')}}</label>
|
|
</ion-row>
|
|
<ion-row>
|
|
<label class="blue-amount" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
</div>
|
|
</div>
|
|
</ion-grid>
|
|
</ion-slide>
|
|
</ion-slides>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <p>Summary of Payment</p> -->
|
|
<div class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>
|
|
|
|
<div *ngIf="GetSummaryOfPaymentList !=''">
|
|
<ion-grid class="grids">
|
|
<ion-row class="bgcolor">
|
|
<ion-col class="colPayslip">
|
|
<label class="label" for="">{{ts.trPK('payslip','particular')}} </label>
|
|
</ion-col>
|
|
<ion-col class="colPayslip">
|
|
<label class="label">%</label>
|
|
</ion-col>
|
|
<ion-col class="colPayslips">
|
|
<label class="label" for="">{{ts.trPK('payslip','amount')}}
|
|
</label>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row class="rowtable" >
|
|
<ion-col class="colPayslip">
|
|
<label class="label" for=""> {{ts.trPK('payslip','deductions')}}
|
|
|
|
</label>
|
|
</ion-col>
|
|
<ion-col class="colPayslip">
|
|
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_PERCENTAGE}}</label>
|
|
</ion-col>
|
|
<ion-col class="colPayslips">
|
|
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
|
|
</ion-col>
|
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
<ion-row class="rowtable">
|
|
<ion-col class="colPayslip">
|
|
<label class="label" for="">{{ts.trPK('payslip','earnings')}}
|
|
</label>
|
|
</ion-col>
|
|
<ion-col class="colPayslip">
|
|
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_PERCENTAGE}}</label>
|
|
</ion-col>
|
|
<ion-col class="colPayslips" >
|
|
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}</label>
|
|
</ion-col>
|
|
|
|
</ion-row>
|
|
|
|
<ion-row class="rowtable">
|
|
<ion-col class="colPayslip">
|
|
<label class="label-bold" for="">{{ts.trPK('payslip','pay-Amount')}}
|
|
</label>
|
|
</ion-col>
|
|
<ion-col class="colPayslip">
|
|
<label class="label-bold" for="">{{GetSummaryOfPaymentList.TOTAL_PAY_PERCENTAGE}}</label>
|
|
</ion-col>
|
|
<ion-col class="colPayslips">
|
|
<label class="label-bold" for="">{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</label>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
</ion-grid>
|
|
</div>
|
|
|
|
<div class="hrTitle"> {{ts.trPK('payslip','earnings')}} </div>
|
|
<div *ngIf="GetEarningsList !=''">
|
|
<ion-grid class="grids">
|
|
<ion-row class="bgcolor">
|
|
<ion-col class="colPayslip">
|
|
<label class="label" for="">{{ts.trPK('payslip','particular')}} </label>
|
|
</ion-col>
|
|
<ion-col class="colPayslips">
|
|
<label class="label" for="">{{ts.trPK('payslip','amount')}}
|
|
</label>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row class="rowtable" *ngFor="let list of GetEarningsList" >
|
|
<ion-col class="colPayslip">
|
|
<label class="label" for="">{{list.ELEMENT_NAME}}</label>
|
|
</ion-col>
|
|
<ion-col class="colPayslips">
|
|
<label class="label" for="">{{list.AMOUNT}}</label>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div>
|
|
|
|
<div class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
|
|
<div *ngIf="GetDeductionsList !=''">
|
|
<ion-grid class="grids">
|
|
<ion-row class="bgcolor">
|
|
<ion-col class="colPayslip">
|
|
<label class="label" for="">{{ts.trPK('payslip','particular')}} </label>
|
|
</ion-col>
|
|
<ion-col class="colPayslips">
|
|
<label class="label" for="">{{ts.trPK('payslip','amount')}}
|
|
</label>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row class="rowtable" *ngFor="let list of GetDeductionsList" >
|
|
<ion-col class="colPayslip">
|
|
<label class="label" for="">{{list.ELEMENT_NAME}}</label>
|
|
</ion-col>
|
|
<ion-col class="colPayslips">
|
|
<label class="label" for="">{{list.AMOUNT}}</label>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div>
|
|
<!-- ///////////////////////////////////// -->
|
|
|
|
<!-- <ion-item style="margin: 10px;border-radius: 5px;">
|
|
<ion-label>choose payslip</ion-label>
|
|
<ion-select (ionChange)="showInfo($event)" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="choosePayslip">
|
|
<ion-select-option value="{{i}}" selected="{{(i==0).toString()}}" *ngFor="let options of GetPayslipList; let i=index">{{options.PAYSLIP_CHOICE}} </ion-select-option>
|
|
</ion-select>
|
|
</ion-item> -->
|
|
|
|
<div class="hrTitle"> {{ts.trPK('payslip','payment-information')}} </div>
|
|
<div *ngIf="GetPaymentInformationList !=''">
|
|
<ion-grid class="grids" >
|
|
<ion-row class="rowtables">
|
|
<ion-col class="colPayslips">
|
|
<ion-row class="col">
|
|
<label class="label" for=""> {{ts.trPK('payslip','payment-method')}} </label>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<label class="label" for="">{{GetPaymentInformationList.PAYMENT_METHOD_NAME}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
|
|
</ion-row>
|
|
<ion-row class="rowtable">
|
|
<ion-col class="colPayslip">
|
|
<ion-row class="col">
|
|
<label class="label" for="">{{ts.trPK('payslip','bank-name')}} </label>
|
|
</ion-row>
|
|
<ion-row >
|
|
<label class="label" for="">{{GetPaymentInformationList.BANK_NAME}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
<ion-col class="colPayslips">
|
|
<ion-row class="col">
|
|
<label class="label" for="">{{ts.trPK('payslip','branch-name')}}
|
|
</label>
|
|
</ion-row>
|
|
<ion-row >
|
|
<label class="label" for="">{{GetPaymentInformationList.BRANCH_NAME}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row class="rowtable">
|
|
<ion-col class="colPayslip">
|
|
<ion-row class="col">
|
|
<label class="label" for="">{{ts.trPK('payslip','account-no')}}
|
|
</label>
|
|
</ion-row>
|
|
<ion-row >
|
|
<label class="label" for="">{{GetPaymentInformationList.ACCOUNT_NUMBER}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
<ion-col class="colPayslips">
|
|
<ion-row class="col">
|
|
<label class="label" for="">{{ts.trPK('payslip','amount')}}
|
|
</label>
|
|
</ion-row>
|
|
<ion-row >
|
|
<label class="label" for="">{{GetPaymentInformationList.AMOUNT}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div>
|
|
</ion-content> |