import { useState, useEffect } from 'react'; import { usePage, Link } from '@inertiajs/react'; import { Head } from '@inertiajs/react'; import { BookOpen, Clock, CheckSquare, Calendar, ArrowRight, Award, UserRound, AlertCircle, Sparkles, Trophy, LockKeyhole, X, } from 'lucide-react'; import StudentLayout from '@/layouts/StudentLayout'; import WeeklyScheduleCard from '@/components/WeeklyScheduleCard'; import { UpcomingHolidaysWidget, type UpcomingHolidayItem } from '@/components/UpcomingHolidaysWidget'; import ClassGoodNewsTicker from '@/components/ClassGoodNewsTicker'; import ClassRecognitionsModal from '@/components/ClassRecognitionsModal'; import { cn } from '@/lib/utils'; import type { PageProps } from '@/types'; interface StudentDashboardProps extends PageProps { stats: { totalMaterials: number; pendingAssignments: number; gradedCount: number; attendance: { hadir: number; sakit: number; izin: number; alpa: number; terlambat: number; }; }; student: { full_name: string; nisn: string; class_name: string; }; recentMaterials: Array<{ id: number; title: string; subject_name: string; teacher_name: string; published_at: string; }>; upcomingAssignments: Array<{ id: number; title: string; material_id: number; subject_name: string; due_date: string; submission_type: string; access_status: 'open' | 'locked' | 'closed'; opens_at: string | null; }>; gamification: { xp: number; level: number; rank_title: string; xp_required: number; }; bookingSchedule?: any; upcomingHolidays?: UpcomingHolidayItem[]; classGoodNews?: Array<{ uuid: string; type: 'appreciation' | 'achievement'; title: string; recognized_on: string; recipients: string[]; recipient_count: number; is_mine: boolean; }>; studentProfileSummary: { percentage: number; missing: string[]; is_complete: boolean; status: 'not_started' | 'draft' | 'submitted' | 'verified' | 'revision_requested'; revision_notes: string | null; }; } export default function Dashboard() { const { stats, student, recentMaterials, upcomingAssignments, gamification, bookingSchedule, upcomingHolidays = [], classGoodNews = [], studentProfileSummary, } = usePage().props; const studentStatCards = [ { key: 'totalMaterials', label: 'Materi Tersedia', icon: BookOpen, color: 'text-sky-400', bgHover: 'hover:shadow-sky-500/10' }, { key: 'pendingAssignments', label: 'Tugas Belum Selesai', icon: Clock, color: 'text-amber-400', bgHover: 'hover:shadow-amber-500/10' }, { key: 'gradedCount', label: 'Tugas Dinilai', icon: CheckSquare, color: 'text-emerald-400', bgHover: 'hover:shadow-emerald-500/10' }, ] as const; const [isRecognitionsModalOpen, setIsRecognitionsModalOpen] = useState(false); const [isBiodataDismissed, setIsBiodataDismissed] = useState(() => { try { return sessionStorage.getItem('uticlass_dismiss_biodata_prompt') === 'true'; } catch { return false; } }); const handleDismissBiodata = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); try { sessionStorage.setItem('uticlass_dismiss_biodata_prompt', 'true'); } catch { // ignore } setIsBiodataDismissed(true); }; return ( <> {/* Greeting */}

Halo, {student.full_name.split(' ')[0]}! 👋

Kelas {student.class_name} NISN: {student.nisn}

{/* Gamification Badge */} {gamification && (
Lvl {gamification.level}
{gamification.rank_title} {gamification.xp} / {gamification.xp_required} XP
)}
{/* Slim Dismissible Biodata Banner */} {studentProfileSummary && studentProfileSummary.status !== 'verified' && !isBiodataDismissed && (
{studentProfileSummary.status === 'revision_requested' ? ( ) : ( )} {studentProfileSummary.status === 'revision_requested' ? 'Biodata perlu diperbaiki' : 'Lengkapi biodata siswa'}{' '} ({studentProfileSummary.percentage}%)
Lengkapi
)} {/* Compact Good News Ticker & Modal */} {classGoodNews.length > 0 && ( <> setIsRecognitionsModalOpen(true)} /> setIsRecognitionsModalOpen(false)} items={classGoodNews} /> )} {/* Stat Cards */}
{studentStatCards.map((card, index) => { const value = (stats as any)?.[card.key] ?? 0; return (

{card.label}

{value}

); })} {/* Kehadiran Card */}

Kehadiran

{stats.attendance?.hadir ?? 0} Hadir

{stats.attendance?.sakit ?? 0}S • {stats.attendance?.izin ?? 0}I • {stats.attendance?.alpa ?? 0}A
{/* Booking Schedule from KALASI'U */} {bookingSchedule && (
)}
{/* Upcoming Assignments */}

Tugas Mendatang

{upcomingAssignments && upcomingAssignments.length > 0 ? (
{upcomingAssignments.map((assignment) => (

{assignment.title}

{assignment.subject_name}

{assignment.access_status === 'open' ? : } {assignment.access_status === 'open' ? assignment.due_date : assignment.opens_at ? `Buka ${assignment.opens_at}` : 'Menunggu jadwal'}

{assignment.submission_type}

))}
) : (

Hore! Tidak ada tugas yang tertunda.

)}
{/* Recent Materials */}

Materi Terbaru

{recentMaterials && recentMaterials.length > 0 ? (
{recentMaterials.map((material) => (

{material.title}

{material.subject_name} {material.teacher_name}
))}
) : (

Belum ada materi baru dipublikasikan.

)}
Lihat Semua Materi
); } Dashboard.layout = (page: any) => {page};