brewman/brewman/static/app/cash-flow/cash-flow.html

<form class="form-horizontal" role=form autocomplete="off">
    <h2>Cash Flow</h2>

    <div class="form-group">
        <label for="txtStartDate" class="col-md-2 control-label">Date</label>

        <div class="col-md-4">
            <div class="input-group">
                <input class="form-control" id="txtStartDate" type="text" uib-datepicker-popup="dd-MMM-yyyy"
                       is-open="vm.sdOpen" ng-focus="vm.sdOpen = true" ng-model="vm.info_StartDate" focus-on="vm.foDate"
                       ng-model-options="{getterSetter: true}"/>
                <span class="input-group-btn">
                    <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <input type="text" id="txtFinishDate" class="form-control" uib-datepicker-popup="dd-MMM-yyyy"
                       is-open="vm.fdOpen" ng-focus="vm.fdOpen = true" ng-model="vm.info_FinishDate"
                       ng-model-options="{getterSetter: true}"/>
                <span class="input-group-btn">
                    <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </div>
        <div class="col-md-2">
            <button class="btn btn-info" ng-click="vm.show()">Show <i class="glyphicon glyphicon-eye-open"></i></button>
        </div>
    </div>

    <table id="gvGrid" class="table table-condensed table-bordered table-striped">
        <thead>
        <tr>
            <th>Name</th>
            <th>Subtotal</th>
            <th>Total</th>
        </tr>
        </thead>
        <tbody ng-if="vm.info.Body.Details.length">
        <tr ng-repeat="item in vm.info.Body.Details">
            <td><a href="{{item.Url}}">{{item.Name}}</a></td>
            <td class="text-right">{{item.Amount | currency | clr}}</td>
            <td></td>
        </tr>
        </tbody>
        <tbody ng-if="vm.info.Body.Operating.length">
        <tr>
            <td colspan="2"><strong>Cash flows from Operating activities</strong></td>
            <td class="text-right">{{vm.total('Operating') | currency | clr}}</td>
        </tr>
        <tr ng-repeat="item in vm.info.Body.Operating">
            <td><a href="{{item.Url}}">{{item.Name}}</a></td>
            <td class="text-right">{{item.Amount | currency | clr}}</td>
            <td></td>
        </tr>
        </tbody>
        <tbody ng-if="vm.info.Body.Investing.length">
        <tr>
            <td colspan="2"><strong>Cash flows from Investing activities</strong></td>
            <td class="text-right">{{vm.total('Investing') | currency | clr}}</td>
        </tr>
        <tr ng-repeat="item in vm.info.Body.Investing">
            <td><a href="{{item.Url}}">{{item.Name}}</a></td>
            <td class="text-right">{{item.Amount | currency | clr}}</td>
            <td></td>
        </tr>
        </tbody>
        <tbody ng-if="vm.info.Body.Financing.length">
        <tr>
            <td colspan="2"><strong>Cash flows from Financing activities</strong></td>
            <td class="text-right">{{vm.total('Financing') | currency | clr}}</td>
        </tr>
        <tr ng-repeat="item in vm.info.Body.Financing">
            <td><a href="{{item.Url}}">{{item.Name}}</a></td>
            <td class="text-right">{{item.Amount | currency | clr}}</td>
            <td></td>
        </tr>
        </tbody>
        <tfoot>
        <tr ng-repeat="item in vm.info.Footer">
            <td colspan="2"><em>{{item.Name}}</em></td>
            <td class="text-right">{{item.Amount | currency | clr}}</td>
        </tr>
        </tfoot>
    </table>
</form>