intern project and user fix bug and implementation
This commit is contained in:
Kemas M. Aryadary Rasyad
@@ -2,12 +2,12 @@ import { useParams } from 'react-router-dom';
|
||||
import ProjectTimeline from './components/ProjectTimeline';
|
||||
import TaskCard from './components/ProjectTaskCard';
|
||||
import HeroProject from './components/Hero-project';
|
||||
import { useProjectTasks } from '../../../hooks/useProjectDetail';
|
||||
import { useProjectTasks } from '../../../hooks/useTasks';
|
||||
import type { Project } from '../../../types/project.types';
|
||||
|
||||
export default function ForumTab({ project }: { project: Project }) {
|
||||
const { id } = useParams<{id:string}>();
|
||||
const { tasks, loading, error } = useProjectTasks(id ?? "");
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const { tasks, loading, error } = useProjectTasks(slug ?? "");
|
||||
return (
|
||||
<div>
|
||||
{/* Hero banner */}
|
||||
@@ -26,19 +26,18 @@ export default function ForumTab({ project }: { project: Project }) {
|
||||
{error && <p className="text-red-500 text-sm mt-5">{error}</p>}
|
||||
|
||||
{/* Timeline + Task list */}
|
||||
<div className="flex gap-7 items-start">
|
||||
<div className="w-1/5 bg-white rounded-xl p-5 shadow-md shrink-0">
|
||||
{/* <ProjectTimeline tasks=tasks /> */}
|
||||
<div className="flex flex-col gap-7 md:flex-row md:items-start">
|
||||
<div className="w-full md:w-1/5 bg-white rounded-xl p-5 border border-box-border shrink-0">
|
||||
<ProjectTimeline tasks={tasks} />
|
||||
</div>
|
||||
|
||||
<div className="w-4/5">
|
||||
<div className="w-full border-t border-box-border md:border-t-0 pt-4 md:pt-0 md:w-4/5">
|
||||
{tasks.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">Belum ada task.</p>
|
||||
) : (
|
||||
tasks.map((task) => (
|
||||
<TaskCard key={task.id} task={task} projectName={project.project_name} />
|
||||
))
|
||||
)}
|
||||
<p className="text-sm text-gray-400">Belum ada task.</p>
|
||||
) : (
|
||||
tasks.map((task) => (
|
||||
<TaskCard key={task.id} task={task} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useProjectInterns } from '../../../hooks/useProjectDetail';
|
||||
import { } from '../../../hooks/useProjects';
|
||||
import type { Project } from '../../../types/project.types';
|
||||
|
||||
export default function ParticipantsTab({ project }: { project: Project }) {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { interns, loading, error } = useProjectInterns(id ?? "");
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const { interns, loading, error } = useProjectInterns(slug ?? "");
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Mentor */}
|
||||
<div className="mb-8">
|
||||
<h3 className="font-bold text-font-shade mb-3.5">Mentor</h3>
|
||||
<div className="border-b border-[#eee] pb-4">
|
||||
<div className="border-b border-box-border pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{project.admin.profile_picture ? (
|
||||
<img
|
||||
@@ -22,7 +22,7 @@ export default function ParticipantsTab({ project }: { project: Project }) {
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gray-200" />
|
||||
)}
|
||||
<span className="text-sm text-font">{project.admin.full_name}</span>
|
||||
<span className="text-md text-font">{project.admin.full_name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,25 +45,25 @@ export default function ParticipantsTab({ project }: { project: Project }) {
|
||||
<div
|
||||
key={intern.id}
|
||||
className={`flex items-center justify-between py-3 ${
|
||||
idx < interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
|
||||
idx < interns.length - 1 ? 'border-b border-box-border' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{intern.avatar ? (
|
||||
<img
|
||||
src={intern.avatar}
|
||||
alt={intern.name}
|
||||
alt={intern.full_name}
|
||||
className="w-7 h-7 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-7 h-7 rounded-full bg-gray-200 flex-shrink-0" />
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm text-[#333]">{intern.name}</span>
|
||||
<span className="text-sm text-[#333]">{intern.full_name}</span>
|
||||
<span className="text-[11px] text-gray-400">{intern.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[13px] text-[#555] font-semibold">{intern.role}</span>
|
||||
<span className="text-[13px] text-[#555] font-semibold">{intern.kelompok_peminatan}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useProjectDetail } from '../../../hooks/useProjectDetail';
|
||||
// import { useProjectDetail } from '../../../hooks/useProjectDetail';
|
||||
import { useProjectDetail } from '../../../hooks/useProjects';
|
||||
import ForumTab from './ForumTab';
|
||||
import ParticipantsTab from './ParticipantTab';
|
||||
|
||||
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
|
||||
|
||||
export default function ProjectDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { project, loading, error } = useProjectDetail(id ?? "");
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const { project, loading, error } = useProjectDetail(slug ?? "");
|
||||
const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
|
||||
|
||||
// Fallback sederhana
|
||||
@@ -26,7 +25,7 @@ export default function ProjectDetailPage() {
|
||||
<div>
|
||||
<div>
|
||||
{/* Tabs */}
|
||||
<div className="flex mb-4">
|
||||
<div className="flex mb-4 border-b border-card-outline">
|
||||
<button className={tabClass('forum')} onClick={() => setActiveTab('forum')}>
|
||||
Forum
|
||||
</button>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import ProjectCard from './components/ProjectsCard'
|
||||
import { useProjects } from '../../../hooks/useProjects';
|
||||
import { useMyProjects } from '../../../hooks/useProjects';
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const { projects, loading, error } = useProjects();
|
||||
const { projects, loading, error } = useMyProjects();
|
||||
|
||||
if (loading) return (
|
||||
<div className="flex flex-col gap-3">
|
||||
@@ -22,7 +22,7 @@ export default function ProjectsPage() {
|
||||
</div>
|
||||
|
||||
{/* Grid card */}
|
||||
<div className="grid grid-cols-1 gap-6 md:gap-3 md:grid-cols-4 lg:grid-cols-5">
|
||||
<div className="grid grid-cols-1 gap-4 md:gap-3 md:grid-cols-3 lg:grid-cols-5">
|
||||
{projects.map(project => (
|
||||
<ProjectCard key={project.id} {...project} />
|
||||
))}
|
||||
|
||||
@@ -2,71 +2,68 @@ import { useParams, useSearchParams } from "react-router-dom";
|
||||
import { FileText, Info } from "lucide-react";
|
||||
import TaskFormFile from "./components/TaskForm-file";
|
||||
import TaskFormLink from "./components/TaskForm-link";
|
||||
import { mockProjects } from "../../../lib/mockProjects";
|
||||
|
||||
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
|
||||
import { useTaskDetail } from "../../../hooks/useTasks";
|
||||
|
||||
export default function TaskSubmission() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const { slug, TaskSlug } = useParams<{ slug: string; TaskSlug: string }>();
|
||||
const { slug, taskSlug } = useParams<{ slug: string; taskSlug: string }>();
|
||||
const submissionType = (searchParams.get("type") ?? "file") as "file_upload" | "url_link";
|
||||
const { task, loading, error } = useTaskDetail(taskSlug!, slug);
|
||||
|
||||
const submissionType = (searchParams.get("type") ?? "file") as "file" | "link";
|
||||
const formatDeadline = (dateStr: string) =>
|
||||
new Date(dateStr).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" });
|
||||
const formatTime = (dateStr: string) =>
|
||||
new Date(dateStr).toLocaleTimeString("id-ID", { hour: "2-digit", minute: "2-digit" });
|
||||
|
||||
const project = mockProjects.find((p) => toSlug(p.name) === slug);
|
||||
const task = project?.tasks.find((t) => toSlug(t.title) === TaskSlug);
|
||||
const handleFileSubmit = (files: File[]) => {
|
||||
const fileNames = files.map(f => f.name).join(', ');
|
||||
console.log(`Submitting Files for Project ${slug}:`, fileNames);
|
||||
alert(`File ${fileNames} berhasil dikirim!`);
|
||||
};
|
||||
|
||||
const handleLinkSubmit = (link: string) => {
|
||||
console.log(`Submitting Link for Project ${slug}:`, link);
|
||||
alert(`Link berhasil dikirim!`);
|
||||
};
|
||||
if (loading) return (
|
||||
<div className="space-y-4">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div key={i} className="h-32 bg-box-secondary rounded-2xl animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
if (error) return <p className="text-red-500 text-sm">{error}</p>;
|
||||
if (!task) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header Card */}
|
||||
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 ">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">
|
||||
{task?.title}
|
||||
</h1>
|
||||
<span className="text-sm font-bold text-gray-600">
|
||||
Due {task?.deadline.label} at {task?.deadline.time}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-4 mt-7">
|
||||
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">{task.title}</h1>
|
||||
<span className="text-sm font-bold text-gray-600">
|
||||
Due {formatDeadline(task.deadline_at)} at {formatTime(task.deadline_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Task Description Card */}
|
||||
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 space-y-3">
|
||||
<h2 className="text-xl text-gray-800 tracking-tight">Task Description</h2>
|
||||
<p className="text-sm text-foreground font-light leading-relaxed">
|
||||
{task?.description}
|
||||
</p>
|
||||
<h2 className="text-xl text-gray-800 tracking-tight">Task Description</h2>
|
||||
<p className="text-sm text-foreground font-light leading-relaxed">{task.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Submit Area Card */}
|
||||
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 space-y-5">
|
||||
<div className="flex items-center gap-2 pb-2">
|
||||
<FileText className="w-4 h-4 text-[#B30000] stroke-[2.5]" />
|
||||
<h2 className="text-base font-bold text-secondary tracking-tight">Save Changes</h2>
|
||||
<div className="flex items-center gap-2 pb-2">
|
||||
<FileText className="w-4 h-4 text-primary stroke-[2.5]" />
|
||||
<h2 className="text-font-shade font-bold text-secondary tracking-tight">Submit Task</h2>
|
||||
</div>
|
||||
|
||||
{/* Render form sesuai tipe dari query param */}
|
||||
{submissionType === "file" ? (
|
||||
<TaskFormFile onSubmitSuccess={handleFileSubmit} deadline={task?.deadline.date}/>
|
||||
{submissionType === "file_upload" ? (
|
||||
<TaskFormFile
|
||||
taskId={taskSlug!}
|
||||
deadline={new Date(task.deadline_at)}
|
||||
initialSubmission={task.my_submission}
|
||||
/>
|
||||
) : (
|
||||
<TaskFormLink onSubmitSuccess={handleLinkSubmit} deadline={task?.deadline.date}/>
|
||||
<TaskFormLink
|
||||
taskId={taskSlug!}
|
||||
deadline={new Date(task.deadline_at)}
|
||||
initialSubmission={task.my_submission}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="w-full border border-box-border rounded-lg p-3 flex items-start gap-2.5">
|
||||
<Info className="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-[11px] text-gray-400 font-medium leading-relaxed">
|
||||
<Info className="w-4 h-4 text-font mt-0.5 flex-shrink-0" />
|
||||
<p className="text-[11px] text-font font-medium leading-relaxed">
|
||||
Once submitted, your work will be locked for mentor review. You can request a re-submission if needed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -34,19 +34,11 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
|
||||
{[
|
||||
{ label: "Nama Program", value: certificate.programName },
|
||||
{ label: "Durasi", value: certificate.duration },
|
||||
{
|
||||
label: "Nilai Akhir",
|
||||
value: (
|
||||
<span className="text-red-600 font-bold">
|
||||
{certificate.finalScore}/100 ({certificate.grade})
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Status",
|
||||
value: (
|
||||
<span className="bg-green-100 text-green-700 text-xs font-bold px-2 py-0.5 rounded-full">
|
||||
{certificate.status}
|
||||
VERIFIED
|
||||
</span>
|
||||
),
|
||||
},
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
import { DEADLINES } from '../../../../lib/mockDeadline'
|
||||
|
||||
import { useMyTasks } from '../../../../hooks/useProjects';
|
||||
|
||||
const DAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
|
||||
const MONTH_NAMES = [
|
||||
@@ -18,7 +17,13 @@ function getFirstDayOfMonth(year: number, month: number) {
|
||||
}
|
||||
|
||||
const HomeCalendar = () => {
|
||||
const [today, setToday] = useState(new Date())
|
||||
const [today, setToday] = useState(new Date());
|
||||
const { tasks } = useMyTasks();
|
||||
|
||||
const DEADLINES = tasks.map(task => ({
|
||||
date: new Date(task.deadline_at),
|
||||
label: task.title,
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import type { ProjectTask } from "../../../../types/project.types";
|
||||
import type { ProjectTask } from "../../../../types/task.types";
|
||||
|
||||
const formatDate = (dateStr: string) =>
|
||||
new Date(dateStr).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
@@ -7,32 +7,34 @@ const formatDate = (dateStr: string) =>
|
||||
const formatTime = (dateStr: string) =>
|
||||
new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
export default function TaskCard({ task, projectName }: { task: ProjectTask; projectName: string }) {
|
||||
export default function TaskCard({ task }: { task: ProjectTask }) {
|
||||
const navigate = useNavigate();
|
||||
const {id}= useParams<{ id: string }>();
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
return (
|
||||
<div className="border border-gray-200 rounded-[10px] px-6 py-4 mb-3 bg-white flex items-start justify-between gap-3">
|
||||
<div
|
||||
className="border border-card-outline rounded-xl px-6 py-4 mb-3 bg-white flex items-start justify-between gap-3"
|
||||
onClick={() => navigate(`/intern/projects/${slug}/${task.slug}?type=${task.submission_type}`)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className=" text-[11px] text-[#888] mb-1">
|
||||
<div className=" text-[11px] text-font mb-1">
|
||||
Deadline : {formatDate(task.deadline_at)} at {formatTime(task.deadline_at)}
|
||||
</div>
|
||||
<div className=" font-bold text-[15px] text-[#1a1a1a] mb-1">
|
||||
{task.title}
|
||||
</div>
|
||||
<div className=" text-[13px] text-[#666]">
|
||||
<div className=" text-[13px] text-font">
|
||||
{task.description}
|
||||
</div>
|
||||
<div className=" text-[13px] text-[#666]">
|
||||
<div className=" text-[13px] text-font">
|
||||
Tipe Submission : {task.submission_type === 'file_upload' ? "File" : "Link"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="shrink-0">
|
||||
<div className="block md:hidden h-[10px] bg-gray-600"/>
|
||||
|
||||
<div className="shrink-0 hidden md:block">
|
||||
<button
|
||||
className="bg-white text-[#1a1a1a] border-[1.5px] border-[#d0d0d0] font-semibold text-xs px-3.5 py-[5px] rounded-md cursor-pointer whitespace-nowrap transition-colors duration-150 hover:border-[#C0392B] hover:text-[#C0392B]"
|
||||
onClick={() => navigate(
|
||||
`/intern/projects/${id}/${task.id}?type=${task.submission_type}`
|
||||
)}
|
||||
className="bg-white text-font-shade border-[1.5px] border-card-outline font-semibold text-xs px-3.5 py-[5px] rounded-md cursor-pointer whitespace-nowrap transition-colors duration-150"
|
||||
>
|
||||
Add Submission
|
||||
</button>
|
||||
|
||||
@@ -1,50 +1,43 @@
|
||||
import type { Task } from "../../../../lib/mockProjects";
|
||||
import { ArrowDownNarrowWide } from "lucide-react";
|
||||
import type { ProjectTask } from "../../../../types/project.types";
|
||||
|
||||
const formatDate = (date: Date) =>
|
||||
new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
const formatDate = (dateStr: string) =>
|
||||
new Date(dateStr).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
|
||||
|
||||
export default function ProjectTimeline({ tasks }: { tasks: Task[] }) {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
export default function ProjectTimeline({ tasks }: { tasks: ProjectTask[] }) {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 mb-4 justify-between">
|
||||
<span className="font-semibold text-md text-[#1a1a1a]">
|
||||
Timeline
|
||||
</span>
|
||||
<ArrowDownNarrowWide className="w-5 h-5 text-gray-500"/>
|
||||
</div>
|
||||
return (
|
||||
<div className="">
|
||||
<div className="flex items-center gap-1.5 mb-4 justify-between">
|
||||
<span className="font-semibold text-md text-font-shade">Timeline</span>
|
||||
</div>
|
||||
<ul className="relative pl-4">
|
||||
{tasks.map((task) => {
|
||||
const d = new Date(task.deadline_at);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
const isToday = d.getTime() === today.getTime();
|
||||
const isPast = d < today;
|
||||
const active = isToday || isPast;
|
||||
|
||||
<ul className="relative pl-4">
|
||||
{tasks.map((task, idx) => {
|
||||
const d = new Date(task.deadline.date);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
const isToday = d.getTime() === today.getTime();
|
||||
const isPast = d < today;
|
||||
const active = isToday || isPast;
|
||||
|
||||
return (
|
||||
<li key={idx} className="relative mb-6 list-none">
|
||||
{/* Dot */}
|
||||
<div
|
||||
className={`absolute -left-5 top-0.5 w-3 h-3 rounded-full border-2 border-white ${active ? 'bg-[#C0392B]' : 'bg-[#ccc]'
|
||||
} ${isToday ? 'shadow-md' : ''}`}
|
||||
/>
|
||||
<div
|
||||
className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'
|
||||
}`}
|
||||
>
|
||||
{isToday ? 'Hari ini' : formatDate(task.deadline.date)}
|
||||
</div>
|
||||
<div className="text-xs text-[#555] mt-px leading-[1.3]">
|
||||
{task.title}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<li key={task.id} className="relative mb-6 list-none">
|
||||
{/* Dot */}
|
||||
<div
|
||||
className={`absolute -left-5 top-0.5 w-3 h-3 rounded-full border-2 border-white ${
|
||||
active ? 'bg-[#C0392B]' : 'bg-[#ccc]'
|
||||
} ${isToday ? 'shadow-md' : ''}`}
|
||||
/>
|
||||
<div className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'}`}>
|
||||
{isToday ? 'Hari ini' : formatDate(task.deadline_at)} {/* ← format ISO string */}
|
||||
</div>
|
||||
<div className="text-xs text-[#555] mt-px leading-[1.3]">
|
||||
{task.title}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,8 +3,6 @@ import * as LucideIcons from 'lucide-react';
|
||||
import type { LucideProps } from 'lucide-react';
|
||||
import type { Project } from '../../../../types/project.types';
|
||||
|
||||
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
|
||||
|
||||
const getDynamicIcon = (iconName: string) => {
|
||||
const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
|
||||
const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<LucideProps>>)[formatted];
|
||||
@@ -21,7 +19,7 @@ const ProjectCard = (project: Project) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => navigate(`/intern/projects/${project.id}`)}
|
||||
onClick={() => navigate(`/intern/projects/${project.slug}`)}
|
||||
className=" rounded-xl overflow-hidden shadow-sm border border-gray-100 w-full flex flex-col cursor-pointer hover:shadow-md transition-shadow duration-200"
|
||||
>
|
||||
{/* Thumbnail */}
|
||||
@@ -61,7 +59,7 @@ const ProjectCard = (project: Project) => {
|
||||
style={{ width: tasksTotal > 0 ? `${(tasksDone / tasksTotal) * 100}%` : '0%' }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-400 text-right">
|
||||
<span className="text-font text-[12px] font-bold text-right">
|
||||
{tasksDone}/{tasksTotal}
|
||||
</span>
|
||||
</div>
|
||||
@@ -70,10 +68,6 @@ const ProjectCard = (project: Project) => {
|
||||
{/* Button */}
|
||||
<div className="flex items-end justify-end px-3 pb-1">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // ← cegah trigger onClick card dua kali
|
||||
navigate(`/intern/projects/${toSlug(project.project_name)}`);
|
||||
}}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-xs font-medium py-1.5 px-3 rounded-xl transition-colors"
|
||||
>
|
||||
View Project
|
||||
|
||||
@@ -54,8 +54,6 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
|
||||
<p className="text-[11px] text-gray-400">LMS Portal</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tombol Close silang (X): Hanya muncul di HP saat sidebar terbuka */}
|
||||
<button
|
||||
onClick={closeSidebar}
|
||||
className="p-1 text-gray-500 hover:bg-gray-100 rounded-lg lg:hidden"
|
||||
@@ -74,8 +72,8 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
|
||||
onClick={() => handleNav(path)}
|
||||
className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
|
||||
${isActive
|
||||
? "bg-base-foreground text-base font-semibold border-l-4 border-base"
|
||||
: "text-font hover:bg-base-foreground hover:text-base"
|
||||
? "bg-red-foreground text-red font-semibold border-l-4 border-base"
|
||||
: "text-font hover:bg-red-foreground"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
||||
@@ -102,8 +100,8 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
|
||||
${isActive
|
||||
? "bg-red-50 text-red-600 font-semibold"
|
||||
: danger
|
||||
? "text-font hover:bg-base-foreground hover:text-base"
|
||||
: "text-font hover:bg-base-foreground hover:text-base"
|
||||
? "text-font hover:bg-base-foreground"
|
||||
: "text-font hover:bg-red-foreground"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
||||
|
||||
@@ -3,7 +3,7 @@ import { FileText, FileUp, Link } from "lucide-react";
|
||||
|
||||
interface SubmitStatusTableProps {
|
||||
type: "file" | "link";
|
||||
files?: File[];
|
||||
filePath?: string | null; // ganti dari files: File[]
|
||||
link?: string;
|
||||
submittedAt?: Date;
|
||||
deadline?: Date;
|
||||
@@ -25,7 +25,7 @@ function getTimeEarly(submittedAt: Date, deadline: Date): string {
|
||||
|
||||
export default function SubmitStatusTable({
|
||||
type,
|
||||
files = [],
|
||||
filePath,
|
||||
link = "",
|
||||
submittedAt = new Date(),
|
||||
deadline,
|
||||
@@ -49,16 +49,16 @@ export default function SubmitStatusTable({
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center px-4 py-3 border-b border-box-border">
|
||||
<div className="flex items-center gap-2">
|
||||
{confirmDelete ? (
|
||||
<span className="text-xs font-medium text-gray-600">
|
||||
{confirmDelete ? (
|
||||
<span className="text-xs font-medium text-gray-600">
|
||||
Are you sure you want to remove your submission?
|
||||
</span>
|
||||
) : (
|
||||
) : (
|
||||
<>
|
||||
<FileUp className="w-5 h-5 text-red-700 stroke-[2]" />
|
||||
<span className="font-bold text-sm text-gray-800">Submit Status</span>
|
||||
<FileUp className="w-5 h-5 text-red-700 stroke-[2]" />
|
||||
<span className="font-bold text-sm text-gray-800">Submit Status</span>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{confirmDelete ? (
|
||||
@@ -120,19 +120,13 @@ export default function SubmitStatusTable({
|
||||
</div>
|
||||
<div className="px-4 py-3 flex flex-col gap-2">
|
||||
{type === "file" ? (
|
||||
files.map((f, i) => (
|
||||
<div key={i} className="flex items-center gap-2 text-sm text-gray-800">
|
||||
<FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
|
||||
{f.name}
|
||||
</div>
|
||||
))
|
||||
<div className="flex items-center gap-2 text-sm text-gray-800">
|
||||
<FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
|
||||
{filePath ? filePath.split("/").pop() : "File submitted"}
|
||||
</div>
|
||||
) : (
|
||||
<a
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 text-sm text-blue-600 hover:underline break-all"
|
||||
>
|
||||
<a href={link} target="_blank" rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 text-sm text-blue-600 hover:underline break-all">
|
||||
<Link className="w-3.5 h-3.5 shrink-0" />
|
||||
{link}
|
||||
</a>
|
||||
|
||||
@@ -2,106 +2,81 @@ import { useState, useRef } from "react";
|
||||
import { FileText, UploadCloud, X } from "lucide-react";
|
||||
import { LuSendHorizontal } from "react-icons/lu";
|
||||
import SubmitStatusTable from "./SubmissionStatusTable";
|
||||
import { useSubmission } from "../../../../hooks/useTasks";
|
||||
import type { TaskSubmissionData } from "../../../../types/task.types";
|
||||
|
||||
interface TaskFormFileProps {
|
||||
onSubmitSuccess: (files: File[]) => void;
|
||||
taskId: string;
|
||||
deadline?: Date;
|
||||
initialSubmission?: TaskSubmissionData | null;
|
||||
}
|
||||
|
||||
export default function TaskFormFile({ onSubmitSuccess, deadline }: TaskFormFileProps) {
|
||||
export default function TaskFormFile({ taskId, deadline, initialSubmission }: TaskFormFileProps) {
|
||||
const { submission, loading, submitFile, updateFile, remove } = useSubmission(taskId, initialSubmission);
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [isDragActive, setIsDragActive] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
validateAndAddFiles(Array.from(e.target.files));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrag = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.type === "dragenter" || e.type === "dragover") {
|
||||
setIsDragActive(true);
|
||||
} else if (e.type === "dragleave") {
|
||||
setIsDragActive(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragActive(false);
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
validateAndAddFiles(Array.from(e.dataTransfer.files));
|
||||
}
|
||||
};
|
||||
|
||||
const validateAndAddFiles = (selectedFiles: File[]) => {
|
||||
const allowedExtensions = ["pdf", "docx", "zip"];
|
||||
const validFiles: File[] = [];
|
||||
|
||||
selectedFiles.forEach((file) => {
|
||||
const fileExtension = file.name.split(".").pop()?.toLowerCase();
|
||||
if (fileExtension && allowedExtensions.includes(fileExtension)) {
|
||||
if (file.size <= 10 * 1024 * 1024) {
|
||||
validFiles.push(file);
|
||||
} else {
|
||||
alert(`Ukuran file ${file.name} melebihi batas maksimal 10MB.`);
|
||||
}
|
||||
const ext = file.name.split(".").pop()?.toLowerCase();
|
||||
if (ext && allowedExtensions.includes(ext)) {
|
||||
if (file.size <= 10 * 1024 * 1024) validFiles.push(file);
|
||||
else alert(`Ukuran file ${file.name} melebihi 10MB.`);
|
||||
} else {
|
||||
alert(`Format file ${file.name} tidak didukung. Harap gunakan PDF, DOCX, atau ZIP.`);
|
||||
alert(`Format ${file.name} tidak didukung. Gunakan PDF, DOCX, atau ZIP.`);
|
||||
}
|
||||
});
|
||||
|
||||
if (validFiles.length > 0) {
|
||||
setFiles((prev) => [...prev, ...validFiles]);
|
||||
}
|
||||
if (validFiles.length > 0) setFiles((prev) => [...prev, ...validFiles]);
|
||||
};
|
||||
|
||||
const removeFile = (indexToRemove: number, e: React.MouseEvent) => {
|
||||
const handleDrag = (e: React.DragEvent) => {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
setIsDragActive(e.type === "dragenter" || e.type === "dragover");
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
setIsDragActive(false);
|
||||
if (e.dataTransfer.files.length > 0) validateAndAddFiles(Array.from(e.dataTransfer.files));
|
||||
};
|
||||
|
||||
const removeFile = (index: number, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setFiles((prev) => prev.filter((_, index) => index !== indexToRemove));
|
||||
setFiles((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (files.length === 0) {
|
||||
alert("Silakan pilih atau jatuhkan berkas tugas Anda terlebih dahulu.");
|
||||
return;
|
||||
}
|
||||
// Set to local submitted mode
|
||||
setIsSubmitted(true);
|
||||
// Call parent handler
|
||||
onSubmitSuccess(files);
|
||||
if (files.length === 0) { alert("Pilih file terlebih dahulu."); return; }
|
||||
const res = isEditing
|
||||
? await updateFile(submission!.id, files[0])
|
||||
: await submitFile(files[0]);
|
||||
if (res) { setIsEditing(false); setFiles([]); }
|
||||
};
|
||||
|
||||
const handleEditSubmission = () => {
|
||||
setIsSubmitted(false);
|
||||
const handleDelete = async () => {
|
||||
if (!confirm("Yakin ingin menghapus submission ini?")) return;
|
||||
const ok = await remove(submission!.id);
|
||||
if (ok) { setFiles([]); setIsEditing(false); }
|
||||
};
|
||||
|
||||
const handleDeleteSubmission = () => {
|
||||
if (confirm("Are you sure you want to delete this submission?")) {
|
||||
setFiles([]);
|
||||
setIsSubmitted(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ganti if (isSubmitted) { return (...) }
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<SubmitStatusTable
|
||||
type="file"
|
||||
files={files}
|
||||
submittedAt={new Date()}
|
||||
deadline={deadline} // opsional, kirim dari parent kalau ada
|
||||
onEdit={handleEditSubmission}
|
||||
onDelete={handleDeleteSubmission}
|
||||
/>
|
||||
);
|
||||
}
|
||||
// Sudah ada submission dan tidak sedang edit → tampilkan status
|
||||
if (submission && !isEditing) {
|
||||
return (
|
||||
<SubmitStatusTable
|
||||
type="file"
|
||||
filePath={submission.file_path}
|
||||
submittedAt={new Date(submission.submitted_at)}
|
||||
deadline={deadline}
|
||||
onEdit={() => setIsEditing(true)}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
@@ -109,16 +84,13 @@ if (isSubmitted) {
|
||||
type="file"
|
||||
multiple
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
onChange={(e) => e.target.files && validateAndAddFiles(Array.from(e.target.files))}
|
||||
accept=".pdf,.docx,.zip"
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<div
|
||||
onDragEnter={handleDrag}
|
||||
onDragOver={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
onDrop={handleDrop}
|
||||
onDragEnter={handleDrag} onDragOver={handleDrag}
|
||||
onDragLeave={handleDrag} onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`w-full min-h-[120px] border border-dashed rounded-xl p-4 bg-box-secondary cursor-pointer transition-all ${isDragActive ? "border-[#B30000] bg-red-50/40" : "border-foreground hover:border-gray-500"
|
||||
}`}
|
||||
@@ -126,20 +98,12 @@ if (isSubmitted) {
|
||||
{files.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{files.map((file, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between text-sm font-medium text-gray-800"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div key={index} className="flex items-center justify-between text-sm font-medium text-gray-800" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
|
||||
{file.name}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => removeFile(index, e)}
|
||||
className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
|
||||
>
|
||||
<button type="button" onClick={(e) => removeFile(index, e)} className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -148,19 +112,16 @@ if (isSubmitted) {
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full space-y-2 pointer-events-none text-center py-6">
|
||||
<UploadCloud className="w-8 h-8 text-gray-400 mx-auto stroke-[1.5]" />
|
||||
<p className="text-sm font-bold text-gray-700">
|
||||
Click to upload <span className="font-medium text-gray-500">or drag & drop</span>
|
||||
</p>
|
||||
<p className="text-sm font-bold text-gray-700">Click to upload <span className="font-medium text-gray-500">or drag & drop</span></p>
|
||||
<p className="text-[11px] text-gray-400 font-semibold">PDF, DOCX, or ZIP (Max. 10MB)</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-bold text-base py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
|
||||
type="submit" disabled={loading}
|
||||
className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
|
||||
>
|
||||
Save Changes
|
||||
{loading ? "Mengirim..." : isEditing ? "Update Submission" : "Save Changes"}
|
||||
<LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -1,80 +1,76 @@
|
||||
import { useState } from "react";
|
||||
import { Link, FileText } from "lucide-react";
|
||||
import { Link } from "lucide-react";
|
||||
import { LuSendHorizontal } from "react-icons/lu";
|
||||
import SubmitStatusTable from "./SubmissionStatusTable";
|
||||
import { useSubmission } from "../../../../hooks/useTasks";
|
||||
import type { TaskSubmissionData } from "../../../../types/task.types";
|
||||
|
||||
interface TaskFormLinkProps {
|
||||
onSubmitSuccess: (link: string) => void;
|
||||
taskId: string;
|
||||
deadline?: Date;
|
||||
initialSubmission?: TaskSubmissionData | null;
|
||||
}
|
||||
|
||||
export default function TaskFormLink({ onSubmitSuccess, deadline }: TaskFormLinkProps) {
|
||||
const [submissionLink, setSubmissionLink] = useState("");
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
export default function TaskFormLink({ taskId, deadline, initialSubmission }: TaskFormLinkProps) {
|
||||
const { submission, loading, submitLink, updateLink, remove } = useSubmission(taskId, initialSubmission);
|
||||
const [inputLink, setInputLink] = useState(initialSubmission?.url_link ?? "");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!submissionLink.trim()) {
|
||||
// alert("Silakan masukkan link tugas Anda terlebih dahulu.");
|
||||
return;
|
||||
}
|
||||
setIsSubmitted(true); // ini hilang
|
||||
onSubmitSuccess(submissionLink);
|
||||
if (!inputLink.trim()) return;
|
||||
const res = isEditing
|
||||
? await updateLink(submission!.id, inputLink)
|
||||
: await submitLink(inputLink);
|
||||
if (res) { setIsEditing(false); }
|
||||
};
|
||||
|
||||
const handleEditSubmission = () => {
|
||||
setIsSubmitted(false);
|
||||
};
|
||||
const handleDelete = async () => {
|
||||
if (!confirm("Yakin ingin menghapus submission ini?")) return;
|
||||
const ok = await remove(submission!.id);
|
||||
if (ok) setInputLink("");
|
||||
};
|
||||
|
||||
const handleDeleteSubmission = () => {
|
||||
if (confirm("Are you sure you want to delete this submission?")) {
|
||||
setSubmissionLink("");
|
||||
setIsSubmitted(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<SubmitStatusTable
|
||||
type="link"
|
||||
link={submissionLink}
|
||||
submittedAt={new Date()}
|
||||
deadline={deadline}
|
||||
onEdit={handleEditSubmission}
|
||||
onDelete={handleDeleteSubmission}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (submission && !isEditing) {
|
||||
return (
|
||||
<SubmitStatusTable
|
||||
type="link"
|
||||
link={submission.url_link ?? ""}
|
||||
submittedAt={new Date(submission.submitted_at)}
|
||||
deadline={deadline}
|
||||
onEdit={() => setIsEditing(true)}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[11px] font-bold text-gray-700 tracking-wide block">
|
||||
Submission Link (PDF)
|
||||
<label className="text-[11px] font-bold text-font-shade tracking-wide block">
|
||||
{isEditing ? "Update Submission Link" : "Submission Link"}
|
||||
</label>
|
||||
<div className="relative flex items-center">
|
||||
<span className="absolute left-3.5 text-gray-400">
|
||||
<span className="absolute left-3.5 text-font/70">
|
||||
<Link className="w-4 h-4 stroke-[2]" />
|
||||
</span>
|
||||
<input
|
||||
type="url"
|
||||
required
|
||||
type="url" required
|
||||
placeholder="https://example.com/your-pdf-link"
|
||||
value={submissionLink}
|
||||
onChange={(e) => setSubmissionLink(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-gray-50/50 border border-gray-200 rounded-lg text-sm placeholder-gray-400 text-gray-700 focus:outline-none focus:bg-white focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
|
||||
value={inputLink}
|
||||
onChange={(e) => setInputLink(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-box-primary/50 border border-box-border rounded-lg text-sm placeholder-font text-font focus:outline-none focus:bg-white focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[11px] text-gray-400 font-medium pt-0.5">
|
||||
<p className="text-[11px] text-font font-medium pt-0.5">
|
||||
Ensure the link is accessible to the mentor (e.g., Google Drive, Dropbox).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-bold text-base py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
|
||||
type="submit" disabled={loading}
|
||||
className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
|
||||
>
|
||||
Submit Task
|
||||
{loading ? "Mengirim..." : isEditing ? "Update Submission" : "Submit Task"}
|
||||
<LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useInternTasks } from "../../../../hooks/useProjects";
|
||||
import type { InternTask } from "../../../../types/project.types";
|
||||
import { useMyTasks } from "../../../../hooks/useProjects";
|
||||
import type { InternTaskItem } from "../../../../types/project.types";
|
||||
|
||||
const TaskTimeline = () => {
|
||||
const { tasks, loading, error } = useInternTasks();
|
||||
const { tasks, loading, error } = useMyTasks();
|
||||
const today = new Date();
|
||||
|
||||
const isOverdue = (dateStr: string) => new Date(dateStr) < today;
|
||||
@@ -23,7 +23,7 @@ const TaskTimeline = () => {
|
||||
<div className="relative">
|
||||
<div className="absolute left-1 top-2 bottom-2 w-px bg-gray-300" />
|
||||
<ul className="flex flex-col gap-5">
|
||||
{tasks.map((item: InternTask) => {
|
||||
{tasks.map((item: InternTaskItem) => {
|
||||
const overdue = isOverdue(item.deadline_at);
|
||||
const deadlineDate = new Date(item.deadline_at);
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user