diff --git a/client/pages/dashboards/FoundationDashboard.tsx b/client/pages/dashboards/FoundationDashboard.tsx new file mode 100644 index 00000000..a4176369 --- /dev/null +++ b/client/pages/dashboards/FoundationDashboard.tsx @@ -0,0 +1,420 @@ +import { useState, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import Layout from "@/components/Layout"; +import { Button } from "@/components/ui/button"; +import { useAuth } from "@/contexts/AuthContext"; +import { aethexToast } from "@/lib/aethex-toast"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import LoadingScreen from "@/components/LoadingScreen"; +import { + BookOpen, + Award, + Users, + TrendingUp, + CheckCircle, + AlertCircle, + Star, + Clock, + Target, + ArrowRight, + Zap, +} from "lucide-react"; + +const API_BASE = import.meta.env.VITE_API_BASE || ""; + +export default function FoundationDashboard() { + const navigate = useNavigate(); + const { user, loading: authLoading } = useAuth(); + const [activeTab, setActiveTab] = useState("overview"); + const [courses, setCourses] = useState([]); + const [mentorships, setMentorships] = useState([]); + const [achievements, setAchievements] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (!authLoading && user) { + loadDashboardData(); + } + }, [user, authLoading]); + + const loadDashboardData = async () => { + try { + setLoading(true); + const token = (await (window as any).supabaseClient.auth.getSession()).data?.session?.access_token; + if (!token) throw new Error("No auth token"); + + // Load courses + const coursesRes = await fetch(`${API_BASE}/api/foundation/courses`, { + headers: { Authorization: `Bearer ${token}` }, + }); + if (coursesRes.ok) { + const data = await coursesRes.json(); + setCourses(Array.isArray(data) ? data : []); + } + + // Load mentorships + const mentorRes = await fetch(`${API_BASE}/api/foundation/mentorships`, { + headers: { Authorization: `Bearer ${token}` }, + }); + if (mentorRes.ok) { + const data = await mentorRes.json(); + setMentorships(data.as_mentee || []); + } + } catch (error: any) { + console.error("Failed to load dashboard data", error); + } finally { + setLoading(false); + } + }; + + if (authLoading || loading) { + return ; + } + + if (!user) { + return ( + +
+
+

+ Join FOUNDATION +

+

Learn from industry experts and mentors

+ +
+
+ + ); + } + + const enrolledCourses = courses.filter((c: any) => c.userEnrollment); + const completedCourses = enrolledCourses.filter((c: any) => c.userEnrollment?.status === "completed"); + const activeMentor = mentorships.find((m: any) => m.status === "accepted"); + + return ( + +
+
+ {/* Header */} +
+
+
+

+ FOUNDATION University +

+

+ Learn, grow, and earn achievement badges +

+
+
+ + {/* Quick Stats */} +
+ + +
+
+

Courses Enrolled

+

{enrolledCourses.length}

+
+ +
+ + + + + +
+
+

Completed

+

{completedCourses.length}

+
+ +
+ + + + + +
+
+

Achievements

+

{achievements.length}

+
+ +
+ + + + + +
+
+

Mentor

+

+ {activeMentor ? '✓' : '—'} +

+
+ +
+ + +
+
+ + {/* Tabs */} + + + Overview + Courses + Mentorship + Achievements + + + {/* Overview Tab */} + + {/* Active Mentorship */} + {activeMentor ? ( + + + + + Your Mentor + + + +
+ {activeMentor.mentor?.full_name} +
+

{activeMentor.mentor?.full_name}

+

Connected since {new Date(activeMentor.accepted_at).toLocaleDateString()}

+ +
+
+ + + ) : ( + + + + + Find a Mentor + + + +

+ Having a mentor accelerates your learning. Browse mentors in your field and request guidance. +

+ + + + )} + + {/* Recent Courses */} + + + Continue Learning + Resume your courses + + + {enrolledCourses.length === 0 ? ( +
+ +

No courses yet. Browse our curriculum!

+ +
+ ) : ( +
+ {enrolledCourses.slice(0, 4).map((course: any) => ( +
navigate(`/courses/${course.id}`)} + > +
+

{course.title}

+ +
+

{course.category}

+
+
+
+

{course.userEnrollment?.progress_percent || 0}% complete

+
+ ))} +
+ )} + + + + + {/* Courses Tab */} + + + + My Courses + All your enrollments + + + {enrolledCourses.length === 0 ? ( +
+ +

Not enrolled in any courses yet

+ +
+ ) : ( +
+ {enrolledCourses.map((course: any) => ( +
+
+
+

{course.title}

+

{course.description?.substring(0, 80)}...

+
+ + {course.userEnrollment?.status} + +
+
+
+ Progress + {course.userEnrollment?.progress_percent || 0}% +
+
+
+
+
+
+ ))} +
+ )} + + + + + {/* Mentorship Tab */} + + + + Mentorship + Your mentor relationships + + + {mentorships.length === 0 ? ( +
+ +

No mentors yet

+ +
+ ) : ( +
+ {mentorships.map((m: any) => ( +
+
+
+ {m.mentor?.full_name} +
+

{m.mentor?.full_name}

+

{m.mentor?.email}

+
+
+ {m.status} +
+
+ ))} +
+ )} + + + + + {/* Achievements Tab */} + + + + Your Achievements + Badges earned through learning and growth + + + {achievements.length === 0 ? ( +
+ +

Complete courses to earn achievements!

+
+ ) : ( +
+ {achievements.map((ach: any) => ( +
+
{ach.icon}
+

{ach.name}

+

{ach.category}

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