Kemas M. Aryadary Rasyad
5689898f33
- Updated CertificateForm to improve loading state UI with skeletons. - Enhanced CertificateResult with better loading indicators and structure. - Refactored ProjectForumTab to include a skeleton loader and improved error handling. - Introduced ProjectTaskTab for managing project tasks with modals for creating and editing tasks. - Improved ProjectsPage with a skeleton loader during project data fetching. - Refined AddInternsToProjects, ArchiveProjectDialog, CompleteProjectDialog, CreateProjectDialog, CreateTaskDialog, and EditTaskDialog components to handle modal states more effectively. - Updated EligibleInternTable to enhance loading states and formatting of dates. - Modified StatusSubmissionTable to simplify status display. - Improved certificate generation utility functions for better date formatting and layout management. - Removed deprecated certificate assets and added a new template for certificates. - Updated types for certificates and projects to include start and end dates.
75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import { useMyTasks } from "../../../../hooks/useProjects";
|
|
import type { InternTaskItem } from "../../../../types/project.types";
|
|
import { RiFileList2Fill } from "react-icons/ri";
|
|
|
|
const TaskTimeline = () => {
|
|
const { tasks, loading, error } = useMyTasks();
|
|
const today = new Date();
|
|
|
|
const isOverdue = (dateStr: string) => new Date(dateStr) < today;
|
|
|
|
const formatDate = (dateInput: Date | string) =>
|
|
new Date(dateInput).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
|
|
|
|
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="font-semibold text-font-shade mb-5">Timeline Tugas</h2>
|
|
|
|
{tasks.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-2 gap-3">
|
|
<RiFileList2Fill className="w-12 h-12 text-gray-400" />
|
|
<p className="text-sm text-gray-400">Tidak ada tugas saat ini</p>
|
|
</div>
|
|
) : (
|
|
<div className="relative overflow-y-auto max-h-[140px] px-3 md:px-6">
|
|
<ul className="flex flex-col gap-5">
|
|
{tasks.map((item: InternTaskItem, index) => {
|
|
const overdue = isOverdue(item.deadline_at);
|
|
const deadlineDate = new Date(item.deadline_at);
|
|
const isLast = index === tasks.length - 1;
|
|
|
|
return (
|
|
<li key={item.id} className="relative flex gap-4 pl-0">
|
|
{!isLast && (
|
|
<div className="absolute left-[3px] top-3 w-px h-3/2 bg-font-shade/30" />
|
|
)}
|
|
|
|
<div className="relative flex-shrink-0 mt-1">
|
|
<span
|
|
className={`block w-3 h-3 rounded-full z-10 relative border-2 right-0.5 border-white ${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-font-shade uppercase tracking-widest">
|
|
{formatDate(deadlineDate)} AT{" "}
|
|
{deadlineDate.toLocaleTimeString("id-ID", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</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>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskTimeline; |