+ 
+
+
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/Pages/internify/intern/ProjectDetailPage.tsx b/src/Pages/internify/intern/ProjectDetailPage.tsx
new file mode 100644
index 0000000..961b10e
--- /dev/null
+++ b/src/Pages/internify/intern/ProjectDetailPage.tsx
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { mockProjects } from '../../../lib/mockData';
+import ForumTab from './ProjectForum';
+import ParticipantsTab from './ProjectParticipants';
+import { ChevronLeft } from 'lucide-react';
+
+// ─── ProjectDetailPage ─────────────────────────────────────────────────────────
+export default function ProjectDetailPage() {
+ const { id } = useParams<{ id: string }>();
+ const navigate = useNavigate();
+ const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
+
+ const handleBack = () => {
+ if (window.history.length > 1) {
+ navigate(-1);
+ } else {
+ navigate('/intern/projects');
+ }
+ };
+
+ const project = mockProjects.find((p) => p.id === Number(id));
+
+ if (!project) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Project tidak ditemukan.
+
+ );
+ }
+
+ 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
+ ? 'font-bold text-[#C0392B] border-[#C0392B]'
+ : 'font-medium text-[#666] border-transparent'
+ }`;
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/ProjectForum.tsx b/src/Pages/internify/intern/ProjectForum.tsx
new file mode 100644
index 0000000..67cd5cb
--- /dev/null
+++ b/src/Pages/internify/intern/ProjectForum.tsx
@@ -0,0 +1,26 @@
+import type { Project } from '../../../lib/mockData';
+import ProjectTimeline from './components/ProjectTimeline';
+import TaskCard from './components/ProjectTaskCard';
+import HeroProject from './components/Hero-project';
+
+export default function ForumTab({ project }: { project: Project }) {
+ return (
+
+
+ {/* Back Button */}
+
+
+ {/* Tabs */}
+
+
+
+
+
+
+ {/* Tab content */}
+ {activeTab === 'forum'
+ ?
+ {/* Hero banner */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/ProjectParticipants.tsx b/src/Pages/internify/intern/ProjectParticipants.tsx
new file mode 100644
index 0000000..5e71a80
--- /dev/null
+++ b/src/Pages/internify/intern/ProjectParticipants.tsx
@@ -0,0 +1,45 @@
+import type { Project, Intern } from '../../../lib/mockData';
+
+export default function ParticipantsTab({ project }: { project: Project }) {
+ return (
+
+
+
+
+
+
+ {project.tasks.map((task, idx) => (
+
+
+ {/* Mentor */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/ProjectsPage.tsx b/src/Pages/internify/intern/ProjectsPage.tsx
new file mode 100644
index 0000000..496d7ec
--- /dev/null
+++ b/src/Pages/internify/intern/ProjectsPage.tsx
@@ -0,0 +1,20 @@
+import ProjectCard from './components/ProjectsCard'
+import { mockProjects } from '../../../lib/mockData'
+
+export default function ProjectsPage() {
+ return (
+
+
+
+ {/* Members */}
+ + Mentor +
+
+
+
+
+ {project.mentor}
+
+
+
+
+ + Members +
+ {project.interns.map((intern: Intern, idx: number) => ( +
+
+ ))}
+
+
+ {intern.email}
+
+
+
+ {intern.role}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/SertificatePage.tsx b/src/Pages/internify/intern/SertificatePage.tsx
new file mode 100644
index 0000000..d2c1ad9
--- /dev/null
+++ b/src/Pages/internify/intern/SertificatePage.tsx
@@ -0,0 +1,18 @@
+const SertificatePage = () => {
+ return (
+
+ List Projects
+
+
+ {/* Grid card */}
+ View assigned projects and track their progress.
+
+ {mockProjects.map(project => (
+
+
+
+ )
+}
+
+export default SertificatePage
diff --git a/src/Pages/internify/intern/components/FooterIntern.tsx b/src/Pages/internify/intern/components/FooterIntern.tsx
new file mode 100644
index 0000000..2c40392
--- /dev/null
+++ b/src/Pages/internify/intern/components/FooterIntern.tsx
@@ -0,0 +1,79 @@
+import { Briefcase, Globe, Users } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+const footerLinks = {
+ Internship: [
+ { label: "Beranda", path: "/" },
+ { label: "Tentang", path: "/tentang" },
+ { label: "Life At Humic", path: "/life" },
+ ],
+ "Internify Logo": [
+ { label: "Humic Website", path: "/humic" },
+ { label: "Our Activity", path: "/activity" },
+ { label: "Life At Humic", path: "/life-humic" },
+ { label: "Our Developer", path: "/developer" },
+ ],
+};
+
+const socials = [
+ { label: "Website", icon: Globe, href: "https://placeholder.com" },
+ { label: "Team", icon: Users, href: "https://placeholder.com" },
+ { label: "Work", icon: Briefcase, href: "https://placeholder.com" },
+];
+
+
+export function FooterIntern() {
+ const navigate = useNavigate();
+
+ return (
+
+ );
+}
+
+
+export default FooterIntern
diff --git a/src/Pages/internify/intern/components/Hero-project.tsx b/src/Pages/internify/intern/components/Hero-project.tsx
new file mode 100644
index 0000000..c1f6946
--- /dev/null
+++ b/src/Pages/internify/intern/components/Hero-project.tsx
@@ -0,0 +1,26 @@
+interface HeroProps {
+ title: string,
+ description: string
+}
+
+export default function HeroProject({ title, description }: HeroProps) {
+ return (
+
+
+ Certificates
+View and download internship certificates
+
+
+
+
+
+
+
+ {/* Decorative circles */}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/HomeCalendar.tsx b/src/Pages/internify/intern/components/HomeCalendar.tsx
new file mode 100644
index 0000000..af11681
--- /dev/null
+++ b/src/Pages/internify/intern/components/HomeCalendar.tsx
@@ -0,0 +1,181 @@
+import { useState } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface Deadline {
+ date: number
+ month: number
+ year: number
+ label: string
+}
+
+const DEADLINES: Deadline[] = [
+ { date: 4, month: 4, year: 2025, label: 'Laporan Progress 1 Internify– 4 May' },
+ { date: 5, month: 4, year: 2025, label: 'Laporan Progress 1 Internify– 4 May' },
+]
+
+const DAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const MONTH_NAMES = [
+ 'January', 'February', 'March', 'April', 'May', 'June',
+ 'July', 'August', 'September', 'October', 'November', 'December',
+]
+
+function getDaysInMonth(year: number, month: number) {
+ return new Date(year, month + 1, 0).getDate()
+}
+
+function getFirstDayOfMonth(year: number, month: number) {
+ return new Date(year, month, 1).getDay()
+}
+
+const HomeCalendar = () => {
+ const today = new Date()
+ const [currentYear, setCurrentYear] = useState(2025)
+ const [currentMonth, setCurrentMonth] = useState(4) // May = 4 (0-indexed)
+
+ const daysInMonth = getDaysInMonth(currentYear, currentMonth)
+ const firstDay = getFirstDayOfMonth(currentYear, currentMonth)
+
+ const prevMonth = () => {
+ if (currentMonth === 0) {
+ setCurrentMonth(11)
+ setCurrentYear(y => y - 1)
+ } else {
+ setCurrentMonth(m => m - 1)
+ }
+ }
+
+ const nextMonth = () => {
+ if (currentMonth === 11) {
+ setCurrentMonth(0)
+ setCurrentYear(y => y + 1)
+ } else {
+ setCurrentMonth(m => m + 1)
+ }
+ }
+
+ const isToday = (day: number) =>
+ day === today.getDate() &&
+ currentMonth === today.getMonth() &&
+ currentYear === today.getFullYear()
+
+ const hasDeadline = (day: number) =>
+ DEADLINES.some(d => d.date === day && d.month === currentMonth && d.year === currentYear)
+
+ const upcomingDeadlines = DEADLINES.filter(
+ d => d.month === currentMonth && d.year === currentYear
+ )
+
+ // Previous month trailing days
+ const prevMonthDays = getDaysInMonth(currentYear, currentMonth - 1 < 0 ? 11 : currentMonth - 1)
+ const trailingDays = Array.from({ length: firstDay }, (_, i) => prevMonthDays - firstDay + 1 + i)
+
+ // Current month days
+ const currentDays = Array.from({ length: daysInMonth }, (_, i) => i + 1)
+
+ // Next month leading days
+ const totalCells = Math.ceil((firstDay + daysInMonth) / 7) * 7
+ const leadingDays = Array.from({ length: totalCells - firstDay - daysInMonth }, (_, i) => i + 1)
+
+ // Bold dates (weekends or special)
+ const isBold = (day: number) => {
+ const d = new Date(currentYear, currentMonth, day).getDay()
+ return d === 0 || d === 6 // Sun or Sat
+ }
+
+ return (
+ + {title.toUpperCase()} +
+ {description.split('\n\n').map((para, i) => ( ++ {para} +
+ ))} +
+ {/* Header */}
+
+ + {/* Upcoming Deadlines */} +
+ )
+}
+
+export default HomeCalendar
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/HomeHeader.tsx b/src/Pages/internify/intern/components/HomeHeader.tsx
new file mode 100644
index 0000000..6545db4
--- /dev/null
+++ b/src/Pages/internify/intern/components/HomeHeader.tsx
@@ -0,0 +1,12 @@
+const HomeHeader = () => {
+ const name = "Karina";
+ return (
+
+
+
+ {/* Day labels */}
+ + {MONTH_NAMES[currentMonth]} {currentYear} +
+
+
+
+
+
+ {DAY_LABELS.map(day => (
+
+
+ {/* Calendar grid */}
+
+ {day}
+
+ ))}
+
+ {/* Trailing days from prev month */}
+ {trailingDays.map(day => (
+
+
+ {/* Divider */}
+
+ {day}
+
+ ))}
+
+ {/* Current month days */}
+ {currentDays.map(day => (
+
+ {isToday(day) ? (
+
+ {day}
+
+ ) : (
+
+ {day}
+
+ )}
+
+ ))}
+
+ {/* Leading days from next month */}
+ {leadingDays.map(day => (
+
+ {day}
+
+ ))}
+ + + {/* Upcoming Deadlines */} +
+
+ + Upcoming Deadlines +
+ {upcomingDeadlines.length > 0 ? ( +-
+ {upcomingDeadlines.map((d, i) => (
+
- + + {d.label} + + ))} +
No upcoming deadlines this month.
+ )} +
+
+ )
+}
+
+export default HomeHeader
diff --git a/src/Pages/internify/intern/components/HomeProjectList.tsx b/src/Pages/internify/intern/components/HomeProjectList.tsx
new file mode 100644
index 0000000..167a9e1
--- /dev/null
+++ b/src/Pages/internify/intern/components/HomeProjectList.tsx
@@ -0,0 +1,40 @@
+import { Code2, ChessKing, Beef } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { mockProjects } from '../../../../lib/mockData'
+
+interface Project {
+ name: string
+ role: string
+ logo: React.ElementType
+ iconBg: string
+ iconColor: string
+}
+
+const HomeProjectList = () => {
+ const navigate = useNavigate();
+ return (
+
+
+ Hi, {name}!
+
+
+ )
+}
+
+export default HomeProjectList
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/ProjectTaskCard.tsx b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
new file mode 100644
index 0000000..c0d005f
--- /dev/null
+++ b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
@@ -0,0 +1,34 @@
+import type { Task } from "../../../../lib/mockData";
+
+const formatDate = (date: Date) =>
+ new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
+
+export default function TaskCard({ task }: { task: Task }) {
+ return (
+ Projects
+
+ {mockProjects.map((project, index) => {
+ return (
+
+ navigate(`/intern/projects/${project.id}`)}
+ 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"
+ >
+
+ )
+ })}
+
+
+
+
+ {project.name}
+ {/*{project.role}
*/} +
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/ProjectTimeline.tsx b/src/Pages/internify/intern/components/ProjectTimeline.tsx
new file mode 100644
index 0000000..3430820
--- /dev/null
+++ b/src/Pages/internify/intern/components/ProjectTimeline.tsx
@@ -0,0 +1,48 @@
+import type { Task } from "../../../../lib/mockData";
+
+const formatDate = (date: Date) =>
+ new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
+
+export default function ProjectTimeline({ tasks }: { tasks: Task[] }) {
+ const today = new Date();
+ today.setHours(0, 0, 0, 0);
+
+ return (
+
+
+
+
+ Deadline : {formatDate(task.deadline.date)} at {task.deadline.time}
+
+
+ {task.title}
+
+
+ {task.description}
+
+
+ {task.isSubmitted ? (
+
+ DONE
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/ProjectsCard.tsx b/src/Pages/internify/intern/components/ProjectsCard.tsx
new file mode 100644
index 0000000..56af5f0
--- /dev/null
+++ b/src/Pages/internify/intern/components/ProjectsCard.tsx
@@ -0,0 +1,76 @@
+import { useNavigate } from 'react-router-dom'
+
+interface ProjectCardProps {
+ id: number | string
+ name: string
+ mentor: string
+ avatarUrl?: string
+ thumbnailUrl?: string
+ progress: number
+ tasksDone: number
+ tasksTotal: number
+}
+
+const ProjectCard = ({
+ id,
+ name,
+ mentor,
+ avatarUrl,
+ thumbnailUrl,
+ progress,
+ tasksDone,
+ tasksTotal,
+}: ProjectCardProps) => {
+ const navigate = useNavigate()
+
+ return (
+
+
+ Timeline
+
+
+
+ -
+ {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 (
+
-
+ {/* Dot */}
+
+ + {isToday ? 'Hari ini' : formatDate(task.deadline.date)} +++ {task.title} ++
+ );
+ })}
+
+ {/* Thumbnail */}
+
+ )
+}
+
+export default ProjectCard
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/SidebarIntern.tsx b/src/Pages/internify/intern/components/SidebarIntern.tsx
new file mode 100644
index 0000000..5bcaca2
--- /dev/null
+++ b/src/Pages/internify/intern/components/SidebarIntern.tsx
@@ -0,0 +1,97 @@
+import { useNavigate } from 'react-router-dom';
+import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+
+const navItems = [
+ { label: "Home", icon: Home, path: "/intern" },
+ { label: "List Projects", icon: FolderKanban, 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: "/intern/logout", danger: true },
+];
+
+function SidebarIntern() {
+ const navigate = useNavigate();
+ const [active, setActive] = useState("/intern");
+
+ const handleNav = (path: string) => {
+ setActive(path);
+ navigate(path);
+ };
+
+ return (
+
+ );
+}
+
+
+export default SidebarIntern
diff --git a/src/Pages/internify/intern/components/TaskTimeline.tsx b/src/Pages/internify/intern/components/TaskTimeline.tsx
new file mode 100644
index 0000000..b10a66d
--- /dev/null
+++ b/src/Pages/internify/intern/components/TaskTimeline.tsx
@@ -0,0 +1,79 @@
+interface Task {
+ tanggal: string
+ title: string
+ description: string
+}
+
+interface TaskTimelineProps {
+ tasks?: Task[]
+}
+
+const defaultTasks: Task[] = [
+ {
+ tanggal: 'MAY 14, 2026 AT 23:59 PM',
+ title: 'Laporan tugas 1',
+ description: 'Berisi design uiux, dan user flow dari aplikasi internify',
+ },
+ {
+ tanggal: 'MAY 15, 2026 AT 23:59 PM',
+ title: 'Laporan tugas 1',
+ description: 'Berisi design uiux, dan user flow dari aplikasi internify',
+ },
+ {
+ tanggal: 'MAY 16, 2026 AT 23:59 PM',
+ title: 'Laporan tugas 1',
+ description: 'Berisi design uiux, dan user flow dari aplikasi internify',
+ },
+]
+
+const TaskTimeline = ({ tasks = defaultTasks }: TaskTimelineProps) => {
+ const today = new Date()
+
+ const isOverdue = (tanggal: string) => {
+ const deadline = new Date(tanggal)
+ return deadline < today
+ }
+
+ return (
+
+ {thumbnailUrl && (
+ 
+ )}
+
+
+ {/* Content */}
+
+
+ {name}
+ + {/* Mentor */} +
+
+
+ {/* Progress bar */}
+
+ {avatarUrl ? (
+ 
+ ) : (
+
+ )}
+
+ {mentor}
+
+
+
+ {/* Button */}
+
+
+
+
+
+ {tasksDone}/{tasksTotal}
+
+
+
+ )
+}
+
+export default TaskTimeline
\ No newline at end of file
diff --git a/src/Pages/internify/layout.tsx b/src/Pages/internify/layout.tsx
new file mode 100644
index 0000000..122cf7c
--- /dev/null
+++ b/src/Pages/internify/layout.tsx
@@ -0,0 +1,36 @@
+import { Outlet } from "react-router-dom";
+import Header from './Header';
+import SidebarIntern from './intern/components/SidebarIntern';
+import SidebarAdmin from '../../Layout/SidebarAdmin';
+import FooterIntern from './intern/components/FooterIntern';
+
+export const InternLayout = () => {
+ return (
+ Task Timeline
+ +
+ {/* Vertical line */}
+
+
+
+ -
+ {tasks.map((task, index) => {
+ const overdue = isOverdue(task.tanggal)
+
+ return (
+
-
+ {/* Dot */}
+ + ++ + {/* Content */} +++
+ {task.tanggal} +
+{task.title}
+{task.description}
+
+ )
+ })}
+
+
+ );
+};
+
+export const MentorLayout = () => {
+ return (
+
+
+
+
+
+
+ )
+}
+
diff --git a/src/Pages/internify/mentor/HomeMentorPage.tsx b/src/Pages/internify/mentor/HomeMentorPage.tsx
new file mode 100644
index 0000000..87fcabb
--- /dev/null
+++ b/src/Pages/internify/mentor/HomeMentorPage.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const HomeMentorPage = () => {
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+export default HomeMentorPage
diff --git a/src/Pages/internify/mentor/MentorCertificatePage.tsx b/src/Pages/internify/mentor/MentorCertificatePage.tsx
new file mode 100644
index 0000000..39e7621
--- /dev/null
+++ b/src/Pages/internify/mentor/MentorCertificatePage.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const MentorCertificatePage = () => {
+ return (
+
+
+
+ )
+}
+
+export default MentorCertificatePage
diff --git a/src/Pages/internify/mentor/MentorDetailProject.tsx b/src/Pages/internify/mentor/MentorDetailProject.tsx
new file mode 100644
index 0000000..d19c1d0
--- /dev/null
+++ b/src/Pages/internify/mentor/MentorDetailProject.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const MentorDetailProject = () => {
+ return (
+
+
+
+ )
+}
+
+export default MentorDetailProject
diff --git a/src/Pages/internify/mentor/MentorInternPage.tsx b/src/Pages/internify/mentor/MentorInternPage.tsx
new file mode 100644
index 0000000..e01ae40
--- /dev/null
+++ b/src/Pages/internify/mentor/MentorInternPage.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const MentorInternPage = () => {
+ return (
+
+
+
+ )
+}
+
+export default MentorInternPage
diff --git a/src/Pages/internify/mentor/MentorProjectsPage.tsx b/src/Pages/internify/mentor/MentorProjectsPage.tsx
new file mode 100644
index 0000000..f8f040d
--- /dev/null
+++ b/src/Pages/internify/mentor/MentorProjectsPage.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const MentorProjectsPage = () => {
+ return (
+
+
+
+ )
+}
+
+export default MentorProjectsPage
diff --git a/src/Pages/internify/mentor/SidebarMentor.tsx b/src/Pages/internify/mentor/SidebarMentor.tsx
new file mode 100644
index 0000000..bf0fb08
--- /dev/null
+++ b/src/Pages/internify/mentor/SidebarMentor.tsx
@@ -0,0 +1,99 @@
+import { useNavigate } from 'react-router-dom';
+import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+
+const navItems = [
+ // belum kutambahin
+ { label: "Home", icon: Home, path: "" },
+ { label: "List Projects", icon: FolderKanban, path: "" },
+ { label: "Interns", icon: FolderKanban, path: "" },
+ { label: "Certificates", icon: Award, path: "" },
+];
+
+const prefItems = [
+ { label: "Settings", icon: Settings, path: "/home-intern/settings" },
+ { label: "FAQ", icon: HelpCircle, path: "/home-intern/faq" },
+ { label: "Logout", icon: LogOut, path: "/home-intern/logout", danger: true },
+];
+
+function SidebarIntern() {
+ const navigate = useNavigate();
+ const [active, setActive] = useState("/home-intern");
+
+ const handleNav = (path: string) => {
+ setActive(path);
+ navigate(path);
+ };
+
+ return (
+
+ );
+}
+
+
+export default SidebarIntern
diff --git a/src/Pages/utils/InternRoute.tsx b/src/Pages/utils/InternRoute.tsx
new file mode 100644
index 0000000..bde4c6d
--- /dev/null
+++ b/src/Pages/utils/InternRoute.tsx
@@ -0,0 +1,18 @@
+// App.tsx / router.tsx
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import HomeInternPage from "../internify/intern/HomeInternPage";
+import InternLayout from "../internify/layout";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: