feat: create a detail page for verified RW reports
Regiaaaaaa
parent
355f2eac6c
commit
61702dd8ef
|
|
@ -18,27 +18,33 @@ namespace BpsRwApp.Controllers
|
|||
var data = Enumerable.Range(0, 100)
|
||||
.Select(index =>
|
||||
{
|
||||
var tanggal = ControllerSampleData.FormatTanggal(startDate.AddDays(index));
|
||||
var tanggal = startDate.AddDays(index);
|
||||
var tanggalStr = ControllerSampleData.FormatTanggal(tanggal);
|
||||
|
||||
var mudahTerurai = 15 + index % 10 + (index / 5);
|
||||
var materialDaurUlang = 8 + (index % 6);
|
||||
var b3 = 1 + index % 3;
|
||||
var residu = 3 + index % 4;
|
||||
|
||||
var sudahDiverifikasi = index % 3 != 0;
|
||||
var statusBadge = sudahDiverifikasi ?
|
||||
"<div class=\"badge badge-success badge-soft rounded-full\">Verifikasi</div>" :
|
||||
"<div class=\"badge badge-error badge-soft rounded-full\">Belum Verifikasi</div>";
|
||||
|
||||
var statusBadge = sudahDiverifikasi
|
||||
? "<div class='badge badge-success badge-soft rounded-full'>Verifikasi</div>"
|
||||
: "<div class='badge badge-error badge-soft rounded-full'>Belum Verifikasi</div>";
|
||||
|
||||
var aksi = sudahDiverifikasi
|
||||
? $"<a href='/ChecklistHarian/Detail?tanggal={tanggal:yyyy-MM-dd}' class='btn bg-white rounded-full btn-sm'>Detail</a>"
|
||||
: $"<a href='#' onclick='return false;' class='btn bg-white rounded-full btn-sm'>Detail</a>";
|
||||
|
||||
return new
|
||||
{
|
||||
tanggal,
|
||||
tanggal = tanggalStr,
|
||||
mudah_terurai = mudahTerurai,
|
||||
material_daur_ulang = materialDaurUlang,
|
||||
b3,
|
||||
residu,
|
||||
status = statusBadge,
|
||||
aksi = "<div class=\"flex gap-2\">" +
|
||||
"<a href=\"#\" class=\"btn bg-white rounded-full btn-sm\">Detail</a>" +
|
||||
"</div>"
|
||||
aksi = aksi
|
||||
};
|
||||
})
|
||||
.ToArray();
|
||||
|
|
@ -51,5 +57,34 @@ namespace BpsRwApp.Controllers
|
|||
|
||||
return Json(new { data });
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult Detail(string tanggal)
|
||||
{
|
||||
if (string.IsNullOrEmpty(tanggal))
|
||||
return RedirectToAction("Index");
|
||||
|
||||
ViewBag.Tanggal = tanggal;
|
||||
return View();
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult DetailTable(string tanggal)
|
||||
{
|
||||
var data = Enumerable.Range(1, 10)
|
||||
.Select(i => new
|
||||
{
|
||||
no = i,
|
||||
alamat_rumah = $"Jalan Buah No. {10 + i}",
|
||||
rw = (3 + i).ToString("D2"),
|
||||
mudah_terurai = true,
|
||||
material_daur = true,
|
||||
b3 = true,
|
||||
residu = true
|
||||
})
|
||||
.ToList();
|
||||
|
||||
return Json(new { data });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,108 @@
|
|||
@{
|
||||
ViewData["Title"] = "Detail Checklist Harian";
|
||||
var tanggal = DateTime.Parse(ViewBag.Tanggal);
|
||||
var tanggalDisplay = tanggal.ToString("dddd, dd MMMM yyyy", new System.Globalization.CultureInfo("id-ID"));
|
||||
}
|
||||
|
||||
<div class="flex items-center gap-2 text-sm mb-6">
|
||||
<span class="text-gray-600">Checklist Harian</span>
|
||||
<span class="text-gray-400">›</span>
|
||||
<span class="font-medium">Detail</span>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-semibold">@tanggalDisplay</h2>
|
||||
<a href="/ChecklistHarian/Index" class="btn bg-white hover:bg-gray-50 rounded-full border border-gray-200">
|
||||
<span class="icon">arrow_back</span>
|
||||
Kembali
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="card bg-green-600 text-white shadow-sm rounded-xl">
|
||||
<div class="card-body">
|
||||
<p class="text-sm opacity-90 mb-1">Mudah Terurai</p>
|
||||
<h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-yellow-500 text-white shadow-sm rounded-xl">
|
||||
<div class="card-body">
|
||||
<p class="text-sm opacity-90 mb-1">Material Daur</p>
|
||||
<h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-red-500 text-white shadow-sm rounded-xl">
|
||||
<div class="card-body">
|
||||
<p class="text-sm opacity-90 mb-1">B3</p>
|
||||
<h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-black text-white shadow-sm rounded-xl">
|
||||
<div class="card-body">
|
||||
<p class="text-sm opacity-90 mb-1">Residu</p>
|
||||
<h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Card -->
|
||||
<div class="card bg-white shadow-sm rounded-xl">
|
||||
<div class="card-body p-0">
|
||||
<table class="table" id="detailTable">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="w-[5%] text-gray-600 font-medium">No</th>
|
||||
<th class="w-[30%] text-gray-600 font-medium">Alamat Rumah</th>
|
||||
<th class="w-[8%] text-gray-600 font-medium">RW</th>
|
||||
<th class="w-[12%] text-gray-600 font-medium">Mudah Terurai</th>
|
||||
<th class="w-[12%] text-gray-600 font-medium">Material Daur</th>
|
||||
<th class="w-[8%] text-gray-600 font-medium">B3</th>
|
||||
<th class="w-[12%] text-gray-600 font-medium">Residu</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
$(document).ready(function () {
|
||||
|
||||
new DataTable('#detailTable', {
|
||||
ajax: '/ChecklistHarian/DetailTable?tanggal=@ViewBag.Tanggal',
|
||||
scrollX: true,
|
||||
autoWidth: false,
|
||||
initComplete: function () {
|
||||
$('div.dt-scroll-body thead').css('visibility', 'collapse');
|
||||
},
|
||||
columns: [
|
||||
{ data: 'no' },
|
||||
{ data: 'alamat_rumah' },
|
||||
{ data: 'rw' },
|
||||
|
||||
{
|
||||
data: 'mudah_terurai',
|
||||
render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" />' : '<input type="checkbox" class="checkbox" />'
|
||||
},
|
||||
{
|
||||
data: 'material_daur',
|
||||
render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" />' : '<input type="checkbox" class="checkbox" />'
|
||||
},
|
||||
{
|
||||
data: 'b3',
|
||||
render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" />' : '<input type="checkbox" class="checkbox" />'
|
||||
},
|
||||
{
|
||||
data: 'residu',
|
||||
render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" />' : '<input type="checkbox" class="checkbox" />'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue