pbmc-cmod/app/Views/dashboard.php

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

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

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

<div class="card border-0">
	<div class="card-body">
		<div class="table-responsive">
			<table id="myTable" class="table">
				<thead>
					<th>Order</th>
					<th>MR</th>
					<th>Patient</th>
					<th>Request</th>
					<th>Hosp</th>
					<th>Test</th>
					<th>Status</th>
				</thead>
				<tbody id="table-body">
				</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>
index();
function index() {
	let url = '<?=base_url('');?>api/dashboard/index';
	$.ajax({
		url: url,
		method: 'GET',
		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" 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="text-orange">' +
						'<h3 class="custom-card-text m-0 p-0 '+statcolor[index]+'">'+ stattext[index] +'</h3>' +
					'</div>' +
				'</div>';
			});
			$("#stats").html(statcontent);
			
			/*
			// table
			*/
			$("#table-body").html("");
			var data = response['data'];
			for (var i = 0; i < data.length; i++) {
				colldate = data[i].COLLECTIONDATE.substr(0,10);
				patnumber = data[i].PATNUMBER.substr(-16,16);
				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='2'";
					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>' + colldate + '</td> <td>' + patnumber + '</td> <td>' + accessnumber + '</td> <td>' + patname + '</td> <td>' + hon + '</td> <td>' + tests + '</td>' + 
					"<td role='button' class='"+bgcolor+" text-center align-middle' onclick='viewAccess("+accessnumber+")'>"+stattext+"</td>" + '</tr>';					
				$("#table-body").append(datarow);
			}
			$('#myTable').DataTable();
			
			// 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();?>dashboard/viewAccess/'+access;
	$('.modal-content').load(url, function(){
		$('#modal').modal('show');
	});
}
</script>
<?= $this->endSection() ?>