import { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import { Award, CalendarDays, ChevronDown, Download, Eye, Sparkles, Trophy, UsersRound } from 'lucide-react'; import StudentLayout from '@/layouts/StudentLayout'; type RecognitionType = 'appreciation' | 'achievement'; type Tab = 'class' | 'mine'; interface MineRecognition { id: number; type: RecognitionType; title: string; category: string; recognized_on: string; description: string; level: string | null; result: string | null; organizer: string | null; audience: 'student' | 'class'; xp_award: { amount: number; status: 'awarded' | 'weekly_cap' | 'reversed' } | null; synced_class: { id: number; name: string }; academic_year: { id: number; name: string }; } interface ClassPublication { uuid: string; type: RecognitionType; title: string; category: string; recognized_on: string; public_summary: string; level: string | null; result: string | null; organizer: string | null; published_at: string; issuer_name: string; recipients: Array<{ display_name: string }>; recipient_count: number; is_mine: boolean; } interface Pagination { data: T[]; links: Array<{ url: string | null; label: string; active: boolean }>; total: number; } interface Props { student: { id: number; full_name: string; nisn: string }; recognitions: Pagination; classFeed: Pagination; activeTab: Tab; classContext: { class: { id: number; name: string } | null; academic_year: { id: number; name: string } | null; semester: { id: number; type: string } | null; } | null; availableEnrollments: Array<{ academic_year_id: number; class_name: string; academic_year_name: string; semester_id: number | null; semester_type: string | null; }>; filters: { type: string; category: string; academic_year_id: number | null; semester_id: number | null }; summary: { appreciations: number; achievements: number }; classSummary: { total: number; appreciations: number; achievements: number }; } const categoryLabels: Record = { character: 'Karakter', positive_discipline: 'Disiplin positif', leadership: 'Kepemimpinan', social_care: 'Kepedulian sosial', learning_progress: 'Perkembangan belajar', creativity: 'Kreativitas', responsibility: 'Tanggung jawab', academic: 'Akademik', sports: 'Olahraga', arts_culture: 'Seni & budaya', religious: 'Keagamaan', technology: 'Teknologi', social_environment: 'Sosial & lingkungan', other: 'Lainnya', }; const levelLabels: Record = { class: 'Kelas', school: 'Sekolah', subdistrict: 'Kecamatan', district_city: 'Kabupaten/kota', province: 'Provinsi', national: 'Nasional', international: 'Internasional' }; export default function StudentRecognitionIndex({ student, recognitions, classFeed, activeTab, classContext, availableEnrollments, filters, summary, classSummary }: Props) { const [expanded, setExpanded] = useState(null); const navigate = (changes: Record) => { router.get('/student/recognitions', { tab: activeTab, type: filters.type, category: filters.category, academic_year_id: filters.academic_year_id, semester_id: filters.semester_id, ...changes, }, { preserveState: true, preserveScroll: true, replace: true }); }; const changeEnrollment = (academicYearId: string) => { const enrollment = availableEnrollments.find((item) => item.academic_year_id === Number(academicYearId)); navigate({ academic_year_id: Number(academicYearId), semester_id: enrollment?.semester_id ?? null }); }; return ( <>

Ruang bertumbuh

Halo, {student.full_name}

Kebaikan dan pencapaian layak mendapat pengakuan.

navigate({ tab: 'class' })} icon={} label="Papan Kelas" /> navigate({ tab: 'mine' })} icon={} label="Pencapaian Saya" />
{activeTab === 'class' ? ( <>

{classContext?.class?.name ?? 'Kelas belum tersedia'}

{classContext?.academic_year?.name ?? 'Belum ada enrollment'}{classContext?.semester?.type ? ` · Semester ${classContext.semester.type}` : ''}

{availableEnrollments.length > 1 && }
navigate({ type: '', category: '' })} label="Semua" /> navigate({ type: 'appreciation', category: '' })} label="Apresiasi" /> navigate({ type: 'achievement', category: '' })} label="Prestasi" />
{classFeed.data.length === 0 ? ( } title="Belum ada momen yang dibagikan" description="Penghargaan pribadi dan catatan internal tidak ditampilkan di Papan Kelas." /> ) : (
{classFeed.data.map((publication) => { const isExpanded = expanded === publication.uuid; const shownNames = publication.recipients.slice(0, 3).map((item) => item.display_name).join(', '); return (
{categoryLabels[publication.category]}{publication.level && {levelLabels[publication.level]}}{publication.result && {publication.result}}{formatDate(publication.recognized_on)}
{isExpanded &&

Penerima: {publication.recipients.map((item) => item.display_name).join(', ')}

{publication.organizer &&

Penyelenggara: {publication.organizer}

}

Pengakuan: {publication.issuer_name}

}
); })}
)} ) : ( <>

Portofolio pribadimu

Hanya penghargaan yang dipublikasikan kepadamu.

Unduh DOCX
{recognitions.data.length === 0 ? ( } title="Belum ada penghargaan yang dipublikasikan" description="Catatan internal wali kelas tidak ditampilkan di halaman ini." /> ) : (
{recognitions.data.map((recognition) => { const isExpanded = expanded === recognition.id; return (
{categoryLabels[recognition.category]}{recognition.level && {levelLabels[recognition.level]}}{recognition.result && {recognition.result}}{recognition.xp_award && 0 ? 'bg-primary-500/10 text-primary-300' : 'bg-surface-hover text-text-muted'}`}>{recognition.xp_award.amount > 0 ? `+${recognition.xp_award.amount} XP` : 'Batas XP mingguan'}}{formatDate(recognition.recognized_on)}
{isExpanded &&
Dipublikasikan untukmu · {recognition.academic_year.name}
}
); })}
)} )}
); } function TabButton({ active, onClick, icon, label }: { active: boolean; onClick: () => void; icon: React.ReactNode; label: string }) { return ; } function FilterButton({ active, onClick, label }: { active: boolean; onClick: () => void; label: string }) { return ; } function StatChip({ label, value, color }: { label: string; value: number; color: string }) { return {value} {label}; } function RecognitionIcon({ type }: { type: RecognitionType }) { return {type === 'achievement' ? : }; } function EmptyState({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) { return
{icon}

{title}

{description}

; } function Pagination({ links }: { links: Array<{ url: string | null; label: string; active: boolean }> }) { return links.length > 3 ? : null; } function formatDate(value: string): string { return new Date(`${value.slice(0, 10)}T00:00:00`).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' }); } StudentRecognitionIndex.layout = (page: React.ReactNode) => {page};