<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box" {{action (route-action 'goToRooms')}}>
      <span class="info-box-icon bg-aqua"><i class="fa fa-bed"></i></span>

      <div class="info-box-content">
        <span class="info-box-text">Rooms</span>
        <span class="info-box-number">---</span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box" {{action (route-action 'goToCharges')}}>
      <span class="info-box-icon bg-green"><i class="fa fa-info"></i></span>

      <div class="info-box-content">
        <span class="info-box-text">Charges</span>
        <span class="info-box-number">---</span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->

</div>
<!-- /.row -->
<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box" {{action (route-action 'goToQuotations')}}>
      <span class="info-box-icon bg-red"><i class="fa fa-quote-left"></i></span>

      <div class="info-box-content">
        <span class="info-box-text">Quotations</span>
        <span class="info-box-number">---</span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->

  <!-- fix for small devices only -->
  <div class="clearfix visible-sm-block"></div>

  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box" {{action (route-action 'goToProformaInvoices')}}>
      <span class="info-box-icon bg-green"><i class="fa fa-info"></i></span>

      <div class="info-box-content">
        <span class="info-box-text">Proforma Invoices</span>
        <span class="info-box-number">---</span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box" {{action (route-action 'goToInvoices')}}>
      <span class="info-box-icon bg-yellow"><i class="fa fa-italic"></i></span>

      <div class="info-box-content">
        <span class="info-box-text">Invoices</span>
        <span class="info-box-number">---</span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box" {{action (route-action 'goToPayments')}}>
      <span class="info-box-icon bg-aqua"><i class="fa fa-registered"></i></span>

      <div class="info-box-content">
        <span class="info-box-text">Payments</span>
        <span class="info-box-number">---</span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->

</div>
<!-- /.row -->