refactor: replace custom empty states with Filament empty-state components and improve code formatting in modals
This commit is contained in:
Yoga Pangestu
parent
d09ef22945
commit
2d57ab4f0a
@ -1,12 +1,14 @@
|
||||
<div class="space-y-4 py-2">
|
||||
@forelse($assignments as $assignment)
|
||||
<div class="flex items-center justify-between p-3 rounded-lg border border-gray-100 dark:border-white/5 bg-gray-50/50 dark:bg-white/5 hover:bg-white dark:hover:bg-white/10 transition-colors shadow-sm">
|
||||
<div
|
||||
class="flex items-center justify-between p-3 rounded-lg border border-gray-100 dark:border-white/5 bg-gray-50/50 dark:bg-white/5 hover:bg-white dark:hover:bg-white/10 transition-colors shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 rounded-lg bg-primary-100 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400">
|
||||
<x-heroicon-o-pencil-square class="w-5 h-5" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold text-gray-900 dark:text-white leading-tight uppercase font-mono text-[11px] mb-0.5 tracking-tight text-primary-600/60 dark:text-primary-400/50 block">
|
||||
<span
|
||||
class="font-bold text-gray-900 dark:text-white leading-tight uppercase font-mono text-[11px] mb-0.5 tracking-tight text-primary-600/60 dark:text-primary-400/50 block">
|
||||
{{ $assignment->type_label }}
|
||||
</span>
|
||||
<span class="font-bold text-gray-900 dark:text-white leading-tight">{{ $assignment->title }}</span>
|
||||
@ -19,18 +21,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="{{ \App\Filament\Resources\Learning\Assignments\AssignmentResource::getUrl('submit', ['record' => $assignment->id]) }}"
|
||||
wire:navigate
|
||||
class="p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 text-gray-500 transition-colors"
|
||||
title="Lihat Detail">
|
||||
<a href="{{ \App\Filament\Resources\Learning\Assignments\AssignmentResource::getUrl('submit', ['record' => $assignment->id]) }}"
|
||||
wire:navigate
|
||||
class="p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 text-gray-500 transition-colors"
|
||||
title="Lihat Detail">
|
||||
<x-heroicon-o-chevron-right class="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="flex flex-col items-center justify-center py-8 text-center bg-gray-50 dark:bg-white/5 rounded-xl border border-dashed border-gray-200 dark:border-white/10">
|
||||
<x-heroicon-o-pencil-square class="w-12 h-12 text-gray-300 dark:text-gray-600" />
|
||||
<p class="mt-2 text-sm font-medium text-gray-500 dark:text-gray-400">Belum ada tugas untuk sesi ini.</p>
|
||||
</div>
|
||||
<x-filament::empty-state icon="heroicon-o-clipboard-document" heading="Tidak ada data yang ditemukan"
|
||||
description="Belum ada tugas untuk sesi ini." iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<div class="space-y-3">
|
||||
@if ($attendances->isEmpty())
|
||||
<div class="flex flex-col items-center justify-center py-8 text-center">
|
||||
<x-heroicon-o-user-group class="w-12 h-12 text-gray-400 mb-3" />
|
||||
<p class="text-sm text-gray-500 font-medium">Belum ada mahasiswa yang melakukan presensi pada sesi ini.</p>
|
||||
</div>
|
||||
<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>
|
||||
@else
|
||||
<div class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
|
||||
<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">
|
||||
<tr>
|
||||
@ -19,11 +19,14 @@
|
||||
<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>
|
||||
<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">
|
||||
<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') }} WIB
|
||||
</span>
|
||||
</td>
|
||||
@ -34,7 +37,9 @@
|
||||
</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">{{ $attendances->count() }} Mahasiswa</span>
|
||||
Total Kehadiran: <span
|
||||
class="text-primary-600 dark:text-primary-400 font-bold font-mono">{{ $attendances->count() }}
|
||||
Mahasiswa</span>
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<div class="space-y-4 py-2">
|
||||
@forelse($materials as $material)
|
||||
<div class="flex items-center justify-between p-3 rounded-lg border border-gray-100 dark:border-white/5 bg-gray-50/50 dark:bg-white/5 hover:bg-white dark:hover:bg-white/10 transition-colors shadow-sm">
|
||||
<div
|
||||
class="flex items-center justify-between p-3 rounded-lg border border-gray-100 dark:border-white/5 bg-gray-50/50 dark:bg-white/5 hover:bg-white dark:hover:bg-white/10 transition-colors shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400">
|
||||
<x-heroicon-o-document-text class="w-5 h-5" />
|
||||
@ -13,18 +14,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button"
|
||||
wire:click="mountAction('viewMaterialDetail', { record: {{ $material->id }} })"
|
||||
class="p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 text-gray-500 transition-colors"
|
||||
title="Lihat Detail">
|
||||
<button type="button" wire:click="mountAction('viewMaterialDetail', { record: {{ $material->id }} })"
|
||||
class="p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 text-gray-500 transition-colors"
|
||||
title="Lihat Detail">
|
||||
<x-heroicon-o-chevron-right class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="flex flex-col items-center justify-center py-8 text-center bg-gray-50 dark:bg-white/5 rounded-xl border border-dashed border-gray-200 dark:border-white/10">
|
||||
<x-heroicon-o-document-minus class="w-12 h-12 text-gray-300 dark:text-gray-600" />
|
||||
<p class="mt-2 text-sm font-medium text-gray-500 dark:text-gray-400">Belum ada materi untuk sesi ini.</p>
|
||||
</div>
|
||||
<x-filament::empty-state icon="heroicon-o-document-minus" heading="Tidak ada data yang ditemukan"
|
||||
description="Belum ada materi untuk sesi ini." iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user