-
Menu
-
-
navigate("/dashboard")}
- >
-
-
-
Dashboard
-
-
navigate("/product-list")}
- >
-
-
Project
-
-
navigate("/lowongan-list")}
- >
-
-
-
Lowongan
-
-
navigate("/partnership-admin")}
- >
-
-
-
Partnership
-
-
navigate("/internships-list")}
- >
-
-
-
Pelamar
-
-
navigate("/feedback-list")}
- >
-
-
-
Feedback
-
-
navigate("/faq-list")}
- >
-
-
-
FAQ
-
+
+ {/* Main nav */}
+
+
+
+
+ {/* Preferences */}
+
+ PREFERENCES
+
+
+
+
);
-};
+}
-export default SidebarAdmin;
+
+export default SidebarIntern
diff --git a/src/Pages/internify/FAQpage.tsx b/src/Pages/internify/FAQpage.tsx
new file mode 100644
index 0000000..c2070e8
--- /dev/null
+++ b/src/Pages/internify/FAQpage.tsx
@@ -0,0 +1,69 @@
+import { useNavigate } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+
+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."
+ }
+];
+
+export default function FAQPage() {
+ const navigate = useNavigate();
+
+ return (
+
+ {/* Breadcrumb */}
+
+ navigate("/")}>Home
+
+ FAQ
+
+
+ {/* Header Title */}
+
+
FAQ
+
+ Quick answers to common questions about the Internify LMS platform.
+
+
+
+ {/* FAQ Lists */}
+
+ {mockFAQData.map((faq) => (
+
+
+ {/* Indikator Garis/Kotak Kecil Merah di Sisi Kiri sesuai gambar */}
+
+
+ {/* Item Question */}
+
+ {faq.question}
+
+
+ {/* Item Answer */}
+
+ {faq.answer}
+
+
+ {/* Divider Line tipis di bawah setiap item, kecuali item terakhir */}
+ {faq.id !== mockFAQData.length && (
+
+ )}
+
+ ))}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/NotificationList.tsx b/src/Pages/internify/NotificationList.tsx
new file mode 100644
index 0000000..777de48
--- /dev/null
+++ b/src/Pages/internify/NotificationList.tsx
@@ -0,0 +1,169 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ChevronRight, Check, Download, Info, Award } from "lucide-react";
+import { LuFileSpreadsheet } from "react-icons/lu"; // Alternatif icon task dari react-icons
+
+const initialNotifications = [
+ {
+ id: 1,
+ type: "new-task",
+ title: "New Task Assigned",
+ time: "Just now",
+ isNew: true,
+ group: "TODAY",
+ description: "Mentor Sarah Johnson has pushed a new task: User Persona Analysis"
+ },
+ {
+ id: 2,
+ type: "achievement",
+ title: "Certificate Ready",
+ time: "2 hours ago",
+ isNew: false,
+ group: "TODAY",
+ description: "Your certificate for UI Engineering Phase 1 is now available for download!"
+ },
+ {
+ id: 3,
+ type: "system",
+ title: "System Maintenance",
+ time: "2 days ago",
+ isNew: false,
+ group: "YESTERDAY",
+ description: "Internify will undergo scheduled maintenance this Sunday from 02:00 AM to 04:00 AM GMT+7."
+ }
+];
+
+export default function NotificationList() {
+ const navigate = useNavigate();
+ const [notifications, setNotifications] = useState(initialNotifications);
+
+ const handleMarkAllRead = () => {
+ setNotifications(prev => prev.map(n => ({ ...n, isNew: false })));
+ alert("All notifications marked as read!");
+ };
+
+ return (
+
+ {/* Breadcrumb */}
+
+ navigate("/")}>Home
+
+ Notification
+
+
+ {/* Header */}
+
+
+
Notifications
+
+ Keep track of your interns' progress and system updates.
+
+
+
+
+
+ {/* List Group Section */}
+
+
+ {/* Render Group TODAY */}
+
+ {notifications.filter(n => n.group === "TODAY").map((item) => (
+
+ {/* Icon Container */}
+
+ {item.type === 'new-task' && }
+ {item.type === 'achievement' && }
+
+
+ {/* Content text */}
+
+
+ {item.isNew && (
+
+ NEW
+
+ )}
+
{item.title}
+
+
+ {/* Custom description coloring logic */}
+
+ {item.type === 'new-task' ? (
+ <>Mentor Sarah Johnson has pushed a new task: User Persona Analysis
+ ) : item.type === 'achievement' ? (
+ <>Your certificate for UI Engineering Phase 1 is now available for download!
+ ) : item.description}
+
+
+ {/* Conditional Actions */}
+ {item.type === 'new-task' && (
+
+
+
+
+ )}
+
+ {item.type === 'achievement' && (
+
+ )}
+
+
+ {/* Time */}
+
+ {item.time}
+
+
+ ))}
+
+
+ {/* Header Section YESTERDAY */}
+
+
+ YESTERDAY
+
+
+ {notifications.filter(n => n.group === "YESTERDAY").map((item) => (
+
+
+
+
+
+
{item.title}
+
+ {item.description}
+
+
+
+ {item.time}
+
+
+ ))}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/SettingsPage.tsx b/src/Pages/internify/SettingsPage.tsx
new file mode 100644
index 0000000..8d9349b
--- /dev/null
+++ b/src/Pages/internify/SettingsPage.tsx
@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ChevronRight } from "lucide-react"; // dari lucide-react
+
+// Mock Data Profile awal
+const mockProfileData = {
+ fullName: "JonathanKristina",
+ email: "JonathanKristina@gmail.com",
+ bio: "UIUX holic"
+};
+
+export default function SettingsContent() {
+ const navigate = useNavigate();
+ const [formData, setFormData] = useState(mockProfileData);
+
+ const handleChange = (e: React.ChangeEvent
) => {
+ const { name, value } = e.target;
+ setFormData((prev) => ({ ...prev, [name]: value }));
+ };
+
+ const handleSaveChanges = (e: React.FormEvent) => {
+ e.preventDefault();
+ // Simulasi penyimpanan data sukses
+ alert("Changes saved successfully!");
+ console.log("Saved Data:", formData);
+ };
+
+ // Mendapatkan inisial huruf pertama untuk avatar profile gambar
+ const initialLetter = formData.fullName ? formData.fullName.charAt(0).toUpperCase() : "U";
+
+ return (
+
+ {/* Breadcrumb */}
+
+ navigate("/")}>Home
+
+ Settings
+
+
+ {/* Header Title */}
+
+
Settings
+
+ Manage and edit your profile and account information.
+
+
+
+ {/* White Card Container */}
+
+
+ {/* Card Header */}
+
+
Profile Information
+
+ Update your photo and personal details.
+
+
+
+ {/* Card Body & Form */}
+
+
+
+
+ {/* Header */}
+
Certificates
View and download internship certificates
-
-
-
-
+ {/* Content */}
+
+ {data.isReceived ? (
+
+ ) : (
+
+ )}
- )
-}
+ );
+};
+
export default SertificatePage
diff --git a/src/Pages/internify/intern/components/CertificateAvailabe.tsx b/src/Pages/internify/intern/components/CertificateAvailabe.tsx
new file mode 100644
index 0000000..040921a
--- /dev/null
+++ b/src/Pages/internify/intern/components/CertificateAvailabe.tsx
@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { Download, History , Link, Award, Printer } from "lucide-react";
+import { type CertificateData, type CertificateHistory } from "../../../../lib/mockData";
+import certificateImg from "../../../../assets/certificate.png";
+
+export default function CertificateAvailable({ data }: { data: CertificateData }) {
+ const { certificate, history } = data;
+ const [copied, setCopied] = useState(false);
+
+ const handleCopyLink = () => {
+ navigator.clipboard.writeText(window.location.href);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ };
+
+ return (
+
+ {/* LEFT: Certificate Preview + Actions */}
+
+ {/* Certificate Card */}
+
+
+
+
+ {/* Program Summary */}
+
+
+
+
Ringkasan Program
+
+
+ {[
+ { label: "Nama Program", value: certificate.programName },
+ { label: "Durasi", value: certificate.duration },
+ {
+ label: "Nilai Akhir",
+ value: (
+
+ {certificate.finalScore}/100 ({certificate.grade})
+
+ ),
+ },
+ {
+ label: "Status",
+ value: (
+
+ {certificate.status}
+
+ ),
+ },
+ ].map((row) => (
+
+ {row.label}
+ {row.value}
+
+ ))}
+
+
+
+
+
+
+ {/* Unduh Sertifikat */}
+
+
+ {/* Bagikan ke LinkedIn */}
+
+
+ {/* Cetak & Salin Link */}
+
+
+
+
+
+
+
+
+
+
+ {/* RIGHT: Certificate History */}
+
+
+
+
+
Certificate History
+
+
+
+ {history.map((item: CertificateHistory) => (
+
+
+
+
+
+
{item.month}
+
{item.title}
+
+ Grade: {item.grade}
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/CertificateNotAvailable.tsx b/src/Pages/internify/intern/components/CertificateNotAvailable.tsx
new file mode 100644
index 0000000..ee2e00e
--- /dev/null
+++ b/src/Pages/internify/intern/components/CertificateNotAvailable.tsx
@@ -0,0 +1,43 @@
+import { Lock, Clock } from "lucide-react";
+
+export default function CertificateNotAvailable({ progress, remainingTasks }: { progress: number; remainingTasks: number }) {
+ return (
+
+ {/* Icon */}
+
+
+
Sertifikat Belum Tersedia
+
+ Anda harus menyelesaikan semua tugas proyek sebelum dapat mengunduh sertifikat kelulusan.
+ Silakan periksa kembali progres tugas Anda di menu Proyek.
+
+
+ {/* Progress Bar */}
+
+
+ Progres Proyek
+ {progress}%
+
+
+
+ Selesaikan {remainingTasks} tugas lagi untuk membuka akses.
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/HomeCalendar.tsx b/src/Pages/internify/intern/components/HomeCalendar.tsx
index af11681..7ea27c5 100644
--- a/src/Pages/internify/intern/components/HomeCalendar.tsx
+++ b/src/Pages/internify/intern/components/HomeCalendar.tsx
@@ -83,7 +83,7 @@ const HomeCalendar = () => {
}
return (
-
+
{/* Header */}
diff --git a/src/Pages/internify/intern/components/HomeProjectList.tsx b/src/Pages/internify/intern/components/HomeProjectList.tsx
index 167a9e1..a094a59 100644
--- a/src/Pages/internify/intern/components/HomeProjectList.tsx
+++ b/src/Pages/internify/intern/components/HomeProjectList.tsx
@@ -1,15 +1,6 @@
-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 (
diff --git a/src/Pages/internify/intern/components/ProjectTimeline.tsx b/src/Pages/internify/intern/components/ProjectTimeline.tsx
index 3430820..e51a9ce 100644
--- a/src/Pages/internify/intern/components/ProjectTimeline.tsx
+++ b/src/Pages/internify/intern/components/ProjectTimeline.tsx
@@ -1,4 +1,5 @@
import type { Task } from "../../../../lib/mockData";
+import { ArrowDownNarrowWide } from "lucide-react";
const formatDate = (date: Date) =>
new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
@@ -9,10 +10,11 @@ export default function ProjectTimeline({ tasks }: { tasks: Task[] }) {
return (
-
+
diff --git a/src/Pages/internify/layout.tsx b/src/Pages/internify/layout.tsx
index 122cf7c..9941365 100644
--- a/src/Pages/internify/layout.tsx
+++ b/src/Pages/internify/layout.tsx
@@ -1,8 +1,8 @@
import { Outlet } from "react-router-dom";
-import Header from './Header';
+import Header from './mentor/components/Header';
import SidebarIntern from './intern/components/SidebarIntern';
import SidebarAdmin from '../../Layout/SidebarAdmin';
-import FooterIntern from './intern/components/FooterIntern';
+import FooterIntern from '../../Layout/Footer-Internify';
export const InternLayout = () => {
return (
diff --git a/src/Pages/internify/mentor/BaseProjectsPage.tsx b/src/Pages/internify/mentor/BaseProjectsPage.tsx
new file mode 100644
index 0000000..b3e2280
--- /dev/null
+++ b/src/Pages/internify/mentor/BaseProjectsPage.tsx
@@ -0,0 +1,51 @@
+import { mockProjects } from '../../../lib/mockData'
+import MentorProjectCard from './components/MentorProjectCard'
+import { Plus } from 'lucide-react'
+import { useNavigate } from 'react-router-dom' // Import useNavigate
+
+const MentorProjectsPage = () => {
+ const navigate = useNavigate()
+
+ const handleJoinProject = () => {
+ // Navigasi ke halaman tujuan, silakan ganti '/path-tujuan' sesuai rute kamu
+ navigate('/path-tujuan')
+ }
+
+ return (
+
+ {/* Breadcrumb simulasi sesuai gambar */}
+
+ Home > List Projects
+
+
+
+
List Projects
+
Create, manage, and monitor ongoing projects and assignments.
+
+
+
+ {/* Render List Project */}
+ {mockProjects.map(project => (
+
+ ))}
+
+ {/* Tombol "Join New Project" dengan Border Putus-putus */}
+
+
+
-
-
- )
-}
-
-export default HomeMentorPage
diff --git a/src/Pages/internify/mentor/HomePage.tsx b/src/Pages/internify/mentor/HomePage.tsx
new file mode 100644
index 0000000..5cb3bb9
--- /dev/null
+++ b/src/Pages/internify/mentor/HomePage.tsx
@@ -0,0 +1,24 @@
+import HomeHeader from '../intern/components/HomeHeader'
+import HomeCalendar from '../intern/components/HomeCalendar'
+import HomeMentorProject from './components/HomeMentorProject'
+
+const HomeMentorPage = () => {
+ return (
+
+ )
+}
+
+export default HomeMentorPage
diff --git a/src/Pages/internify/mentor/InternsPage.tsx b/src/Pages/internify/mentor/InternsPage.tsx
new file mode 100644
index 0000000..6791254
--- /dev/null
+++ b/src/Pages/internify/mentor/InternsPage.tsx
@@ -0,0 +1,5 @@
+export default function MentorInternPage() {
+ return(
+
+ )
+}
\ No newline at end of file
diff --git a/src/Pages/internify/mentor/MentorDetailProject.tsx b/src/Pages/internify/mentor/MentorDetailProject.tsx
deleted file mode 100644
index d19c1d0..0000000
--- a/src/Pages/internify/mentor/MentorDetailProject.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index e01ae40..0000000
--- a/src/Pages/internify/mentor/MentorInternPage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index f8f040d..0000000
--- a/src/Pages/internify/mentor/MentorProjectsPage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-const MentorProjectsPage = () => {
- return (
-
-
-
- )
-}
-
-export default MentorProjectsPage
diff --git a/src/Pages/internify/mentor/ProjectForumTab.tsx b/src/Pages/internify/mentor/ProjectForumTab.tsx
new file mode 100644
index 0000000..4806cf1
--- /dev/null
+++ b/src/Pages/internify/mentor/ProjectForumTab.tsx
@@ -0,0 +1,26 @@
+import type { Project } from '../../../lib/mockData';
+import ProjectTimeline from '../intern/components/ProjectTimeline';
+import HeroProject from '../intern/components/Hero-project';
+import MentorTaskCard from './components/MentorTaskCard';
+
+export default function MentorForumTab({ project }: { project: Project }) {
+ return (
+
+ {/* Hero banner */}
+
+
+ {/* Timeline + Task list */}
+
+
+
+
+ {project.tasks.map((task, idx) => (
+
+ ))}
+
+
+
+ {/* Mentor */}
+
+
+ Mentor
+
+
+
+
+ {project.mentor}
+
+
+
+
+
+ {/* Members */}
+
+
+ Members
+
+ {project.interns.map((intern: Intern, idx: number) => (
+
+
+
+ {intern.email}
+
+
+
+ {intern.role}
+
+
+ ))}
+
+
+ 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 (
+
+
+
+ {/* Back Button */}
+
+
+ {/* Tabs */}
+
+
+
+
+
+
+ {/* Tab content */}
+ {(() => {
+ switch (activeTab) {
+ case 'forum':
+ return
;
+ case 'participants':
+ return
;
+ case 'Task':
+ return
; // Tambahkan komponen TaskTab di sini
+ default:
+ return null;
+ }
+ })()}
+
+
+ {/* Header Section */}
+
+
Tasks
+
+
+
+
+
+
+ {/* Task List Section */}
+
+ {project.tasks && project.tasks.length > 0 ? (
+ project.tasks.map((task: Task, idx: number) => (
+
+ {/* Task Title & Icon */}
+
+
+
+ {task.title}
+
+
+
+ {/* Action Buttons (Edit & Delete) */}
+
+
+
+
+
+ ))
+ ) : (
+
+ Belum ada tugas yang dibuat untuk proyek ini.
+
+ )}
+
+
+
+
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"
+ >
+
+
+
+
+ )
+ })}
+
+
+ {/* Thumbnail */}
+
+ {thumbnailUrl && (
+
+ )}
+
+
+ {/* Content*/}
+
+
+
+ {/* Interns Count */}
+
+
+
+ {interns.length}/{interns.length}
+
+
+
+
+ {/* Footer */}
+
+
+
+
+
+
+ Deadline : {formatDate(task.deadline.date)} at {task.deadline.time}
+
+
+ {task.title}
+
+
+ {task.description}
+
+
+
+
+
+ {task.submittedCount}/{task.totalInterns}
+
+
+
+
+
+ {/* Main Container */}
+
+ {/* Logo Section */}
+
+
+
+
+
+ HUMIC LMS PORTAL
+
+
+
+ {/* Card Login */}
+
+
Welcome back
+
Access your dashboard with your credentials.
+
+
+
+ {/* Forgot Password */}
+
+
+ {/* Divider & Support */}
+
+
+
+
+
+
+
+
+ {/* Footer Section */}
+
+
© 2024 Internify. CoE Humic Engineering.
+
+
+