<app-all-menus></app-all-menus>
<div class="topDiv">
  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <!-- <button style="background-color: #f9f6f6; font-size: 10px; color: black; float: left; margin-left: 10px;" md-raised-button (click)="addexpense()">{{'ADD EXPENSE' | translate}}</button> -->
      <i class="fas fa-plus-circle" (click)="addexpense()" title="ADD EXPENSE" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 30px;border-radius: 50px;margin-left: 20px;"></i>
      <h4>{{'Vehicle Expenses' | translate}}</h4>
    </div>
  </div>  
  <div class="row rowStyle">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">  
      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
        </div>
      </div>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;padding-right: 15px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0px;">
          <div *ngIf="Load" class="loading">Loading&#8230;</div>
          <div id="toast"> <div id="desc">{{data_descip}}</div></div>
          <div style="width: 100%;height:84vh;">
            <div class="row" style="margin: 0px;">
              <div class="col-sm-3 col-md-3 col-lg-3" *ngFor = "let Etype of expenseType" style="height : 160px;padding-right: 0; max-height:160px;margin: 0px;">
               <div class="row" style="margin: 0px;cursor: pointer;"  title="Get expense details" (click)="VehDetail(Etype)" > 
                 <div class="col-12"  style="margin: 0px;background: #e4dfdf;height: 150px;padding: 0;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);">
                  <div style="background: #868e96; text-align: center; color: white; padding-top: 5px; padding-bottom: 5px;">
                    {{Etype._id}}  
                  </div>
                  <div style="font-size: 30px; text-align: center; padding-top: 25px;">
                    <span style="font-size: 20px;">{{currency_code}}</span>
                    <span>{{Etype.total}}</span>         
                  </div>
                  <div style="float: right;float: right; padding-right: 10px;">
                    <!-- <i class="fas fa-utensils" style="font-size: 40px;"></i> -->
                    <div *ngIf="getIcon(Etype._id) ">
                      <img style="width: 40px;" src={{iconType}}>
                    </div>
                    <!-- <img style="width: 40px;" src=getIcon()> -->
                  </div>
                 </div>
               </div>      
              </div>
            </div> 
          </div>
        </div> 
        </div>
      </div> 
    </div>
  </div>
