235 lines
7.1 KiB
PHP
235 lines
7.1 KiB
PHP
@extends('partials.main')
|
|
|
|
@section('content')
|
|
<div class="card card-flush mb-7">
|
|
<div class="card-header pt-7">
|
|
<div class="card-title">
|
|
<h2 class="mb-0 fw-bold">Dashboard Progress</h2>
|
|
</div>
|
|
<div class="card-toolbar">
|
|
<span class="text-muted">Progress per karyawan berdasarkan master pitstop aktif</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body pt-0">
|
|
<div class="row g-6">
|
|
<div class="col-md-4">
|
|
<div class="card bg-light-primary border-0 h-100">
|
|
<div class="card-body">
|
|
<div class="fw-semibold text-muted">Total Step Aktif</div>
|
|
<div class="fs-2hx fw-bold mt-2">{{ $totalSteps }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card bg-light-info border-0 h-100">
|
|
<div class="card-body">
|
|
<div class="fw-semibold text-muted">Total Karyawan</div>
|
|
<div class="fs-2hx fw-bold mt-2" id="totalUsersVal">{{ $totalUsers }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card bg-light-success border-0 h-100">
|
|
<div class="card-body">
|
|
<div class="fw-semibold text-muted">Total Step Lulus</div>
|
|
<div class="fs-2hx fw-bold mt-2 text-success">
|
|
{{ $totalSelesai }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-flush">
|
|
<div class="card-header pt-7">
|
|
<div class="card-title">
|
|
<h3 class="mb-0 fw-bold">Progress per Karyawan</h3>
|
|
</div>
|
|
<div class="card-toolbar">
|
|
<form method="get" class="d-flex align-items-center gap-2" id="filterForm">
|
|
<div class="d-flex align-items-center position-relative my-1">
|
|
<span class="svg-icon svg-icon-1 position-absolute ms-4">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
</span>
|
|
<input type="text" name="q" value="{{ $q ?? '' }}" class="form-control form-control-solid w-250px ps-12" placeholder="Cari nama..." />
|
|
</div>
|
|
<select name="per_page" class="form-select form-select-solid w-125px">
|
|
@foreach ([10, 20, 50, 100] as $n)
|
|
<option value="{{ $n }}" @selected(((int) ($perPage ?? 20)) === $n)>{{ $n }}/page</option>
|
|
@endforeach
|
|
</select>
|
|
<button type="submit" class="btn btn-sm btn-primary">Cari</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-3">
|
|
<div class="table-responsive">
|
|
<table class="table align-middle table-row-dashed fs-6 gy-3">
|
|
<thead>
|
|
<tr class="text-muted fw-semibold fs-7 text-uppercase gs-0">
|
|
<th>Nama</th>
|
|
<th style="width: 320px">Progress</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="fw-semibold text-gray-800" id="tableUsers">
|
|
@include('pitstop.partials.progress_rows', ['users' => $users, 'totalSteps' => $totalSteps])
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="pagerWrap">
|
|
@include('pitstop.partials.progress_pager', ['users' => $users])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
<div class="modal fade" id="modalDetail" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Detail Progress</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="text-muted mb-4" id="detailNama"></div>
|
|
<div class="table-responsive">
|
|
<table class="table align-middle table-row-dashed fs-6 gy-3">
|
|
<thead>
|
|
<tr class="text-muted fw-semibold fs-7 text-uppercase gs-0">
|
|
<th>Step (ID)</th>
|
|
<th>Nama Step</th>
|
|
<th>Status</th>
|
|
<th class="text-end">Waktu</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="fw-semibold text-gray-800" id="detailTable">
|
|
<tr>
|
|
<td colspan="4" class="text-center text-muted py-6">Memuat data...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section('custom_js')
|
|
<script>
|
|
$(document).ready(function () {
|
|
const $filterForm = $('#filterForm');
|
|
const $pagerWrap = $('#pagerWrap');
|
|
const $tableUsers = $('#tableUsers');
|
|
const $totalUsersVal = $('#totalUsersVal');
|
|
|
|
const escapeHtml = (str) => String(str ?? '').replace(/[&<>"']/g, (m) => ({
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
'"': '"',
|
|
"'": ''',
|
|
}[m]));
|
|
|
|
const withAjaxParam = (href) => {
|
|
const url = new URL(href, window.location.origin);
|
|
url.searchParams.set('ajax', '1');
|
|
return url.toString();
|
|
};
|
|
|
|
const setLoading = () => {
|
|
$tableUsers.html('<tr><td colspan="2" class="text-center text-muted py-6">Memuat data...</td></tr>');
|
|
};
|
|
|
|
const loadPage = (href, push = true) => {
|
|
setLoading();
|
|
|
|
$.get(withAjaxParam(href))
|
|
.done(function (res) {
|
|
const data = res?.data ?? {};
|
|
$totalUsersVal.text(data.totalUsers ?? 0);
|
|
$tableUsers.html(data.table_html ?? '');
|
|
$pagerWrap.html(data.pager_html ?? '');
|
|
|
|
if (push) {
|
|
const urlNoAjax = new URL(href, window.location.origin);
|
|
urlNoAjax.searchParams.delete('ajax');
|
|
window.history.pushState({}, '', urlNoAjax.toString());
|
|
}
|
|
})
|
|
.fail(function () {
|
|
$tableUsers.html('<tr><td colspan="2" class="text-center text-muted py-6">Gagal memuat data</td></tr>');
|
|
});
|
|
};
|
|
|
|
$filterForm.on('submit', function (e) {
|
|
e.preventDefault();
|
|
const href = `${window.location.pathname}?${$filterForm.serialize()}`;
|
|
loadPage(href, true);
|
|
});
|
|
|
|
$(document).on('click', '#progressPager a', function (e) {
|
|
e.preventDefault();
|
|
loadPage($(this).attr('href'), true);
|
|
});
|
|
|
|
window.addEventListener('popstate', function () {
|
|
loadPage(window.location.href, false);
|
|
});
|
|
|
|
const renderDetail = (rows) => {
|
|
if (!rows.length) {
|
|
$('#detailTable').html('<tr><td colspan="4" class="text-center text-muted py-6">Belum ada data</td></tr>');
|
|
return;
|
|
}
|
|
|
|
const html = rows
|
|
.map((r) => {
|
|
const status = String(r.status ?? '-');
|
|
const badge =
|
|
status === 'lulus'
|
|
? '<span class="badge badge-light-success">Lulus</span>'
|
|
: status === 'tidak_lulus'
|
|
? '<span class="badge badge-light-danger">Tidak Lulus</span>'
|
|
: `<span class="badge badge-light">${status}</span>`;
|
|
|
|
const waktu = r.created_at ? String(r.created_at) : '-';
|
|
|
|
return `
|
|
<tr>
|
|
<td>${escapeHtml(r.masterpitstop_id ?? '-')}</td>
|
|
<td>${escapeHtml(r.step_nama ?? '-')}</td>
|
|
<td>${badge}</td>
|
|
<td class="text-end">${escapeHtml(waktu)}</td>
|
|
</tr>`;
|
|
})
|
|
.join('');
|
|
|
|
$('#detailTable').html(html);
|
|
};
|
|
|
|
$(document).on('click', '.viewDetail', function (e) {
|
|
e.preventDefault();
|
|
const id = $(this).data('id');
|
|
const nama = $(this).data('nama');
|
|
|
|
$('#detailNama').text(nama);
|
|
$('#detailTable').html('<tr><td colspan="4" class="text-center text-muted py-6">Memuat data...</td></tr>');
|
|
|
|
$.get('/pitstop/progress-detail', { pegawai_id: id })
|
|
.done(function (res) {
|
|
renderDetail(res?.data ?? []);
|
|
})
|
|
.fail(function () {
|
|
$('#detailTable').html('<tr><td colspan="4" class="text-center text-muted py-6">Gagal memuat data</td></tr>');
|
|
});
|
|
|
|
new bootstrap.Modal(document.getElementById('modalDetail')).show();
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|