refactor: replace conditional rendering with forelse and update card styling across attendance and learning modules

This commit is contained in:
Yoga Pangestu 2026-03-30 08:52:18 +07:00
parent 2d57ab4f0a
commit 3c9e2f1e2f
9 changed files with 485 additions and 494 deletions

View File

@ -14,7 +14,6 @@
use Filament\Forms\Concerns\InteractsWithForms; use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms; use Filament\Forms\Contracts\HasForms;
use Filament\Resources\Pages\Page; use Filament\Resources\Pages\Page;
use Filament\Support\Icons\Heroicon;
use Filament\Tables\Columns\TextColumn; use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable; use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable; use Filament\Tables\Contracts\HasTable;
@ -237,8 +236,8 @@ public function table(Table $table): Table
}) })
->searchable(), ->searchable(),
]) ])
->emptyStateIcon(Heroicon::OutlinedCheckCircle) ->emptyStateIcon('heroicon-o-finger-print')
->emptyStateDescription('Setelah Anda membuat data pertama, maka akan muncul disini.') ->emptyStateDescription('Belum ada riwayat presensi yang tercatat untuk Anda saat ini.')
->deferFilters(false) ->deferFilters(false)
->paginated([25, 50, 100, 'all']) ->paginated([25, 50, 100, 'all'])
->defaultPaginationPageOption(25); ->defaultPaginationPageOption(25);

View File

@ -191,8 +191,8 @@ public static function table(Table $table): Table
...DefaultBulkActions::make('Materi'), ...DefaultBulkActions::make('Materi'),
]), ]),
]) ])
->emptyStateIcon(Heroicon::OutlinedBookOpen) ->emptyStateIcon('heroicon-o-book-open')
->emptyStateDescription('Setelah Anda membuat data pertama, maka akan muncul disini.') ->emptyStateDescription('Belum ada materi pembelajaran yang terdaftar dalam sistem saat ini.')
->defaultSort('created_at', 'desc') ->defaultSort('created_at', 'desc')
->deferFilters(false) ->deferFilters(false)
->paginated([25, 50, 100, 'all']) ->paginated([25, 50, 100, 'all'])

View File

@ -17,11 +17,9 @@ class="fi-section-content rounded-xl border border-info-200 bg-info-50 dark:bg-i
</div> </div>
</div> </div>
@if ($this->schedulesGrouped->isNotEmpty())
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="flex flex-nowrap gap-6 min-w-max pb-4"> <div class="flex flex-nowrap gap-6 min-w-max pb-4">
@forelse ($this->schedulesGrouped as $dayName => $daySchedules)
@foreach ($this->schedulesGrouped as $dayName => $daySchedules)
<section class="w-80 shrink-0 space-y-4"> <section class="w-80 shrink-0 space-y-4">
<div class="flex items-center gap-2 border-b border-gray-200 dark:border-gray-700 pb-2"> <div class="flex items-center gap-2 border-b border-gray-200 dark:border-gray-700 pb-2">
@ -108,14 +106,15 @@ class="flex items-center justify-end gap-1 pt-3 border-t border-gray-100 dark:bo
@endforeach @endforeach
</div> </div>
</section> </section>
@endforeach @empty
<div class="w-full">
</div>
</div>
@else
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan" <x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray"> description="Belum ada jadwal perkuliahan yang terdaftar untuk kriteria ini. Hubungi administrator jika jadwal Anda belum muncul."
iconColor="gray">
</x-filament::empty-state> </x-filament::empty-state>
@endif </div>
@endforelse
</div>
</div>
</x-filament::section> </x-filament::section>
</x-filament-panels::page> </x-filament-panels::page>

View File

@ -6,9 +6,8 @@
</div> </div>
</div> </div>
@if ($this->studyGroups->isNotEmpty())
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6"> <div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
@foreach ($this->studyGroups as $record) @forelse ($this->studyGroups as $record)
<div class="break-inside-avoid mb-6"> <div class="break-inside-avoid mb-6">
<div class="{{ $record->card_classes }}"> <div class="{{ $record->card_classes }}">
@ -144,14 +143,11 @@ class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-violet-50 dark:bg-violet-5
@endcanAny @endcanAny
</div> </div>
</div> </div>
@endforeach @empty
</div>
@endif
@if ($this->studyGroups->isEmpty())
<x-filament::empty-state icon="heroicon-o-users" heading="Tidak ada data yang ditemukan" <x-filament::empty-state icon="heroicon-o-users" heading="Tidak ada data yang ditemukan"
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray"> description="Anda belum terdaftar dalam kelompok belajar apapun untuk saat ini." iconColor="gray">
</x-filament::empty-state> </x-filament::empty-state>
@endif @endforelse
</div>
</x-filament::section> </x-filament::section>
</x-filament-panels::page> </x-filament-panels::page>

View File

@ -3,13 +3,8 @@
<x-slot name="heading">Tugas Saya</x-slot> <x-slot name="heading">Tugas Saya</x-slot>
<x-slot name="description">Klik tugas untuk melihat detail dan mengumpulkan file.</x-slot> <x-slot name="description">Klik tugas untuk melihat detail dan mengumpulkan file.</x-slot>
@if ($this->assignmentCards->isEmpty())
<x-filament::empty-state icon="heroicon-o-clipboard-document-list" heading="Tidak ada data yang ditemukan"
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray">
</x-filament::empty-state>
@else
<div class="space-y-6"> <div class="space-y-6">
@foreach ($this->assignmentCards as $card) @forelse ($this->assignmentCards as $card)
<div class="{{ $card->card_classes }}"> <div class="{{ $card->card_classes }}">
<a href="{{ \App\Filament\Resources\Learning\Assignments\AssignmentResource::getUrl('submit', ['record' => $card->id]) }}" <a href="{{ \App\Filament\Resources\Learning\Assignments\AssignmentResource::getUrl('submit', ['record' => $card->id]) }}"
wire:navigate wire:navigate
@ -110,8 +105,13 @@ class="{{ $card->indicator_icon_classes }}"
</div> </div>
@endif @endif
</div> </div>
@endforeach @empty
<x-filament::empty-state icon="heroicon-o-clipboard-document-list"
heading="Tidak ada data yang ditemukan"
description="Belum ada tugas baru yang perlu dikerjakan untuk saat ini. Tetap semangat!"
iconColor="gray">
</x-filament::empty-state>
@endforelse
</div> </div>
@endif
</x-filament::section> </x-filament::section>
</x-filament-panels::page> </x-filament-panels::page>

View File

@ -3,9 +3,8 @@
<x-slot name="heading">Sesi Kuliah</x-slot> <x-slot name="heading">Sesi Kuliah</x-slot>
<x-slot name="description">Silakan melakukan presensi sesuai dengan waktu kelas.</x-slot> <x-slot name="description">Silakan melakukan presensi sesuai dengan waktu kelas.</x-slot>
@if ($this->scheduleCards->isNotEmpty())
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6"> <div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
@foreach ($this->scheduleCards as $card) @forelse ($this->scheduleCards as $card)
<div class="break-inside-avoid mb-6"> <div class="break-inside-avoid mb-6">
<div class="{{ $card->card_classes }}"> <div class="{{ $card->card_classes }}">
@ -48,7 +47,7 @@ class="text-[10px] font-bold uppercase text-gray-400 tracking-widest leading-non
<div @class([ <div @class([
'pt-4 border-t', 'pt-4 border-t',
'border-gray-100 dark:border-gray-800' => !$card->is_attended, 'border-gray-100 dark:border-gray-700' => !$card->is_attended,
'border-primary-200 dark:border-primary-800' => $card->is_attended, 'border-primary-200 dark:border-primary-800' => $card->is_attended,
])> ])>
<div class="flex items-center justify-between mb-3"> <div class="flex items-center justify-between mb-3">
@ -96,13 +95,13 @@ class="text-[10px] font-bold text-gray-400 uppercase tracking-widest leading-non
</div> </div>
</div> </div>
</div> </div>
@endforeach @empty
</div>
@else
<x-filament::empty-state icon="heroicon-o-finger-print" heading="Tidak ada data yang ditemukan" <x-filament::empty-state icon="heroicon-o-finger-print" heading="Tidak ada data yang ditemukan"
description="Setelah jadwal Anda muncul, Anda dapat melakukan presensi di sini." iconColor="gray"> description="Setelah jadwal Anda muncul, Anda dapat melakukan presensi di sini. Pastikan Anda mengecek kembali pada jam perkuliahan."
iconColor="gray">
</x-filament::empty-state> </x-filament::empty-state>
@endif @endforelse
</div>
</x-filament::section> </x-filament::section>
<x-filament::section> <x-filament::section>

View File

@ -1,9 +1,6 @@
<div class="space-y-3"> <div class="space-y-3">
@if ($attendances->isEmpty()) @forelse ($attendances as $attendance)
<x-filament::empty-state icon="heroicon-o-user-group" heading="Tidak ada data yang ditemukan" @if ($loop->first)
description="Belum ada mahasiswa yang melakukan presensi pada sesi ini." iconColor="gray">
</x-filament::empty-state>
@else
<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 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">
@ -14,7 +11,7 @@ class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:bord
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200 dark:divide-white/5"> <tbody class="divide-y divide-gray-200 dark:divide-white/5">
@foreach ($attendances as $attendance) @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">
@ -31,16 +28,21 @@ class="inline-flex items-center rounded-md bg-success-50 dark:bg-success-400/10
</span> </span>
</td> </td>
</tr> </tr>
@endforeach @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">{{ $attendances->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
<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> </div>

View File

@ -17,9 +17,8 @@
Sesi yang dijadwalkan pada {{ $this->today_date }} Sesi yang dijadwalkan pada {{ $this->today_date }}
</x-slot> </x-slot>
@if ($this->todaySessions->isNotEmpty())
<div class="space-y-4"> <div class="space-y-4">
@foreach ($this->todaySessions as $session) @forelse ($this->todaySessions as $session)
<a href="{{ $session->url }}" class="{{ $session->card_classes }}"> <a href="{{ $session->url }}" class="{{ $session->card_classes }}">
<div class="flex flex-1 items-start gap-4 p-5"> <div class="flex flex-1 items-start gap-4 p-5">
<div class="{{ $session->session_badge_classes }}"> <div class="{{ $session->session_badge_classes }}">
@ -103,13 +102,12 @@ class="text-[9px] uppercase font-bold text-gray-500 mt-1 leading-none tracking-w
</div> </div>
</a> </a>
@endforeach @empty
</div>
@else
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan" <x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
description="Tidak ada jadwal hari ini." iconColor="gray"> description="Tidak ada sesi perkuliahan yang dijadwalkan untuk hari ini." iconColor="gray">
</x-filament::empty-state> </x-filament::empty-state>
@endif @endforelse
</div>
</x-filament::section> </x-filament::section>
<!-- All Courses Section --> <!-- All Courses Section -->
@ -121,9 +119,8 @@ class="text-[9px] uppercase font-bold text-gray-500 mt-1 leading-none tracking-w
Pilih mata kuliah untuk melihat dan mengelola semua riwayat sesi. Pilih mata kuliah untuk melihat dan mengelola semua riwayat sesi.
</x-slot> </x-slot>
@if ($this->courses->isNotEmpty())
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach ($this->courses as $course) @forelse ($this->courses as $course)
<a href="{{ $course->url }}" <a href="{{ $course->url }}"
class="fi-card rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm overflow-hidden transition hover:shadow-md h-fit block group"> class="fi-card rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm overflow-hidden transition hover:shadow-md h-fit block group">
@ -155,12 +152,13 @@ class="text-base font-bold text-gray-950 dark:text-white leading-tight group-hov
</div> </div>
</div> </div>
</a> </a>
@endforeach @empty
</div> <div class="col-span-full text-center">
@else <x-filament::empty-state icon="heroicon-o-academic-cap" heading="Mata Kuliah Belum Terdaftar"
<x-filament::empty-state icon="heroicon-o-presentation-chart-bar" heading="Tidak ada data yang ditemukan" description="Belum ada mata kuliah yang terdaftar untuk semester aktif ini." iconColor="gray">
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray">
</x-filament::empty-state> </x-filament::empty-state>
@endif </div>
@endforelse
</div>
</x-filament::section> </x-filament::section>
</x-filament-panels::page> </x-filament-panels::page>

View File

@ -1,8 +1,7 @@
<x-filament-panels::page> <x-filament-panels::page>
<x-filament::section> <x-filament::section>
@if ($this->sessions->isNotEmpty())
<div class="space-y-4"> <div class="space-y-4">
@foreach ($this->sessions as $session) @forelse ($this->sessions as $session)
<div <div
class="fi-card p-5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm flex items-center justify-between hover:shadow-md transition"> class="fi-card p-5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm flex items-center justify-between hover:shadow-md transition">
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
@ -58,12 +57,11 @@ class="flex items-center gap-1.5 font-bold text-success-600 dark:text-success-40
{{ ($this->deleteSessionAction)(['session' => $session->id]) }} {{ ($this->deleteSessionAction)(['session' => $session->id]) }}
</div> </div>
</div> </div>
@endforeach @empty
</div>
@else
<x-filament::empty-state icon="heroicon-o-presentation-chart-bar" heading="Tidak ada data yang ditemukan" <x-filament::empty-state icon="heroicon-o-presentation-chart-bar" heading="Tidak ada data yang ditemukan"
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray"> description="Belum ada sesi perkuliahan yang dibuat untuk mata kuliah ini." iconColor="gray">
</x-filament::empty-state> </x-filament::empty-state>
@endif @endforelse
</div>
</x-filament::section> </x-filament::section>
</x-filament-panels::page> </x-filament-panels::page>