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/Breadcumbs.tsx
+2 -2
View File
@@ -54,7 +54,7 @@ export default function Breadcrumbs(){
return true;
});
return (
<nav className="text-[12px] mb-3">
<nav className="text-[15px] mb-3">
{fixbreadcumbs.map(({ match, breadcrumb }) => {
const isLast = match.pathname === location.pathname;
@@ -63,13 +63,13 @@ export default function Breadcrumbs(){
{isLast ? (
<span className="font-bold text-red-800">
{breadcrumb}
</span>
) : (
<>
<Link to={match.pathname} className="text-gray-800">
{breadcrumb}
</Link>
{/* Karakter pemisah antar breadcrumb */}
<ChevronRight className="w-4 h-4 mx-1.5"/>
</>
)}
src/Pages/internify/FAQpage.tsx
+46 -35
View File
@@ -1,26 +1,34 @@
const mockFAQData = [
{
id: 1,
question: "How do I generate internship certificates?",
answer: "Once an intern has completed all required project milestones and their final evaluation is approved by a manager, go to the 'Manage Certificates' tab. Select the intern's name, click 'Generate Certificate', and the system will automatically populate the official Internify template with their specific details."
},
{
id: 2,
question: "What are the technical requirements for interns?",
answer: "Internify is a web-based LMS. Interns simply need a modern web browser (Chrome, Firefox, or Safari) and a stable internet connection. Some engineering modules may require local development environments, which are detailed in the specific project onboarding documentation."
},
{
id: 3,
question: "How often is the project dashboard updated?",
answer: "The dashboard updates in real-time as interns submit tasks or participate in the forum. Weekly progress reports are automatically generated every Friday at 5:00 PM EST and can be exported as PDF files from the Dashboard view."
}
];
import api from "../../lib/api";
import { useEffect, useState } from "react";
interface FAQ {
id: number;
pertanyaan: string;
jawaban: string;
created_at: string;
}
export default function FAQPage() {
const [faq, setFaq] = useState<FAQ[]>([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
api.get("/faq-api/get")
.then((res) => {
setFaq(res.data.data); // ambil array dari field "data"
})
.catch((err) => {
console.error("Gagal fetch FAQ:", err);
})
.finally(() => {
setLoading(false);
});
}, []);
return (
<div>
{/* Header Title */}
<div className="mb-10 ">
<div className="mb-10">
<h1 className="page-title">FAQ</h1>
<p className="page-title-desc">
Quick answers to common questions about the Internify LMS platform.
@@ -28,22 +36,25 @@ export default function FAQPage() {
</div>
{/* FAQ Lists */}
<div className="space-y-8 max-w-auto">
{mockFAQData.map((faq) => (
<div key={faq.id} className="relative shadow-md group py-5 px-10 rounded-md bg-white">
{/* Item Question */}
<h2 className="text-[17px] font-bold text-[#8A0000] tracking-tight leading-snug mb-2 border-l-4 border-[#8A0000] pl-3">
{faq.question}
</h2>
{/* Item Answer */}
<p className="text-[14px] pl-8 text-[#8A0000] font-light leading-relaxed tracking-normal">
{faq.answer}
</p>
</div>
))}
</div>
{loading ? (
<p className="text-gray-500">Memuat FAQ...</p>
) : (
<div className="space-y-8 max-w-auto">
{faq.map((item) => (
<div key={item.id} className="relative shadow-md group py-5 px-10 rounded-md bg-white">
{/* Item Question */}
<h2 className="text-[17px] font-bold text-[#8A0000] tracking-tight leading-snug mb-2 border-l-4 border-[#8A0000] pl-3">
{item.pertanyaan}
</h2>
<p className="text-[14px] pl-8 text-[#8A0000] font-light leading-relaxed tracking-normal">
{item.jawaban}
</p>
</div>
))}
</div>
)}
</div>
);
}
src/Pages/internify/LoginInternify.tsx
+32 -14
View File
@@ -2,11 +2,17 @@ import { useState } from "react";
import logo from "../../assets/logo.png";
import { useNavigate } from "react-router-dom";
import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
import api from "../../lib/api";
const DataUsers = [
{ "Email": "intern@email.com", "Password": "password123", "role": "intern" },
{ "Email": "mentor@email.com", "Password": "password123", "role": "mentor" },
];
const decodeJWT = (token: string) => {
try {
const base64 = token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
return JSON.parse(atob(padded));
} catch {
return null;
}
};
export default function InternifyLogin() {
const navigate = useNavigate();
@@ -14,8 +20,9 @@ export default function InternifyLogin() {
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const handleSignIn = (e: React.FormEvent) => {
const handleSignIn = async (e: React.FormEvent) => {
e.preventDefault();
setError("");
@@ -24,20 +31,30 @@ export default function InternifyLogin() {
return;
}
const user = DataUsers.find(
(u) => u.Email.toLowerCase() === email.toLowerCase() && u.Password === password
);
try {
setLoading(true);
const response = await api.post("/auth-api/login", { email, password });
if (user) {
if (user.role === "intern") {
const { token } = response.data.data;
document.cookie = `token=${token}; path=/; SameSite=Strict`;
const decoded = decodeJWT(token);
const role = decoded?.role;
if (role === "intern") {
navigate("/intern");
} else if (user.role === "mentor") {
} else if (role === "admin") {
navigate("/mentor");
} else {
setError("Role user tidak dikenali.");
}
} else {
setError("Email atau password salah.");
} catch (err: any) {
if (err.response?.status === 401 || err.response?.status === 400) {
setError("Email atau password salah.");
} else {
setError("Terjadi kesalahan. Coba beberapa saat lagi.");
}
} finally {
setLoading(false);
}
};
@@ -48,7 +65,7 @@ export default function InternifyLogin() {
<div className="w-full max-w-[440px] flex flex-col items-center">
<div className="text-center mb-6">
<div className="flex items-center justify-center gap-2 font-bold text-2xl tracking-tight text-black">
<img src={logo} alt="Logo" className="w-32 h-20" />
<img src={logo} alt="Logo" />
</div>
<p className="text-[10px] tracking-widest text-yellow-950 font-semibold mt-1 uppercase">
HUMIC LMS PORTAL
@@ -112,6 +129,7 @@ export default function InternifyLogin() {
<button
type="submit"
disabled={loading}
className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-medium text-sm py-2.5 rounded-lg transition-colors shadow-sm mt-2"
>
Sign In
src/Pages/internify/SettingsPage.tsx
+72 -18
View File
@@ -1,30 +1,72 @@
import { useState } from "react";
// Mock Data Profile awal
const mockProfileData = {
fullName: "JonathanKristina",
email: "JonathanKristina@gmail.com",
bio: "UIUX holic"
};
import { useState, useEffect } from "react";
import api from "../../lib/api";
export default function SettingsContent() {
const [formData, setFormData] = useState(mockProfileData);
const [formData, setFormData] = useState({
fullName: "",
email: "",
bio: ""
});
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [successMsg, setSuccessMsg] = useState("");
const [errorMsg, setErrorMsg] = useState("");
useEffect(() => {
const fetchData = async () => {
try {
const response = await api.patch("/auth-api/update-profile");
const data = response.data.data;
setFormData({
fullName: data.full_name || "",
email: data.email || "",
bio: data.professional_bio || "",
});
} catch (err) {
console.error("Failed to fetch profile:", err)
} finally {
setLoading(false);
}
};
fetchData();
}, []);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleSaveChanges = (e: React.FormEvent) => {
const handleSaveChanges = async (e: React.FormEvent) => {
e.preventDefault();
// Simulasi penyimpanan data sukses
alert("Changes saved successfully!");
console.log("Saved Data:", formData);
setSuccessMsg("");
setErrorMsg("");
setSaving(true);
try {
await api.patch("/auth-api/update-profile", {
full_name: formData.fullName,
email: formData.email,
professional_bio: formData.bio,
});
setSuccessMsg("Profile updated successfully!");
} catch (err: any) {
setErrorMsg(err?.response?.data?.message || "Failed to save changes.");
} finally {
setSaving(false);
}
};
// Mendapatkan inisial huruf pertama untuk avatar profile gambar
const initialLetter = formData.fullName ? formData.fullName.charAt(1).toUpperCase() : "U";
if (loading) {
return (
<div className="flex items-center justify-center h-40 text-sm text-gray-400">
Loading profile...
</div>
);
}
return (
<div className="">
@@ -38,7 +80,7 @@ export default function SettingsContent() {
{/* White Card Container */}
<div className="w-full bg-white rounded-xl border border-gray-100 shadow-lg overflow-hidden">
{/* Card Header */}
<div className="p-6 border-b border-gray-100">
<h2 className="text-base font-bold text-gray-900">Profile Information</h2>
@@ -49,7 +91,7 @@ export default function SettingsContent() {
{/* Card Body & Form */}
<form onSubmit={handleSaveChanges} className="p-6 space-y-6">
{/* Profile Photo Display Row */}
<div className="flex items-center gap-4 py-2">
<div className="w-16 h-16 bg-gray-100 border border-gray-200 rounded-xl flex items-center justify-center shadow-sm">
@@ -67,7 +109,7 @@ export default function SettingsContent() {
{/* Grid Inputs (Full Name & Email Address) */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Field: Full Name */}
<div className="space-y-1">
<label className="text-[10px] font-bold tracking-wider text-gray-700 uppercase block">
@@ -114,13 +156,25 @@ export default function SettingsContent() {
</p>
</div>
{successMsg && (
<p className="text-xs text-green-600 bg-green-50 p-2 rounded-md font-medium">
{successMsg}
</p>
)}
{errorMsg && (
<p className="text-xs text-red-600 bg-red-50 p-2 rounded-md font-medium">
{errorMsg}
</p>
)}
{/* Form Action Footer Row */}
<div className="flex justify-end pt-2">
<button
type="submit"
disabled={saving}
className="px-6 py-2 bg-[#B30000] hover:bg-[#990000] text-white font-bold text-xs rounded-lg shadow-sm transition-colors uppercase tracking-wider"
>
Save Changes
{saving ? "Saving..." : "Save Changes"}
</button>
</div>
src/Pages/internify/intern/ForumTab.tsx
+26 -6
View File
@@ -1,24 +1,44 @@
import type { Project } from '../../../lib/mockProjects';
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 type { Project } from '../../../types/project.types';
export default function ForumTab({ project }: { project: Project }) {
const { id } = useParams<{id:string}>();
const { tasks, loading, error } = useProjectTasks(id ?? "");
return (
<div>
{/* Hero banner */}
<HeroProject title={project.name} description={project.description} />
<HeroProject title={project.project_name} description={project.description} />
{/* Loading */}
{loading && (
<div className="flex flex-col gap-3 mt-5">
{[...Array(3)].map((_, i) => (
<div key={i} className="h-24 bg-gray-100 rounded-xl animate-pulse" />
))}
</div>
)}
{/* Error */}
{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={project.tasks} />
{/* <ProjectTimeline tasks=tasks /> */}
</div>
<div className="w-4/5">
{project.tasks.map((task, idx) => (
<TaskCard key={idx} task={task} projectName={project.name} />
))}
{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} />
))
)}
</div>
</div>
</div>
src/Pages/internify/intern/HomeInternPage.tsx
+3 -3
View File
@@ -9,14 +9,14 @@ export default function HomeInternPage() {
<HomeHeader />
<div className="flex flex-col gap-5">
<div className="grid grid-cols-2 gap-5">
<div className="bg-white border border-gray-200 rounded-xl p-6">
<div className="bg-box-primary border border-box-border rounded-xl p-6">
<HomeProjectList />
</div>
<div className="bg-white border border-gray-200 rounded-xl p-6">
<div className="bg-box-primary border border-box-border rounded-xl p-6">
<TaskTimeline />
</div>
</div>
<div className="bg-white rounded-xl">
<div className="bg-box-primary rounded-xl">
<HomeCalendar />
</div>
</div>
src/Pages/internify/intern/ParticipantTab.tsx
+50 -19
View File
@@ -1,44 +1,75 @@
import type { Project, Intern } from '../../../lib/mockData';
import { useParams } from 'react-router-dom';
import { useProjectInterns } from '../../../hooks/useProjectDetail';
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 ?? "");
return (
<div>
{/* Mentor */}
<div className="mb-8">
<h3 className=" font-bold text-base text-[#1a1a1a] mb-3.5">
Mentor
</h3>
<h3 className="font-bold text-font-shade mb-3.5">Mentor</h3>
<div className="border-b border-[#eee] pb-4">
<div className="flex items-center gap-3">
<span className=" text-sm text-[#333]">
{project.mentor}
</span>
{project.admin.profile_picture ? (
<img
src={project.admin.profile_picture}
alt={project.admin.full_name}
className="w-8 h-8 rounded-full object-cover"
/>
) : (
<div className="w-8 h-8 rounded-full bg-gray-200" />
)}
<span className="text-sm text-font">{project.admin.full_name}</span>
</div>
</div>
</div>
{/* Members */}
<div>
<h3 className="font-bold text-base text-[#1a1a1a] mb-3.5">
Members
</h3>
{project.interns.map((intern: Intern, idx: number) => (
<h3 className="font-bold text-font-shade mb-3.5">Members</h3>
{loading && (
<div className="flex flex-col gap-3">
{[...Array(3)].map((_, i) => (
<div key={i} className="h-10 bg-gray-100 rounded animate-pulse" />
))}
</div>
)}
{error && <p className="text-red-500 text-sm">{error}</p>}
{!loading && !error && interns.map((intern, idx) => (
<div
key={idx}
key={intern.id}
className={`flex items-center justify-between py-3 ${
idx < project.interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
idx < interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
}`}
>
<div className="flex items-center gap-3">
<span className=" text-sm text-[#333]">
{intern.name}
</span>
{intern.avatar ? (
<img
src={intern.avatar}
alt={intern.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-[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.role}</span>
</div>
))}
{!loading && !error && interns.length === 0 && (
<p className="text-sm text-gray-400">Belum ada members.</p>
)}
</div>
</div>
);
src/Pages/internify/intern/ProjectDetailPage.tsx
+7 -11
View File
@@ -1,24 +1,20 @@
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { mockProjects } from '../../../lib/mockProjects';
import { useProjectDetail } from '../../../hooks/useProjectDetail';
import ForumTab from './ForumTab';
import ParticipantsTab from './ParticipantTab';
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
export default function ProjectDetailPage() {
const { slug } = useParams<{ slug: string }>();
const { id } = useParams<{ id: string }>();
const { project, loading, error } = useProjectDetail(id ?? "");
const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
const project = mockProjects.find((p) => toSlug(p.name) === slug);
if (!project) {
return (
<div className="p-10 text-[#888]">
Project tidak ditemukan.
</div>
);
}
// Fallback sederhana
if (loading) return <p className="p-10 text-gray-400">Memuat project...</p>;
if (error) return <p className="p-10 text-red-500">{error}</p>;
if (!project) return <p className="p-10 text-gray-400">Project tidak ditemukan.</p>;
const tabClass = (tab: string) =>
`pr-0 py-2.5 mr-7 text-sm bg-transparent border-0 cursor-pointer transition-colors duration-150 border-b-2 ${activeTab === tab
src/Pages/internify/intern/ProjectsPage.tsx
+15 -3
View File
@@ -1,7 +1,19 @@
import ProjectCard from './components/ProjectsCard'
import { mockProjects } from '../../../lib/mockData'
import { useProjects } from '../../../hooks/useProjects';
export default function ProjectsPage() {
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-danger text-md">{error}</p>;
return (
<div>
<div className="flex flex-col gap-1 mb-6">
@@ -10,8 +22,8 @@ export default function ProjectsPage() {
</div>
{/* Grid card */}
<div className="grid grid-cols-1 gap-6 md:gap-4 md:grid-cols-3 lg:grid-cols-4">
{mockProjects.map(project => (
<div className="grid grid-cols-1 gap-6 md:gap-3 md:grid-cols-4 lg:grid-cols-5">
{projects.map(project => (
<ProjectCard key={project.id} {...project} />
))}
</div>
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>
);
src/Pages/internify/mentor/HomePage.tsx → src/Pages/internify/mentor/HomeMentorPage.tsx
View File
src/Pages/internify/mentor/components/SidebarMentor.tsx
+16 -12
View File
@@ -12,7 +12,7 @@ const navItems = [
const prefItems = [
{ label: "Settings", icon: Settings, path: "/mentor/settings" },
{ label: "FAQ", icon: HelpCircle, path: "/mentor/faq" },
{ label: "Logout", icon: LogOut, path: "/login-internify", danger: true },
{ label: "Logout", icon: LogOut, path: "/login-internify", danger: true, isLogout: true },
];
interface SidebarProps {
@@ -29,6 +29,13 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
closeSidebar();
};
const handleLogout = () => {
document.cookie = "token=; path=/; max-age=86400; SameSite=Strict";
closeSidebar();
navigate("/login-internify", { replace: true });
};
return (
<aside
className={`
@@ -39,7 +46,7 @@ export default function SidebarMentor({ 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>
@@ -56,8 +63,6 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
</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 }) => {
@@ -67,14 +72,13 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
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"
${isActive
? "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>
);
})}
@@ -87,18 +91,18 @@ export default function SidebarMentor({ 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" />