feat(v3): restructure project + add complete frontend
- Restructure: move backend from new_project/ to backend/ - Add full React/TypeScript frontend (37 pages, 17 services, 16 type defs, 11 query hooks) - Add docs/ with SRS specs, user stories, and workflow documentation - Update .gitignore for new directory layout Workflows implemented: WF1 User Signup, WF2 Placement Test, WF3 Exam Configuration, WF4 General English Exam, WF5 Course Generation, WF6 Entity Student Onboarding, AI Course Generation, Adaptive Learning Engine UI, White-Label Branding, Score Release Made-with: Cursor
This commit is contained in:
Yamen Ahmad
117
frontend/src/pages/student/ProficiencyProfile.tsx
Normal file
117
frontend/src/pages/student/ProficiencyProfile.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ArrowRight, Target, TrendingUp } from "lucide-react";
|
||||
import { useProficiency } from "@/hooks/queries";
|
||||
|
||||
function getMasteryColor(mastery: number): string {
|
||||
if (mastery >= 80) return "text-green-600";
|
||||
if (mastery >= 60) return "text-blue-600";
|
||||
if (mastery >= 40) return "text-yellow-600";
|
||||
if (mastery >= 20) return "text-orange-600";
|
||||
return "text-red-600";
|
||||
}
|
||||
|
||||
function getMasteryBg(mastery: number): string {
|
||||
if (mastery >= 80) return "bg-green-100";
|
||||
if (mastery >= 60) return "bg-blue-100";
|
||||
if (mastery >= 40) return "bg-yellow-100";
|
||||
if (mastery >= 20) return "bg-orange-100";
|
||||
return "bg-red-100";
|
||||
}
|
||||
|
||||
export default function ProficiencyProfile() {
|
||||
const { subjectId } = useParams<{ subjectId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { data: proficiencies = [], isLoading } = useProficiency({ subject_id: Number(subjectId) });
|
||||
|
||||
if (isLoading) return <div className="flex items-center justify-center min-h-[400px]"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" /></div>;
|
||||
|
||||
const domains = [...new Set(proficiencies.map(p => p.domain_name))];
|
||||
const overallMastery = proficiencies.length > 0 ? proficiencies.reduce((sum, p) => sum + p.mastery, 0) / proficiencies.length : 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Proficiency Profile</h1>
|
||||
<p className="text-muted-foreground">Your knowledge map across all topics.</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => navigate(`/student/diagnostic/${subjectId}`)}>Retake Diagnostic</Button>
|
||||
<Button onClick={() => navigate(`/student/plan/${subjectId}`)}>Learning Plan <ArrowRight className="ml-1 h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<Target className="h-8 w-8 mx-auto text-primary mb-2" />
|
||||
<div className="text-3xl font-bold">{Math.round(overallMastery)}%</div>
|
||||
<p className="text-sm text-muted-foreground">Overall Mastery</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<TrendingUp className="h-8 w-8 mx-auto text-green-500 mb-2" />
|
||||
<div className="text-3xl font-bold">{proficiencies.filter(p => p.mastery >= 80).length}</div>
|
||||
<p className="text-sm text-muted-foreground">Topics Mastered</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<div className="h-8 w-8 mx-auto text-orange-500 mb-2 text-2xl font-bold">{proficiencies.filter(p => p.mastery < 40).length}</div>
|
||||
<p className="text-sm text-muted-foreground">Topics Needing Work</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{domains.map((domain) => {
|
||||
const topics = proficiencies.filter(p => p.domain_name === domain);
|
||||
const domainMastery = topics.reduce((s, t) => s + t.mastery, 0) / topics.length;
|
||||
|
||||
return (
|
||||
<Card key={domain}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">{domain}</CardTitle>
|
||||
<Badge variant="outline" className={getMasteryColor(domainMastery)}>{Math.round(domainMastery)}%</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{topics.map((topic) => (
|
||||
<div
|
||||
key={topic.topic_id}
|
||||
className={`p-3 rounded-lg border ${getMasteryBg(topic.mastery)} cursor-pointer hover:shadow-sm transition-shadow`}
|
||||
onClick={() => navigate(`/student/topic/${topic.topic_id}`)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm font-medium truncate">{topic.topic_name}</span>
|
||||
<span className={`text-sm font-semibold ${getMasteryColor(topic.mastery)}`}>{Math.round(topic.mastery)}%</span>
|
||||
</div>
|
||||
<Progress value={topic.mastery} className="h-1.5" />
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
<Badge variant="secondary" className="text-xs">{topic.mastery_level}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
|
||||
{proficiencies.length === 0 && (
|
||||
<Card>
|
||||
<CardContent className="text-center py-12 text-muted-foreground">
|
||||
<p>No proficiency data yet. Take a diagnostic assessment first.</p>
|
||||
<Button className="mt-4" onClick={() => navigate(`/student/diagnostic/${subjectId}`)}>Start Diagnostic</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user