Update Tampilan dashboard
This commit is contained in:
mikael-zakaria
parent
77f15bfc94
commit
ad4512de62
@ -15,7 +15,7 @@
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
|
||||
|
||||
|
||||
<!-- DataTables CSS -->
|
||||
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
||||
|
||||
@ -50,16 +50,19 @@
|
||||
|
||||
/* Hover - biru lembut transparan */
|
||||
.sidebar .nav-link:hover {
|
||||
background-color: #0d6efd20; /* biru muda transparan */
|
||||
background-color: #0d6efd20;
|
||||
/* biru muda transparan */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Active - biru solid */
|
||||
.sidebar .nav-link.active {
|
||||
background-color: #0d6efd; /* biru solid Bootstrap */
|
||||
background-color: #0d6efd;
|
||||
/* biru solid Bootstrap */
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 0 6px rgba(13, 110, 253, 0.4); /* efek glow lembut */
|
||||
box-shadow: 0 0 6px rgba(13, 110, 253, 0.4);
|
||||
/* efek glow lembut */
|
||||
}
|
||||
|
||||
.main {
|
||||
@ -80,6 +83,55 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Untuk Card Status Counter */
|
||||
.status-card {
|
||||
width: 123px;
|
||||
/* lebar tetap */
|
||||
height: 65px;
|
||||
/* tinggi seragam */
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
border : solid 1px #ddd ;
|
||||
/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08); */
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
display: flex;
|
||||
/* flex untuk isi card */
|
||||
align-items: center;
|
||||
/* tengah vertikal */
|
||||
justify-content: center;
|
||||
/* tengah horizontal */
|
||||
flex-direction: column;
|
||||
/* urut atas ke bawah */
|
||||
}
|
||||
|
||||
.status-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.status-count {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
/* biar teks tidak turun ke bawah */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* kalau terlalu panjang, potong dengan "..." */
|
||||
max-width: 100%;
|
||||
/* biar rapih dalam box */
|
||||
}
|
||||
|
||||
|
||||
.dot {
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
@ -88,6 +140,11 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Untuk Cursor di Tabel */
|
||||
.pointercol {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Pend {
|
||||
background-color: white;
|
||||
}
|
||||
@ -140,27 +197,30 @@
|
||||
</div>
|
||||
|
||||
<div id="sidebar" class="sidebar">
|
||||
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<!-- 2_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak -->
|
||||
<a class="nav-link <?= (in_array($path, $activeUrls) ? 'active' : '') ?>" href="<?= base_url('admin') ?>"><i class="bi bi-house-door"></i> Dashboard
|
||||
<a class="nav-link <?= (in_array($path, $activeUrls) ? 'active' : '') ?>"
|
||||
href="<?= base_url('admin') ?>"><i class="bi bi-house-door"></i> Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<?php if ( session()->get('userlevel') == 1) : ?>
|
||||
<li class="nav-item">
|
||||
<!-- 3_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak -->
|
||||
<a class="nav-link <?= (uri_string() == 'admin/user' ? 'active' : '') ?>" href="<?= base_url('admin/user') ?>"><i class="bi bi-people"></i> User Management
|
||||
<a class="nav-link <?= (uri_string() == 'admin/user' ? 'active' : '') ?>"
|
||||
href="<?= base_url('admin/user') ?>"><i class="bi bi-people"></i> User Management
|
||||
</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="<?= base_url('logout') ?>"><i class="bi bi-box-arrow-in-left"></i> Logout
|
||||
<a class="nav-link" href="<?= base_url('logout') ?>"><i class="bi bi-box-arrow-in-left"></i>
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -189,13 +249,18 @@
|
||||
});
|
||||
|
||||
// Datatable
|
||||
$(document).ready(function() {
|
||||
$(document).ready(function () {
|
||||
$('#datatables').DataTable({
|
||||
pageLength: 100, // jumlah baris per halaman
|
||||
lengthMenu: [10, 25, 50, 75, 100],
|
||||
columnDefs: [
|
||||
{ className: 'text-center', targets: [0,1,2,3,4,5,6,7,8,9] }, // semua kolom di tengah
|
||||
{ className: 'text-start', targets: [10] }
|
||||
columnDefs: [{
|
||||
className: 'text-center',
|
||||
targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
||||
}, // semua kolom di tengah
|
||||
{
|
||||
className: 'text-start',
|
||||
targets: [12]
|
||||
}
|
||||
],
|
||||
language: {
|
||||
// search: "Cari:",
|
||||
@ -208,7 +273,6 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
<?= $this->renderSection('script'); ?>
|
||||
</body>
|
||||
|
||||
@ -12,7 +12,10 @@
|
||||
<?= $this->section('content') ?>
|
||||
|
||||
<div class="container-fluid px-5">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!-- Accordion Search Detail -->
|
||||
<div class="col col-12 mt-3">
|
||||
<div class="accordion" id="accordionPanelsStayOpenExample">
|
||||
<div class="accordion-item">
|
||||
@ -111,78 +114,125 @@
|
||||
data-column="8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Baris 4: Stat -->
|
||||
<div class="row ">
|
||||
<div class="col d-flex flex-wrap align-items-center">
|
||||
<label class="col-auto col-form-label-sm text-muted fw-semibold me-2">Stat
|
||||
:</label>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" name="excStat" value="1"
|
||||
id="pending" />
|
||||
<label class="form-check-label small" for="pending">Pending</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" name="excStat" value="2"
|
||||
id="partialCollected" />
|
||||
<label class="form-check-label small" for="partialCollected">Partial
|
||||
Collected</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" name="excStat" value="3"
|
||||
id="collected" />
|
||||
<label class="form-check-label small" for="collected">Collected</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" name="excStat" value="4"
|
||||
id="partialReceived" />
|
||||
<label class="form-check-label small" for="partialReceived">Partial
|
||||
Received</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" name="excStat" value="5"
|
||||
id="received" />
|
||||
<label class="form-check-label small" for="received">Received</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" name="excStat" value="6"
|
||||
id="incomplete" />
|
||||
<label class="form-check-label small" for="incomplete">Incomplete</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" name="excStat" value="7"
|
||||
id="pendingVerified" />
|
||||
<label class="form-check-label small" for="pendingVerified">Pending
|
||||
(Verified)</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" name="excStat" value="8"
|
||||
id="final" />
|
||||
<label class="form-check-label small" for="final">Final</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" name="excStat" value="9"
|
||||
id="finalVerified" />
|
||||
<label class="form-check-label small" for="finalVerified">Final
|
||||
(Verified)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Status Semua Counter -->
|
||||
<div class="row justify-content-evenly mt-4">
|
||||
<!-- Pending -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-warning">8</div>
|
||||
<div class="status-label text-warning">Pending</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Partial Collected -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-secondary">7</div>
|
||||
<div class="status-label text-secondary">Partial Collected</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collected -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-danger">79</div>
|
||||
<div class="status-label text-danger">Collected</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Partial Received -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-info">5</div>
|
||||
<div class="status-label text-info">Partial Received</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Received -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-primary">0</div>
|
||||
<div class="status-label text-primary">Received</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Incomplete -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-warning">0</div>
|
||||
<div class="status-label text-warning">Incomplete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Printed not Complete -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-muted">2</div>
|
||||
<div class="status-label text-muted">Printed Notcomplete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Complete -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-success">10</div>
|
||||
<div class="status-label text-success">Complete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1-validation -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-info">4</div>
|
||||
<div class="status-label text-info">1-validation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2-validation -->
|
||||
<div class="col-auto mb-2">
|
||||
<div class="card status-card text-center">
|
||||
<div class="card-body p-2">
|
||||
<div class="status-count text-success">3</div>
|
||||
<div class="status-label text-success">2-validation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col mt-3">
|
||||
<!-- Tabel Semua -->
|
||||
<div class="col">
|
||||
<div class="table-responsive">
|
||||
<table id="datatables" class="table table-striped table-bordered align-middle">
|
||||
<table id="datatables" class="table table-striped table-hover table-bordered align-middle">
|
||||
<thead class="table-primary">
|
||||
<tr>
|
||||
<th>S</th>
|
||||
<th>Order Datetime</th>
|
||||
<th style='width:7%;'>Order Datetime</th>
|
||||
<th>Patient Name</th>
|
||||
<th>No Lab</th>
|
||||
<th>No Register</th>
|
||||
@ -190,31 +240,115 @@
|
||||
<th>Doctor</th>
|
||||
<th style='width:10%;'>Tests</th>
|
||||
<th style='width:5%;'>Result To</th>
|
||||
<th style='width:5%;'></th>
|
||||
<th style='width:10%;'></th>
|
||||
<th style='width:8%;'>Validation</th>
|
||||
<th style='width:7%;'>Status</th>
|
||||
<th style='width:8%;'></th>
|
||||
<th style='width:6%;'></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2025-10-25 11:25</td>
|
||||
<td>TEGUH PUTRA SIE, MR</td>
|
||||
<td>5102723628</td>
|
||||
<td>01251002841</td>
|
||||
<td>PT. PRUDENTIAL LIFE ASSURANCE</td>
|
||||
<td>✶ HERNI SUPRAPTI, Dr</td>
|
||||
<td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">1</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">2025-10-25 11:25</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">TEGUH PUTRA SIE, MR</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">5102723628</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">01251002841</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">PT. PRUDENTIAL LIFE ASSURANCE</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">✶ HERNI SUPRAPTI, Dr</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">
|
||||
(DL), (DBIL), (IBIL), (SGOT), (SGPT), (ALP), (GGT), (ALB), (GLOBU),
|
||||
(CHOL), (TG), (HDL), (LDL), (GLUP), (HBA1C), (UL)
|
||||
</td>
|
||||
<td>C/W</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">C/W</td>
|
||||
<td>
|
||||
<a href="#" class="text-primary">result</a><br>
|
||||
<a href="#" class="text-danger">pdf</a>
|
||||
<h6>
|
||||
<span class="px-3 py-2 badge text-success border border-success bg-success-subtle">
|
||||
_
|
||||
</span>
|
||||
</h6>
|
||||
<a href="#" class="text-primary">Result</a><br>
|
||||
<a href="#" class="text-primary" disabled>Invalidation</a><br>
|
||||
</td>
|
||||
<td data-bs-toggle="modal" data-bs-target="#detailModal" class='pointercol bg-warning'>Pending</td>
|
||||
<td>
|
||||
<a href="#" class="text-primary">Preview</a>
|
||||
<hr>
|
||||
<a href="#" class="text-danger">Print</a> | <a href="#" class="text-danger">Eng</a>
|
||||
<hr>
|
||||
<a href="#" class="text-primary">Pdf</a>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" name="val"> val<br>
|
||||
<input type="checkbox" name="val"> Pending<br>
|
||||
<input type="checkbox" name="printed"> Printed<br>
|
||||
<input type="checkbox" name="hardcopy"> Hardcopy
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">1</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">2025-10-25 11:25</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">TEGUH PUTRA SIE, MR</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">5102723628</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">01251002841</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">PT. PRUDENTIAL LIFE ASSURANCE</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">✶ HERNI SUPRAPTI, Dr</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">
|
||||
(DL), (DBIL), (IBIL), (SGOT), (SGPT), (ALP), (GGT), (ALB), (GLOBU),
|
||||
(CHOL), (TG), (HDL), (LDL), (GLUP), (HBA1C), (UL)
|
||||
</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">C/W</td>
|
||||
<td>
|
||||
<h6>
|
||||
<span class="px-3 py-2 badge text-success border border-success bg-success-subtle">
|
||||
1
|
||||
</span>
|
||||
</h6>
|
||||
<a href="#" class="text-primary">Result</a><br>
|
||||
<a href="#" class="text-primary" disabled>Invalidation</a><br>
|
||||
</td>
|
||||
<td data-bs-toggle="modal" data-bs-target="#detailModal" class='pointercol bg-warning'>Pending</td>
|
||||
<td>
|
||||
<a href="#" class="text-primary">Preview</a>
|
||||
<hr>
|
||||
<a href="#" class="text-danger">Print</a> | <a href="#" class="text-danger">Eng</a>
|
||||
<hr>
|
||||
<a href="#" class="text-primary">Pdf</a>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" name="printed"> Printed<br>
|
||||
<input type="checkbox" name="hardcopy"> Hardcopy
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">1</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">2025-10-25 11:25</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">TEGUH PUTRA SIE, MR</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">5102723628</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">01251002841</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">PT. PRUDENTIAL LIFE ASSURANCE</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">✶ HERNI SUPRAPTI, Dr</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">
|
||||
(DL), (DBIL), (IBIL), (SGOT), (SGPT), (ALP), (GGT), (ALB), (GLOBU),
|
||||
(CHOL), (TG), (HDL), (LDL), (GLUP), (HBA1C), (UL)
|
||||
</td>
|
||||
<td class='pointercol' data-bs-toggle="modal" data-bs-target="#detailModal">C/W</td>
|
||||
<td>
|
||||
<h6>
|
||||
<span class="px-3 py-2 badge text-success border border-success bg-success-subtle">
|
||||
2
|
||||
</span>
|
||||
</h6>
|
||||
<a href="#" class="text-primary">Result</a><br>
|
||||
<a href="#" class="text-primary" disabled>Invalidation</a><br>
|
||||
</td>
|
||||
<td data-bs-toggle="modal" data-bs-target="#detailModal" class='pointercol bg-warning'>Pending</td>
|
||||
<td>
|
||||
<a href="#" class="text-primary">Preview</a>
|
||||
<hr>
|
||||
<a href="#" class="text-danger">Print</a> | <a href="#" class="text-danger">Eng</a>
|
||||
<hr>
|
||||
<a href="#" class="text-primary">Pdf</a>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" name="printed"> Printed<br>
|
||||
<input type="checkbox" name="hardcopy"> Hardcopy
|
||||
</td>
|
||||
</tr>
|
||||
@ -222,7 +356,92 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal Specimen Collection-->
|
||||
<div class="modal fade" id="detailModal" aria-hidden="true" aria-labelledby="detailModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fw-bold fs-4" id="detailModal">Specimen Collection <span
|
||||
class="text-success">#5111113439</span></h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="row mb-4">
|
||||
<!-- Kolom kiri -->
|
||||
<div class="col-md-6">
|
||||
<div class="info-pair d-flex">
|
||||
<div class="info-label w-50 fw-bold">Patient Name </div>
|
||||
<div class="info-value fw-semibold">: Zaka</div>
|
||||
</div>
|
||||
<div class="info-pair d-flex">
|
||||
<div class="info-label w-50 fw-bold">Age</div>
|
||||
<div class="info-value fw-semibold">: 23</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kolom kanan -->
|
||||
<div class="col-md-6">
|
||||
<div class="info-pair d-flex">
|
||||
<div class="info-label w-50 fw-bold">No Lab</div>
|
||||
<div class="info-value fw-semibold">: 5111113439</div>
|
||||
</div>
|
||||
<div class="info-pair d-flex">
|
||||
<div class="info-label w-50 fw-bold">Sex</div>
|
||||
<div class="info-value fw-semibold">: Female</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fs-4 mb-2"><i class="bi bi-flask-florence-fill"></i> Tube</h5>
|
||||
<!-- <hr> -->
|
||||
<table class="table fs-6 text-center">
|
||||
<thead>
|
||||
<tr class=''>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Sample Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" name="val"></td>
|
||||
<td>101 - EDTA</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" name="val"></td>
|
||||
<td>200 - Urine</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" name="val"></td>
|
||||
<td>900 - Other</td>
|
||||
</tr>
|
||||
<tr class='text-center'>
|
||||
<td colspan="2">
|
||||
<h6 class="p-0 m-0">
|
||||
<i class="bi bi-pencil-square" role="button" onclick=""></i>
|
||||
</h6>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?= $this->endSection() ?>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user