import { Head } from '@inertiajs/react'; import { Activity, Clock3, Download, Target, Trophy, Users } from 'lucide-react'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; interface MemberReport { id: number; name: string; squad_number: number; contributions: number; } interface AnswerReport { item_id: number; item_type: string; question: string; status: string; score: number; correct_ratio: number; time_seconds: number; contributors: number; } interface TeamReport { id: number; name: string; color: string; score: number; correct_answers: number; answer_count: number; correct_ratio: number; duration_seconds: number; contribution_count: number; members: MemberReport[]; answers: AnswerReport[]; } interface Props { session: { uuid: string; status: string; started_at?: string; completed_at?: string; duration_seconds?: number; game: { id: number; title: string; subject?: string }; class_name?: string; }; summary: { team_count: number; question_count: number; total_score: number; average_accuracy: number; average_time_seconds: number; total_contributions: number; }; teams: TeamReport[]; } const typeLabels: Record = { sentence_rearrange: 'Sentence Relay', grouping: 'Category Relay', matching: 'Match Chain', listen_and_build: 'Listen and Build', error_hunter: 'Error Hunter', secret_taboo: 'Secret Taboo', }; export default function Report({ session, summary, teams }: Props) { return (

{session.class_name} · {session.game.subject}

Status {session.status} · {summary.team_count} Team · {summary.question_count} soal

Export CSV
} label="Total skor" value={summary.total_score.toLocaleString()} color="text-amber-300" /> } label="Rata-rata akurasi" value={`${summary.average_accuracy}%`} color="text-sky-300" /> } label="Rata-rata waktu" value={`${summary.average_time_seconds}s`} color="text-fuchsia-300" /> } label="Total kontribusi" value={summary.total_contributions.toLocaleString()} color="text-emerald-300" />
{teams.map((team, rank) => (
#{rank + 1}

{team.name}

{team.correct_answers}/{team.answer_count} jawaban sempurna

Kontribusi anggota

{team.members.map((member) => (

{member.name}

Mini-squad {member.squad_number}

{member.contributions}
))}

Hasil per soal

{team.answers.map((answer) => ( ))}
SoalAkurasiWaktuKontributorPoin

{typeLabels[answer.item_type] ?? answer.item_type}

{answer.question || 'Tanpa instruksi'}

 {answer.correct_ratio}% {answer.time_seconds}s {answer.contributors} +{answer.score}
))}
{teams.length === 0 &&
Belum ada data Team pada sesi ini.
}
); } function SummaryCard({ icon, label, value, color }: { icon: React.ReactNode; label: string; value: string; color: string }) { return
{icon}{label}

{value}

; } function Metric({ label, value }: { label: string; value: string }) { return

{label}

{value}

; }