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

feat: make responsive - laporan capaian rw jakarta page

main-dlh
shola 2025-11-28 16:33:55 +07:00
parent 4a6444e2c5
commit 115b43e32f
No known key found for this signature in database
GPG Key ID: FA9358FFDCCD05D9
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Views/LaporanCapaian/Index.cshtml
View File

@ -9,32 +9,33 @@
</ul>
</div>
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold">Capaian BPS RW DKI Jakarta</h2>
<!-- Filter Bulan -->
<div class="flex items-center gap-3">
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div class="prose">
<h3 class="mb-2">Capaian BPS RW DKI Jakarta</h3>
</div>
<div class="flex justify-end items-center gap-2">
<span class="whitespace-nowrap text-sm font-medium text-gray-700">Filter Bulan:</span>
<input type="month" id="filterBulan" class="px-4 py-2 border bg-white rounded-md w-[180px] sm:w-[200px]"
min="2000-01" max="@DateTime.Now.ToString("yyyy-MM")" value="@DateTime.Now.ToString("yyyy-MM")" />
</select>
</div>
</div>
<div class="h-6"></div>
<!-- Tingkat Kepatuhan -->
<div class="bg-white rounded-sm shadow p-6">
<h3 class="text-lg font-semibold mb-4">Tingkat Kepatuhan dalam Menjalankan Instruksi Kepala Dinas</h3>
<div class="border border-gray-400 rounded-sm p-4 h-80 grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
<div class="border border-gray-400 rounded-sm p-4 min-h-80 grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
<!-- Pie Chart Total -->
<div class="flex flex-col items-center col-span-1">
<div class="flex flex-col items-center col-span-3 md:col-span-1">
<h4 class="font-medium text-sm text-center" id="titleTotalPjlp">Kepatuhan PJLP Pendamping</h4>
<div class="w-full h-[250px] flex items-center justify-center mt-2">
<canvas id="pieTotal"></canvas>
</div>
</div>
<div class="flex flex-col items-start col-span-2">
<div class="flex flex-col items-start col-span-3 md:col-span-2">
<h4 class="font-medium text-sm text-left">Kepatuhan PJLP Pendamping</h4>
<div class="w-full h-[250px] mt-2">
<canvas id="barWilayah"></canvas>
@ -59,7 +60,7 @@
<h3 class="text-lg font-semibold">Capaian Program Pendampingan BPS RW</h3>
<p class="text-sm text-gray-600 mb-4" id="descPeriodeRumah">Capaian Rumah memilah dalam pelaksanaan instruksi Kepala
Dinas Lingkungan Hidup</p>
<div class="border border-gray-400 rounded-sm p-4 h-80 grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
<div class="border border-gray-400 rounded-sm p-4 min-h-80 grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
<div class="flex flex-col items-center col-span-1 w-full">
<h4 class="font-medium text-sm text-center" id="titleTargetRumah">Total Target Rumah Tangga Memilah</h4>
@ -85,7 +86,8 @@
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<script>
Chart.register(ChartDataLabels);