dashboard siswa update
This commit is contained in:
RetasyaSalsabila
parent
071b071603
commit
bc5a63ade9
|
|
@ -0,0 +1,109 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Siswa;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Carbon\Carbon;
|
||||
|
||||
// Sesuaikan nama model-model ini dengan yang kamu punya
|
||||
use App\Models\Tugas;
|
||||
use App\Models\TugasSiswa; // tabel pengumpulan tugas
|
||||
use App\Models\Challenge;
|
||||
use App\Models\ChallengeSiswa; // tabel progress challenge siswa
|
||||
use App\Models\Siswa;
|
||||
|
||||
class DashboardController extends Controller
|
||||
{
|
||||
/**
|
||||
* Pastikan hanya siswa yang sudah login yang bisa akses.
|
||||
*/
|
||||
public function __construct()
|
||||
{
|
||||
$this->middleware('auth:siswa');
|
||||
}
|
||||
|
||||
public function index()
|
||||
{
|
||||
/** @var \App\Models\Siswa $siswa */
|
||||
$siswa = Auth::guard('siswa')->user();
|
||||
|
||||
// =============================================
|
||||
// 1. TUGAS — ambil tugas yang belum dikumpulkan
|
||||
// dan deadline-nya belum lewat, urutkan by deadline
|
||||
// =============================================
|
||||
$tugasRaw = Tugas::with('mataPelajaran') // eager load relasi mapel
|
||||
->whereDoesntHave('pengumpulan', function ($q) use ($siswa) {
|
||||
// tugas yang BELUM dikumpulkan oleh siswa ini
|
||||
$q->where('siswa_id', $siswa->id);
|
||||
})
|
||||
->where('deadline', '>=', Carbon::now())
|
||||
->orderBy('deadline', 'asc')
|
||||
->take(5) // tampilkan maks 5 tugas di dashboard
|
||||
->get();
|
||||
|
||||
// Kelompokkan tugas berdasarkan tanggal deadline
|
||||
$tugasList = [];
|
||||
foreach ($tugasRaw as $tugas) {
|
||||
$tgl = Carbon::parse($tugas->deadline)
|
||||
->locale('id')
|
||||
->isoFormat('dddd, D MMMM YYYY'); // contoh: "Sabtu, 10 Mei 2025"
|
||||
|
||||
$tugasList[$tgl][] = [
|
||||
'jam' => Carbon::parse($tugas->deadline)->format('H.i'),
|
||||
'nama' => $tugas->judul,
|
||||
// sesuaikan nama kolom dengan model kamu
|
||||
'mapel' => 'Belum · ' . ($tugas->mataPelajaran->nama ?? '-'),
|
||||
];
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// 2. CHALLENGE MINGGUAN
|
||||
// =============================================
|
||||
$startMingguIni = Carbon::now()->startOfWeek();
|
||||
$endMingguIni = Carbon::now()->endOfWeek();
|
||||
|
||||
// Total challenge aktif minggu ini
|
||||
$challengeTotal = Challenge::whereBetween('created_at', [$startMingguIni, $endMingguIni])
|
||||
->where('is_active', true)
|
||||
->count();
|
||||
|
||||
// Challenge yang sudah diselesaikan siswa minggu ini
|
||||
$challengeDone = ChallengeSiswa::where('siswa_id', $siswa->id)
|
||||
->where('status', 'selesai')
|
||||
->whereBetween('created_at', [$startMingguIni, $endMingguIni])
|
||||
->count();
|
||||
|
||||
// =============================================
|
||||
// 3. TUGAS SELESAI MINGGU INI (untuk speech bubble mascot)
|
||||
// =============================================
|
||||
$tugasSelesai = TugasSiswa::where('siswa_id', $siswa->id)
|
||||
->whereBetween('created_at', [$startMingguIni, $endMingguIni])
|
||||
->count();
|
||||
|
||||
// =============================================
|
||||
// 4. LEADERBOARD — top 3 siswa berdasarkan total EXP
|
||||
// Asumsi: kolom 'exp' ada di tabel siswa
|
||||
// Sesuaikan jika EXP disimpan di tabel lain
|
||||
// =============================================
|
||||
$leaderboardRaw = Siswa::orderBy('exp', 'desc')
|
||||
->take(3)
|
||||
->get();
|
||||
|
||||
$leaderboard = $leaderboardRaw->map(function ($item, $index) {
|
||||
return [
|
||||
'rank' => $index + 1,
|
||||
'nama' => $item->nama,
|
||||
'exp' => $item->exp,
|
||||
];
|
||||
})->toArray();
|
||||
|
||||
return view('siswa.dashboard', compact(
|
||||
'tugasList',
|
||||
'challengeDone',
|
||||
'challengeTotal',
|
||||
'tugasSelesai',
|
||||
'leaderboard',
|
||||
));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,75 +1,498 @@
|
|||
@extends('siswa.layouts.app')
|
||||
@extends('layouts.siswa.app')
|
||||
|
||||
@section('title', 'Dashboard Siswa')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.dash-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2b8ef3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-link:hover { text-decoration: underline; }
|
||||
|
||||
/* TUGAS */
|
||||
.tugas-date-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
margin: 12px 0 8px;
|
||||
}
|
||||
|
||||
.tugas-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.tugas-item:last-child { border-bottom: none; }
|
||||
|
||||
.tugas-time {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
min-width: 38px;
|
||||
}
|
||||
|
||||
.tugas-info { flex: 1; }
|
||||
|
||||
.tugas-nama {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #2b8ef3;
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
|
||||
.tugas-mapel {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tugas-empty {
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* KALENDER */
|
||||
.calendar-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.calendar-nav button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.calendar-nav button:hover { background: #f1f5f9; }
|
||||
|
||||
.calendar-month {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar-table th {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
padding: 6px 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.calendar-table td {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
padding: 7px 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.calendar-table td:hover {
|
||||
background: #e6f0ff;
|
||||
color: #2b8ef3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.calendar-table td.today {
|
||||
background: #2b8ef3;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calendar-table td.other-month { color: #cbd5e1; }
|
||||
|
||||
/* CHALLENGE */
|
||||
.challenge-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.challenge-bolt {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #fef9c3;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.challenge-desc {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.progress-bar-wrap {
|
||||
background: #f1f5f9;
|
||||
border-radius: 99px;
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #2b8ef3, #60a5fa);
|
||||
border-radius: 99px;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.challenge-footer {
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* MASCOT */
|
||||
.mascot-card {
|
||||
background: #fffbeb;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
background: #fde68a;
|
||||
border-radius: 16px;
|
||||
padding: 16px 20px;
|
||||
font-size: 14px;
|
||||
color: #78350f;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.speech-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 7px solid transparent;
|
||||
border-top-color: #fde68a;
|
||||
}
|
||||
|
||||
.mascot-img {
|
||||
width: 130px;
|
||||
margin-top: 28px;
|
||||
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.mascot-placeholder {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
margin-top: 28px;
|
||||
background: linear-gradient(135deg, #dbeafe, #e0f2fe);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
/* LEADERBOARD */
|
||||
.lb-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.lb-item:last-child { border-bottom: none; }
|
||||
|
||||
.lb-rank-icon {
|
||||
font-size: 22px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lb-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2b8ef3, #60a5fa);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lb-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.lb-name.is-me { color: #2b8ef3; }
|
||||
|
||||
.lb-exp {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="container-fluid px-0">
|
||||
<h4 class="fw-bold text-primary mb-4">Dashboard</h4>
|
||||
@php $namaSaya = Auth::guard('siswa')->user()->nama ?? ''; @endphp
|
||||
|
||||
<!-- STATS CARDS -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm rounded-4 p-3">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div style="background:#e6f0ff; border-radius:12px; padding:12px;">
|
||||
<img src="{{ asset('images/icon/sidebar/mapel.png') }}" width="24" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted small">Tugas Aktif</div>
|
||||
<div class="fw-bold fs-5">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-grid">
|
||||
|
||||
{{-- ===== TUGAS ===== --}}
|
||||
<div class="dash-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Tugas</h2>
|
||||
<a href="{{ route('siswa.tugas') }}" class="card-link">LIHAT SEMUA</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm rounded-4 p-3">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div style="background:#e6f0ff; border-radius:12px; padding:12px;">
|
||||
<img src="{{ asset('images/icon/sidebar/challenge.png') }}" width="24" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted small">Challenge Selesai</div>
|
||||
<div class="fw-bold fs-5">0</div>
|
||||
@forelse($tugasList as $tanggal => $items)
|
||||
<p class="tugas-date-label">{{ $tanggal }}</p>
|
||||
@foreach($items as $item)
|
||||
<div class="tugas-item">
|
||||
<span class="tugas-time">{{ $item['jam'] }}</span>
|
||||
<span style="font-size:18px">📋</span>
|
||||
<div class="tugas-info">
|
||||
<p class="tugas-nama">{{ $item['nama'] }}</p>
|
||||
<p class="tugas-mapel">{{ $item['mapel'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm rounded-4 p-3">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div style="background:#e6f0ff; border-radius:12px; padding:12px;">
|
||||
<img src="{{ asset('images/icon/sidebar/lb.png') }}" width="24" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted small">Total EXP</div>
|
||||
<div class="fw-bold fs-5">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@empty
|
||||
<div class="tugas-empty">🎉 Tidak ada tugas yang pending!</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<!-- INFO SISWA -->
|
||||
<div class="card border-0 shadow-sm rounded-4 p-4">
|
||||
<h6 class="fw-bold mb-3">Informasi Akun</h6>
|
||||
<table class="table table-borderless mb-0">
|
||||
<tr>
|
||||
<td class="text-muted" width="150">Nama</td>
|
||||
<td>: {{ Auth::guard('siswa')->user()->nama }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">NISN</td>
|
||||
<td>: {{ Auth::guard('siswa')->user()->nisn }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Kelas</td>
|
||||
<td>: {{ Auth::guard('siswa')->user()->kelas->nama_kelas ?? '-' }}</td>
|
||||
</tr>
|
||||
{{-- ===== KALENDER ===== --}}
|
||||
<div class="dash-card">
|
||||
<div class="calendar-nav">
|
||||
<button id="prevMonth">‹</button>
|
||||
<span class="calendar-month" id="calMonthLabel"></span>
|
||||
<button id="nextMonth">›</button>
|
||||
</div>
|
||||
<table class="calendar-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>SUN</th><th>MON</th><th>TUE</th>
|
||||
<th>WED</th><th>THU</th><th>FRI</th><th>SAT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="calBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- ===== CHALLENGE MINGGUAN ===== --}}
|
||||
<div class="dash-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Challenge Mingguan</h2>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$persen = $challengeTotal > 0
|
||||
? round(($challengeDone / $challengeTotal) * 100)
|
||||
: 0;
|
||||
@endphp
|
||||
|
||||
<div class="challenge-item">
|
||||
<div class="challenge-bolt">⚡</div>
|
||||
<div style="flex:1">
|
||||
<p class="challenge-desc">Ayo kerjakan challenge dan dapatkan EXP tambahan!</p>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar-fill" style="width: {{ $persen }}%"></div>
|
||||
</div>
|
||||
<p class="progress-label">{{ $challengeDone }}/{{ $challengeTotal }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="challenge-footer">
|
||||
<a href="{{ route('siswa.challenge') }}" class="card-link">LIHAT SEMUA</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ===== MASCOT + SPEECH BUBBLE ===== --}}
|
||||
<div class="mascot-card">
|
||||
<div class="speech-bubble">
|
||||
@if($tugasSelesai > 0)
|
||||
Kamu sudah mengerjakan <strong>{{ $tugasSelesai }} tugas</strong> minggu
|
||||
ini, yuk lanjutkan untuk mendapatkan badge yang lebih menarik!
|
||||
@else
|
||||
Belum ada tugas yang diselesaikan minggu ini.
|
||||
Ayo mulai kerjakan tugasmu! 💪
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if(file_exists(public_path('images/mascot.png')))
|
||||
<img src="{{ asset('images/mascot.png') }}" class="mascot-img" alt="Mascot">
|
||||
@else
|
||||
<div class="mascot-placeholder">🐶</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- ===== LEADERBOARD ===== --}}
|
||||
<div class="dash-card" style="grid-column: 1 / -1;">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Leaderboard</h2>
|
||||
<a href="{{ route('siswa.leaderboard') }}" class="card-link">LIHAT SEMUA</a>
|
||||
</div>
|
||||
|
||||
@forelse($leaderboard as $lb)
|
||||
<div class="lb-item">
|
||||
<span class="lb-rank-icon">
|
||||
@if($lb['rank'] === 1) 🥇
|
||||
@elseif($lb['rank'] === 2) 🥈
|
||||
@else 🥉
|
||||
@endif
|
||||
</span>
|
||||
<div class="lb-avatar">{{ strtoupper(substr($lb['nama'], 0, 1)) }}</div>
|
||||
<span class="lb-name {{ $lb['nama'] === $namaSaya ? 'is-me' : '' }}">
|
||||
{{ $lb['nama'] }}
|
||||
</span>
|
||||
<span class="lb-exp">{{ number_format($lb['exp']) }} EXP</span>
|
||||
</div>
|
||||
@empty
|
||||
<p style="color:#94a3b8;font-size:13px;text-align:center;padding:16px 0">
|
||||
Belum ada data leaderboard.
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
let currentDate = new Date();
|
||||
|
||||
function renderCalendar(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth();
|
||||
const monthNames = [
|
||||
'January','February','March','April','May','June',
|
||||
'July','August','September','October','November','December'
|
||||
];
|
||||
|
||||
document.getElementById('calMonthLabel').textContent = monthNames[month] + ' ' + year;
|
||||
|
||||
const firstDay = new Date(year, month, 1).getDay();
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||
const prevDays = new Date(year, month, 0).getDate();
|
||||
const today = new Date();
|
||||
|
||||
let html = '';
|
||||
let dayCount = 1;
|
||||
let extraDay = 1;
|
||||
|
||||
for (let row = 0; row < 6; row++) {
|
||||
html += '<tr>';
|
||||
for (let col = 0; col < 7; col++) {
|
||||
const idx = row * 7 + col;
|
||||
if (idx < firstDay) {
|
||||
html += `<td class="other-month">${prevDays - firstDay + idx + 1}</td>`;
|
||||
} else if (dayCount > daysInMonth) {
|
||||
html += `<td class="other-month">${extraDay++}</td>`;
|
||||
} else {
|
||||
const isToday = (
|
||||
dayCount === today.getDate() &&
|
||||
month === today.getMonth() &&
|
||||
year === today.getFullYear()
|
||||
);
|
||||
html += `<td class="${isToday ? 'today' : ''}">${dayCount}</td>`;
|
||||
dayCount++;
|
||||
}
|
||||
}
|
||||
html += '</tr>';
|
||||
if (dayCount > daysInMonth && row >= 4) break;
|
||||
}
|
||||
|
||||
document.getElementById('calBody').innerHTML = html;
|
||||
}
|
||||
|
||||
document.getElementById('prevMonth').addEventListener('click', () => {
|
||||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||||
renderCalendar(currentDate);
|
||||
});
|
||||
document.getElementById('nextMonth').addEventListener('click', () => {
|
||||
currentDate.setMonth(currentDate.getMonth() + 1);
|
||||
renderCalendar(currentDate);
|
||||
});
|
||||
|
||||
renderCalendar(currentDate);
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -16,30 +16,36 @@
|
|||
}
|
||||
|
||||
.siswa-wrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ===== SIDEBAR ===== */
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background: #ffffff;
|
||||
border-right: 2px solid #e6f0ff;
|
||||
padding: 30px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
width: 260px;
|
||||
background: #ffffff;
|
||||
border-right: 2px solid #e6f0ff;
|
||||
padding: 30px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s ease, padding 0.3s ease;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Default: collapsed saat pertama load */
|
||||
.sidebar.collapsed {
|
||||
width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
width: 0;
|
||||
padding: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar-logo img {
|
||||
|
|
@ -49,6 +55,7 @@
|
|||
.sidebar-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
|
|
@ -82,6 +89,7 @@
|
|||
|
||||
.sidebar-logout {
|
||||
margin-top: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar-logout button {
|
||||
|
|
@ -95,16 +103,60 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
background: #f5f9ff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
/* ===== TOGGLE ARROW BUTTON ===== */
|
||||
.sidebar-toggle-btn {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 260px; /* sama dengan lebar sidebar saat terbuka */
|
||||
z-index: 1000;
|
||||
width: 22px;
|
||||
height: 48px;
|
||||
background: #2b8ef3;
|
||||
border: none;
|
||||
border-radius: 0 10px 10px 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: left 0.3s ease, background 0.2s ease;
|
||||
box-shadow: 2px 0 8px rgba(43, 142, 243, 0.3);
|
||||
}
|
||||
|
||||
.main.full {
|
||||
margin-left: 0;
|
||||
.sidebar-toggle-btn:hover {
|
||||
background: #1a7ae0;
|
||||
}
|
||||
|
||||
/* Posisi tombol saat sidebar collapsed */
|
||||
.sidebar-toggle-btn.collapsed {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Arrow icon SVG */
|
||||
.toggle-arrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Saat collapsed, panah mengarah ke kanan (buka) */
|
||||
.sidebar-toggle-btn.collapsed .toggle-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ===== MAIN ===== */
|
||||
.main {
|
||||
flex: 1;
|
||||
background: #f5f9ff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 0; /* prevent overflow */
|
||||
}
|
||||
|
||||
/* TOPBAR */
|
||||
|
|
@ -122,6 +174,9 @@
|
|||
.topbar-left {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
|
|
@ -149,8 +204,8 @@
|
|||
<body>
|
||||
<div class="siswa-wrapper">
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<!-- SIDEBAR (collapsed by default) -->
|
||||
<aside class="sidebar collapsed" id="mainSidebar">
|
||||
<div class="sidebar-logo">
|
||||
<img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
|
||||
</div>
|
||||
|
|
@ -201,21 +256,23 @@ class="sidebar-link {{ request()->routeIs('siswa.profil*') ? 'active' : '' }}">
|
|||
</form>
|
||||
</aside>
|
||||
|
||||
<!-- TOGGLE ARROW BUTTON (collapsed by default karena sidebar tertutup) -->
|
||||
<button class="sidebar-toggle-btn collapsed" id="sidebarToggleBtn" title="Toggle Sidebar">
|
||||
<!-- Panah kiri (← artinya tutup sidebar) -->
|
||||
<svg class="toggle-arrow" viewBox="0 0 24 24">
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main">
|
||||
<div class="main" id="mainContent">
|
||||
|
||||
<!-- TOPBAR -->
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<button id="toggleSidebar"
|
||||
style="background:none;border:none;color:white;font-size:22px;margin-right:15px;cursor:pointer;">
|
||||
☰
|
||||
</button>
|
||||
|
||||
👋 Hai, {{ Auth::guard('siswa')->user()->nama ?? 'Siswa' }}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="topbar-right">
|
||||
<img src="{{ asset('images/icon/sidebar/notif.png') }}" class="topbar-icon" alt="Notification">
|
||||
<img src="{{ asset('images/icon/sidebar/profil.png') }}" class="topbar-icon" alt="Profile">
|
||||
|
|
@ -231,6 +288,51 @@ class="sidebar-link {{ request()->routeIs('siswa.profil*') ? 'active' : '' }}">
|
|||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
const sidebar = document.getElementById('mainSidebar');
|
||||
const toggleBtn = document.getElementById('sidebarToggleBtn');
|
||||
const SIDEBAR_W = 260; // harus sama dengan CSS .sidebar width
|
||||
|
||||
function updateTogglePosition(isCollapsed) {
|
||||
if (isCollapsed) {
|
||||
toggleBtn.style.left = '0px';
|
||||
toggleBtn.classList.add('collapsed');
|
||||
} else {
|
||||
toggleBtn.style.left = SIDEBAR_W + 'px';
|
||||
toggleBtn.classList.remove('collapsed');
|
||||
}
|
||||
}
|
||||
|
||||
toggleBtn.addEventListener('click', function () {
|
||||
const isCurrentlyCollapsed = sidebar.classList.contains('collapsed');
|
||||
|
||||
if (isCurrentlyCollapsed) {
|
||||
// Buka sidebar
|
||||
sidebar.classList.remove('collapsed');
|
||||
updateTogglePosition(false);
|
||||
localStorage.setItem('sidebarOpen', 'true');
|
||||
} else {
|
||||
// Tutup sidebar
|
||||
sidebar.classList.add('collapsed');
|
||||
updateTogglePosition(true);
|
||||
localStorage.setItem('sidebarOpen', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
// Tidak perlu restore dari localStorage karena kita mau selalu collapsed saat login baru.
|
||||
// Tapi kalau mau ingat preferensi user dalam satu sesi browsing, uncomment ini:
|
||||
/*
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const saved = localStorage.getItem('sidebarOpen');
|
||||
if (saved === 'true') {
|
||||
sidebar.classList.remove('collapsed');
|
||||
updateTogglePosition(false);
|
||||
}
|
||||
});
|
||||
*/
|
||||
</script>
|
||||
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
|
||||
//SISWA CONTROLLERS
|
||||
use App\Http\Controllers\Siswa\LoginController as SiswaLoginController;
|
||||
use App\Http\Controllers\Siswa\DashboardController as SiswaDashboardController;
|
||||
|
||||
// ====================
|
||||
// LANDING PAGE
|
||||
|
|
@ -141,16 +142,13 @@
|
|||
Route::post('/logout', [GuruLoginController::class, 'logout'])->name('logout');
|
||||
});
|
||||
|
||||
|
||||
// =======================================================
|
||||
// SISWA AREA
|
||||
// =======================================================
|
||||
|
||||
Route::middleware(['auth:siswa'])->prefix('siswa')->name('siswa.')->group(function () {
|
||||
|
||||
Route::get('/dashboard', function () {
|
||||
return view('siswa.dashboard');
|
||||
})->name('dashboard');
|
||||
Route::get('/dashboard', [SiswaDashboardController::class, 'index'])->name('dashboard');
|
||||
|
||||
// LOGOUT SISWA
|
||||
Route::post('/logout', [SiswaLoginController::class, 'logout'])->name('logout');
|
||||
|
|
|
|||
Loading…
Reference in New Issue