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/HomeCalendar.tsx
+7 -7
View File
@@ -89,13 +89,13 @@ const HomeCalendar = () => {
}
return (
<div className=" px-13 py-5 border border-gray-200 rounded-2xl">
<div className=" px-13 py-5 border border-card-outline rounded-2xl">
{/* Header */}
<div className="flex items-center justify-between mb-4">
<h2 className="text-base font-semibold text-gray-800">
<h2 className="font-bold text-font">
{MONTH_NAMES[currentMonth]} {currentYear}
</h2>
<div className="flex items-center gap-1">
<div className="flex items-center">
<button
onClick={prevMonth}
className="p-1 rounded hover:bg-gray-100 transition-colors"
@@ -160,11 +160,11 @@ const HomeCalendar = () => {
</div>
{/* Divider */}
<hr className="my-3 border-gray-100" />
<hr className="my-3 border-gray-400" />
{/* Upcoming Deadlines */}
<div>
<p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-2">
<p className="text-[10px] font-semibold text-font uppercase tracking-widest mb-2">
Upcoming Deadlines
</p>
{upcomingDeadlines.length > 0 ? (
@@ -172,12 +172,12 @@ const HomeCalendar = () => {
{upcomingDeadlines.map((d, i) => (
<li key={i} className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-red-600 flex-shrink-0" />
<span className="text-xs text-gray-600">{d.label}</span>
<span className="text-xs text-font-shade">{d.label}</span>
</li>
))}
</ul>
) : (
<p className="text-[11px] text-gray-400">No upcoming deadlines this month.</p>
<p className="text-[11px] text-font-shade">No upcoming deadlines this month.</p>
)}
</div>
</div>
src/Pages/internify/intern/components/HomeHeader.tsx
+19 -5
View File
@@ -1,12 +1,26 @@
import { useState, useEffect } from "react";
import api from "../../../../lib/api";
const HomeHeader = () => {
const name = "Karina";
const [name, setName] = useState("");
useEffect(() => {
api.get("/auth-api/me")
.then((res) => {
setName(res.data.data.full_name || res.data.data.nama_depan);
})
.catch((err) => {
console.error("Failed to fetch user:", err);
});
}, []);
return (
<div>
<div className="flex items-start px-0 mb-5">
<h1 className="page-title">Hi, {name}!</h1>
<h1 className="page-title">Hi, {name || "..."}!</h1>
</div>
</div>
)
}
);
};
export default HomeHeader
export default HomeHeader;
src/Pages/internify/intern/components/HomeProjectList.tsx
+30 -19
View File
@@ -1,31 +1,42 @@
import { useNavigate } from 'react-router-dom'
import { mockProjects } from '../../../../lib/mockProjects'
import { useNavigate } from 'react-router-dom';
import { useProjects } from '../../../../hooks/useProjects';
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
const HomeProjectList = () => {
const navigate = useNavigate();
const { projects, loading, error } = useProjects();
if (loading) return (
<div className="flex flex-col gap-3">
{[...Array(3)].map((_, i) => (
<div key={i} className="h-16 bg-gray-100 rounded-lg animate-pulse" />
))}
</div>
);
if (error) return <p className="text-red-500 text-sm">{error}</p>;
return (
<div>
<h2 className="text-lg font-semibold text-gray-800 mb-4">Projects</h2>
<h2 className="text-lg font-semibold text-font-shade mb-8">Projects</h2>
<div className="flex flex-col gap-3">
{mockProjects.map((project, index) => {
return (
<div
key={index}
onClick={() => navigate(`/intern/projects/${toSlug(project.name)}`)}
className="flex items-center gap-4 border border-gray-200 rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
>
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-gray-300`}/>
<div>
<p className="text-sm font-semibold text-gray-800">{project.name}</p>
</div>
{projects.map((project) => (
<div
key={project.id}
onClick={() => navigate(`/intern/projects/${toSlug(project.project_name)}`)}
className="flex items-center gap-4 border border-card-outline rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
>
<div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-red-600" />
<div>
<p className="text-sm font-semibold text-font-shade">{project.project_name}</p>
<p className="text-xs text-gray-400">{project.status}</p>
</div>
)
})}
</div>
))}
</div>
</div>
)
}
);
};
export default HomeProjectList
export default HomeProjectList;
src/Pages/internify/intern/components/ProjectTaskCard.tsx
+18 -18
View File
@@ -1,19 +1,20 @@
import type { Task } from "../../../../lib/mockProjects";
import { useNavigate } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
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', year: 'numeric' });
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
const formatTime = (dateStr: string) =>
new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
export default function TaskCard({ task, projectName }: { task: Task; projectName: string }) {
export default function TaskCard({ task, projectName }: { task: ProjectTask; projectName: string }) {
const navigate = useNavigate();
const toTaskSlug = (title: string) => title.toLowerCase().replace(/\s+/g, '-');
const {id}= useParams<{ id: 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="flex-1 min-w-0">
<div className=" text-[11px] text-[#888] mb-1">
Deadline : {formatDate(task.deadline.date)} at {task.deadline.time}
Deadline : {formatDate(task.deadline_at)} at {formatTime(task.deadline_at)}
</div>
<div className=" font-bold text-[15px] text-[#1a1a1a] mb-1">
{task.title}
@@ -22,20 +23,19 @@ export default function TaskCard({ task, projectName }: { task: Task; projectNam
{task.description}
</div>
<div className=" text-[13px] text-[#666]">
Tipe Submission : {task.type === 'file' ? "File" : "Link"}
Tipe Submission : {task.submission_type === 'file_upload' ? "File" : "Link"}
</div>
</div>
<div className="shrink-0">
{task.isSubmitted ? (
<span className=" inline-block bg-[#27AE60] text-white font-bold text-xs px-3.5 py-[5px] rounded-md tracking-[0.5px]">
DONE
</span>
) : (
<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/${toSlug(projectName)}/${toTaskSlug(task.title)}?type=${task.type}`)}>
Add Submission
</button>
)}
<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}`
)}
>
Add Submission
</button>
</div>
</div>
);
src/Pages/internify/intern/components/ProjectsCard.tsx
+43 -36
View File
@@ -1,53 +1,56 @@
import { useNavigate } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';
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, '-');
interface ProjectCardProps {
id: number | string
name: string
mentor: string
avatarUrl?: string
thumbnailUrl?: string
progress: number
tasksDone: number
tasksTotal: number
}
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];
return Icon ?? LucideIcons.FolderOpen;
};
const ProjectCard = ({
name,
mentor,
avatarUrl,
thumbnailUrl,
progress,
tasksDone,
tasksTotal,
}: ProjectCardProps) => {
const navigate = useNavigate()
const ProjectCard = (project: Project) => {
const navigate = useNavigate();
const Icon = getDynamicIcon(project.project_icon);
const tasksDone = -1;
const tasksTotal = project.total_tasks;
return (
<div className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 w-full flex flex-col">
<div
onClick={() => navigate(`/intern/projects/${project.id}`)}
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 */}
<div className="h-[150px] bg-gradient-to-tr from-red-700 to-red-800 overflow-hidden">
{thumbnailUrl && (
<img src={thumbnailUrl} alt={name} className="w-full h-full object-cover" />
)}
<div className="h-[150px] bg-gradient-to-tr from-red-700 to-red-800 overflow-hidden flex items-center justify-center">
<Icon className="w-12 h-12 text-white opacity-80" />
</div>
{/* Content */}
<div className="min-h-[180px] max-h-[210px] flex-1 flex flex-col justify-between py-3">
<div className="min-h-[180px] max-h-[200px] flex-1 flex flex-col justify-between py-3">
<div className="px-3 flex flex-col gap-2">
<p className="text-xs lg:text-sm font-semibold text-gray-800 leading-tight">{name}</p>
{/* Project Name */}
<p className="text-xs lg:text-sm font-semibold text-gray-800 leading-tight">
{project.project_name}
</p>
{/* Mentor */}
<div className="flex items-center gap-2">
<div className="w-6 h-6 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
{avatarUrl ? (
<img src={avatarUrl} alt={mentor} className="w-full h-full object-cover" />
{project.admin.profile_picture ? (
<img
src={project.admin.profile_picture}
alt={project.admin.full_name}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full bg-gray-300" />
)}
</div>
<span className="text-xs text-gray-500 truncate">{mentor}</span>
<span className="text-xs text-gray-500 truncate">{project.admin.email}</span>
</div>
{/* Progress bar */}
@@ -55,7 +58,7 @@ const ProjectCard = ({
<div className="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
<div
className="h-full bg-red-600 rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}
style={{ width: tasksTotal > 0 ? `${(tasksDone / tasksTotal) * 100}%` : '0%' }}
/>
</div>
<span className="text-[10px] text-gray-400 text-right">
@@ -63,10 +66,14 @@ const ProjectCard = ({
</span>
</div>
</div>
{/* Button */}
<div className="flex items-end justify-end px-3 pb-1">
<button
onClick={() => navigate(`/intern/projects/${toSlug(name)}`)}
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
@@ -74,7 +81,7 @@ const ProjectCard = ({
</div>
</div>
</div>
)
}
);
};
export default ProjectCard
export default ProjectCard;
src/Pages/internify/intern/components/SidebarIntern.tsx
+25 -19
View File
@@ -1,16 +1,18 @@
import { useNavigate, useLocation } from 'react-router-dom';
import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight, X } from 'lucide-react';
import { Award, Settings, HelpCircle, X } from 'lucide-react';
import { GrHomeRounded } from "react-icons/gr";
import { MdOutlineAssignment, MdLogout } from "react-icons/md";
const navItems = [
{ label: "Home", icon: Home, path: "/intern" },
{ label: "List Projects", icon: FolderKanban, path: "/intern/projects" },
{ label: "Home", icon: GrHomeRounded, path: "/intern" },
{ label: "List Projects", icon: MdOutlineAssignment, path: "/intern/projects" },
{ label: "Certificates", icon: Award, path: "/intern/certificates" },
];
const prefItems = [
{ label: "Settings", icon: Settings, path: "/intern/settings" },
{ label: "FAQ", icon: HelpCircle, path: "/intern/faq" },
{ label: "Logout", icon: LogOut, path: "/login-internify", danger: true },
{ label: "Logout", icon: MdLogout, path: "/login-internify", danger: true, isLogout: true },
];
interface SidebarProps {
@@ -24,11 +26,18 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
const handleNav = (path: string) => {
navigate(path);
closeSidebar(); // Otomatis tutup sidebar setelah klik menu di HP
closeSidebar();
};
const handleLogout = () => {
document.cookie = "token=; path=/; max-age=86400; SameSite=Strict";
closeSidebar();
navigate("/login-internify", { replace: true });
};
return (
<aside
<aside
className={`
bg-white border-r border-gray-300 flex flex-col py-5 px-3 gap-1 overflow-y-auto flex-shrink-0 transition-transform duration-300 ease-in-out
lg:sticky lg:top-[50px] lg:h-[calc(100vh-73px)] lg:w-[250px] lg:translate-x-0 lg:z-8
@@ -37,7 +46,7 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
`}
>
{/* Brand & Tombol Close untuk Mobile */}
<div className="flex items-center justify-between px-2 pb-4">
<div className="flex items-center justify-between px-2 pb-10">
<div className="flex items-center gap-2.5">
<div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0"></div>
<div>
@@ -47,33 +56,30 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
</div>
{/* Tombol Close silang (X): Hanya muncul di HP saat sidebar terbuka */}
<button
onClick={closeSidebar}
<button
onClick={closeSidebar}
className="p-1 text-gray-500 hover:bg-gray-100 rounded-lg lg:hidden"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="h-px bg-gray-300 my-1" />
{/* Main nav */}
<nav className="flex flex-col gap-0.5">
{navItems.map(({ label, icon: Icon, path }) => {
const isActive = location.pathname === path;
const isActive = location.pathname === path;
return (
<button
key={path}
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-red-50 text-red-600 font-semibold border-l-4 border-red-600"
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
? "bg-base-foreground text-base font-semibold border-l-4 border-base"
: "text-font hover:bg-base-foreground hover:text-base"
}`}
>
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
<span>{label}</span>
{isActive && <ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />}
</button>
);
})}
@@ -86,18 +92,18 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
PREFERENCES
</p>
<nav className="flex flex-col gap-0.5">
{prefItems.map(({ label, icon: Icon, path, danger }) => {
{prefItems.map(({ label, icon: Icon, path, danger, isLogout }) => {
const isActive = location.pathname === path;
return (
<button
key={path}
onClick={() => handleNav(path)}
onClick={() => isLogout ? handleLogout() : 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-red-50 text-red-600 font-semibold"
: danger
? "text-gray-400 hover:bg-red-50 hover:text-red-600"
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
? "text-font hover:bg-base-foreground hover:text-base"
: "text-font hover:bg-base-foreground hover:text-base"
}`}
>
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
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>
);