banksampah
/
bps-rw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: add menu Realisasi Terhadap Target

main-dlh
Yuri Dimas 2025-11-28 14:49:30 +07:00
parent 9537053cff
commit 0fc78b8d4c
No known key found for this signature in database
GPG Key ID: 9FD7E44BC294C68C
4 changed files with 301 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
Controllers/RealisasiTerhadapTargetController.cs 100644
View File

@ -0,0 +1,70 @@
using Microsoft.AspNetCore.Mvc;
namespace BpsRwApp.Controllers
{
[Route("[controller]/[action]")]
public class RealisasiTerhadapTargetController : AppControllerBase
{
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult Table()
{
var data = new[]
{
new {
wilayah = "Jakarta Pusat",
konsisten = 787,
tidakKonsisten = 2159,
target = 1230,
realisasi = -443
},
new {
wilayah = "Jakarta Utara",
konsisten = 6462,
tidakKonsisten = 11148,
target = 4470,
realisasi = 1992
},
new {
wilayah = "Jakarta Barat",
konsisten = 387,
tidakKonsisten = 1718,
target = 1270,
realisasi = -883
},
new {
wilayah = "Jakarta Selatan",
konsisten = 132,
tidakKonsisten = 1769,
target = 1150,
realisasi = -418
},
new {
wilayah = "Jakarta Timur",
konsisten = 1378,
tidakKonsisten = 3853,
target = 1800,
realisasi = -422
},
new {
wilayah = "Kepulauan Seribu",
konsisten = 170,
tidakKonsisten = 838,
target = 240,
realisasi = -70
}
};
var response = new
{
data = data
};
return Json(response);
}
}
}

172
Views/RealisasiTerhadapTarget/Index.cshtml 100644
View File

@ -0,0 +1,172 @@
@{
ViewData["Title"] = "Realisasi Terhadap Target";
}
<div class="breadcrumbs text-sm">
<ul>
<li class="text-gray-500"><a>Laporan</a></li>
<li>Realisasi Terhadap Target</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div class="prose">
<h3 class="mb-2">Realisasi Terhadap Target</h3>
</div>
<div class="justify-self-end lg:self-center">
<button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
<span class="icon icon-fill me-2">filter_list</span>
Filter
</button>
</div>
</div>
<div class="h-8"></div>
<div class="card bg-white shadow-sm">
<div class="card-body p-0">
<table class="table-zebra table" id="example">
<thead>
<tr>
<th>No</th>
<th>Wilayah</th>
<th>Rumah Memilah Konsisten</th>
<th>Rumah Memilah Tidak Konsisten</th>
<th>Target Bulanan Pertumbuhan Rumah Memilah</th>
<th>Realisasi terhadap Target</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr class="font-bold">
<td colspan="2">Total</td>
<td id="total-konsisten"></td>
<td id="total-tidak-konsisten"></td>
<td id="total-target"></td>
<td id="total-realisasi" class="p-0"></td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- Filter Modal -->
<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
<div class="modal-box w-full sm:max-w-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold">Filter</h3>
<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick="modal_filter.close()">✕</button>
</div>
<form action="#" method="get">
<fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Tahun</legend>
<select class="select w-full" name="tahun">
<option disabled>Pilih Tahun</option>
<option selected>2025</option>
<option>2024</option>
<option>2023</option>
</select>
</fieldset>
<div class="grid grid-cols-2 gap-4">
<fieldset class="fieldset">
<legend class="fieldset-legend">Bulan Awal</legend>
<input type="month" class="input w-full" name="bulanAwal" placeholder="Pilih bulan">
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Bulan Akhir</legend>
<input type="month" class="input w-full" name="bulanAkhir" placeholder="Pilih bulan">
</fieldset>
</div>
<div class="modal-action">
<button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
<button type="submit" class="btn btn-neutral">Terapkan Filter</button>
</div>
</form>
</div>
</dialog>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script type="text/javascript">
var table;
const parseNumber = (value) => {
if (value === null || value === undefined) return 0;
if (typeof value === 'string') {
return Number(value.replace(/\./g, '').replace(',', '.')) || 0;
}
return Number(value) || 0;
};
const formatNumber = (value) => parseNumber(value).toLocaleString('id-ID');
const applyRealisasiStyle = (target, value) => {
const $target = $(target);
const numericValue = parseNumber(value);
const isPositive = numericValue >= 0;
const formatted = numericValue.toLocaleString('id-ID');
$target
.removeClass('bg-green-100 text-green-800 bg-red-100 text-red-800 font-semibold')
.addClass(isPositive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800')
.addClass('font-semibold')
.text(formatted);
};
$(document).ready(function () {
table = new DataTable('#example', {
ajax: '@Url.Action("Table", "RealisasiTerhadapTarget")',
scrollX: true,
autoWidth: false,
paging: true,
footerCallback: function (row, data, start, end, display) {
var api = this.api();
const sumColumn = (index) => api.column(index).data().reduce((total, value) => total + parseNumber(value), 0);
var totalKonsisten = sumColumn(2);
var totalTidakKonsisten = sumColumn(3);
var totalTarget = sumColumn(4);
var totalRealisasi = sumColumn(5);
$('#total-konsisten').html(formatNumber(totalKonsisten));
$('#total-tidak-konsisten').html(formatNumber(totalTidakKonsisten));
$('#total-target').html(formatNumber(totalTarget));
applyRealisasiStyle('#total-realisasi', totalRealisasi);
},
columns: [
{ data: null, render: (d, t, r, m) => m.row + 1 },
{ data: 'wilayah' },
{
data: 'konsisten',
render: (data) => formatNumber(data)
},
{
data: 'tidakKonsisten',
render: (data) => formatNumber(data)
},
{
data: 'target',
render: (data) => formatNumber(data)
},
{
data: 'realisasi',
render: (data) => formatNumber(data)
}
],
columnDefs: [
{
targets: 5,
createdCell: function (td, cellData) {
applyRealisasiStyle(td, cellData);
}
}
]
});
});
</script>

71
Views/Shared/Layouts/App/_Sidebar.cshtml
View File

@ -1,7 +1,8 @@
<label class="drawer-overlay" for="my-drawer-2" aria-label="close sidebar"></label>
<aside class="bg-base-100 min-h-screen border-e border-gray-200">
<div class="navbar bg-profiling-500 sticky top-0 hidden items-center justify-center gap-2 border-b border-gray-200 bg-white px-4 py-2 font-bold lg:z-50 lg:flex">
<div
class="navbar bg-profiling-500 sticky top-0 hidden items-center justify-center gap-2 border-b border-gray-200 bg-white px-4 py-2 font-bold lg:z-50 lg:flex">
<img src="/images/logo.png" alt="Logo" width="48" />
<span>BPS RW</span>
</div>
@ -17,7 +18,8 @@
</a>
</li>
<li>
<a asp-controller="DashboardRw" asp-action="Index" class="@(controller == "DashboardRw" ? "menu-active" : "")">
<a asp-controller="DashboardRw" asp-action="Index"
class="@(controller == "DashboardRw" ? "menu-active" : "")">
<span class="icon icon-fill">analytics</span>
Dashboard (RW)
</a>
@ -33,13 +35,15 @@
<summary>DATA SUDIN</summary>
<ul>
<li>
<a asp-controller="RumahMemilah" asp-action="Index" class="@(controller == "RumahMemilah" ? "menu-active" : "")">
<a asp-controller="RumahMemilah" asp-action="Index"
class="@(controller == "RumahMemilah" ? "menu-active" : "")">
<span class="icon icon-fill">house</span>
Rumah Memilah
</a>
</li>
<li>
<a asp-controller="DataSudinChecklistHarian" asp-action="Index" class="@(controller == "DataSudinChecklistHarian" ? "menu-active" : "")">
<a asp-controller="DataSudinChecklistHarian" asp-action="Index"
class="@(controller == "DataSudinChecklistHarian" ? "menu-active" : "")">
<span class="icon icon-fill">playlist_add_check</span>
Checklist Harian
</a>
@ -53,13 +57,15 @@
<summary>DATA KECAMATAN</summary>
<ul>
<li>
<a asp-controller="DataKecamatanRumahMemilah" asp-action="Index" class="@(controller == "DataKecamatanRumahMemilah" ? "menu-active" : "")">
<a asp-controller="DataKecamatanRumahMemilah" asp-action="Index"
class="@(controller == "DataKecamatanRumahMemilah" ? "menu-active" : "")">
<span class="icon icon-fill">house</span>
Rumah Memilah
</a>
</li>
<li>
<a asp-controller="DataKecamatanChecklistHarian" asp-action="Index" class="@(controller == "DataKecamatanChecklistHarian" ? "menu-active" : "")">
<a asp-controller="DataKecamatanChecklistHarian" asp-action="Index"
class="@(controller == "DataKecamatanChecklistHarian" ? "menu-active" : "")">
<span class="icon icon-fill">playlist_add_check</span>
Checklist Harian
</a>
@ -72,19 +78,22 @@
<summary>DATA RUMAH</summary>
<ul>
<li>
<a asp-controller="DataRumahRw" asp-action="Index" class="@(controller == "DataRumahRw" ? "menu-active" : "")">
<a asp-controller="DataRumahRw" asp-action="Index"
class="@(controller == "DataRumahRw" ? "menu-active" : "")">
<span class="icon icon-fill">house</span>
Rumah (RW)
</a>
</li>
<li>
<a asp-controller="DataRumahRumah" asp-action="Index" class="@(controller == "DataRumahRumah" ? "menu-active" : "")">
<a asp-controller="DataRumahRumah" asp-action="Index"
class="@(controller == "DataRumahRumah" ? "menu-active" : "")">
<span class="icon icon-fill">house</span>
Rumah
</a>
</li>
<li>
<a asp-controller="DataRumahPotensiRumah" asp-action="Index" class="@(controller == "DataRumahPotensiRumah" ? "menu-active" : "")">
<a asp-controller="DataRumahPotensiRumah" asp-action="Index"
class="@(controller == "DataRumahPotensiRumah" ? "menu-active" : "")">
<span class="icon icon-fill">playlist_add_check</span>
Potensi Rumah
</a>
@ -94,14 +103,16 @@
</li>
<li>
<a asp-controller="DataPendampingRw" asp-action="Index" class="@(controller == "DataPendampingRw" ? "menu-active" : "")">
<a asp-controller="DataPendampingRw" asp-action="Index"
class="@(controller == "DataPendampingRw" ? "menu-active" : "")">
<span class="icon icon-fill">list</span>
Data Pendamping RW
</a>
</li>
<li>
<a asp-controller="DataBeratSampah" asp-action="Index" class="@(controller == "DataBeratSampah" ? "menu-active" : "")">
<a asp-controller="DataBeratSampah" asp-action="Index"
class="@(controller == "DataBeratSampah" ? "menu-active" : "")">
<span class="icon icon-fill">list</span>
Data Berat Sampah
</a>
@ -112,13 +123,15 @@
<summary>DATA VERIFIKASI</summary>
<ul>
<li>
<a asp-controller="LaporanRw" asp-action="Index" class="@(controller == "LaporanRw" ? "menu-active" : "")">
<a asp-controller="LaporanRw" asp-action="Index"
class="@(controller == "LaporanRw" ? "menu-active" : "")">
<span class="icon icon-fill">house</span>
Laporan RW
</a>
</li>
<li>
<a asp-controller="DataVerifikasiChecklistHarian" asp-action="Index" class="@(controller == "DataVerifikasiChecklistHarian" ? "menu-active" : "")">
<a asp-controller="DataVerifikasiChecklistHarian" asp-action="Index"
class="@(controller == "DataVerifikasiChecklistHarian" ? "menu-active" : "")">
<span class="icon icon-fill">playlist_add_check</span>
Checklist Harian
</a>
@ -137,15 +150,15 @@
<summary>INPUT</summary>
<ul>
<li>
<a asp-controller="LaporanRwRw"
asp-action="Index"
<a asp-controller="LaporanRwRw" asp-action="Index"
class="@(controller == "LaporanRwRw" ? "menu-active" : "")">
<span class="icon icon-fill">house</span>
Laporan RW (RW)
</a>
</li>
<li>
<a asp-controller="ChecklistHarian" asp-action="Index" class="@(controller == "ChecklistHarian" ? "menu-active" : "")">
<a asp-controller="ChecklistHarian" asp-action="Index"
class="@(controller == "ChecklistHarian" ? "menu-active" : "")">
<span class="icon icon-fill">playlist_add_check</span>
Checklist Harian (RW)
</a>
@ -154,17 +167,19 @@
</details>
</li>
<li>
<details @(new[] { "RincianTargetRumahMemilah", "VolumeTimbulanSampah", "LaporanCapaian" }.Contains(controller) ? "open" : "")>
<details @(new[] { "RincianTargetRumahMemilah", "VolumeTimbulanSampah", "LaporanCapaian", "RealisasiTerhadapTarget" }.Contains(controller) ? "open" : "")>
<summary>LAPORAN</summary>
<ul>
<li>
<a asp-controller="RincianTargetRumahMemilah" asp-action="Index" class="@(controller == "RincianTargetRumahMemilah" ? "menu-active" : "")">
<a asp-controller="RincianTargetRumahMemilah" asp-action="Index"
class="@(controller == "RincianTargetRumahMemilah" ? "menu-active" : "")">
<span class="icon icon-fill">flag</span>
Rincian Target Rumah Memilah
</a>
</li>
<li>
<a asp-controller="VolumeTimbulanSampah" asp-action="Index" class="@(controller == "VolumeTimbulanSampah" ? "menu-active" : "")">
<a asp-controller="VolumeTimbulanSampah" asp-action="Index"
class="@(controller == "VolumeTimbulanSampah" ? "menu-active" : "")">
<span class="icon icon-fill">delete</span>
Volume Timbulan Sampah
</a>
@ -175,6 +190,12 @@
<span class="icon icon-fill">flag</span>
Laporan Capaian BPS RW DKI Jakarta
</a>
<li>
<a asp-controller="RealisasiTerhadapTarget" asp-action="Index"
class="@(controller == "RealisasiTerhadapTarget" ? "menu-active" : "")">
<span class="icon icon-fill">target</span>
Realisasi Terhadap Target
</a>
</li>
</ul>
</details>
@ -184,28 +205,32 @@
<summary>DATA MASTER</summary>
<ul>
<li>
<a asp-controller="DataRt" asp-action="Index" class="@(controller == "DataRt" ? "menu-active" : "")">
<a asp-controller="DataRt" asp-action="Index"
class="@(controller == "DataRt" ? "menu-active" : "")">
<span class="icon icon-fill">list</span>
Data RT
</a>
</li>
<li>
<a asp-controller="DataRw" asp-action="Index" class="@(controller == "DataRw" ? "menu-active" : "")">
<a asp-controller="DataRw" asp-action="Index"
class="@(controller == "DataRw" ? "menu-active" : "")">
<span class="icon icon-fill">list</span>
Data RW
</a>
</li>
<li>
<a asp-controller="DataKecamatan" asp-action="Index" class="@(controller == "DataKecamatan" ? "menu-active" : "")">
<a asp-controller="DataKecamatan" asp-action="Index"
class="@(controller == "DataKecamatan" ? "menu-active" : "")">
<span class="icon icon-fill">list</span>
Data Kecamatan
</a>
</li>
<li>
<a asp-controller="DataBankSampah" asp-action="Index" class="@(controller == "DataBankSampah" ? "menu-active" : "")">
<a asp-controller="DataBankSampah" asp-action="Index"
class="@(controller == "DataBankSampah" ? "menu-active" : "")">
<span class="icon icon-fill">list</span>
Data Bank Sampah
</a>

4
wwwroot/css/input.css
View File

@ -180,3 +180,7 @@
div.dt-scroll-body thead {
visibility: collapse !important;
}
div.dt-scroll-body tfoot {
visibility: collapse !important;
}