diff --git a/apps/dimentorin/src/app/dashboard/layout.tsx b/apps/dimentorin/src/app/dashboard/layout.tsx new file mode 100644 index 0000000..ca6234b --- /dev/null +++ b/apps/dimentorin/src/app/dashboard/layout.tsx @@ -0,0 +1,66 @@ +import { Outlet, Link, useLocation, useNavigate } from 'react-router'; +import { useAuthStore } from '@imphnen-frontend-service/service'; +import { Icon } from '@iconify/react'; +import { useEffect } from 'react'; + +const navItems = [ + { path: '/dashboard', label: 'Dashboard', icon: 'mdi:view-dashboard' }, + { path: '/dashboard/settings', label: 'Settings', icon: 'mdi:cog' }, +]; + +export default function DashboardLayout() { + const { session, clearSession } = useAuthStore(); + const location = useLocation(); + const navigate = useNavigate(); + + useEffect(() => { + if (!session?.token) navigate('/auth/login'); + }, [session, navigate]); + + return ( +
+ +
+ +
+
+ ); +} diff --git a/apps/dimentorin/src/app/dashboard/page.tsx b/apps/dimentorin/src/app/dashboard/page.tsx new file mode 100644 index 0000000..a47db30 --- /dev/null +++ b/apps/dimentorin/src/app/dashboard/page.tsx @@ -0,0 +1,173 @@ +import { Link } from 'react-router'; +import { + useAuthStore, + useSessionQuery, + useMySessions, + useMentorMe, +} from '@imphnen-frontend-service/service'; +import { Icon } from '@iconify/react'; + +export default function DashboardPage() { + const { session } = useAuthStore(); + const { data: meData } = useSessionQuery(['mentor', 'sessions']); + const { data: sessionsData } = useMySessions(); + const { data: mentorData } = useMentorMe(); + + const user = session?.user; + const mentor = meData?.user?.mentor; + const sessions = sessionsData?.data || []; + + const upcomingSessions = sessions.filter( + (s: { status: string }) => s.status === 'confirmed' || s.status === 'pending' + ); + const completedSessions = sessions.filter( + (s: { status: string }) => s.status === 'completed' + ); + + return ( +
+
+

+ Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}! +

+

+ {mentor ? 'Manage your mentoring sessions and mentees' : 'Find mentors and book sessions'} +

+
+ + {/* Stats Cards */} +
+
+
+
+ +
+ Upcoming +
+

{upcomingSessions.length}

+
+
+
+
+ +
+ Completed +
+

{completedSessions.length}

+
+
+
+
+ +
+ Role +
+

+ {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}

+
+
+
+
+
+ ); +} diff --git a/apps/dimentorin/src/app/dashboard/settings/page.tsx b/apps/dimentorin/src/app/dashboard/settings/page.tsx new file mode 100644 index 0000000..7974260 --- /dev/null +++ b/apps/dimentorin/src/app/dashboard/settings/page.tsx @@ -0,0 +1,185 @@ +import { useState } from 'react'; +import { + useAuthStore, + useSessionQuery, +} from '@imphnen-frontend-service/service'; +import { Icon } from '@iconify/react'; +import { toast } from 'sonner'; + +type SettingsSection = 'account' | 'privacy' | 'preferences' | 'faq'; + +const faqItems = [ + { q: 'How do I book a mentoring session?', a: 'Browse available mentors, select one, and click "Book Session" to schedule a meeting.' }, + { q: 'How do I become a mentor?', a: 'Go to the registration page and fill in your professional details. Your application will be reviewed by our team.' }, + { q: 'Can I cancel a session?', a: 'Yes, you can cancel a pending or confirmed session from your dashboard before the scheduled time.' }, + { q: 'How do I update my profile?', a: 'Go to Settings > Account Details to update your personal information.' }, + { q: 'Is my data secure?', a: 'Yes, we use encryption and secure protocols to protect your data. See our Privacy Policy for details.' }, +]; + +export default function SettingsPage() { + const { session } = useAuthStore(); + const { data: meData } = useSessionQuery(); + const [activeSection, setActiveSection] = useState('account'); + const [expandedFaq, setExpandedFaq] = useState(null); + + const user = session?.user; + + const sections = [ + { id: 'account' as const, label: 'Account Details', icon: 'mdi:account-circle' }, + { id: 'privacy' as const, label: 'Privacy & Security', icon: 'mdi:shield-lock' }, + { id: 'preferences' as const, label: 'Preferences', icon: 'mdi:tune' }, + { id: 'faq' as const, label: 'FAQ & Support', icon: 'mdi:help-circle' }, + ]; + + return ( +
+

Settings

+ +
+ {/* Sidebar */} +
+
+ {sections.map((s) => ( + + ))} +
+
+ + {/* Content */} +
+ {activeSection === 'account' && ( +
+

Account Details

+
+
+
+ + +
+
+ + +
+
+
+ + +
+

+ To update your profile, use the profile page from the main menu. +

+
+
+ )} + + {activeSection === 'privacy' && ( +
+

Privacy & Security

+
+
+
+

Two-Factor Authentication

+

Add an extra layer of security to your account

+
+ Coming Soon +
+
+
+

Change Password

+

Update your account password

+
+ +
+
+
+

Active Sessions

+

You are currently logged in on this device

+
+ + + Active + +
+
+
+ )} + + {activeSection === 'preferences' && ( +
+

Preferences

+
+
+
+

Email Notifications

+

Receive email updates about your sessions

+
+ Enabled +
+
+
+

Language

+

Choose your preferred language

+
+ English +
+
+
+

Theme

+

Toggle between light and dark mode

+
+ System +
+
+
+ )} + + {activeSection === 'faq' && ( +
+

FAQ & Support

+
+ {faqItems.map((item, i) => ( +
+ + {expandedFaq === i && ( +
+

{item.a}

+
+ )} +
+ ))} +
+
+

+ Need more help? Contact us at{' '} + support@imphnen.dev +

+
+
+ )} +
+
+
+ ); +}