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.
74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { CalendarDays } from "lucide-react";
|
||
import type { Project } from "../../../../types/project.types";
|
||
|
||
function StatusBadge({ status }: { status: string }) {
|
||
const isCompleted = status === "active"; return (
|
||
<span
|
||
className={`text-[10px] font-extrabold tracking-wider px-2.5 py-1 rounded-full border ${
|
||
isCompleted
|
||
? "bg-green-50 text-green-600 border-green-200"
|
||
: "bg-red-50 text-red-600 border-red-200"
|
||
}`}
|
||
>
|
||
{status}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function formatDateRange(start: string, end: string): string {
|
||
const options: Intl.DateTimeFormatOptions = {
|
||
day: "numeric",
|
||
month: "long",
|
||
year: "numeric",
|
||
};
|
||
|
||
const startDate = new Date(start).toLocaleDateString("id-ID", options);
|
||
const endDate = new Date(end).toLocaleDateString("id-ID", options);
|
||
|
||
return `${startDate} – ${endDate}`;
|
||
}
|
||
|
||
// ─── ProjectCard ──────────────────────────────────────────────────────────────
|
||
export default function CertificateProjectCard({
|
||
project,
|
||
onClick,
|
||
}: {
|
||
project: Project;
|
||
onClick: () => void;
|
||
}) {
|
||
return (
|
||
<div
|
||
onClick={onClick}
|
||
className="bg-white border border-card-outline rounded-2xl p-5 cursor-pointer hover:shadow-md hover:border-gray-300 transition-all duration-200 flex flex-col gap-4"
|
||
>
|
||
{/* Top: status badge */}
|
||
<div className="flex items-start justify-between">
|
||
<StatusBadge status={project.status} />
|
||
</div>
|
||
|
||
{/* Title + period */}
|
||
<div>
|
||
<h3 className="text-sm font-bold text-font-shade leading-snug mb-1.5">
|
||
{project.project_name}
|
||
</h3>
|
||
<div className="flex items-center gap-1.5 text-[11px] text-font font-medium">
|
||
<CalendarDays className="w-3.5 h-3.5 flex-shrink-0" />
|
||
<span>{formatDateRange(project.start_date, project.end_date)}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<hr className="border-card-outline" />
|
||
|
||
{/* Intern count */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-[10px] text-font font-medium mb-0.5">Interns</p>
|
||
<p className="text-sm font-extrabold text-[#B30000]">
|
||
{project.total_members} interns
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|