slicing: dashboard satpel
Regiaaaaaa
parent
7c355b317f
commit
87cb975e65
|
|
@ -0,0 +1,38 @@
|
|||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace BpsRwApp.Controllers
|
||||
{
|
||||
[Route("[controller]/[action]")]
|
||||
public class DashboardSatpelController : AppControllerBase
|
||||
{
|
||||
public IActionResult Index()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult Table()
|
||||
{
|
||||
var data = new[]
|
||||
{
|
||||
new { wilayah = "Kelurahan Duren Tiga", totalRumah = 79671, totalRumahMemilah = 62392, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Tanjung Barat", totalRumah = 6948, totalRumahMemilah = 93224, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Panmeran", totalRumah = 8768, totalRumahMemilah = 55985, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Cipinang Melayu", totalRumah = 69517, totalRumahMemilah = 13264, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Koja", totalRumah = 190028, totalRumahMemilah = 53934, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Pulau Bidadari", totalRumah = 98931, totalRumahMemilah = 968, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Kampung Melayu", totalRumah = 45821, totalRumahMemilah = 38456, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Cawang", totalRumah = 67234, totalRumahMemilah = 54187, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Penggilingan", totalRumah = 82145, totalRumahMemilah = 71234, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Cakung Barat", totalRumah = 95672, totalRumahMemilah = 76538, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Jatinegara", totalRumah = 73456, totalRumahMemilah = 58765, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Rawa Bunga", totalRumah = 56789, totalRumahMemilah = 45432, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Bidara Cina", totalRumah = 64321, totalRumahMemilah = 51457, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Kebon Manggis", totalRumah = 78912, totalRumahMemilah = 63129, capaianTarget = 80 },
|
||||
new { wilayah = "Kelurahan Pondok Bambu", totalRumah = 85643, totalRumahMemilah = 68514, capaianTarget = 80 }
|
||||
};
|
||||
|
||||
return Json(new { data });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,370 @@
|
|||
@{
|
||||
ViewData["Title"] = "Dashboard Satpel";
|
||||
}
|
||||
|
||||
<div class="grid grid-cols-1 items-stretch gap-4 lg:grid-cols-12">
|
||||
<!-- Profil RW -->
|
||||
<div class="card card-border h-full bg-white lg:col-span-9">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-between gap-2 lg:flex-row">
|
||||
<h2 class="w-full text-lg font-bold md:w-1/2">Profil Satuan Pelaksana Pancoran</h2>
|
||||
<div class="flex w-full items-center justify-end gap-2 md:w-1/2">
|
||||
<select id="filterPeriod" class="select select-bordered select-sm w-32">
|
||||
<option selected>Tahunan</option>
|
||||
<option>Bulanan</option>
|
||||
<option>Harian</option>
|
||||
</select>
|
||||
<input type="month" id="monthPicker" class="input input-bordered input-sm w-40 hidden" placeholder="Pilih Bulan">
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-2"></div>
|
||||
<div class="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-4">
|
||||
<!-- Stat Jumlah RT -->
|
||||
<div class="stats bg-primary border border-gray-300 text-white">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg text-white">
|
||||
<i class="ph ph-house-simple"></i>
|
||||
<span class="font-semibold">Jumlah RW</span>
|
||||
</div>
|
||||
<div class="stat-value">23</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Jumlah Rumah -->
|
||||
<div class="stats border border-gray-300">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg">
|
||||
<i class="ph ph-house-line"></i>
|
||||
<span class="font-semibold">Jumlah Rumah</span>
|
||||
</div>
|
||||
<div class="stat-value">23,004</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Jumlah Jiwa -->
|
||||
<div class="stats border border-gray-300">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg">
|
||||
<i class="ph ph-users-four"></i>
|
||||
<span class="font-semibold">Jumlah Jiwa (Orang)</span>
|
||||
</div>
|
||||
<div class="stat-value">179,797</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Estimasi Timbulan -->
|
||||
<div class="stats border border-gray-300">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg">
|
||||
<i class="ph ph-trash"></i>
|
||||
<span class="font-semibold">Estimasi Timbulan</span>
|
||||
</div>
|
||||
<div class="stat-value">3,341</div>
|
||||
<div class="stat-desc">Kg/Hari</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card h-full lg:col-span-3">
|
||||
<div class="card-body flex h-full flex-col gap-4 p-0">
|
||||
<!-- Stat Jumlah Rumah Memilah -->
|
||||
<div class="stats flex-1 bg-white">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg">
|
||||
<i class="ph ph-trash"></i>
|
||||
<span class="font-semibold">Jumlah Rumah Memilah</span>
|
||||
</div>
|
||||
<div class="flex items-end gap-3">
|
||||
<div class="stat-value">46</div>
|
||||
<span class="badge badge-soft badge-outline badge-success rounded-full border-2 px-2 py-1 text-sm">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Jumlah Rumah Nasabah -->
|
||||
<div class="stats flex-1 bg-white">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg">
|
||||
<i class="ph ph-trash"></i>
|
||||
<span class="font-semibold">Jumlah Rumah Nasabah</span>
|
||||
</div>
|
||||
<div class="flex items-end gap-3">
|
||||
<div class="stat-value">46</div>
|
||||
<span class="badge badge-soft badge-outline badge-success rounded-full border-2 px-2 py-1 text-sm">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-4"></div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
|
||||
<!-- Card Bank Sampah -->
|
||||
<div class="card bg-white lg:col-span-4 xl:col-span-2">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
Bank Sampah
|
||||
</h2>
|
||||
<div class="flex flex-row items-center justify-between gap-2 rounded p-4">
|
||||
<div class="flex items-center">
|
||||
<div class="badge badge-success badge-xs me-2"></div>
|
||||
Aktif
|
||||
</div>
|
||||
<span class="text-primary font-bold">35</span>
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-between gap-2 rounded p-4">
|
||||
<div class="flex items-center">
|
||||
<div class="badge badge-error badge-xs me-2"></div>
|
||||
Tidak Aktif
|
||||
</div>
|
||||
<span class="text-primary font-bold">35</span>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-center">
|
||||
<a href="@Url.Action("Index", "DataBankSampah")" class="btn btn-link text-primary no-underline"> Selengkapnya</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card Profil Satuan Pelaksana Pancoran -->
|
||||
<div class="card bg-white lg:col-span-4 xl:col-span-7">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center xl:flex-row">
|
||||
<h2 class="w-full text-lg font-bold xl:w-1/2">Volume Jenis Sampah</h2>
|
||||
<div class="flex w-full flex-col justify-end gap-4 xl:w-1/2 xl:flex-row">
|
||||
<a href="@Url.Action("Index", "DataBeratSampah")" class="btn btn-link text-primary no-underline"> Selengkapnya</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-2"></div>
|
||||
<div class="grid grid-cols-1 gap-2 xl:grid-cols-4">
|
||||
<!-- Stat Organik -->
|
||||
<div class="stats bg-primary border border-gray-300 text-white">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg text-white">
|
||||
<i class="ph ph-leaf"></i>
|
||||
<span class="font-semibold">Organik</span>
|
||||
</div>
|
||||
<div class="stat-value">46</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Anorganik -->
|
||||
<div class="stats border border-gray-300">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg">
|
||||
<i class="ph ph-cylinder"></i>
|
||||
<span class="font-semibold">Anorganik</span>
|
||||
</div>
|
||||
<div class="stat-value">179,797</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat B3 -->
|
||||
<div class="stats border border-gray-300">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg">
|
||||
<i class="ph ph-car-battery"></i>
|
||||
<span class="font-semibold">B3</span>
|
||||
</div>
|
||||
<div class="stat-value">3,341</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Total -->
|
||||
<div class="stats border border-gray-300">
|
||||
<div class="stat">
|
||||
<div class="stat-title items-center text-lg">
|
||||
<i class="ph ph-arrows-counter-clockwise"></i>
|
||||
<span class="font-semibold">Total</span>
|
||||
</div>
|
||||
<div class="stat-value">23,004</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card Neraca Sampah -->
|
||||
<div class="card bg-white lg:col-span-4 xl:col-span-3">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
Neraca Sampah
|
||||
</h2>
|
||||
<span class="text-gray-500">Estimasi Timbulan - Pengurangan Sampah</span>
|
||||
<span class="text-primary font-semibold">73.112 - 0</span>
|
||||
<div class="bg-primary flex flex-row items-center justify-between gap-2 rounded p-4 text-white">
|
||||
<span>Neraca Sampah</span>
|
||||
<span class="font-bold">73.112</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-4"></div>
|
||||
|
||||
<div class="card bg-white">
|
||||
<div class="card-body h-80 w-full">
|
||||
<div class="flex flex-col items-center justify-between lg:flex-row">
|
||||
<h2 class="w-full text-lg font-bold md:w-1/2">Grafik Rumah Aktif Memilah</h2>
|
||||
</div>
|
||||
<canvas id="acquisitions" class="h-full w-full"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-4"></div>
|
||||
|
||||
<!-- Table Laporan Rumah Memilah -->
|
||||
<div class="card bg-white shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col items-center justify-between gap-4 lg:flex-row">
|
||||
<h2 class="text-lg font-bold">Laporan Rumah Memilah</h2>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<input type="month" id="filterBulanTable" class="px-4 py-2 border bg-white rounded-full"
|
||||
min="2020-01" max="@DateTime.Now.ToString("yyyy-MM")" value="@DateTime.Now.ToString("yyyy-MM")" />
|
||||
<a class="btn btn-primary text-white rounded-full" href="#">
|
||||
<span class="icon icon-fill me-2">download</span>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-zebra w-full" id="tableLaporanRumahMemilah">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-[5%]">No</th>
|
||||
<th class="w-[35%]">Wilayah</th>
|
||||
<th class="w-[20%]">Total Rumah</th>
|
||||
<th class="w-[20%]">Total Rumah Memilah</th>
|
||||
<th class="w-[20%]">Capaian Target (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/lib/chart.js/chart.umd.js"></script>
|
||||
<script src="/lib/jquery/jquery-3.7.1.js"></script>
|
||||
<script src="/lib/datatables/dataTables.js"></script>
|
||||
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// Filter period handler
|
||||
const filterPeriod = document.getElementById('filterPeriod');
|
||||
const monthPicker = document.getElementById('monthPicker');
|
||||
const now = new Date();
|
||||
const currentMonth = now.toISOString().slice(0, 7);
|
||||
monthPicker.value = currentMonth;
|
||||
|
||||
filterPeriod.addEventListener('change', function() {
|
||||
if (this.value === 'Bulanan') {
|
||||
monthPicker.classList.remove('hidden');
|
||||
monthPicker.value = currentMonth;
|
||||
} else {
|
||||
monthPicker.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
monthPicker.addEventListener('change', function() {
|
||||
console.log('Selected month:', this.value);
|
||||
});
|
||||
|
||||
const labels = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
|
||||
|
||||
// contoh data variasi
|
||||
const greenData = [10, 15, 12, 20, 18, 25, 23, 28, 26, 30, 32, 35];
|
||||
const redData = [8, 12, 10, 15, 14, 18, 17, 22, 20, 25, 24, 28];
|
||||
|
||||
new Chart(document.getElementById("acquisitions"), {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Data Hijau",
|
||||
data: greenData,
|
||||
borderColor: "oklch(72.3% 0.219 149.579)",
|
||||
backgroundColor: "oklch(92.5% 0.084 155.995 / 0.25)",
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
borderWidth: 2,
|
||||
pointRadius: 3,
|
||||
},
|
||||
{
|
||||
label: "Data Merah",
|
||||
data: redData,
|
||||
borderColor: "oklch(63.7% 0.237 25.331)",
|
||||
backgroundColor: "oklch(63.7% 0.237 25.331 / 0.25)",
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
borderWidth: 2,
|
||||
pointRadius: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: {
|
||||
bottom: 32
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
display: true,
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
pointStyle: "circle",
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { display: false }
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: { color: "rgba(0,0,0,0.05)" }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// DataTable initialization
|
||||
$(document).ready(function () {
|
||||
const table = new DataTable('#tableLaporanRumahMemilah', {
|
||||
ajax: '@Url.Action("Table", "DashboardSatpel")',
|
||||
scrollX: true,
|
||||
autoWidth: false,
|
||||
initComplete: function () {
|
||||
$('div.dt-scroll-body thead').css('visibility', 'collapse');
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
data: null,
|
||||
render: (d, t, r, m) => m.row + 1,
|
||||
orderable: false,
|
||||
searchable: false
|
||||
},
|
||||
{ data: 'wilayah' },
|
||||
{
|
||||
data: 'totalRumah',
|
||||
render: data => data.toLocaleString("id-ID")
|
||||
},
|
||||
{
|
||||
data: 'totalRumahMemilah',
|
||||
render: data => data.toLocaleString("id-ID")
|
||||
},
|
||||
{ data: 'capaianTarget' }
|
||||
]
|
||||
});
|
||||
|
||||
// Filter bulan handler
|
||||
$('#filterBulanTable').on('change', function() {
|
||||
const bulan = $(this).val();
|
||||
console.log('Filter bulan:', bulan);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -24,6 +24,13 @@
|
|||
Dashboard (RW)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a asp-controller="DashboardSatpel" asp-action="Index"
|
||||
class="@(controller == "DashboardSatpel" ? "menu-active" : "")">
|
||||
<span class="icon icon-fill">analytics</span>
|
||||
Dashboard (Satpel)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a asp-controller="ProfilRw" asp-action="Index" class="@(controller == "ProfilRw" ? "menu-active" : "")">
|
||||
<span class="material-symbols-outlined text-[20px]">account_box</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue