-
-
- Dimentorin
-
-
- {navItems.map((item) => (
-
-
- {item.label}
-
- ))}
-
-
-
-
- {session?.user?.fullname || session?.user?.email}
-
-
-
+
+ {/* Sidebar Navigation */}
+
+
+ {/* Main Content Area */}
+
+
+
+
+
+
+
)
}
diff --git a/apps/dimentorin/src/routes/_authenticated/dashboard/_data/mock/dashboard-mock.spec.ts b/apps/dimentorin/src/routes/_authenticated/dashboard/_data/mock/dashboard-mock.spec.ts
new file mode 100644
index 0000000..502b6dd
--- /dev/null
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard/_data/mock/dashboard-mock.spec.ts
@@ -0,0 +1,284 @@
+import { describe, it, expect } from 'vitest';
+import {
+ getUserMockDashboardData,
+ getMentorMockDashboardData,
+ mockUserDashboardData,
+ mockMentorDashboardData,
+} from './dashboard-mock';
+import { resolvePersona, parseSearchParams } from '../persona-resolver';
+import type { TUserItem } from '@imphnen-frontend-service/service';
+
+describe('Dashboard Mock Data', () => {
+ describe('getUserMockDashboardData', () => {
+ it('should return user dashboard data with correct structure', () => {
+ const data = getUserMockDashboardData();
+
+ expect(data).toHaveProperty('mentoringSessions');
+ expect(data).toHaveProperty('articleSubmitted');
+ expect(data).toHaveProperty('articlePublished');
+ expect(data).toHaveProperty('roadmap');
+ expect(data).toHaveProperty('articles');
+ });
+
+ it('should include numeric metrics', () => {
+ const data = getUserMockDashboardData();
+
+ expect(typeof data.mentoringSessions).toBe('number');
+ expect(typeof data.articleSubmitted).toBe('number');
+ expect(typeof data.articlePublished).toBe('number');
+ });
+
+ it('should include roadmap items with required fields', () => {
+ const data = getUserMockDashboardData();
+
+ expect(data.roadmap.length).toBeGreaterThan(0);
+ data.roadmap.forEach((item) => {
+ expect(item).toHaveProperty('id');
+ expect(item).toHaveProperty('name');
+ expect(item).toHaveProperty('completionPercentage');
+ expect(item).toHaveProperty('durationDays');
+ expect(typeof item.completionPercentage).toBe('number');
+ });
+ });
+
+ it('should include articles with required fields', () => {
+ const data = getUserMockDashboardData();
+
+ expect(data.articles.length).toBeGreaterThan(0);
+ data.articles.forEach((article) => {
+ expect(article).toHaveProperty('id');
+ expect(article).toHaveProperty('no');
+ expect(article).toHaveProperty('judul');
+ expect(article).toHaveProperty('materi');
+ expect(article).toHaveProperty('status');
+ expect(article).toHaveProperty('submitDate');
+ });
+ });
+
+ it('should have sample row matching spec', () => {
+ const data = getUserMockDashboardData();
+ const firstArticle = data.articles[0];
+
+ expect(firstArticle.judul).toContain('How to install linux dist');
+ expect(firstArticle.materi).toBe('Day 1');
+ });
+ });
+
+ describe('getMentorMockDashboardData', () => {
+ it('should return mentor dashboard data with correct structure', () => {
+ const data = getMentorMockDashboardData();
+
+ expect(data).toHaveProperty('rating');
+ expect(data).toHaveProperty('sessionComplete');
+ expect(data).toHaveProperty('menteeImpacted');
+ expect(data).toHaveProperty('totalFeedback');
+ expect(data).toHaveProperty('topics');
+ expect(data).toHaveProperty('mentoringSetup');
+ expect(data).toHaveProperty('payments');
+ });
+
+ it('should include numeric metrics in valid ranges', () => {
+ const data = getMentorMockDashboardData();
+
+ expect(data.rating).toBeGreaterThanOrEqual(0);
+ expect(data.rating).toBeLessThanOrEqual(5);
+ expect(data.sessionComplete).toBeGreaterThanOrEqual(0);
+ expect(data.menteeImpacted).toBeGreaterThanOrEqual(0);
+ expect(data.totalFeedback).toBeGreaterThanOrEqual(0);
+ });
+
+ it('should include topic chips', () => {
+ const data = getMentorMockDashboardData();
+
+ expect(data.topics.length).toBeGreaterThan(0);
+ data.topics.forEach((topic) => {
+ expect(topic).toHaveProperty('id');
+ expect(topic).toHaveProperty('label');
+ expect(typeof topic.label).toBe('string');
+ });
+ });
+
+ it('should include mentoring setup config', () => {
+ const data = getMentorMockDashboardData();
+ const setup = data.mentoringSetup;
+
+ expect(setup).toHaveProperty('sessionRate');
+ expect(setup).toHaveProperty('availability');
+ expect(setup).toHaveProperty('expertise');
+ expect(setup).toHaveProperty('experienceLevel');
+ expect(setup).toHaveProperty('status');
+ expect(['Incomplete', 'Complete']).toContain(setup.status);
+ });
+
+ it('should include payments with required fields', () => {
+ const data = getMentorMockDashboardData();
+
+ expect(data.payments.length).toBeGreaterThan(0);
+ data.payments.forEach((payment) => {
+ expect(payment).toHaveProperty('id');
+ expect(payment).toHaveProperty('no');
+ expect(payment).toHaveProperty('tanggalMentoring');
+ expect(payment).toHaveProperty('sesi');
+ expect(payment).toHaveProperty('namaMentee');
+ expect(payment).toHaveProperty('jumlah');
+ });
+ });
+
+ it('should have sample payment row matching spec', () => {
+ const data = getMentorMockDashboardData();
+ const firstPayment = data.payments[0];
+
+ expect(firstPayment.no).toBe(1);
+ expect(firstPayment.tanggalMentoring).toBe('28-01-2025');
+ expect(firstPayment.sesi).toBe('Senin, 19:00 - 19:45');
+ expect(firstPayment.namaMentee).toBe('Firdaus Wijaya');
+ expect(firstPayment.jumlah).toBe('Rp.100.000');
+ });
+
+ it('should sort payments by date descending (newest first)', () => {
+ const data = getMentorMockDashboardData();
+
+ for (let i = 0; i < data.payments.length - 1; i++) {
+ const current = new Date(data.payments[i].tanggalMentoring.split('-').reverse().join('-'));
+ const next = new Date(data.payments[i + 1].tanggalMentoring.split('-').reverse().join('-'));
+ expect(current.getTime()).toBeGreaterThanOrEqual(next.getTime());
+ }
+ });
+ });
+
+ describe('Mock data completeness', () => {
+ it('user dashboard should have consistent data', () => {
+ const data = mockUserDashboardData;
+ expect(data.articles.length).toBeGreaterThan(0);
+ expect(data.roadmap.length).toBeGreaterThan(0);
+ });
+
+ it('mentor dashboard should have consistent data', () => {
+ const data = mockMentorDashboardData;
+ expect(data.payments.length).toBeGreaterThan(0);
+ expect(data.topics.length).toBeGreaterThan(0);
+ });
+ });
+});
+
+describe('Persona Resolver', () => {
+ describe('resolvePersona', () => {
+ it('should respect query parameter override to mentor', () => {
+ const user: TUserItem = {
+ id: '1',
+ email: 'user@example.com',
+ fullname: 'Test User',
+ is_active: true,
+ role: { id: 'role-1', name: 'user', permissions: [] },
+ };
+ const searchParams = new URLSearchParams('persona=mentor');
+
+ const persona = resolvePersona(user, searchParams);
+ expect(persona).toBe('mentor');
+ });
+
+ it('should respect query parameter override to user', () => {
+ const user: TUserItem = {
+ id: '1',
+ email: 'mentor@example.com',
+ fullname: 'Test Mentor',
+ is_active: true,
+ role: { id: 'role-2', name: 'mentor', permissions: [] },
+ };
+ const searchParams = new URLSearchParams('persona=user');
+
+ const persona = resolvePersona(user, searchParams);
+ expect(persona).toBe('user');
+ });
+
+ it('should derive mentor from role name', () => {
+ const user: TUserItem = {
+ id: '1',
+ email: 'mentor@example.com',
+ fullname: 'Test Mentor',
+ is_active: true,
+ role: { id: 'role-2', name: 'mentor', permissions: [] },
+ };
+
+ const persona = resolvePersona(user);
+ expect(persona).toBe('mentor');
+ });
+
+ it('should handle case-insensitive role name', () => {
+ const user: TUserItem = {
+ id: '1',
+ email: 'mentor@example.com',
+ fullname: 'Test Mentor',
+ is_active: true,
+ role: { id: 'role-2', name: 'MENTOR', permissions: [] },
+ };
+
+ const persona = resolvePersona(user);
+ expect(persona).toBe('mentor');
+ });
+
+ it('should return user for non-mentor role', () => {
+ const user: TUserItem = {
+ id: '1',
+ email: 'user@example.com',
+ fullname: 'Test User',
+ is_active: true,
+ role: { id: 'role-1', name: 'user', permissions: [] },
+ };
+
+ const persona = resolvePersona(user);
+ expect(persona).toBe('user');
+ });
+
+ it('should default to user when user is undefined', () => {
+ const persona = resolvePersona(undefined);
+ expect(persona).toBe('user');
+ });
+
+ it('should ignore invalid query parameters', () => {
+ const user: TUserItem = {
+ id: '1',
+ email: 'user@example.com',
+ fullname: 'Test User',
+ is_active: true,
+ role: { id: 'role-1', name: 'user', permissions: [] },
+ };
+ const searchParams = new URLSearchParams('persona=invalid');
+
+ const persona = resolvePersona(user, searchParams);
+ expect(persona).toBe('user');
+ });
+
+ it('should ignore missing query parameter', () => {
+ const user: TUserItem = {
+ id: '1',
+ email: 'user@example.com',
+ fullname: 'Test User',
+ is_active: true,
+ role: { id: 'role-1', name: 'user', permissions: [] },
+ };
+ const searchParams = new URLSearchParams('other=value');
+
+ const persona = resolvePersona(user, searchParams);
+ expect(persona).toBe('user');
+ });
+ });
+
+ describe('parseSearchParams', () => {
+ it('should parse query string correctly', () => {
+ const result = parseSearchParams('?persona=mentor');
+ expect(result.get('persona')).toBe('mentor');
+ });
+
+ it('should handle multiple parameters', () => {
+ const result = parseSearchParams('?persona=user&other=value');
+ expect(result.get('persona')).toBe('user');
+ expect(result.get('other')).toBe('value');
+ });
+
+ it('should handle empty string', () => {
+ const result = parseSearchParams('');
+ expect(result.get('persona')).toBeNull();
+ });
+ });
+});
diff --git a/apps/dimentorin/src/routes/_authenticated/dashboard/_data/mock/dashboard-mock.ts b/apps/dimentorin/src/routes/_authenticated/dashboard/_data/mock/dashboard-mock.ts
new file mode 100644
index 0000000..bd48a95
--- /dev/null
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard/_data/mock/dashboard-mock.ts
@@ -0,0 +1,174 @@
+import type {
+ UserDashboardData,
+ MentorDashboardData,
+ MentorPaymentRecord,
+ MentorTopicChip,
+} from './types';
+
+/**
+ * Mock data for user dashboard.
+ * Used during development before API integration.
+ */
+export const mockUserDashboardData: UserDashboardData = {
+ mentoringSessions: 0,
+ articleSubmitted: 0,
+ articlePublished: 0,
+ roadmap: [
+ {
+ id: 'roadmap-1',
+ name: 'Front End Basic',
+ completionPercentage: 50,
+ durationDays: 30,
+ },
+ {
+ id: 'roadmap-2',
+ name: 'React Fundamentals',
+ completionPercentage: 25,
+ durationDays: 21,
+ },
+ {
+ id: 'roadmap-3',
+ name: 'TypeScript Essentials',
+ completionPercentage: 10,
+ durationDays: 14,
+ },
+ ],
+ articles: [
+ {
+ id: 'article-1',
+ no: 1,
+ judul: 'How to install linux dist',
+ materi: 'Day 1',
+ status: 'Published',
+ submitDate: '2025-04-10',
+ },
+ {
+ id: 'article-2',
+ no: 2,
+ judul: 'Mastering CSS Grid Layout',
+ materi: 'Day 2',
+ status: 'Published',
+ submitDate: '2025-04-08',
+ },
+ {
+ id: 'article-3',
+ no: 3,
+ judul: 'React Hooks Deep Dive',
+ materi: 'Day 5',
+ status: 'Submitted',
+ submitDate: '2025-04-05',
+ },
+ {
+ id: 'article-4',
+ no: 4,
+ judul: 'Understanding Async/Await',
+ materi: 'Day 3',
+ status: 'Draft',
+ submitDate: '2025-04-03',
+ },
+ {
+ id: 'article-5',
+ no: 5,
+ judul: 'TypeScript Advanced Types',
+ materi: 'Day 7',
+ status: 'Rejected',
+ submitDate: '2025-04-01',
+ },
+ ],
+};
+
+/**
+ * Mock mentor topics for chips display.
+ */
+const mockMentorTopics: MentorTopicChip[] = [
+ { id: 'topic-1', label: 'Basic IT' },
+ { id: 'topic-2', label: 'Career & Self Development' },
+ { id: 'topic-3', label: 'PM & IT Tools' },
+ { id: 'topic-4', label: 'Programming' },
+ { id: 'topic-5', label: 'Industry Insight' },
+ { id: 'topic-6', label: 'AI Tips' },
+ { id: 'topic-7', label: 'Data & Database' },
+];
+
+/**
+ * Mock payments history for mentor dashboard.
+ * Sorted by tanggalMentoring in descending order (newest first).
+ */
+const mockMentorPayments: MentorPaymentRecord[] = [
+ {
+ id: 'payment-1',
+ no: 1,
+ tanggalMentoring: '28-01-2025',
+ sesi: 'Senin, 19:00 - 19:45',
+ namaMentee: 'Firdaus Wijaya',
+ jumlah: 'Rp.100.000',
+ },
+ {
+ id: 'payment-2',
+ no: 2,
+ tanggalMentoring: '27-01-2025',
+ sesi: 'Minggu, 14:00 - 14:45',
+ namaMentee: 'Ahmad Rizki',
+ jumlah: 'Rp.100.000',
+ },
+ {
+ id: 'payment-3',
+ no: 3,
+ tanggalMentoring: '25-01-2025',
+ sesi: 'Jumat, 19:00 - 19:45',
+ namaMentee: 'Siti Nurhaliza',
+ jumlah: 'Rp.150.000',
+ },
+ {
+ id: 'payment-4',
+ no: 4,
+ tanggalMentoring: '24-01-2025',
+ sesi: 'Kamis, 18:00 - 18:45',
+ namaMentee: 'Budi Santoso',
+ jumlah: 'Rp.100.000',
+ },
+ {
+ id: 'payment-5',
+ no: 5,
+ tanggalMentoring: '22-01-2025',
+ sesi: 'Selasa, 19:00 - 19:45',
+ namaMentee: 'Eka Suryanto',
+ jumlah: 'Rp.120.000',
+ },
+];
+
+/**
+ * Mock data for mentor dashboard.
+ * Used during development before API integration.
+ */
+export const mockMentorDashboardData: MentorDashboardData = {
+ rating: 0,
+ sessionComplete: 0,
+ menteeImpacted: 0,
+ totalFeedback: 0,
+ topics: mockMentorTopics,
+ mentoringSetup: {
+ sessionRate: 'Rp.100.000/sesi',
+ availability: 'Senin-Jumat, 19:00-21:00',
+ expertise: ['JavaScript', 'React', 'TypeScript', 'Backend', 'System Design'],
+ experienceLevel: 'Senior',
+ status: 'Complete',
+ },
+ payments: mockMentorPayments,
+};
+
+/**
+ * Get mock user dashboard data.
+ * Can be extended to support filtering/pagination.
+ */
+export function getUserMockDashboardData(): UserDashboardData {
+ return mockUserDashboardData;
+}
+
+/**
+ * Get mock mentor dashboard data.
+ * Can be extended to support filtering/pagination.
+ */
+export function getMentorMockDashboardData(): MentorDashboardData {
+ return mockMentorDashboardData;
+}
diff --git a/apps/dimentorin/src/routes/_authenticated/dashboard/_data/mock/types.ts b/apps/dimentorin/src/routes/_authenticated/dashboard/_data/mock/types.ts
new file mode 100644
index 0000000..3305ced
--- /dev/null
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard/_data/mock/types.ts
@@ -0,0 +1,57 @@
+/** User Dashboard Mock Data Types */
+export interface UserArticle {
+ id: string;
+ no: number;
+ judul: string;
+ materi: string;
+ status: 'Draft' | 'Submitted' | 'Published' | 'Rejected';
+ submitDate: string;
+}
+
+export interface UserRoadmapItem {
+ id: string;
+ name: string;
+ completionPercentage: number;
+ durationDays: number;
+}
+
+export interface UserDashboardData {
+ mentoringSessions: number;
+ articleSubmitted: number;
+ articlePublished: number;
+ roadmap: UserRoadmapItem[];
+ articles: UserArticle[];
+}
+
+/** Mentor Dashboard Mock Data Types */
+export interface MentorPaymentRecord {
+ id: string;
+ no: number;
+ tanggalMentoring: string; // DD-MM-YYYY
+ sesi: string; // Hari, HH:MM - HH:MM
+ namaMentee: string;
+ jumlah: string; // Rp.###.###
+}
+
+export interface MentorMentoringSetup {
+ sessionRate: string; // e.g., "Rp.100.000/sesi"
+ availability: string; // e.g., "Senin-Jumat, 19:00-21:00"
+ expertise: string[];
+ experienceLevel: string; // e.g., "Senior"
+ status: 'Incomplete' | 'Complete';
+}
+
+export interface MentorTopicChip {
+ id: string;
+ label: string;
+}
+
+export interface MentorDashboardData {
+ rating: number; // 0-5
+ sessionComplete: number;
+ menteeImpacted: number;
+ totalFeedback: number;
+ topics: MentorTopicChip[];
+ mentoringSetup: MentorMentoringSetup;
+ payments: MentorPaymentRecord[];
+}
diff --git a/apps/dimentorin/src/routes/_authenticated/dashboard/_data/persona-resolver.ts b/apps/dimentorin/src/routes/_authenticated/dashboard/_data/persona-resolver.ts
new file mode 100644
index 0000000..54db87e
--- /dev/null
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard/_data/persona-resolver.ts
@@ -0,0 +1,53 @@
+import type { TUserItem } from '@imphnen-frontend-service/service';
+
+/**
+ * Persona type for dashboard rendering.
+ */
+export type Persona = 'user' | 'mentor';
+
+/**
+ * Resolves the persona for the dashboard based on authentication and query parameters.
+ *
+ * Resolution priority:
+ * 1. Query parameter `?persona=user|mentor` (explicit override)
+ * 2. User role name contains 'mentor' (case-insensitive)
+ * 3. Fallback to 'user' persona
+ *
+ * @param user - The authenticated user object
+ * @param searchParams - URL search parameters
+ * @returns The resolved persona
+ */
+export function resolvePersona(
+ user: TUserItem | undefined,
+ searchParams?: URLSearchParams
+): Persona {
+ // Check for explicit persona query parameter
+ if (searchParams) {
+ const param = searchParams.get('persona');
+ if (param === 'mentor' || param === 'user') {
+ return param;
+ }
+ }
+
+ // Derive from user role name
+ if (user?.role?.name) {
+ const roleName = user.role.name.toLocaleLowerCase();
+ if (roleName.includes('mentor')) {
+ return 'mentor';
+ }
+ }
+
+ // Default to user persona
+ return 'user';
+}
+
+/**
+ * Parses search parameters from a URL search string.
+ * Utility for testing and usage without URLSearchParams API.
+ *
+ * @param search - URL search string (e.g., "?persona=mentor")
+ * @returns URLSearchParams instance
+ */
+export function parseSearchParams(search: string): URLSearchParams {
+ return new URLSearchParams(search);
+}
diff --git a/apps/dimentorin/src/routes/_authenticated/dashboard/index.tsx b/apps/dimentorin/src/routes/_authenticated/dashboard/index.tsx
new file mode 100644
index 0000000..c65ac11
--- /dev/null
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard/index.tsx
@@ -0,0 +1,28 @@
+import { createFileRoute, useLocation } from '@tanstack/react-router'
+import { useAuthStore } from '@imphnen-frontend-service/service'
+import { resolvePersona } from '../dashboard/_data/persona-resolver'
+import { UserDashboard } from '../dashboard_/_components/user/user-dashboard'
+import { MentorDashboard } from '../dashboard_/_components/mentor/mentor-dashboard'
+
+export const Route = createFileRoute('/_authenticated/dashboard/')({
+ component: DashboardIndexPage,
+})
+
+/**
+ * Dashboard Index Page
+ * Routes to either user or mentor dashboard based on persona resolution.
+ * Persona resolved via query parameter or user role.
+ */
+function DashboardIndexPage() {
+ const { session } = useAuthStore()
+ const location = useLocation()
+
+ const searchParams = new URLSearchParams(location.search);
+ const persona = resolvePersona(session?.user, searchParams);
+
+ return (
+
+ {persona === 'mentor' ? : }
+
+ );
+}
diff --git a/apps/dimentorin/src/routes/_authenticated/dashboard/learning-path.tsx b/apps/dimentorin/src/routes/_authenticated/dashboard/learning-path.tsx
new file mode 100644
index 0000000..c38df18
--- /dev/null
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard/learning-path.tsx
@@ -0,0 +1,157 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+
+export const Route = createFileRoute('/_authenticated/dashboard/learning-path')({
+ component: LearningPathPage,
+})
+
+function LearningPathPage() {
+ const [activeTab, setActiveTab] = useState<'roadmap' | 'article'>('roadmap')
+ const [isSubmitArticlePopupOpen, setIsSubmitArticlePopupOpen] = useState(false)
+
+ return (
+
+
+
+
+
+
+ {activeTab === 'roadmap' && (
+
+
Roadmap Kamu
+
Front-end Basic
+
+
+
+
+
Day 1 - Materi A
+ 1 / 3 diselesaikan
+
+
+
+
+ 1. Submateri 1
+ Done
+
+
+ 2. Submateri 2
+ To do
+
+
+ 3. Tugas : Membuat Artikel
+ To do
+
+
+
+ {['Day 2 - Materi B', 'Day 3 - Materi C', 'Day 4 - Materi D', 'Day 5 - Materi E'].map((day) => (
+
+ {day}
+ Selesaikan materi sebelumnya
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ | No. |
+ Judul Artikel |
+ Materi |
+ Status |
+ Submit Date |
+ Action |
+
+
+
+
+ | 1 |
+ How to install linux dist.. |
+ Day 1 |
+ Done |
+ 22 Maret 2025, 20:30 WIB |
+
+
+ |
+
+
+ | 2. |
+ How to install linux dist.. |
+ Day 2 |
+ On Progress |
+ - |
+
+
+ |
+
+
+
+
+
+
+
+
Apakah Kamu Sudah Yakin?
+
+ Pastikan isi artikel sudah sesuai dengan ketentuan^^, artikel yang sudah disubmit tidak dapat diedit
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/dimentorin/src/routes/_authenticated/dashboard/mentoring.tsx b/apps/dimentorin/src/routes/_authenticated/dashboard/mentoring.tsx
new file mode 100644
index 0000000..03d046d
--- /dev/null
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard/mentoring.tsx
@@ -0,0 +1,339 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useMemo, useState } from 'react'
+
+export const Route = createFileRoute('/_authenticated/dashboard/mentoring')({
+ component: MentoringPage,
+})
+
+function MentoringPage() {
+ const [activeModal, setActiveModal] = useState
(null)
+ const mentoringRows = useMemo(
+ () =>
+ Array.from({ length: 12 }, (_, idx) => ({
+ no: idx + 1,
+ mentorName: 'Muhammad Firdaus Oi...',
+ topic: 'Basic IT, Industry Ins...',
+ sessionTime: '22 Maret 2025, 20:00 - 20:30 WIB',
+ status: idx % 3 === 0 ? 'Done' : 'To do',
+ })),
+ [],
+ )
+
+ const rowsPerPage = 10
+ const [currentPage, setCurrentPage] = useState(1)
+ const totalPages = Math.max(1, Math.ceil(mentoringRows.length / rowsPerPage))
+
+ const pagedRows = useMemo(() => {
+ const start = (currentPage - 1) * rowsPerPage
+ return mentoringRows.slice(start, start + rowsPerPage)
+ }, [currentPage, mentoringRows])
+
+ const goToPage = (page: number) => {
+ if (page < 1 || page > totalPages) return
+ setCurrentPage(page)
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ | No. |
+ Nama Mentor |
+ Topik |
+ Sesi Mentoring |
+ Status |
+ Action |
+
+
+
+ {pagedRows.map((row) => (
+
+ | {row.no} |
+ {row.mentorName} |
+ {row.topic} |
+ {row.sessionTime} |
+
+
+ {row.status}
+
+ |
+
+
+ {row.status === 'Done' ? (
+
+ ) : (
+ <>
+
+
+
+ )}
+
+ |
+
+ ))}
+
+
+
+
+
+
+ Menampilkan {(currentPage - 1) * rowsPerPage + 1} - {Math.min(currentPage * rowsPerPage, mentoringRows.length)} dari {mentoringRows.length}
+
+
+
+
+
+ {Array.from({ length: totalPages }, (_, idx) => {
+ const page = idx + 1
+ const isActive = page === currentPage
+
+ return (
+
+ )
+ })}
+
+
+
+
+
+ {activeModal === 'detail' && (
+
+
+
Detail Sesi Mentoring
+
+
+
+
+
+
Your Senpai
+
+
+
+ Muhammad
+
+ Firdaus Oi Oi Oi, S.H., M.H.
+
+
UI Designer at Oray orayan Studios
+
+
+
+
+
Topics
+
+
+ Industry Insight
+
+
+ Basic IT
+
+
+
+
+
+
+
Pertanyaan Untuk Senpai
+
+
+
+
+
+
+
+ )}
+
+ {activeModal === 'contact' && (
+
+
+
Hubungi Senpai Sekarang ??
+
+ Tekan tombol di bawah ini untuk terhubung langsung ke WhatsApp senpai kamu^^
+
+
+
+
+
+
+
+
+ )}
+
+ {activeModal === 'feedback-1' && (
+
+
+
Feedback Mentor
+ 1 dari 2
+
+
+
Seberapa puas kamu dengan sesi mentoring ini?
+
+ {[1, 2, 3, 4, 5].map((n) => (
+
+ ))}
+
+
1 = Sangat Tidak Puas, 5 = Sangat Puas
+
+
Seberapa membantu jawaban mentor untuk kebutuhanmu?
+
+ {['Tidak Membantu', 'Kurang Membantu', 'Cukup Membantu', 'Membantu', 'Sangat Membantu'].map((item) => (
+
+ ))}
+
+
+
Apakah kamu akan merekomendasikan platform ini ke rekan mu?
+
+ {['Ya', 'Tidak', 'Mungkin'].map((item) => (
+
+ ))}
+
+
+
+
+
+
+
+ )}
+
+ {activeModal === 'feedback-2' && (
+
+
+
Feedback Mentor
+ 2 dari 2
+
+
+
+
+
Apa yang kamu suka dari sesi ini?
+
+
+
+
Apa yang bisa ditingkatkan oleh mentor?
+
+
+
+
Testimoni atau ucapan terima kasih untuk mentor
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
Welcome to Roadmap Discovery
+ Start your Journey
+
+
+
+
+
+
+
+ Lagi pengen belajar apa? Ketik aja di sini,
+
+ biar AI bantuin bikin roadmap-nya.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Welcome Card */}
+
+
+
+
+
Selamat Datang di Dimentorin.dev
+
+ Senpai~ saatnya kamu bantu para junior menaklukkan dunia IT!
+
+ Pantau jadwal mentoring-mu, cek progress mentee, dan bagikan ilmu terbaikmu lewat sesi 1-on-1 yang impactful~
+
+
+
+
+
+
+ {/* Tabs */}
+
+
+
+
+
+ {/* Tab Content */}
+
+ {activeTab === 'overviews' && (
+
+
+
{data.rating}
+
Your Rating
+
+
+
{data.sessionComplete}
+
Session Complete
+
+
+
{data.menteeImpacted}
+
Mentee Impacted
+
+
+
{data.totalFeedback}
+
Total Feedback
+
+
+ )}
+
+ {activeTab === 'analytics' && (
+
+ {/* Topics Chart */}
+
+
Topics
+
+ {topicBars.map((topic, idx) => (
+
+ ))}
+
+
+
+ {/* Session Time Preference Chart */}
+
+
Session Time Preference
+
+
+ {sessionBars.map((session, idx) => (
+
+ ))}
+
+
+ {sessionBars.map((session, idx) => (
+
+ {session.label}
+
+ ))}
+
+
+
+
+ )}
+
+
+ {cards.map((card) => {
+ const colors = colorClasses[card.color];
+ return (
+
+ );
+ })}
+
+ {/* Welcome Card */}
+
+
+
+
+
Selamat Datang di Dimentorin.dev
+
+ Yuk, mulai petualanganmu di menu Skill Discovery untuk dapatkan
+
+ roadmap 30 hari yang direkomendasikan AI khusus buat kamu~
+
+
+
+
+
+
+
+
+
+
{data.mentoringSessions}
+
Mentoring Session
+
+
+
{data.articleSubmitted}
+
Article Submitted
+
+
+
{data.articlePublished}
+
Article Published
+
+
+
+
+ Your Roadmap
+
+ {data.roadmap.map((item) => (
+
+
{item.name}
+
+
+ 1/{item.durationDays} days milestones completed
+ {item.completionPercentage}%
+
+
+
+
+
+ ))}
+
+
+
+ Your Articles
+
+
+
+
+ | No. |
+ Judul Artikel |
+ Materi |
+ Status |
+ Submit Date |
+ Action |
+
+
+
+ {data.articles.slice(0, 10).map((article) => (
+
+ | {article.no} |
+ {article.judul} |
+ {article.materi} |
+ {article.status} |
+ {article.submitDate} |
+
+
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
-
-
- Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
-
-
- {mentor ? 'Manage your mentoring sessions and mentees' : 'Find mentors and book sessions'}
-
-
-
- {/* Stats Cards */}
-
-
-
-
{upcomingSessions.length}
-
-
-
-
{completedSessions.length}
-
-
-
-
- {mentor ? 'Mentor' : 'Mentee'}
-
- {mentor?.status && (
-
- {mentor.status}
-
- )}
-
-
-
- {/* Mentor CTA */}
- {!mentor && (
-
-
-
-
Become a Mentor
-
- Share your knowledge and help others grow in their career.
-
-
-
- Register as Mentor
-
-
-
- )}
-
- {/* Upcoming Sessions */}
-
-
-
- {upcomingSessions.length > 0 ? 'Upcoming Sessions' : 'No Upcoming Sessions'}
-
-
- Browse Mentors
-
-
-
- {upcomingSessions.length > 0 ? (
-
- {upcomingSessions.slice(0, 5).map((s: any) => (
-
-
-
-
-
-
-
{s.topic}
-
- {new Date(s.scheduled_at).toLocaleDateString('en-US', {
- weekday: 'short', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
- })}
- {' '}·{' '}{s.duration_minutes} min
-
-
-
-
- {s.status}
-
-
- ))}
-
- ) : (
-
-
-
- No upcoming sessions. Browse mentors to book your first session!
-
-
- )}
-
-
- {/* Profile Card */}
-
-
-
-
- {user?.avatar ? (
-
- ) : (
-
- U
-
- )}
-
-
{user?.fullname}
-
{user?.email}
-
-
-
-
-
-
+
+
-
-
-
Forgot Password
-
Masukkan email-mu, dan biarkan kami memanggil password-mu kembali dari dunia lain!
-
Email
-
-
+
+
+
+
+
+
+ {step === 1 && (
+
+
+
Lupa Password?
+
+ Tenang, Senpai! Kami bantu ambil kembali akses akunmu! ✨
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {step === 2 && (
+
+
+
Verifikasi OTP
+
+ Masukkan kode 6 digit yang dikirimkan ke email-mu! 📬
+
+
+
+
+
+
+ Gak dapet kode?
+
+
+
+
+
+
+
+
+ )}
+
+ {step === 3 && (
+
+
+
Summon Password Baru!
+
+ Senpai! Pastikan password barumu lebih OP dan tak terkalahkan! ⚔️
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
diff --git a/apps/dimentorin/src/routes/_public/auth/login.tsx b/apps/dimentorin/src/routes/_public/auth/login.tsx
index 23f660a..b262967 100644
--- a/apps/dimentorin/src/routes/_public/auth/login.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/login.tsx
@@ -5,6 +5,7 @@ import { GithubOutlined } from '@ant-design/icons'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { toast } from 'sonner'
+import { LoginBanner } from '@imphnen-frontend-service/ui/organisms'
import { Icon } from '@iconify/react'
export const Route = createFileRoute('/_public/auth/login')({
@@ -60,76 +61,68 @@ function LoginPage() {
}
return (
-
-
-
-
-
- Back to Homepage
-
-
+
+
+
-
-
Welcome Back
-
Sign in to the mentoring platform
-
-
- {error && (
-
- )}
-
-