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

feat: add filter dropdown admin dashboard

main-dlh
Regiaaaaaa 2025-12-10 08:58:54 +07:00
parent 77dac14abc
commit 6dbe6c09cb
2 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Views/Dashboard/Index.cshtml
View File

@ -6,8 +6,16 @@
<!-- Profil RW --> <!-- Profil RW -->
<div class="card card-border h-full bg-white lg:col-span-9"> <div class="card card-border h-full bg-white lg:col-span-9">
<div class="card-body"> <div class="card-body">
<div class="flex flex-col items-center justify-between lg:flex-row"> <div class="flex flex-col items-center justify-between gap-2 lg:flex-row">
<h2 class="w-full text-lg font-bold md:w-1/2">Profile RW 7</h2> <h2 class="w-full text-lg font-bold md:w-1/2">Profile RW 7</h2>
<div class="flex w-full items-center justify-end gap-2 md:w-1/2">
<select id="filterPeriod" class="select select-bordered select-sm w-32">
<option selected>Tahunan</option>
<option>Bulanan</option>
<option>Harian</option>
</select>
<input type="month" id="monthPicker" class="input input-bordered input-sm w-40 hidden" placeholder="Pilih Bulan">
</div>
</div> </div>
<div class="h-2"></div> <div class="h-2"></div>
<div class="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-4"> <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-4">
@ -201,6 +209,27 @@
<script src="/lib/chart.js/chart.umd.js"></script> <script src="/lib/chart.js/chart.umd.js"></script>
<script> <script>
// Filter period handler
const filterPeriod = document.getElementById('filterPeriod');
const monthPicker = document.getElementById('monthPicker');
const now = new Date();
const currentMonth = now.toISOString().slice(0, 7);
monthPicker.value = currentMonth;
filterPeriod.addEventListener('change', function() {
if (this.value === 'Bulanan') {
monthPicker.classList.remove('hidden');
monthPicker.value = currentMonth;
} else {
monthPicker.classList.add('hidden');
}
});
monthPicker.addEventListener('change', function() {
console.log('Selected month:', this.value);
});
const labels = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"]; const labels = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
// contoh data variasi // contoh data variasi

10
Views/DashboardRw/Index.cshtml
View File

@ -213,18 +213,24 @@
<script src="/lib/chart.js/chart.umd.js"></script> <script src="/lib/chart.js/chart.umd.js"></script>
<script> <script>
// Filter period handler // Filter period handler
const filterPeriod = document.getElementById('filterPeriod'); const filterPeriod = document.getElementById('filterPeriod');
const monthPicker = document.getElementById('monthPicker'); const monthPicker = document.getElementById('monthPicker');
const now = new Date();
const currentMonth = now.toISOString().slice(0, 7);
monthPicker.value = currentMonth;
filterPeriod.addEventListener('change', function() { filterPeriod.addEventListener('change', function() {
if (this.value === 'Bulanan') { if (this.value === 'Bulanan') {
monthPicker.classList.remove('hidden'); monthPicker.classList.remove('hidden');
monthPicker.value = currentMonth;
} else { } else {
monthPicker.classList.add('hidden'); monthPicker.classList.add('hidden');
} }
}); });
monthPicker.addEventListener('change', function() { monthPicker.addEventListener('change', function() {
console.log('Selected month:', this.value); console.log('Selected month:', this.value);
}); });