itm/sispace
itm/sispace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: enhance attendance modal layout with sticky headers and improved styling

Browse Source
This commit is contained in:
Yoga Pangestu 2026-03-31 20:29:15 +07:00
parent 70216995b4
commit 8485e92aaa
1 changed files with 33 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/views/filament/resources/learning/class-sessions/attendance-modal.blade.php
View File

@ -2,9 +2,9 @@
@forelse ($attendances as $attendance) @forelse ($attendances as $attendance)
@if ($loop->first) @if ($loop->first)
<div <div
class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"> 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"> <table class="w-full text-sm text-left divider-y dark:divider-white/5 sticky-header-table">
<thead class="bg-gray-50 dark:bg-white/5"> <thead class="bg-gray-50 dark:bg-gray-800 sticky top-0 z-10">
<tr> <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">Mahasiswa</th>
<th class="px-4 py-3 font-bold text-gray-900 dark:text-white text-right">Waktu Presensi</th> <th class="px-4 py-3 font-bold text-gray-900 dark:text-white text-right">Waktu Presensi</th>
@ -16,8 +16,7 @@ class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:bord
<td class="px-4 py-3 text-gray-950 dark:text-white font-medium"> <td class="px-4 py-3 text-gray-950 dark:text-white font-medium">
<div class="flex flex-col"> <div class="flex flex-col">
<span>{{ $attendance->student->full_name }}</span> <span>{{ $attendance->student->full_name }}</span>
<span <span class="text-[10px] text-gray-500 dark:text-gray-400 font-normal uppercase tabular-nums">NIM:
class="text-[10px] text-gray-500 dark:text-gray-400 font-normal uppercase tabular-nums">NIM:
{{ $attendance->student->student_number }}</span> {{ $attendance->student->student_number }}</span>
</div> </div>
</td> </td>
@ -31,18 +30,17 @@ class="inline-flex items-center rounded-md bg-success-50 dark:bg-success-400/10
@if ($loop->last) @if ($loop->last)
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="mt-4 flex items-center justify-between px-2"> <div class="mt-4 flex items-center justify-between px-2">
<p class="text-xs text-gray-500 font-medium"> <p class="text-xs text-gray-500 font-medium">
Total Kehadiran: <span Total Kehadiran: <span class="text-primary-600 dark:text-primary-400 font-bold font-mono">{{ $loop->count }}
class="text-primary-600 dark:text-primary-400 font-bold font-mono">{{ $loop->count }}
Mahasiswa</span> Mahasiswa</span>
</p> </p>
</div> </div>
@endif @endif
@empty @empty
<x-filament::empty-state icon="heroicon-o-user-group" heading="Tidak ada data yang ditemukan" <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"> description="Belum ada mahasiswa yang melakukan presensi pada sesi ini." iconColor="gray">
</x-filament::empty-state> </x-filament::empty-state>
@endforelse @endforelse
</div> </div>