admin/manjapro_v6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add remaining project files (exclude ignored folders)

Browse Source
This commit is contained in:
WD - Dev
2025-07-05 15:11:40 +07:00
parent a96eb2b958
commit b440b80882
4697 changed files with 1365702 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/user_akses_kpi.php
+294
View File
@@ -0,0 +1,294 @@
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-sm-6">
<h3 class="card-title">Akumulasi Kinerja Karyawan</h3>
</div>
<div class="col-sm-6">
<ol class="float-sm-right mb-0">
</ol>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="col-md-6">
<table id="example2" class="table table-bordered table-striped">
<thead>
<tr>
<th>Bulan</th>
<th>Nama</th>
<th>Jumlah Tiket</th>
<th>Tiket Jalur</th>
<th>Tiket Lain</th>
<th>Bobot Pekerjaan</th>
<th>Create to Proses</th>
<th>Proses to Close</th>
<!--<th>Action</th>-->
</tr>
</thead>
<tbody>
<?php
$aserver = mysqli_query($con,"SELECT * FROM v_akumulasi_kinerja_by_tiket $SqlDataWHId ORDER BY waktu DESC");
while ($server = mysqli_fetch_assoc($aserver))
{
?>
<tr>
<td><?php echo substr(formatIndo($server['waktu']),3); ?></td>
<td><?php echo $server['nama_teknisi']; ?></td>
<td><?php echo $server['jumlah_tiket']; ?></td>
<td><?php echo $server['tiket_jalur']; ?></td>
<td><?php echo $server['tiket_lain']; ?></td>
<td><?php echo $server['bobot']; ?></td>
<td><?php echo $server['rata_rata_sebelum']; ?> Menit</td>
<td><?php echo $server['rata_rata_sesudah']; ?> Menit</td>
<!--<td>-->
<!-- <a type="button" class="btn btn-secondary btn-sm ml-1">Detail</a>-->
<!--</td>-->
</tr>
<?php } ?>
</tbody>
</table>
</div>
<div class="col-md-6">
<div class="card" id="reportChartid">
<div class="card-body">
<center>
<h5>Grafik Kinerja Berdasarkan Tiket</h5>
</center>
<label><small>Tahun :</small></label>
<select id="yearSelect">
<option value="2024">2024</option>
<option value="2025" selected>2025</option>
<option value="2026">2026</option>
</select>
<label><small>Karyawan :</small></label>
<select id="userSelect">
<option value="all">All</option>
<?php
$userOp = mysqli_query($con,"SELECT id_penyelesai_tiket,nama_teknisi FROM v_akumulasi_kinerja_by_tiket $SqlDataWHId GROUP BY id_penyelesai_tiket ORDER BY nama_teknisi");
while ($userOption = mysqli_fetch_assoc($userOp))
{ ?>
<option value="<?php echo $userOption['id_penyelesai_tiket'] ?>"><?php echo $userOption['nama_teknisi'] ?></option>
<?php } ?>
</select>
<button id="fullscreenBtn" style="float: right;" class="btn btn-sm btn-secondary">Fullscreen</button>
<canvas id="reportChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('reportChart'); // Mendapatkan elemen canvas
const rcrt = canvas.getContext('2d'); // Mendapatkan konteks dari canvas
const yearSelect = document.getElementById('yearSelect');
const userSelect = document.getElementById('userSelect');
const fullscreenBtn = document.getElementById('fullscreenBtn');
// Mengatur ukuran awal canvas
canvas.style.maxHeight = '350px'; // Kembali ke ukuran asli
canvas.style.width = '100%'; // Kembali ke ukuran asli
let reportChart; // Simpan referensi chart di sini
// Fungsi untuk mengambil data dari file PHP berdasarkan tahun
async function fetchData(year,kar) {
try {
const response = await fetch(`load/data_kpi_teknisi.php?year=${year}&d=${kar}&i=<?php echo $SqlDataId; ?>`);
const data = await response.json();
// console.log(data); // Log data yang diterima
const bulanSingkatan = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
const bulanArray = bulanSingkatan.map((singkatan, index) => `${year}-${String(index + 1).padStart(2, '0')}`);
const jumlah = new Array(12).fill(0);
const createToProses = new Array(12).fill(0);
const prosesToClose = new Array(12).fill(0);
const tiketJalur = new Array(12).fill(0);
const tiketLain = new Array(12).fill(0);
const bobot = new Array(12).fill(0);
data.bulan.forEach((bulan, index) => {
const monthIndex = bulanArray.indexOf(bulan);
if (monthIndex !== -1) {
jumlah[monthIndex] = data.jumlah[index];
createToProses[monthIndex] = data.createToProses[index];
prosesToClose[monthIndex] = data.prosesToClose[index];
tiketJalur[monthIndex] = data.tiketJalur[index];
tiketLain[monthIndex] = data.tiketLain[index];
bobot[monthIndex] = data.bobot[index];
}
});
const report = {
labels: bulanSingkatan,
datasets: [
{
label: 'Create To Proses',
data: createToProses,
backgroundColor: 'rgba(255, 206, 86, 0.5)', // Warna kuning transparan
borderColor: 'rgb(255, 206, 86)', // Kuning solid
borderWidth: 1,
fill: true,
type: 'bar',
},
{
label: 'Proses To Close',
data: prosesToClose,
backgroundColor: 'rgba(54, 162, 235, 0.5)', // Warna biru transparan
borderColor: 'rgb(54, 162, 235)', // Biru solid
borderWidth: 1,
fill: true,
type: 'bar',
},
{
label: 'Jumlah',
data: jumlah,
backgroundColor: 'rgba(75, 192, 192, 0.5)', // Warna hijau kebiruan transparan
borderColor: 'rgb(75, 192, 192)', // Hijau kebiruan solid
borderWidth: 1,
fill: true,
type: 'bar',
},
{
label: 'Bobot',
data: bobot,
backgroundColor: 'rgba(153, 102, 255, 0.5)', // Warna ungu transparan
borderColor: 'rgb(153, 102, 255)', // Ungu solid
borderWidth: 1,
fill: true,
type: 'bar',
},
{
label: 'Tiket Jalur',
data: tiketJalur,
backgroundColor: 'rgba(255, 99, 132, 0.5)', // Warna merah transparan
borderColor: 'rgb(255, 99, 132)', // Merah solid
borderWidth: 1,
fill: true,
},
{
label: 'Tiket Lain',
data: tiketLain,
backgroundColor: 'rgba(201, 203, 207, 0.5)', // Warna abu-abu transparan
borderColor: 'rgb(201, 203, 207)', // Abu-abu solid
borderWidth: 1,
fill: true,
}
]
};
// Hapus chart lama jika sudah ada
if (reportChart) {
reportChart.destroy();
}
const rconfig = {
type: 'line',
data: report,
options: {
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
const absValue = Math.abs(value);
if (absValue >= 1000000) {
return (value / 1000000) + 'M';
} else if (absValue >= 1000) {
return (value / 1000) + 'K';
} else {
return value;
}
}
}
}
}
}
};
// Membuat chart baru
reportChart = new Chart(rcrt, rconfig);
} catch (error) {
console.error('Error fetching data:', error);
}
}
// Fungsi untuk mengaktifkan mode fullscreen
function toggleFullscreen() {
const canvasContainer = document.getElementById('reportChartid');
if (!document.fullscreenElement) {
canvasContainer.requestFullscreen().catch(err => {
console.error(`Error attempting to enable full-screen mode: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
// Event listener untuk tombol fullscreen
fullscreenBtn.addEventListener('click', toggleFullscreen);
// Memanggil fetchData saat halaman dimuat
fetchData(yearSelect.value, userSelect.value);
// Menangani perubahan pada select year
yearSelect.addEventListener('change', () => {
fetchData(yearSelect.value, userSelect.value);
});
// Menangani perubahan pada select user
userSelect.addEventListener('change', () => {
fetchData(yearSelect.value, userSelect.value);
});
// Mengatur tinggi canvas saat masuk dan keluar fullscreen
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
canvas.style.height = ''; // Kembali ke ukuran asli
canvas.style.maxHeight = '100%';
canvas.style.width = '100%'; // Atur lebar canvas menjadi 100vw
fullscreenBtn.textContent = 'Close Fullscreen';
} else {
canvas.style.height = ''; // Kembali ke ukuran asli
canvas.style.maxHeight = '350px'; // Kembali ke max-height asli
canvas.style.width = '100%'; // Kembali ke lebar asli
fullscreenBtn.textContent = 'Fullscreen';
}
});
});
</script>
<script>
window.onload = function() {
const body = document.body;
// Tambahkan kelas 'sidebar-collapse' saat halaman dimuat
body.classList.add('sidebar-collapse');
};
</script>