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

68
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>
@ -12,37 +12,35 @@ class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:bord
</thead> </thead>
<tbody class="divide-y divide-gray-200 dark:divide-white/5"> <tbody class="divide-y divide-gray-200 dark:divide-white/5">
@endif @endif
<tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors"> <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"> <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> <td class="px-4 py-3 text-right">
<td class="px-4 py-3 text-right"> <span
<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">
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') }}
{{ $attendance->attended_at?->format('H:i') }} </span>
</span> </td>
</td> </tr>
</tr>
@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>