import { Head, Link, router } from '@inertiajs/react'; import { AlertCircle, Calendar, CalendarClock, Edit3, Eye, LockKeyhole, LockOpen, Plus, Trash2 } from 'lucide-react'; import { useState } from 'react'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; import ConfirmDeleteModal from '@/components/ConfirmDeleteModal'; import MaterialMediaRenderer, { type MaterialMediaResource } from '@/components/MaterialMediaRenderer'; import RichTextContent from '@/components/RichTextContent'; import WhatsAppShareButton from '@/components/WhatsAppShareButton'; import { formatDate } from '@/lib/utils'; import type { PageProps } from '@/types'; interface Assignment { id: number; title: string; description: string | null; assignment_type: 'standard' | 'quiz' | 'worksheet'; submission_type: string; due_date: string; max_points: number; release_mode: 'meeting' | 'schedule' | 'manual_only' | 'manual' | 'immediate'; classes?: Array<{ id: number; name: string }>; availabilities?: Array<{ synced_class_id: number; opens_at: string | null; due_at: string | null; manually_opened_at: string | null; source: string; access?: { status: 'open' | 'locked' | 'closed'; message: string; opens_at: string | null; due_at: string | null }; synced_class?: { id: number; name: string }; }>; } interface Material { id: number; title: string; class_id?: number | null; content: string | null; status: 'draft' | 'published'; classes?: Array<{ id: number; name: string }>; synced_class?: { id: number; name: string } | null; subject?: { id: number; name: string } | null; links: MaterialMediaResource[]; assignments: Assignment[]; } interface Props extends PageProps { material: Material } export default function MateriShow({ material }: Props) { const [deletingAssignment, setDeletingAssignment] = useState(null); const [processingAvailability, setProcessingAvailability] = useState(null); const classNames = material.classes?.length ? material.classes.map((item) => item.name).join(', ') : material.synced_class?.name || '-'; return (
Kelas {classNames} {material.subject?.name || '-'} {material.status === 'published' ? 'Published' : 'Draft'}
{material.status === 'published' && ( )} Edit Materi

{material.title}

Tidak ada konten teks tambahan.

'} className="mt-5 max-w-none text-sm leading-relaxed break-words overflow-hidden" />

Media Pembelajaran

Penugasan

Tugas biasa, quiz, dan LKPD interaktif.

Tambah
{material.assignments.length === 0 ? (

Belum ada tugas untuk materi ini.

Tambah Tugas
) : (
{material.assignments.map((assignment) => (
{assignment.assignment_type === 'worksheet' ? 'Worksheet' : assignment.assignment_type === 'quiz' ? 'Quiz' : 'Tugas Biasa'} {(() => { const targetClasses = assignment.classes && assignment.classes.length > 0 ? assignment.classes : material.classes?.length ? material.classes : material.synced_class ? [material.synced_class] : []; const isSubset = Boolean(material.classes && material.classes.length > 1 && assignment.classes && assignment.classes.length > 0 && assignment.classes.length < material.classes.length); if (isSubset) { return ( 🎯 {targetClasses.map((c) => c.name).join(', ')} ); } if (material.classes && material.classes.length > 1) { return ( Semua Kelas ); } return null; })()}

{assignment.title}

{assignment.release_mode === 'meeting' ? 'Dibuka saat guru memulai KBM' : assignment.release_mode === 'schedule' || assignment.release_mode === 'manual' ? 'Terbuka otomatis sesuai waktu' : assignment.release_mode === 'manual_only' ? 'Dibuka manual oleh guru' : 'Tugas lama · akses langsung'}

{assignment.max_points} poin
{formatDate(assignment.due_date)}
{(() => { const targetClassIds = assignment.classes && assignment.classes.length > 0 ? assignment.classes.map((c) => c.id) : material.classes && material.classes.length > 0 ? material.classes.map((c) => c.id) : material.class_id ? [material.class_id] : material.synced_class ? [material.synced_class.id] : []; const visibleAvailabilities = (assignment.availabilities || []).filter((av) => targetClassIds.includes(av.synced_class_id) ); if (visibleAvailabilities.length === 0) return null; return (
{visibleAvailabilities.map((availability) => { const access = availability.access; const opensAt = access?.opens_at || availability.manually_opened_at || availability.opens_at; const isOpen = access?.status === 'open'; const actionKey = `${assignment.id}-${availability.synced_class_id}`; return (
{isOpen ? : }

{availability.synced_class?.name || `Kelas ${availability.synced_class_id}`}

{access?.status === 'closed' ? 'Pengumpulan ditutup' : assignment.release_mode === 'immediate' ? 'Akses langsung · waktu buka lama tidak dicatat' : isOpen ? `Dibuka ${formatDate(availability.manually_opened_at || opensAt!)}` : opensAt ? `Jadwal ${formatDate(opensAt)}` : 'Belum ada jadwal pembukaan'}

{!isOpen && access?.status !== 'closed' && } {!isOpen && access?.status !== 'closed' && ['meeting', 'schedule'].includes(assignment.release_mode) && availability.opens_at && }
); })}
); })()}
{material.status === 'published' && ( )} Periksa Edit
))}
)}
setDeletingAssignment(null)} onConfirm={() => deletingAssignment && router.delete(`/assignments/${deletingAssignment.id}`)} title="Hapus Tugas" message="Semua jawaban siswa untuk tugas ini juga akan terhapus." /> ); }