sdfsd
<div class="mainClass">
  <div class="row" *ngIf="(componentIdentifier != 'billing_detail')&&(componentIdentifier != 'censor_detail')&&(componentIdentifier != 'usersMaster')&&(componentIdentifier != 'deviceMaster')&&(componentIdentifier != 'deviceRenew')&&(componentIdentifier != 'gps_master')&& (componentIdentifier != 'deviceList')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 10px; padding-right: 10px;">
        <div *ngIf="(componentIdentifier != 'route_violation_report')&&(componentIdentifier != 'notification_master')" class="row" style="margin: 0;padding-bottom: 10px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{optionLabel | translate}} :</p>
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">   
              <div>
                <select id="dbselect" multiple="multiple" >
                  <option  *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
                </select>
              </div> 
            </div>
          </div> 
          <div *ngIf="componentIdentifier === 'notification_master'" class="row" style="margin: 0;padding-bottom: 10px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">VEHICLE :</p>
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">   
              <div>
                <select id="dbselectNotif" multiple="multiple" >
                  <option  *ngFor="let option_1 of notifDevArr" [value]="option_1.Device_ID">{{ option_1.Device_Name }}</option>
                </select>
              </div> 
            </div>
          </div> 
          <div *ngIf="componentIdentifier === 'notification_master'" class="row" style="margin: 0;padding-bottom: 10px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{'Notification type' | translate}} :</p>
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">    
              <div>
                <select id="dbselect_notif" multiple="multiple">
                  <option *ngFor="let noti of notificationArr" [value]="noti.value">{{ noti.view }}</option>
                </select>
              </div> 
            </div>
          </div>
          <div *ngIf="this.componentIdentifier === 'route_violation_report'" class="row" style="margin: 0;padding-bottom: 10px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{'Route' | translate}} :</p>
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">    
              <div>
                <select id="dbselect_3" multiple="multiple">
                  <option *ngFor="let route of routeArr" [value]="route._id">{{ route.name }}</option>
                </select>
              </div> 
            </div>
          </div>
          
          
          <div *ngIf="componentIdentifier === 'poi_report'" class="row" style="margin: 0;padding-bottom: 10px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{'Select POI' | translate}} :</p>
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">   
              <div>
                <select id="dbselect_1" multiple="multiple">
                  <option *ngFor="let poiname of poiArr" [value]="poiname.id">{{ poiname.poiname }}</option>
                </select>
              </div> 
           
            </div>
          </div> 

          <div *ngIf="componentIdentifier === 'geofence_report'" class="row" style="margin: 0;padding-bottom: 10px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{'Devices' | translate}} :</p>
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">   
              <div>
                <select id="dbselectIMEI" multiple="multiple">
                  <option *ngFor="let udid of deviceArr_1" [value]="udid._id">{{ udid.Device_ID }}</option>
                </select>
              </div> 
           
            </div>
          </div> 

          
          

          <div *ngIf="componentIdentifier === 'stoppage_report'" class="row" style="margin: 0;padding-bottom: 10px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{'Duration' | translate}} :</p>
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">    
              <div>
                <select  id="dbselect_2" multiple="multiple">
                  <option  *ngFor="let ds of stoppage_duration" [value]="ds.value">{{ ds.view_value }}</option>
                </select>
              </div>
         
            </div>
          </div>       
          <div *ngIf="showFromDate === true" class="row" style="margin: 0;padding-bottom: 10px;">
            <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
              <!-- timefilter icons -->
              <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;" >
                  <button [disabled]= "(componentIdentifier === 'dayWiseReport')" type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
                  <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
                  <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
                  <button [disabled]= "(componentIdentifier === 'distance_report')" type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
                </div>
            </div>
          </div>
          <!-- <div class="row" style="margin: 0;padding-top: 5px; ">
            <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
           
              <p style="margin-bottom: 0%;font-size: 12px;">{{'Idle Time' | translate}}</p>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
           
              <input id="minIdleTime" class="form-control form-control-sm" style="width: 81px;height: 25px; font-size: 12px; padding: 0; padding-left: 5px;" name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
            </div>
          </div> -->
          <div *ngIf="showFromDate === true" class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <!-- from time label-->
             <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
              <!-- from datetime picker -->
              <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
            </div>
          </div>
          <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <!-- tolabel -->
              <span style="margin-bottom: 0%;font-size: 12px;">{{lableVariable | translate}} :</span>       
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
              <!-- tolabel picker -->
              <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >              
            </div>
          </div>
          <div class="row" *ngIf="componentIdentifier === 'idle_report'" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <!-- tolabel -->
              <span style="margin-bottom: 0%;font-size: 12px;">{{'Min Idle Time (Min)' | translate}} :</span>       
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
              <!-- tolabel picker -->
              <input id="minIdleTime" class="form-control form-control-sm" style="margin-top: 4px;width: 80px;" name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
            </div>
          </div>

          <div class="row" *ngIf="componentIdentifier === 'fuel_consumption_report'" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
              <!-- tolabel -->
              <span style="margin-bottom: 0%;font-size: 12px;">{{'Report Type' | translate}} :</span>       
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
              <md-radio-group
              aria-labelledby="example-radio-group-label"
              class="example-radio-group"
              [(ngModel)]="filterRtype">
              <md-radio-button class="example-radio-button" *ngFor="let rtype of reportType" [value]="rtype" style="margin-left: 5px">
                {{rtype}}
              </md-radio-button>
            </md-radio-group>
            </div>
          </div>
         
          <div class="row" style="margin: 0;padding-bottom: 10px;float: right;">
            <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0;">
              <!-- button -->
              <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter('data')">{{'Search' | translate}}</button>
              <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
            </div>
          </div>
          <!-- <div  *ngIf = "showTable" class="row" style="padding: 0%;padding-top: 10px;">
            <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%">
              <div class="row" style="margin: 0; padding-top: 5px;padding-left: 15px; padding-bottom: 5px; padding-top: 1px solid red; border-top: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5;">
                <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;" >
              
                  <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Vehicle' | translate}}</p>
                  
                </div>
                <div class="col-sm-2 col-md-2 col-lg-2" >
               
                  <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Mileage' | translate}}</p>
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-right: 0%;">
             
                  <p></p>
                </div>
                <div class="col-sm-1 col-md-1 col-lg-1" style="padding-right: 0%;padding-left: 0%;">
             
                  <i class="fas fa-times" style="color: red; cursor: pointer;" title="{{'Remove all track' | translate}}" (click)="removetracks('all',null)"></i>
                
                </div>
              </div>
              <div class="row" style="margin: 0; padding-left: 15px ;overflow: auto;">
                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0%;">
                  <div style="max-height: 260px;">
                    <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index" style="cursor:pointer;padding-left: 15px;padding-top: 5px;padding-bottom: 5px;border-bottom: 1px solid #c5c5c5;background-color: white;">
                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;" (click)="plotHistory(i)">
                   
                        <p style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.device_name}}</p>
                        <p style="margin-bottom: 0%;font-size: 12px;color:#424242;line-height: 15px;">
                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.fromTime}}</span>
                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;"> - </span>
                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.toTime}}</span>
                        </p>              
                      </div>
                      <div class="col-sm-2 col-md-2 col-lg-2" style="padding-left: 0%;padding-right: 0%;" (click)="plotHistory(i)">
                 
                        <p style="text-align: center;font-size: 12px;color:#424242;">{{historyArr.mileage}}</p>
                      </div>
                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0%;text-align: center;padding-right: 0;" >
                       
                        <div>
                            <md-icon *ngIf="SpeedMeter2"   class="play animateClass_8" (click)="inter('slow')"  mdTooltip="Rewind">fast_rewind</md-icon>
                            <md-icon *ngIf="tempMapHistory[i].flag=='init'"   class="play animateClass_9" (click)="play(i)"  mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
                            <md-icon *ngIf="tempMapHistory[i].flag=='start'"  class="play animateClass_10" (click)="play(i)"  mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
                            <md-icon *ngIf="tempMapHistory[i].flag=='stop'"  class="play animateClass_11" (click)="play(i)"  mdTooltip="{{'Pause' | translate}}">pause_circle_outline</md-icon>
                            <md-icon *ngIf="SpeedMeter2"  class="play animateClass_12" (click)="inter('fast')"  mdTooltip="{{'Fast Forward' | translate}}">fast_forward</md-icon>
                       
                        </div>
                      </div>
                      <div class="col-sm-1 col-md-1 col-lg-1" (click)="removetracks('single',i)">
                        <i class="fas fa-times animateClass_13"  title="{{'Remove track' | translate}}"></i>
                      </div>
                    </div>                             
                  </div>  
                </div>
              </div>       
            </div>
          </div>            -->
    </div>
</div>
<div class="row" *ngIf="(componentIdentifier === 'billing_detail')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
  <div class="col-sm-12 col-md-12 col-lg-12" >
    <div class="row" style="margin-bottom: 10px;" >
      <div class="col-4">
       <label style="font-weight: 600;color: #948f8f;">{{'USER' | translate}}</label>
      </div>
      <div class="col-8">
        <div>
          <select id="dbselect" style="width:200px" multiple="multiple">
            <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row"  style="margin-bottom: 10px;">
      <div class="col-4">
        <label style="font-weight: 600;color: #948f8f;">{{'TYPE' | translate}}</label>
      </div>
      <div class="col-8">
        <div>
          <select id="dbselect_billtype" style="width:200px" multiple="multiple">
            <option *ngFor="let op of billingType" [value]="op.selectedValue">{{ op.value }}</option>
          </select>     
        </div>
     
      </div>
    </div>
    <div class="row"  style="margin-bottom: 10px;">
        <div class="col-4">
          <label style="font-weight: 600;color: #948f8f;">{{'STATUS' | translate}}</label>
        </div>
        <div class="col-8">
          <div>
            <select id="dbselect_billStatus" style="width:200px" multiple="multiple">
              <option *ngFor="let opp of billing_status" [value]="opp.selectedValue">{{ opp.value }}</option>
            </select>    
          </div>
          
        </div>
    </div>
    <div class="row"  style="margin-bottom: 10px;">
      <div class="col-4">
        <label style="font-weight: 600;color: #948f8f;">{{'Select Month' | translate}}</label>
      </div>
      <div class="col-8">
       <form class="container" style="padding:0px">
        <input [(ngModel)]="modelDate" autocomplete="off" class="form-control" name="date" bsDatepicker [bsConfig]="{dateInputFormat: 'MM/YYYY'}" style="width:200px" (onShown)="onOpenCalendar($event)">
        </form>
      </div>
    </div>
    <div class="row"  style="margin-bottom: 10px;float:right;">
      <div class="col-12">
        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter_billing('data')">{{'Search' | translate}}</button>
        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
      </div>
    </div>
  </div>
</div>
<div class="row" *ngIf="(componentIdentifier === 'censor_detail')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
  <div class="col-sm-12 col-md-12 col-lg-12" >
      <div class="row">
        <div class="col-3">{{'Device' | translate}}</div>
        <div  class="col-9">
          <div>
            <select id="dbselect" multiple="multiple">
              <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
            </select>
          </div> 
        </div>
        <div class="row"  style="margin-bottom: 10px;float:right;">
        </div>
      <div class="col-12">
        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;margin-top: 20px; float: right;" md-raised-button (click)="censor_detail()">{{'Search' | translate}}</button>    
      </div>
    </div>
    
  </div>
</div>
<div class="row" *ngIf="(componentIdentifier === 'usersMaster')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
  <div class="col-sm-12 col-md-12 col-lg-12" >
    <div class="row">
      <div class="col-4"><p>{{'Search By' | translate}} : </p></div>
      <div class="col-8">
        <div style="display: flex;">
          <md-radio-group
          aria-labelledby="example-radio-group-label"
          class="example-radio-group"
          [(ngModel)]="userFilterType">
          <md-radio-button class="example-radio-button" *ngFor="let utype of userRadio" [value]="utype" (change)="userRadioButton()" style="margin-left: 5px">
            {{utype}}
          </md-radio-button>
        </md-radio-group>
        </div>
      </div>
    </div>
      <div class="row" style="margin-top: 10px;">
        <div class="col-3">{{'Phone' | translate}}</div>
        <div  class="col-9">
          <div style="display: flex;">
            <select id="dbselectPhone" multiple="multiple">
              <option *ngFor="let uPhone of userArr" [value]="uPhone._id">{{ uPhone.phone }}</option>
            </select>
          </div> 
        </div>
      </div>
      <div class="row" style="margin-top: 20px;">
        <div class="col-3">{{'Name' | translate}}</div>
        <div  class="col-9">
          <div style="display: flex;" >
            <select id="dbselectName" multiple="multiple">
              <option *ngFor="let uName of userArr" [value]="uName._id">{{ uName.first_name ? uName.first_name : '--'}} {{uName.last_name?uName.last_name:'--'}}</option>
            </select>
          </div> 
        </div>
      </div>
      <div class="row"  style="margin-top: 20px;margin-bottom: 20px;">
        <div class="col-5">{{'Deleted users' | translate}}</div>
        <div  class="col-7">
          <div style="display: flex;float:right;">
            <md-slide-toggle md-tooltip="Deleted Users" [(ngModel)]="deleteduser" (change)="userDeleted($event)"></md-slide-toggle> 
          </div> 
        </div>
      </div>
      <div  class="row" style="margin: 0;padding-bottom: 20px;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
          <!-- timefilter icons -->
          <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;" >
              <button  type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
              <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
            </div>
        </div>
      </div>
      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
          <!-- from time label-->
         <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
          <!-- from datetime picker -->
          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
        </div>
      </div>
      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
          <!-- tolabel -->
          <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>       
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
          <!-- tolabel picker -->
          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >              
        </div>
      </div>
    <div class="row"  style="margin-bottom: 20px;float:right;">
      <div class="col-12">
        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter('data')">{{'Search' | translate}}</button>
        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
      </div>
    </div>
  </div>
</div>
<div class="row" *ngIf="(componentIdentifier === 'deviceMaster')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
  <div class="col-12">
    <div class="row">
      <div class="col-5"><p>{{'Search By' | translate}} : </p></div>
      <div class="col-7">
        <div style="display: flex;">
          <md-radio-group
          aria-labelledby="example-radio-group-label"
          class="example-radio-group"
          [(ngModel)]="deviceFilterType">
          <md-radio-button class="example-radio-button" *ngFor="let dtype of deviceRadio" [value]="dtype" (change)="deviceRadioButton()" style="margin-left: 5px">
            {{dtype}}
          </md-radio-button>
        </md-radio-group>
        </div>
      </div>
    </div>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12" >
      <div class="row" style="margin-top: 10px;">
        <div class="col-3">{{'IMEI' | translate}}</div>
        <div  class="col-9">
          <div style="display: flex;">
            <select id="dbselectIMEI" multiple="multiple">
              <option *ngFor="let udid of deviceArr_1" [value]="udid._id">{{ udid.Device_ID }}</option>
            </select>
          </div> 
        </div>
      </div>
      <div class="row"  style="margin-top: 20px;">
        <div class="col-3">{{'SIM' | translate}}</div>
        <div  class="col-9">
          <div style="display: flex;">
            <select id="dbselectSIM" multiple="multiple">
              <option *ngFor="let uname of deviceArr_1" [value]="uname.sim_number">{{ uname.sim_number ? uname.sim_number : '--'}} </option>
            </select>
          </div> 
        </div>
      </div>
      <div class="row"  style="margin-top: 20px;margin-bottom: 20px;">
        <div class="col-5">{{'Deleted Device' | translate}}</div>
        <div  class="col-7">
          <div style="display: flex;float:right;">
            <md-slide-toggle md-tooltip="Deleted Device" [(ngModel)]="deleteddevice" (change)="deletedDevices($event)"></md-slide-toggle> 
          </div> 
        </div>
      </div>
      <div  class="row" style="margin: 0;padding-bottom: 20px;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
          <!-- timefilter icons -->
          <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;" >
              <button  type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
              <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
            </div>
        </div>
      </div>
      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
          <!-- from time label-->
         <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
          <!-- from datetime picker -->
          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
        </div>
      </div>
      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
          <!-- tolabel -->
          <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>       
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
          <!-- tolabel picker -->
          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >              
        </div>
      </div>
    <div class="row"  style="margin-bottom: 20px;float:right;">
      <div class="col-12">
        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter('data')">{{'Search' | translate}}</button>
        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
      </div>
    </div>
  </div>

  </div>
  </div>

</div>

<!-- Device Renew Report------------------------------------ -->

<div class="row" *ngIf="(componentIdentifier === 'deviceRenew')"
  style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
  <div class="col-12">
    
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12">

        
        <div class="row" style="margin-top: 10px;margin-bottom: 6px;">
          <div class="col-3">{{'IMEI' | translate}}</div>
          <div class="col-9">
            <div style="display: flex;">
              <select id="dbselectIMEI" multiple="multiple">
                <option *ngFor="let udid of deviceArr_1" [value]="udid._id">{{ udid.Device_ID }}</option>
              </select>
            </div>
          </div>
        </div>

        <div class="row" style="margin-top: 10px;margin-bottom: 6px;">
          <div class="col-3">{{'Type' | translate}}</div>
          <div class="col-9">
            <div style="display: flex;">
              <select  style="width: -webkit-fill-available;" [(ngModel)]="renewalType">
                <option *ngFor="let udid of type" [value]="udid.value"  >{{ udid.Name }}</option>
              </select>
            </div>
          </div>
        </div>
        <!-- <div class="row" style="margin-top: 20px;">
          <div class="col-3">{{'SIM' | translate}}</div>
          <div class="col-9">
            <div style="display: flex;">
              <select id="dbselectSIM" multiple="multiple">
                <option *ngFor="let uname of deviceArr_1" [value]="uname.sim_number">{{ uname.sim_number ?
                  uname.sim_number : '--'}} </option>
              </select>
            </div>
          </div>
        </div> -->
        <!-- <div class="row" style="margin-top: 20px;margin-bottom: 20px;">
          <div class="col-5">{{'Deleted Device' | translate}}</div>
          <div class="col-7">
            <div style="display: flex;float:right;">
              <md-slide-toggle md-tooltip="Deleted Device" [(ngModel)]="deleteddevice"
                (change)="deletedDevices($event)"></md-slide-toggle>
            </div>
          </div>
        </div> -->
        <div class="row" style="margin: 0;padding-bottom: 20px;">
          <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
            <!-- timefilter icons -->
            <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;">
              <button type="button" style="width:25%;border-right: 2px solid white;"
                class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
              <button type="button" style="width:25%;border-right: 2px solid white;"
                class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' |
                translate}}</button>
              <button type="button" style="width:25%;border-right: 2px solid white;"
                class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
              <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7"
                (click)="changeDate('month')">{{'Month' | translate}}</button>
            </div>
          </div>
        </div>
        <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
          <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
            <!-- from time label-->
            <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
          </div>
          <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
            <!-- from datetime picker -->
            <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;"
              [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
          </div>
        </div>
        <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
          <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
            <!-- tolabel -->
            <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>
          </div>
          <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
            <!-- tolabel picker -->
            <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;"
              [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
          </div>
        </div>
        <div class="row" style="margin-bottom: 20px;float:right;">
          <div class="col-12">
            <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button
              (click)="reportFilter('data')">{{'Search' | translate}}</button>
            <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;"
              md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>


<!-- -------------------------- -->




<div class="row" *ngIf="(componentIdentifier === 'gps_master')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
  <div class="col-12">
    <div class="row">
      <div class="col-5"><p>{{'Search By' | translate}} : </p></div>
      <div class="col-7">
        <div style="display: flex;">
          <md-radio-group
          aria-labelledby="example-radio-group-label"
          class="example-radio-group"
          [(ngModel)]="deviceFilterType">
          <md-radio-button class="example-radio-button" *ngFor="let dtype of deviceRadio1" [value]="dtype" (change)="deviceRadioButton()" style="margin-left: 5px">
            {{dtype}}
          </md-radio-button>
        </md-radio-group>
        </div>
      </div>
    </div>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12" >
      <div class="row" style="margin-top: 10px;">
        <div class="col-3">{{'IMEI' | translate}}</div>
        <div  class="col-9">
          <div style="display: flex;">
            <select id="dbselectIMEI" multiple="multiple">
              <option *ngFor="let udid of deviceArr_1" [value]="udid.Device_ID">{{ udid.Device_ID }}</option>
            </select>
          </div> 
        </div>
      </div>
      <div class="row"  style="margin-top: 20px;margin-bottom: 20px;">
        <div class="col-3">{{'Vahicle Name' | translate}}</div>
        <div  class="col-9">
          <div style="display: flex;">
            <select id="dbselectVehicleName" multiple="multiple">
              <option *ngFor="let uname of deviceArr_1" [value]="uname.Device_ID">{{ uname.Name ? uname.Name : '--'}} </option>
            </select>
          </div> 
        </div>
      </div>
      <div  class="row" style="margin: 0;padding-bottom: 20px;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
          <!-- timefilter icons -->
          <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;" >
              <button  type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
              <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
            </div>
        </div>
      </div>
      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
          <!-- from time label-->
         <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
          <!-- from datetime picker -->
          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
        </div>
      </div>
      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
          <!-- tolabel -->
          <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>       
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
          <!-- tolabel picker -->
          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >              
        </div>
      </div>
    <div class="row"  style="margin-bottom: 20px;float:right;">
      <div class="col-12">
        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter('data')">{{'Search' | translate}}</button>
        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
      </div>
    </div>
  </div>

  </div>
  </div>

</div>

<div class="row" *ngIf="(componentIdentifier === 'deviceList')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
<div class="col-12">
<div class="row" style="margin: 0;padding-bottom: 20px;">
  <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
  <md-input-container style="width: inherit;background: #efecec;height: 46px;">
    <input mdInput placeholder="Search Distributer" style="color: black;" [mdAutocomplete]="tdAutoedit" name="state"
      #state="ngModel" [(ngModel)]="distributerValue" (ngModelChange)="filterStates(distributerValue)">
    <md-autocomplete #tdAutoedit="mdAutocomplete">
      <md-option *ngFor="let dist of distributerSelect" [value]="dist.user_type">
        <span>{{ dist.user_type }}</span>
      </md-option>
    </md-autocomplete>
  </md-input-container>
  </div>
  </div>
  
  <div class="row" style="margin: 0;padding-bottom: 20px;">
<div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
  <md-select [(ngModel)]="liecenceStatus" style="width: inherit;background: #efecec;"
    placeholder="--{{'Licence Type' | translate}}--" ngDefaultControl (change)="licenceStatus($event)">
    <md-option *ngFor="let liecenceStatus of liecenceTypeArray; let i = index" style="padding-left: 20px;"
      [value]="liecenceStatus.name">
      {{liecenceStatus.name}}
    </md-option>
  </md-select>
  </div>
  </div>

  <div class="row" style="margin: 0;padding-bottom: 20px;">
    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
      <!-- timefilter icons -->
      <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;">
        <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4"
          (click)="changeDate('today')">{{'Today' | translate}}</button>
        <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5"
          (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
        <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6"
          (click)="changeDate('week')">{{'Week' | translate}}</button>
       
          <div class="btn-group dropright">
            <button type="button" class="btn btn-secondary dropdown-toggle animateClass_7" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">
              Month
            </button>
            <div class="dropdown-menu" >
              <a class="dropdown-item" *ngFor="let month of months" (click)="selectMonth(month)">{{month.name}}</a>
            </div>
          </div>


       
          <!-- <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7"
          (click)="changeDate('month')">{{'Month' | translate}}</button> -->
      </div>
    </div>
  </div>
  <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
      <!-- from time label-->
      <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
      <!-- from datetime picker -->
      <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
        [(ngModel)]="from_date" type="text">
    </div>
  </div>
  <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
      <!-- tolabel -->
      <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
      <!-- tolabel picker -->
      <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
        name="todate" [(ngModel)]="to_date" type="text">
    </div>
  </div>
  <div class="row" style="margin-bottom: 20px;float:right;">
    <div class="col-12">
      <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button
        (click)="reportFilter('data')">{{'Search' | translate}}</button>
      <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button
        (click)="exportExel()">{{'Export To Excel' | translate}}</button>
    </div>
  </div>

</div>

</div>