From 8485e92aaa0927a1b6d7d27db8e3a828d40a143c Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 31 Mar 2026 20:29:15 +0700
Subject: [PATCH] refactor: enhance attendance modal layout with sticky headers
 and improved styling

---
 .../class-sessions/attendance-modal.blade.php | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/resources/views/filament/resources/learning/class-sessions/attendance-modal.blade.php b/resources/views/filament/resources/learning/class-sessions/attendance-modal.blade.php
index dec2100..eba0b44 100644
--- a/resources/views/filament/resources/learning/class-sessions/attendance-modal.blade.php
+++ b/resources/views/filament/resources/learning/class-sessions/attendance-modal.blade.php
@@ -2,9 +2,9 @@
     @forelse ($attendances as $attendance)
         @if ($loop->first)
             <div
-                class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
-                <table class="w-full text-sm text-left divider-y dark:divider-white/5">
-                    <thead class="bg-gray-50 dark:bg-white/5">
+                class="fi-ta-content overflow-x-auto overflow-y-auto max-h-96 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+                <table class="w-full text-sm text-left divider-y dark:divider-white/5 sticky-header-table">
+                    <thead class="bg-gray-50 dark:bg-gray-800 sticky top-0 z-10">
                         <tr>
                             <th class="px-4 py-3 font-bold text-gray-900 dark:text-white">Mahasiswa</th>
                             <th class="px-4 py-3 font-bold text-gray-900 dark:text-white text-right">Waktu Presensi</th>
@@ -12,37 +12,35 @@ class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:bord
                     </thead>
                     <tbody class="divide-y divide-gray-200 dark:divide-white/5">
         @endif
-                        <tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
-                            <td class="px-4 py-3 text-gray-950 dark:text-white font-medium">
-                                <div class="flex flex-col">
-                                    <span>{{ $attendance->student->full_name }}</span>
-                                    <span
-                                        class="text-[10px] text-gray-500 dark:text-gray-400 font-normal uppercase tabular-nums">NIM:
-                                        {{ $attendance->student->student_number }}</span>
-                                </div>
-                            </td>
-                            <td class="px-4 py-3 text-right">
-                                <span
-                                    class="inline-flex items-center rounded-md bg-success-50 dark:bg-success-400/10 px-2 py-1 text-xs font-bold text-success-700 dark:text-success-400 ring-1 ring-inset ring-success-600/20 tabular-nums">
-                                    {{ $attendance->attended_at?->format('H:i') }} 
-                                </span>
-                            </td>
-                        </tr>
+        <tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
+            <td class="px-4 py-3 text-gray-950 dark:text-white font-medium">
+                <div class="flex flex-col">
+                    <span>{{ $attendance->student->full_name }}</span>
+                    <span class="text-[10px] text-gray-500 dark:text-gray-400 font-normal uppercase tabular-nums">NIM:
+                        {{ $attendance->student->student_number }}</span>
+                </div>
+            </td>
+            <td class="px-4 py-3 text-right">
+                <span
+                    class="inline-flex items-center rounded-md bg-success-50 dark:bg-success-400/10 px-2 py-1 text-xs font-bold text-success-700 dark:text-success-400 ring-1 ring-inset ring-success-600/20 tabular-nums">
+                    {{ $attendance->attended_at?->format('H:i') }}
+                </span>
+            </td>
+        </tr>
         @if ($loop->last)
-                    </tbody>
-                </table>
-            </div>
-            <div class="mt-4 flex items-center justify-between px-2">
-                <p class="text-xs text-gray-500 font-medium">
-                    Total Kehadiran: <span
-                        class="text-primary-600 dark:text-primary-400 font-bold font-mono">{{ $loop->count }}
-                        Mahasiswa</span>
-                </p>
-            </div>
-        @endif
-    @empty
-        <x-filament::empty-state icon="heroicon-o-user-group" heading="Tidak ada data yang ditemukan"
-            description="Belum ada mahasiswa yang melakukan presensi pada sesi ini." iconColor="gray">
-        </x-filament::empty-state>
-    @endforelse
+            </tbody>
+            </table>
+</div>
+<div class="mt-4 flex items-center justify-between px-2">
+    <p class="text-xs text-gray-500 font-medium">
+        Total Kehadiran: <span class="text-primary-600 dark:text-primary-400 font-bold font-mono">{{ $loop->count }}
+            Mahasiswa</span>
+    </p>
+</div>
+@endif
+@empty
+<x-filament::empty-state icon="heroicon-o-user-group" heading="Tidak ada data yang ditemukan"
+    description="Belum ada mahasiswa yang melakukan presensi pada sesi ini." iconColor="gray">
+</x-filament::empty-state>
+@endforelse
 </div>