<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="cNbvcGRTIO3P8kzncGIjcxRT6TnJgVE_vKY6R9ycO1E" />
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="https://skm-dpmptsp.muaraenimkab.go.id/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://skm-dpmptsp.muaraenimkab.go.id/img/favicon-16x16.png">
<title>SKM | DPMPTSP</title>
<!-- Styles / Scripts -->
<link rel="preload" as="style" href="https://skm-dpmptsp.muaraenimkab.go.id/build/assets/app-CYXoO_9a.css" /><link rel="modulepreload" as="script" href="https://skm-dpmptsp.muaraenimkab.go.id/build/assets/app-DSQHqoxl.js" /><link rel="stylesheet" href="https://skm-dpmptsp.muaraenimkab.go.id/build/assets/app-CYXoO_9a.css" data-navigate-track="reload" /><script type="module" src="https://skm-dpmptsp.muaraenimkab.go.id/build/assets/app-DSQHqoxl.js" data-navigate-track="reload"></script> <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.list-item][wire\:loading\.list-item], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}[wire\:cloak] {display: none !important;}dialog#livewire-error::backdrop {background-color: rgba(0, 0, 0, .6);}</style>
</head>
<body class="antialiased dark:bg-black dark:text-white/50">
<div class="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
<main>
<div>
<div class="bg-gray-900/90 bg-cover bg-no-repeat bg-blend-overlay" style="background-image: url(https://skm-dpmptsp.muaraenimkab.go.id/img/gedung_mpp.jpeg);">
<header class="absolute inset-x-0 top-0 z-50">
<nav x-data="{ isOpen: false }" class="flex items-center justify-between py-3 px-5 lg:px-8 bg-slate-700" aria-label="Global">
<div class="w-full">
<div class="grid grid-cols-3">
<!-- Logo -->
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Mall Pelayanan Publik</span>
<img class="h-9 w-36 lg:h-12 lg:w-40" src="https://skm-dpmptsp.muaraenimkab.go.id/img/dpm_foo.png" alt="Mall Pelayanan Publik Kab. Muara Enim">
</a>
</div>
<!-- Desktop Menu -->
<div class="hidden lg:flex lg:justify-center lg:items-center lg:gap-x-12 text-gray-100">
<a href="/" class="text-sm/6 font-semibold transition-transform duration-300 hover:scale-110 hover:text-violet-400">Beranda</a>
<a href="/" data-target="#ikmmpp" class="text-sm/6 font-semibold transition-transform duration-300 hover:scale-110 hover:text-violet-400">IKM MPP</a>
<a href="/" data-target="#kategori" class="text-sm/6 font-semibold transition-transform duration-300 hover:scale-110 hover:text-violet-400">Grafik Per Kategori</a>
<a href="/" data-target="#perinstansi" class="text-sm/6 font-semibold transition-transform duration-300 hover:scale-110 hover:text-violet-400">IKM Per Instansi</a>
<a href="/" data-target="#statistik" class="text-sm/6 font-semibold transition-transform duration-300 hover:scale-110 hover:text-violet-400">Statistik</a>
</div>
</div>
</div>
<!-- Mobile Menu Button -->
<div class="flex lg:hidden">
<button @click="isOpen = true" type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-100">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<!-- Mobile menu, show/hide based on menu open state -->
<div x-show="isOpen" x-transition class="lg:hidden fixed inset-0 z-50">
<!-- Background backdrop -->
<div class="fixed inset-0 bg-black bg-opacity-50" @click="isOpen = false"></div>
<!-- Slide-out Menu -->
<div class="fixed inset-y-0 right-0 z-50 w-full max-w-sm overflow-y-auto bg-white px-6 py-6 sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Mall Pelayanan Publik</span>
<img class="h-14 w-48" src="https://skm-dpmptsp.muaraenimkab.go.id/img/dpm.png" alt="Mall Pelayanan Publik Kab. Muara Enim">
</a>
<button @click="isOpen = false" type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<a href="/" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 transition-transform duration-300 hover:scale-105 hover:text-violet-400">Beranda</a>
<a href="/#ikmmpp" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 transition-transform duration-300 hover:scale-105 hover:text-violet-400">IKM MPP</a>
<a href="/#kategori" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 transition-transform duration-300 hover:scale-105 hover:text-violet-400">Grafik Per Kategori</a>
<a href="/#perinstansi" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 transition-transform duration-300 hover:scale-105 hover:text-violet-400">IKM Per Instansi</a>
<a href="/#statistik" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 transition-transform duration-300 hover:scale-105 hover:text-violet-400">Statistik</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<hr class="border-gray-500 shadow-sm"> </header>
<div class="relative isolate px-6 pt-14 lg:px-8">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#2563eb] to-[#fdff7b] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
</div>
</div>
<div class="lg:max-w-7xl lg:mx-auto py-32 lg:py-56">
<div class="flex items-center justify-center text-center">
<div>
<span class="text-pretty text-sm px-10 lg:text-2xl font-semibold text-gray-200">Selamat Datang di</span><br>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-100">
Survei Kepuasan Masyarakat
</h1>
<div class="mt-8 text-pretty text-sm px-10 lg:text-lg font-semibold text-gray-200">
Dinas Penanaman Modal dan Pelayanan Terpadu Satu Pintu (DPMPTSP) Kabupaten Muara Enim
</div>
<div
class="flex items-center justify-center mt-10 lg:mt-16 text-pretty text-sm lg:text-md px-5 lg:px-44 font-extralight text-gray-200">
Survei Kepuasan Masyarakat (SKM) bertujuan untuk mengukur tingkat kepuasan masyarakat sebagai
pengguna layanan dan
meningkatkan kualitas penyelenggaraan pelayanan publik. Survei Kepuasan Masyarakat dilaksanakan
sesuai dengan ketentuan dalam
Permenpan RB Nomor 14 Tahun 2017 tentang Pedoman Penyusunan Survei Kepuasan Masyarakat.
</div>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a wire:navigate href="https://skm-dpmptsp.muaraenimkab.go.id/survey"
class="rounded-xl bg-indigo-600 px-5 py-3 text-lg font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Ikuti Survey
</a>
</div>
</div>
</div>
</div>
<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true">
<div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
</div>
</div>
</div>
</div> <!-- Feature Start -->
<div class="w-full flex flex-col items-center justify-center">
<div class="container mb-20">
<!-- Feature one -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 -mt-20 px-10 lg:px-[100px] sm:px-auto">
<div class="bg-white border shadow-md rounded-xl flex items-center h-50 p-5">
<div class="text-center px-2">
<div class="icon">
<i class="fa-solid fa-circle-check fa-2xl mb-4"></i>
</div>
<h5 class="text-2xl text-gray-900 font-extrabold my-2"> Mudah</h5>
<span class="text-gray-700">Desain sistem survei yang ringkas dan memudahkan
masyarakat mengisi survey.</span>
</div>
</div>
<div class="bg-white flex items-center h-50 p-5 border shadow-md rounded-xl">
<div class="text-center px-2">
<div class="icon">
<i class="fa-solid fa-wifi fa-2xl mb-4"></i>
</div>
<h5 class="text-2xl text-gray-900 font-extrabold my-2">Online</h5>
<span class="text-gray-700">SKM Online dapat diakses kapanpun dan dimanapun secara daring.</span>
</div>
</div>
<div class="bg-white flex items-center h-50 p-5 border shadow-md rounded-xl">
<div class="text-center px-2">
<div class="icon">
<i class="fa-solid fa-clock-rotate-left fa-2xl mb-4"></i>
</div>
<h5 class="text-2xl text-gray-900 font-extrabold my-2">Realtime</h5>
<span class="text-gray-700">Setiap survey yang telah di isi oleh masyarakat akan dikalkulasikan secara
realtime</span>
</div>
</div>
</div>
<!-- Feature two -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-20 px-10 lg:px-[100px]" id="ikmmpp">
<div class="col-span-2">
<div class="bg-white border shadow-md rounded-xl flex items-center justify-center overflow-hidden">
<div class="w-full">
<div class="text-center bg-lime-100 w-full py-5">
<h5 class="text-2xl text-gray-900 font-extrabold mx-2">GRAFIK KEPUASAN MASYARAKAT</h5>
<span class="text-gray-700 mx-4 text-center flex items-center justify-center">Tingkat kepuasan masyarakat terhadap layanan yang diberikan, berdasarkan jenis layanan</span>
</div>
<div class="text-center p-10">
<figure><div wire:key="lw-3770915403-0" wire:snapshot="{"data":{"labels":[["Persyaratan","Prosedur","Waktu Pelayanan","Biaya\/Tarif","Produk Layanan","Kompetensi Pelaksana","Perilaku Pelaksana","Sarana dan Prasarana","Penanganan Pengaduan, Saran dan Masukan"],{"s":"arr"}],"data":[{"Persyaratan":140,"Prosedur":141,"Waktu Pelayanan":140,"Biaya\/Tarif":145,"Produk Layanan":141,"Kompetensi Pelaksana":145,"Perilaku Pelaksana":137,"Sarana dan Prasarana":147,"Penanganan Pengaduan, Saran dan Masukan":151},{"s":"arr"}],"periode":"Periode Bulan (Juli - September 2026)"},"memo":{"id":"FQ8dcLrrhdIGwCdxmbas","name":"bar-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"7fe821194fff3329d9792883de500983c66e1f72c306253ae7c908bd5c38d09e"}" wire:effects="{"partials":[]}" wire:id="FQ8dcLrrhdIGwCdxmbas" wire:name="bar-chart">
<h2 class="text-md font-semibold text-center my-4">Periode Bulan (Juli - September 2026)</h2>
<canvas id="surveyChart" class="w-full"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('surveyChart').getContext('2d');
const labels = ["Persyaratan","Prosedur","Waktu Pelayanan","Biaya\/Tarif","Produk Layanan","Kompetensi Pelaksana","Perilaku Pelaksana","Sarana dan Prasarana","Penanganan Pengaduan, Saran dan Masukan"];
const data = {"Persyaratan":140,"Prosedur":141,"Waktu Pelayanan":140,"Biaya\/Tarif":145,"Produk Layanan":141,"Kompetensi Pelaksana":145,"Perilaku Pelaksana":137,"Sarana dan Prasarana":147,"Penanganan Pengaduan, Saran dan Masukan":151};
const datasets = [{
label: 'Total Point',
data: Object.values(data),
backgroundColor: [
'rgba(75, 192, 192, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(201, 203, 207, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(201, 192, 255, 0.2)'
],
hoverBackgroundColor: [
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
'rgba(54, 162, 235, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(201, 203, 207, 1)',
'rgba(255, 205, 86, 1)',
'rgba(201, 192, 255, 1)'
],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
}];
const surveyChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: datasets
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
</div></figure>
</div>
</div>
</div>
</div>
<div class="bg-white border shadow-md rounded-xl text-center overflow-hidden">
<div class="w-full">
<div class="text-center bg-lime-100 w-full p-5">
<h5 class="text-2xl text-gray-900 font-extrabold my-2 mx-2">INDEKS KEPUASAN MASYARAKAT (IKM) MPP</h5>
<span class="text-gray-700 mx-4 text-center flex items-center justify-center">Presentase kepuasan masyarakat terhadap layanan yang diberikan di Mal Pelayanan Publik.</span>
</div>
<div class="text-center p-10">
<figure><div wire:key="lw-3770915403-1" wire:snapshot="{"data":[],"memo":{"id":"MAIRlIHgw3mDTWOu4sku","name":"radar-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"fb61beb73c3ea356afb3716e38655d788e2e69a369f8180802cbb4a8a5597282"}" wire:effects="{"partials":[]}" wire:id="MAIRlIHgw3mDTWOu4sku" wire:name="radar-chart">
<!--[if BLOCK]><![endif]--> <div class="text-center flex flex-col justify-center items-center gap-3">
<span class="text-2xl text-green-600 font-extrabold">Nilai IKM</span>
<span class="text-5xl md:text-7xl lg:text-7xl text-gray-900 font-extrabold">93.98%</span>
<span class="text-2xl text-gray-900 font-extrabold">"A (Sangat Baik)"</span>
<p>Dari Jumlah Responden : 38</p>
<p class="text-gray-700 mt-2">Periode Bulan <span class="font-bold">Juli - September 2026</span></p>
</div>
<div class="badge badge-info gap-2 mt-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="inline-block h-4 w-4 stroke-current">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
NRR Tertimbang : 3.7594
</div>
<!--[if ENDBLOCK]><![endif]--></div></figure>
</div>
</div>
</div>
</div>
</div>
<!-- Feature three -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-20 px-10 lg:px-[100px]" id="kategori">
<div class="bg-white border shadow-md rounded-xl overflow-hidden">
<div class="w-full">
<div class="text-center bg-red-100 w-full py-5">
<h5 class="text-2xl text-gray-900 font-extrabold my-2 mx-2">GRAFIK JENIS KELAMIN RESPONDEN</h5>
<span class="text-gray-700 mx-4 text-center flex items-center justify-center">Grafik kepuasan masyarakat terhadap layanan yang diberikan, berdasarkan Jenis Kelamin responden.</span>
</div>
<div class="text-center p-10">
<figure class="mt-5"><div wire:key="lw-3770915403-2" wire:snapshot="{"data":[],"memo":{"id":"UJbByPAg6pKjHHQebig4","name":"line-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"60780ea61b4b4f77262929c7e3937390995c72daf7eafe98d5e16b529b281d07"}" wire:effects="{"partials":[]}" wire:id="UJbByPAg6pKjHHQebig4" wire:name="line-chart">
<canvas id="doughnutChart" class="w-full"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function() {
function updateChart() {
const genderData = {"Perempuan":19,"Laki-Laki":19};
const periode = "Juli - September 2026";
const ctx = document.getElementById('doughnutChart').getContext('2d');
if (window.genderChart) {
window.genderChart.destroy(); // Hapus chart sebelumnya jika ada
}
window.genderChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: Object.keys(genderData),
datasets: [{
label: 'Jumlah Responden Berdasarkan Jenis Kelamin',
data: Object.values(genderData),
backgroundColor: [
'rgba(54, 162, 235, 0.5)', // Biru
'rgba(255, 99, 132, 0.5)', // Merah
],
hoverBackgroundColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 99, 132, 1)',
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 99, 132, 1)',
],
borderWidth: 1,
hoverOffset: 10,
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
title: {
display: true,
text: `Berdasarkan Jenis Kelamin Responden (${periode})`
}
}
}
});
}
updateChart();
// Update chart ketika Livewire memperbarui data
Livewire.hook('message.processed', () => {
updateChart();
});
});
</script>
</div></figure>
</div>
</div>
</div>
<div class="bg-white border shadow-md rounded-xl overflow-hidden">
<div class="w-full">
<div class="text-center bg-red-100 w-full py-5">
<h5 class="text-2xl text-gray-900 font-extrabold my-2 mx-2">GRAFIK PENDIDIKAN RESPONDEN</h5>
<span class="text-gray-700 mx-4 text-center flex items-center justify-center">Grafik kepuasan masyarakat terhadap layanan yang diberikan, berdasarkan pendidikan responden.</span>
</div>
<div class="text-center p-10">
<figure class="mt-5"><div wire:key="lw-3770915403-3" wire:snapshot="{"data":[],"memo":{"id":"hts7Dsa78TYwdCZ7i7BX","name":"pie-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"8e3b6233350b2e727727042344f492e2f73da96b93309267748cec9ac742e1e0"}" wire:effects="{"partials":[]}" wire:id="hts7Dsa78TYwdCZ7i7BX" wire:name="pie-chart">
<canvas id="pieChart" class="w-full"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function() {
function updateChart() {
const educationData = {"S2":3,"SMA":15,"SMK":4,"S1":9,"D3":4,"SMP":2,"SD":1};
const periode = "Juli - September 2026";
const ctx = document.getElementById('pieChart').getContext('2d');
if (window.educationChart) {
window.educationChart.destroy();
}
window.educationChart = new Chart(ctx, {
type: 'pie',
data: {
labels: Object.keys(educationData),
datasets: [{
label: 'Jumlah Responden Berdasarkan Pendidikan',
data: Object.values(educationData),
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
hoverBackgroundColor: [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)',
'rgba(255, 206, 86)',
'rgba(75, 192, 192)',
'rgba(153, 102, 255)',
'rgba(255, 159, 64)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
hoverOffset: 10,
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
title: {
display: true,
text: `Berdasarkan Pendidikan Responden (${periode})`
}
}
}
});
}
// Panggil pertama kali saat halaman dimuat
updateChart();
// Update otomatis saat Livewire mengupdate komponen
Livewire.hook('message.processed', (message, component) => {
updateChart();
});
});
</script>
</div></figure>
</div>
</div>
</div>
<div class="bg-white border shadow-md rounded-xl overflow-hidden">
<div class="w-full">
<div class="text-center bg-red-100 w-full py-5">
<h5 class="text-2xl text-gray-900 font-extrabold my-2 mx-2">GRAFIK PEKERJAAN RESPONDEN</h5>
<span class="text-gray-700 mx-4 text-center flex items-center justify-center">Grafik kepuasan masyarakat terhadap layanan yang diberikan, berdasarkan pekerjaan responden.</span>
</div>
<div class="text-center p-10">
<figure><canvas wire:key="lw-3770915403-4" wire:snapshot="{"data":[],"memo":{"id":"EdrZUmcoEQbpfI75ncMz","name":"area-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"0f40a956e606c792df6f39364d8b1a23a72d4b72bf2fa31272d16f80fd46bf2e"}" wire:effects="{"partials":[]}" wire:id="EdrZUmcoEQbpfI75ncMz" wire:name="area-chart" id="areaChart" class="w-full"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function() {
const workData = {"ASN":5,"Pelajar\/Mahasiswa":10,"Wirausaha":7,"Lainnya":5,"Pekerja Lepas\/Freelance":3,"Ibu Rumah Tangga":1,"Petani\/Nelayan":3,"Pegawai Swasta":4};
const ctx = document.getElementById('areaChart').getContext('2d');
const periode = "Juli - September 2026";
const labels = Object.keys(workData);
const data = Object.values(workData);
const educationChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: labels,
datasets: [{
label: 'Jumlah Responden Berdasarkan Pekerjaan',
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
hoverBackgroundColor: [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)',
'rgba(255, 206, 86)',
'rgba(75, 192, 192)',
'rgba(153, 102, 255)',
'rgba(255, 159, 64)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
hoverOffset: 10,
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: `Berdasarkan Pekerjaan Responden (${periode})`
}
}
}
});
});
</script></figure>
</div>
</div>
</div>
</div>
<!-- Feature four -->
<h1 class="text-center mb-10 text-4xl md:text-4xl lg:text-4xl font-extrabold text-gray-700">IKM PER INSTANSI</h1>
<hr class="w-16 mx-auto border border-violet-700 mb-10 shadow-sm">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-20 px-10 lg:px-[100px]" id="perinstansi">
<div class="bg-white border shadow-md rounded-xl overflow-hidden">
<div class="w-full">
<div class="text-center bg-violet-100 w-full py-5">
<h5 class="text-2xl text-gray-900 font-extrabold my-2 mx-2">IKM DPMPTSP</h5>
<span class="text-gray-700 mx-4 text-center flex items-center justify-center">Indeks Kepuasan Masyarakat (IKM) DPMPTSP</span>
</div>
<div class="text-center p-10">
<figure><div wire:key="lw-3770915403-5" wire:snapshot="{"data":{"instansiNama":"DPMPTSP"},"memo":{"id":"0Rnx3R6NLSXGJmHAow7F","name":"dpm-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"400175e8537d65a5feb14dec970f4f9c544f704ec0a5236d4329cf011e5c7bc4"}" wire:effects="{"partials":[]}" wire:id="0Rnx3R6NLSXGJmHAow7F" wire:name="dpm-chart" class="text-center flex flex-col justify-center items-center gap-3">
<!--[if BLOCK]><![endif]--> <span class="text-2xl text-green-600 font-extrabold">Nilai IKM</span>
<span class="text-5xl text-gray-900 font-extrabold">93.66%</span>
<span class="text-xl text-gray-900 font-extrabold">"A (Sangat Baik)"</span>
<p class="text-gray-700 mt-2">Jumlah Responden: 12</p>
<p class="text-gray-700 mt-2">Periode Bulan <span class="font-bold">Juli - September 2026</span></p>
<div class="badge badge-info gap-2 mt-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="inline-block h-4 w-4 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
NRR Tertimbang: 3.7463
</div>
<!--[if ENDBLOCK]><![endif]--></div>
</figure>
</div>
</div>
</div>
<div class="bg-white border shadow-md rounded-xl overflow-hidden">
<div class="w-full">
<div class="text-center bg-violet-100 w-full py-5">
<h5 class="text-2xl text-gray-900 font-extrabold my-2 mx-2">IKM DUKCAPIL</h5>
<span class="text-gray-700 mx-4 text-center flex items-center justify-center">Indeks Kepuasan Masyarakat (IKM) DUKCAPIL</span>
</div>
<div class="text-center p-10">
<figure><div wire:key="lw-3770915403-6" wire:snapshot="{"data":{"instansiNama":"Dinas Kependudukan dan Pencatatan Sipil"},"memo":{"id":"utWVdrhJ6NLGWzRk9fBR","name":"dukcapil-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"0daad6269334e7bc1d1e703f4192ed89858a2c091ae9cf41d1450dfcb4d07c10"}" wire:effects="{"partials":[]}" wire:id="utWVdrhJ6NLGWzRk9fBR" wire:name="dukcapil-chart" class="text-center flex flex-col justify-center items-center gap-3">
<!--[if BLOCK]><![endif]--> <span class="text-2xl text-green-600 font-extrabold">Nilai IKM</span>
<span class="text-5xl text-gray-900 font-extrabold">93.50%</span>
<span class="text-xl text-gray-900 font-extrabold">"A (Sangat Baik)"</span>
<p class="text-gray-700 mt-2">Jumlah Responden: 13</p>
<p class="text-gray-700 mt-2">Periode Bulan <span class="font-bold">Juli - September 2026</span></p>
<div class="badge badge-info gap-2 mt-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="inline-block h-4 w-4 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
NRR Tertimbang: 3.7398
</div>
<!--[if ENDBLOCK]><![endif]--></div>
</figure>
</div>
</div>
</div>
<div class="bg-white border shadow-md rounded-xl overflow-hidden">
<div class="w-full">
<div class="text-center bg-violet-100 w-full py-5">
<h5 class="text-2xl text-gray-900 font-extrabold my-2 mx-2">IKM TERATAS</h5>
<span class="text-gray-700 mx-4 text-center flex items-center justify-center">Indeks Kepuasan Masyarakat (IKM) Teratas dengan jumlah responden terbanyak</span>
</div>
<div class="text-center p-10">
<figure><div wire:key="lw-3770915403-7" wire:snapshot="{"data":[],"memo":{"id":"OOHMzgPMdhXlx5oiQ6pO","name":"top-ikm-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"fb036b6f66dc91cfd9d3c78d145ac1b29f62ac3a121acc29030f1c8af9e28c73"}" wire:effects="{"partials":[]}" wire:id="OOHMzgPMdhXlx5oiQ6pO" wire:name="top-ikm-chart" class="text-center flex flex-col justify-center items-center gap-3">
<!--[if BLOCK]><![endif]--> <span class="text-2xl text-violet-600 font-extrabold my-3 px-10">
Dinas Kependudukan dan Pencatatan Sipil
</span>
<span class="text-2xl text-green-600 font-extrabold">Nilai IKM</span>
<span class="text-5xl text-gray-900 font-extrabold">94.77%</span>
<span class="text-xl text-gray-900 font-extrabold">"A (Sangat Baik)"</span>
<p class="text-gray-700">Jumlah Responden: 1978</p>
<div class="badge badge-info gap-2 mt-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="inline-block h-4 w-4 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
NRR Tertimbang: 3.7908
</div>
<!--[if ENDBLOCK]><![endif]--></div>
</figure>
</div>
</div>
</div>
</div>
<!-- Feature five -->
<h1 class="text-left mb-10 text-4xl md:text-4xl lg:text-4xl font-extrabold text-gray-700">STATISTIK</h1>
<hr class="w-16 mx-auto border border-violet-700 mb-10 shadow-sm">
<div class="w-full">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-20 px-10 lg:px-[100px]" id="statistik">
<div class="bg-white border shadow-md rounded-xl overflow-hidden">
<div class="w-full">
<div wire:key="mingguan-chart" wire:snapshot="{"data":{"labels":[["Minggu ke-1","Minggu ke-2","Minggu ke-3","Minggu ke-4","Minggu ke-5"],{"s":"arr"}],"data":[[38,0,0,0,0],{"s":"arr"}]},"memo":{"id":"8ZDzqMbmPVYygzWXcaNd","name":"mingguan-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"61536b2241c5bd76b5ad8567ffc7236c1188d5ff44c4bdf23b0204348ba55faf"}" wire:effects="{"partials":[],"dispatches":[{"name":"chartUpdatedMingguan","params":{"labels":["Minggu ke-1","Minggu ke-2","Minggu ke-3","Minggu ke-4","Minggu ke-5"],"data":[38,0,0,0,0]}}]}" wire:id="8ZDzqMbmPVYygzWXcaNd" wire:name="mingguan-chart" class="p-4 w-full">
<h2 class="text-md font-semibold text-center my-4">Grafik Per Minggu</h2>
<div class="relative h-96">
<canvas id="chart-6a48fd0ece831" class="w-full h-full"></canvas>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let chartInstance = null;
let canvasId = 'chart-6a48fd0ece831';
function renderChart(labels, data) {
let canvas = document.getElementById(canvasId);
if (!canvas) {
console.error("Canvas element not found:", canvasId);
return;
}
let ctx = canvas.getContext('2d');
if (chartInstance !== null) {
chartInstance.destroy();
}
chartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Jumlah Survei per Minggu',
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
}
});
}
renderChart(["Minggu ke-1","Minggu ke-2","Minggu ke-3","Minggu ke-4","Minggu ke-5"], [38,0,0,0,0]);
Livewire.on('chartUpdated', ({ labels, data }) => {
renderChart(labels, data);
});
});
</script>
</div>
</div>
<div class="bg-white border shadow-md rounded-xl overflow-hidden">
<div class="w-full">
<div wire:key="bulanan-chart" wire:snapshot="{"data":{"labels":[["DPMPTSP","Badan Pendapatan Daerah","Dinas Kependudukan dan Pencatatan Sipil","Dinas Komunikasi dan Informatika","BALITBANGDA","Unit Pelayanan Barang dan Jasa","Dinas Kesehatan","PDAM Lematang Enim","Samsat","Bank Sumsel Babel","Kadinda","ATR BPR","BPJS Kesehatan","Dinas PUPR","Imigrasi","Kejaksaan Negeri","Kementerian Agama","Pengadilan Agama","Pengadilan Negeri","Dinas Lingkungan Hidup","Dinas Pendidikan dan Kebudayaan","BPR Muara Enim","PT. Taspen","BPJS Ketenagakerjaan","KP2KP","PT. Mandiri Taspen","BAZNAS","POLRES MUARA ENIM","DISNAKERTRANS","DPPKB","DPPPA"],{"s":"arr"}],"data":[[12,0,13,0,0,0,0,5,2,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0],{"s":"arr"}]},"memo":{"id":"23KwTG78AubXwZYAgbAU","name":"bulanan-chart","path":"\/","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"b34384a26a282e44050f0d305cbebc5a996dd91f1e3a66cb823769f5852f4a61"}" wire:effects="{"partials":[],"dispatches":[{"name":"chartUpdatedBulanan","params":{"labels":["DPMPTSP","Badan Pendapatan Daerah","Dinas Kependudukan dan Pencatatan Sipil","Dinas Komunikasi dan Informatika","BALITBANGDA","Unit Pelayanan Barang dan Jasa","Dinas Kesehatan","PDAM Lematang Enim","Samsat","Bank Sumsel Babel","Kadinda","ATR BPR","BPJS Kesehatan","Dinas PUPR","Imigrasi","Kejaksaan Negeri","Kementerian Agama","Pengadilan Agama","Pengadilan Negeri","Dinas Lingkungan Hidup","Dinas Pendidikan dan Kebudayaan","BPR Muara Enim","PT. Taspen","BPJS Ketenagakerjaan","KP2KP","PT. Mandiri Taspen","BAZNAS","POLRES MUARA ENIM","DISNAKERTRANS","DPPKB","DPPPA"],"data":[12,0,13,0,0,0,0,5,2,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0]}}]}" wire:id="23KwTG78AubXwZYAgbAU" wire:name="bulanan-chart" class="p-4 w-full">
<h2 class="text-md font-semibold text-center my-4">Grafik Per Instansi (Bulanan)</h2>
<div class="relative h-96">
<canvas id="chart-6a48fd0ecf4dc" class="w-full h-full"></canvas>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let chartInstance = null;
let canvasId = 'chart-6a48fd0ecf4dc';
function renderChart(labels, data) {
let canvas = document.getElementById(canvasId);
if (!canvas) return;
let ctx = canvas.getContext('2d');
if (chartInstance) chartInstance.destroy();
chartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Jumlah Survei per Instansi',
data: data,
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
renderChart(["DPMPTSP","Badan Pendapatan Daerah","Dinas Kependudukan dan Pencatatan Sipil","Dinas Komunikasi dan Informatika","BALITBANGDA","Unit Pelayanan Barang dan Jasa","Dinas Kesehatan","PDAM Lematang Enim","Samsat","Bank Sumsel Babel","Kadinda","ATR BPR","BPJS Kesehatan","Dinas PUPR","Imigrasi","Kejaksaan Negeri","Kementerian Agama","Pengadilan Agama","Pengadilan Negeri","Dinas Lingkungan Hidup","Dinas Pendidikan dan Kebudayaan","BPR Muara Enim","PT. Taspen","BPJS Ketenagakerjaan","KP2KP","PT. Mandiri Taspen","BAZNAS","POLRES MUARA ENIM","DISNAKERTRANS","DPPKB","DPPPA"], [12,0,13,0,0,0,0,5,2,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0]);
Livewire.on('chartUpdated', ({ labels, data }) => {
renderChart(labels, data);
});
});
</script>
</div>
</div>
</div>
</div>
</div>
<!-- Feature End -->
<footer>
<!-- Footer Start -->
<div class="w-full bg-slate-900 text-light text-white flex items-center justify-center">
<div class="container my-20">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 px-10 lg:px-0">
<div class="flex flex-col mb-5">
<img class="h-14 w-48 mb-4" src="https://skm-dpmptsp.muaraenimkab.go.id/img/dpm_foo.png" alt="Mall Pelayanan Publik Kab. Muara Enim">
<p class="mb-8 text-lg text-white font-bold">Mal Pelayanan Publik</p>
<p class="text-slate-300 mb-4"><svg class="w-6 h-6 text-slate-300 inline dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.427 14.768 17.2 13.542a1.733 1.733 0 0 0-2.45 0l-.613.613a1.732 1.732 0 0 1-2.45 0l-1.838-1.84a1.735 1.735 0 0 1 0-2.452l.612-.613a1.735 1.735 0 0 0 0-2.452L9.237 5.572a1.6 1.6 0 0 0-2.45 0c-3.223 3.2-1.702 6.896 1.519 10.117 3.22 3.221 6.914 4.745 10.12 1.535a1.601 1.601 0 0 0 0-2.456Z" />
</svg>
(Kantor) 0734 423982</p>
<p class="text-slate-300 mb-4"><svg class="w-6 h-6 text-slate-300 inline dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.427 14.768 17.2 13.542a1.733 1.733 0 0 0-2.45 0l-.613.613a1.732 1.732 0 0 1-2.45 0l-1.838-1.84a1.735 1.735 0 0 1 0-2.452l.612-.613a1.735 1.735 0 0 0 0-2.452L9.237 5.572a1.6 1.6 0 0 0-2.45 0c-3.223 3.2-1.702 6.896 1.519 10.117 3.22 3.221 6.914 4.745 10.12 1.535a1.601 1.601 0 0 0 0-2.456Z" />
</svg>
(Pengaduan) 0821 8148 7928</p>
<p class="text-slate-300"><svg class="w-6 h-6 text-slate-300 inline dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m3.5 5.5 7.893 6.036a1 1 0 0 0 1.214 0L20.5 5.5M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z" />
</svg>
dpmptsp@muaraenimkab.go.id</p>
</div>
<div class="flex flex-col justify-start items-start">
<h3 class="text-lg font-bold mb-4 mx-3">MPP Kab Muara Enim</h3>
<a class="btn btn-link text-slate-300 transition-transform duration-300 hover:scale-110 hover:text-violet-400" href="/">Beranda</a>
<a class="btn btn-link text-slate-300 transition-transform duration-300 hover:scale-110 hover:text-violet-400" href="https://skm-dpmptsp.muaraenimkab.go.id/survey">SKM</a>
</div>
<div class="flex flex-col justify-start items-start">
<h3 class="text-lg font-bold mb-4 mx-3">Sistem Terkait</h3>
<a class="btn btn-link text-slate-300 transition-transform duration-300 hover:scale-110 hover:text-violet-400" target="_blank" href="https://dpmptsp.muaraenimkab.go.id/">Website DPMPTSP</a>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<div class="w-full bg-slate-900 flex items-center justify-center">
<hr class="w-4/5 mx-auto border-slate-400">
</div>
<!-- Copyright Start -->
<div class="w-full bg-slate-900 text-light text-white flex items-center justify-center">
<div class="container my-10">
<div class="grid grid-cols-2 items-center px-10 lg:px-0 justify-center">
<div class="text-start mb-3">
© <a href="https://dpmptsp.muaraenimkab.go.id">DPMPTSP Kab. Muara Enim</a> 2024
</div>
<div class="">
<div class="flex justify-end">
<a class="btn btn-square btn-outline-light me-2 btn-social hover:bg-indigo-500" target="_blank"
href="https://www.instagram.com/dpmptsp_muaraenim/"><svg class="w-6 h-6 text-gray-800 hover:text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="M3 8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8Zm5-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H8Zm7.597 2.214a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2h-.01a1 1 0 0 1-1-1ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</footer><!-- Copyright End --> </div>
</main>
</div>
<script src="https://skm-dpmptsp.muaraenimkab.go.id/vendor/livewire/livewire.min.js?id=6b3709b1" data-csrf="G2oyK94lXTAvYe7fWhfxUeX2MQFsnS0kDCDsZoyk" data-module-url="https://skm-dpmptsp.muaraenimkab.go.id/livewire-8bdb8823" data-update-uri="https://skm-dpmptsp.muaraenimkab.go.id/livewire-8bdb8823/update" data-navigate-once="true"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>