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

progress: breadcrumbs fixation, submission task fixation and add new UI after submitted, Certificates change layout and new page (Certificate List)

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-16 14:50:31 +07:00
parent 8b20c11822
commit f9bb21a961
23 changed files with 549 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/intern/components/CertificateAvailabe.tsx
+8 -51
View File
@@ -1,10 +1,10 @@
import { useState } from "react";
import { Download, History , Link, Award, Printer } from "lucide-react";
import { type CertificateData, type CertificateHistory } from "../../../../lib/mockData";
import { Download, Link, Printer } from "lucide-react";
import { type CertificateData } from "../../../../lib/mockSertificates";
import certificateImg from "../../../../assets/certificate.png";
export default function CertificateAvailable({ data }: { data: CertificateData }) {
const { certificate, history } = data;
const { certificate } = data;
const [copied, setCopied] = useState(false);
const handleCopyLink = () => {
@@ -14,11 +14,9 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
};
return (
<div className="flex flex-col lg:flex-row gap-6 items-start">
{/* LEFT: Certificate Preview + Actions */}
<div className="w-full lg:w-4/6 flex flex-col gap-4">
{/* Certificate Card */}
<div className="flex rounded-xl p-10 mb-3 border border-gray-300 shadow-md items-center justify-center">
<div className="flex flex-col gap-4">
{/* Certificate Card */}
<div className="flex rounded-xl p-5 mb-1 border border-gray-300 shadow-md items-center justify-center">
<img
src={certificateImg}
alt="Certificate"
@@ -68,13 +66,13 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
<div className="flex flex-col gap-3">
{/* Unduh Sertifikat */}
<button className="flex items-center justify-center gap-2 w-full bg-red-700 hover:bg-red-800 active:scale-95 transition-all text-white font-semibold py-3.5 rounded-xl text-sm">
<button className="flex items-center justify-center gap-2 w-full bg-red-700 hover:bg-red-800 active:scale-95 transition-all text-white font-semibold py-2 rounded-xl text-sm">
<Download className="w-4 h-4" />
Unduh Sertifikat (PDF)
</button>
{/* Bagikan ke LinkedIn */}
<button className="flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 active:scale-95 transition-all text-white font-semibold py-3.5 rounded-xl text-sm">
<button className="flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 active:scale-95 transition-all text-white font-semibold py-2 rounded-xl text-sm">
Bagikan ke LinkedIn
</button>
@@ -96,47 +94,6 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
</div>
</div>
</div>
</div>
{/* RIGHT: Certificate History */}
<div className="w-full lg:w-2/6 flex-shrink-0">
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-5">
<div className="flex items-center gap-2 mb-4">
<History className="w-5 h-5 text-red-700" />
<h3 className="font-semibold text-gray-800 text-lg">Certificate History</h3>
</div>
<div className="space-y-3">
{history.map((item: CertificateHistory) => (
<div
key={item.id}
className="flex flex-col gap-3 p-3 bg-white border border-gray-200 shadow-sm rounded-xl hover:bg-gray-50 transition-colors cursor-pointer"
>
<div className="w-full flex justify-center">
<img
src={certificateImg}
alt="Certificate"
className="rounded-xl h-[200px]"
/>
</div>
<div className="w-full">
<p className="text-xs">{item.month}</p>
<p className="text-sm font-semibold text-gray-800 leading-tight">{item.title}</p>
<p className="text-sm text-gray-500">
Grade: {item.grade}
</p>
</div>
</div>
))}
</div>
<div className="w-full my-3 flex justify-end">
<button className="text-sm text-red-500 font-semibold hover:underline">
See more
</button>
</div>
</div>
</div>
</div>
);
}
src/Pages/internify/intern/components/CertificateHistory.tsx
+47
View File
@@ -0,0 +1,47 @@
import { useNavigate } from "react-router-dom";
import { History } from "lucide-react";
import { type CertificateHistory, history as certificateHistory } from "../../../../lib/mockSertificates";
import certificateImg from "../../../../assets/certificate.png";
export default function SertificateHistory() {
const navigate = useNavigate();
return (
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-5">
<div className="flex items-center gap-2 mb-4">
<History className="w-5 h-5 text-red-700" />
<h3 className="font-semibold text-gray-800 text-lg">Certificate History</h3>
</div>
<div className="space-y-3">
{certificateHistory.slice(0, 2).map((item: CertificateHistory) => (
<div
key={item.id}
className="flex flex-col gap-3 p-3 bg-white border border-gray-200 shadow-sm rounded-xl hover:bg-gray-50 transition-colors cursor-pointer"
>
<div className="w-full flex justify-center">
<img
src={certificateImg}
alt="Certificate"
className="rounded-xl h-[150px] w-[150px] w-full object-cover"
/>
</div>
<div className="w-full">
<p className="text-xs text-gray-400">{item.month}</p>
<p className="text-sm font-semibold text-gray-800 leading-tight">{item.title}</p>
<p className="text-sm text-gray-500">Grade: {item.grade}</p>
</div>
</div>
))}
</div>
<div className="w-full my-3 flex justify-end">
<button
onClick={() => navigate('/intern/certificates/all')}
className="text-sm text-red-700 font-semibold hover:underline"
>
See more
</button>
</div>
</div>
);
}
src/Pages/internify/intern/components/CertificateNotAvailable.tsx
+13 -13
View File
@@ -2,33 +2,33 @@ import { Lock, Clock } from "lucide-react";
export default function CertificateNotAvailable({ progress, remainingTasks }: { progress: number; remainingTasks: number }) {
return (
<div className="bg-white w-full rounded-2xl border border-gray-100 shadow-sm py-16 p-23 flex flex-col items-center text-center md:max-w-3/5 mx-auto z-10">
<div className="bg-white w-full h-full rounded-2xl border border-gray-100 shadow-sm px-24 flex flex-col items-center justify-center">
{/* Icon */}
<div className="relative mb-6">
<div className=" w-33 h-33 border-2 border-dashed border-gray-600 rounded-xl flex justify-center items-center">
<div className=" w-45 h-45 border-2 border-dashed border-gray-600 rounded-xl flex justify-center items-center">
<div className="w-20 h-20 flex items-center rounded-lg justify-center bg-gray-300">
<Lock className="w-10 h-10 text-red-700" />
</div>
<div className="absolute -bottom-2 -right-2 w-6 h-6 bg-amber-500 rounded- flex items-center justify-center shadow-md">
<Clock className="w-4 h-4 text-yellow-800" />
</div>
<div className="w-30 h-30 flex items-center rounded-lg justify-center bg-gray-300">
<Lock className="w-16 h-16 text-red-700" />
</div>
<div className="absolute -bottom-2 -right-2 w-7 h-7 bg-amber-500 rounded- flex items-center justify-center shadow-md">
<Clock className="w-5 h-5 text-yellow-800" />
</div>
</div>
</div>
<h2 className="text-2xl font-bold text-gray-900 mb-3">Sertifikat Belum Tersedia</h2>
<p className="text-gray-500 text-sm leading-relaxed mb-6">
Anda harus menyelesaikan semua tugas proyek sebelum dapat mengunduh sertifikat kelulusan.
<h2 className="text-[37px] font-bold text-gray-900 mb-3">Sertifikat Belum Tersedia</h2>
<p className="text-gray-500 text-[17px] mb-6">
Anda harus menyelesaikan <span className="font-bold text-red-600">semua tugas proyek</span> sebelum dapat mengunduh sertifikat kelulusan.
Silakan periksa kembali progres tugas Anda di menu Proyek.
</p>
{/* Progress Bar */}
<div className="w-full">
<div className="w-1/3">
<div className="flex justify-between items-center mb-2">
<span className="text-sm font-semibold text-gray-700">Progres Proyek</span>
<span className="text-sm font-bold text-red-700">{progress}%</span>
</div>
<div className="w-full h-2.5 bg-gray-100 rounded-full overflow-hidden">
<div className="w-full h-3 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full bg-red-700 rounded-full transition-all duration-700"
style={{ width: `${progress}%` }}
src/Pages/internify/intern/components/HomeProjectList.tsx
+5 -5
View File
@@ -1,5 +1,7 @@
import { useNavigate } from 'react-router-dom'
import { mockProjects } from '../../../../lib/mockData'
import { mockProjects } from '../../../../lib/mockProjects'
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
const HomeProjectList = () => {
const navigate = useNavigate();
@@ -11,14 +13,12 @@ const HomeProjectList = () => {
return (
<div
key={index}
onClick={() => navigate(`/intern/projects/${project.id}`)}
onClick={() => navigate(`/intern/projects/${toSlug(project.name)}`)}
className="flex items-center gap-4 border border-gray-200 rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
>
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-gray-300`}>
</div>
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-gray-300`}/>
<div>
<p className="text-sm font-semibold text-gray-800">{project.name}</p>
{/* <p className="text-xs text-gray-400">{project.role}</p> */}
</div>
</div>
)
src/Pages/internify/intern/components/ProjectTaskCard.tsx
+10 -4
View File
@@ -1,11 +1,14 @@
import type { Task } from "../../../../lib/mockData";
import type { Task } from "../../../../lib/mockProjects";
import { useNavigate } from "react-router-dom";
const formatDate = (date: Date) =>
new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
export default function TaskCard({ task }: { task: Task }) {
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
export default function TaskCard({ task, projectName }: { task: Task; projectName: string }) {
const navigate = useNavigate();
const toTaskSlug = (title: string) => title.toLowerCase().replace(/\s+/g, '-');
return (
<div className="border border-gray-200 rounded-[10px] px-6 py-4 mb-3 bg-white flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
@@ -18,6 +21,9 @@ export default function TaskCard({ task }: { task: Task }) {
<div className=" text-[13px] text-[#666]">
{task.description}
</div>
<div className=" text-[13px] text-[#666]">
Tipe Submission : {task.type === 'file' ? "File" : "Link"}
</div>
</div>
<div className="shrink-0">
@@ -26,11 +32,11 @@ export default function TaskCard({ task }: { task: Task }) {
DONE
</span>
) : (
<button className=" bg-white text-[#1a1a1a] border-[1.5px] border-[#d0d0d0] font-semibold text-xs px-3.5 py-[5px] rounded-md cursor-pointer whitespace-nowrap transition-colors duration-150 hover:border-[#C0392B] hover:text-[#C0392B]" onClick={() => navigate(`/intern/tasks/${task.id}/submit`)}>
<button className=" bg-white text-[#1a1a1a] border-[1.5px] border-[#d0d0d0] font-semibold text-xs px-3.5 py-[5px] rounded-md cursor-pointer whitespace-nowrap transition-colors duration-150 hover:border-[#C0392B] hover:text-[#C0392B]" onClick={() => navigate(`/intern/projects/${toSlug(projectName)}/${toTaskSlug(task.title)}?type=${task.type}`)}>
Add Submission
</button>
)}
</div>
</div>
);
}
}
src/Pages/internify/intern/components/ProjectsCard.tsx
+3 -2
View File
@@ -1,5 +1,7 @@
import { useNavigate } from 'react-router-dom'
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
interface ProjectCardProps {
id: number | string
name: string
@@ -12,7 +14,6 @@ interface ProjectCardProps {
}
const ProjectCard = ({
id,
name,
mentor,
avatarUrl,
@@ -65,7 +66,7 @@ const ProjectCard = ({
{/* Button */}
<div className="flex items-end justify-end px-3 pb-1">
<button
onClick={() => navigate(`/intern/projects/${id}`)}
onClick={() => navigate(`/intern/projects/${toSlug(name)}`)}
className="bg-red-600 hover:bg-red-700 text-white text-xs font-medium py-1.5 px-3 rounded-xl transition-colors"
>
View Project
src/Pages/internify/intern/components/SidebarIntern.tsx
+2 -7
View File
@@ -30,14 +30,9 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
return (
<aside
className={`
/* Struktur Dasar Layout */
bg-white border-r border-gray-300 flex flex-col py-5 px-3 gap-1 overflow-y-auto flex-shrink-0 transition-transform duration-300 ease-in-out
/* Kondisi Layar Desktop (>= md) */
md:sticky md:top-[73px] md:h-[calc(100vh-73px)] md:w-[250px] md:translate-x-0 md:z-8
/* Kondisi Layar Mobile (< md) dan Logika Aktif-nya */
fixed top-0 left-0 h-screen w-[270px] z-40 pt-5
md:sticky md:top-[50px] md:h-[calc(100vh-73px)] md:w-[250px] md:translate-x-0 md:z-8
fixed top-0 left-0 h-[calc(100vh-50px)] w-[270px] z-40 pt-5
${isOpen ? "translate-x-0" : "-translate-x-full"}
`}
>
src/Pages/internify/intern/components/TaskForm-file.tsx
+147 -43
View File
@@ -1,20 +1,20 @@
import { useState, useRef } from "react";
import { FileText, UploadCloud } from "lucide-react";
import { FileText, UploadCloud, Trash2, X, FileUp } from "lucide-react";
import { LuSendHorizontal } from "react-icons/lu";
interface TaskFormFileProps {
taskId: string | undefined;
onSubmitSuccess: (file: File) => void;
onSubmitSuccess: (files: File[]) => void;
}
export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFileProps) {
const [file, setFile] = useState<File | null>(null);
const [files, setFiles] = useState<File[]>([]);
const [isDragActive, setIsDragActive] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files[0]) {
validateAndSetFile(e.target.files[0]);
if (e.target.files && e.target.files.length > 0) {
validateAndAddFiles(Array.from(e.target.files));
}
};
@@ -33,39 +33,138 @@ export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFilePr
e.stopPropagation();
setIsDragActive(false);
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
validateAndSetFile(e.dataTransfer.files[0]);
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
validateAndAddFiles(Array.from(e.dataTransfer.files));
}
};
const validateAndSetFile = (selectedFile: File) => {
const validateAndAddFiles = (selectedFiles: File[]) => {
const allowedExtensions = ["pdf", "docx", "zip"];
const fileExtension = selectedFile.name.split(".").pop()?.toLowerCase();
const validFiles: File[] = [];
if (fileExtension && allowedExtensions.includes(fileExtension)) {
if (selectedFile.size <= 10 * 1024 * 1024) {
setFile(selectedFile);
selectedFiles.forEach((file) => {
const fileExtension = file.name.split(".").pop()?.toLowerCase();
if (fileExtension && allowedExtensions.includes(fileExtension)) {
if (file.size <= 10 * 1024 * 1024) {
validFiles.push(file);
} else {
alert(`Ukuran file ${file.name} melebihi batas maksimal 10MB.`);
}
} else {
alert("Ukuran file melebihi batas maksimal 10MB.");
alert(`Format file ${file.name} tidak didukung. Harap gunakan PDF, DOCX, atau ZIP.`);
}
} else {
alert("Format file tidak didukung. Harap gunakan PDF, DOCX, atau ZIP.");
});
if (validFiles.length > 0) {
setFiles((prev) => [...prev, ...validFiles]);
}
};
const removeFile = (indexToRemove: number, e: React.MouseEvent) => {
e.stopPropagation();
setFiles((prev) => prev.filter((_, index) => index !== indexToRemove));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!file) {
if (files.length === 0) {
alert("Silakan pilih atau jatuhkan berkas tugas Anda terlebih dahulu.");
return;
}
onSubmitSuccess(file);
// Set to local submitted mode
setIsSubmitted(true);
// Call parent handler
onSubmitSuccess(files);
};
const handleEditSubmission = () => {
setIsSubmitted(false);
};
const handleDeleteSubmission = () => {
if (confirm("Are you sure you want to delete this submission?")) {
setFiles([]);
setIsSubmitted(false);
}
};
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>
);
}
return (
<form onSubmit={handleSubmit} className="space-y-4">
<input
type="file"
multiple
ref={fileInputRef}
onChange={handleFileChange}
accept=".pdf,.docx,.zip"
@@ -78,33 +177,38 @@ export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFilePr
onDragLeave={handleDrag}
onDrop={handleDrop}
onClick={() => fileInputRef.current?.click()}
className={`w-full min-h-[180px] border-2 border-dashed rounded-xl flex flex-col items-center justify-center p-6 text-center cursor-pointer transition-all ${
isDragActive
? "border-[#B30000] bg-red-50/40"
: "border-gray-200 bg-gray-50/50 hover:bg-gray-50 hover:border-gray-300"
}`}
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"
}`}
>
{file ? (
<div className="space-y-2 pointer-events-none animate-in fade-in duration-200">
<div className="w-12 h-12 bg-green-50 text-green-600 rounded-full flex items-center justify-center mx-auto">
<FileText className="w-6 h-6 stroke-[2]" />
</div>
<p className="text-sm font-bold text-gray-800 max-w-md truncate">{file.name}</p>
<p className="text-xs text-gray-400">
{(file.size / (1024 * 1024)).toFixed(2)} MB • Klik untuk mengganti berkas
</p>
{files.length > 0 ? (
<div className="space-y-2">
{files.map((file, index) => (
<div
key={index}
className="flex items-center justify-between text-sm font-medium text-gray-800"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center gap-2">
<FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
{file.name}
</div>
<button
type="button"
onClick={(e) => removeFile(index, e)}
className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
>
<X className="w-4 h-4" />
</button>
</div>
))}
</div>
) : (
<div className="space-y-2 pointer-events-none">
<UploadCloud className="w-10 h-10 text-gray-400 mx-auto stroke-[1.5]" />
<div>
<p className="text-sm font-bold text-gray-700">
Click to upload <span className="font-medium text-gray-500">or drag & drop</span>
</p>
<p className="text-[11px] text-gray-400 font-semibold mt-1">
PDF, DOCX, or ZIP (Max. 10MB)
</p>
</div>
<div className="flex flex-col items-center justify-center h-full space-y-2 pointer-events-none text-center py-6">
<UploadCloud className="w-8 h-8 text-gray-400 mx-auto stroke-[1.5]" />
<p className="text-sm font-bold text-gray-700">
Click to upload <span className="font-medium text-gray-500">or drag & drop</span>
</p>
<p className="text-[11px] text-gray-400 font-semibold">PDF, DOCX, or ZIP (Max. 10MB)</p>
</div>
)}
</div>
@@ -113,7 +217,7 @@ export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFilePr
type="submit"
className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-bold text-base py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
>
Submit Task
Save Changes
<LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
</button>
</form>
src/Pages/internify/intern/components/TaskForm-link.tsx
+72 -1
View File
@@ -1,5 +1,5 @@
import { useState } from "react";
import { Link } from "lucide-react";
import { Link, FileText } from "lucide-react";
import { LuSendHorizontal } from "react-icons/lu";
interface TaskFormLinkProps {
@@ -9,6 +9,7 @@ interface TaskFormLinkProps {
export default function TaskFormLink({ taskId, onSubmitSuccess }: TaskFormLinkProps) {
const [submissionLink, setSubmissionLink] = useState("");
const [isSubmitted, setIsSubmitted] = useState(false);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
@@ -16,9 +17,79 @@ export default function TaskFormLink({ taskId, onSubmitSuccess }: TaskFormLinkPr
alert("Silakan masukkan link tugas Anda terlebih dahulu.");
return;
}
setIsSubmitted(true); // ini hilang
onSubmitSuccess(submissionLink);
};
const handleEditSubmission = () => {
setIsSubmitted(false);
};
const handleDeleteSubmission = () => {
if (confirm("Are you sure you want to delete this submission?")) {
setSubmissionLink("");
setIsSubmitted(false);
}
};
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 (
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-1.5">