'use client'; import { useAppStore } from '@/stores/app-store'; import { useEffect, useState, useRef } from 'react'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { FileText, Printer, Download } from 'lucide-react'; interface SantriOption { id: string; nama: string; kelas: string; } interface HafalanItem { surah: string; ayatMulai: number; ayatAkhir: number; status: string; tanggal: string; catatan: string | null; } interface NgajiItem { juz: number; halamanMulai: number; halamanAkhir: number; tanggal: string; kualitas: string; catatan: string | null; } const JILID_OPTIONS = ['Jilid 1', 'Jilid 2', 'Jilid 3', 'Jilid 4', 'Jilid 5', 'Jilid 6', 'Ghorib', 'Tajwid Dasar']; const TOTAL_JILID = JILID_OPTIONS.length; interface JilidItem { namaJilid: string; halaman: number | null; status: string; tanggalSelesai: string | null; catatanGuru: string | null; } export default function LaporanPage() { const { token } = useAppStore(); const [santriOptions, setSantriOptions] = useState([]); const [selectedSantri, setSelectedSantri] = useState(''); const [hafalan, setHafalan] = useState([]); const [ngaji, setNgaji] = useState([]); const [jilid, setJilid] = useState([]); const [loading, setLoading] = useState(false); const printRef = useRef(null); useEffect(() => { if (!token) return; fetch('/api/santri', { headers: { Authorization: `Bearer ${token}` } }) .then((r) => r.json()) .then((d) => { setSantriOptions(d); if (d.length > 0) setSelectedSantri(d[0].id); }); }, [token]); useEffect(() => { if (!token || !selectedSantri) return; const headers = { Authorization: `Bearer ${token}` }; Promise.all([ fetch(`/api/hafalan?santriId=${selectedSantri}`, { headers }).then((r) => r.json()), fetch(`/api/ngaji?santriId=${selectedSantri}`, { headers }).then((r) => r.json()), fetch(`/api/jilid?santriId=${selectedSantri}`, { headers }).then((r) => r.json()), ]).then(([h, n, j]) => { setHafalan(h); setNgaji(n); setJilid(j); }); }, [token, selectedSantri]); const santri = santriOptions.find((s) => s.id === selectedSantri); const jilidSelesai = jilid.filter((j) => j.status === 'SELESAI').length; const hafalanKuat = hafalan.filter((h) => h.status === 'KUAT').length; const handlePrint = () => { const printWindow = window.open('', '_blank'); if (!printWindow || !printRef.current) return; printWindow.document.write(` Laporan Hafalan - ${santri?.nama} ${printRef.current.innerHTML} `); printWindow.document.close(); }; const badgeClass = (s: string) => s === 'KUAT' ? 'badge-kuat' : s === "MUROJA'AH" ? 'badge-murojaah' : 'badge-baru'; return (

Laporan & Cetak

Cetak rapor hafalan dan progres bacaan santri

{/* Santri Selector */} {/* Print Preview */} {selectedSantri && !loading && (
{/* Header */}

Laporan Progres Hafalan & Bacaan Al-Quran

Metode Ummi — Tahun Ajaran 2025/2026

{/* Info */}
Nama: {santri?.nama}
Kelas: {santri?.kelas}
Tanggal Cetak: {new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
{/* Stats */}
{hafalan.length}
Total Hafalan
{hafalanKuat}
Hafalan Kuat
{jilidSelesai}
Jilid Selesai
{ngaji.length}
Sesi Ngaji
{/* Hafalan Table */}

Daftar Hafalan

{hafalan.map((h, i) => ( ))}
NoSurahAyatStatusTanggalCatatan
{i + 1} {h.surah} {h.ayatMulai} – {h.ayatAkhir} {h.status} {new Date(h.tanggal).toLocaleDateString('id-ID')} {h.catatan || '-'}
{/* Ngaji Table */}

Riwayat Ngaji

{ngaji.map((n, i) => ( ))}
NoJuzHalamanKualitasTanggalCatatan
{i + 1} {n.juz} {n.halamanMulai} – {n.halamanAkhir} {n.kualitas === 'BAIK_SEKALI' ? 'Baik Sekali' : n.kualitas === 'BAIK' ? 'Baik' : n.kualitas} {new Date(n.tanggal).toLocaleDateString('id-ID')} {n.catatan || '-'}
{/* Jilid Map */}

Peta Progres Jilid ({TOTAL_JILID} Jilid)

{JILID_OPTIONS.map((jilidName) => { const j = jilid.find((x) => x.namaJilid === jilidName); const status = j?.status || 'BELUM'; const cls = status === 'SELESAI' ? 'juz-selesai' : status === 'PROSES' ? 'juz-proses' : 'juz-belum'; const label = jilidName.startsWith('Jilid ') ? jilidName.replace('Jilid ', 'J') : jilidName; return
{label}
; })}
Selesai Proses Belum
{/* Jilid Detail */}

Detail Progres Jilid

{jilid.filter((j) => j.status !== 'BELUM').map((j, i) => ( ))}
JilidHalamanStatusTanggal SelesaiCatatan Guru
{j.namaJilid} {j.halaman || '-'} {j.status} {j.tanggalSelesai ? new Date(j.tanggalSelesai).toLocaleDateString('id-ID') : '-'} {j.catatanGuru || '-'}

Monitoring Ummi — Dicetak pada {new Date().toLocaleString('id-ID')}

 )}
); }