277 lines
16 KiB
PHP
277 lines
16 KiB
PHP
{{-- resources/views/siswa/history.blade.php --}}
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Riwayat Aktivitas - LearnMood')
|
|
|
|
@section('content')
|
|
<div class="space-y-4 md:space-y-6 pb-20 md:pb-0">
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 md:gap-4">
|
|
<div>
|
|
<h2 class="text-lg md:text-2xl font-bold text-gray-800">📋 Riwayat Aktivitas</h2>
|
|
<p class="text-xs md:text-sm text-gray-500">Lihat semua catatan belajarmu di sini</p>
|
|
</div>
|
|
|
|
<!-- Statistik Ringkas -->
|
|
<div class="overflow-x-auto pb-1 -mx-4 px-4 sm:mx-0 sm:px-0">
|
|
<div class="flex items-center gap-2 md:gap-3 bg-purple-50 px-3 md:px-4 py-2 rounded-lg min-w-max sm:min-w-0">
|
|
<div class="text-center px-2">
|
|
<span class="text-[10px] md:text-xs text-purple-600">Total</span>
|
|
<p class="text-base md:text-lg font-bold text-purple-700">{{ $stats['total'] }}</p>
|
|
</div>
|
|
<div class="w-px h-6 md:h-8 bg-purple-200"></div>
|
|
<div class="text-center px-2">
|
|
<span class="text-[10px] md:text-xs text-purple-600">Durasi</span>
|
|
<p class="text-base md:text-lg font-bold text-purple-700">{{ $stats['total_duration'] }} <span class="text-[10px]">mnt</span></p>
|
|
</div>
|
|
<div class="w-px h-6 md:h-8 bg-purple-200"></div>
|
|
<div class="text-center px-2">
|
|
<span class="text-[10px] md:text-xs text-purple-600">Rata-rata</span>
|
|
<p class="text-base md:text-lg font-bold text-purple-700">{{ $stats['avg_duration'] }} <span class="text-[10px]">mnt</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Section -->
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-3 md:p-4">
|
|
<form method="GET" action="{{ route('siswa.history') }}" class="space-y-3 md:space-y-4">
|
|
<div class="grid grid-cols-1 sm:grid-cols-4 gap-2 md:gap-3">
|
|
<!-- Filter Periode -->
|
|
<div>
|
|
<label class="block text-[10px] md:text-xs font-medium text-gray-500 mb-1">Periode</label>
|
|
<select name="period" class="w-full px-2 md:px-3 py-1.5 md:py-2 text-xs md:text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="all" {{ $period == 'all' ? 'selected' : '' }}>Semua Waktu</option>
|
|
<option value="7" {{ $period == '7' ? 'selected' : '' }}>7 Hari</option>
|
|
<option value="30" {{ $period == '30' ? 'selected' : '' }}>30 Hari</option>
|
|
<option value="90" {{ $period == '90' ? 'selected' : '' }}>90 Hari</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Filter Mood -->
|
|
<div>
|
|
<label class="block text-[10px] md:text-xs font-medium text-gray-500 mb-1">Mood</label>
|
|
<select name="mood" class="w-full px-2 md:px-3 py-1.5 md:py-2 text-xs md:text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="all" {{ $mood == 'all' ? 'selected' : '' }}>Semua Mood</option>
|
|
@foreach($moodList as $m)
|
|
<option value="{{ $m }}" {{ $mood == $m ? 'selected' : '' }}>{{ $m }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Tombol Cari & Reset -->
|
|
<div class="sm:col-span-2">
|
|
<label class="block text-[10px] md:text-xs font-medium text-gray-500 mb-1"> </label>
|
|
<div class="flex gap-1 md:gap-2">
|
|
<button type="submit" class="px-4 md:px-6 py-1.5 md:py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-xs md:text-sm whitespace-nowrap">
|
|
<i class="fas fa-search mr-1"></i> Cari
|
|
</button>
|
|
<a href="{{ route('siswa.history') }}" class="px-4 md:px-6 py-1.5 md:py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-xs md:text-sm whitespace-nowrap">
|
|
<i class="fas fa-sync-alt mr-1"></i> Reset
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tombol Reset Filter (jika ada filter aktif) -->
|
|
@if($period != 'all' || $mood != 'all')
|
|
<div class="flex justify-end">
|
|
<a href="{{ route('siswa.history') }}" class="text-[10px] md:text-xs text-gray-500 hover:text-gray-700 flex items-center gap-1">
|
|
<i class="fas fa-times"></i> Reset Semua Filter
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</form>
|
|
</div>
|
|
|
|
@if($activities->count() > 0)
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<!-- Desktop Table View -->
|
|
<div class="hidden md:block overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tanggal</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Waktu</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Durasi</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Mood</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tidur</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Rekomendasi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
@foreach($activities as $activity)
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-3 text-sm text-gray-800 whitespace-nowrap">
|
|
{{ \Carbon\Carbon::parse($activity->activity_date)->format('d M Y') }}
|
|
</td>
|
|
<td class="px-6 py-3 text-sm text-gray-800 whitespace-nowrap">
|
|
{{ $activity->start_time }} - {{ $activity->end_time }}
|
|
</td>
|
|
<td class="px-6 py-3 text-sm text-gray-800">
|
|
{{ $activity->duration_minutes }} menit
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span class="px-3 py-1 text-xs rounded-full font-medium
|
|
@if($activity->mood == 'Bagus') bg-green-100 text-green-700
|
|
@elseif($activity->mood == 'Lumayan') bg-blue-100 text-blue-700
|
|
@elseif($activity->mood == 'Biasa Saja') bg-gray-100 text-gray-700
|
|
@elseif($activity->mood == 'Cukup Jenuh') bg-yellow-100 text-yellow-700
|
|
@else bg-red-100 text-red-700 @endif">
|
|
{{ $activity->mood }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-3 text-sm text-gray-800">
|
|
{{ $activity->sleep_hours ?? $activity->sleep_duration ?? 7 }} jam
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
@if($activity->recommendation)
|
|
<span class="px-3 py-1 text-xs rounded-full font-medium
|
|
@if($activity->recommendation->category == 'Ringan') bg-yellow-100 text-yellow-700
|
|
@elseif($activity->recommendation->category == 'Sedang') bg-green-100 text-green-700
|
|
@else bg-blue-100 text-blue-700 @endif">
|
|
{{ $activity->recommendation->display_category }}
|
|
</span>
|
|
@else
|
|
<span class="text-xs text-gray-400">-</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Mobile Card View -->
|
|
<div class="md:hidden divide-y divide-gray-100">
|
|
@foreach($activities as $activity)
|
|
<div class="p-4 hover:bg-gray-50 transition-colors">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="font-semibold text-gray-800 text-sm">
|
|
{{ \Carbon\Carbon::parse($activity->activity_date)->format('d M Y') }}
|
|
</span>
|
|
<span class="text-sm font-medium text-gray-600">
|
|
{{ $activity->duration_minutes }} menit
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<!-- Mood -->
|
|
<div class="bg-gray-50 p-3 rounded-lg">
|
|
<span class="text-xs text-gray-500 block mb-1">Mood</span>
|
|
<span class="text-sm font-medium block
|
|
@if($activity->mood == 'Bagus') text-green-600
|
|
@elseif($activity->mood == 'Lumayan') text-blue-600
|
|
@elseif($activity->mood == 'Biasa Saja') text-gray-600
|
|
@elseif($activity->mood == 'Cukup Jenuh') text-yellow-600
|
|
@else text-red-600 @endif">
|
|
{{ $activity->mood }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Tidur -->
|
|
<div class="bg-gray-50 p-3 rounded-lg">
|
|
<span class="text-xs text-gray-500 block mb-1">Tidur</span>
|
|
<span class="text-sm font-medium text-gray-800 block">
|
|
{{ $activity->sleep_hours ?? $activity->sleep_duration ?? 7 }} jam
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Rekomendasi -->
|
|
<div class="bg-gray-50 p-3 rounded-lg">
|
|
<span class="text-xs text-gray-500 block mb-1">Rekomendasi</span>
|
|
@if($activity->recommendation)
|
|
<span class="text-sm font-medium block
|
|
@if($activity->recommendation->category == 'Ringan') text-yellow-600
|
|
@elseif($activity->recommendation->category == 'Sedang') text-green-600
|
|
@else text-blue-600 @endif">
|
|
{{ $activity->recommendation->display_category }}
|
|
</span>
|
|
@else
|
|
<span class="text-sm text-gray-400 block">-</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2 text-xs text-gray-500">
|
|
Waktu: {{ $activity->start_time }} - {{ $activity->end_time }}
|
|
</div>
|
|
|
|
<div class="mt-2 flex justify-end">
|
|
<span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full
|
|
@if($activity->mood == 'Bagus') bg-green-100 text-green-700
|
|
@elseif($activity->mood == 'Lumayan') bg-blue-100 text-blue-700
|
|
@elseif($activity->mood == 'Biasa Saja') bg-gray-100 text-gray-700
|
|
@elseif($activity->mood == 'Cukup Jenuh') bg-yellow-100 text-yellow-700
|
|
@else bg-red-100 text-red-700 @endif">
|
|
@if($activity->mood == 'Bagus') 😊
|
|
@elseif($activity->mood == 'Lumayan') 🙂
|
|
@elseif($activity->mood == 'Biasa Saja') 😐
|
|
@elseif($activity->mood == 'Cukup Jenuh') 😕
|
|
@else 😫 @endif
|
|
<span>{{ $activity->mood }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="px-4 md:px-6 py-3 border-t border-gray-100">
|
|
{{ $activities->links() }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistik Tambahan -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 md:gap-4">
|
|
<div class="bg-white rounded-xl p-3 md:p-4 border border-gray-100">
|
|
<p class="text-[10px] md:text-xs text-gray-500 mb-1">Konsistensi Belajar</p>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-xl md:text-2xl font-bold text-blue-600">{{ $stats['consistency'] }}%</span>
|
|
<span class="text-[8px] md:text-xs text-gray-500 mb-1">dari total hari</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 md:h-2 mt-2">
|
|
<div class="bg-blue-600 h-1.5 md:h-2 rounded-full" style="width: {{ $stats['consistency'] }}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-3 md:p-4 border border-gray-100">
|
|
<p class="text-[10px] md:text-xs text-gray-500 mb-1">Total Waktu Belajar</p>
|
|
@php
|
|
$hours = floor($stats['total_duration'] / 60);
|
|
$minutes = $stats['total_duration'] % 60;
|
|
@endphp
|
|
<span class="text-xl md:text-2xl font-bold text-green-600">
|
|
@if($hours > 0)
|
|
{{ $hours }} jam @if($minutes > 0) {{ $minutes }} menit @endif
|
|
@else
|
|
{{ $minutes }} menit
|
|
@endif
|
|
</span>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-3 md:p-4 border border-gray-100">
|
|
<p class="text-[10px] md:text-xs text-gray-500 mb-1">Rata-rata per Hari</p>
|
|
<span class="text-xl md:text-2xl font-bold text-purple-600">{{ $stats['avg_duration'] }} <span class="text-xs md:text-sm font-normal">menit</span></span>
|
|
</div>
|
|
</div>
|
|
|
|
@else
|
|
<!-- Empty State -->
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6 md:p-8 text-center">
|
|
<div class="w-16 h-16 md:w-20 md:h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3 md:mb-4">
|
|
<svg class="w-8 h-8 md:w-10 md:h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-base md:text-lg font-semibold text-gray-800 mb-1 md:mb-2">Belum Ada Riwayat</h3>
|
|
<p class="text-xs md:text-sm text-gray-500 mb-4 md:mb-6">Mulai catat aktivitas belajarmu untuk melihat riwayat di sini</p>
|
|
<a href="{{ route('siswa.input') }}" class="inline-flex items-center px-4 md:px-6 py-2 md:py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-xs md:text-sm">
|
|
<i class="fas fa-plus mr-2"></i> Input Sekarang
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endsection
|