update Task Submission Page: Submission, aftersubmission, etc

2026-06-23 12:43:25 +07:00
parent dc64fadfdd
commit 9e5a97ef10
20 changed files with 1485 additions and 280 deletions
@@ -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>
+  );
+}
@@ -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 ? (
@@ -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">