UI in dashboard and view of PD and QC
This commit is contained in:
saravanakumarkandasami
parent
4fbd9bf09d
commit
ae9191f228
@ -1,97 +1,96 @@
|
||||
|
||||
|
||||
<div class="pad-wrap">
|
||||
<!--<div fxLayout="row wrap">
|
||||
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
|
||||
<mat-card>
|
||||
<mat-card-title>Today's Status</mat-card-title>
|
||||
<mat-card-subtitle></mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="w-100 h-300px">
|
||||
<ngx-charts-bar-horizontal-stacked [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="yAxisLabel" [yAxisLabel]="xAxisLabel" width="832" height="200">
|
||||
</ngx-charts-bar-horizontal-stacked>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div> -->
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="77%">
|
||||
<mat-card>
|
||||
<mat-card-title>Today's Details</mat-card-title>
|
||||
<mat-card-subtitle></mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="w-100 h-300px">
|
||||
<span>Full</span>
|
||||
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="full" [gradient]="gradient" >
|
||||
</ngx-charts-advanced-pie-chart>
|
||||
</div>
|
||||
|
||||
<div class="w-100 h-300px">
|
||||
<span>Semi</span>
|
||||
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="smart" [gradient]="gradient" >
|
||||
</ngx-charts-advanced-pie-chart>
|
||||
</div>
|
||||
<div class="w-100 h-300px">
|
||||
<span>Tele</span>
|
||||
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="tele" [gradient]="gradient" >
|
||||
</ngx-charts-advanced-pie-chart>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div fxFlex="23%" >
|
||||
<mat-card>
|
||||
<mat-tab-group >
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Lenderwise</ng-template>
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd">
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3>
|
||||
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>CityWise</ng-template>
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd">
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.cityname}} </h3>
|
||||
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}}</p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon color="primary"> warning</mat-icon></span></ng-template>
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="message">
|
||||
<mat-list-item>
|
||||
<!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
|
||||
<h3 mat-line> {{item.applicantname}} </h3>
|
||||
<p mat-line> {{item.applicantid}}</p>
|
||||
<p mat-line> {{item.lendername}} - {{item.status}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--<div fxLayout="row wrap">
|
||||
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
|
||||
<mat-card>
|
||||
<mat-card-title>Today's Status</mat-card-title>
|
||||
<mat-card-subtitle></mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="w-100 h-300px">
|
||||
<ngx-charts-bar-horizontal-stacked [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="yAxisLabel" [yAxisLabel]="xAxisLabel" width="832" height="200">
|
||||
</ngx-charts-bar-horizontal-stacked>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div> -->
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="77%">
|
||||
<mat-card>
|
||||
<mat-card-title>Today's Details</mat-card-title>
|
||||
|
||||
<mat-card-content>
|
||||
<div class="w-100 h-300px">
|
||||
<span>Full</span>
|
||||
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="full" [gradient]="gradient" >
|
||||
</ngx-charts-advanced-pie-chart>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="w-100 h-300px">
|
||||
<span>Smart</span>
|
||||
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="smart" [gradient]="gradient" >
|
||||
</ngx-charts-advanced-pie-chart>
|
||||
</div>
|
||||
<div class="w-100 h-300px">
|
||||
<span>Tele</span>
|
||||
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="tele" [gradient]="gradient" >
|
||||
</ngx-charts-advanced-pie-chart>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div fxFlex="23%" fxLayout="row wrap">
|
||||
<div fxFlex="100">
|
||||
<mat-card>
|
||||
<mat-card-title><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon> warning</mat-icon></span></mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="message">
|
||||
<mat-list-item>
|
||||
<!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
|
||||
<h3 mat-line> {{item.applicantname}} </h3>
|
||||
<p mat-line> {{item.applicantid}}</p>
|
||||
<p mat-line> {{item.lendername}} - {{item.status}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div fxFlex="100">
|
||||
<mat-card>
|
||||
<mat-card-title>Lenderwise</mat-card-title>
|
||||
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd">
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3>
|
||||
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex="100">
|
||||
<mat-card>
|
||||
<mat-card-title>CityWise</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd">
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.cityname}} </h3>
|
||||
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}}</p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2,6 +2,12 @@ $red: #f5515f;
|
||||
$blue: #05abe0;
|
||||
$grey: #343434;
|
||||
$p: 12px;
|
||||
mat-card-title{
|
||||
background-color:#f44336 !important;
|
||||
color:#fff;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.profile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="mb-2" >
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="filter-header">
|
||||
<div *ngFor="let master of pdMasterData" class="ml-xs mr-xs" fxFlex="75">
|
||||
<h4>{{master.lender_full_name}} - {{master.lender_applicant_id}}</h4>
|
||||
<h4>{{master.lender_full_name}} <span *ngIf="master.lender_applicant_id"> - </span> {{master.lender_applicant_id}}</h4>
|
||||
{{master.pd_date_of_initiation}}
|
||||
</div>
|
||||
<div *ngFor="let master of pdMasterData" class="ml-xs mr-xs pt-1" fxFlex="25" style="text-align:right;" >
|
||||
@ -36,10 +36,10 @@
|
||||
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<p *ngIf="master.product_name">{{master.product_name}} / {{master.subproduct_name}}</p>
|
||||
<p *ngIf="master.pd_type_name"><span>{{master.pd_type_name}}</span> / <span *ngIf="master.loan_amount" class="hover-icon"><i class="fa-1x fa fa-rupee"> </i>{{master.loan_amount}}</span></p>
|
||||
<p><span>{{master.addressline1}},{{master.addressline2}} ,{{master.addressline3}}</span></p>
|
||||
<p><span>{{master.pd_status}} - {{ (master.updatedon)? (master.updatedon | slice:0:10):(master.updatedon) }}</span></p>
|
||||
<p *ngIf="master.product_name">{{master.product_name}}<span *ngIf="master.subproduct_name"> / </span> {{master.subproduct_name}}</p>
|
||||
<p *ngIf="master.pd_type_name"><span>{{master.pd_type_name}}</span> <span *ngIf="master.loan_amount" class="hover-icon"> / <i class="fa-1x fa fa-rupee"> </i>{{master.loan_amount}}</span></p>
|
||||
<p><span>{{master.addressline1}}<span *ngIf="master.addressline2"> , </span>{{master.addressline2}} <span *ngIf="master.addressline3"> , </span>{{master.addressline3}}</span></p>
|
||||
<p><span>{{master.pd_status}} <span *ngIf="master.updatedon"> - </span>{{ (master.updatedon)? (master.updatedon | slice:0:10):(master.updatedon) }}</span></p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@ -64,52 +64,36 @@
|
||||
<i class="fa-1x fa fa-phone"></i>
|
||||
{{applicant.mobile_no}} </span> <br><span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">Main Applicant</span>
|
||||
<ng-template #codetails> <span>{{applicant.relation_name}}</span></ng-template>
|
||||
</p>
|
||||
|
||||
|
||||
</mat-list-item>
|
||||
|
||||
</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
<ng-template #noApplicant><mat-card-content><p>No Applicant</p></mat-card-content></ng-template>
|
||||
|
||||
|
||||
</mat-card>
|
||||
|
||||
<ng-template #noApplicant><mat-card-content><p>No Applicant</p></mat-card-content></ng-template>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
|
||||
<!-- pd documents card -->
|
||||
<mat-card class="minheight">
|
||||
<!-- <div class="cardEdit">
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon"><mat-icon>edit</mat-icon></button>
|
||||
</div> -->
|
||||
<mat-card-header>
|
||||
<mat-card-title>Documents</mat-card-title>
|
||||
<!-- <mat-card-subtitle><i class="fa-1x fa fa-map-marker"> </i> {{master.city_name}} / {{master.state_name}}-{{master.pincode}}</mat-card-subtitle> -->
|
||||
</mat-card-header>
|
||||
<mat-card-content *ngIf="pdDocumentsData.length>0; else nodocument">
|
||||
<mat-list *ngFor="let documents of pdDocumentsData">
|
||||
<mat-list-item>
|
||||
<p><span>
|
||||
{{documents.pd_document_title}} </span> <span class="mb-2 text-center hover-icon">
|
||||
<i class="fa-1x fa fa-file"></i>
|
||||
{{documents.pd_document_name}} </span>
|
||||
</p>
|
||||
</mat-list-item>
|
||||
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
<ng-template #nodocument><mat-card-content><p>No Document</p></mat-card-content></ng-template>
|
||||
|
||||
</mat-card>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<mat-expansion-panel *ngIf="pdDocumentsData.length>0; else nodocument">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title class="text-xs-left">
|
||||
<h6 class="mt-0">Documents</h6>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-list *ngFor="let documents of pdDocumentsData">
|
||||
<mat-list-item>
|
||||
<p><span><i class="fa-1x fa fa-file"></i> {{documents.pd_document_title}} </span></p>
|
||||
<!---- <span class="mb-2 text-center hover-icon"> {{documents.pd_document_name}} </span> -->
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-expansion-panel>
|
||||
<ng-template #nodocument>
|
||||
<mat-card>
|
||||
<mat-card-content><p>No Document</p></mat-card-content>
|
||||
</mat-card>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
|
||||
<!--pd logs card -->
|
||||
<mat-expansion-panel *ngIf="masterPdLogsData.length>0; else nohistory">
|
||||
<mat-expansion-panel-header>
|
||||
@ -120,7 +104,7 @@
|
||||
</mat-expansion-panel-header>
|
||||
<mat-list class="m-gap p-gap" *ngFor="let masterHistory of masterPdLogsData">
|
||||
<mat-list-item>
|
||||
<p>{{masterHistory}}</p>
|
||||
<span>{{masterHistory}}</span>
|
||||
|
||||
</mat-list-item>
|
||||
|
||||
|
||||
@ -83,33 +83,25 @@
|
||||
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
|
||||
<!-- pd documents card -->
|
||||
<mat-card class="minheight">
|
||||
<!-- <div class="cardEdit">
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon"><mat-icon>edit</mat-icon></button>
|
||||
</div> -->
|
||||
<mat-card-header>
|
||||
<mat-card-title>Documents</mat-card-title>
|
||||
<!-- <mat-card-subtitle><i class="fa-1x fa fa-map-marker"> </i> {{master.city_name}} / {{master.state_name}}-{{master.pincode}}</mat-card-subtitle> -->
|
||||
</mat-card-header>
|
||||
<mat-card-content *ngIf="pdDocumentsData.length>0; else nodocument">
|
||||
<mat-list *ngFor="let documents of pdDocumentsData">
|
||||
<mat-list-item>
|
||||
<p><span>
|
||||
{{documents.pd_document_title}} </span> <span class="mb-2 text-center hover-icon">
|
||||
<i class="fa-1x fa fa-file"></i>
|
||||
{{documents.pd_document_name}} </span>
|
||||
</p>
|
||||
</mat-list-item>
|
||||
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
<ng-template #nodocument><mat-card-content><p>No Document</p></mat-card-content></ng-template>
|
||||
|
||||
</mat-card>
|
||||
|
||||
|
||||
<mat-expansion-panel *ngIf="pdDocumentsData.length>0; else nodocument">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title class="text-xs-left">
|
||||
<h6 class="mt-0"> Documents</h6>
|
||||
</mat-panel-title>
|
||||
|
||||
</mat-expansion-panel-header>
|
||||
<mat-list *ngFor="let documents of pdDocumentsData">
|
||||
<mat-list-item>
|
||||
<p><span>
|
||||
<i class="fa-1x fa fa-file"></i> {{documents.pd_document_title}} </span>
|
||||
<!----<span class="mb-2 text-center hover-icon"> {{documents.pd_document_name}} </span> -->
|
||||
</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-expansion-panel>
|
||||
<ng-template #nodocument><mat-card><mat-card-content><p>No Document</p></mat-card-content> </mat-card></ng-template>
|
||||
</div>
|
||||
<div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
|
||||
<!--pd logs card -->
|
||||
<mat-expansion-panel *ngIf="masterPdLogsData.length>0; else nohistory">
|
||||
<mat-expansion-panel-header>
|
||||
@ -120,7 +112,7 @@
|
||||
</mat-expansion-panel-header>
|
||||
<mat-list class="m-gap p-gap" *ngFor="let masterHistory of masterPdLogsData">
|
||||
<mat-list-item>
|
||||
<p>{{masterHistory}}</p>
|
||||
<span>{{masterHistory}}</span>
|
||||
|
||||
</mat-list-item>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user