refactor: replace conditional rendering with forelse and update card styling across attendance and learning modules
This commit is contained in:
Yoga Pangestu
parent
2d57ab4f0a
commit
3c9e2f1e2f
@ -14,7 +14,6 @@
|
||||
use Filament\Forms\Concerns\InteractsWithForms;
|
||||
use Filament\Forms\Contracts\HasForms;
|
||||
use Filament\Resources\Pages\Page;
|
||||
use Filament\Support\Icons\Heroicon;
|
||||
use Filament\Tables\Columns\TextColumn;
|
||||
use Filament\Tables\Concerns\InteractsWithTable;
|
||||
use Filament\Tables\Contracts\HasTable;
|
||||
@ -237,8 +236,8 @@ public function table(Table $table): Table
|
||||
})
|
||||
->searchable(),
|
||||
])
|
||||
->emptyStateIcon(Heroicon::OutlinedCheckCircle)
|
||||
->emptyStateDescription('Setelah Anda membuat data pertama, maka akan muncul disini.')
|
||||
->emptyStateIcon('heroicon-o-finger-print')
|
||||
->emptyStateDescription('Belum ada riwayat presensi yang tercatat untuk Anda saat ini.')
|
||||
->deferFilters(false)
|
||||
->paginated([25, 50, 100, 'all'])
|
||||
->defaultPaginationPageOption(25);
|
||||
|
||||
@ -191,8 +191,8 @@ public static function table(Table $table): Table
|
||||
...DefaultBulkActions::make('Materi'),
|
||||
]),
|
||||
])
|
||||
->emptyStateIcon(Heroicon::OutlinedBookOpen)
|
||||
->emptyStateDescription('Setelah Anda membuat data pertama, maka akan muncul disini.')
|
||||
->emptyStateIcon('heroicon-o-book-open')
|
||||
->emptyStateDescription('Belum ada materi pembelajaran yang terdaftar dalam sistem saat ini.')
|
||||
->defaultSort('created_at', 'desc')
|
||||
->deferFilters(false)
|
||||
->paginated([25, 50, 100, 'all'])
|
||||
|
||||
@ -17,105 +17,104 @@ class="fi-section-content rounded-xl border border-info-200 bg-info-50 dark:bg-i
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($this->schedulesGrouped->isNotEmpty())
|
||||
<div class="overflow-x-auto">
|
||||
<div class="flex flex-nowrap gap-6 min-w-max pb-4">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="flex flex-nowrap gap-6 min-w-max pb-4">
|
||||
@forelse ($this->schedulesGrouped as $dayName => $daySchedules)
|
||||
<section class="w-80 shrink-0 space-y-4">
|
||||
|
||||
@foreach ($this->schedulesGrouped as $dayName => $daySchedules)
|
||||
<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">
|
||||
<x-heroicon-o-calendar class="w-5 h-5 text-primary-500" />
|
||||
<h2 class="text-lg font-semibold tracking-tight text-gray-950 dark:text-white">
|
||||
{{ $dayName }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 border-b border-gray-200 dark:border-gray-700 pb-2">
|
||||
<x-heroicon-o-calendar class="w-5 h-5 text-primary-500" />
|
||||
<h2 class="text-lg font-semibold tracking-tight text-gray-950 dark:text-white">
|
||||
{{ $dayName }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
@foreach ($daySchedules as $schedule)
|
||||
<div
|
||||
class="fi-card rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm hover:shadow-md transition">
|
||||
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-primary-50 dark:bg-primary-500/10 px-2 py-1 text-xs font-semibold text-primary-700 dark:text-primary-300 ring-1 ring-inset ring-primary-600/20">
|
||||
{{ $schedule->course_code }}
|
||||
</span>
|
||||
|
||||
@if ($schedule->mode_label)
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-{{ $schedule->mode_color }}-50 dark:bg-{{ $schedule->mode_color }}-500/10 px-2 py-1 text-xs font-semibold text-{{ $schedule->mode_color }}-700 dark:text-{{ $schedule->mode_color }}-300 ring-1 ring-inset ring-{{ $schedule->mode_color }}-600/20">
|
||||
{{ $schedule->mode_label }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if ($schedule->room)
|
||||
<span
|
||||
class="inline-flex items-center text-xs text-gray-500 dark:text-gray-400">
|
||||
<x-heroicon-m-map-pin class="w-4 h-4 mr-1 opacity-70" />
|
||||
{{ $schedule->room }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<h3
|
||||
class="text-base font-semibold leading-tight text-gray-950 dark:text-white">
|
||||
{{ $schedule->course_name }}
|
||||
</h3>
|
||||
|
||||
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
|
||||
<x-heroicon-m-user class="w-4 h-4 mr-1.5 opacity-70" />
|
||||
<span class="truncate">{{ $schedule->lecturer }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 mt-1">
|
||||
@if ($schedule->semester)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-md bg-amber-50 dark:bg-amber-500/10 px-2 py-1 text-xs font-medium text-amber-700 dark:text-amber-300 ring-1 ring-inset ring-amber-600/20">
|
||||
<x-heroicon-m-academic-cap class="w-3 h-3" />
|
||||
Semester {{ $schedule->semester }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between pt-3 border-t border-gray-100 dark:border-gray-800 text-sm">
|
||||
<div
|
||||
class="flex items-center font-medium text-gray-800 dark:text-gray-200">
|
||||
<x-heroicon-o-clock class="w-4 h-4 mr-1.5 text-primary-500" />
|
||||
{{ $schedule->time_range }}
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
@foreach ($daySchedules as $schedule)
|
||||
<div
|
||||
class="fi-card rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm hover:shadow-md transition">
|
||||
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="text-[11px] font-semibold tracking-wide text-gray-400 uppercase">
|
||||
{{ $schedule->credit }} SKS
|
||||
class="inline-flex items-center rounded-md bg-primary-50 dark:bg-primary-500/10 px-2 py-1 text-xs font-semibold text-primary-700 dark:text-primary-300 ring-1 ring-inset ring-primary-600/20">
|
||||
{{ $schedule->course_code }}
|
||||
</span>
|
||||
|
||||
@if ($schedule->mode_label)
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-{{ $schedule->mode_color }}-50 dark:bg-{{ $schedule->mode_color }}-500/10 px-2 py-1 text-xs font-semibold text-{{ $schedule->mode_color }}-700 dark:text-{{ $schedule->mode_color }}-300 ring-1 ring-inset ring-{{ $schedule->mode_color }}-600/20">
|
||||
{{ $schedule->mode_label }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@canAny(['Update:CourseSchedule', 'Delete:CourseSchedule'])
|
||||
<div
|
||||
class="flex items-center justify-end gap-1 pt-3 border-t border-gray-100 dark:border-gray-800">
|
||||
{{ ($this->editScheduleAction)(['schedule' => $schedule->id]) }}
|
||||
|
||||
{{ ($this->deleteScheduleAction)(['schedule' => $schedule->id]) }}
|
||||
</div>
|
||||
@endcanAny
|
||||
@if ($schedule->room)
|
||||
<span
|
||||
class="inline-flex items-center text-xs text-gray-500 dark:text-gray-400">
|
||||
<x-heroicon-m-map-pin class="w-4 h-4 mr-1 opacity-70" />
|
||||
{{ $schedule->room }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
<h3
|
||||
class="text-base font-semibold leading-tight text-gray-950 dark:text-white">
|
||||
{{ $schedule->course_name }}
|
||||
</h3>
|
||||
|
||||
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
|
||||
<x-heroicon-m-user class="w-4 h-4 mr-1.5 opacity-70" />
|
||||
<span class="truncate">{{ $schedule->lecturer }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 mt-1">
|
||||
@if ($schedule->semester)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-md bg-amber-50 dark:bg-amber-500/10 px-2 py-1 text-xs font-medium text-amber-700 dark:text-amber-300 ring-1 ring-inset ring-amber-600/20">
|
||||
<x-heroicon-m-academic-cap class="w-3 h-3" />
|
||||
Semester {{ $schedule->semester }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between pt-3 border-t border-gray-100 dark:border-gray-800 text-sm">
|
||||
<div
|
||||
class="flex items-center font-medium text-gray-800 dark:text-gray-200">
|
||||
<x-heroicon-o-clock class="w-4 h-4 mr-1.5 text-primary-500" />
|
||||
{{ $schedule->time_range }}
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="text-[11px] font-semibold tracking-wide text-gray-400 uppercase">
|
||||
{{ $schedule->credit }} SKS
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@canAny(['Update:CourseSchedule', 'Delete:CourseSchedule'])
|
||||
<div
|
||||
class="flex items-center justify-end gap-1 pt-3 border-t border-gray-100 dark:border-gray-800">
|
||||
{{ ($this->editScheduleAction)(['schedule' => $schedule->id]) }}
|
||||
|
||||
{{ ($this->deleteScheduleAction)(['schedule' => $schedule->id]) }}
|
||||
</div>
|
||||
@endcanAny
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@empty
|
||||
<div class="w-full">
|
||||
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
|
||||
description="Belum ada jadwal perkuliahan yang terdaftar untuk kriteria ini. Hubungi administrator jika jadwal Anda belum muncul."
|
||||
iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
@else
|
||||
<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">
|
||||
</x-filament::empty-state>
|
||||
@endif
|
||||
</div>
|
||||
</x-filament::section>
|
||||
</x-filament-panels::page>
|
||||
|
||||
@ -6,9 +6,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($this->studyGroups->isNotEmpty())
|
||||
<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="{{ $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
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@empty
|
||||
<x-filament::empty-state icon="heroicon-o-users" heading="Tidak ada data yang ditemukan"
|
||||
description="Anda belum terdaftar dalam kelompok belajar apapun untuk saat ini." iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
@endforelse
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($this->studyGroups->isEmpty())
|
||||
<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">
|
||||
</x-filament::empty-state>
|
||||
@endif
|
||||
</x-filament::section>
|
||||
</x-filament-panels::page>
|
||||
|
||||
@ -3,115 +3,115 @@
|
||||
<x-slot name="heading">Tugas Saya</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">
|
||||
@foreach ($this->assignmentCards as $card)
|
||||
<div class="{{ $card->card_classes }}">
|
||||
<a href="{{ \App\Filament\Resources\Learning\Assignments\AssignmentResource::getUrl('submit', ['record' => $card->id]) }}"
|
||||
wire:navigate
|
||||
class="flex flex-1 items-start gap-4 p-5 text-left min-w-0 hover:bg-primary-500/5 transition-colors cursor-pointer">
|
||||
<div class="{{ $card->icon_wrapper_classes }}">
|
||||
<x-filament::icon :icon="$card->status_icon" class="h-6 w-6" />
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
@forelse ($this->assignmentCards as $card)
|
||||
<div class="{{ $card->card_classes }}">
|
||||
<a href="{{ \App\Filament\Resources\Learning\Assignments\AssignmentResource::getUrl('submit', ['record' => $card->id]) }}"
|
||||
wire:navigate
|
||||
class="flex flex-1 items-start gap-4 p-5 text-left min-w-0 hover:bg-primary-500/5 transition-colors cursor-pointer">
|
||||
<div class="{{ $card->icon_wrapper_classes }}">
|
||||
<x-filament::icon :icon="$card->status_icon" class="h-6 w-6" />
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div>
|
||||
<p class="font-semibold text-gray-900 dark:text-white">
|
||||
{{ $card->title }}</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{{ $card->course_name }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-1.5">
|
||||
@if ($card->is_pinned)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400 px-2.5 py-0.5 text-xs font-semibold">
|
||||
📌 Dipinned
|
||||
</span>
|
||||
@endif
|
||||
@if ($card->is_new)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400 px-2.5 py-0.5 text-xs font-semibold">
|
||||
✨ Baru
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($card->is_group)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 px-2.5 py-0.5 text-xs font-semibold">
|
||||
👥 Kelompok
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<span class="{{ $card->status_badge_classes }}">
|
||||
@if ($card->status_icon)
|
||||
<x-filament::icon :icon="$card->status_icon" class="h-3 w-3" />
|
||||
@endif
|
||||
{{ $card->status_label }}
|
||||
</span>
|
||||
|
||||
@if ($card->is_urgent)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-danger-500 text-white px-2.5 py-0.5 text-xs font-semibold animate-pulse">
|
||||
🔥 Segera!
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div>
|
||||
<p class="font-semibold text-gray-900 dark:text-white">
|
||||
{{ $card->title }}</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{{ $card->course_name }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<x-filament::icon icon="heroicon-o-clock" class="h-3.5 w-3.5" />
|
||||
Batas: {{ $card->due_date_formatted }}
|
||||
</span>
|
||||
@if ($card->submitted_at_formatted)
|
||||
<span class="flex items-center gap-1 text-success-600 dark:text-success-400">
|
||||
<x-filament::icon icon="heroicon-o-arrow-up-tray" class="h-3.5 w-3.5" />
|
||||
Dikumpulkan:
|
||||
{{ $card->submitted_at_formatted }}
|
||||
<div class="flex flex-wrap items-center gap-1.5">
|
||||
@if ($card->is_pinned)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400 px-2.5 py-0.5 text-xs font-semibold">
|
||||
📌 Dipinned
|
||||
</span>
|
||||
@endif
|
||||
@if ($card->is_new)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400 px-2.5 py-0.5 text-xs font-semibold">
|
||||
✨ Baru
|
||||
</span>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
@if ($card->is_group)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 px-2.5 py-0.5 text-xs font-semibold">
|
||||
👥 Kelompok
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<span class="{{ $card->status_badge_classes }}">
|
||||
@if ($card->status_icon)
|
||||
<x-filament::icon :icon="$card->status_icon" class="h-3 w-3" />
|
||||
@endif
|
||||
{{ $card->status_label }}
|
||||
</span>
|
||||
|
||||
@if ($card->is_urgent)
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-danger-500 text-white px-2.5 py-0.5 text-xs font-semibold animate-pulse">
|
||||
🔥 Segera!
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<x-filament::icon icon="heroicon-o-clock" class="h-3.5 w-3.5" />
|
||||
Batas: {{ $card->due_date_formatted }}
|
||||
</span>
|
||||
@if ($card->submitted_at_formatted)
|
||||
<span class="flex items-center gap-1 text-success-600 dark:text-success-400">
|
||||
<x-filament::icon icon="heroicon-o-arrow-up-tray" class="h-3.5 w-3.5" />
|
||||
Dikumpulkan:
|
||||
{{ $card->submitted_at_formatted }}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
@if ($card->can_submit_actual)
|
||||
<x-filament::icon icon="heroicon-o-chevron-right"
|
||||
class="h-4 w-4 text-gray-400 group-hover:text-primary-500 mt-1 transition-colors shrink-0" />
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-start justify-center border-l border-gray-100 dark:border-gray-700 p-1 gap-3 p-3">
|
||||
{{ ($this->pinAction)(['record' => $card->id]) }}
|
||||
|
||||
@canAny(['Update:Assignment', 'Delete:Assignment'])
|
||||
{{ ($this->editAssignmentAction)(['record' => $card->id]) }}
|
||||
|
||||
{{ ($this->deleteAssignmentAction)(['record' => $card->id]) }}
|
||||
@endcanAny
|
||||
</div>
|
||||
|
||||
@if ($card->is_group && !$card->is_submitted)
|
||||
<div class="absolute right-12 top-2 pointer-events-none">
|
||||
<x-filament::icon
|
||||
icon="{{ $card->is_leader ? 'heroicon-m-sparkles' : 'heroicon-m-user-group' }}"
|
||||
class="{{ $card->indicator_icon_classes }}"
|
||||
title="{{ $card->is_leader ? 'Anda adalah Ketua Kelompok' : 'Anda adalah Anggota Kelompok' }}" />
|
||||
</div>
|
||||
@if ($card->can_submit_actual)
|
||||
<x-filament::icon icon="heroicon-o-chevron-right"
|
||||
class="h-4 w-4 text-gray-400 group-hover:text-primary-500 mt-1 transition-colors shrink-0" />
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-start justify-center border-l border-gray-100 dark:border-gray-700 p-1 gap-3 p-3">
|
||||
{{ ($this->pinAction)(['record' => $card->id]) }}
|
||||
|
||||
@canAny(['Update:Assignment', 'Delete:Assignment'])
|
||||
{{ ($this->editAssignmentAction)(['record' => $card->id]) }}
|
||||
|
||||
{{ ($this->deleteAssignmentAction)(['record' => $card->id]) }}
|
||||
@endcanAny
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($card->is_group && !$card->is_submitted)
|
||||
<div class="absolute right-12 top-2 pointer-events-none">
|
||||
<x-filament::icon
|
||||
icon="{{ $card->is_leader ? 'heroicon-m-sparkles' : 'heroicon-m-user-group' }}"
|
||||
class="{{ $card->indicator_icon_classes }}"
|
||||
title="{{ $card->is_leader ? 'Anda adalah Ketua Kelompok' : 'Anda adalah Anggota Kelompok' }}" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@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>
|
||||
</x-filament::section>
|
||||
</x-filament-panels::page>
|
||||
|
||||
@ -3,106 +3,105 @@
|
||||
<x-slot name="heading">Sesi Kuliah</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">
|
||||
@foreach ($this->scheduleCards as $card)
|
||||
<div class="break-inside-avoid mb-6">
|
||||
<div class="{{ $card->card_classes }}">
|
||||
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
|
||||
@forelse ($this->scheduleCards as $card)
|
||||
<div class="break-inside-avoid mb-6">
|
||||
<div class="{{ $card->card_classes }}">
|
||||
|
||||
<div class="p-6 space-y-4 flex-1">
|
||||
<div class="space-y-1">
|
||||
<h3 class="{{ $card->title_classes }}">
|
||||
<x-heroicon-o-book-open @class([
|
||||
'w-5 h-5 shrink-0',
|
||||
'opacity-40' => !$card->is_attended,
|
||||
'text-primary-500' => $card->is_attended,
|
||||
]) />
|
||||
{{ $card->course_name }}
|
||||
</h3>
|
||||
<div class="{{ $card->lecturer_wrapper_classes }}">
|
||||
<x-heroicon-m-user @class(['w-3.5 h-3.5 shrink-0', 'opacity-50' => !$card->is_attended]) />
|
||||
<span class="text-[11px] font-medium leading-none">
|
||||
{{ $card->lecturer_name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400 pt-4">
|
||||
<div class="{{ $card->icon_wrapper_classes }}">
|
||||
<x-heroicon-m-clock @class([
|
||||
'w-4 h-4',
|
||||
'text-primary-600 dark:text-primary-300' => !$card->is_attended,
|
||||
'text-primary-700 dark:text-primary-200' => $card->is_attended,
|
||||
]) />
|
||||
</div>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase text-gray-400 tracking-widest leading-none mb-1">Waktu
|
||||
Kuliah</span>
|
||||
<span class="{{ $card->time_label_classes }}">
|
||||
{{ $card->time_range }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div @class([
|
||||
'pt-4 border-t',
|
||||
'border-gray-100 dark:border-gray-800' => !$card->is_attended,
|
||||
'border-primary-200 dark:border-primary-800' => $card->is_attended,
|
||||
])>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span
|
||||
class="text-[10px] font-bold text-gray-400 uppercase tracking-widest leading-none">Status</span>
|
||||
<span class="{{ $card->status_badge_classes }}">
|
||||
{{ $card->status_label }}
|
||||
</span>
|
||||
</div>
|
||||
@if ($card->is_attended)
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase text-gray-400 tracking-widest leading-none">
|
||||
Tercatat: <span
|
||||
class="text-primary-600 dark:text-primary-200">{{ $card->attended_at }}</span>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="p-6 space-y-4 flex-1">
|
||||
<div class="space-y-1">
|
||||
<h3 class="{{ $card->title_classes }}">
|
||||
<x-heroicon-o-book-open @class([
|
||||
'w-5 h-5 shrink-0',
|
||||
'opacity-40' => !$card->is_attended,
|
||||
'text-primary-500' => $card->is_attended,
|
||||
]) />
|
||||
{{ $card->course_name }}
|
||||
</h3>
|
||||
<div class="{{ $card->lecturer_wrapper_classes }}">
|
||||
<x-heroicon-m-user @class(['w-3.5 h-3.5 shrink-0', 'opacity-50' => !$card->is_attended]) />
|
||||
<span class="text-[11px] font-medium leading-none">
|
||||
{{ $card->lecturer_name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="{{ $card->footer_classes }}">
|
||||
@if ($card->can_attend)
|
||||
<x-filament::button wire:click="attend({{ $card->id }})" color="primary"
|
||||
size="xs"
|
||||
class="rounded-lg shadow-sm font-bold uppercase tracking-tight text-[10px]">
|
||||
Absen Sekarang
|
||||
</x-filament::button>
|
||||
@elseif ($card->is_attended)
|
||||
<div
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-primary-800 border border-primary-300 dark:border-primary-600 shadow-sm">
|
||||
<x-heroicon-m-hand-thumb-up
|
||||
class="w-3.5 h-3.5 text-primary-600 dark:text-primary-200" />
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400 pt-4">
|
||||
<div class="{{ $card->icon_wrapper_classes }}">
|
||||
<x-heroicon-m-clock @class([
|
||||
'w-4 h-4',
|
||||
'text-primary-600 dark:text-primary-300' => !$card->is_attended,
|
||||
'text-primary-700 dark:text-primary-200' => $card->is_attended,
|
||||
]) />
|
||||
</div>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span
|
||||
class="text-[10px] font-bold text-primary-700 dark:text-primary-200 uppercase tracking-tight">
|
||||
Selesai
|
||||
class="text-[10px] font-bold uppercase text-gray-400 tracking-widest leading-none mb-1">Waktu
|
||||
Kuliah</span>
|
||||
<span class="{{ $card->time_label_classes }}">
|
||||
{{ $card->time_range }}
|
||||
</span>
|
||||
</div>
|
||||
@else
|
||||
<div class="px-2 py-1">
|
||||
</div>
|
||||
|
||||
<div @class([
|
||||
'pt-4 border-t',
|
||||
'border-gray-100 dark:border-gray-700' => !$card->is_attended,
|
||||
'border-primary-200 dark:border-primary-800' => $card->is_attended,
|
||||
])>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span
|
||||
class="text-[10px] font-bold text-gray-400 uppercase tracking-widest leading-none italic">Belum
|
||||
Dibuka</span>
|
||||
class="text-[10px] font-bold text-gray-400 uppercase tracking-widest leading-none">Status</span>
|
||||
<span class="{{ $card->status_badge_classes }}">
|
||||
{{ $card->status_label }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
@if ($card->is_attended)
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase text-gray-400 tracking-widest leading-none">
|
||||
Tercatat: <span
|
||||
class="text-primary-600 dark:text-primary-200">{{ $card->attended_at }}</span>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="{{ $card->footer_classes }}">
|
||||
@if ($card->can_attend)
|
||||
<x-filament::button wire:click="attend({{ $card->id }})" color="primary"
|
||||
size="xs"
|
||||
class="rounded-lg shadow-sm font-bold uppercase tracking-tight text-[10px]">
|
||||
Absen Sekarang
|
||||
</x-filament::button>
|
||||
@elseif ($card->is_attended)
|
||||
<div
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-primary-800 border border-primary-300 dark:border-primary-600 shadow-sm">
|
||||
<x-heroicon-m-hand-thumb-up
|
||||
class="w-3.5 h-3.5 text-primary-600 dark:text-primary-200" />
|
||||
<span
|
||||
class="text-[10px] font-bold text-primary-700 dark:text-primary-200 uppercase tracking-tight">
|
||||
Selesai
|
||||
</span>
|
||||
</div>
|
||||
@else
|
||||
<div class="px-2 py-1">
|
||||
<span
|
||||
class="text-[10px] font-bold text-gray-400 uppercase tracking-widest leading-none italic">Belum
|
||||
Dibuka</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<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">
|
||||
</x-filament::empty-state>
|
||||
@endif
|
||||
</div>
|
||||
@empty
|
||||
<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. Pastikan Anda mengecek kembali pada jam perkuliahan."
|
||||
iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-filament::section>
|
||||
|
||||
<x-filament::section>
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
<div class="space-y-3">
|
||||
@if ($attendances->isEmpty())
|
||||
<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">
|
||||
<table class="w-full text-sm text-left divider-y dark:divider-white/5">
|
||||
<thead class="bg-gray-50 dark:bg-white/5">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-white/5">
|
||||
@foreach ($attendances as $attendance)
|
||||
@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">
|
||||
<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>
|
||||
</tr>
|
||||
</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">
|
||||
@ -31,16 +28,21 @@ class="inline-flex items-center rounded-md bg-success-50 dark:bg-success-400/10
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</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">{{ $attendances->count() }}
|
||||
Mahasiswa</span>
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
@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
|
||||
</div>
|
||||
|
||||
@ -17,99 +17,97 @@
|
||||
Sesi yang dijadwalkan pada {{ $this->today_date }}
|
||||
</x-slot>
|
||||
|
||||
@if ($this->todaySessions->isNotEmpty())
|
||||
<div class="space-y-4">
|
||||
@foreach ($this->todaySessions as $session)
|
||||
<a href="{{ $session->url }}" class="{{ $session->card_classes }}">
|
||||
<div class="flex flex-1 items-start gap-4 p-5">
|
||||
<div class="{{ $session->session_badge_classes }}">
|
||||
<span class="text-[9px] uppercase leading-none opacity-60 mb-0.5 font-bold">Sesi</span>
|
||||
<span class="text-sm font-bold italic">Ke-{{ $session->session_number }}</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
@forelse ($this->todaySessions as $session)
|
||||
<a href="{{ $session->url }}" class="{{ $session->card_classes }}">
|
||||
<div class="flex flex-1 items-start gap-4 p-5">
|
||||
<div class="{{ $session->session_badge_classes }}">
|
||||
<span class="text-[9px] uppercase leading-none opacity-60 mb-0.5 font-bold">Sesi</span>
|
||||
<span class="text-sm font-bold italic">Ke-{{ $session->session_number }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div>
|
||||
<h3 class="{{ $session->title_classes }}">
|
||||
{{ $session->course_name }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 font-medium">
|
||||
{{ $session->course_code }} • {{ $session->lecturer }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="{{ $session->status_badge_classes }}">
|
||||
<x-heroicon-s-clock class="w-3.5 h-3.5" />
|
||||
{{ $session->time_range }}
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-lg hover:bg-amber-50 dark:hover:bg-amber-900/10 cursor-pointer transition-colors"
|
||||
wire:click="mountAction('viewMaterials', { session: {{ $session->id }} })"
|
||||
onclick="event.stopPropagation()">
|
||||
<x-heroicon-o-document-text class="w-4 h-4 text-amber-500" />
|
||||
<span class="text-xs font-bold text-gray-600 dark:text-gray-400">
|
||||
{{ $session->materials_count }}<span
|
||||
class="ml-1 font-medium text-gray-400">Materi</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-lg hover:bg-primary-50 dark:hover:bg-primary-900/10 cursor-pointer transition-colors"
|
||||
wire:click="mountAction('viewAssignments', { session: {{ $session->id }} })"
|
||||
onclick="event.stopPropagation()">
|
||||
<x-heroicon-o-pencil-square class="w-4 h-4 text-primary-500" />
|
||||
<span class="text-xs font-bold text-gray-600 dark:text-gray-400">
|
||||
{{ $session->assignments_count }}<span
|
||||
class="ml-1 font-medium text-gray-400">Tugas</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@if ($session->is_pending)
|
||||
<div
|
||||
class="mt-2 flex items-center gap-1.5 text-[10px] text-gray-400 dark:text-gray-500 font-medium italic">
|
||||
<x-heroicon-m-calendar-days class="w-3.5 h-3.5" />
|
||||
Sesuai Jadwal Hari Ini
|
||||
</div>
|
||||
@endif
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div>
|
||||
<h3 class="{{ $session->title_classes }}">
|
||||
{{ $session->course_name }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 font-medium">
|
||||
{{ $session->course_code }} • {{ $session->lecturer }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="{{ $session->status_badge_classes }}">
|
||||
<x-heroicon-s-clock class="w-3.5 h-3.5" />
|
||||
{{ $session->time_range }}
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-lg hover:bg-amber-50 dark:hover:bg-amber-900/10 cursor-pointer transition-colors"
|
||||
wire:click="mountAction('viewMaterials', { session: {{ $session->id }} })"
|
||||
onclick="event.stopPropagation()">
|
||||
<x-heroicon-o-document-text class="w-4 h-4 text-amber-500" />
|
||||
<span class="text-xs font-bold text-gray-600 dark:text-gray-400">
|
||||
{{ $session->materials_count }}<span
|
||||
class="ml-1 font-medium text-gray-400">Materi</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-lg hover:bg-primary-50 dark:hover:bg-primary-900/10 cursor-pointer transition-colors"
|
||||
wire:click="mountAction('viewAssignments', { session: {{ $session->id }} })"
|
||||
onclick="event.stopPropagation()">
|
||||
<x-heroicon-o-pencil-square class="w-4 h-4 text-primary-500" />
|
||||
<span class="text-xs font-bold text-gray-600 dark:text-gray-400">
|
||||
{{ $session->assignments_count }}<span
|
||||
class="ml-1 font-medium text-gray-400">Tugas</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="{{ $session->attendance_section_classes }}">
|
||||
@if ($session->is_pending)
|
||||
<div
|
||||
class="flex items-center gap-2 text-gray-400 dark:text-gray-500 p-2 opacity-50">
|
||||
<x-heroicon-m-clock class="w-5 h-5" />
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col items-center justify-center min-w-[80px] p-2 hover:bg-white/50 dark:hover:bg-white/5 rounded-lg transition-colors cursor-pointer"
|
||||
onclick="event.preventDefault(); event.stopPropagation();"
|
||||
wire:click="mountAction('viewAttendance', { session: {{ $session->id }} })">
|
||||
<div class="flex flex-col items-center">
|
||||
<span
|
||||
class="text-lg font-bold text-primary-600 dark:text-primary-400 leading-none">
|
||||
{{ $session->attendances_count }}<span
|
||||
class="text-[10px] text-gray-400 font-normal ml-0.5">/{{ $session->total_students }}</span>
|
||||
</span>
|
||||
<div
|
||||
class="mt-1.5 w-12 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-500 rounded-full transition-all duration-500"
|
||||
style="width: {{ $session->attendance_percentage }}%"></div>
|
||||
</div>
|
||||
<span
|
||||
class="text-[9px] uppercase font-bold text-gray-500 mt-1 leading-none tracking-wider">
|
||||
{{ $session->attendance_percentage }}% Hadir
|
||||
</span>
|
||||
</div>
|
||||
class="mt-2 flex items-center gap-1.5 text-[10px] text-gray-400 dark:text-gray-500 font-medium italic">
|
||||
<x-heroicon-m-calendar-days class="w-3.5 h-3.5" />
|
||||
Sesuai Jadwal Hari Ini
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
|
||||
description="Tidak ada jadwal hari ini." iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
@endif
|
||||
<div class="{{ $session->attendance_section_classes }}">
|
||||
@if ($session->is_pending)
|
||||
<div
|
||||
class="flex items-center gap-2 text-gray-400 dark:text-gray-500 p-2 opacity-50">
|
||||
<x-heroicon-m-clock class="w-5 h-5" />
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col items-center justify-center min-w-[80px] p-2 hover:bg-white/50 dark:hover:bg-white/5 rounded-lg transition-colors cursor-pointer"
|
||||
onclick="event.preventDefault(); event.stopPropagation();"
|
||||
wire:click="mountAction('viewAttendance', { session: {{ $session->id }} })">
|
||||
<div class="flex flex-col items-center">
|
||||
<span
|
||||
class="text-lg font-bold text-primary-600 dark:text-primary-400 leading-none">
|
||||
{{ $session->attendances_count }}<span
|
||||
class="text-[10px] text-gray-400 font-normal ml-0.5">/{{ $session->total_students }}</span>
|
||||
</span>
|
||||
<div
|
||||
class="mt-1.5 w-12 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-500 rounded-full transition-all duration-500"
|
||||
style="width: {{ $session->attendance_percentage }}%"></div>
|
||||
</div>
|
||||
<span
|
||||
class="text-[9px] uppercase font-bold text-gray-500 mt-1 leading-none tracking-wider">
|
||||
{{ $session->attendance_percentage }}% Hadir
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
@empty
|
||||
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
|
||||
description="Tidak ada sesi perkuliahan yang dijadwalkan untuk hari ini." iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-filament::section>
|
||||
|
||||
<!-- All Courses Section -->
|
||||
@ -121,46 +119,46 @@ 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.
|
||||
</x-slot>
|
||||
|
||||
@if ($this->courses->isNotEmpty())
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@foreach ($this->courses as $course)
|
||||
<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">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@forelse ($this->courses as $course)
|
||||
<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">
|
||||
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-primary-50 dark:bg-primary-500/10 px-2 py-1 text-xs font-semibold text-primary-700 dark:text-primary-300 ring-1 ring-inset ring-primary-600/20">
|
||||
{{ $course->code }}
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-primary-50 dark:bg-primary-500/10 px-2 py-1 text-xs font-semibold text-primary-700 dark:text-primary-300 ring-1 ring-inset ring-primary-600/20">
|
||||
{{ $course->code }}
|
||||
</span>
|
||||
|
||||
<div class="flex items-center gap-2 text-gray-400 dark:text-gray-500">
|
||||
<span class="text-xs font-medium">
|
||||
{{ $course->sessions_count }} Sesi
|
||||
</span>
|
||||
|
||||
<div class="flex items-center gap-2 text-gray-400 dark:text-gray-500">
|
||||
<span class="text-xs font-medium">
|
||||
{{ $course->sessions_count }} Sesi
|
||||
</span>
|
||||
<x-heroicon-m-chevron-right
|
||||
class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<h3
|
||||
class="text-base font-bold text-gray-950 dark:text-white leading-tight group-hover:text-primary-600 dark:group-hover:text-primary-400 transition">
|
||||
{{ $course->name }}
|
||||
</h3>
|
||||
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
|
||||
<x-heroicon-m-user class="w-4 h-4 mr-1.5 opacity-70" />
|
||||
<span class="truncate">{{ $course->lecturer }}</span>
|
||||
</div>
|
||||
<x-heroicon-m-chevron-right
|
||||
class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<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">
|
||||
</x-filament::empty-state>
|
||||
@endif
|
||||
|
||||
<div class="space-y-1">
|
||||
<h3
|
||||
class="text-base font-bold text-gray-950 dark:text-white leading-tight group-hover:text-primary-600 dark:group-hover:text-primary-400 transition">
|
||||
{{ $course->name }}
|
||||
</h3>
|
||||
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
|
||||
<x-heroicon-m-user class="w-4 h-4 mr-1.5 opacity-70" />
|
||||
<span class="truncate">{{ $course->lecturer }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@empty
|
||||
<div class="col-span-full text-center">
|
||||
<x-filament::empty-state icon="heroicon-o-academic-cap" heading="Mata Kuliah Belum Terdaftar"
|
||||
description="Belum ada mata kuliah yang terdaftar untuk semester aktif ini." iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-filament::section>
|
||||
</x-filament-panels::page>
|
||||
|
||||
@ -1,69 +1,67 @@
|
||||
<x-filament-panels::page>
|
||||
<x-filament::section>
|
||||
@if ($this->sessions->isNotEmpty())
|
||||
<div class="space-y-4">
|
||||
@foreach ($this->sessions as $session)
|
||||
<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">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="space-y-4">
|
||||
@forelse ($this->sessions as $session)
|
||||
<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">
|
||||
<div class="flex items-start gap-4">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-primary-100 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300 font-bold border border-primary-200 dark:border-primary-500/20">
|
||||
<span class="text-[10px] uppercase leading-none opacity-60 mb-0.5 mt-1">Sesi</span>
|
||||
<span class="text-sm leading-none mb-1 text-primary-600 dark:text-primary-400 font-bold">Ke-{{ $session->session_number }}</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-primary-100 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300 font-bold border border-primary-200 dark:border-primary-500/20">
|
||||
<span class="text-[10px] uppercase leading-none opacity-60 mb-0.5 mt-1">Sesi</span>
|
||||
<span class="text-sm leading-none mb-1 text-primary-600 dark:text-primary-400 font-bold">Ke-{{ $session->session_number }}</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="flex items-center gap-1.5 font-bold text-gray-900 dark:text-white">
|
||||
<x-heroicon-o-calendar class="w-4 h-4 text-primary-500" />
|
||||
{{ $session->date_formatted }}
|
||||
class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="flex items-center gap-1.5 font-bold text-gray-900 dark:text-white">
|
||||
<x-heroicon-o-calendar class="w-4 h-4 text-primary-500" />
|
||||
{{ $session->date_formatted }}
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 font-medium">
|
||||
<x-heroicon-o-clock class="w-4 h-4 text-primary-500" />
|
||||
{{ $session->time_range }}
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div
|
||||
class="flex items-center gap-1.5 font-bold text-success-600 dark:text-success-400 hover:bg-success-50 dark:hover:bg-success-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
wire:click="mountAction('viewAttendance', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-user-group class="w-4 h-4" />
|
||||
{{ $session->attendances_count }}<span class="text-[10px] opacity-60 ml-0.5">/{{ $session->total_students }}</span> Presensi
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 font-medium">
|
||||
<x-heroicon-o-clock class="w-4 h-4 text-primary-500" />
|
||||
{{ $session->time_range }}
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div
|
||||
class="flex items-center gap-1.5 font-bold text-success-600 dark:text-success-400 hover:bg-success-50 dark:hover:bg-success-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
wire:click="mountAction('viewAttendance', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-user-group class="w-4 h-4" />
|
||||
{{ $session->attendances_count }}<span class="text-[10px] opacity-60 ml-0.5">/{{ $session->total_students }}</span> Presensi
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-2">
|
||||
<div class="flex-1 h-1 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-success-500 rounded-full transition-all duration-500" style="width: {{ $session->attendance_percentage }}%"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-gray-500">{{ $session->attendance_percentage }}%</span>
|
||||
<div class="flex items-center gap-2 px-2">
|
||||
<div class="flex-1 h-1 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-success-500 rounded-full transition-all duration-500" style="width: {{ $session->attendance_percentage }}%"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-gray-500">{{ $session->attendance_percentage }}%</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 font-bold text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
wire:click="mountAction('viewMaterials', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-document-text class="w-4 h-4" />
|
||||
{{ $session->materials_count }} Materi
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 font-bold text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
wire:click="mountAction('viewAssignments', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-pencil-square class="w-4 h-4" />
|
||||
{{ $session->assignments_count }} Tugas
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 font-bold text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
wire:click="mountAction('viewMaterials', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-document-text class="w-4 h-4" />
|
||||
{{ $session->materials_count }} Materi
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 font-bold text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
wire:click="mountAction('viewAssignments', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-pencil-square class="w-4 h-4" />
|
||||
{{ $session->assignments_count }} Tugas
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
{{ ($this->viewAttendanceAction)(['session' => $session->id]) }}
|
||||
{{ ($this->viewMaterialsAction)(['session' => $session->id]) }}
|
||||
{{ ($this->viewAssignmentsAction)(['session' => $session->id]) }}
|
||||
{{ ($this->editSessionAction)(['session' => $session->id]) }}
|
||||
{{ ($this->deleteSessionAction)(['session' => $session->id]) }}
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<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">
|
||||
</x-filament::empty-state>
|
||||
@endif
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
{{ ($this->viewAttendanceAction)(['session' => $session->id]) }}
|
||||
{{ ($this->viewMaterialsAction)(['session' => $session->id]) }}
|
||||
{{ ($this->viewAssignmentsAction)(['session' => $session->id]) }}
|
||||
{{ ($this->editSessionAction)(['session' => $session->id]) }}
|
||||
{{ ($this->deleteSessionAction)(['session' => $session->id]) }}
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<x-filament::empty-state icon="heroicon-o-presentation-chart-bar" heading="Tidak ada data yang ditemukan"
|
||||
description="Belum ada sesi perkuliahan yang dibuat untuk mata kuliah ini." iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-filament::section>
|
||||
</x-filament-panels::page>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user