crm-summit/app/Views/invtrans_reportusage.php

<?= $this->extend('layouts/main.php') ?>

<?= $this->section('content') ?>
<script src='<?=base_url();?>/assets/xlsx.mini.min.js'></script>
<div class="page-wrapper">
	<?php if (session()->get('msg')) : ?>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        <strong><?= session()->getFlashdata('msg'); ?></strong>
        </div>
    <?php endif; ?>
	<div class="container-fluid">
		<div class="row page-titles">
			<div class="col-md-5 align-self-center">
				<h4 class="text-themecolor">Sparepart Usage</h4>
			</div>					
		</div>
		<div class="row">
			<div class="col-12">
				<div class="card">
					<div class="card-body">
						<form method='post' >
							<div class="accordion accordion-flush mb-3" id="accordionForm">
								<div class="accordion-item">
									<h2 class="accordion-header" id="headingForm">
									<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseForm" 
										aria-expanded="false" aria-controls="collapseForm" style='padding:5px;'>
										<span class="me-3"> Filter </span>
									</button>
									</h2>
									<div id="collapseForm" class="accordion-collapse collapse show bg-white" aria-labelledby="headingForm">
										<div class="accordion-body ps-0">	
											<div class="row mb-2">
												<div class="col">
													<div class="input-group input-group-sm">
														<span class="input-group-text d-flex align-items-center justify-content-center" style="width: 80px;">Date</span>
														<input class="form-control form-control-sm" type="date" name="date1" value="<?= $date1;?>" onfocus="this.showPicker()"/>
														<span class="input-group-text d-flex align-items-center justify-content-center">-</span>
														<input class="form-control form-control-sm" type="date" name="date2" value="<?= $date2;?>" onfocus="this.showPicker()"/>
													</div>
												</div>
											</div>											
											<button type="submit" class="btn btn-success btn-sm text-white float-end"> <i class="fa fa-check"></i> Submit</button>
										</div>
									</div>
								</div>
							</div>							
						</form>
					</div>
				</div>
			</div>
		</div>
		
		<?php if(isset($usage)) { ?>
		<div class="row mt-2">
      		<div class="col-12">
				<div class="card">
					<div class="card-body">
						<button class='btn btn-sm btn-info' onclick='exportToExcel()'>Export to excel</button>
						<div class="table-responsive">
							<table id="myTable" class="table small display border">
								<thead>
									<tr>
										<!-- vendor area site sn-inst. catalog productname qty usagedate -->
										<th>Vendor</th> <th>Area</th> <th>Site</th> <th>SN#</th> <th>Cat#</th> <th>Product</th> <th>Qty</th> <th>Usage Date</th>
									</tr>
								</thead>
								<tbody>
									<?php
									//	vendorname	areaname	sitename	productnumber	catalognumber	productname	qty	baseunit	itxdate
									foreach($usage as $data) {
										$vendor = $data['vendorname'];
										$area = $data['areaname'];
										$site = $data['sitename'];
										$sn = $data['productnumber'];
										$cat = $data['catalognumber'];
										$product = $data['productname'];
										$qty = $data['qty'];
										$unit = $data['baseunit'];
										$itxdate = $data['itxdate'];
									?>
									<tr>
										<td><?=$vendor;?></td> <td><?=$area;?></td> <td><?=$site;?></td> <td><?=$sn;?></td> <td><?=$cat;?></td> <td><?=$product;?></td> <td><?="$qty $unit";?></td> <td><?=$itxdate;?></td>
									</tr>
									<?php
									}
									?>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php } ?>
	</div>
</div>
<?= $this->endSection() ?>

<?= $this->section('script') ?>
<script>
<!-- SCRIPT DATATABLES -->
$(function () {
	$('#myTable').DataTable({
		pageLength : -1
	});
});

function exportToExcel() {
	var tableElement = document.getElementById("myTable");
	var wb = XLSX.utils.book_new();
	var ws = XLSX.utils.table_to_sheet(tableElement);
	XLSX.utils.book_append_sheet(wb, ws, "My Data");
	XLSX.writeFile(wb, "reportUsage.xlsx");
}
</script>

<?= $this->endSection() ?>