505 lines
15 KiB
PHP
505 lines
15 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Riwayat Aktivitas - Sistem TBC</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
background: #f5f6fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 250px;
|
|
height: 100vh;
|
|
background: #c40000;
|
|
position: fixed;
|
|
padding-top: 30px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.sidebar h2 {
|
|
color: white;
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.menu {
|
|
list-style: none;
|
|
}
|
|
|
|
.menu a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 15px 25px;
|
|
text-decoration: none;
|
|
color: white;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.menu li.active a,
|
|
.menu li:hover a {
|
|
background: white;
|
|
color: #c40000;
|
|
border-radius: 30px 0 0 30px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 250px;
|
|
width: calc(100% - 250px);
|
|
padding: 40px;
|
|
}
|
|
|
|
.header-wrapper {
|
|
border-bottom: 1px solid #e0e0e0;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 28px;
|
|
color: #c40000;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.search-box {
|
|
width: 320px;
|
|
position: relative;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
padding: 12px 15px;
|
|
border-radius: 14px;
|
|
border: 1px solid #ddd;
|
|
outline: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* FILTER ACCORDION MODERN */
|
|
.filter-accordion {
|
|
background: white;
|
|
border-radius: 15px;
|
|
margin-bottom: 25px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.filter-header {
|
|
padding: 15px 25px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.filter-header:hover {
|
|
background: #fefefe;
|
|
}
|
|
|
|
.filter-header h4 {
|
|
font-size: 15px;
|
|
color: #333;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.filter-content {
|
|
padding: 0 25px;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out, padding 0.3s ease;
|
|
}
|
|
|
|
.filter-content.active {
|
|
padding: 20px 25px;
|
|
max-height: 500px;
|
|
/* Cukup besar untuk form */
|
|
border-top: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.filter-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 15px;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
}
|
|
|
|
.form-group select,
|
|
.form-group input {
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid #ddd;
|
|
font-size: 13px;
|
|
outline: none;
|
|
}
|
|
|
|
.form-group select:focus,
|
|
.form-group input:focus {
|
|
border-color: #c40000;
|
|
}
|
|
|
|
.filter-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
padding-top: 15px;
|
|
border-top: 1px dashed #eee;
|
|
}
|
|
|
|
.btn-filter {
|
|
background: #c40000;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-export {
|
|
background: #16a34a;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-reset {
|
|
background: #f1f5f9;
|
|
color: #64748b;
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
|
|
/* TABLE */
|
|
.table-container {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
overflow-x: auto;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th {
|
|
background: #fafafa;
|
|
padding: 15px;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
color: #444;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
td {
|
|
padding: 15px;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid #f3f3f3;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 7px 14px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.badge-login {
|
|
background: #dcfce7;
|
|
color: #16a34a;
|
|
}
|
|
|
|
.badge-logout {
|
|
background: #fee2e2;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.badge-aktivitas {
|
|
background: #eff6ff;
|
|
color: #2563eb;
|
|
}
|
|
|
|
/* COPY CSS PAGINATION KELOLA ADMIN */
|
|
.pagination-wrapper {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 5px;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.pagination-links .pagination {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: 5px;
|
|
}
|
|
|
|
.pagination-links .page-item .page-link {
|
|
padding: 8px 16px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
color: #c40000;
|
|
background: white;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pagination-links .page-item.active .page-link {
|
|
background: #c40000;
|
|
color: white;
|
|
border-color: #c40000;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="sidebar">
|
|
<h2>Sistem TBC</h2>
|
|
<ul class="menu">
|
|
<li>
|
|
<a href="{{ url('/dashboard') }}">
|
|
<i data-lucide="layout-dashboard"></i>
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
<li>
|
|
@if(session('role') !== 'super_admin')<li><a href="{{ url('/data-pasien') }}"><i data-lucide="users"></i> Data Pasien</a></li>@endif
|
|
<li>
|
|
<a href="{{ url('/skrining') }}">
|
|
<i data-lucide="stethoscope"></i>
|
|
Skrining
|
|
</a>
|
|
</li>
|
|
@if(session('role') == 'super_admin')
|
|
<li>
|
|
<a href="{{ url('/kelola-admin') }}">
|
|
<i data-lucide="shield"></i> Kelola Admin
|
|
</a>
|
|
</li>
|
|
<li class="active">
|
|
<a href="{{ url('/riwayat-aktivitas') }}">
|
|
<i data-lucide="activity"></i> Riwayat Aktivitas
|
|
</a>
|
|
</li>
|
|
@endif
|
|
<li>
|
|
<a href="{{ url('/pengaturan-akun') }}">
|
|
<i data-lucide="user"></i>
|
|
Akun
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="header-wrapper">
|
|
<div class="header">
|
|
<h1>Riwayat Aktivitas</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODERN FILTER ACCORDION -->
|
|
<div class="filter-accordion">
|
|
<div class="filter-header" onclick="toggleFilter()">
|
|
<h4><i data-lucide="filter" size="18"></i> Pencarian Lanjutan & Export</h4>
|
|
<i data-lucide="chevron-down" id="filterIcon"></i>
|
|
</div>
|
|
|
|
<div class="filter-content {{ request('fasyankes') || request('tgl_mulai') ? 'active' : '' }}" id="filterContent">
|
|
<form method="GET" action="{{ url('/riwayat-aktivitas') }}" id="mainFilterForm">
|
|
<input type="hidden" name="search" value="{{ request('search') }}">
|
|
|
|
<div class="filter-grid">
|
|
<div class="form-group">
|
|
<label>Pilih Fasyankes</label>
|
|
<select name="fasyankes" id="fasyankes_select">
|
|
<option value="">Semua Fasyankes</option>
|
|
@foreach($fasyankes_list as $f)
|
|
<option value="{{ $f->id_fasyankes }}" {{ request('fasyankes') == $f->id_fasyankes ? 'selected' : '' }}>
|
|
{{ $f->nama_fasyankes }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Dari Tanggal</label>
|
|
<input type="date" name="tgl_mulai" id="tgl_mulai" value="{{ request('tgl_mulai') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Sampai Tanggal</label>
|
|
<input type="date" name="tgl_selesai" id="tgl_selesai" value="{{ request('tgl_selesai') }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-actions">
|
|
<a href="{{ url('/riwayat-aktivitas') }}" class="btn-reset">Reset</a>
|
|
|
|
<!-- Tombol Export Berdasarkan Filter -->
|
|
<button type="button" onclick="exportExcel()" class="btn-export">
|
|
<i data-lucide="file-spreadsheet" size="16"></i> Export Excel
|
|
</button>
|
|
|
|
<button type="submit" class="btn-filter">
|
|
<i data-lucide="search" size="16"></i> Cari Data
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>ID Petugas</th>
|
|
<th>Nama Petugas</th>
|
|
<th>Email</th>
|
|
<th>Fasyankes</th>
|
|
<th>Aktivitas</th>
|
|
<th>Waktu</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($riwayat as $r)
|
|
<tr>
|
|
<td>{{ ($riwayat->currentPage() - 1) * $riwayat->perPage() + $loop->iteration }}</td>
|
|
<td>{{ $r->id_petugas ?? '-' }}</td>
|
|
<td>{{ $r->nama_petugas ?? '-' }}</td>
|
|
<td>{{ $r->email ?? '-' }}</td>
|
|
<td>{{ $r->nama_fasyankes ?? '-' }}</td>
|
|
<td>
|
|
@if(str_contains(strtolower($r->aktivitas), 'login'))
|
|
<span class="badge badge-login">{{ $r->aktivitas }}</span>
|
|
@elseif(str_contains(strtolower($r->aktivitas), 'logout'))
|
|
<span class="badge badge-logout">{{ $r->aktivitas }}</span>
|
|
@elseif(str_contains(strtolower($r->aktivitas), 'password'))
|
|
<span class="badge badge-aktivitas" style="background:#fff7ed; color:#c2410c; border:1px solid #ffedd5;"> {{ $r->aktivitas }}
|
|
</span>
|
|
@else
|
|
<span class="badge badge-aktivitas">{{ $r->aktivitas }}</span>
|
|
@endif
|
|
</td>
|
|
<td>{{ date('d M Y H:i', strtotime($r->created_at)) }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="7" style="text-align:center; padding: 40px;">Tidak ada data aktivitas</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- COPY STRUCTURE HTML PAGINATION KELOLA ADMIN -->
|
|
<div class="pagination-wrapper">
|
|
<div class="pagination-info">
|
|
<span class="text-muted">
|
|
Menampilkan <b>{{ $riwayat->firstItem() ?? 0 }}</b> sampai <b>{{ $riwayat->lastItem() ?? 0 }}</b> dari <b>{{ $riwayat->total() }}</b> aktivitas
|
|
</span>
|
|
</div>
|
|
<div class="pagination-links">
|
|
{{ $riwayat->appends(request()->query())->links('pagination::bootstrap-4') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none;">@csrf</form>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
function toggleFilter() {
|
|
const content = document.getElementById('filterContent');
|
|
const icon = document.getElementById('filterIcon');
|
|
content.classList.toggle('active');
|
|
icon.style.transform = content.classList.contains('active') ? 'rotate(180deg)' : 'rotate(0deg)';
|
|
}
|
|
|
|
function exportExcel() {
|
|
const fasyankes = document.getElementById('fasyankes_select').value;
|
|
const tgl_mulai = document.getElementById('tgl_mulai').value;
|
|
const tgl_selesai = document.getElementById('tgl_selesai').value;
|
|
const search = document.querySelector('input[name="search"]') ? document.querySelector('input[name="search"]').value : '';
|
|
|
|
let url = "{{ route('riwayat.export') }}?";
|
|
url += `fasyankes=${fasyankes}&tgl_mulai=${tgl_mulai}&tgl_selesai=${tgl_selesai}&search=${search}`;
|
|
|
|
window.location.href = url;
|
|
}
|
|
|
|
function logout() {
|
|
document.getElementById('logout-form').submit();
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |