350 lines
15 KiB
PHP
350 lines
15 KiB
PHP
@extends('dashboard.base')
|
|
|
|
@section('title', 'Ranking Izin Karyawan')
|
|
|
|
@section('content')
|
|
<div class="content-wrapper">
|
|
<div class="row">
|
|
<div class="col-md-12 grid-margin">
|
|
<div class="row">
|
|
<div class="col-12 col-xl-8 mb-4 mb-xl-0">
|
|
<h3 class="font-weight-bold">Ranking Karyawan Berdasarkan Izin</h3>
|
|
<h6 class="font-weight-normal mb-0" id="monthYearDisplay">
|
|
Bulan: {{ $months[$currentMonth] }} {{ $currentYear }}
|
|
<span class="text"> | Urutan: {{ $sort == 'desc' ? 'Terbanyak' : 'Tersedikit' }}</span>
|
|
</h6>
|
|
</div>
|
|
<div class="col-12 col-xl-4 text-right">
|
|
<div class="dropdown d-inline mr-2">
|
|
<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="monthDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Pilih Bulan
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="monthDropdown">
|
|
@foreach($months as $key => $month)
|
|
<a class="dropdown-item month-select" href="#" data-month="{{ $key }}">{{ $month }}</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="dropdown d-inline">
|
|
<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="sortDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{ $sort == 'desc' ? 'Terbanyak Izin' : 'Tersedikit Izin' }}
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="sortDropdown">
|
|
<a class="dropdown-item sort-select" href="#" data-sort="desc">Terbanyak Izin</a>
|
|
<a class="dropdown-item sort-select" href="#" data-sort="asc">Tersedikit Izin</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ... (bagian tabel tetap sama) ... -->
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>Nama Karyawan</th>
|
|
<th>Jumlah Izin</th>
|
|
<th>Detail</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="rankingTableBody">
|
|
@forelse($ranking as $index => $user)
|
|
<tr>
|
|
<td>{{ $ranking->firstItem() + $index }}</td>
|
|
<td>{{ $user->name }}</td>
|
|
<td>{{ $user->permissions_count }}</td>
|
|
<td>
|
|
<a href="#" class="btn btn-sm btn-info view-detail"
|
|
data-user-id="{{ $user->id }}"
|
|
data-user-name="{{ $user->name }}">
|
|
<i class="ti-eye"></i> Lihat
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" class="text-center">Tidak ada data izin bulan ini</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-3">
|
|
{{ $ranking->appends([
|
|
'month' => $currentMonth,
|
|
'year' => $currentYear,
|
|
'sort' => $sort
|
|
])->links() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@endsection
|
|
|
|
<!-- Modal Detail Izin -->
|
|
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-info text-white">
|
|
<h5 class="modal-title" id="detailModalLabel">
|
|
Detail Izin: <span id="userName"></span>
|
|
</h5>
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<!-- Statistik Izin -->
|
|
<div class="row text-center mb-4">
|
|
<div class="col-md-4">
|
|
<div class="card bg-success text-white">
|
|
<div class="card-body">
|
|
<h4 id="acceptedCount">0</h4>
|
|
<p>Disetujui</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card bg-warning text-white">
|
|
<div class="card-body">
|
|
<h4 id="pendingCount">0</h4>
|
|
<p>Pending</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card bg-danger text-white">
|
|
<div class="card-body">
|
|
<h4 id="rejectedCount">0</h4>
|
|
<p>Ditolak</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Detail -->
|
|
<ul class="nav nav-tabs" id="permissionTabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="all-tab" data-toggle="tab" href="#allTab" role="tab">Semua</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="accepted-tab" data-toggle="tab" href="#acceptedTab" role="tab">Disetujui</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pending-tab" data-toggle="tab" href="#pendingTab" role="tab">Pending</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="rejected-tab" data-toggle="tab" href="#rejectedTab" role="tab">Ditolak</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content mt-3" id="permissionTabContent">
|
|
<div class="tab-pane fade show active" id="allTab" role="tabpanel">
|
|
<div id="allPermissions"></div>
|
|
</div>
|
|
<div class="tab-pane fade" id="acceptedTab" role="tabpanel">
|
|
<div id="acceptedPermissions"></div>
|
|
</div>
|
|
<div class="tab-pane fade" id="pendingTab" role="tabpanel">
|
|
<div id="pendingPermissions"></div>
|
|
</div>
|
|
<div class="tab-pane fade" id="rejectedTab" role="tabpanel">
|
|
<div id="rejectedPermissions"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@push('script')
|
|
<script>
|
|
$(document).ready(function() {
|
|
let currentMonth = {{ $currentMonth }};
|
|
let currentYear = {{ $currentYear }};
|
|
let currentSort = '{{ $sort }}';
|
|
|
|
// Fungsi untuk memuat data ranking
|
|
function loadRankingData() {
|
|
$.ajax({
|
|
url: '/toprank',
|
|
type: 'GET',
|
|
data: {
|
|
month: currentMonth,
|
|
year: currentYear,
|
|
sort: currentSort
|
|
},
|
|
success: function(response) {
|
|
$('#rankingTableBody').html($(response).find('#rankingTableBody').html());
|
|
$('.pagination').html($(response).find('.pagination').html());
|
|
$('#monthYearDisplay').text($(response).find('#monthYearDisplay').text());
|
|
},
|
|
error: function(xhr) {
|
|
console.error('Error loading ranking data:', xhr);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle pemilihan bulan
|
|
$(document).on('click', '.month-select', function(e) {
|
|
e.preventDefault();
|
|
currentMonth = $(this).data('month');
|
|
loadRankingData();
|
|
});
|
|
|
|
// Handle pemilihan sorting
|
|
$(document).on('click', '.sort-select', function(e) {
|
|
e.preventDefault();
|
|
currentSort = $(this).data('sort');
|
|
loadRankingData();
|
|
});
|
|
|
|
|
|
// Fungsi untuk render permissions
|
|
function renderPermissions(permissions, targetId) {
|
|
let html = '<div class="list-group">';
|
|
|
|
if (permissions && permissions.length > 0) {
|
|
permissions.forEach(function(permission) {
|
|
let statusBadge = '';
|
|
let statusClass = '';
|
|
|
|
if (permission.status === 'accepted') {
|
|
statusBadge = 'Disetujui';
|
|
statusClass = 'success';
|
|
} else if (permission.status === 'pending') {
|
|
statusBadge = 'Pending';
|
|
statusClass = 'warning';
|
|
} else {
|
|
statusBadge = 'Ditolak';
|
|
statusClass = 'danger';
|
|
}
|
|
|
|
let proofPhoto = permission.proof_photo ?
|
|
`<a href="/storage/permissions/${permission.proof_photo}" target="_blank" class="btn btn-sm btn-link mt-1">
|
|
<i class="ti-image"></i> Lihat Bukti
|
|
</a>` : '';
|
|
|
|
let approvedInfo = permission.approved_at ?
|
|
`<small class="text-muted d-block mt-1">
|
|
Disetujui pada: ${new Date(permission.approved_at).toLocaleDateString('id-ID')}
|
|
</small>` : '';
|
|
|
|
html += `
|
|
<div class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h6 class="mb-1 font-weight-bold">${permission.category}</h6>
|
|
<p class="mb-1">${permission.start_date} s/d ${permission.end_date}</p>
|
|
<p class="mb-1 small">Alasan: ${permission.reason}</p>
|
|
</div>
|
|
<span class="badge badge-${statusClass}">${statusBadge}</span>
|
|
</div>
|
|
${proofPhoto}
|
|
<small class="text-muted d-block mt-1">
|
|
Diajukan pada: ${new Date(permission.created_at).toLocaleDateString('id-ID')}
|
|
</small>
|
|
${approvedInfo}
|
|
</div>
|
|
`;
|
|
});
|
|
} else {
|
|
html += `
|
|
<div class="list-group-item text-center py-4">
|
|
<i class="ti-info-alt" style="font-size: 2rem;"></i>
|
|
<p class="mt-2 mb-0">Tidak ada data izin</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += '</div>';
|
|
$('#' + targetId).html(html);
|
|
}
|
|
|
|
// Handle modal detail
|
|
$(document).on('click', '.view-detail', function(e) {
|
|
e.preventDefault();
|
|
const userId = $(this).data('user-id');
|
|
const userName = $(this).data('user-name');
|
|
|
|
// Tampilkan modal
|
|
const modal = $('#detailModal');
|
|
modal.find('#userName').text(userName);
|
|
modal.modal('show');
|
|
|
|
// Reset konten modal
|
|
modal.find('#acceptedCount').text('0');
|
|
modal.find('#pendingCount').text('0');
|
|
modal.find('#rejectedCount').text('0');
|
|
modal.find('#allPermissions').html('<div class="text-center py-4"><div class="spinner-border" role="status"></div></div>');
|
|
modal.find('#acceptedPermissions').html('');
|
|
modal.find('#pendingPermissions').html('');
|
|
modal.find('#rejectedPermissions').html('');
|
|
|
|
// AJAX untuk mengambil detail izin
|
|
$.ajax({
|
|
url: '/toprank/user/' + userId + '/permissions',
|
|
type: 'GET',
|
|
data: {
|
|
month: currentMonth,
|
|
year: currentYear
|
|
},
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
// Update counter
|
|
modal.find('#acceptedCount').text(response.stats.accepted);
|
|
modal.find('#pendingCount').text(response.stats.pending);
|
|
modal.find('#rejectedCount').text(response.stats.rejected);
|
|
|
|
// Render permissions
|
|
renderPermissions(response.data.all, 'allPermissions');
|
|
renderPermissions(response.data.accepted, 'acceptedPermissions');
|
|
renderPermissions(response.data.pending, 'pendingPermissions');
|
|
renderPermissions(response.data.rejected, 'rejectedPermissions');
|
|
} else {
|
|
modal.find('#allPermissions').html(`
|
|
<div class="alert alert-danger">
|
|
${response.message || 'Gagal memuat data izin'}
|
|
</div>
|
|
`);
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
let errorMessage = 'Terjadi kesalahan saat memuat data';
|
|
if (xhr.responseJSON && xhr.responseJSON.message) {
|
|
errorMessage = xhr.responseJSON.message;
|
|
}
|
|
modal.find('#allPermissions').html(`
|
|
<div class="alert alert-danger">
|
|
${errorMessage}
|
|
</div>
|
|
`);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |