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

style: add modal filter

main-dlh
Yuri Dimas 2025-11-18 14:31:50 +07:00
parent 6a7fca4d36
commit 7dfd021333
No known key found for this signature in database
GPG Key ID: 9FD7E44BC294C68C
4 changed files with 136 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
Views/DataBankSampah/Index.cshtml
View File

@ -4,7 +4,8 @@
<div class="breadcrumbs text-sm">
<ul>
<li><a>Data Bank Sampah</a></li>
<li class="text-gray-500"><a>Master Data</a></li>
<li>Data Bank Sampah</li>
</ul>
</div>
@ -14,13 +15,41 @@
<h3 class="mb-2">Data Bank Sampah</h3>
</div>
<div class="justify-self-end lg:self-center">
<a class="btn rounded-full bg-white" href="#">
<button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
<span class="icon icon-fill me-2">filter_list</span>
Filter
</a>
</button>
</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">
<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">Kelurahan</legend>
<select class="select w-full">
<option disabled selected>Pilih Kelurahan</option>
</select>
</fieldset>
<fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend>
<select class="select w-full">
<option disabled selected>Pilih RW</option>
</select>
</fieldset>
<div class="modal-action">
<button type="button" class="btn rounded-full" onclick="modal_filter.close()">Bersihkan</button>
<button type="submit" class="btn btn-primary rounded-full text-white">Terapkan Filter</button>
</div>
</form>
</div>
</dialog>
<div class="h-8"></div>
<div class="card bg-white shadow-sm">

34
Views/DataKecamatan/Index.cshtml
View File

@ -4,7 +4,7 @@
<div class="breadcrumbs text-sm">
<ul>
<li class="text-gray-500"><a>Data Kecamatan</a></li>
<li class="text-gray-500"><a>Master Data</a></li>
<li>Data Kecamatan</li>
</ul>
</div>
@ -15,13 +15,41 @@
<h3 class="mb-2">Data Kecamatan</h3>
</div>
<div class="justify-self-end lg:self-center">
<a class="btn rounded-full bg-white" href="#">
<button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
<span class="icon icon-fill me-2">filter_list</span>
Filter
</a>
</button>
</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">
<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">Kelurahan</legend>
<select class="select w-full">
<option disabled selected>Pilih Kelurahan</option>
</select>
</fieldset>
<fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend>
<select class="select w-full">
<option disabled selected>Pilih RW</option>
</select>
</fieldset>
<div class="modal-action">
<button type="button" class="btn rounded-full" onclick="modal_filter.close()">Bersihkan</button>
<button type="submit" class="btn btn-primary rounded-full text-white">Terapkan Filter</button>
</div>
</form>
</div>
</dialog>
<div class="h-8"></div>
<div class="card bg-white shadow-sm">

35
Views/DataRt/Index.cshtml
View File

@ -4,7 +4,8 @@
<div class="breadcrumbs text-sm">
<ul>
<li class="text-gray-500"><a>Data RT</a></li>
<li class="text-gray-500"><a>Master Data</a></li>
<li>Data RT</li>
</ul>
</div>
@ -14,13 +15,41 @@
<h3 class="mb-2">Data RT</h3>
</div>
<div class="justify-self-end lg:self-center">
<a class="btn rounded-full bg-white" href="#">
<button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
<span class="icon icon-fill me-2">filter_list</span>
Filter
</a>
</button>
</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">
<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">Kelurahan</legend>
<select class="select w-full">
<option disabled selected>Pilih Kelurahan</option>
</select>
</fieldset>
<fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend>
<select class="select w-full">
<option disabled selected>Pilih RW</option>
</select>
</fieldset>
<div class="modal-action">
<button type="button" class="btn rounded-full" onclick="modal_filter.close()">Bersihkan</button>
<button type="submit" class="btn btn-primary rounded-full text-white">Terapkan Filter</button>
</div>
</form>
</div>
</dialog>
<div class="h-8"></div>
<div class="card bg-white shadow-sm">

105
Views/DataRw/Index.cshtml
View File

@ -5,7 +5,7 @@
<div class="breadcrumbs text-sm">
<ul>
<li class="text-gray-500"><a>Master Data</a></li>
<li><a>Data RW</a></li>
<li>Data RW</li>
</ul>
</div>
@ -15,15 +15,43 @@
<h3 class="mb-2">Data RW</h3>
</div>
<div class="justify-self-end lg:self-center">
<a class="btn rounded-full bg-white" href="#">
<button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
<span class="icon icon-fill me-2">filter_list</span>
Filter
</a>
</button>
</div>
</div>
<div class="h-8"></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">
<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">Kelurahan</legend>
<select class="select w-full">
<option disabled selected>Pilih Kelurahan</option>
</select>
</fieldset>
<fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend>
<select class="select w-full">
<option disabled selected>Pilih RW</option>
</select>
</fieldset>
<div class="modal-action">
<button type="button" class="btn rounded-full" onclick="modal_filter.close()">Bersihkan</button>
<button type="submit" class="btn btn-primary rounded-full text-white">Terapkan Filter</button>
</div>
</form>
</div>
</dialog>
<div class="card bg-white shadow-sm">
<div class="card-body p-0">
<table class="table-zebra table" id="example">
@ -45,80 +73,29 @@
<dialog id="rw-detail-modal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="text-lg font-semibold mb-4">Detail RW</h3>
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
<div class="flex flex-col">
<span class="text-gray-500">Nama Ketua RW</span>
<span class="font-semibold">Ahmad Kurniawan</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">No. HP Ketua RW</span>
<span class="font-semibold">2260</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah KK</span>
<span class="font-semibold">341</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah Rumah Memilah</span>
<span class="font-semibold" id="detail-jumlah-rumah-memilah">-</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah RT</span>
<span class="font-semibold">9</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Luas RW (m<sup>2</sup>)</span>
<span class="font-semibold">10</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah Jiwa</span>
<span class="font-semibold">2260</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah Timbulan Sampah Per Hari (Kg)</span>
<span class="font-semibold">2260</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Kota / Kabupaten</span>
<span class="font-semibold">Kota Adm. Jakarta Barat</span>
</div>
<div class="flex flex-col">
<h3 class="text-lg font-semibold">Detail RW <span id="detail-rw" class="text-primary">-</span></h3>
<div class="mt-4 space-y-4 text-sm">
<div class="flex items-center justify-between border-b pb-2">
<span class="text-gray-500">Kecamatan</span>
<span class="font-semibold" id="detail-kecamatan">-</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Kelurahan</span>
<span class="font-semibold">Grogol</span>
<div class="flex items-center justify-between border-b pb-2">
<span class="text-gray-500">Jumlah Rumah Memilah</span>
<span class="font-semibold" id="detail-jumlah-rumah-memilah">-</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">RW</span>
<span class="font-semibold" id="detail-rw">-</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">No. SK RW</span>
<span class="font-semibold">SK-/1838/83293</span>
</div>
<div class="flex flex-col">
<div class="flex items-center justify-between border-b pb-2">
<span class="text-gray-500">Jumlah Rumah Nasabah</span>
<span class="font-semibold" id="detail-jumlah-rumah-nasabah">-</span>
</div>
<div class="flex flex-col">
<div class="flex items-center justify-between">
<span class="text-gray-500">Jumlah Bank Sampah</span>
<span class="font-semibold" id="detail-jumlah-bank-sampah">-</span>
</div>
</div>
<div class="modal-action">
<form method="dialog">
<button class="btn rounded-full">
<span class="icon me-1">cancel</span>
Tutup
</button>
<button class="btn">Tutup</button>
</form>
<button type="button" class="btn rounded-full btn-primary">
<span class="icon">print</span>
Cetak
</button>
</div>
</div>
<form method="dialog" class="modal-backdrop">
@ -177,4 +154,4 @@
detailModal.showModal();
});
});
</script>
</script>