import { Form, Head, Link } from '@inertiajs/react'; import { CheckCircle2, Clock, FileText, Upload, Download, ChevronLeft, ChevronDown, BookOpen, ClipboardList, Play, ChevronRight } from 'lucide-react'; import { useState } from 'react'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Spinner } from '@/components/ui/spinner'; import RichEditor from '@/components/rich-editor'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type SimpleLesson = { id: number; title: string; type: string; order: number }; type SimpleQuiz = { id: number; title: string; order: number }; type SimpleAssignment = { id: number; title: string; order: number }; type Chapter = { id: number; title: string; order: number; lessons: SimpleLesson[]; quizzes: SimpleQuiz[]; assignments: SimpleAssignment[]; }; type Assignment = { id: number; chapter_id: number; title: string; description: string; instructions: string | null; deadline: string | null; max_score: number; submission_type?: 'file' | 'text' | 'both'; }; type Submission = { id: number; status: 'submitted' | 'graded' | 'late'; score: number | null; feedback: string | null; created_at: string; file_path?: string | null; submission_text?: string | null; } | null; type Props = { course: { id: number; title: string; slug: string; chapters: Chapter[] }; assignment: Assignment; submission: Submission; completedLessonIds: number[]; progress: { total: number; completed: number; percent: number }; prev_item: { id: number; type: string; url: string } | null; next_item: { id: number; type: string; url: string } | null; }; function formatDate(date: string): string { return new Intl.DateTimeFormat('id-ID', { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit', }).format(new Date(date)); } function lessonTypeIcon(type: string) { if (type === 'video') return ; if (type === 'pdf' || type === 'file') return ; return ; } export default function AssignmentShow({ course, assignment, submission, completedLessonIds, progress, prev_item, next_item, }: Props) { const isDeadlinePassed = assignment.deadline ? new Date() > new Date(assignment.deadline) : false; const [submissionText, setSubmissionText] = useState(''); const [isEditing, setIsEditing] = useState(false); const [openChapters, setOpenChapters] = useState>({ [assignment.chapter_id]: true }); const subType = assignment.submission_type ?? 'file'; const BRAND = '#118AB2'; const SUCCESS = '#06D6A0'; return ( <>
{/* ── SIDEBAR ────────────────────────────────────────────── */} {/* ── MAIN CONTENT ───────────────────────────────────────── */}
← {course.title}

{assignment.title}

{assignment.deadline && (
Deadline: {formatDate(assignment.deadline)} {isDeadlinePassed && ' (Sudah lewat)'}
)}
{/* Description */}

Deskripsi Tugas

{assignment.description}

{assignment.instructions && ( <>

Petunjuk

)}

Nilai maksimal: {assignment.max_score}

{/* Submission Status */} {submission && !isEditing ? (

{submission.status === 'late' ? 'Dikumpulkan (Terlambat)' : 'Sudah Dikumpulkan'}

Dikumpulkan pada {formatDate(submission.created_at)} {submission.updated_at && new Date(submission.updated_at).getTime() - new Date(submission.created_at).getTime() > 1000 && ( Diedit pada {formatDate(submission.updated_at)} )}

{/* Display own submission details */} {submission.file_path && (
File Tugas Anda Unduh File
)} {submission.submission_text && (

Jawaban Teks Anda:

)} {submission.score !== null && (

Nilai:{' '} {submission.score}/{assignment.max_score}

)} {submission.feedback && (

Feedback Instruktur

{submission.feedback}

)} {submission.score === null && (

Menunggu penilaian instruktur...

)}
) : (

{submission ? 'Edit Jawaban Tugas' : 'Kumpulkan Tugas'}

{submission && ( )}
setIsEditing(false)} className="flex flex-col gap-4" > {({ errors, processing }) => ( <> {/* File Input (if required/optional) */} {(subType === 'file' || subType === 'both') && (
{submission?.file_path && (

File saat ini sudah diunggah. Unggah file baru untuk menggantinya.

)}
)} {/* Rich Text Editor Input (if required/optional) */} {(subType === 'text' || subType === 'both') && (
)}