From 115b43e32f11cd1e4877e7c0e79ece7aef0c010c Mon Sep 17 00:00:00 2001
From: shola <sholahuddin@impstudio.co.id>
Date: Fri, 28 Nov 2025 16:33:55 +0700
Subject: [PATCH] feat: make responsive - laporan capaian rw jakarta page

---
 Views/LaporanCapaian/Index.cshtml | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/Views/LaporanCapaian/Index.cshtml b/Views/LaporanCapaian/Index.cshtml
index bca2fd5..449014f 100644
--- a/Views/LaporanCapaian/Index.cshtml
+++ b/Views/LaporanCapaian/Index.cshtml
@@ -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);