This commit is contained in:
mahdahar 2025-11-13 16:42:43 +07:00
parent 2103ef609f
commit 5c81a67f18
4 changed files with 899 additions and 737 deletions

View File

@ -1,289 +1,281 @@
<?php <?php
// 1_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak // 1_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak
$uri = service('uri'); $uri = service('uri');
$path = $uri->getPath(); $path = $uri->getPath();
$activeUrls = ['/admin', '/cs', '/analyst', '/doctor']; $activeUrls = ['/admin', '/cs', '/analyst', '/doctor'];
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="id"> <html lang="id">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<?= $this->renderSection('title'); ?> <?= $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">
<link href="https://cdn.datatables.net/v/bs5/dt-2.3.4/r-3.0.7/datatables.min.css" rel="stylesheet" integrity="sha384-RaJlMsTv+nhuWA/3SQzc3dPVUOKfEb08YW4YZsaNK3UNFUhjvLkn/SwJEfKSavGD" crossorigin="anonymous">
<style>
table {
font-size: 0.7rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> body {
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"> overflow-x: hidden;
}
<!-- DataTables CSS --> #sidebar {
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.min.css" rel="stylesheet"> width: 200px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
background: #343a40;
color: #fff;
transition: all 0.3s;
overflow: hidden;
}
#sidebar.collapsed {
width: 70px;
}
#sidebar .nav-link {
color: #adb5bd;
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
overflow: hidden;
transition: all 0.3s;
}
#sidebar.collapsed .nav-link span {
opacity: 0;
visibility: hidden;
width: 0;
}
#sidebar .nav-link.active {
background: #495057;
color: #fff;
}
#content {
margin-left: 200px;
transition: all 0.3s;
padding: 20px;
}
#content.fullwidth {
margin-left: 70px;
}
.toggle-btn {
position: fixed;
top: 15px;
left: 15px;
z-index: 999;
}
.main {
transition: margin-left 0.3s ease;
}
<style> .main.shifted {
table { margin-left: 200px;
font-size: 0.7rem; }
}
.sidebar { @media (max-width: 768px) {
position: fixed; .sidebar {
top: 0; width: 150px;
left: -250px; }
width: 250px;
height: 100vh;
background-color: #0d6dfda6;
color: white;
padding-top: 1rem;
transition: left 0.3s ease;
z-index: 1040;
}
.sidebar.show { .main.shifted {
left: 0; margin-left: 150px;
} }
}
.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;
}
}
/* Untuk Card Status Counter */ /* Untuk Card Status Counter */
.status-card { .status-card {
width: 123px; width: 123px;
/* lebar tetap */ /* lebar tetap */
height: 60px; height: 60px;
/* tinggi seragam */ /* tinggi seragam */
border-radius: 8px; border-radius: 8px;
background-color: #fff; background-color: #fff;
border : solid 1px #ddd ; border : solid 1px #ddd ;
/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08); */ /* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08); */
transition: transform 0.15s ease, box-shadow 0.15s ease; transition: transform 0.15s ease, box-shadow 0.15s ease;
display: flex; display: flex;
/* flex untuk isi card */ /* flex untuk isi card */
align-items: center; align-items: center;
/* tengah vertikal */ /* tengah vertikal */
justify-content: center; justify-content: center;
/* tengah horizontal */ /* tengah horizontal */
flex-direction: column; flex-direction: column;
/* urut atas ke bawah */ /* urut atas ke bawah */
} }
.status-card:hover { .status-card:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
} }
.status-icon { .status-icon {
font-size: 1.1rem; font-size: 1.1rem;
} }
.status-count { .status-count {
font-weight: 700; font-weight: 700;
font-size: 1.1rem; font-size: 1.1rem;
} }
.status-label { .status-label {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
/* biar teks tidak turun ke bawah */ /* biar teks tidak turun ke bawah */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* kalau terlalu panjang, potong dengan "..." */ /* kalau terlalu panjang, potong dengan "..." */
max-width: 100%; max-width: 100%;
/* biar rapih dalam box */ /* biar rapih dalam box */
} }
.dot { .dot {
height: 7px; height: 7px;
width: 7px; width: 7px;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
} }
/* Untuk Cursor di Tabel */ /* Untuk Cursor di Tabel */
.pointercol { .pointercol {
cursor: pointer; cursor: pointer;
} }
/* 1 */ /* 1 */
.Pend { .Pend {
background-color: white; background-color: white;
} }
/* 2 */ /* 2 */
.PartColl { .PartColl {
background-color: #ff99aaaf !important; background-color: #ff99aaaf !important;
} }
/* 3 */ /* 3 */
.Collected { .Collected {
background-color: #d6303086 !important; background-color: #d6303086 !important;
} }
/* 4 */ /* 4 */
.PartRecv { .PartRecv {
background-color: #a0c0d9af !important; background-color: #a0c0d9af !important;
} }
/* 5 */ /* 5 */
.Received { .Received {
background-color: #0985e39d !important; background-color: #0985e39d !important;
} }
/* 6 */ /* 6 */
.Incomplete { .Incomplete {
background-color: #fbff009a !important; background-color: #fbff009a !important;
} }
/* 7 */ /* 7 */
.Final { .Final {
background-color: #90EE90 !important; background-color: #90EE90 !important;
} }
/* 8 */ /* 8 */
.FinVerification { .FinVerification {
background-color: #09ff00ab !important; background-color: #09ff00ab !important;
} }
/* 9 */ /* 9 */
.PenVerification { .PenVerification {
background-color: #ee5a24c7 !important; background-color: #ee5a24c7 !important;
} }
/* 10 */ /* 10 */
.Suspend { .Suspend {
background-color: purple; background-color: purple;
} }
</style> </style>
<?= $this->renderSection('css'); ?> <?= $this->renderSection('css'); ?>
</head> </head>
<body> <body>
<button class="btn btn-sm btn-secondary toggle-btn" id="toggleSidebar"> <i class="bi bi-list"></i> </button>
<div id="main" class="main p-3"> <div id="sidebar" class="collapsed">
<button id="menuBtn" class="btn btn-primary btn-sm mb-1 p-2"> MENU</button> <h5 class="p-3 text-center text-truncate"> <span class="sidebar-title">5Panda</span> </h5>
<?= $this->renderSection('content'); ?> <nav class="nav flex-column px-2">
</div> <a class="nav-link" href="<?=base_url('admin');?>"><i class="bi bi-house-door"></i> <span>Dashboard</span></a>
<a class="nav-link" href="<?=base_url('admin/user');?>"><i class="bi bi-people"></i> <span>Users</span></a>
<a class="nav-link" href="#"><i class="bi bi-graph-up"></i> <span>Reports</span></a>
<a class="nav-link" href="<?=base_url('logout');?>"><i class="bi bi-box-arrow-in-left"></i> <span>Log out</span></a>
</nav>
</div>
<div id="sidebar" class="sidebar"> <div id="content" class="main p-1 fullwidth"> <?= $this->renderSection('content'); ?> </div>
<ul class="nav flex-column"> <script>
<li class="nav-item"> console.log("Jangan Nakal Yaa😏😏😏");
<!-- 2_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak --> </script>
<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> <!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script> <!-- jQuery (Wajib untuk DataTables) -->
console.log("Jangan Nakal Yaa😏😏😏"); <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</script>
<!-- Bootstrap 5 JS Bundle --> <!-- DataTables JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.datatables.net/v/bs5/dt-2.3.4/r-3.0.7/datatables.min.js" integrity="sha384-O4V7rOTTcSRflQBTMk8URAYWhGGEMgmmLFrqu3e83FQtze3vmndvrH3GcRdrfXRu" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.min.js"></script>
<!-- jQuery (Wajib untuk DataTables) --> <script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> const sidebar = document.getElementById('sidebar');
const main = document.getElementById('main');
<!-- DataTables JS --> // Datatable
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script> $(document).ready(function () {
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.min.js"></script> $('#datatables').DataTable({
order: [[0, 'asc'], [3, 'asc']],
paging: false,
scrollCollapse: true,
scrollY: '650px',
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:",
// lengthMenu: "Tampilkan _MENU_ data",
// info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
// paginate: {
// previous: "Sebelumnya",
// next: "Berikutnya"
// }
},
responsive: true,
});
<script> $('#toggleSidebar').on('click', function () {
const sidebar = document.getElementById('sidebar'); $('#sidebar').toggleClass('collapsed');
const main = document.getElementById('main'); $('#content').toggleClass('fullwidth');
const menuBtn = document.getElementById('menuBtn'); });
// Digunakan Button Menu $('#sidebar .nav-link').on('click', function () {
menuBtn.addEventListener('click', () => { $('#sidebar .nav-link').removeClass('active');
const isOpen = sidebar.classList.toggle('show'); $(this).addClass('active');
main.classList.toggle('shifted', isOpen); });
});
// Datatable });
$(document).ready(function () { </script>
$('#datatables').DataTable({ <?= $this->renderSection('script'); ?>
pageLength: 100, // jumlah baris per halaman
lengthMenu: [10, 25, 50, 75, 100],
order: [[0, 'asc'], [1, 'asc']],
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:",
// lengthMenu: "Tampilkan _MENU_ data",
// info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
// paginate: {
// previous: "Sebelumnya",
// next: "Berikutnya"
// }
}
});
});
</script>
<?= $this->renderSection('script'); ?>
</body> </body>
</html> </html>

File diff suppressed because it is too large Load Diff

48
public/htaccess Normal file
View File

@ -0,0 +1,48 @@
# Disable directory browsing
Options -Indexes
# ----------------------------------------------------------------------
# Rewrite engine
# ----------------------------------------------------------------------
# Turning on the rewrite engine is necessary for the following rules and features.
# FollowSymLinks must be enabled for this to work.
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# If you installed CodeIgniter in a subfolder, you will need to
# change the following line to match the subfolder you need.
# http://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase
# Redirect Trailing Slashes...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Rewrite "www.example.com -> example.com"
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
# Checks to see if the user is attempting to access a valid file,
# such as an image or css document, if this isn't true it sends the
# request to the front controller, index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([\s\S]*)$ index.php/$1 [L,NC,QSA]
# Ensure Authorization header is passed along
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>
<IfModule !mod_rewrite.c>
# If we don't have mod_rewrite installed, all 404's
# can be sent to index.php, and everything works as normal.
ErrorDocument 404 index.php
</IfModule>
# Disable server signature start
ServerSignature Off
# Disable server signature end

View File

@ -1,14 +1,103 @@
<pre> <!DOCTYPE html>
_______ __ <html lang="en">
/ | / | <head>
$$$$$$$/ ______ ______ _______ ____$$ | ______ <meta charset="UTF-8">
$$ |____ / \ / \ / \ / $$ | / \ <meta name="viewport" content="width=device-width, initial-scale=1">
$$ \ /$$$$$$ | $$$$$$ |$$$$$$$ |/$$$$$$$ | $$$$$$ | <title>Collapsible Sidebar (Icons Visible)</title>
$$$$$$$ |$$ | $$ | / $$ |$$ | $$ |$$ | $$ | / $$ | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
/ \__$$ |$$ |__$$ |/$$$$$$$ |$$ | $$ |$$ \__$$ |/$$$$$$$ | <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
$$ $$/ $$ $$/ $$ $$ |$$ | $$ |$$ $$ |$$ $$ | <style>
$$$$$$/ $$$$$$$/ $$$$$$$/ $$/ $$/ $$$$$$$/ $$$$$$$/ body {
$$ | overflow-x: hidden;
$$ | }
$$/ #sidebar {
</pre> width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
background: #343a40;
color: #fff;
transition: all 0.3s;
overflow: hidden;
}
#sidebar.collapsed {
width: 70px;
}
#sidebar .nav-link {
color: #adb5bd;
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
overflow: hidden;
transition: all 0.3s;
}
#sidebar.collapsed .nav-link span {
opacity: 0;
visibility: hidden;
width: 0;
}
#sidebar .nav-link.active {
background: #495057;
color: #fff;
}
#content {
margin-left: 250px;
transition: all 0.3s;
padding: 20px;
}
#content.fullwidth {
margin-left: 70px;
}
.toggle-btn {
position: fixed;
top: 15px;
left: 15px;
z-index: 999;
}
</style>
</head>
<body>
<!-- Toggle Button -->
<button class="btn btn-secondary toggle-btn" id="toggleSidebar">
<i class="bi bi-list"></i>
</button>
<!-- Sidebar -->
<div id="sidebar">
<h5 class="p-3 border-bottom text-center text-truncate">
<span class="sidebar-title">My App</span>
</h5>
<nav class="nav flex-column px-2">
<a class="nav-link active" href="#"><i class="bi bi-house-door"></i> <span>Dashboard</span></a>
<a class="nav-link" href="#"><i class="bi bi-people"></i> <span>Users</span></a>
<a class="nav-link" href="#"><i class="bi bi-graph-up"></i> <span>Reports</span></a>
<a class="nav-link" href="#"><i class="bi bi-gear"></i> <span>Settings</span></a>
</nav>
</div>
<!-- Main Content -->
<div id="content">
<h2>Dashboard</h2>
<p>This is your main content area. Click the button to collapse or expand the sidebar. Icons stay visible when collapsed.</p>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
$('#toggleSidebar').on('click', function () {
$('#sidebar').toggleClass('collapsed');
$('#content').toggleClass('fullwidth');
});
$('#sidebar .nav-link').on('click', function () {
$('#sidebar .nav-link').removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>