novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: kalender presensi full-kotak warna + klik

Browse Source 
Sebelum: badge kecil merah/hijau di pojok, susah diklik.
Sesudah: seluruh kotak tanggal berwarna (merah=ada alpha,
hijau=semua hadir), bisa diklik langsung untuk input presensi.
- Info jumlah siswa & alpha di dalam kotak
- Legend yang lebih jelas
This commit is contained in:
Bro
2026-07-24 18:07:58 +07:00
parent f0d337a3eb
commit e4e0b234f6
1 changed files with 34 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/attendances/index.blade.php
+34 -17
View File
@@ -92,26 +92,43 @@
{{-- Calendar grid --}} {{-- Calendar grid --}}
<div class="grid grid-cols-7 gap-1"> <div class="grid grid-cols-7 gap-1">
<template x-for="(day, idx) in days" :key="idx"> <template x-for="(day, idx) in days" :key="idx">
<div class="relative min-h-[70px] sm:min-h-[80px] rounded-xl border transition-all duration-150 p-1.5" <div @click="day.total > 0 && day.isCurrentMonth ? window.location.href = '{{ route('attendances.create', ['date' => '']) }}' + day.dateStr : null"
class="relative min-h-[70px] sm:min-h-[80px] rounded-xl border transition-all duration-150 p-1.5"
:class="day.total > 0 && day.isCurrentMonth ? 'cursor-pointer' : 'cursor-default'"
:class="day.isToday :class="day.isToday
? 'border-blue-300 bg-blue-50/50 ring-1 ring-blue-200' ? day.total > 0
? (day.alpha > 0 ? 'border-red-300 bg-red-50 ring-2 ring-red-200' : 'border-emerald-300 bg-emerald-50 ring-2 ring-emerald-200')
: 'border-blue-300 bg-blue-50 ring-2 ring-blue-200'
: day.isCurrentMonth && day.total > 0 : day.isCurrentMonth && day.total > 0
? 'border-emerald-100 hover:border-emerald-200 hover:bg-emerald-50' ? (day.alpha > 0
? 'border-red-200 bg-red-50/70 hover:bg-red-100 hover:border-red-300'
: 'border-emerald-200 bg-emerald-50/70 hover:bg-emerald-100 hover:border-emerald-300')
: day.isCurrentMonth : day.isCurrentMonth
? 'border-gray-100 hover:border-gray-200 hover:bg-gray-50' ? 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
: 'border-gray-50 bg-gray-50/30 text-gray-300'"> : 'border-gray-50 bg-gray-50/30 text-gray-300 cursor-default'">
{{-- Date number --}} {{-- Date number + total --}}
<div class="text-xs font-semibold" <div class="flex items-start justify-between">
:class="day.isToday ? 'text-blue-600' : (day.isCurrentMonth ? 'text-gray-700' : 'text-gray-300')" <div class="text-xs font-semibold"
x-text="day.day"> :class="day.isToday ? 'text-blue-600' : (day.isCurrentMonth ? 'text-gray-700' : 'text-gray-300')"
x-text="day.day">
</div>
<template x-if="day.total > 0 && day.isCurrentMonth">
<span class="text-[10px] font-bold"
:class="day.alpha > 0 ? 'text-red-500' : 'text-emerald-600'">
<i class="fa-solid" :class="day.alpha > 0 ? 'fa-circle-exclamation' : 'fa-check-circle'"></i>
</span>
</template>
</div> </div>
{{-- Badge jumlah siswa --}} {{-- Info bar --}}
<template x-if="day.total > 0 && day.isCurrentMonth"> <template x-if="day.total > 0 && day.isCurrentMonth">
<a :href="'{{ route('attendances.create', ['date' => '']) }}' + day.dateStr" <div class="mt-1">
class="absolute bottom-1.5 right-1.5 inline-flex items-center justify-center min-w-[22px] h-[22px] text-[10px] font-bold text-white rounded-full shadow-sm" <div class="flex items-center justify-between text-[9px] text-gray-400">
:class="day.alpha > 0 ? 'bg-red-500' : 'bg-emerald-500'" <span x-text="day.total + ' siswa'"></span>
x-text="day.total"> <template x-if="day.alpha > 0">
</a> <span class="text-red-400 font-medium" x-text="day.alpha + ' alpha'"></span>
</template>
</div>
</div>
</template> </template>
</div> </div>
</template> </template>
@@ -120,12 +137,12 @@
{{-- Legend --}} {{-- Legend --}}
<div class="px-6 py-3 border-t border-gray-100 bg-gray-50/50 flex items-center gap-4 text-[11px] text-gray-500"> <div class="px-6 py-3 border-t border-gray-100 bg-gray-50/50 flex items-center gap-4 text-[11px] text-gray-500">
<span class="inline-flex items-center gap-1.5"> <span class="inline-flex items-center gap-1.5">
<span class="w-2.5 h-2.5 rounded bg-emerald-500"></span> Hadir semua <span class="w-3 h-3 rounded-sm bg-emerald-200 border border-emerald-400"></span> Semua hadir
</span> </span>
<span class="inline-flex items-center gap-1.5"> <span class="inline-flex items-center gap-1.5">
<span class="w-2.5 h-2.5 rounded bg-red-500"></span> Ada alpha <span class="w-3 h-3 rounded-sm bg-red-50 border border-red-300"></span> Ada alpha
</span> </span>
<span class="ml-auto text-gray-400">Klik badge untuk input presensi</span> <span class="ml-auto text-gray-400">&#128073; Klik kotak untuk input presensi</span>
</div> </div>
</div> </div>
</div> </div>