update Task Submission Page: Submission, aftersubmission, etc

This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-23 12:43:25 +07:00
parent dc64fadfdd
commit 9e5a97ef10
20 changed files with 1485 additions and 280 deletions
@@ -1,20 +1,21 @@
import { useState } from "react";
import { Link, FileText } from "lucide-react";
import { LuSendHorizontal } from "react-icons/lu";
import SubmitStatusTable from "./SubmissionStatusTable";
interface TaskFormLinkProps {
taskId: string | undefined;
onSubmitSuccess: (link: string) => void;
deadline?: Date;
}
export default function TaskFormLink({ taskId, onSubmitSuccess }: TaskFormLinkProps) {
export default function TaskFormLink({ onSubmitSuccess, deadline }: TaskFormLinkProps) {
const [submissionLink, setSubmissionLink] = useState("");
const [isSubmitted, setIsSubmitted] = useState(false);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!submissionLink.trim()) {
alert("Silakan masukkan link tugas Anda terlebih dahulu.");
// alert("Silakan masukkan link tugas Anda terlebih dahulu.");
return;
}
setIsSubmitted(true); // ini hilang
@@ -33,62 +34,17 @@ export default function TaskFormLink({ taskId, onSubmitSuccess }: TaskFormLinkPr
};
if (isSubmitted) {
return (
<div className="border border-gray-200 rounded-xl bg-white overflow-hidden">
{/* Header */}
<div className="flex justify-between items-center bg-gray-50 p-4 border-b border-gray-200">
<div className="flex items-center gap-2">
<FileText className="w-4 h-4 text-red-700 stroke-[2]" />
<h3 className="font-bold text-gray-800 text-sm">Submit Status</h3>
</div>
<div className="flex gap-2">
<button
onClick={handleEditSubmission}
className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold text-xs py-1.5 px-3 rounded-lg transition-colors"
>
Edit Submission
</button>
<button
onClick={handleDeleteSubmission}
className="bg-gray-200 hover:bg-red-100 text-gray-800 hover:text-red-700 font-bold text-xs py-1.5 px-3 rounded-lg transition-colors"
>
Delete Submission
</button>
</div>
</div>
{/* Table */}
<div className="divide-y divide-gray-100">
<div className="grid grid-cols-[1fr_2fr]">
<div className="p-4 text-sm text-gray-500 font-medium bg-gray-50 border-r border-gray-100">Submission status</div>
<div className="p-4 text-sm text-gray-800 font-medium">Submitted for grading</div>
</div>
<div className="grid grid-cols-[1fr_2fr]">
<div className="p-4 text-sm text-gray-500 font-medium bg-gray-50 border-r border-gray-100">Grading status</div>
<div className="p-4 text-sm text-gray-800 font-medium">pc: Not graded</div>
</div>
<div className="grid grid-cols-[1fr_2fr]">
<div className="p-4 text-sm text-gray-500 font-medium bg-gray-50 border-r border-gray-100">Time Remaining</div>
<div className="p-4 text-sm text-gray-800 font-medium">pc: Assignment was submitted 2 days 15 hours early</div>
</div>
<div className="grid grid-cols-[1fr_2fr]">
<div className="p-4 text-sm text-gray-500 font-medium bg-gray-50 border-r border-gray-100">Link submission</div>
<div className="p-4 text-sm font-medium">
<a
href={submissionLink}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline break-all flex items-center gap-1.5"
>
<Link className="w-3.5 h-3.5 shrink-0" />
{submissionLink}
</a>
</div>
</div>
</div>
</div >
);
}
return (
<SubmitStatusTable
type="link"
link={submissionLink}
submittedAt={new Date()}
deadline={deadline}
onEdit={handleEditSubmission}
onDelete={handleDeleteSubmission}
/>
);
}
return (
<form onSubmit={handleSubmit} className="space-y-5">