import { Link, Head, router, usePage } from '@inertiajs/react'; import { Plus, Edit, Trash2, Eye, BookOpen, Calendar, AlertCircle } from 'lucide-react'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; import LearningContentFilters from '@/components/LearningContentFilters'; import { formatDate } from '@/lib/utils'; import type { PageProps, AcademicYearWithSemesters } from '@/types'; import { useState } from 'react'; import ConfirmDeleteModal from '@/components/ConfirmDeleteModal'; import WhatsAppShareButton from '@/components/WhatsAppShareButton'; interface Material { id: number; title: string; status: 'draft' | 'published'; published_at: string | null; created_at: string; assignments_count: number; synced_class: { id: number; name: string } | null; classes?: Array<{ id: number; name: string }>; subject: { id: number; name: string } | null; semester: { id: number; type: string } | null; } interface Props extends PageProps { materials: { data: Material[]; links: Array<{ url: string | null; label: string; active: boolean }>; current_page: number; last_page: number; total: number; }; periods?: AcademicYearWithSemesters[]; selectedPeriod?: number | null; selectedSemester?: number | null; subjects: Array<{ id: number; name: string }>; selectedSubject?: number | null; } export default function MateriIndex({ materials, periods, selectedPeriod, selectedSemester, subjects, selectedSubject }: Props) { const [deleteConfig, setDeleteConfig] = useState<{isOpen: boolean, url: string} | null>(null); const subjectName = subjects.find((subject) => subject.id === selectedSubject)?.name; const emptyMessage = selectedSubject ? 'Tidak ada materi untuk mata pelajaran ini pada periode yang dipilih.' : 'Belum ada materi pelajaran'; function handleDelete(id: number) { setDeleteConfig({ isOpen: true, url: `/materials/${id}` }); } function renderClassNames(material: Material) { if (material.classes && material.classes.length > 0) { return material.classes.map((c) => c.name).join(', '); } return material.synced_class ? material.synced_class.name : '-'; } return ( <>

{/* Header */}

{subjectName ? `Total: ${materials.total} materi · ${subjectName}` : `Total materi dibuat: ${materials.total} materi`}

Buat Materi

{/* Desktop Table */}

{materials.data.length > 0 ? ( materials.data.map((material) => ( )) ) : ( )}

Judul Materi	Mata Pelajaran	Kelas	Tugas	Status	Dibuat Pada	Aksi
{material.title}	{material.subject?.name ?? '-'}	{renderClassNames(material) !== '-' ? ( Kelas {renderClassNames(material)} ) : ( '-' )}	{material.assignments_count} Tugas	{material.status === 'published' ? ( Dipublikasikan ) : ( Draft )}	{formatDate(material.created_at)}	{material.status === 'published' && ( )}
{emptyMessage} {!selectedSubject && Buat materi pelajaran pertama Anda dengan menekan tombol Buat Materi di atas. }

{/* Mobile Cards */}

{materials.data.length > 0 ? ( materials.data.map((material) => (

{material.title}

Mata Pelajaran {material.subject?.name ?? '-'}

Kelas {renderClassNames(material) !== '-' ? ( {renderClassNames(material)} ) : ( - )}

Status {material.status === 'published' ? ( Dipublikasikan ) : ( Draft )}

Tugas / Dibuat

{material.assignments_count} Tugas • {formatDate(material.created_at)}

{material.status === 'published' && (

)}

)) ) : (

{emptyMessage}

)}

{/* Pagination */} {materials.last_page > 1 && (

{materials.links.map((link, i) => ( ))}

)}

{deleteConfig && ( setDeleteConfig(null)} onConfirm={() => router.delete(deleteConfig.url)} title="Hapus Materi" message="Apakah Anda yakin ingin menghapus materi ini? Semua tautan media dan tugas terkait akan ikut terhapus." /> )} ); } MateriIndex.layout = (page: any) => {page};