mikael-zakaria 77f15bfc94 first commit
2025-11-11 09:14:25 +07:00

216 lines
6.0 KiB
PHP

<?php
// 1_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak
$uri = service('uri');
$path = $uri->getPath();
$activeUrls = ['/admin', '/cs', '/analyst', '/doctor'];
// dd(session()->get('userid'));
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<?= $this->renderSection('title'); ?>
<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">
<style>
table {
font-size: 0.7rem;
}
.sidebar {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100vh;
background-color: #0d6dfda6;
color: white;
padding-top: 1rem;
transition: left 0.3s ease;
z-index: 1040;
}
.sidebar.show {
left: 0;
}
.sidebar .nav-link {
color: #ffffff;
border-radius: 6px;
margin-bottom: 4px;
transition: all 0.2s ease;
}
/* Hover - biru lembut transparan */
.sidebar .nav-link:hover {
background-color: #0d6efd20; /* biru muda transparan */
color: #fff;
}
/* Active - biru solid */
.sidebar .nav-link.active {
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 */
}
.main {
transition: margin-left 0.3s ease;
}
.main.shifted {
margin-left: 250px;
}
@media (max-width: 768px) {
.sidebar {
width: 200px;
}
.main.shifted {
margin-left: 200px;
}
}
.dot {
height: 7px;
width: 7px;
border-radius: 50%;
display: inline-block;
margin: 0;
}
.Pend {
background-color: white;
}
.PartColl {
background-color: #ff99aa;
}
.Coll {
background-color: #d63031;
}
.PartRecv {
background-color: #a0c0d9;
}
.Recv {
background-color: #0984e3;
}
.Inc {
background-color: yellow;
}
.Fin {
background-color: lightgreen;
}
.FinV {
background-color: green;
}
.PenV {
background-color: #EE5A24;
}
.Suspend {
background-color: purple;
}
</style>
<?= $this->renderSection('css'); ?>
</head>
<body>
<div id="main" class="main p-3">
<button id="menuBtn" class="btn btn-primary btn-sm mb-1 p-2">☰ MENU</button>
<?= $this->renderSection('content'); ?>
</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>&nbsp; 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>&nbsp; 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>&nbsp; Logout
</a>
</li>
</ul>
<hr>
</div>
<script>
console.log("Jangan Nakal Yaa😏😏😏");
</script>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery (Wajib untuk DataTables) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.min.js"></script>
<script>
const sidebar = document.getElementById('sidebar');
const main = document.getElementById('main');
const menuBtn = document.getElementById('menuBtn');
// Digunakan Button Menu
menuBtn.addEventListener('click', () => {
const isOpen = sidebar.classList.toggle('show');
main.classList.toggle('shifted', isOpen);
});
// Datatable
$(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] }
],
language: {
// search: "Cari:",
// lengthMenu: "Tampilkan _MENU_ data",
// info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
// paginate: {
// previous: "Sebelumnya",
// next: "Berikutnya"
// }
}
});
});
</script>
<?= $this->renderSection('script'); ?>
</body>
</html>