Basic example

Overview
Showing data from 213 batches
<div class="row">
  <div class="col-lg-12">
    <div>
      <div>
        Overview
      <form class="form-inline">
        <div class="form-inline form-collapse">
          <div class="select">
            <select class="form-control date-select">
              <option value="">Year</option>
              <option value="2015">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              <option value="2018">2018</option>
            </select>
          </div>
          <div class="select">
            <select class="form-control date-select">
              <option value="">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
        </div>
        <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
        <div class="form-inline form-collapse">
          <div class="select">
            <select class="form-control date-select select">
              <option value="">Year</option>
              <option value="2015">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              <option value="2018">2018</option>
            </select>
          </div>
          <div class="select">
            <select class="form-control date-select select">
              <option value="">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
        </div>
        <button type="submit" class="btn btn-default pull-right">Search</button>
      </form>
      <div class="text-muted small">Showing data from <a data-toggle="modal">213 batches</a></div>
      </div>
    </div>
  </div>
</div>

Example in panel (Treasurer dashboard)

Overview
Showing data from 213 batches

7.050,30 EUR

Fully Unpaid (223)

711,23 EUR

Fully Paid (2115)

7.929,39 EUR

Fully Credited (128)

43,34 EUR

Partial Unpaid (9)

31,98 EUR

Partial Paid (9)

2.073,45 EUR

Partial Credited (46)
 
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-cc">
      <div class="panel-heading panel-heading-sm">
        Overview
      <form class="form-inline">
        <div class="form-inline form-collapse">
          <div class="select">
            <select class="form-control date-select">
              <option value="">Year</option>
              <option value="2015">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              <option value="2018">2018</option>
            </select>
          </div>
          <div class="select">
            <select class="form-control date-select">
              <option value="">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
        </div>
        <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
        <div class="form-inline form-collapse">
          <div class="select">
            <select class="form-control date-select select">
              <option value="">Year</option>
              <option value="2015">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              <option value="2018">2018</option>
            </select>
          </div>
          <div class="select">
            <select class="form-control date-select select">
              <option value="">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
        </div>
        <button type="submit" class="btn btn-default pull-right">Search</button>
      </form>
      <div class="text-muted small">Showing data from <a data-toggle="modal">213 batches</a></div>
      </div>
      <div class="panel-body grid-panel">
        <div class="row">
          <div class="col-xs-12 col-sm-4">
            <a href="">
              <h4>7.050,30 <span class="text-muted small">EUR</span></h4>
              <div><b class="text-muted small">Fully Unpaid</b> <span class="small">(223)</span></div>
            </a>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="">
              <h4>711,23 <span class="text-muted small">EUR</span></h4>
              <div><b class="text-muted small">Fully Paid</b> <span class="small">(2115)</span></div>
            </a>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="">
              <h4>7.929,39 <span class="text-muted small">EUR</span></h4>
              <div><b class="text-muted small">Fully Credited</b> <span class="small">(128)</span></div>
            </a>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-4">
            <a href="">
              <h4>43,34 <span class="text-muted small">EUR</span></h4>
              <div><b class="text-muted small">Partial Unpaid</b> <span class="small">(9)</span></div>
            </a>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="">
              <h4>31,98 <span class="text-muted small">EUR</span></h4>
              <div><b class="text-muted small">Partial Paid</b> <span class="small">(9)</span></div>
            </a>
          </div>
          <div class="col-xs-12 col-sm-4">
            <a href="">
              <h4>2.073,45 <span class="text-muted small">EUR</span></h4>
              <div><b class="text-muted small">Partial Credited</b> <span class="small">(46)</span></div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Example with table

Data of 12 files
INVOICE NUMBER CUSTOMER OUTSTANDING (EUR) PAID (EUR) CREDITED (EUR) INSTALLMENTS PAID DAYS OLD NEXT MESSAGE
123456 Mr Bean 115,00 0,00 0,00 0 from 1 19 Notification about late installment payment 
<div class="row">
  <div class="col-lg-12">
    <form>
      <div class="toolbar">
          <div class="toolbar-group-left">
            <div class="btn-group">
              <button type="submit" class="btn btn-default btn-icon" data-toggle="tooltip" data-placement="top"><span class="glyphicon glyphicon-comment"></span></button>
              <button type="submit" class="btn btn-default btn-icon" data-toggle="tooltip" data-placement="top"><span class="glyphicon glyphicon-minus-sign"></span></button>
            </div>
          </div>
          <div class="toolbar-group-right">
            <div class="btn-group">
              <span class="text-muted small">
              Data of 12 files
              </span>
              <div class="form-inline form-collapse">
                <div class="select">
                  <select class="form-control date-select">
                    <option value="">year</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                  </select>
                </div>
                <div class="select">
                  <select class="form-control date-select">
                    <option value="">Month</option>
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                    <option value="4">April</option>
                    <option value="5">May</option>
                    <option value="6">June</option>
                    <option value="7">July</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                  </select>
                </div>
              </div>
              <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
              <div class="form-inline form-collapse">
                <div class="select">
                  <select class="form-control date-select select">
                    <option value="">year</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                  </select>
                </div>
                <div class="select">
                  <select class="form-control date-select select">
                    <option value="">Month</option>
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                    <option value="4">April</option>
                    <option value="5">May</option>
                    <option value="6">June</option>
                    <option value="7">July</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                  </select>
                </div>
              </div>
              <button type="submit" class="btn btn-default pull-right">Search</button>
            </div>
            <div class="btn-group">
              <button type="submit" class="btn btn-default btn-icon" data-toggle="tooltip" data-placement="top">
              <span class="glyphicon glyphicon-download"></span>
              </button>
            </div>
          </div>

      </div>
      <table class="table">
        <thead>
          <tr>
            <th style="width:2%">
              <a class="toggle" data-state="false" href="#">
              <span class="glyphicon glyphicon-check"></span>
              </a>
            </th>
            <th class="text-right">
              <a href="#">
              <span class="glyphicon glyphicon-sort"></span>
              </a>
              INVOICE NUMBER
            </th>
            <th>CUSTOMER</th>
            <th class="text-right">OUTSTANDING (EUR)</th>
            <th class="text-right">PAID (EUR)</th>
            <th class="text-right">CREDITED (EUR)</th>
            <th>INSTALLMENTS PAID</th>
            <th class="text-right">DAYS OLD</th>
            <th>NEXT MESSAGE</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" value="true" class="invoices"></td>
            <td class="text-right">
              <a target="_blank" href="#">123456</a>
            </td>
            <td>Mr Bean</td>
            <td class="text-right"><span class="label label-danger">115,00</span></td>
            <td class="text-right">0,00</td>
            <td class="text-right">0,00</td>
            <td><b>0</b> from 1</td>
            <td class="text-right">19</td>
            <td>Notification about late installment payment</td>
            <td></td>
            <td class="text-right"></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</div>