pbmc-cmod/app/Views/fo/dashboard.php

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

<?= $this->section('content') ?>

<style>
	.pointercol {
    	cursor: pointer;
	}
</style>

<div id='stats' class="d-flex justify-content-between p-0">
</div>

<div class="card border-0">
	
	<!-- div.card-head -->

	<div class="card-body">

		<div class="row d-flex align-items-center">
			<div class="col col-auto">
				<b>Date</b>&nbsp; &nbsp;:&nbsp; &nbsp;<input class='date1' type='date' value=''> - <input class='date2' type='date'> 
			</div>
			<div class="col col-auto">
				<button class='btn btn-sm btn-primary py-1 px-2 d-flex align-items-center' onclick='index()'><i class="bi bi-calendar2-event"></i>&nbsp;&nbsp;Search</button> 
			</div>
		</div>
	
		<div class="table-responsive mt-3">
			<table id="myTable" class="table table-hover">
				<thead class='text-start'>
					<th class='text-start' width="10%">Order Date</th>
					<th width="12%">Patient#</th>
					<th width="17%">Patient Name</th>
					<th class='text-start' width="10%">Access#</th>
					<th width="9%">Reff#</th>
					<th>Test</th>
					<th>Status</th>
					<th></th>
				</thead>
				<tbody id="table-body" class='text-start'>
				</tbody>
			</table>
		</div>
	</div>
</div>	

<div class="modal fade" id="modal" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
		</div>
	</div>
</div>

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

<?= $this->section('script') ?>
<script>
let curDate = new Date().toJSON().slice(0, 10);
$('.date1').val(curDate);
$('.date2').val(curDate);
index();

document.addEventListener('keydown', function(event) { 
	if (event.key === 'F5') { event.preventDefault(); index(); } 
});

function index() {
	let url = '<?=base_url('');?>api/dashboard/index';
	date1 = $('.date1').val();
	date2 = $('.date2').val();
	$.ajax({
		url: url,
		method: 'POST',
		data : {date1:date1, date2:date2},
		success: function(response) {	
			/*
			// counter
			*/
			$("#stats").html("");
			var stats = ['Pend', 'PartColl', 'Coll', 'PartRecv', 'Recv', 'Inc', 'PartVal', 'Comp'];
			var statcolor = ['text-orange', 'text-peach', 'text-pink', 'text-soft-blue', 'text-blue', 'text-grey', 'text-soft-green', 'text-green'];
			var staticon = ['bi-clock-history','bi-tv', 'bi-collection', 'bi-file-medical', 'bi-journal-medical', 'bi-calendar3-week', 'bi-check2', 'bi-clipboard-check'];
			var stattext = ['Pending', 'Part Collected', 'Collected', 'Part Received', 'Received', 'Incomplete', 'Part Validated', 'Validated'];
			var count = response['count'];
			var statcontent = '';
			stats.forEach ( (item, index) => {
				//console.log(item + ' ' + index);
				if(!count[item]) { count[item] = 0; }
				statcontent += '<div class="custom-card shadow" data-filtertype="'+index+'">' +
					'<div class="custom-card-content">' +
						'<div class="row p-0 d-flex justify-content-between">' +
							'<div class="col-3 text-start '+statcolor[index]+'"> <h5 class="m-0"><i class="bi '+staticon[index]+'"></i></h5> </div>' +
							'<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">'+count[item]+'</h2> </div>' +
						'</div>' +
						"<hr class='"+statcolor[index]+"'>" +
						'<h3 class="custom-card-text m-0 p-0 '+statcolor[index]+'">'+ stattext[index] +'</h3>' +
					'</div>' +
				'</div>';
			});
			$("#stats").html(statcontent);
			
			/*
			// table
			*/
			$("#myTable").DataTable().destroy();
			$("#table-body").html("");
			var data = response['data'];
			for (var i = 0; i < data.length; i++) {
				colldate = data[i].COLLECTIONDATE.slice(0,10);
				colltime = data[i].COLLECTIONDATE.slice(10,16);

				if (data[i].PATNUMBER != null) {
					patnumber = data[i].PATNUMBER.substr(-16,16);
					patnumber = patnumber.substring(patnumber.length - 10);
				} else {
					patnumber = ' NULL ';
				}
				
				accessnumber = data[i].SP_ACCESSNUMBER;
				patname = data[i].NAME;
				hon = data[i].HOSTORDERNUMBER;
				tests = data[i].TESTS;
				stat = data[i].STATS;
				if(stat == 'Pend') { 
					bgcolor = 'bg-orange';
					datafilter = "data-filterrow='0'";
					stattext = 'Pending';
				} else if(stat == 'PartColl') { 
					bgcolor = 'bg-peach';
					datafilter = "data-filterrow='1'";
					stattext = 'Part Collected';
				} else if(stat == 'Coll') { 
					bgcolor = 'bg-pink';
					datafilter = "data-filterrow='2'";
					stattext = 'Collected';
				} else if(stat == 'PartRecv') { 
					bgcolor = 'bg-soft-blue';
					datafilter = "data-filterrow='3'";
					stattext = 'Part Received';
				} else if(stat == 'Recv') {
					bgcolor = 'bg-blue';
					datafilter = "data-filterrow='4'";
					stattext = 'Received';
				} else if(stat == 'Inc') { 
					bgcolor = 'bg-grey';
					datafilter = "data-filterrow='5'";
					stattext = 'Incomplete';
				} else if(stat == 'PartVal') { 
					bgcolor = 'bg-soft-green';
					datafilter = "data-filterrow='6'";
					stattext = 'Part Validated';
				} else if(stat == 'Comp') { 
					bgcolor = 'bg-green';
					datafilter = "data-filterrow='7'";
					stattext = 'Validated';
				}
				let datarow = "<tr class='align-middle'" + datafilter +" >" + 
					"<td class='text-start'>" + colldate + '<br>'+ colltime +'</td> <td>' + patnumber + '</td> <td>' + patname.trim() + "</td> <td class='text-start'>" + accessnumber + '</td> <td>' + hon + '</td> <td>' + tests + '</td>' + 
					"<td role='button' class='"+bgcolor+" text-center align-middle pointercol' onclick='viewAccess("+accessnumber+")'>"+stattext+"</td>" + 
					"<td role='button' class='text-center align-middle' onclick='resultPdfAccess("+accessnumber+ ",event" +")'> <h4 class='p-0 m-0'><i class='bi bi-filetype-pdf'></i></h4> </td>" +'</tr>';					
				$("#table-body").append(datarow);
			}
			$('#myTable').DataTable({
				"pageLength": 25, // Ganti sesuai kebutuhan
				"lengthMenu": [25, 50, 100] // Pilihan dropdown entries per halaman
    		});
			
			// datatable filter
			const filterButton = document.querySelectorAll("[data-filtertype]");
			const table = document.querySelector("#myTable");
			const tr = table.getElementsByTagName("tr");

			let activeButton = null;

			filterButton.forEach((button) => {
				button.addEventListener("click", () => {
					const selectedButton = button.getAttribute("data-filtertype");
					console.log(selectedButton);
					
					if (activeButton === button) {
						button.classList.remove("active", "border", "border-primary", "border-5");
						activeButton = null;
						for (let i = 1; i < tr.length; i++) {
							tr[i].style.display = "";
						}
					} else {
						filterButton.forEach((btn) => btn.classList.remove("active", "border", "border-info", "border-3"));
						button.classList.add("active", "border", "border-info", "border-3");
						activeButton = button;

						for (let i = 1; i < tr.length; i++) {
							const filterValue = tr[i].getAttribute("data-filterrow");

							if (filterValue === selectedButton) {
								tr[i].style.display = "";
							} else {
								tr[i].style.display = "none";
							}
						}
					}
					
				});
			});
		},
		error: function(response) { console.log(response.responseJSON); }
	});
}

function viewAccess(access) {
	let url = '<?=base_url();?>fo/dashboard/viewAccess/'+access;
	$('.modal-content').load(url, function(){
		$('#modal').modal('show');
	});
}
function resultPdfAccess(access, event) {
	event.stopPropagation(); // Mencegah klik pada <tr> dieksekusi
	let url = '<?=base_url();?>printResult/'+access;
	window.open(url, '_blank');
}
</script>
<?= $this->endSection() ?>