193 lines
7.9 KiB
PHP
193 lines
7.9 KiB
PHP
@extends('guru.layouts.app')
|
||
|
||
@section('title', 'Dashboard Guru')
|
||
|
||
@push('styles')
|
||
<style>
|
||
.dash-header { margin-bottom: 28px; }
|
||
.dash-title { font-size: 22px; font-weight: 800; color: #0f1f3d; margin-bottom: 2px; }
|
||
.dash-sub { font-size: 13px; color: #94a3b8; }
|
||
|
||
/* STAT CARDS */
|
||
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
|
||
|
||
.stat-card {
|
||
border-radius: 20px; padding: 28px 24px;
|
||
position: relative; overflow: hidden;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
animation: fadeUp 0.4s ease both;
|
||
}
|
||
|
||
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
|
||
|
||
.stat-card:nth-child(1) { background: linear-gradient(135deg, #eef4ff, #c5d9ff); animation-delay: 0s; }
|
||
.stat-card:nth-child(2) { background: linear-gradient(135deg, #e8fff3, #b8f5d4); animation-delay: 0.07s; }
|
||
.stat-card:nth-child(3) { background: linear-gradient(135deg, #fff7e6, #ffe4b2); animation-delay: 0.14s; }
|
||
|
||
.stat-card::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; opacity: 0.15; right: -30px; bottom: -30px; }
|
||
.stat-card:nth-child(1)::after { background: #2b8ef3; }
|
||
.stat-card:nth-child(2)::after { background: #22c55e; }
|
||
.stat-card:nth-child(3)::after { background: #f97316; }
|
||
|
||
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
|
||
.stat-card:nth-child(1) .stat-label { color: #1d5fb8; }
|
||
.stat-card:nth-child(2) .stat-label { color: #15803d; }
|
||
.stat-card:nth-child(3) .stat-label { color: #c2651a; }
|
||
|
||
.stat-num { font-size: 42px; font-weight: 800; line-height: 1; color: #0f1f3d; }
|
||
.stat-icon { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0.7; }
|
||
.stat-card:nth-child(1) .stat-icon { background: rgba(43,142,243,0.15); }
|
||
.stat-card:nth-child(2) .stat-icon { background: rgba(34,197,94,0.15); }
|
||
.stat-card:nth-child(3) .stat-icon { background: rgba(249,115,22,0.15); }
|
||
|
||
/* INFO CARD */
|
||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; animation: fadeUp 0.4s ease 0.25s both; }
|
||
|
||
.dash-card { background: white; border-radius: 20px; border: 1.5px solid #e8f0fb; padding: 24px; box-shadow: 0 4px 20px rgba(43,142,243,0.06); }
|
||
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
|
||
.card-title { font-size: 15px; font-weight: 700; color: #0f1f3d; }
|
||
.card-badge { font-size: 11px; font-weight: 700; background: #e8f4ff; color: #2b8ef3; padding: 3px 10px; border-radius: 99px; text-decoration: none; }
|
||
.card-badge:hover { background: #dbeeff; color: #2b8ef3; }
|
||
|
||
/* Mapel list */
|
||
.mapel-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; background: #f8faff; transition: background 0.2s; }
|
||
.mapel-item:hover { background: #eef4ff; }
|
||
.mapel-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||
.mapel-name { font-size: 13px; font-weight: 600; color: #1e293b; flex: 1; }
|
||
.mapel-kelas { font-size: 11px; color: #94a3b8; }
|
||
|
||
/* Quick links */
|
||
.quick-link {
|
||
display: flex; align-items: center; gap: 14px;
|
||
padding: 14px 16px; border-radius: 14px;
|
||
background: #f8faff; border: 1.5px solid #e8f0fb;
|
||
text-decoration: none; margin-bottom: 10px;
|
||
transition: all 0.2s;
|
||
}
|
||
.quick-link:hover { background: #eef4ff; border-color: #2b8ef3; transform: translateX(4px); }
|
||
.ql-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
|
||
.ql-title { font-size: 13px; font-weight: 700; color: #0f1f3d; margin-bottom: 1px; }
|
||
.ql-desc { font-size: 11px; color: #94a3b8; }
|
||
.ql-arrow { margin-left: auto; color: #94a3b8; font-size: 16px; }
|
||
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(16px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.stat-grid { grid-template-columns: 1fr 1fr; }
|
||
.info-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
|
||
@php
|
||
use Carbon\Carbon;
|
||
use App\Models\Mengajar;
|
||
$guru = Auth::guard('guru')->user();
|
||
$greeting = Carbon::now()->hour < 12 ? 'Selamat Pagi' : (Carbon::now()->hour < 17 ? 'Selamat Siang' : 'Selamat Malam');
|
||
|
||
// Ambil mengajar dengan relasi mapel & kelas
|
||
$mengajars = Mengajar::with(['mapel', 'kelas'])
|
||
->where('id_guru', $guru->id_guru)
|
||
->get();
|
||
@endphp
|
||
|
||
<div class="dash-header">
|
||
<div class="dash-title">{{ $greeting }}, {{ $guru->nama ?? 'Guru' }} 👋</div>
|
||
<div class="dash-sub">{{ Carbon::now()->isoFormat('dddd, D MMMM Y') }}</div>
|
||
</div>
|
||
|
||
{{-- STAT CARDS --}}
|
||
<div class="stat-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🏫</div>
|
||
<div class="stat-label">Kelas Diampu</div>
|
||
<div class="stat-num">{{ $totalKelas }}</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📚</div>
|
||
<div class="stat-label">Mata Pelajaran</div>
|
||
<div class="stat-num">{{ $totalMapel }}</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">👨🎓</div>
|
||
<div class="stat-label">Siswa Diajar</div>
|
||
<div class="stat-num">{{ $totalSiswa }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- INFO GRID --}}
|
||
<div class="info-grid">
|
||
|
||
{{-- Daftar Mengajar --}}
|
||
<div class="dash-card">
|
||
<div class="card-head">
|
||
<div class="card-title">Mata Pelajaran & Kelas</div>
|
||
<a href="{{ route('guru.mapel.index') }}" class="card-badge">Lihat Semua →</a>
|
||
</div>
|
||
|
||
@php $dotColors = ['#2b8ef3','#22c55e','#f97316','#a855f7','#ec4899','#eab308']; @endphp
|
||
|
||
@forelse($mengajars->take(6) as $i => $m)
|
||
<div class="mapel-item">
|
||
<div class="mapel-dot" style="background:{{ $dotColors[$i % count($dotColors)] }}"></div>
|
||
<div class="mapel-name">{{ optional($m->mapel)->nama_mapel ?? '-' }}</div>
|
||
<div class="mapel-kelas">{{ optional($m->kelas)->nama_kelas ?? '-' }}</div>
|
||
</div>
|
||
@empty
|
||
<div style="text-align:center;padding:20px;color:#94a3b8;font-size:13px;">
|
||
Belum ada data mengajar.
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
|
||
{{-- Quick Links --}}
|
||
<div class="dash-card">
|
||
<div class="card-head">
|
||
<div class="card-title">Akses Cepat</div>
|
||
</div>
|
||
|
||
<a href="{{ route('guru.mapel.index') }}" class="quick-link">
|
||
<div class="ql-icon" style="background:#e8f4ff">📖</div>
|
||
<div>
|
||
<div class="ql-title">Upload Materi</div>
|
||
<div class="ql-desc">Tambah modul belajar untuk siswa</div>
|
||
</div>
|
||
<span class="ql-arrow">›</span>
|
||
</a>
|
||
|
||
<a href="{{ route('guru.mapel.index') }}" class="quick-link">
|
||
<div class="ql-icon" style="background:#eefaf3">📝</div>
|
||
<div>
|
||
<div class="ql-title">Buat Tugas</div>
|
||
<div class="ql-desc">Buat dan kelola tugas kelas</div>
|
||
</div>
|
||
<span class="ql-arrow">›</span>
|
||
</a>
|
||
|
||
<a href="{{ route('guru.tugas.history') }}" class="quick-link">
|
||
<div class="ql-icon" style="background:#fff7e6">📋</div>
|
||
<div>
|
||
<div class="ql-title">History Tugas</div>
|
||
<div class="ql-desc">Lihat pengumpulan tugas siswa</div>
|
||
</div>
|
||
<span class="ql-arrow">›</span>
|
||
</a>
|
||
|
||
<a href="{{ route('guru.leaderboard.index') }}" class="quick-link">
|
||
<div class="ql-icon" style="background:#f5eeff">🏆</div>
|
||
<div>
|
||
<div class="ql-title">Leaderboard</div>
|
||
<div class="ql-desc">Pantau peringkat EXP kelas</div>
|
||
</div>
|
||
<span class="ql-arrow">›</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
@endsection |