feat: add modal filter
parent
f233df860a
commit
e070810f33
|
|
@ -19,13 +19,63 @@
|
||||||
<span class="icon icon-fill me-2">download</span>
|
<span class="icon icon-fill me-2">download</span>
|
||||||
Download
|
Download
|
||||||
</a>
|
</a>
|
||||||
<button class="btn bg-white rounded-full" type="button">
|
<button class="btn bg-white rounded-full" type="button" onclick="modal_filter_target.showModal()">
|
||||||
<span class="icon icon-fill me-2">filter_list</span>
|
<span class="icon icon-fill me-2">filter_list</span>
|
||||||
Filter
|
Filter
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter Modal -->
|
||||||
|
<dialog id="modal_filter_target" class="modal modal-bottom sm:modal-middle">
|
||||||
|
<div class="modal-box w-full sm:max-w-sm">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-bold">Filter</h3>
|
||||||
|
<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick="modal_filter_target.close()">✕</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="filterForm">
|
||||||
|
|
||||||
|
<!-- Tahun -->
|
||||||
|
<fieldset class="fieldset max-w-sm">
|
||||||
|
<legend class="fieldset-legend">Tahun</legend>
|
||||||
|
<select id="filterTahun" class="select w-full">
|
||||||
|
<option selected disabled>Pilih Tahun</option>
|
||||||
|
<option>2025</option>
|
||||||
|
<option>2024</option>
|
||||||
|
<option>2023</option>
|
||||||
|
</select>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Bulan -->
|
||||||
|
<fieldset class="fieldset mt-4">
|
||||||
|
<legend class="fieldset-legend">Bulan</legend>
|
||||||
|
<select id="filterBulan" class="select w-full">
|
||||||
|
<option selected disabled>Pilih Bulan</option>
|
||||||
|
<option value="01">Januari</option>
|
||||||
|
<option value="02">Februari</option>
|
||||||
|
<option value="03">Maret</option>
|
||||||
|
<option value="04">April</option>
|
||||||
|
<option value="05">Mei</option>
|
||||||
|
<option value="06">Juni</option>
|
||||||
|
<option value="07">Juli</option>
|
||||||
|
<option value="08">Agustus</option>
|
||||||
|
<option value="09">September</option>
|
||||||
|
<option value="10">Oktober</option>
|
||||||
|
<option value="11">November</option>
|
||||||
|
<option value="12">Desember</option>
|
||||||
|
</select>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div class="modal-action">
|
||||||
|
<button type="button" class="btn" id="clearFilter">Bersihkan</button>
|
||||||
|
<button type="submit" class="btn btn-neutral">Terapkan Filter</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
|
||||||
<div class="h-8"></div>
|
<div class="h-8"></div>
|
||||||
|
|
||||||
<div class="card bg-white shadow-sm">
|
<div class="card bg-white shadow-sm">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue