sulthan/internify-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add breadcrumbs component and integrate with layout; update dependencies and refactor various pages

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-11 19:50:16 +07:00
parent eceb325836
commit b7489e3be7
27 changed files with 184 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+12 -1
View File
@@ -21,7 +21,8 @@
"react-icons": "^5.5.0",
"react-router-dom": "^7.6.0",
"recharts": "^3.4.1",
"tailwindcss": "^4.1.6"
"tailwindcss": "^4.1.6",
"use-react-router-breadcrumbs": "^4.0.1"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
@@ -5160,6 +5161,16 @@
"punycode": "^2.1.0"
}
},
"node_modules/use-react-router-breadcrumbs": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/use-react-router-breadcrumbs/-/use-react-router-breadcrumbs-4.0.1.tgz",
"integrity": "sha512-Zbcy0KvWt1JePFcUHJAnTr7Z+AeO9WxmPs6A5Q/xqOVoi8edPKzpqHF87WB2opXwie/QjCxrEyTB7kFg7fgXvQ==",
"license": "MIT",
"peerDependencies": {
"react": ">=16.8",
"react-router-dom": ">=6.0.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
package.json
+2 -1
View File
@@ -23,7 +23,8 @@
"react-icons": "^5.5.0",
"react-router-dom": "^7.6.0",
"recharts": "^3.4.1",
"tailwindcss": "^4.1.6"
"tailwindcss": "^4.1.6",
"use-react-router-breadcrumbs": "^4.0.1"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
src/Pages/internify/Breadcumbs.tsx
+59
View File
@@ -0,0 +1,59 @@
import { Link, useLocation } from "react-router-dom";
import useBreadcrumbs from "use-react-router-breadcrumbs";
import { ChevronRight } from "lucide-react";
const breadcrumbRoutes = [
// --- AREA INTERN ---
{ path: '/intern', breadcrumb: 'Home' },
{ path: '/intern/projects', breadcrumb: 'Projects' },
{ path: '/intern/projects/:id', breadcrumb: 'Detail Project' }, // Otomatis handle ID dinamis
{ path: '/intern/certificates', breadcrumb: 'Certificates' },
{ path: '/intern/tasks', breadcrumb: 'Tasks' },
{ path: '/intern/tasks/:id', breadcrumb: 'Detail Task' },
{ path: '/intern/tasks/:id/submit', breadcrumb: 'Submit Task' },
{ path: '/intern/faq', breadcrumb: 'FAQ' },
{ path: '/intern/notifications', breadcrumb: 'Notifications' },
{ path: '/intern/settings', breadcrumb: 'Settings' },
// --- AREA MENTOR / ADMIN ---
{ path: '/mentor', breadcrumb: 'Home' },
{ path: '/mentor/projects', breadcrumb: 'Managed Projects' },
{ path: '/mentor/projects/:id', breadcrumb: 'Project Overview' },
{ path: '/mentor/certificates', breadcrumb: 'Approve Certificates' },
{ path: '/mentor/intern', breadcrumb: 'List Intern' },
{ path: '/mentor/faq', breadcrumb: 'FAQ' },
{ path: '/mentor/notifications', breadcrumb: 'Notifications' },
{ path: '/mentor/settings', breadcrumb: 'Settings' },
];
export default function Breadcrumbs(){
const breadcrumbs = useBreadcrumbs(breadcrumbRoutes);
const location = useLocation();
const fixbreadcumbs = breadcrumbs.filter(({match}) => match.pathname !== '/');
return (
<nav className="text-[12px] mb-3">
{fixbreadcumbs.map(({ match, breadcrumb }) => {
const isLast = match.pathname === location.pathname;
return (
<span key={match.pathname} className="inline-flex items-center">
{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"/>
</>
)}
</span>
);
})}
</nav>
);
};
src/Pages/internify/FAQpage.tsx
+2 -2
View File
@@ -18,9 +18,9 @@ const mockFAQData = [
export default function FAQPage() {
return (
<div className="container">
<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.
src/Pages/internify/NotificationList.tsx
+3 -3
View File
@@ -41,7 +41,7 @@ export default function NotificationList() {
};
return (
<div className="container">
<div className="">
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
<div>
@@ -50,13 +50,13 @@ export default function NotificationList() {
Keep track of your interns' progress and system updates.
</p>
</div>
<button
{/* <button
onClick={handleMarkAllRead}
className="flex items-center gap-1.5 self-start sm:self-center px-4 py-2 border border-gray-200 rounded-lg text-xs font-semibold text-gray-700 bg-white hover:bg-gray-50 transition-colors shadow-sm"
>
<Check className="w-4 h-4 text-green-600 stroke-[3]" />
Mark all as read
</button>
</button> */}
</div>
{/* List Group Section */}
src/Pages/internify/SettingsPage.tsx
+2 -2
View File
@@ -23,10 +23,10 @@ export default function SettingsContent() {
};
// Mendapatkan inisial huruf pertama untuk avatar profile gambar
const initialLetter = formData.fullName ? formData.fullName.charAt(0).toUpperCase() : "U";
const initialLetter = formData.fullName ? formData.fullName.charAt(1).toUpperCase() : "U";
return (
<div className="container">
<div className="">
{/* Header Title */}
<div className="mb-6">
src/Pages/internify/intern/HomeInternPage.tsx
+1 -2
View File
@@ -3,10 +3,9 @@ import HomeProjectList from "./components/HomeProjectList";
import HomeCalendar from "./components/HomeCalendar";
import TaskTimeline from "./components/TaskTimeline";
// PR: tambahin breadcrumb
export default function HomeInternPage() {
return (
<div className="container flex-1">
<div className="flex-1">
<HomeHeader />
<div className="flex flex-col gap-5">
<div className="grid grid-cols-2 gap-5">
src/Pages/internify/intern/ProjectDetailPage.tsx
+1 -13
View File
@@ -36,20 +36,8 @@ export default function ProjectDetailPage() {
}`;
return (
<div className="container">
<div className="">
<div>
{/* Back Button */}
<button
onClick={handleBack}
className="flex items-center gap-2 mb-6 text-sm font-medium text-[#666] hover:text-[#C0392B] transition-colors duration-150 group"
>
<span className='flex flex-row gap-2'>
<ChevronLeft width={20} height={20} className="transition-transform duration-150 group-hover:-translate-x-1" />
Kembali ke Daftar Project
</span>
</button>
{/* Tabs */}
<div className="flex mb-4">
<button className={tabClass('forum')} onClick={() => setActiveTab('forum')}>
src/Pages/internify/intern/ProjectsPage.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { mockProjects } from '../../../lib/mockData'
export default function ProjectsPage() {
return (
<div className="container">
<div className="">
<div className="flex flex-col gap-1 mb-6">
<span className="page-title">List Projects</span>
<h1 className="page-title-desc">View assigned projects and track their progress.</h1>
src/Pages/internify/intern/SertificatePage.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ const SertificatePage = () => {
const data = certificateData; // ganti isReceived di object atas
return (
<div className="container">
<div className="">
{/* Header */}
<div className="mb-12 flex flex-col gap-1">
src/Pages/internify/intern/TaskSubmission.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export default function TaskSubmission() {
};
return (
<div className="container space-y-4">
<div className="space-y-4">
{/* Header Card */}
<div className="w-full bg-white rounded-2xl border border-gray-100 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
<div className="flex justify-between items-start">
src/Pages/internify/intern/components/CertificateNotAvailable.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { Lock, Clock } from "lucide-react";
export default function CertificateNotAvailable({ progress, remainingTasks }: { progress: number; remainingTasks: number }) {
return (
<div className="bg-white w-full rounded-2xl border border-gray-100 shadow-sm py-16 p-23 flex flex-col items-center text-center max-w-3/5 mx-auto z-10">
<div className="bg-white w-full rounded-2xl border border-gray-100 shadow-sm py-16 p-23 flex flex-col items-center text-center md:max-w-3/5 mx-auto z-10">
{/* Icon */}
<div className="relative mb-6">
<div className=" w-33 h-33 border-2 border-dashed border-gray-600 rounded-xl flex justify-center items-center">
src/Pages/internify/intern/components/HomeCalendar.tsx
+18 -10
View File
@@ -1,4 +1,4 @@
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
interface Deadline {
@@ -9,8 +9,7 @@ interface Deadline {
}
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' },
{ date: 30, month: 6, year: 2026, label: 'Tenggat Proyek Internify Internify - 4 May' },
]
const DAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
@@ -20,7 +19,7 @@ const MONTH_NAMES = [
]
function getDaysInMonth(year: number, month: number) {
return new Date(year, month + 1, 0).getDate()
return new Date(year, month+1, 0).getDate()
}
function getFirstDayOfMonth(year: number, month: number) {
@@ -28,9 +27,18 @@ function getFirstDayOfMonth(year: number, month: number) {
}
const HomeCalendar = () => {
const today = new Date()
const [currentYear, setCurrentYear] = useState(2025)
const [currentMonth, setCurrentMonth] = useState(4) // May = 4 (0-indexed)
const [today, setToday] = useState(new Date())
useEffect(() => {
const interval = setInterval(() => {
setToday(new Date())
}, 60 * 1000) // update tiap 1 menit
return () => clearInterval(interval)
}, [])
const [currentYear, setCurrentYear] = useState(today.getFullYear())
const [currentMonth, setCurrentMonth] = useState(today.getMonth())
const daysInMonth = getDaysInMonth(currentYear, currentMonth)
const firstDay = getFirstDayOfMonth(currentYear, currentMonth)
@@ -59,7 +67,7 @@ const HomeCalendar = () => {
currentYear === today.getFullYear()
const hasDeadline = (day: number) =>
DEADLINES.some(d => d.date === day && d.month === currentMonth && d.year === currentYear)
DEADLINES.some(d => d.date === day && d.month - 1 === currentMonth && d.year === currentYear)
const upcomingDeadlines = DEADLINES.filter(
d => d.month === currentMonth && d.year === currentYear
@@ -129,7 +137,7 @@ const HomeCalendar = () => {
{currentDays.map(day => (
<div key={day} className="flex justify-center items-center py-1 px-4">
{isToday(day) ? (
<span className="w-8 h-7 flex items-center justify-center rounded bg-red-800 text-white text-xs font-semibold">
<span className="w-8 h-7 flex items-center justify-center border-b-2 border-red-800 text-xs font-semibold">
{day}
</span>
) : (
@@ -171,7 +179,7 @@ const HomeCalendar = () => {
))}
</ul>
) : (
<p className="text-sm text-gray-400">No upcoming deadlines this month.</p>
<p className="text-[11px] text-gray-400">No upcoming deadlines this month.</p>
)}
</div>
</div>
src/Pages/internify/intern/components/TaskTimeline.tsx
+11 -32
View File
@@ -1,39 +1,17 @@
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',
},
]
import type { TaskTimelineProps } from "../../../../lib/mockDeadline"
import { defaultTasks } from "../../../../lib/mockDeadline"
const TaskTimeline = ({ tasks = defaultTasks }: TaskTimelineProps) => {
const today = new Date()
const today = new Date()
const isOverdue = (tanggal: string) => {
const deadline = new Date(tanggal)
return deadline < today
}
const upcomingIndex = tasks.findIndex(
task => new Date(task.tanggal) >= today
)
return (
<div>
<h2 className="text-base font-semibold text-gray-800 mb-5">Task Timeline</h2>
@@ -45,6 +23,7 @@ const TaskTimeline = ({ tasks = defaultTasks }: TaskTimelineProps) => {
<ul className="flex flex-col gap-5">
{tasks.map((task, index) => {
const overdue = isOverdue(task.tanggal)
const isRedDot = overdue || index === upcomingIndex
return (
<li key={index} className="flex gap-4 pl-0">
@@ -52,9 +31,9 @@ const TaskTimeline = ({ tasks = defaultTasks }: TaskTimelineProps) => {
<div className="relative flex-shrink-0 mt-1">
<span
className={`block w-3 h-3 rounded-full border-2 z-10 relative
${overdue
? 'bg-red-500 border-red-500'
: 'bg-white border-gray-300'
${isRedDot
? 'bg-red-800 '
: 'bg-gray-400'
}`}
/>
</div>
src/Pages/internify/layout.tsx
+5 -2
View File
@@ -4,6 +4,7 @@ import Header from './mentor/components/Header';
import SidebarIntern from './intern/components/SidebarIntern';
import SidebarMentor from './mentor/components/SidebarMentor';
import FooterIntern from '../../Layout/Footer-Internify';
import Breadcrumbs from "./Breadcumbs";
export const InternLayout = () => {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@@ -20,7 +21,8 @@ export const InternLayout = () => {
onClick={closeSidebar}
/>
)}
<main className="flex-1 flex flex-col">
<main className="container">
<Breadcrumbs/>
<Outlet />
</main>
</div>
@@ -44,7 +46,8 @@ export const MentorLayout = () => {
onClick={closeSidebar}
/>
)}
<main className="flex-1 flex flex-col min-w-0">
<main className="container">
<Breadcrumbs/>
<Outlet />
</main>
</div>
src/Pages/internify/mentor/BaseProjectsPage.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export default function MentorProjectsPage(){
};
return (
<div className="container">
<div className="">
<div className="flex justify-between items-center mb-6">
<div className="flex flex-col">
<h1 className="page-title">List Projects</h1>
src/Pages/internify/mentor/CertificatePage.tsx
+2 -5
View File
@@ -48,12 +48,9 @@ const MentorCertificatePage = () => {
};
return (
<div className="px-6 md:px-14 py-8 md:py-12 bg-gray-50 min-h-screen">
{/* Breadcrumb & Header Title */}
<div>
{/* Title */}
<div className="mb-8">
<p className="text-xs font-semibold text-[#B30000] mb-1 flex items-center gap-1 cursor-pointer">
Certificates <span className="text-gray-400 font-normal">&gt;</span>
</p>
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 tracking-tight">Certificates</h1>
<p className="text-sm md:text-base text-gray-500 mt-1">
Administrate, issue, and track professional certifications for all interns.
src/Pages/internify/mentor/HomePage.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import HomeMentorProject from './components/HomeMentorProject'
const HomeMentorPage = () => {
return (
<div className="container flex-1 bg-gray-50">
<div className="flex-1">
<HomeHeader />
<div className="flex flex-col gap-5">
<div className="">
src/Pages/internify/mentor/InternsPage.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export default function InternsManagement() {
}, [searchEmail, selectedProject]);
return (
<div className="w-full px-16 py-12 font-sans">
<div className="">
{/* Header Title */}
<div className="mb-6">
<h1 className="page-title">Interns Management</h1>
src/Pages/internify/mentor/components/CreateProjectDialog.tsx
+1 -1
View File
@@ -141,7 +141,7 @@ export default function CreateProjectModal({ isOpen, onClose }: CreateProjectMod
key={item.id}
type="button"
onClick={() => setSelectedIcon(item.id)}
className={`w-10 h-10 flex items-center justify-center rounded-lg border text-lg transition-all ${isSelected
className={`w-8 h-8 flex items-center justify-center rounded-lg border text-lg transition-all ${isSelected
? "border-[#B30000] bg-red-50/50 text-[#B30000] ring-2 ring-[#B30000]/20 font-bold"
: "border-gray-200 bg-gray-50 text-gray-500 hover:bg-gray-100"
}`}
src/Pages/internify/page.tsx
+5 -12
View File
@@ -6,8 +6,8 @@ import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
// Data user dummy untuk keperluan simulasi navigasi frontend
const DataUsers = [
{ "Name": "John Doe", "Email": "john@email.com", "Password": "password123", "role": "intern" },
{ "Name": "Jane Smith", "Email": "jane@email.com", "Password": "password123", "role": "mentor" },
{ "Email": "intern@email.com", "Password": "password123", "role": "intern" },
{ "Email": "mentor@email.com", "Password": "password123", "role": "mentor" },
];
export default function InternifyLogin() {
@@ -44,12 +44,10 @@ export default function InternifyLogin() {
};
return (
<div className="min-h-screen bg-[#F9F9F9] flex flex-col justify-between items-center py-8 px-4 font-sans selection:bg-red-200">
<div className="min-h-screen bg-gray-100 flex flex-col justify-between items-center py-8 px-4 font-sans selection:bg-red-200">
<div className="hidden md:block"></div>
{/* Main Container */}
<div className="w-full max-w-[440px] flex flex-col items-center">
{/* Logo Section */}
<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" />
@@ -59,7 +57,6 @@ export default function InternifyLogin() {
</p>
</div>
{/* Card Login */}
<div className="max-w-md bg-white rounded-2xl border border-gray-100 p-8 md:p-12">
<h2 className="text-xl font-bold text-gray-900 mb-1">Welcome back</h2>
<p className="text-sm text-gray-500 mb-6">Access your dashboard with your credentials.</p>
@@ -82,7 +79,6 @@ export default function InternifyLogin() {
</div>
</div>
{/* Input Password */}
<div className="space-y-1.5">
<label className="text-xs font-medium text-gray-700">Password</label>
<div className="relative">
@@ -110,14 +106,12 @@ export default function InternifyLogin() {
</div>
</div>
{/* Error Message */}
{error && (
<p className="text-xs text-red-600 bg-red-50 p-2 rounded-md font-medium">
{error}
</p>
)}
{/* Button Sign In */}
<button
type="submit"
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"
@@ -153,12 +147,11 @@ export default function InternifyLogin() {
</div>
</div>
{/* Footer Section */}
<div className="text-center text-[11px] text-gray-400 space-y-1">
<p>© 2024 Internify. CoE Humic Engineering.</p>
<p>© 2026 Internify. CoE Humic Engineering.</p>
<div className="space-x-2">
<a href="#" className="hover:underline">Privacy Policy</a>
<span>•</span>
<span></span>
<a href="#" className="hover:underline">Terms of Service</a>
</div>
</div>
src/Pages/utils/InternRoute.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
// App.tsx / router.tsx
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomeInternPage from "../internify/intern/HomeInternPage";
import InternLayout from "../internify/layout";
import {InternLayout} from "../internify/mentor/layout";
const router = createBrowserRouter([
{
src/Pages/utils/MentorRoute.tsx
+18
View File
@@ -0,0 +1,18 @@
// App.tsx / router.tsx
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomeMentorPage from "../internify/mentor/HomePage";
import {MentorLayout} from "../internify/mentor/layout";
const router = createBrowserRouter([
{
path: "/",
element: <MentorLayout />,
children: [
{ path: "home", element: <HomeMentorPage /> },
],
},
]);
export default function App() {
return <RouterProvider router={router} />;
}
src/index.css
+7 -13
View File
@@ -35,19 +35,14 @@
padding-inline: calc(var(--spacing) * 14);
padding-block: calc(var(--spacing) * 12);
background-color: var(--color-gray-50);
display: flex;
flex-direction: column;
gap: 13px;
min-height: 100vh;
}
.sidebar {
}
.footer {
}
.box {
background-color: #ffffff;
background-color: #F9F9F9;
border-radius: 12px;
padding: 10px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
@@ -59,12 +54,12 @@
line-height: var(--tw-leading, var(--text-3xl--line-height) /* calc(2.25 / 1.875) ≈ 1.2 */);
font-weight: bold;
color: var(--color-gray-900);
--tw-tracking: var(--tracking-tight) /* -0.025em */;
letter-spacing: var(--tracking-tight) /* -0.025em */;
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
}
.page-title-desc {
font-size: var(--text-sm) /* 0.875rem = 14px */;
font-size: var(--text-sm);
color: var(--color-gray-500);
margin-top: calc(var(--spacing) * 1)
}
@@ -115,7 +110,6 @@ dialog.custom-dialog::backdrop {
align-items: flex-start;
justify-content: space-between;
/* Padding default untuk layar kecil (px-6 py-4) */
padding-left: 1.5rem; /* 24px */
padding-right: 1.5rem; /* 24px */
padding-top: 1rem; /* 16px */
src/lib/mockDeadline.ts
+27
View File
@@ -0,0 +1,27 @@
interface Task {
tanggal: string
title: string
description: string
}
export interface TaskTimelineProps {
tasks?: Task[]
}
export const defaultTasks: Task[] = [
{
tanggal: '2026-05-14T23:59:00',
title: 'Laporan tugas 1',
description: 'Berisi design uiux, dan user flow dari aplikasi internify',
},
{
tanggal: '2026-05-15T23:59:00',
title: 'Laporan tugas 1',
description: 'Berisi design uiux, dan user flow dari aplikasi internify',
},
{
tanggal: '2026-06-20T21:00:00',
title: 'Laporan tugas 1',
description: 'Berisi design uiux, dan user flow dari aplikasi internify',
},
]
src/lib/mockProjects.ts
View File
src/lib/mockTask.ts
View File