feat: create detail page

Controllers/LaporanRwRwController.cs

@@ -25,61 +25,61 @@ namespace BpsRwApp.Controllers
                     bulan = "Januari",
                     rumah_aktif_memilah = 104,
                     status = "<div class=\"badge badge-error badge-soft rounded-full\">Belum Diverifikasi</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
                 new {
                     bulan = "Februari",
                     rumah_aktif_memilah = 67,
                     status = "<div class=\"badge badge-error badge-soft rounded-full\">Belum Diverifikasi</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
                 new {
                     bulan = "Maret",
                     rumah_aktif_memilah = 110,
                     status = "<div class=\"badge badge-error badge-soft rounded-full\">Belum Diverifikasi</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
                 new {
                     bulan = "April",
                     rumah_aktif_memilah = 88,
                     status = "<div class=\"badge badge-success badge-soft rounded-full\">Verifikasi Sudin</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
                 new {
                     bulan = "Mei",
                     rumah_aktif_memilah = 90,
                     status = "<div class=\"badge badge-success badge-soft rounded-full\">Verifikasi Sudin</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
                 new {
                     bulan = "Juni",
                     rumah_aktif_memilah = 72,
                     status = "<div class=\"badge badge-success badge-soft rounded-full\">Verifikasi Sudin</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
                 new {
                     bulan = "Juli",
                     rumah_aktif_memilah = 81,
                     status = "<div class=\"badge badge-success badge-soft rounded-full\">Verifikasi Sudin</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
                 new {
                     bulan = "Agustus",
                     rumah_aktif_memilah = 65,
                     status = "<div class=\"badge badge-success badge-soft rounded-full\">Verifikasi Sudin</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
                 new {
                     bulan = "September",
                     rumah_aktif_memilah = 90,
                     status = "<div class=\"badge badge-success badge-soft rounded-full\">Verifikasi Sudin</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
                 new {
                     bulan = "Oktober",
                     rumah_aktif_memilah = 72,
                     status = "<div class=\"badge badge-success badge-soft rounded-full\">Verifikasi Sudin</div>",
-                    gambar = "<button class='btn bg-white rounded-full btn-sm'>Lihat Gambar</button>"
+                    gambar = "<a href='/LaporanRwRw/Detail' class='btn bg-white rounded-full btn-sm'>Lihat Gambar</a>"
                 },
             };
 
@@ -90,5 +90,10 @@ namespace BpsRwApp.Controllers
 
             return Json(response);
         }
+        [HttpGet]
+        public IActionResult Detail()
+        {
+            return View();
+        }
     }
 }

Views/LaporanRwRw/Detail.cshtml

@@ -0,0 +1,72 @@
+@{
+    ViewData["Title"] = "Detail Laporan RW";
+}
+
+<div class="breadcrumbs text-sm mb-4">
+    <ul>
+        <li class="text-gray-500"><a>Laporan RW</a></li>
+        <li>Detail</li>
+    </ul>
+</div>
+
+<h3 class="text-lg font-bold mb-4">Detail Laporan RW</h3>
+
+<!-- CARD 1 -->
+<div class="card bg-white shadow-sm mb-6">
+    <div class="card-body grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-6 p-6 items-start">
+
+        <img 
+            src="/images/buangsampah1.jpg" 
+            alt="Dokumentasi 1"
+            class="rounded-lg w-full h-80 object-cover">
+
+        <div class="flex flex-col gap-4">
+            <h4 class="font-semibold text-xl">Dokumentasi Kegiatan #1</h4>
+
+            <div>
+                <p class="text-xs text-gray-500 mb-1">Keterangan Kegiatan</p>
+                <p class="text-sm text-gray-800 leading-relaxed">
+                    Massa commodo urna pretium sed integer facilisis vel massa. Quam ligula at nec purus cursus ipsum enim rhoncus nec. Magna viverra viverra ante nec nibh. Faucibus eu pellentesque tellus feugiat sed pretium. Dolor vulputate et et sed ipsum eros nec quis nulla. Mattis gravida faucibus nec amet. Viverra facilisi quam in faucibus consectetur. At vel proin odio semper eget enim nulla ornare venenatis. Sed amet odio sagittis cursus phasellus.
+                </p>
+            </div>
+
+            <div>
+                <p class="text-xs text-gray-500 mb-1">Tanggal Pelaksanaan Kegiatan</p>
+                <p class="text-sm text-gray-800 mb-3">21 Oktober 2025</p>
+                
+                <p class="text-xs text-gray-500 mb-1">Pelaksana Kegiatan</p>
+                <p class="text-sm text-gray-800">Ahmad Khadafi</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- CARD 2 -->
+<div class="card bg-white shadow-sm mb-6">
+    <div class="card-body grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-6 p-6 items-start">
+
+        <img 
+            src="/images/buangsampah2.jpg" 
+            alt="Dokumentasi 2"
+            class="rounded-lg w-full h-80 object-cover">
+
+        <div class="flex flex-col gap-4">
+            <h4 class="font-semibold text-xl">Dokumentasi Kegiatan #2</h4>
+
+            <div>
+                <p class="text-xs text-gray-500 mb-1">Keterangan Kegiatan</p>
+                <p class="text-sm text-gray-800 leading-relaxed">
+                    Massa commodo urna pretium sed integer facilisis vel massa. Quam ligula at nec purus cursus ipsum enim rhoncus nec. Magna viverra viverra ante nec nibh. Faucibus eu pellentesque tellus feugiat sed pretium. Dolor vulputate et et sed ipsum eros nec quis nulla. Mattis gravida faucibus nec amet. Viverra facilisi quam in faucibus consectetur. At vel proin odio semper eget enim nulla ornare venenatis. Sed amet odio sagittis cursus phasellus. 
+                </p>
+            </div>
+
+            <div>
+                <p class="text-xs text-gray-500 mb-1">Tanggal Pelaksanaan Kegiatan</p>
+                <p class="text-sm text-gray-800 mb-3">21 Oktober 2025</p>
+                
+                <p class="text-xs text-gray-500 mb-1">Pelaksana Kegiatan</p>
+                <p class="text-sm text-gray-800">Ahmad Khadafi</p>
+            </div>
+        </div>
+    </div>
+</div>