apollodec/Apollo/assets/views/report_expense.html

<section id="page-title">
    <div class="row">
        <div class="col-sm-8">
            <h1 class="mainTitle">Expense Report</h1>
        </div>
        <!-- <div ncy-breadcrumb></div>   -->
    </div>
</section>
<style>
 .table>tbody>tr>td { padding: 2px; }
 
   .table-responsive {
   /* width:80%;
   margin-left: 101px;
    */
}
</style>
<script type="text/javascript" src="bower_components/ng-table-excel-export/ng-table-excel-export.min.js">
   

</script>
<div class="container-fluid container-fullw bg-white">
    <div ng-controller="report_expenseCtrl" ng-init="filters()">
        <form name="Form" id="form" novalidate ng-submit="onSubmit(Form)" method="post">
            <fieldset>
                <div class="row">
                    <div class="col-md-12">

                        
                        <div class="row">
                            <div class="col-md-3">
                                <!-- <pre>{{searchData.date}}</pre> -->
                                <div data-ng-controller="DatepickerDemoCtrl">
                                    <label>
                                           From Date 
                                        </label>
                                    <input type="text" tabindex="1" class="form-control " ng-click="startOpen = !startOpen" datepicker-popup="dd-MM-yyyy" ng-model="filters.from_date"
                                        is-open="startOpen" ng-init="startOpen = false" name="addDate" datepicker-options="dateOptions"
                                        placeholder="Select Date" close-text="Close" required="required" ng-change="changeDate()" 
                                        show-button-bar="true" required/>
										<span style="color:red;" ng-if="show" ng-show="Form.addDate.$dirty && Form.addDate.$error.required">Please select FromDate.</span>

                                </div>
                            </div>
                            <div class="col-md-3">
                                <!-- <pre>{{searchData.date}}</pre> -->
                                <div data-ng-controller="DatepickerDemoCtrl">
                                    <label>
                                            To Date   
                                        </label>
                                    <input type="text" tabindex="1" class="form-control " ng-click="startOpen = !startOpen" datepicker-popup="dd-MM-yyyy" ng-model="filters.to_date"
                                        is-open="startOpen" ng-init="startOpen = false" name="toDate" datepicker-options="dateOptions"
                                        placeholder="Select Date" close-text="Close" required="required" ng-change="changeToDate()"
                                        show-button-bar="true" required/>
										<span style="color:red;" ng-if="show" ng-show="Form.toDate.$dirty && Form.toDate.$error.required">Please select ToDate.</span>

                                </div>
                            </div>
							<!-- <div class="col-md-3"> -->
													<!-- <label> -->
														<!-- Year -->
													<!-- </label><br> -->
					
													<!-- <select style="width: 250px;" ui-select2 class="form-control" tabindex="1" class="cs-select cs-skin-elastic" name="univ" ng-model="filters.fout_year" required> -->
														<!-- <option value="" selected>Select Year</option> -->
														
														<!-- <option ng-repeat=""  value="{{}}">{{}}</option> -->
					
													<!-- </select> -->
													
												<!-- </div> -->
                            

                            <div class="col-md-2" style="padding-top: 2.3%;">
                                <div class="pull-right">

                                    <button type="submit" class="btn btn-success btn-o" tabindex="8">
                                        Submit
                                    </button>

                                </div>
                            </div>
                        </div>
                        


                    </div>
                </div>
            </fieldset>

        </form>
        <!-- <pre>{{statusr | json}}</pre> -->
        <div class="row" style="text-align: right;">
                <div class="col-md-4">
                <input class="form-control"  type="text" ng-model="search" id="searchIn" autofocus tabindex="2" placeholder="Search" />
                </div>
				<!-- <button pdf-save-button="getpdf" pdf-name="Expense_Report.pdf" class="btn btn-success btn-o">PDF</button> -->
                <button class="btn btn-success btn-o" ng-click="exportData()">Export to Excel</button>
                <button ng-disabled="loadStaring"  ng-click="generatePFD(expense)" class="btn btn-success btn-o">
                    Export As PDF
                </button>
        </div>
        <div pdf-save-content="getpdf" class="table-responsive" style="margin-top: 20px;">
		<h4 style="text-align:center;">Apollo Distance Education College - {{expense_data[0].branch}}</h4>
		<h4 style="text-align:center;">Expense Report {{filters.from_date | date : "dd-MM-yyyy"}} To {{filters.to_date | date : "dd-MM-yyyy"}}</h4>
            <table  id="datatable"   class="table table-striped table-bordered table-hover table-condensed"  export-table>
                  
                           
                         
                <thead>
                   
                    <tr>
                        <th>SL.No</th>
                        <th>Description</th>
                        <th>January</th>
                        <th>February</th>
                        <th>March</th>
                        <th>April</th>
                        <th>May</th>
                        <th>June</th>
                        <th>July</th>
                        <th>August</th>
                        <th>September</th>
                        <th>October</th>
                        <th>November</th>
                        <th>December</th>
                        <th>Total Amount</th>
                        
                 
                    </tr>
                </thead>
                <tbody>
                    <tr dir-paginate="p in expense_data|filter:search:strict|itemsPerPage:10"current-page="currentPage">
                        <td>{{10 * (currentPage-1)+$index+1}}</td>
                        <td>{{p.Expense_name}}</td>
                        <td style="text-align:right;">{{p.January}}</td>
                        <td style="text-align:right;">{{p.February}}</td>
                        <td style="text-align:right;">{{p.March}}</td>
                        <td style="text-align:right;">{{p.April}}</td>
                        <td style="text-align:right;">{{p.May}}</td>
                        <td style="text-align:right;">{{p.June}}</td>
                        <td style="text-align:right;">{{p.July}}</td>
                        <td style="text-align:right;">{{p.August}}</td>
                        <td style="text-align:right;">{{p.September}}</td>
                        <td style="text-align:right;">{{p.October}}</td>
                        <td style="text-align:right;">{{p.November}}</td>
                        <td style="text-align:right;">{{p.December}}</td>
                        <td style ="text-align:right;">{{p.total}}</td>
                       
                    </tr>
                
                </tbody>
                <tfoot>
                    <td colspan="14" style ="text-align:right;">Grand Total</td>
                    <td style ="text-align:right;">{{getTotal()}}</td>
                </tfoot>

            </table>
			<div class="row">
				<div class="col-md-12" ng-if="isLoaderShow">
					<center> <h3>{{isLoaderTxt1}}</h3> </center>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12" ng-if="isLoaderShow1">
					<center> <h1>{{isLoaderTxt}}</h1> </center>
				</div>
			</div>
            <h3 style="text-align:center;">{{message}}</h3>

        </div>

        <dir-pagination-controls  direction-links="true" boundary-links="true">
        </dir-pagination-controls>
    </div>
</div>