514 lines
31 KiB
PHP
514 lines
31 KiB
PHP
{{-- resources/views/dashboard/siswa.blade.php --}}
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Dashboard Siswa - LearnMood')
|
|
|
|
@section('content')
|
|
<div class="space-y-6 md:space-y-6 pb-16 md:pb-0">
|
|
|
|
<!-- Welcome Card with Greeting Based on Time -->
|
|
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-6 text-white shadow-lg">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-xl md:text-2xl font-bold mb-2">{{ $greeting }}, <span class="block md:inline">{{ Auth::user()->name }}!</span> 👋</h2>
|
|
<p class="text-sm md:text-base text-blue-100">Pantau dan optimalkan waktu belajarmu dengan LearnMood</p>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<svg class="w-24 h-24 opacity-20" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Cards (tetap sama) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{{-- Card 1 --}}
|
|
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-all duration-300 hover:-translate-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500 mb-1">Total Hari Input</p>
|
|
<p class="text-2xl font-bold text-gray-800">{{ $totalDays }} <span class="text-sm font-normal text-gray-500">hari</span></p>
|
|
</div>
|
|
<div class="bg-blue-100 p-3 rounded-xl">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 text-xs text-gray-400 hidden md:block">
|
|
{{ $weekActivities->count() }} aktivitas dalam 7 hari terakhir
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 2 --}}
|
|
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-all duration-300 hover:-translate-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500 mb-1">Rata-rata Durasi</p>
|
|
<p class="text-2xl font-bold text-gray-800">{{ round($avgDuration) }} <span class="text-sm font-normal text-gray-500">menit</span></p>
|
|
</div>
|
|
<div class="bg-green-100 p-3 rounded-xl">
|
|
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 text-xs text-gray-400 hidden md:block">
|
|
Total: {{ $weekActivities->sum('duration_minutes') }} menit (7 hari)
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 3 --}}
|
|
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-all duration-300 hover:-translate-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500 mb-1">Status Hari Ini</p>
|
|
@if($todayActivity)
|
|
<p class="text-lg font-semibold text-green-600 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
|
|
Sudah Input
|
|
</p>
|
|
@else
|
|
<p class="text-lg font-semibold text-yellow-600 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></span>
|
|
Belum Input
|
|
</p>
|
|
@endif
|
|
</div>
|
|
<div class="bg-purple-100 p-3 rounded-xl">
|
|
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
@if(!$todayActivity)
|
|
<div class="mt-2 md:mt-2">
|
|
<a href="{{ route('siswa.input') }}" class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
|
</svg>
|
|
Input sekarang
|
|
</a>
|
|
</div>
|
|
@else
|
|
<div class="mt-2 md:mt-2">
|
|
<a href="{{ route('siswa.input') }}" class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
|
</svg>
|
|
Edit aktivitas
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Mobile-only summary --}}
|
|
<div class="md:hidden grid grid-cols-2 gap-2 text-xs text-gray-500">
|
|
<div class="bg-gray-50 p-2 rounded-lg text-center">
|
|
<span class="block font-medium text-gray-700">{{ $weekActivities->count() }}</span>
|
|
<span>Aktivitas 7 hari</span>
|
|
</div>
|
|
<div class="bg-gray-50 p-2 rounded-lg text-center">
|
|
<span class="block font-medium text-gray-700">{{ $weekActivities->sum('duration_minutes') }} menit</span>
|
|
<span>Total 7 hari</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Today's Activity & Recommendation -->
|
|
@if($todayActivity)
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Today's Activity Card -->
|
|
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="bg-blue-100 p-2 rounded-lg">
|
|
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Aktivitas Hari Ini</h3>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-100">
|
|
<span class="text-gray-600 flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
Durasi Belajar
|
|
</span>
|
|
<span class="font-semibold text-gray-900">{{ $todayActivity->duration_minutes }} menit</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-100">
|
|
<span class="text-gray-600 flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
Mood
|
|
</span>
|
|
<span class="px-3 py-1 rounded-full text-sm font-medium
|
|
@if($todayActivity->mood == 'Bagus') bg-green-100 text-green-800
|
|
@elseif($todayActivity->mood == 'Lumayan') bg-blue-100 text-blue-800
|
|
@elseif($todayActivity->mood == 'Biasa Saja') bg-yellow-100 text-yellow-800
|
|
@elseif($todayActivity->mood == 'Cukup Jenuh') bg-orange-100 text-orange-800
|
|
@else bg-red-100 text-red-800 @endif">
|
|
{{ $todayActivity->mood }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center py-2">
|
|
<span class="text-gray-600 flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646"></path>
|
|
</svg>
|
|
Jam Tidur
|
|
</span>
|
|
<span class="font-semibold text-gray-900">
|
|
@if(is_numeric($todayActivity->sleep_hours))
|
|
{{ number_format($todayActivity->sleep_hours, 1) }} jam
|
|
@else
|
|
{{ $todayActivity->sleep_hours ?? '0' }} jam
|
|
@endif
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Today's Recommendation Card -->
|
|
@if(isset($latestRecommendation) && $latestRecommendation && $latestRecommendation->recommendation_date->isToday())
|
|
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="bg-yellow-100 p-2 rounded-lg">
|
|
<svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Rekomendasi Hari Ini</h3>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-100">
|
|
<span class="text-gray-600">Kategori</span>
|
|
<span class="px-3 py-1 rounded-full text-sm font-medium
|
|
@if($latestRecommendation->category == 'Ringan') bg-yellow-100 text-yellow-800
|
|
@elseif($latestRecommendation->category == 'Sedang') bg-green-100 text-green-800
|
|
@else bg-blue-100 text-blue-800 @endif">
|
|
{{ $latestRecommendation->display_category }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-100">
|
|
<span class="text-gray-600">Durasi yang Disarankan</span>
|
|
<span class="font-semibold text-gray-900">{{ $latestRecommendation->recommended_minutes }} menit</span>
|
|
</div>
|
|
|
|
@if($latestRecommendation->notes)
|
|
<div class="mt-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-100">
|
|
<p class="text-sm text-gray-700 italic">"{{ $latestRecommendation->notes }}"</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@elseif($todayActivity)
|
|
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="bg-gray-100 p-2 rounded-lg">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Rekomendasi</h3>
|
|
</div>
|
|
|
|
<div class="text-center py-6">
|
|
<svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<p class="text-gray-500">Rekomendasi akan segera tersedia</p>
|
|
<p class="text-sm text-gray-400 mt-2">Setelah sistem menganalisis polamu</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<!-- CTA Input -->
|
|
<div class="bg-white rounded-xl p-8 shadow-sm border border-gray-100 text-center hover:shadow-md transition-all duration-300">
|
|
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse">
|
|
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-medium text-gray-900 mb-2">Belum Input Hari Ini</h3>
|
|
<p class="text-gray-500 mb-6">Yuk catat aktivitas belajarmu hari ini untuk mendapatkan rekomendasi personal!</p>
|
|
<a href="{{ route('siswa.input') }}" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors shadow-md hover:shadow-lg">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
|
</svg>
|
|
Input Sekarang
|
|
</a>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Recent Activities -->
|
|
@if($weekActivities->count() > 0)
|
|
<div class="bg-white rounded-xl p-4 md:p-6 shadow-sm border border-gray-100">
|
|
<div class="flex items-center justify-between mb-3 md:mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="bg-purple-100 p-1.5 md:p-2 rounded-lg">
|
|
<svg class="w-4 h-4 md:w-5 md:h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-sm md:text-lg font-semibold text-gray-800">Aktivitas 7 Hari Terakhir</h3>
|
|
</div>
|
|
<a href="{{ route('siswa.history') }}" class="text-xs md:text-sm text-blue-600 hover:text-blue-800 flex items-center gap-1 bg-blue-50 px-2 md:px-3 py-1 rounded-full">
|
|
<span class="hidden md:inline">Lihat Semua</span>
|
|
<span class="md:hidden">Semua</span>
|
|
<svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
{{-- DESKTOP VIEW - Table --}}
|
|
<div class="hidden md:block overflow-x-auto">
|
|
<table class="min-w-full">
|
|
<thead>
|
|
<tr class="border-b border-gray-200 bg-gray-50">
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-600 rounded-tl-lg">Tanggal</th>
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Durasi</th>
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Mood</th>
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-600 rounded-tr-lg">Tidur</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($weekActivities as $index => $activity)
|
|
<tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors {{ $index === 0 ? 'bg-blue-50/30' : '' }}">
|
|
<td class="py-3 px-4 text-sm text-gray-800">
|
|
<div class="flex items-center gap-2">
|
|
@if($index === 0)
|
|
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
|
@endif
|
|
{{ \Carbon\Carbon::parse($activity->activity_date)->isoFormat('dddd, D MMM YYYY') }}
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4 text-sm text-gray-800">
|
|
<span class="font-medium">{{ $activity->duration_minutes }}</span> menit
|
|
</td>
|
|
<td class="py-3 px-4 text-sm">
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium
|
|
@if($activity->mood == 'Bagus') bg-green-100 text-green-800
|
|
@elseif($activity->mood == 'Lumayan') bg-blue-100 text-blue-800
|
|
@elseif($activity->mood == 'Biasa Saja') bg-yellow-100 text-yellow-800
|
|
@elseif($activity->mood == 'Cukup Jenuh') bg-orange-100 text-orange-800
|
|
@else bg-red-100 text-red-800 @endif">
|
|
{{ $activity->mood }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-sm text-gray-800">
|
|
{{-- 🔥 PERBAIKAN: Tampilkan nilai sleep_hours langsung --}}
|
|
@if(isset($activity->sleep_hours) && is_numeric($activity->sleep_hours))
|
|
<span class="font-medium">{{ number_format($activity->sleep_hours, 1) }}</span> jam
|
|
@elseif(isset($activity->sleep_duration))
|
|
@php
|
|
// Konversi sleep_duration (enum) ke angka
|
|
$sleepMap = ['<4' => 3, '4-7' => 5.5, '>7' => 8];
|
|
$sleepValue = $sleepMap[$activity->sleep_duration] ?? 7;
|
|
@endphp
|
|
<span class="font-medium">{{ $sleepValue }}</span> jam
|
|
@else
|
|
<span class="text-gray-400">-</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- MOBILE VIEW - Card List --}}
|
|
<div class="md:hidden space-y-3">
|
|
@foreach($weekActivities as $index => $activity)
|
|
<div class="bg-gray-50 rounded-xl p-3 {{ $index === 0 ? 'border-l-4 border-green-500' : '' }}">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<div class="flex items-center gap-2">
|
|
@if($index === 0)
|
|
<span class="text-xs font-medium text-green-600 bg-green-100 px-2 py-0.5 rounded-full">Hari Ini</span>
|
|
@endif
|
|
<span class="text-xs text-gray-500">
|
|
{{ \Carbon\Carbon::parse($activity->activity_date)->isoFormat('dddd, D MMM') }}
|
|
</span>
|
|
</div>
|
|
<span class="text-xs text-gray-400">
|
|
{{ \Carbon\Carbon::parse($activity->activity_date)->diffForHumans() }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<div class="bg-white rounded-lg p-2 text-center">
|
|
<div class="text-xs text-gray-500 mb-1">Durasi</div>
|
|
<div class="font-bold text-gray-800">
|
|
<span class="text-base">{{ $activity->duration_minutes }}</span>
|
|
<span class="text-xs text-gray-500 ml-0.5">mnt</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg p-2 text-center">
|
|
<div class="text-xs text-gray-500 mb-1">Mood</div>
|
|
<div class="flex items-center justify-center gap-1">
|
|
@if($activity->mood == 'Bagus')
|
|
<span class="text-lg">😊</span>
|
|
<span class="text-xs font-medium text-green-600">Bagus</span>
|
|
@elseif($activity->mood == 'Lumayan')
|
|
<span class="text-lg">🙂</span>
|
|
<span class="text-xs font-medium text-blue-600">Lumayan</span>
|
|
@elseif($activity->mood == 'Biasa Saja')
|
|
<span class="text-lg">😐</span>
|
|
<span class="text-xs font-medium text-yellow-600">Biasa</span>
|
|
@elseif($activity->mood == 'Cukup Jenuh')
|
|
<span class="text-lg">😕</span>
|
|
<span class="text-xs font-medium text-orange-600">Jenuh</span>
|
|
@else
|
|
<span class="text-lg">😫</span>
|
|
<span class="text-xs font-medium text-red-600">Jenuh</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg p-2 text-center">
|
|
<div class="text-xs text-gray-500 mb-1">Tidur</div>
|
|
<div class="font-bold text-gray-800">
|
|
{{-- 🔥 PERBAIKAN: Tampilkan nilai sleep_hours langsung --}}
|
|
@if(isset($activity->sleep_hours) && is_numeric($activity->sleep_hours))
|
|
<span class="text-base">{{ number_format($activity->sleep_hours, 1) }}</span>
|
|
<span class="text-xs text-gray-500 ml-0.5">jam</span>
|
|
@elseif(isset($activity->sleep_duration))
|
|
@php
|
|
$sleepMap = ['<4' => 3, '4-7' => 5.5, '>7' => 8];
|
|
$sleepValue = $sleepMap[$activity->sleep_duration] ?? 7;
|
|
@endphp
|
|
<span class="text-base">{{ $sleepValue }}</span>
|
|
<span class="text-xs text-gray-500 ml-0.5">jam</span>
|
|
@else
|
|
<span class="text-base text-gray-400">-</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if(isset($activity->recommendation) && $activity->recommendation)
|
|
<div class="mt-2 pt-2 border-t border-gray-200">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-gray-500">Rekomendasi:</span>
|
|
<span class="text-xs px-2 py-0.5 rounded-full
|
|
@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>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
|
|
<a href="{{ route('siswa.history') }}" class="block w-full text-center bg-gray-100 text-gray-700 py-3 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors mt-2">
|
|
Lihat Semua Riwayat
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Summary Row -->
|
|
<div class="hidden md:grid mt-4 pt-4 border-t border-gray-200 grid-cols-3 gap-4 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-gray-500">Total durasi 7 hari:</span>
|
|
<span class="font-semibold text-gray-800">{{ $weekActivities->sum('duration_minutes') }} menit</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-gray-500">Rata-rata harian:</span>
|
|
<span class="font-semibold text-gray-800">{{ round($weekActivities->avg('duration_minutes')) }} menit/hari</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-gray-500">Mood terbanyak:</span>
|
|
<span class="font-semibold text-gray-800">
|
|
@php
|
|
$topMood = $weekActivities->groupBy('mood')->map->count()->sortDesc()->keys()->first();
|
|
@endphp
|
|
{{ $topMood ?? '-' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:hidden mt-4 pt-3 border-t border-gray-200 grid grid-cols-2 gap-2 text-xs">
|
|
<div class="bg-gray-100 rounded-lg p-2 text-center">
|
|
<span class="text-gray-500 block">Total 7 hari</span>
|
|
<span class="font-bold text-gray-800">{{ $weekActivities->sum('duration_minutes') }} menit</span>
|
|
</div>
|
|
<div class="bg-gray-100 rounded-lg p-2 text-center">
|
|
<span class="text-gray-500 block">Rata-rata</span>
|
|
<span class="font-bold text-gray-800">{{ round($weekActivities->avg('duration_minutes')) }} menit/hari</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Tips Card -->
|
|
<div class="bg-gradient-to-r from-green-500 to-teal-500 rounded-xl p-6 text-white shadow-lg">
|
|
<div class="flex items-start gap-4">
|
|
<div class="bg-white/20 p-3 rounded-xl backdrop-blur-sm hidden md:block">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-semibold text-lg mb-1">Tips Belajar Sehat</h4>
|
|
<p class="text-green-100 text-sm">Konsistensi lebih penting daripada durasi. Belajar 30 menit setiap hari lebih baik daripada 3 jam sekali seminggu. Jangan lupa istirahat yang cukup!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Debug Info -->
|
|
@if(config('app.debug'))
|
|
<div class="mt-8 p-4 bg-gray-100 rounded-lg text-xs border border-gray-300 hidden md:block">
|
|
<details>
|
|
<summary class="font-bold mb-2 cursor-pointer text-gray-700">🔧 Debug Info (Click to expand)</summary>
|
|
<div class="mt-2 space-y-1 text-gray-600">
|
|
<p>Total Days: {{ $totalDays }}</p>
|
|
<p>Avg Duration: {{ $avgDuration }}</p>
|
|
<p>Today Activity: {{ $todayActivity ? 'Yes' : 'No' }}</p>
|
|
<p>Week Activities Count: {{ $weekActivities->count() }}</p>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
@endif
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: .7; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.overflow-x-auto {
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
a, button {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
.bg-white.rounded-xl.p-6 {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush |