From b7489e3be741912840a2d846e107719dc19bc171 Mon Sep 17 00:00:00 2001 From: "Kemas M. Aryadary Rasyad" <112590882+aryadary0706@users.noreply.github.com> Date: Thu, 11 Jun 2026 19:50:16 +0700 Subject: [PATCH] feat: add breadcrumbs component and integrate with layout; update dependencies and refactor various pages --- package-lock.json | 13 +++- package.json | 3 +- src/Pages/internify/Breadcumbs.tsx | 59 +++++++++++++++++++ src/Pages/internify/FAQpage.tsx | 4 +- src/Pages/internify/NotificationList.tsx | 6 +- src/Pages/internify/SettingsPage.tsx | 4 +- src/Pages/internify/intern/HomeInternPage.tsx | 3 +- .../internify/intern/ProjectDetailPage.tsx | 14 +---- src/Pages/internify/intern/ProjectsPage.tsx | 2 +- .../internify/intern/SertificatePage.tsx | 2 +- src/Pages/internify/intern/TaskSubmission.tsx | 2 +- .../components/CertificateNotAvailable.tsx | 2 +- .../intern/components/HomeCalendar.tsx | 28 +++++---- .../intern/components/TaskTimeline.tsx | 43 ++++---------- src/Pages/internify/layout.tsx | 7 ++- .../internify/mentor/BaseProjectsPage.tsx | 2 +- .../internify/mentor/CertificatePage.tsx | 7 +-- src/Pages/internify/mentor/HomePage.tsx | 2 +- src/Pages/internify/mentor/InternsPage.tsx | 2 +- .../mentor/components/CreateProjectDialog.tsx | 2 +- src/Pages/internify/page.tsx | 17 ++---- src/Pages/utils/InternRoute.tsx | 2 +- src/Pages/utils/MentorRoute.tsx | 18 ++++++ src/index.css | 20 +++---- src/lib/mockDeadline.ts | 27 +++++++++ src/lib/mockProjects.ts | 0 src/lib/mockTask.ts | 0 27 files changed, 184 insertions(+), 107 deletions(-) create mode 100644 src/Pages/internify/Breadcumbs.tsx create mode 100644 src/Pages/utils/MentorRoute.tsx create mode 100644 src/lib/mockDeadline.ts create mode 100644 src/lib/mockProjects.ts create mode 100644 src/lib/mockTask.ts diff --git a/package-lock.json b/package-lock.json index 67b3c09..fd6c0a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 1bd76d5..64df5b4 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/Pages/internify/Breadcumbs.tsx b/src/Pages/internify/Breadcumbs.tsx new file mode 100644 index 0000000..a3ef985 --- /dev/null +++ b/src/Pages/internify/Breadcumbs.tsx @@ -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 ( + + ); +}; \ No newline at end of file diff --git a/src/Pages/internify/FAQpage.tsx b/src/Pages/internify/FAQpage.tsx index 0f72775..f50bd88 100644 --- a/src/Pages/internify/FAQpage.tsx +++ b/src/Pages/internify/FAQpage.tsx @@ -18,9 +18,9 @@ const mockFAQData = [ export default function FAQPage() { return ( -
+
{/* Header Title */} -
+

FAQ

Quick answers to common questions about the Internify LMS platform. diff --git a/src/Pages/internify/NotificationList.tsx b/src/Pages/internify/NotificationList.tsx index e3f9c78..c27067b 100644 --- a/src/Pages/internify/NotificationList.tsx +++ b/src/Pages/internify/NotificationList.tsx @@ -41,7 +41,7 @@ export default function NotificationList() { }; return ( -

+
{/* Header */}
@@ -50,13 +50,13 @@ export default function NotificationList() { Keep track of your interns' progress and system updates.

- + */}
{/* List Group Section */} diff --git a/src/Pages/internify/SettingsPage.tsx b/src/Pages/internify/SettingsPage.tsx index a710db1..1eab2a1 100644 --- a/src/Pages/internify/SettingsPage.tsx +++ b/src/Pages/internify/SettingsPage.tsx @@ -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 ( -
+
{/* Header Title */}
diff --git a/src/Pages/internify/intern/HomeInternPage.tsx b/src/Pages/internify/intern/HomeInternPage.tsx index 88e8c29..082f9ca 100644 --- a/src/Pages/internify/intern/HomeInternPage.tsx +++ b/src/Pages/internify/intern/HomeInternPage.tsx @@ -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 ( -
+
diff --git a/src/Pages/internify/intern/ProjectDetailPage.tsx b/src/Pages/internify/intern/ProjectDetailPage.tsx index 0d5ce1e..4f208b1 100644 --- a/src/Pages/internify/intern/ProjectDetailPage.tsx +++ b/src/Pages/internify/intern/ProjectDetailPage.tsx @@ -36,20 +36,8 @@ export default function ProjectDetailPage() { }`; return ( -
+
- - {/* Back Button */} - - {/* Tabs */}
- {/* Footer Section */}
-

© 2024 Internify. CoE Humic Engineering.

+

© 2026 Internify. CoE Humic Engineering.

diff --git a/src/Pages/utils/InternRoute.tsx b/src/Pages/utils/InternRoute.tsx index bde4c6d..516c20c 100644 --- a/src/Pages/utils/InternRoute.tsx +++ b/src/Pages/utils/InternRoute.tsx @@ -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([ { diff --git a/src/Pages/utils/MentorRoute.tsx b/src/Pages/utils/MentorRoute.tsx new file mode 100644 index 0000000..e23e6c1 --- /dev/null +++ b/src/Pages/utils/MentorRoute.tsx @@ -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: , + children: [ + { path: "home", element: }, + ], + }, +]); + +export default function App() { + return ; +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index f3a5edb..eccbf71 100644 --- a/src/index.css +++ b/src/index.css @@ -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 */ diff --git a/src/lib/mockDeadline.ts b/src/lib/mockDeadline.ts new file mode 100644 index 0000000..9b4dc02 --- /dev/null +++ b/src/lib/mockDeadline.ts @@ -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', + }, +] \ No newline at end of file diff --git a/src/lib/mockProjects.ts b/src/lib/mockProjects.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/mockTask.ts b/src/lib/mockTask.ts new file mode 100644 index 0000000..e69de29