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

feat: update routing parameters, add header component, and refactor project details; enhance breadcrumb labels and task timeline

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-16 11:47:47 +07:00
parent b7489e3be7
commit 8b20c11822
12 changed files with 318 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/intern/components/TaskTimeline.tsx
+21 -35
View File
@@ -1,58 +1,44 @@
import type { TaskTimelineProps } from "../../../../lib/mockDeadline"
import { defaultTasks } from "../../../../lib/mockDeadline"
import { DEADLINES } from "../../../../lib/mockDeadline";
import type { Deadline } from "../../../../lib/mockDeadline";
const TaskTimeline = ({ tasks = defaultTasks }: TaskTimelineProps) => {
const today = new Date()
const TaskTimeline = () => {
const today = new Date();
const isOverdue = (date: Date) => {
return date < today;
};
const isOverdue = (tanggal: string) => {
const deadline = new Date(tanggal)
return deadline < today
}
const upcomingIndex = tasks.findIndex(
task => new Date(task.tanggal) >= today
)
return (
<div>
<h2 className="text-base font-semibold text-gray-800 mb-5">Task Timeline</h2>
<div className="relative">
{/* Vertical line */}
<div className="absolute left-1.5 top-2 bottom-2 w-px bg-gray-200" />
<div className="absolute left-1 top-2 bottom-2 w-px bg-gray-200" />
<ul className="flex flex-col gap-5">
{tasks.map((task, index) => {
const overdue = isOverdue(task.tanggal)
const isRedDot = overdue || index === upcomingIndex
{DEADLINES.map((item: Deadline, index: number) => {
const overdue = isOverdue(item.date);
return (
<li key={index} className="flex gap-4 pl-0">
{/* Dot */}
<div className="relative flex-shrink-0 mt-1">
<span
className={`block w-3 h-3 rounded-full border-2 z-10 relative
${isRedDot
? 'bg-red-800 '
: 'bg-gray-400'
}`}
className={`block w-2 h-2 rounded-full z-10 relative ${
overdue ? "bg-red-700" : "bg-gray-400"
}`}
/>
</div>
{/* Content */}
<div className="flex flex-col gap-0.5 min-w-0">
<p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest">
{task.tanggal}
{item.date.toLocaleDateString("id-ID")}
</p>
<p className="text-sm font-semibold text-gray-800">{task.title}</p>
<p className="text-xs text-gray-500">{task.description}</p>
<p className="text-sm font-semibold text-gray-800">{item.label}</p>
<p className="text-xs text-gray-500">{item.time}</p>
</div>
</li>
)
);
})}
</ul>
</div>
</div>
)
}
);
};
export default TaskTimeline
export default TaskTimeline;