opensourcecode/Hyper-M_User_Portal/src/app/common/dashboard-am-details/dashboard-am-details.component.html

<div class="bottom_content">
        <div class="main_dropdown" *ngIf="user_role<7">
                <div class="zmdropdown" *ngIf="user_role<4">
                        <label>Zonal Manager</label>
                        <select [(ngModel)]="zm_email" (ngModelChange)='zmChange($event)'>
                                <option value="all">All</option>
                                <option *ngFor="let zm of zmuser_list" [ngValue]="zm">{{zm.name}}</option>
                        </select>
                </div>
                <div class="rmdropdown" *ngIf="user_role<6 && !rmInactive">
                        <label>Regional Manager</label>
                        <select [(ngModel)]="rm_email" [ngClass]="rmInactive ?'disabled':''" (ngModelChange)='rmChange($event)' [disabled]="rmInactive">
                                <option value="all">All</option>
                                <option *ngFor="let rm of rmuser_list" [ngValue]="rm.email">{{rm.name}}</option>
                        </select>
                </div>
                <div class="amdropdown" *ngIf="user_role<7 && !amInactive">
                        <label>Area Manager</label>
                        <select [(ngModel)]="am_email" [ngClass]="amInactive ?'disabled':''" (ngModelChange)='amChange($event)' [disabled]="amInactive">
                                <option value="all">All</option>
                                <option *ngFor="let am of amuser_list" [ngValue]="am.email">{{am.name}}</option>
                        </select>
                </div>
        </div>
        <div class="row">
                <div class="col" *ngIf="user_dashboard!=undefined">
                        <h6 class="title" (click)="viewSalesReport()">SALES</h6>
                        <div class="box_left" (click)="viewSalesReport()">
                                <circle-progress [percent]="percentage" [radius]="60" [space]="-10" [outerStrokeWidth]="10" [outerStrokeColor]="'#28a8e0'"
                                        [innerStrokeColor]="'#e7e8ea'" [innerStrokeWidth]="10" [title]="user_dashboard.sales.achieved"
                                        [showSubtitle]="false" [animateTitle]="false" [animationDuration]="1500" [showUnits]="false"
                                        [showBackground]="false"></circle-progress>
                                <div class="load_content" (click)="viewSalesReport()">
                                        <h6>SALES PERFORMANCE</h6>
                                        <p *ngIf="user_dashboard!=undefined">{{user_dashboard.sales.achieved}} / {{user_dashboard.sales.target}} TARGETED SALES</p>
                                </div>
                        </div>
                        <div class="box_right">
                                <img src="assets/img/up_arrow.svg " (click)="decreasMonth()" />
                                <p>{{sales_date}}</p>
                                <img src="assets/img/down_arrow.svg" [ngClass]="sales_date!=date_now?'':'disable_arrow'" (click)="increasMonth()" />
                        </div>
                </div>
                <div class="col" *ngIf="user_dashboard==undefined">
                        <h6 class="title">SALES</h6>
                        <div class="box_left">
                                <p>No data found</p>
                                <div class="load_content">
                                        <h6>SALES PERFORMANCE</h6>
                                        <p>No data found</p>
                                </div>
                        </div>
                        <div class="box_right">
                                <p>No data found</p>
                        </div>
                </div>
                <div class="col">
                        <div class="chart_box" (click)="viewDseReport()" *ngIf="barChartData.length > 0">
                                <h6 class="title">CERTIFIED DSE
                                        <span>Total DSE: {{total_user}}</span>
                                </h6>
                                <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
                                        [colors]="barcolors" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
                                </canvas>
                        </div>
                        <div class="chart_box" (click)="viewDseReport()" *ngIf="barChartData.length == 0">
                                <h6 class="title">CERTIFIED DSE
                                        <span>Total DSE: 0</span>
                                </h6>
                                <p>No data found</p>
                        </div>
                </div>
                <div class="col">
                        <div class="chart_box" (click)="viewAssessmentReport()">
                                <h6 class="title">ASSESSMENT</h6>
                                <canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" [legend]="true" [colors]="colors" [chartType]="doughnutChartType"
                                        (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
                                </canvas>
                        </div>
                </div>
                <div class="col">
                        <h6 class="title">RANKING</h6>
                        <div class="leader_box">
                                <!--single column-->
                                <div class="single" (click)="viewAssessmentleaderBoard()" *ngIf="user_role==3  || user_role==14">
                                        <h6 class="text-center">Team Ranking</h6>
                                        <div class="lead_section">
                                                <div class="lead">
                                                        <div class="img_sec">
                                                                <img src="assets/img/assessment.png" />
                                                        </div>
                                                </div>
                                        </div>

                                </div>
                                <!--single column-->
                                <div class="leader_left" (click)="viewSalesleaderBoard()" *ngIf="user_role!=3 && user_role!=14">
                                        <h6>My Ranking</h6>
                                        <div class="lead_section">
                                                <div class="lead">
                                                        <div class="img_sec">
                                                                <img src="assets/img/sales.png" />
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                                <div class="leader_right" (click)="viewAssessmentleaderBoard()" *ngIf="user_role!=3  && user_role!=14">
                                        <h6>Team Ranking</h6>
                                        <div class="lead_section">         <div class="lead">
                                                        <div class="img_sec">
                                                                <img src="assets/img/assessment.png" />
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>

        </div>