sulthan/internify-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update Task Submission Page: Submission, aftersubmission, etc

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/intern/TaskSubmission.tsx
+18 -22
View File
@@ -8,12 +8,12 @@ const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
export default function TaskSubmission() {
const [searchParams] = useSearchParams();
const { slug, taskSlug } = useParams<{ slug: string; taskSlug: string }>();
const { slug, TaskSlug } = useParams<{ slug: string; TaskSlug: string }>();
const submissionType = (searchParams.get("type") ?? "file") as "file" | "link";
const project = mockProjects.find((p) => toSlug(p.name) === slug);
const task = project?.tasks.find((t) => toSlug(t.title) === taskSlug);
const task = project?.tasks.find((t) => toSlug(t.title) === TaskSlug);
const handleFileSubmit = (files: File[]) => {
const fileNames = files.map(f => f.name).join(', ');
console.log(`Submitting Files for Project ${slug}:`, fileNames);
@@ -28,47 +28,43 @@ export default function TaskSubmission() {
return (
<div className="space-y-4">
{/* Header Card */}
<div className="w-full bg-white rounded-2xl border border-gray-100 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 ">
<div className="flex justify-between items-start">
<div>
<div className="space-y-2">
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">
{task?.title ?? "Submit Task"}
{task?.title}
</h1>
<span className="text-sm font-bold text-gray-600">
Due {task?.deadline.label} at {task?.deadline.time}
</span>
</div>
<span className={`text-xs font-bold px-3 py-1.5 rounded-lg ${submissionType === "file"
? "bg-blue-50 text-blue-700 border border-blue-100"
: "bg-purple-50 text-purple-700 border border-purple-100"
}`}>
{submissionType === "file" ? "📄 File Upload" : "🔗 Link Submission"}
</span>
</div>
</div>
{/* Task Description Card */}
<div className="w-full bg-white rounded-2xl border border-gray-100 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.01)] space-y-3">
<h2 className="text-base font-bold text-gray-800 tracking-tight">Task Description</h2>
<p className="text-sm text-gray-500 font-medium leading-relaxed">
{task?.description ?? "Kerjakan dan kirimkan tugas sesuai dengan instruksi yang diberikan."}
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 space-y-3">
<h2 className="text-xl text-gray-800 tracking-tight">Task Description</h2>
<p className="text-sm text-foreground font-light leading-relaxed">
{task?.description}
</p>
</div>
{/* Submit Area Card */}
<div className="w-full bg-white rounded-2xl border border-gray-100 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.01)] space-y-5">
<div className="flex items-center gap-2 border-b border-gray-50 pb-2">
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 space-y-5">
<div className="flex items-center gap-2 pb-2">
<FileText className="w-4 h-4 text-[#B30000] stroke-[2.5]" />
<h2 className="text-base font-bold text-gray-800 tracking-tight">Submit Task</h2>
<h2 className="text-base font-bold text-secondary tracking-tight">Save Changes</h2>
</div>
{/* Render form sesuai tipe dari query param */}
{submissionType === "file" ? (
<TaskFormFile taskId={slug} onSubmitSuccess={handleFileSubmit} />
<TaskFormFile onSubmitSuccess={handleFileSubmit} deadline={task?.deadline.date}/>
) : (
<TaskFormLink taskId={slug} onSubmitSuccess={handleLinkSubmit} />
<TaskFormLink onSubmitSuccess={handleLinkSubmit} deadline={task?.deadline.date}/>
)}
{/* Info Box */}
<div className="w-full bg-gray-50 border border-gray-100 rounded-lg p-3 flex items-start gap-2.5">
<div className="w-full border border-box-border rounded-lg p-3 flex items-start gap-2.5">
<Info className="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" />
<p className="text-[11px] text-gray-400 font-medium leading-relaxed">
Once submitted, your work will be locked for mentor review. You can request a re-submission if needed.
src/Pages/internify/intern/components/SubmissionStatusTable.tsx
+145
View File
@@ -0,0 +1,145 @@
import { useState } from "react";
import { FileText, FileUp, Link } from "lucide-react";
interface SubmitStatusTableProps {
type: "file" | "link";
files?: File[];
link?: string;
submittedAt?: Date;
deadline?: Date;
onEdit: () => void;
onDelete: () => void;
}
function getTimeEarly(submittedAt: Date, deadline: Date): string {
const diffMs = deadline.getTime() - submittedAt.getTime();
if (diffMs <= 0) return "Submitted after deadline";
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
const days = Math.floor(diffHours / 24);
const hours = diffHours % 24;
const parts = [];
if (days > 0) parts.push(`${days} day${days > 1 ? "s" : ""}`);
if (hours > 0) parts.push(`${hours} hour${hours > 1 ? "s" : ""}`);
return `Assignment was submitted ${parts.join(" ")} early`;
}
export default function SubmitStatusTable({
type,
files = [],
link = "",
submittedAt = new Date(),
deadline,
onEdit,
onDelete,
}: SubmitStatusTableProps) {
const [confirmDelete, setConfirmDelete] = useState(false);
const timeLabel = deadline
? getTimeEarly(submittedAt, deadline)
: "Assignment was submitted early";
const rows = [
{ label: "Submission status", value: "Submitted for grading" },
{ label: "Grading status", value: "Not graded" },
{ label: "Time Remaining", value: timeLabel },
];
return (
<div className="bg-box-secondary border border-box-border rounded-2xl overflow-hidden">
{/* Header */}
<div className="flex justify-between items-center px-4 py-3 border-b border-box-border">
<div className="flex items-center gap-2">
{confirmDelete ? (
<span className="text-xs font-medium text-gray-600">
Are you sure you want to remove your submission?
</span>
) : (
<>
<FileUp className="w-5 h-5 text-red-700 stroke-[2]" />
<span className="font-bold text-sm text-gray-800">Submit Status</span>
</>
)}
</div>
{confirmDelete ? (
/* Confirm state */
<div className="flex items-center gap-3">
<button
onClick={() => setConfirmDelete(false)}
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
>
Cancel
</button>
<button
onClick={() => {
setConfirmDelete(false);
onDelete();
}}
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-primary text-white hover:bg-red-800 transition-colors"
>
Continue
</button>
</div>
) : (
/* Default state */
<div className="flex gap-2">
<button
onClick={onEdit}
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
>
Edit Submission
</button>
<button
onClick={() => setConfirmDelete(true)}
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:text-red-700 hover:bg-red-50 hover:border-red-200 transition-colors"
>
Delete Submission
</button>
</div>
)}
</div>
{/* Rows */}
<div>
{rows.map((row) => (
<div
key={row.label}
className="grid grid-cols-[180px_1fr] border-b border-box-border"
>
<div className="px-4 py-3 text-sm text-gray-500 border-r border-box-border">
{row.label}
</div>
<div className="px-4 py-3 text-sm text-gray-800">{row.value}</div>
</div>
))}
{/* File / Link row */}
<div className="grid grid-cols-[180px_1fr]">
<div className="px-4 py-3 text-sm text-gray-500 border-r border-box-border">
{type === "file" ? "File submission" : "Link submission"}
</div>
<div className="px-4 py-3 flex flex-col gap-2">
{type === "file" ? (
files.map((f, i) => (
<div key={i} className="flex items-center gap-2 text-sm text-gray-800">
<FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
{f.name}
</div>
))
) : (
<a
href={link}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 text-sm text-blue-600 hover:underline break-all"
>
<Link className="w-3.5 h-3.5 shrink-0" />
{link}
</a>
)}
</div>
</div>
</div>
</div>
);
}
src/Pages/internify/intern/components/TaskForm-file.tsx
+18 -75
View File
@@ -1,13 +1,14 @@
import { useState, useRef } from "react";
import { FileText, UploadCloud, X, FileUp } from "lucide-react";
import { FileText, UploadCloud, X } from "lucide-react";
import { LuSendHorizontal } from "react-icons/lu";
import SubmitStatusTable from "./SubmissionStatusTable";
interface TaskFormFileProps {
taskId: string | undefined;
onSubmitSuccess: (files: File[]) => void;
deadline?: Date;
}
export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFileProps) {
export default function TaskFormFile({ onSubmitSuccess, deadline }: TaskFormFileProps) {
const [files, setFiles] = useState<File[]>([]);
const [isDragActive, setIsDragActive] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
@@ -88,77 +89,19 @@ export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFilePr
}
};
if (isSubmitted) {
return (
<div className="border border-gray-200 rounded-xl bg-white shadow-sm overflow-hidden">
{/* Header Action */}
<div className="flex flex-col sm:flex-row justify-between items-center bg-gray-50/50 p-4 border-b border-gray-200 gap-4 sm:gap-0">
<div className="flex items-center gap-2">
<FileUp className="w-5 h-5 text-red-700 stroke-[2]" />
<h3 className="font-bold text-gray-800 tracking-tight">Submit Status</h3>
</div>
<div className="flex gap-2 w-full sm:w-auto">
<button
onClick={handleEditSubmission}
className="flex-1 sm:flex-none bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold text-xs py-2 px-4 rounded-lg transition-colors"
>
Edit Submission
</button>
<button
onClick={handleDeleteSubmission}
className="flex-1 sm:flex-none bg-gray-200 hover:bg-red-100 text-gray-800 hover:text-red-700 font-bold text-xs py-2 px-4 rounded-lg transition-colors"
>
Delete Submission
</button>
</div>
</div>
{/* Status Table */}
<div className="grid grid-cols-1 divide-y divide-gray-100">
<div className="grid grid-cols-1 sm:grid-cols-[1fr_2fr] hover:bg-gray-50/30 transition-colors">
<div className="p-4 text-sm font-medium text-gray-500 bg-gray-50 sm:bg-transparent sm:border-r border-gray-100">
Submission status
</div>
<div className="p-4 text-sm font-medium text-gray-800">
Submitted for grading
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-[1fr_2fr] hover:bg-gray-50/30 transition-colors">
<div className="p-4 text-sm font-medium text-gray-500 bg-gray-50 sm:bg-transparent sm:border-r border-gray-100">
Grading status
</div>
<div className="p-4 text-sm font-medium text-gray-800">
Not graded
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-[1fr_2fr] hover:bg-gray-50/30 transition-colors">
<div className="p-4 text-sm font-medium text-gray-500 bg-gray-50 sm:bg-transparent sm:border-r border-gray-100">
Time Remaining
</div>
<div className="p-4 text-sm font-medium text-gray-800">
Assignment was submitted [waktu submitted]
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-[1fr_2fr] hover:bg-gray-50/30 transition-colors">
<div className="p-4 text-sm font-medium text-gray-500 bg-gray-50 sm:bg-transparent sm:border-r border-gray-100">
File submission
</div>
<div className="p-4 flex flex-col gap-2">
{files.map((f, i) => (
<div key={i} className="flex items-center gap-2 text-sm font-medium text-gray-800">
<FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
{f.name}
</div>
))}
</div>
</div>
</div>
</div>
);
}
// ganti if (isSubmitted) { return (...) }
if (isSubmitted) {
return (
<SubmitStatusTable
type="file"
files={files}
submittedAt={new Date()}
deadline={deadline} // opsional, kirim dari parent kalau ada
onEdit={handleEditSubmission}
onDelete={handleDeleteSubmission}
/>
);
}
return (
<form onSubmit={handleSubmit} className="space-y-4">
@@ -177,7 +120,7 @@ export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFilePr
onDragLeave={handleDrag}
onDrop={handleDrop}
onClick={() => fileInputRef.current?.click()}
className={`w-full min-h-[120px] border border-dashed rounded-xl p-4 bg-white cursor-pointer transition-all ${isDragActive ? "border-[#B30000] bg-red-50/40" : "border-gray-200 hover:border-gray-300"
className={`w-full min-h-[120px] border border-dashed rounded-xl p-4 bg-box-secondary cursor-pointer transition-all ${isDragActive ? "border-[#B30000] bg-red-50/40" : "border-foreground hover:border-gray-500"
}`}
>
{files.length > 0 ? (
src/Pages/internify/intern/components/TaskForm-link.tsx
+15 -59
View File
@@ -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">