pbmc-cmod/app/Views/dashboard.php

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

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

<div class="d-flex justify-content-between p-0">
	<div class="custom-card" data-filtertype="1">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-orange"> <h5 class="m-0"><i class="bi bi-clock-history"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">345</h2> </div>
			</div>
			<hr class="text-orange">
			<h3 class="custom-card-text m-0 p-0 text-orange">Pending</h3>
		</div>
	</div>
	<div class="custom-card" data-filtertype="2">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-peach"> <h5 class="m-0"><i class="bi bi-tv"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">333</h2> </div>
			</div>
			<hr class="text-peach">
			<h3 class="custom-card-text m-0 p-0 text-peach">Part. Collect</h3>
		</div>
	</div>
	<div class="custom-card" data-filtertype="3">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-pink"> <h5 class="m-0"><i class="bi bi-collection"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">542</h2></div>
			</div>
			<hr class="text-pink">
			<h3 class="custom-card-text m-0 p-0 text-pink">Collected</h3>
		</div>
	</div>
	<div class="custom-card" data-filtertype="4">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-soft-blue"> <h5 class="m-0"><i class="bi bi-file-medical"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">436</h2> </div>
			</div>
			<hr class="text-soft-blue">
			<h3 class="custom-card-text m-0 p-0 text-soft-blue">Part. Rcv.</h3>
		</div>
	</div>
	<div class="custom-card" data-filtertype="5">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-blue"> <h5 class="m-0"><i class="bi bi-journal-medical"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">567</h2> </div>
			</div>
			<hr class="text-blue">
			<h3 class="custom-card-text m-0 p-0 text-blue">Received</h3>
		</div>
	</div>
	<div class="custom-card" data-filtertype="6">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-grey"> <h5 class="m-0"><i class="bi bi-calendar3-week"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">321</h2> </div>
			</div>
			<hr class="text-grey">
			<h3 class="custom-card-text m-0 p-0 text-grey">Inprocess</h3>
		</div>
	</div>
	<div class="custom-card" data-filtertype="7">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-soft-green"> <h5 class="m-0"><i class="bi bi-check2"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">432</h2> </div>
			</div>
			<hr class="text-soft-green">
			<h3 class="custom-card-text m-0 p-0 text-soft-green">Part. Val.</h3>
		</div>
	</div>
	<div class="custom-card" data-filtertype="8">
		<div class="custom-card-content">
			<div class="row p-0 d-flex justify-content-between">
				<div class="col-3 text-start text-green"> <h5 class="m-0"><i class="bi bi-clipboard-check"></i></h5> </div>
				<div class="col-9 text-end pe-3"> <h2 class="m-0 custom-card-title">321</h2></div>
			</div>
			<hr class="text-green">
			<h3 class="custom-card-text m-0 p-0 text-green">Validated</h3>
		</div>
	</div>
</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 jaka yang ngerjakan
			// 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;
				stats = data[i].STATS;
				if(stats == 'Pend') { 
					statsTD = "<td role='button' class='bg-orange text-center align-middle' onclick='viewAccess("+accessnumber+")'>Pending</td>"; 
					datafilter = "data-filterrow='1'";
				} else if(stats == 'PartColl') { 
					statsTD = "<td role='button' class='bg-peach text-center align-middle' onclick='viewAccess("+accessnumber+")'>Partial Collected</td>"; 
					datafilter = "data-filterrow='2'";
				} else if(stats == 'Coll') { 
					statsTD = "<td role='button' class='bg-pink text-center align-middle' onclick='viewAccess("+accessnumber+")'>Collected</td>"; 
					datafilter = "data-filterrow='3'";
				} else if(stats == 'PartRecv') { 
					statsTD = "<td role='button' class='bg-soft-blue text-center align-middle' onclick='viewAccess("+accessnumber+")'>Partial Received</td>"; 
					datafilter = "data-filterrow='4'";
				} else if(stats == 'Recv') { 
					statsTD = "<td role='button' class='bg-blue text-center align-middle' onclick='viewAccess("+accessnumber+")'>Received</td>"; 
					datafilter = "data-filterrow='5'";
				} else if(stats == 'Inc') { 
					statsTD = "<td role='button' class='bg-soft-green text-center align-middle' onclick='viewAccess("+accessnumber+")'>Incomplete</td>"; 
					datafilter = "data-filterrow='6'";
				} else if(stats == 'PartVal') { 
					statsTD = "<td role='button' class='bg-soft-green text-center align-middle' onclick='viewAccess("+accessnumber+")'>Partial Validated</td>"; 
					datafilter = "data-filterrow='7'";
				} else if(stats == 'Comp') { 
					statsTD = "<td role='button' class='bg-green text-center align-middle' onclick='viewAccess("+accessnumber+")'>Validated</td>"; 
					datafilter = "data-filterrow='8'";
				}
				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>' + 
					statsTD + '</tr>';					
				$("#table-body").append(datarow);
			}
			$('#myTable').DataTable();
		},
		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');
	});
}

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";
				}
			}
		}
		
	});
  });
</script>
<?= $this->endSection() ?>