WD - Dev
517 lines
20 KiB
PHP
517 lines
20 KiB
PHP
<!-- Content Header (Page header) -->
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h4 class="m-0">Dashboard</h4>
|
|
</div>
|
|
</div><!-- /.row -->
|
|
</div><!-- /.container-fluid -->
|
|
</div>
|
|
<!-- /.content-header -->
|
|
<?php
|
|
// print_r($_SESSION);
|
|
|
|
$bulan = date('Y-m');
|
|
$tahun = date('Y');
|
|
|
|
$stmt = $pdo->prepare("SELECT
|
|
SUM(order_aktif) AS order_aktif
|
|
FROM v_jumlah_order_list $SqlDataWHIdM");
|
|
$stmt->execute();
|
|
$data = $stmt->fetchAll();
|
|
|
|
$stmt = $pdo->prepare("SELECT
|
|
SUM(user_regis) AS user_regis,
|
|
SUM(user_aktif) AS user_aktif,
|
|
SUM(user_tidak_aktif) AS user_tidak_aktif,
|
|
SUM(user_konek) AS user_konek,
|
|
SUM(user_diskonek) AS user_diskonek,
|
|
SUM(user_hs_regis) AS user_hs_regis,
|
|
SUM(user_hs_aktif) AS user_hs_aktif,
|
|
SUM(user_hs_tidak_aktif) AS user_hs_tidak_aktif,
|
|
SUM(user_hs_konek) AS user_hs_konek,
|
|
SUM(user_hs_diskonek) AS user_hs_diskonek
|
|
FROM v_jumlah_pelanggan $SqlDataWHIdM");
|
|
$stmt->execute();
|
|
$datauser = $stmt->fetchAll();
|
|
|
|
$stmt = $pdo->prepare("SELECT
|
|
SUM(pemasukan) AS pemasukan,
|
|
SUM(pengeluaran) AS pengeluaran,
|
|
SUM(saldo) AS saldo
|
|
FROM v_jumlah_transaksi_bulanan WHERE bulan = '$bulan' $SqlDataId");
|
|
$stmt->execute();
|
|
$jumbulan = $stmt->fetchAll();
|
|
|
|
$stmt = $pdo->prepare("SELECT
|
|
SUM(pemasukan) AS pemasukan,
|
|
SUM(pengeluaran) AS pengeluaran,
|
|
SUM(saldo) AS saldo
|
|
FROM v_jumlah_transaksi_tahunan WHERE tahun = '$tahun' $SqlDataId");
|
|
$stmt->execute();
|
|
$jumtahun = $stmt->fetchAll();
|
|
|
|
?>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<!-- Small boxes (Stat box) -->
|
|
<div class="row">
|
|
<div class="col-lg-2 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<p class="mb-1">List Order</p>
|
|
<i class="mb-1">Layanan PPPOE</i>
|
|
<h3><?php if(!empty($data[0]['order_aktif'])) { echo $data[0]['order_aktif']; } else { echo "0";} ?></h3>
|
|
<?php if($datauser[0]['user_hs_aktif'] > 0) { ?>
|
|
<i class="mb-1">Layanan Hotspot</i>
|
|
<h3><?php if(!empty($data[0]['order_hs_aktif'])) { echo $data[0]['order_hs_aktif']; } else { echo "0";} ?></h3>
|
|
<?php } ?>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-bag"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-2 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<p class="mb-1">On Instalation</p>
|
|
<i class="mb-1">Layanan PPPOE</i>
|
|
<h3><?php if(!empty($datauser[0]['user_regis'])) { echo $datauser[0]['user_regis']; } else { echo "0";} ?></h3>
|
|
<?php if($datauser[0]['user_hs_aktif'] > 0) { ?>
|
|
<i class="mb-1">Layanan Hotspot</i>
|
|
<h3><?php if(!empty($datauser[0]['user_hs_regis'])) { echo $datauser[0]['user_hs_regis']; } else { echo "0";} ?></h3>
|
|
<?php } ?>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-hammer"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-2 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<p class="mb-1">Aktif</p>
|
|
<i class="mb-1">Layanan PPPOE</i>
|
|
<h3><?php if(!empty($datauser[0]['user_aktif'])) { echo $datauser[0]['user_aktif']; } else { echo "0";} ?></h3>
|
|
<?php if($datauser[0]['user_hs_aktif'] > 0) { ?>
|
|
<i class="mb-1">Layanan Hotspot</i>
|
|
<h3><?php if(!empty($datauser[0]['user_hs_aktif'])) { echo $datauser[0]['user_hs_aktif']; } else { echo "0";} ?></h3>
|
|
<?php } ?>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-ios-people"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-2 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<p class="mb-1">Tidak Aktif</p>
|
|
<i class="mb-1">Layanan PPPOE</i>
|
|
<h3><?php if(!empty($datauser[0]['user_tidak_aktif'])) { echo $datauser[0]['user_tidak_aktif']; } else { echo "0";} ?></h3>
|
|
<?php if($datauser[0]['user_hs_aktif'] > 0) { ?>
|
|
<i class="mb-1">Layanan Hotspot</i>
|
|
<h3><?php if(!empty($datauser[0]['user_hs_tidak_aktif'])) { echo $datauser[0]['user_hs_tidak_aktif']; } else { echo "0";} ?></h3>
|
|
<?php } ?>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-ios-people"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-2 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<p class="mb-1">Connected</p>
|
|
<i class="mb-1">Layanan PPPOE</i>
|
|
<h3><?php if(!empty($datauser[0]['user_konek'])) { echo $datauser[0]['user_konek']; } else { echo "0";} ?></h3>
|
|
<?php if($datauser[0]['user_hs_aktif'] > 0) { ?>
|
|
<i class="mb-1">Layanan Hotspot</i>
|
|
<h3><?php if(!empty($datauser[0]['user_hs_konek'])) { echo $datauser[0]['user_hs_konek']; } else { echo "0";} ?></h3>
|
|
<?php } ?>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-wifi"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-2 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-danger">
|
|
<div class="inner">
|
|
<p class="mb-1">Disconnected</p>
|
|
<i class="mb-1">Layanan PPPOE</i>
|
|
<h3><?php if(!empty($datauser[0]['user_diskonek'])) { echo $datauser[0]['user_diskonek']; } else { echo "0";} ?></h3>
|
|
<?php if($datauser[0]['user_hs_aktif'] > 0) { ?>
|
|
<i class="mb-1">Layanan Hotspot</i>
|
|
<h3><?php if(!empty($datauser[0]['user_hs_diskonek'])) { echo $datauser[0]['user_hs_diskonek']; } else { echo "0";} ?></h3>
|
|
<?php } ?>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-wifi"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
</div>
|
|
<div class="row equal-height">
|
|
<?php if(in_array("52", $json_array[52])) { ?>
|
|
<div class="col-md-8">
|
|
<div class="p-2 border bg-light">
|
|
<div class="card" id="reportChartid">
|
|
<div class="card-body">
|
|
<center>
|
|
<h5>Grafik Keuangan Tahunan</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>
|
|
<button id="fullscreenBtn" style="float: right;" class="btn btn-sm btn-secondary">Fullscreen</button>
|
|
<canvas id="reportChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div id="accordion">
|
|
<div class="card">
|
|
<div class="card-header" id="headingOne">
|
|
<h5 class="mb-0">
|
|
<center>
|
|
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
|
|
<h5><b>Akumulasi Laporan Keuangan</b></h5>
|
|
</button>
|
|
</center>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
|
|
<div class="card-body">
|
|
<center>
|
|
<h5>Akumulasi keuangan bulan ini</h5>
|
|
</center>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card" style="background-color: rgba(76, 175, 80, 0.9);">
|
|
<div class="card-body">
|
|
<center>
|
|
<h6>Pemasukan</h6><hr style="margin: 5px;">
|
|
<h4>Rp. <?php echo number_format($jumbulan[0]['pemasukan']); ?></h4>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card" style="background-color: rgba(255, 193, 7, 0.7);">
|
|
<div class="card-body">
|
|
<center>
|
|
<h6>Pengeluaran</h6><hr style="margin: 5px;">
|
|
<h4>Rp. <?php echo number_format($jumbulan[0]['pengeluaran']); ?></h4>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card" style="background-color: rgba(23, 162, 184, 0.7);">
|
|
<div class="card-body">
|
|
<center>
|
|
<h6>Saldo</h6><hr style="margin: 5px;">
|
|
<h4>Rp. <?php echo number_format($jumbulan[0]['saldo']); ?></h4>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<center>
|
|
<h5>Akumulasi keuangan tahun ini</h5>
|
|
</center>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card bg-success">
|
|
<div class="card-body">
|
|
<center>
|
|
<h6>Pemasukan</h6><hr style="margin: 5px;">
|
|
<h4>Rp. <?php echo number_format($jumtahun[0]['pemasukan']); ?></h4>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card bg-warning">
|
|
<div class="card-body">
|
|
<center>
|
|
<h6>Pengeluaran</h6><hr style="margin: 5px;">
|
|
<h4>Rp. <?php echo number_format($jumtahun[0]['pengeluaran']); ?></h4>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card bg-info">
|
|
<div class="card-body">
|
|
<center>
|
|
<h6>Saldo</h6><hr style="margin: 5px;">
|
|
<h4>Rp. <?php echo number_format($jumtahun[0]['saldo']); ?></h4>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php } if(in_array("36", $json_array[36])) { ?>
|
|
<div class="col-md-4">
|
|
<div class="p-2 border bg-light">
|
|
<div>
|
|
<a href="?<?php echo encrypt_url('maps_marker_topologi'); ?>" class="btn btn-sm btn-block">
|
|
<img src="dist/img/maps-monitoring.png" width="100%">
|
|
<h6>Maps Monitoring Titik Koordinat Pelanggan</h6>
|
|
</a>
|
|
<br>
|
|
</div>
|
|
<div class="card direct-chat direct-chat-primary">
|
|
<div class="card-header bg-danger">
|
|
<h3 class="card-title">Tiket Gangguan</h3>
|
|
<div class="card-tools">
|
|
<?php
|
|
$stmt = $pdo->prepare("SELECT COUNT(id) AS jumlahtiket FROM v_tiket_gangguan WHERE status = '1' $SqlDataId ");
|
|
$stmt->execute();
|
|
$datatiket = $stmt->fetchAll();
|
|
?>
|
|
<span title="3 New Messages" class="badge badge-light"><?php echo $datatiket[0]['jumlahtiket']; ?></span>
|
|
</div>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body">
|
|
<div class="direct-chat-messages" style="height: 450px">
|
|
<?php
|
|
$stmt = $pdo->prepare("SELECT * FROM v_tiket_gangguan WHERE status = '1' $SqlDataId ORDER BY COALESCE(level, 999) ASC, start_time DESC");
|
|
$stmt->execute();
|
|
while ($data = $stmt->fetch(PDO::FETCH_ASSOC)) {
|
|
// Tentukan warna garis berdasarkan level
|
|
if ($data['level'] == 1) {
|
|
$borderColor = '#dc3545'; // Bootstrap danger
|
|
} elseif ($data['level'] == 2) {
|
|
$borderColor = '#ffc107'; // Bootstrap warning
|
|
} else {
|
|
$borderColor = '#0dcaf0'; // Bootstrap info
|
|
}
|
|
?>
|
|
<a href="?<?php echo encrypt_url('tiket_buat') ?>">
|
|
<div class="card p-2 text-dark" style="border-left: 8px solid; border-left-color: <?= $borderColor; ?>;">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<p class="m-0 text-danger"><?php echo $data['jenis_tiket']; ?></p>
|
|
<p class="m-0"><?php echo $data['nama_pelanggan'].' ('.$data['nama_server'].')'; ?></p>
|
|
<p class="m-0"><?php echo $data['start_time']; ?></p>
|
|
</div>
|
|
<div class="col-6 text-right">
|
|
<p class="m-0"><?php echo $data['permasalahan']; ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<?php } ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php } if(in_array("27", $json_array[27]) && in_array("28", $json_array[28])) { ?>
|
|
<!--<div class="col-md-8"> -->
|
|
<!-- <div class="p-2 border bg-light">-->
|
|
<!-- <div class="card-body">-->
|
|
<!-- <center>-->
|
|
<!-- <h5>Grafik Keuangan Tahunan</h5>-->
|
|
<!-- </center>-->
|
|
<!-- <label>Tahun</label>-->
|
|
<!-- <select id="yearSelect">-->
|
|
<!-- <option value="2024">2024</option>-->
|
|
<!-- <option value="2025">2025</option>-->
|
|
<!-- <option value="2026">2026</option>-->
|
|
<!-- </select>-->
|
|
<!-- <canvas id="reportChart"></canvas>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!--</div>-->
|
|
<?php } ?>
|
|
</div>
|
|
</div><!-- /.container-fluid -->
|
|
</section>
|
|
<!-- /.content -->
|
|
|
|
<style>
|
|
.equal-height {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.equal-height .col-md-8 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.equal-height .col-md-4 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.equal-height .p-2 {
|
|
flex: 1; /* Membuat kolom mengisi tinggi yang sama */
|
|
}
|
|
</style>
|
|
|
|
<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 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) {
|
|
try {
|
|
const response = await fetch(`load/data_report_dashboard.php?year=${year}&s=<?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 pemasukan = new Array(12).fill(0);
|
|
const pengeluaran = new Array(12).fill(0);
|
|
const saldo = new Array(12).fill(0);
|
|
|
|
data.bulan.forEach((bulan, index) => {
|
|
const monthIndex = bulanArray.indexOf(bulan);
|
|
if (monthIndex !== -1) {
|
|
pemasukan[monthIndex] = data.pemasukan[index];
|
|
pengeluaran[monthIndex] = data.pengeluaran[index];
|
|
saldo[monthIndex] = data.saldo[index];
|
|
}
|
|
});
|
|
|
|
const report = {
|
|
labels: bulanSingkatan,
|
|
datasets: [
|
|
{
|
|
label: 'Pemasukan',
|
|
data: pemasukan,
|
|
backgroundColor: 'rgba(75, 192, 192)',
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
borderWidth: 1
|
|
},
|
|
{
|
|
label: 'Pengeluaran',
|
|
data: pengeluaran,
|
|
backgroundColor: 'rgba(255, 99, 132)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
borderWidth: 1
|
|
},
|
|
{
|
|
label: 'Saldo',
|
|
data: saldo,
|
|
backgroundColor: 'rgba(54, 162, 235)',
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
borderWidth: 1
|
|
}
|
|
]
|
|
};
|
|
|
|
// Hapus chart lama jika sudah ada
|
|
if (reportChart) {
|
|
reportChart.destroy();
|
|
}
|
|
|
|
const rconfig = {
|
|
type: 'bar',
|
|
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 fungsi untuk mengambil data saat halaman dimuat
|
|
fetchData(yearSelect.value);
|
|
|
|
// Menangani perubahan tahun
|
|
yearSelect.addEventListener('change', () => {
|
|
fetchData(yearSelect.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>
|