AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

completionId: cgen-f0f73f71d729467f886cac969f9ec4db

Browse source 
cgen-f0f73f71d729467f886cac969f9ec4db
This commit is contained in:
Builder.io 2025-11-15 16:21:56 +00:00
parent aa9ab01523
commit 73239cd35e
1 changed files with 95 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

304
client/pages/dashboards/FoundationDashboard.tsx
View file

@ -28,6 +28,9 @@ import {
ArrowRight, ArrowRight,
Zap, Zap,
} from "lucide-react"; } from "lucide-react";
import { CoursesWidget } from "@/components/CoursesWidget";
import { MentorshipWidget } from "@/components/MentorshipWidget";
import { AchievementsWidget } from "@/components/AchievementsWidget";
const API_BASE = import.meta.env.VITE_API_BASE || ""; const API_BASE = import.meta.env.VITE_API_BASE || "";
@ -191,228 +194,111 @@ export default function FoundationDashboard() {
{/* Overview Tab */} {/* Overview Tab */}
<TabsContent value="overview" className="space-y-6 animate-fade-in"> <TabsContent value="overview" className="space-y-6 animate-fade-in">
{/* Active Mentorship */} {/* Mentorship Widget */}
{activeMentor ? ( <MentorshipWidget
<Card className="bg-gradient-to-br from-green-950/40 to-green-900/20 border-green-500/30"> mentorships={mentorships.map((m: any) => ({
<CardHeader> id: m.id,
<CardTitle className="flex items-center gap-2"> mentor: {
<Users className="h-5 w-5 text-green-500" /> id: m.mentor?.id,
Your Mentor name: m.mentor?.full_name,
</CardTitle> avatar: m.mentor?.avatar_url,
</CardHeader> expertise: m.mentor?.role_title,
<CardContent className="space-y-4"> },
<div className="flex items-start gap-4"> status: m.status,
<img connectedSince: m.accepted_at ? new Date(m.accepted_at).toLocaleDateString() : null,
src={activeMentor.mentor?.avatar_url || "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop"} lastSession: m.last_session_date,
alt={activeMentor.mentor?.full_name} nextSession: m.next_session_date,
className="w-16 h-16 rounded-full border-2 border-green-500/40" }))}
/> title="Your Mentorship"
<div className="flex-1"> description="Connect with industry experts"
<h3 className="text-lg font-semibold text-white">{activeMentor.mentor?.full_name}</h3> accentColor="red"
<p className="text-sm text-gray-400 mb-4">Connected since {new Date(activeMentor.accepted_at).toLocaleDateString()}</p> onFindMentor={() => navigate("/mentors")}
<Button />
size="sm"
variant="outline"
className="border-green-500/30 text-green-300 hover:bg-green-500/10"
>
Schedule Session
</Button>
</div>
</div>
</CardContent>
</Card>
) : (
<Card className="bg-gradient-to-br from-orange-950/40 to-orange-900/20 border-orange-500/30">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<AlertCircle className="h-5 w-5 text-orange-500" />
Find a Mentor
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
Having a mentor accelerates your learning. Browse mentors in your field and request guidance.
</p>
<Button
onClick={() => navigate("/mentors")}
className="bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700"
>
Find Mentor
<ArrowRight className="h-4 w-4 ml-2" />
</Button>
</CardContent>
</Card>
)}
{/* Recent Courses */} {/* Courses Widget */}
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20"> <CoursesWidget
<CardHeader> courses={enrolledCourses.map((c: any) => ({
<CardTitle>Continue Learning</CardTitle> id: c.id,
<CardDescription>Resume your courses</CardDescription> title: c.title,
</CardHeader> description: c.description,
<CardContent> category: c.category,
{enrolledCourses.length === 0 ? ( progress: c.userEnrollment?.progress_percent || 0,
<div className="text-center py-8 space-y-4"> status: c.userEnrollment?.status || "not_started",
<BookOpen className="h-12 w-12 mx-auto text-gray-500 opacity-50" /> duration: c.duration,
<p className="text-gray-400">No courses yet. Browse our curriculum!</p> lessons_total: c.lessons_total,
<Button lessons_completed: c.userEnrollment?.lessons_completed || 0,
onClick={() => navigate("/foundation/curriculum")} instructor: c.instructor?.full_name,
className="bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700" thumbnail_url: c.thumbnail_url,
> }))}
Explore Courses title="Continue Learning"
</Button> description="Resume your courses"
</div> accentColor="red"
) : ( onViewCourse={(courseId) => navigate(`/courses/${courseId}`)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> />
{enrolledCourses.slice(0, 4).map((course: any) => (
<div
key={course.id}
className="p-4 bg-black/30 rounded-lg border border-orange-500/10 hover:border-orange-500/30 transition cursor-pointer group"
onClick={() => navigate(`/courses/${course.id}`)}
>
<div className="flex items-start justify-between mb-2">
<h4 className="font-semibold text-white group-hover:text-orange-300 transition">{course.title}</h4>
<CheckCircle className="h-5 w-5" style={{
color: course.userEnrollment?.status === "completed" ? "#22c55e" : "#666"
}} />
</div>
<p className="text-xs text-gray-400 mb-3">{course.category}</p>
<div className="w-full bg-black/50 rounded-full h-2">
<div
className="bg-gradient-to-r from-orange-500 to-red-500 h-2 rounded-full transition"
style={{ width: `${course.userEnrollment?.progress_percent || 0}%` }}
/>
</div>
<p className="text-xs text-gray-400 mt-2">{course.userEnrollment?.progress_percent || 0}% complete</p>
</div>
))}
</div>
)}
</CardContent>
</Card>
</TabsContent> </TabsContent>
{/* Courses Tab */} {/* Courses Tab */}
<TabsContent value="courses" className="space-y-4 animate-fade-in"> <TabsContent value="courses" className="space-y-4 animate-fade-in">
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20"> <CoursesWidget
<CardHeader> courses={enrolledCourses.map((c: any) => ({
<CardTitle>My Courses</CardTitle> id: c.id,
<CardDescription>All your enrollments</CardDescription> title: c.title,
</CardHeader> description: c.description,
<CardContent> category: c.category,
{enrolledCourses.length === 0 ? ( progress: c.userEnrollment?.progress_percent || 0,
<div className="text-center py-12"> status: c.userEnrollment?.status || "not_started",
<BookOpen className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" /> duration: c.duration,
<p className="text-gray-400 mb-4">Not enrolled in any courses yet</p> lessons_total: c.lessons_total,
<Button onClick={() => navigate("/foundation/curriculum")}> lessons_completed: c.userEnrollment?.lessons_completed || 0,
Browse Curriculum instructor: c.instructor?.full_name,
</Button> thumbnail_url: c.thumbnail_url,
</div> }))}
) : ( title="My Courses"
<div className="space-y-3"> description="All your enrollments"
{enrolledCourses.map((course: any) => ( accentColor="red"
<div key={course.id} className="p-4 bg-black/30 rounded-lg border border-orange-500/10 space-y-3"> onViewCourse={(courseId) => navigate(`/courses/${courseId}`)}
<div className="flex items-start justify-between gap-4"> />
<div className="flex-1">
<h4 className="font-semibold text-white">{course.title}</h4>
<p className="text-sm text-gray-400">{course.description?.substring(0, 80)}...</p>
</div>
<Badge variant="outline" className={
course.userEnrollment?.status === "completed"
? "bg-green-500/20 border-green-500/30 text-green-300"
: ""
}>
{course.userEnrollment?.status}
</Badge>
</div>
<div className="space-y-2">
<div className="flex justify-between text-xs text-gray-400">
<span>Progress</span>
<span>{course.userEnrollment?.progress_percent || 0}%</span>
</div>
<div className="w-full bg-black/50 rounded-full h-2">
<div
className="bg-gradient-to-r from-orange-500 to-red-500 h-2 rounded-full"
style={{ width: `${course.userEnrollment?.progress_percent || 0}%` }}
/>
</div>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
</TabsContent> </TabsContent>
{/* Mentorship Tab */} {/* Mentorship Tab */}
<TabsContent value="mentorship" className="space-y-4 animate-fade-in"> <TabsContent value="mentorship" className="space-y-4 animate-fade-in">
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20"> <MentorshipWidget
<CardHeader> mentorships={mentorships.map((m: any) => ({
<CardTitle>Mentorship</CardTitle> id: m.id,
<CardDescription>Your mentor relationships</CardDescription> mentor: {
</CardHeader> id: m.mentor?.id,
<CardContent> name: m.mentor?.full_name,
{mentorships.length === 0 ? ( avatar: m.mentor?.avatar_url,
<div className="text-center py-12 space-y-4"> expertise: m.mentor?.role_title,
<Users className="h-12 w-12 mx-auto text-gray-500 opacity-50" /> },
<p className="text-gray-400">No mentors yet</p> status: m.status,
<Button onClick={() => navigate("/mentors")}> connectedSince: m.accepted_at ? new Date(m.accepted_at).toLocaleDateString() : null,
Find a Mentor lastSession: m.last_session_date,
</Button> nextSession: m.next_session_date,
</div> }))}
) : ( title="Mentorship"
<div className="space-y-3"> description="Your mentor relationships"
{mentorships.map((m: any) => ( accentColor="red"
<div key={m.id} className="p-4 bg-black/30 rounded-lg border border-orange-500/10 space-y-3"> onFindMentor={() => navigate("/mentors")}
<div className="flex items-center justify-between"> />
<div className="flex items-center gap-3 flex-1">
<img
src={m.mentor?.avatar_url || "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop"}
alt={m.mentor?.full_name}
className="w-10 h-10 rounded-full"
/>
<div>
<p className="font-semibold text-white">{m.mentor?.full_name}</p>
<p className="text-xs text-gray-400">{m.mentor?.email}</p>
</div>
</div>
<Badge>{m.status}</Badge>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
</TabsContent> </TabsContent>
{/* Achievements Tab */} {/* Achievements Tab */}
<TabsContent value="achievements" className="space-y-4 animate-fade-in"> <TabsContent value="achievements" className="space-y-4 animate-fade-in">
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20"> <AchievementsWidget
<CardHeader> achievements={achievements.map((a: any) => ({
<CardTitle>Your Achievements</CardTitle> id: a.id,
<CardDescription>Badges earned through learning and growth</CardDescription> name: a.name,
</CardHeader> description: a.description,
<CardContent> icon: a.icon,
{achievements.length === 0 ? ( rarity: a.rarity || "common",
<div className="text-center py-12 space-y-4"> earnedDate: a.earned_date,
<Award className="h-12 w-12 mx-auto text-gray-500 opacity-50" /> category: a.category,
<p className="text-gray-400">Complete courses to earn achievements!</p> }))}
</div> title="Your Achievements"
) : ( description="Badges earned through learning and growth"
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> accentColor="red"
{achievements.map((ach: any) => ( />
<div key={ach.id} className="text-center p-4 bg-black/30 rounded-lg border border-orange-500/10 hover:border-orange-500/30 transition">
<div className="text-3xl mb-2">{ach.icon}</div>
<p className="font-semibold text-sm text-white">{ach.name}</p>
<p className="text-xs text-gray-400 mt-1">{ach.category}</p>
</div>
))}
</div>
)}
</CardContent>
</Card>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>