< 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-content class = "colorBG" >
< 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 >
<!-- <ion - list *ngIf="showPaySlip !=''" >
< ion-item >
< ion-row > < ion-label > PERIOD NAME< / ion-label > < ion-label > {{showPaySlip.PERIOD_NAME}}< / ion-label > < / ion-row >
< ion-row > < ion-label > PERIOD START DATE< / ion-label > < ion-label > {{showPaySlip.PERIOD_START_DATE}}< / ion-label > < / ion-row >
< ion-row > < ion-label > PERIOD END DATE< / ion-label > < ion-label > {{showPaySlip.PERIOD_END_DATE}}< / ion-label > < / ion-row >
< / ion-item >
< / ion-list > -->
< div * ngIf = "showPaySlip !=''" >
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , payroll-info ' | translate " >
<!-- special results -->
<!-- <ion - card >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','payroll-info')}} < / div >
< / ion-card-header >
< ion-card-content > -->
< div * ngIf = "showPaySlip !=''" >
< ion-grid class = "" >
< ion-row class = "" >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','peroid-name')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{showPaySlip.PERIOD_NAME}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','start-date')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{showPaySlip.PERIOD_START_DATE}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','end-date')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{showPaySlip.PERIOD_END_DATE}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< empty-data * ngIf = "showPaySlip.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
< / accordin-tab-custom >
< / accordin-custom >
<!-- <ion - card *ngIf="showPaySlip !=''">
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','payroll-info')}} < / div >
< / ion-card-header >
< ion-card-content >
< div >
< ion-grid >
< ion-row >
< ion-col class = "colBold" >
< label for = "" > {{ts.trPK('payslip','peroid-name')}}
< / label >
< / ion-col >
< ion-col >
< label for = "" > {{showPaySlip.PERIOD_NAME}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "colBold" >
< label for = "" > {{ts.trPK('payslip','start-date')}}
< / label >
< / ion-col >
< ion-col >
< label for = "" > {{showPaySlip.PERIOD_START_DATE}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "colBold" >
< label for = "" > {{ts.trPK('payslip','end-date')}}
< / label >
< / ion-col >
< ion-col >
< label for = "" > {{showPaySlip.PERIOD_END_DATE}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< / ion-card-content >
< / ion-card > -->
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , summary-payment ' | translate " >
<!-- <ion - card *ngIf="GetSummaryOfPaymentList !='' " >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','summary-payment')}} < / div >
< / ion-card-header >
< ion-card-content > -->
< div * ngIf = "GetSummaryOfPaymentList !=''" >
< ion-grid >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','deductions-Amount')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','deductions-percentage')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_PERCENTAGE}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','earings-Amount')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','earings-percentage')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_EARNINGS_PERCENTAGE}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','pay-Amount')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','pay-percentage')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_PAY_PERCENTAGE}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< empty-data * ngIf = "GetSummaryOfPaymentList.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
< / accordin-tab-custom >
< / accordin-custom >
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , earnings ' | translate " [ subHeadergreen ] = true [ subHeader ] = " earingTotal " >
<!-- <ion - card *ngIf="GetEarningsList !='' " >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','total')}} < / div >
< / ion-card-header >
< ion-card-content > -->
< div * ngIf = "GetEarningsList !=''" >
< ion-grid >
< ion-row * ngFor = "let list of GetEarningsList" >
< ion-col class = "" >
< label for = "" > {{list.ELEMENT_NAME}}< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{list.AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col col-6 class = "earingTotH" >
< label style = "font-size: 20px !important" for = "" > {{ts.trPK('payslip','total')}}< / label >
< / ion-col >
< ion-col col-6 class = "earingTotG" >
< label style = "font-size: 20px !important" for = "" > {{earingTotal}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< empty-data * ngIf = "GetEarningsList.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
<!-- <ion - infinite - scroll (ionInfinite)="doInfiniteEarning($event)">
< ion-infinite-scroll-content > < / ion-infinite-scroll-content >
< / ion-infinite-scroll > -->
< / accordin-tab-custom >
< / accordin-custom >
<!-- <accordin - custom *ngIf="GetDeductionsList !=''"> -->
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , deductions ' | translate " [ subHeadergreen ] = false [ subHeader ] = " deductionTotal " >
<!-- <ion - card *ngIf="GetDeductionsList !='' " >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','deductions')}} < / div >
< / ion-card-header >
< ion-card-content >
colBold -->
< div * ngIf = "GetDeductionsList !=''" >
< ion-grid >
< ion-row * ngFor = "let list of GetDeductionsList" >
< ion-col class = "" >
< label for = "" > {{list.ELEMENT_NAME}}< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{list.AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col col-6 class = "earingTotH" >
< label style = "font-size: 20px !important" for = "" > {{ts.trPK('payslip','total')}}< / label >
< / ion-col >
< ion-col col-6 class = "earingTotR" >
< label style = "font-size: 20px !important" for = "" > {{deductionTotal}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< empty-data * ngIf = "GetDeductionsList.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
<!-- <ion - infinite - scroll (ionInfinite)="doInfiniteDeduction($event)">
< ion-infinite-scroll-content > < / ion-infinite-scroll-content >
< / ion-infinite-scroll > -->
< / accordin-tab-custom >
< / accordin-custom >
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , payment-information ' | translate " >
<!-- <ion - card *ngIf="GetPaymentInformationList !='' " >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','payment-information')}} < / div >
< / ion-card-header >
< ion-card-content > -->
< div * ngIf = "GetPaymentInformationList !=''" >
< ion-grid >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','payment-method')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.PAYMENT_METHOD_NAME}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','bank-name')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.BANK_NAME}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','branch-name')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.BRANCH_NAME}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','account-no')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.ACCOUNT_NUMBER}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','amount')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< empty-data * ngIf = "GetPaymentInformationList.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
< / accordin-tab-custom >
< / accordin-custom >
< / div >
<!-- <ion - row *ngIf="showPaySlip !=''" style="text - align: center;">
< ion-col class = "greenTxt" col-6 >
< button ion-button block class = "notColBtn" ( click ) = " openEarings ( ) " >
< p > {{ts.trPK('payslip','earnings')}}< / p >
< ion-img class = "serviceItemImg" src = "../assets/imgs/details.png" > < / ion-img >
< / button >
< / ion-col >
< ion-col class = "greenTxt" col-6 >
< button ion-button block class = "notColBtn" ( click ) = " openDeductions ( ) " >
< p > {{ts.trPK('payslip','deductions')}}< / p >
< ion-img class = "serviceItemImg" src = "../assets/imgs/details.png" > < / ion-img >
< / button >
< / ion-col >
< / ion-row > -->
< / ion-content >