dashboard siswa update

app/Http/Controllers/Siswa/DashboardController.php

@@ -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',
+        ));
+    }
+}

resources/views/siswa/dashboard.blade.php

@@ -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">
+@php $namaSaya = Auth::guard('siswa')->user()->nama ?? ''; @endphp
-    <h4 class="fw-bold text-primary mb-4">Dashboard</h4>
 
-    <!-- STATS CARDS -->
+<div class="dashboard-grid">
-    <div class="row g-3 mb-4">
+
-        <div class="col-md-4">
+    {{-- ===== TUGAS ===== --}}
-            <div class="card border-0 shadow-sm rounded-4 p-3">
+    <div class="dash-card">
-                <div class="d-flex align-items-center gap-3">
+        <div class="card-header">
-                    <div style="background:#e6f0ff; border-radius:12px; padding:12px;">
+            <h2 class="card-title">Tugas</h2>
-                        <img src="{{ asset('images/icon/sidebar/mapel.png') }}" width="24" alt="">
+            <a href="{{ route('siswa.tugas') }}" class="card-link">LIHAT SEMUA</a>
-                    </div>
-                    <div>
-                        <div class="text-muted small">Tugas Aktif</div>
-                        <div class="fw-bold fs-5">0</div>
-                    </div>
-                </div>
-            </div>
         </div>
 
-        <div class="col-md-4">
+        @forelse($tugasList as $tanggal => $items)
-            <div class="card border-0 shadow-sm rounded-4 p-3">
+            <p class="tugas-date-label">{{ $tanggal }}</p>
-                <div class="d-flex align-items-center gap-3">
+            @foreach($items as $item)
-                    <div style="background:#e6f0ff; border-radius:12px; padding:12px;">
+                <div class="tugas-item">
-                        <img src="{{ asset('images/icon/sidebar/challenge.png') }}" width="24" alt="">
+                    <span class="tugas-time">{{ $item['jam'] }}</span>
-                    </div>
+                    <span style="font-size:18px">📋</span>
-                    <div>
+                    <div class="tugas-info">
-                        <div class="text-muted small">Challenge Selesai</div>
+                        <p class="tugas-nama">{{ $item['nama'] }}</p>
-                        <div class="fw-bold fs-5">0</div>
+                        <p class="tugas-mapel">{{ $item['mapel'] }}</p>
                     </div>
                 </div>
-            </div>
+            @endforeach
-        </div>
+        @empty
-
+            <div class="tugas-empty">🎉 Tidak ada tugas yang pending!</div>
-        <div class="col-md-4">
+        @endforelse
-            <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>
     </div>
 
-    <!-- INFO SISWA -->
+    {{-- ===== KALENDER ===== --}}
-    <div class="card border-0 shadow-sm rounded-4 p-4">
+    <div class="dash-card">
-        <h6 class="fw-bold mb-3">Informasi Akun</h6>
+        <div class="calendar-nav">
-        <table class="table table-borderless mb-0">
+            <button id="prevMonth">&#8249;</button>
-            <tr>
+            <span class="calendar-month" id="calMonthLabel"></span>
-                <td class="text-muted" width="150">Nama</td>
+            <button id="nextMonth">&#8250;</button>
-                <td>: {{ Auth::guard('siswa')->user()->nama }}</td>
+        </div>
-            </tr>
+        <table class="calendar-table">
-            <tr>
+            <thead>
-                <td class="text-muted">NISN</td>
+                <tr>
-                <td>: {{ Auth::guard('siswa')->user()->nisn }}</td>
+                    <th>SUN</th><th>MON</th><th>TUE</th>
-            </tr>
+                    <th>WED</th><th>THU</th><th>FRI</th><th>SAT</th>
-            <tr>
+                </tr>
-                <td class="text-muted">Kelas</td>
+            </thead>
-                <td>: {{ Auth::guard('siswa')->user()->kelas->nama_kelas ?? '-' }}</td>
+            <tbody id="calBody"></tbody>
-            </tr>
         </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
+
+@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

resources/views/siswa/layouts/app.blade.php

@@ -16,30 +16,36 @@
         }
 
         .siswa-wrapper {
-        display: flex;
+            display: flex;
-        min-height: 100vh;
+            min-height: 100vh;
+            position: relative;
         }
 
+        /* ===== SIDEBAR ===== */
         .sidebar {
-        width: 260px;
+            width: 260px;
-        background: #ffffff;
+            background: #ffffff;
-        border-right: 2px solid #e6f0ff;
+            border-right: 2px solid #e6f0ff;
-        padding: 30px 20px;
+            padding: 30px 20px;
-        display: flex;
+            display: flex;
-        flex-direction: column;
+            flex-direction: column;
-        transition: all 0.3s ease;
+            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;
+            width: 0;
-        padding: 0;
+            padding: 0;
-        overflow: hidden;
+            border-right: none;
-        border: 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 {
+        /* ===== TOGGLE ARROW BUTTON ===== */
-        flex: 1;
+        .sidebar-toggle-btn {
-        background: #f5f9ff;
+            position: fixed;
-        display: flex;
+            top: 50%;
-        flex-direction: column;
+            transform: translateY(-50%);
-        transition: all 0.3s ease;
+            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 {
+        .sidebar-toggle-btn:hover {
-        margin-left: 0;
+            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 -->
+    <!-- SIDEBAR (collapsed by default) -->
-    <aside class="sidebar">
+    <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>

routes/web.php

@@ -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 () {
+    Route::get('/dashboard', [SiswaDashboardController::class, 'index'])->name('dashboard');
-        return view('siswa.dashboard');
-    })->name('dashboard');
 
     // LOGOUT SISWA
     Route::post('/logout', [SiswaLoginController::class, 'logout'])->name('logout');