From 5516d355464e4d6795dd74fba63ca2a2e441c1c9 Mon Sep 17 00:00:00 2001
From: "Kemas M. Aryadary Rasyad"
 <112590882+aryadary0706@users.noreply.github.com>
Date: Fri, 10 Jul 2026 17:43:00 +0700
Subject: [PATCH] add overdue status signal UI for overdue task

---
 .../intern/components/ProjectTaskCard.tsx         | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Pages/internify/intern/components/ProjectTaskCard.tsx b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
index 43f034d..cddb41a 100644
--- a/src/Pages/internify/intern/components/ProjectTaskCard.tsx
+++ b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
@@ -7,18 +7,27 @@ const formatDate = (dateStr: string) =>
 const formatTime = (dateStr: string) =>
   new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
 
-const statusStyles: Record<InternTaskItem["submission_status"], string> = {
+type DisplayStatus = InternTaskItem["submission_status"] | "overdue";
+
+const statusStyles: Record<DisplayStatus, string> = {
   not_submitted: "bg-gray-50 text-gray-700 border-gray-200",
   submitted: "bg-green-50 text-green-700 border-green-200",
+  overdue: "bg-red-50 text-red-700 border-red-200",
 };
 
-const statusLabels: Record<InternTaskItem["submission_status"], string> = {
+const statusLabels: Record<DisplayStatus, string> = {
   not_submitted: "Pending",
   submitted: "Submitted",
+  overdue: "Overdue",
 };
 
 export default function TaskCard({ task }: { task: InternTaskItem }) {
   const navigate = useNavigate();
+  const displayStatus: DisplayStatus =
+    task.submission_status === "not_submitted" &&
+      new Date(task.deadline_at).getTime() < Date.now()
+      ? "overdue"
+      : task.submission_status;
   return (
     <div
       className="border border-card-outline rounded-xl px-6 py-4 mb-3 bg-white flex items-start justify-between gap-3 cursor-pointer hover:bg-gray-50 transition-colors"
@@ -43,7 +52,7 @@ export default function TaskCard({ task }: { task: InternTaskItem }) {
 
       <div className="shrink-0 hidden md:flex items-center border border-card-outline">
         <span
-          className={`font-semibold text-xs px-3.5 py-[5px] rounded-md whitespace-nowrap border ${statusStyles[task.submission_status]}`}>
+          className={`font-semibold text-xs px-3.5 py-[5px] rounded-md whitespace-nowrap border ${statusStyles[displayStatus]}`}>
           {statusLabels[task.submission_status]}
         </span>
       </div>