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

Implementasi Backend pada login, FAQ, Settings Intern, Projects Intern, Home Intern

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-25 00:35:53 +07:00
parent 9e5a97ef10
commit f63efb0e12
29 changed files with 682 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/intern/components/TaskTimeline.tsx
+28 -14
View File
@@ -1,36 +1,50 @@
import { DEADLINES } from "../../../../lib/mockDeadline";
import type { Deadline } from "../../../../lib/mockDeadline";
import { useInternTasks } from "../../../../hooks/useProjects";
import type { InternTask } from "../../../../types/project.types";
const TaskTimeline = () => {
const { tasks, loading, error } = useInternTasks();
const today = new Date();
const isOverdue = (date: Date) => {
return date < today;
};
const isOverdue = (dateStr: string) => new Date(dateStr) < today;
if (loading) return (
<div className="flex flex-col gap-5">
{[...Array(3)].map((_, i) => (
<div key={i} className="h-10 bg-gray-100 rounded animate-pulse" />
))}
</div>
);
if (error) return <p className="text-red-500 text-sm">{error}</p>;
return (
<div>
<h2 className="text-base font-semibold text-gray-800 mb-5">Task Timeline</h2>
<h2 className="font-semibold text-font-shade mb-5">Task Timeline</h2>
<div className="relative">
<div className="absolute left-1 top-2 bottom-2 w-px bg-gray-200" />
<div className="absolute left-1 top-2 bottom-2 w-px bg-gray-300" />
<ul className="flex flex-col gap-5">
{DEADLINES.map((item: Deadline, index: number) => {
const overdue = isOverdue(item.date);
{tasks.map((item: InternTask) => {
const overdue = isOverdue(item.deadline_at);
const deadlineDate = new Date(item.deadline_at);
return (
<li key={index} className="flex gap-4 pl-0">
<li key={item.id} className="flex gap-4 pl-0">
<div className="relative flex-shrink-0 mt-1">
<span
className={`block w-2 h-2 rounded-full z-10 relative ${
overdue ? "bg-red-700" : "bg-gray-400"
overdue ? "bg-primary" : "bg-gray-500"
}`}
/>
</div>
<div className="flex flex-col gap-0.5 min-w-0">
<p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest">
{item.date.toLocaleDateString("id-ID")}
{deadlineDate.toLocaleDateString("id-ID")} AT{" "}
{deadlineDate.toLocaleTimeString("id-ID", {
hour: "2-digit",
minute: "2-digit",
})}
</p>
<p className="text-sm font-semibold text-gray-800">{item.label}</p>
<p className="text-xs text-gray-500">{item.time}</p>
<p className="text-sm font-semibold text-gray-800">{item.title}</p>
<p className="text-xs text-gray-500">{item.description}</p>
</div>
</li>
);