From 349ebb2b3056c5e72cb7a3cc9811a68ed4affb2a Mon Sep 17 00:00:00 2001 From: Novy San87 Date: Mon, 3 Aug 2026 18:05:53 +0700 Subject: [PATCH] Poles halaman Presensi Siswa premium MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 4 KPI card gradient (siswa/alpha hari ini & bulan ini) + icon watermark membesar saat hover — konsisten dgn dashboard - Kalender: badge 'X presensi' bulan berjalan, tombol Hari Ini, nav pill glass, hari ini gradient+ring+label, badge gradient emerald/merah + glow, indikator alpha mini per tanggal, legend pill - JS: currentMonth() + monthTotal --- resources/views/attendances/index.blade.php | 153 +++++++++++++------- 1 file changed, 103 insertions(+), 50 deletions(-) diff --git a/resources/views/attendances/index.blade.php b/resources/views/attendances/index.blade.php index 1cca7b8..6fa2e75 100644 --- a/resources/views/attendances/index.blade.php +++ b/resources/views/attendances/index.blade.php @@ -11,7 +11,7 @@

Pantau dan kelola kehadiran siswa per jam pelajaran

+ class="btn-primary flex-shrink-0"> Input Presensi @@ -19,105 +19,147 @@ {{-- Stats Hari Ini --}}
-
-
- - Siswa Hari Ini +
+
+ +
+
+

Siswa Hari Ini

+

{{ $todayStudents }}

+

tercatat hari ini

-
{{ $todayStudents }}
-
-
- - Alpha Hari Ini +
+
+ +
+
+

Alpha Hari Ini

+

{{ $todayAlphaStudents }}

+

perlu perhatian

-
{{ $todayAlphaStudents }}
-
-
- - Siswa Bulan Ini +
+
+ +
+
+

Siswa Bulan Ini

+

{{ $monthStudents }}

+

sepanjang bulan berjalan

-
{{ $monthStudents }}
-
-
- - Alpha Bulan Ini +
+
+ +
+
+

Alpha Bulan Ini

+

{{ $monthAlphaStudents }}

+

akumulasi bulan berjalan

-
{{ $monthAlphaStudents }}
{{-- Kalender Presensi --}}
-
+
-
- +
+
-

Kalender Presensi

-

+

Kalender Presensi

+
+

+ + + + +
-
- - +
+ + +
{{-- Day headers --}}
{{-- Calendar grid --}} -
+
{{-- Legend --}} -
- - Hadir semua +
+ + Hadir semua - - Ada alpha + + Ada alpha + + + Klik kotak untuk input presensi - Klik kotak untuk input presensi
@@ -137,6 +179,10 @@ return months[this.month - 1] || ''; }, + get monthTotal() { + return Object.values(this.attendanceData || {}).reduce((a, b) => a + (b.total || 0), 0); + }, + init() { this.attendanceData = Object.keys(initialData).length > 0 ? initialData : {}; this.render(); @@ -202,6 +248,13 @@ this.fetchAndRender(); }, + currentMonth() { + const now = new Date(); + this.year = now.getFullYear(); + this.month = now.getMonth() + 1; + this.fetchAndRender(); + }, + fetchAndRender() { fetch('{{ route('attendances.calendar-data') }}?year=' + this.year + '&month=' + this.month) .then(r => r.json())