feat: enhance certificate management and project task features
- 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.
This commit is contained in:
Kemas M. Aryadary Rasyad
@@ -0,0 +1,159 @@
|
||||
import { useProjectTasks, useDeleteTask } from '../../../hooks/useTasks';
|
||||
import type { InternTaskItem, ProjectDetail } from '../../../types/project.types';
|
||||
import { ClipboardList, Pencil, Trash2 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import CreateTaskModal from './components/CreateTaskDialog';
|
||||
import EditTaskModal from './components/EditTaskDialog';
|
||||
import { customToast } from '../../utils/showToast';
|
||||
|
||||
export default function TaskTab({ project }: { project: ProjectDetail }) {
|
||||
const { tasks, loading, error, refetch } = useProjectTasks(project.id);
|
||||
const { remove } = useDeleteTask();
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||
const [selectedTask, setSelectedTask] = useState<InternTaskItem | null>(null);
|
||||
const isProjectActive = project?.status === "active"
|
||||
|
||||
const handleDeleteTask = async (taskId: number, taskTitle: string) => {
|
||||
const confirmed = window.confirm(`Yakin ingin menghapus task “${taskTitle}”?`);
|
||||
if (!confirmed) return;
|
||||
|
||||
const del = await remove(taskId, String(project.id));
|
||||
if (del) {
|
||||
try {
|
||||
customToast.success("Berhasil", `Task ${taskTitle} berhasil dihapus`)
|
||||
} catch (error) {
|
||||
customToast.error("Gagal", `Task ${taskTitle} gagal dihapus`)
|
||||
} finally {
|
||||
refetch();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return (
|
||||
<div className="flex flex-col gap-3 p-6">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div key={i} className="h-12 bg-gray-300 rounded-lg animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (error) return <p className="text-red-500 text-sm p-6">{error}</p>;
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 min-h-[400px]">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-3xl font-bold text-slate-800 tracking-tight">Tasks</h2>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
disabled={!isProjectActive}
|
||||
className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Add Task
|
||||
</button>
|
||||
</div>
|
||||
<hr className="border-gray-200/80 mb-4" />
|
||||
|
||||
<div className="flex flex-col">
|
||||
{loading ? (
|
||||
<div className="flex flex-col gap-3 py-4">
|
||||
{[...Array(tasks.length)].map((_, i) => (
|
||||
<div key={i} className="h-14 bg-gray-200 rounded-lg animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : error ? (
|
||||
<p className="text-red-500 text-sm py-4">{error}</p>
|
||||
) : tasks.length > 0 ? (
|
||||
tasks.map((task, idx) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className={`flex items-center justify-between py-4 group ${idx < tasks.length - 1 ? 'border-b border-gray-100' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<ClipboardList size={22} className="text-slate-600 shrink-0" />
|
||||
<span className="text-base text-slate-700 font-medium truncate">{task.title}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-slate-600 shrink-0">
|
||||
<button
|
||||
onClick={() => { setSelectedTask(task); setEditModalOpen(true); }}
|
||||
disabled={!isProjectActive}
|
||||
className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Pencil size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteTask(task.id, task.title)}
|
||||
disabled={!isProjectActive}
|
||||
className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className='flex flex-col items-center justify-center py-16'>
|
||||
<ClipboardList className='w-12 h-12 text-font-shade mx-auto' />
|
||||
<p className="text-sm text-font-shade mt-3">Belum ada tugas yang dibuat untuk proyek ini.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{/* {tasks.length > 0 ? (
|
||||
tasks.map((task, idx) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className={`flex items-center justify-between py-4 group ${
|
||||
idx < tasks.length - 1 ? 'border-b border-gray-100' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<ClipboardList size={22} className="text-slate-600 shrink-0" />
|
||||
<span className="text-base text-slate-700 font-medium truncate">{task.title}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-slate-600 shrink-0">
|
||||
<button
|
||||
onClick={() => { setSelectedTask(task); setEditModalOpen(true); }}
|
||||
disabled={!isProjectActive}
|
||||
className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Pencil size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteTask(task.id, task.title)}
|
||||
disabled={!isProjectActive}
|
||||
className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className='flex flex-col items-center justify-center py-16'>
|
||||
<ClipboardList className='w-12 h-12 text-font-shade mx-auto'/>
|
||||
<p className="text-sm text-font-shade mt-3">Belum ada tugas yang dibuat untuk proyek ini.</p>
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
|
||||
{isModalOpen && (
|
||||
<CreateTaskModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
projectId={String(project.id)}
|
||||
onSuccess={() => { setIsModalOpen(false); refetch(); }}
|
||||
/>
|
||||
)}
|
||||
{editModalOpen && selectedTask && (
|
||||
<EditTaskModal
|
||||
isOpen={editModalOpen}
|
||||
onClose={() => { setEditModalOpen(false); setSelectedTask(null); }}
|
||||
task={selectedTask}
|
||||
onSuccess={() => { setEditModalOpen(false); setSelectedTask(null); refetch(); }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user