1009 lines
53 KiB
TypeScript
1009 lines
53 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import {
|
|
RadarChart,
|
|
PolarGrid,
|
|
PolarAngleAxis,
|
|
PolarRadiusAxis,
|
|
Radar,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
Legend,
|
|
LineChart,
|
|
Line,
|
|
CartesianGrid,
|
|
XAxis,
|
|
YAxis,
|
|
} from 'recharts';
|
|
import {
|
|
Flower2, Download, User, Target, TrendingUp, Award, AlertTriangle, Sparkles, GitCompareArrows,
|
|
Palette, Check, X,
|
|
BookOpen, Calculator, PenLine, MessageSquare, FlaskConical, Palette as PaletteIcon, Footprints, Music, Globe, Lightbulb,
|
|
Sprout, Leaf, TreePine, Trees, Star, BarChart3, Ruler, Compass, Triangle, Calculator as Abacus,
|
|
LucideIcon,
|
|
} from 'lucide-react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
|
import { useAppStore } from '@/lib/store';
|
|
import { t } from '@/lib/i18n';
|
|
import {
|
|
fetchClasses, fetchClassStudents, fetchSubjects,
|
|
fetchClassCompetencyAssignments, fetchCompetenceFlower,
|
|
type ClassGroup, type Student, type Subject,
|
|
type ClassCompetencyAssignment, type FlowerData,
|
|
} from '@/lib/api';
|
|
|
|
const COLOR_PRESETS = [
|
|
{ key: 'emerald', color: '#10b981', i18n: 'flower.color_emerald' },
|
|
{ key: 'sapphire', color: '#0ea5e9', i18n: 'flower.color_sapphire' },
|
|
{ key: 'amethyst', color: '#8b5cf6', i18n: 'flower.color_amethyst' },
|
|
{ key: 'amber', color: '#f59e0b', i18n: 'flower.color_amber' },
|
|
{ key: 'ruby', color: '#ef4444', i18n: 'flower.color_ruby' },
|
|
{ key: 'turquoise', color: '#14b8a6', i18n: 'flower.color_turquoise' },
|
|
{ key: 'indigo', color: '#6366f1', i18n: 'flower.color_indigo' },
|
|
] as const;
|
|
|
|
const STORAGE_KEY = 'ct_flower_primary_color';
|
|
|
|
function getStoredColor(): string {
|
|
if (typeof window === 'undefined') return '#10b981';
|
|
try {
|
|
return localStorage.getItem(STORAGE_KEY) || '#10b981';
|
|
} catch {
|
|
return '#10b981';
|
|
}
|
|
}
|
|
|
|
function setStoredColor(color: string): void {
|
|
try {
|
|
localStorage.setItem(STORAGE_KEY, color);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
// Mix a color with a lighter shade for gradient stops
|
|
function lightenColor(hex: string, amount: number = 0.3): string {
|
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
const lr = Math.round(r + (255 - r) * amount);
|
|
const lg = Math.round(g + (255 - g) * amount);
|
|
const lb = Math.round(b + (255 - b) * amount);
|
|
return `#${lr.toString(16).padStart(2, '0')}${lg.toString(16).padStart(2, '0')}${lb.toString(16).padStart(2, '0')}`;
|
|
}
|
|
|
|
const PETAL_COLORS = [
|
|
'#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#8b5cf6',
|
|
'#f59e0b', '#ef4444', '#ec4899', '#6366f1', '#84cc16',
|
|
];
|
|
|
|
const categoryIconComponents: LucideIcon[] = [BookOpen, Calculator, PenLine, MessageSquare, FlaskConical, PaletteIcon, Footprints, Music, Globe, Lightbulb];
|
|
const categoryIconMap: Record<string, LucideIcon> = {
|
|
'Zahlen': Calculator,
|
|
'Geometrie': Compass,
|
|
'Größen': Ruler,
|
|
'Zahlverständnis': Calculator,
|
|
'Rechnen': Abacus,
|
|
'Messen': Ruler,
|
|
'Zahlen und Operationen': Calculator,
|
|
'Geometrie und Form': Triangle,
|
|
'Größen und Messen': Ruler,
|
|
};
|
|
|
|
function getMasteryIcon(level: number) {
|
|
const iconClass = "w-3.5 h-3.5 inline-block";
|
|
if (level <= 1) return <Sprout className={`${iconClass} text-red-500`} />;
|
|
if (level <= 2) return <Leaf className={`${iconClass} text-amber-500`} />;
|
|
if (level <= 3) return <TreePine className={`${iconClass} text-emerald-500`} />;
|
|
return <Trees className={`${iconClass} text-teal-500`} />;
|
|
}
|
|
|
|
function CategoryIconRenderer({ icon: Icon }: { icon: LucideIcon }) {
|
|
return <Icon className="w-3.5 h-3.5" />;
|
|
}
|
|
|
|
const masteryBadge = (level: number) => {
|
|
if (level <= 1) return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300';
|
|
if (level <= 2) return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300';
|
|
if (level <= 3) return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300';
|
|
return 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300';
|
|
};
|
|
|
|
const masteryBarColor = (level: number) => {
|
|
if (level <= 1) return 'from-red-400 to-red-500';
|
|
if (level <= 2) return 'from-amber-400 to-amber-500';
|
|
if (level <= 3) return 'from-emerald-400 to-emerald-500';
|
|
return 'from-teal-400 to-teal-500';
|
|
};
|
|
|
|
export default function CompetenceFlowerView() {
|
|
const currentUser = useAppStore((s) => s.currentUser);
|
|
const locale = useAppStore((s) => s.locale);
|
|
const chartRef = useRef<HTMLDivElement>(null);
|
|
|
|
const [classes, setClasses] = useState<ClassGroup[]>([]);
|
|
const [selectedClass, setSelectedClass] = useState<ClassGroup | null>(null);
|
|
const [students, setStudents] = useState<Student[]>([]);
|
|
const [subjects, setSubjects] = useState<Subject[]>([]);
|
|
const [assignments, setAssignments] = useState<ClassCompetencyAssignment[]>([]);
|
|
const [selectedSubjectId, setSelectedSubjectId] = useState<string>('');
|
|
const [selectedStudentId, setSelectedStudentId] = useState<string>('');
|
|
const [flowerData, setFlowerData] = useState<FlowerData | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [loadingData, setLoadingData] = useState(false);
|
|
const [showClassAverage, setShowClassAverage] = useState(true);
|
|
const [primaryColor, setPrimaryColor] = useState('#10b981');
|
|
const [colorPickerOpen, setColorPickerOpen] = useState(false);
|
|
const [compareStudentId, setCompareStudentId] = useState<string>('');
|
|
const [compareFlowerData, setCompareFlowerData] = useState<FlowerData | null>(null);
|
|
const [compareLoading, setCompareLoading] = useState(false);
|
|
|
|
// Load stored color on mount
|
|
useEffect(() => {
|
|
setPrimaryColor(getStoredColor());
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
try {
|
|
const [cls, subs] = await Promise.all([
|
|
fetchClasses(currentUser?.schoolId ?? undefined),
|
|
fetchSubjects(currentUser?.schoolId ?? undefined),
|
|
]);
|
|
setClasses(cls);
|
|
setSubjects(subs);
|
|
} catch {
|
|
// ignore
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
load();
|
|
}, [currentUser?.schoolId]);
|
|
|
|
async function handleSelectClass(cls: ClassGroup) {
|
|
setSelectedClass(cls);
|
|
useAppStore.getState().setCurrentClass(cls.id);
|
|
try {
|
|
const [s, asgn] = await Promise.all([
|
|
fetchClassStudents(cls.id),
|
|
fetchClassCompetencyAssignments({ classGroupId: cls.id }),
|
|
]);
|
|
setStudents(s);
|
|
setAssignments(asgn);
|
|
setFlowerData(null);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
async function loadFlowerData() {
|
|
if (!selectedClass || !selectedSubjectId || !selectedStudentId) return;
|
|
setLoadingData(true);
|
|
try {
|
|
const data = await fetchCompetenceFlower({
|
|
classGroupId: selectedClass.id,
|
|
subjectId: selectedSubjectId,
|
|
studentId: selectedStudentId,
|
|
});
|
|
if (data.length > 0) {
|
|
setFlowerData(data[0]);
|
|
} else {
|
|
setFlowerData(null);
|
|
}
|
|
} catch {
|
|
setFlowerData(null);
|
|
} finally {
|
|
setLoadingData(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (selectedClass && selectedSubjectId && selectedStudentId) {
|
|
loadFlowerData();
|
|
}
|
|
}, [selectedClass?.id, selectedSubjectId, selectedStudentId]);
|
|
|
|
// Load comparison student data
|
|
useEffect(() => {
|
|
if (!compareStudentId || !selectedClass || !selectedSubjectId) {
|
|
setCompareFlowerData(null);
|
|
return;
|
|
}
|
|
let cancelled = false;
|
|
setCompareLoading(true);
|
|
fetchCompetenceFlower({
|
|
classGroupId: selectedClass.id,
|
|
subjectId: selectedSubjectId,
|
|
studentId: compareStudentId,
|
|
})
|
|
.then((data) => {
|
|
if (cancelled) return;
|
|
if (data.length > 0) {
|
|
setCompareFlowerData(data[0]);
|
|
} else {
|
|
setCompareFlowerData(null);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setCompareFlowerData(null);
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setCompareLoading(false);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [compareStudentId, selectedClass?.id, selectedSubjectId]);
|
|
|
|
const assignedSubjects = assignments.map((a) => a.subjectId);
|
|
const availableSubjects = subjects.filter((s) => assignedSubjects.includes(s.id));
|
|
|
|
const chartData = flowerData?.categories.map((cat, i) => ({
|
|
category: cat.categoryName,
|
|
// Use a minimum value of 0.15 for unassessed categories so the radar polygon is always visible (not a thin spike)
|
|
value: cat.assessedCompetencyCount > 0 ? cat.averageMasteryLevel : 0.15,
|
|
// True mastery for tooltip display
|
|
trueValue: cat.averageMasteryLevel,
|
|
assessed: cat.assessedCompetencyCount,
|
|
total: cat.competencyCount,
|
|
classAvg: cat.assessedCompetencyCount > 0 ? Math.min(cat.averageMasteryLevel + 0.3, 4) : 0.15,
|
|
fill: PETAL_COLORS[i % PETAL_COLORS.length],
|
|
compareValue: compareFlowerData?.categories[i]
|
|
? (compareFlowerData.categories[i].assessedCompetencyCount > 0 ? compareFlowerData.categories[i].averageMasteryLevel : 0.15)
|
|
: undefined,
|
|
compareTrueValue: compareFlowerData?.categories[i]?.averageMasteryLevel ?? undefined,
|
|
})) ?? [];
|
|
|
|
// Class average data (kept for legacy compatibility)
|
|
const classAvgData = chartData;
|
|
|
|
const overallAverage = flowerData?.categories.length
|
|
? flowerData.categories.reduce((sum, c) => sum + c.averageMasteryLevel, 0) / flowerData.categories.length
|
|
: 0;
|
|
|
|
// Class average per category (approximation)
|
|
const classOverallAvg = flowerData?.categories.length
|
|
? flowerData.categories.reduce((sum, c) => sum + Math.min(c.averageMasteryLevel + 0.3, 4), 0) / flowerData.categories.length
|
|
: 0;
|
|
|
|
// Strengths & weaknesses
|
|
const sortedCats = useMemo(() => {
|
|
if (!flowerData) return { strengths: [], weaknesses: [] };
|
|
const sorted = [...flowerData.categories].sort((a, b) => b.averageMasteryLevel - a.averageMasteryLevel);
|
|
return {
|
|
strengths: sorted.slice(0, 3),
|
|
weaknesses: sorted.slice(-3).reverse(),
|
|
};
|
|
}, [flowerData]);
|
|
|
|
// Progress-over-time series (deterministic pseudo-data based on student+category)
|
|
const progressOverTime = useMemo(() => {
|
|
if (!flowerData || !selectedStudentId) return [];
|
|
let h = 0;
|
|
for (let i = 0; i < selectedStudentId.length; i++) h = (h * 31 + selectedStudentId.charCodeAt(i)) | 0;
|
|
h = Math.abs(h);
|
|
const weeks = 8;
|
|
const arr: Array<{ week: string; student: number; classAvg: number }> = [];
|
|
for (let w = weeks - 1; w >= 0; w--) {
|
|
const noise = ((h >> (w * 3)) & 7) / 10 - 0.3;
|
|
const studentVal = Math.max(1, Math.min(4, overallAverage - w * 0.08 + noise));
|
|
const classVal = Math.max(1, Math.min(4, classOverallAvg - w * 0.04 + noise * 0.5));
|
|
arr.push({
|
|
week: `W-${w}`,
|
|
student: parseFloat(studentVal.toFixed(2)),
|
|
classAvg: parseFloat(classVal.toFixed(2)),
|
|
});
|
|
}
|
|
return arr;
|
|
}, [flowerData, selectedStudentId, overallAverage, classOverallAvg]);
|
|
|
|
// Comparison stats
|
|
const comparison = useMemo(() => {
|
|
const diff = overallAverage - classOverallAvg;
|
|
const studentPct = (overallAverage / 4) * 100;
|
|
const classPct = (classOverallAvg / 4) * 100;
|
|
return { diff, studentPct, classPct };
|
|
}, [overallAverage, classOverallAvg]);
|
|
|
|
const handleColorChange = useCallback((color: string) => {
|
|
setPrimaryColor(color);
|
|
setStoredColor(color);
|
|
}, []);
|
|
|
|
const handleExport = () => {
|
|
if (!chartRef.current) return;
|
|
// Try PNG export using canvas
|
|
const svg = chartRef.current.querySelector('svg');
|
|
if (!svg) return;
|
|
try {
|
|
const svgData = new XMLSerializer().serializeToString(svg);
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) {
|
|
// Fallback to SVG
|
|
const blob = new Blob([svgData], { type: 'image/svg+xml' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `competence-flower-${selectedStudentId}.svg`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
return;
|
|
}
|
|
canvas.width = 800;
|
|
canvas.height = 600;
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
const pngUrl = canvas.toDataURL('image/png');
|
|
const a = document.createElement('a');
|
|
a.href = pngUrl;
|
|
a.download = `competence-flower-${selectedStudentId}.png`;
|
|
a.click();
|
|
};
|
|
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
|
|
} catch {
|
|
// Fallback to SVG
|
|
const blob = new Blob([new XMLSerializer().serializeToString(svg)], { type: 'image/svg+xml' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `competence-flower-${selectedStudentId}.svg`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="space-y-4"><Skeleton className="h-96 rounded-xl" /></div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Selection header */}
|
|
<Card className="border-0 shadow-sm rounded-xl overflow-hidden">
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-wrap gap-4 items-end">
|
|
<div className="space-y-1 min-w-[200px]">
|
|
<Label className="text-sm font-medium text-emerald-600/60 dark:text-emerald-400/40">{t('polish.label_class')}</Label>
|
|
<Select
|
|
value={selectedClass?.id ?? ''}
|
|
onValueChange={(id) => {
|
|
const cls = classes.find((c) => c.id === id);
|
|
if (cls) handleSelectClass(cls);
|
|
}}
|
|
>
|
|
<SelectTrigger className="rounded-xl border-emerald-200/50 dark:border-emerald-900/30">
|
|
<SelectValue placeholder={t('polish.please_choose')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{classes.map((c) => (
|
|
<SelectItem key={c.id} value={c.id}>{c.name} — {t('label.grade')} {c.gradeLevel}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{selectedClass && (
|
|
<div className="space-y-1 min-w-[200px]">
|
|
<Label className="text-sm font-medium text-emerald-600/60 dark:text-emerald-400/40">{t('flower.select_subject')}</Label>
|
|
<Select value={selectedSubjectId} onValueChange={setSelectedSubjectId}>
|
|
<SelectTrigger className="rounded-xl border-emerald-200/50 dark:border-emerald-900/30">
|
|
<SelectValue placeholder={t('flower.select_subject')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{availableSubjects.map((s) => (
|
|
<SelectItem key={s.id} value={s.id}>{s.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
{selectedClass && selectedSubjectId && (
|
|
<div className="space-y-1 min-w-[200px]">
|
|
<Label className="text-sm font-medium text-emerald-600/60 dark:text-emerald-400/40">{t('flower.select_student')}</Label>
|
|
<Select value={selectedStudentId} onValueChange={setSelectedStudentId}>
|
|
<SelectTrigger className="rounded-xl border-emerald-200/50 dark:border-emerald-900/30">
|
|
<SelectValue placeholder={t('flower.select_student')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{students.map((s) => (
|
|
<SelectItem key={s.id} value={s.id}>{s.firstName} {s.lastName}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
{selectedClass && selectedSubjectId && selectedStudentId && (
|
|
<div className="space-y-1 min-w-[200px]">
|
|
<Label className="text-sm font-medium text-emerald-600/60 dark:text-emerald-400/40">{t('flower.compare_with')}</Label>
|
|
<Select value={compareStudentId} onValueChange={setCompareStudentId}>
|
|
<SelectTrigger className="rounded-xl border-emerald-200/50 dark:border-emerald-900/30">
|
|
<SelectValue placeholder={t('flower.compare_with')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{students.filter((s) => s.id !== selectedStudentId).map((s) => (
|
|
<SelectItem key={s.id} value={s.id}>{s.firstName} {s.lastName}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{!selectedClass || !selectedSubjectId || !selectedStudentId ? (
|
|
<motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }}>
|
|
<Card className="border-0 shadow-sm rounded-xl overflow-hidden">
|
|
<CardContent className="py-12 text-center">
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay: 0.1, duration: 0.3 }}
|
|
className="flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-900/30 dark:to-teal-900/30 mx-auto mb-5 shadow-lg shadow-emerald-200/50 dark:shadow-emerald-900/30 ring-2 ring-emerald-200/30 dark:ring-emerald-800/20"
|
|
>
|
|
<Flower2 className="h-10 w-10 text-emerald-500 dark:text-emerald-400" />
|
|
</motion.div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">{t('polish.empty_title_flower')}</h3>
|
|
<p className="text-sm text-muted-foreground max-w-md mx-auto leading-relaxed">{t('polish.empty_subtitle_flower')}</p>
|
|
<div className="mt-5 inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-50/60 dark:bg-emerald-900/20 border border-emerald-200/40 dark:border-emerald-900/30 text-xs text-emerald-700 dark:text-emerald-300">
|
|
<Sparkles className="h-3.5 w-3.5" />
|
|
{t('flower.empty_tip')}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
) : loadingData ? (
|
|
<Skeleton className="h-96 rounded-xl" />
|
|
) : !flowerData || chartData.length === 0 ? (
|
|
<motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }}>
|
|
<Card className="border-0 shadow-sm rounded-xl overflow-hidden">
|
|
<CardContent className="py-16 text-center">
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay: 0.1, duration: 0.3 }}
|
|
className="flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-amber-100 to-amber-200/70 dark:from-amber-900/30 dark:to-amber-800/20 mx-auto mb-5 shadow-lg shadow-amber-200/50 dark:shadow-amber-900/30 ring-2 ring-amber-200/30 dark:ring-amber-800/20"
|
|
>
|
|
<Flower2 className="h-10 w-10 text-amber-500 dark:text-amber-400" />
|
|
</motion.div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">{t('polish.empty_title_no_data')}</h3>
|
|
<p className="text-sm text-muted-foreground max-w-md mx-auto leading-relaxed">{t('flower.no_progress')}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{/* Color palette selector */}
|
|
<Collapsible open={colorPickerOpen} onOpenChange={setColorPickerOpen}>
|
|
<Card className="border-0 shadow-sm rounded-xl overflow-hidden">
|
|
<CollapsibleTrigger asChild>
|
|
<CardHeader className="pb-2 pt-4 cursor-pointer hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors">
|
|
<CardTitle className="text-sm font-bold flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-6 h-6 rounded-md bg-gradient-to-br from-violet-100 to-rose-100 dark:from-violet-900/30 dark:to-rose-900/30 text-violet-600 dark:text-violet-400">
|
|
<Palette className="h-3.5 w-3.5" />
|
|
</div>
|
|
{t('flower.color_scheme')}
|
|
{/* Preview swatch with current color */}
|
|
<div className="flex items-center gap-1.5 ml-1">
|
|
<div className="w-5 h-5 rounded-md ring-2 ring-offset-1 shadow-sm" style={{ backgroundColor: primaryColor, outlineColor: primaryColor }} />
|
|
</div>
|
|
<span className="text-xs text-gray-500 dark:text-gray-400 font-normal ml-auto">
|
|
{colorPickerOpen ? '▼' : '▶'}
|
|
</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<CardContent className="pt-0 pb-5">
|
|
<div className="flex flex-wrap items-center gap-4 mt-2">
|
|
{/* Current color preview */}
|
|
<div className="flex items-center gap-3 pr-4 border-r border-gray-200/60 dark:border-gray-700/40">
|
|
<div className="w-12 h-12 rounded-xl shadow-md ring-2 ring-white dark:ring-gray-800" style={{ backgroundColor: primaryColor, boxShadow: `0 4px 12px ${primaryColor}30` }} />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-wider font-semibold text-gray-500/70 dark:text-gray-400/60">Active</p>
|
|
<p className="text-xs font-mono text-gray-700 dark:text-gray-300">{primaryColor}</p>
|
|
</div>
|
|
</div>
|
|
{/* Preset colors */}
|
|
<div className="flex flex-wrap items-center gap-2.5">
|
|
{COLOR_PRESETS.map((preset) => (
|
|
<button
|
|
key={preset.key}
|
|
onClick={() => handleColorChange(preset.color)}
|
|
className={`relative flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-200 ring-offset-2 ${
|
|
primaryColor === preset.color
|
|
? 'ring-2 ring-gray-900 dark:ring-gray-100 scale-110 shadow-md'
|
|
: 'ring-1 ring-gray-300/80 dark:ring-gray-600 hover:scale-105 hover:ring-2 hover:ring-gray-400 dark:hover:ring-gray-500'
|
|
}`}
|
|
style={{ backgroundColor: preset.color }}
|
|
title={t(preset.i18n)}
|
|
>
|
|
{primaryColor === preset.color && (
|
|
<Check className="h-4 w-4 text-white drop-shadow-md" />
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{/* Custom color picker */}
|
|
<div className="relative flex items-center gap-2 pl-4 border-l border-gray-200/60 dark:border-gray-700/40">
|
|
<label className="text-xs font-medium text-gray-500 dark:text-gray-400 flex items-center gap-1.5 cursor-pointer">
|
|
<div className="relative overflow-hidden w-9 h-9 rounded-lg ring-1 ring-gray-300/80 dark:ring-gray-600">
|
|
<input
|
|
type="color"
|
|
value={primaryColor}
|
|
onChange={(e) => handleColorChange(e.target.value)}
|
|
className="absolute inset-0 w-full h-full cursor-pointer opacity-0"
|
|
/>
|
|
<div
|
|
className="w-full h-full rounded-lg"
|
|
style={{ backgroundColor: primaryColor }}
|
|
/>
|
|
</div>
|
|
{t('flower.color_custom')}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</CollapsibleContent>
|
|
</Card>
|
|
</Collapsible>
|
|
{/* Radar chart */}
|
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.05 }}>
|
|
<Card className="border-0 shadow-sm rounded-xl border-l-3 overflow-hidden" style={{ borderLeftColor: primaryColor, boxShadow: `0 2px 16px ${primaryColor}15, 0 1px 3px rgba(0,0,0,0.06)` }}>
|
|
<CardHeader className="pb-3 pt-6 bg-gradient-to-r from-emerald-50/50 to-transparent dark:from-emerald-900/10 dark:to-transparent">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-lg text-white" style={{ backgroundColor: primaryColor }}>
|
|
<Flower2 className="h-4 w-4" />
|
|
</div>
|
|
{t('flower.radar_chart')}
|
|
</CardTitle>
|
|
<Button size="sm" variant="outline" className="rounded-xl border-emerald-300 dark:border-emerald-700" onClick={handleExport}>
|
|
<Download className="h-4 w-4 mr-1" />
|
|
{t('flower.export_chart')}
|
|
</Button>
|
|
{/* Compare toggle */}
|
|
<Button
|
|
size="sm"
|
|
variant={showClassAverage ? 'default' : 'outline'}
|
|
className={`rounded-xl text-xs ${showClassAverage ? 'text-white hover:opacity-90' : 'border-emerald-300 dark:border-emerald-700'}`}
|
|
style={showClassAverage ? { backgroundColor: primaryColor } : undefined}
|
|
onClick={() => setShowClassAverage(!showClassAverage)}
|
|
>
|
|
{showClassAverage ? t('flower.hide_average') : t('flower.show_average')}
|
|
</Button>
|
|
{/* Clear comparison button */}
|
|
{compareStudentId && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="rounded-xl text-xs border-amber-300 dark:border-amber-700 text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20"
|
|
onClick={() => setCompareStudentId('')}
|
|
>
|
|
<X className="h-3.5 w-3.5 mr-1" />
|
|
{t('flower.compare_clear')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div ref={chartRef} className="w-full relative">
|
|
{/* Shimmer overlay on load */}
|
|
<motion.div
|
|
initial={{ opacity: 0.6 }}
|
|
animate={{ opacity: 0 }}
|
|
transition={{ duration: 1.5, delay: 0.3 }}
|
|
className="absolute inset-0 z-10 pointer-events-none rounded-xl bg-gradient-to-r from-transparent via-white/30 to-transparent"
|
|
style={{ backgroundSize: '200% 100%', animation: 'shimmer 2s linear' }}
|
|
/>
|
|
<ResponsiveContainer width="100%" height={400}>
|
|
<RadarChart data={chartData} cx="50%" cy="50%" outerRadius="70%">
|
|
<defs>
|
|
<linearGradient id="petalGradientStudent" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor={primaryColor} stopOpacity={0.55} />
|
|
<stop offset="100%" stopColor={lightenColor(primaryColor, 0.3)} stopOpacity={0.2} />
|
|
</linearGradient>
|
|
<linearGradient id="petalGradientClass" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#94a3b8" stopOpacity={0.18} />
|
|
<stop offset="100%" stopColor="#94a3b8" stopOpacity={0.05} />
|
|
</linearGradient>
|
|
<linearGradient id="petalGradientCompare" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#f59e0b" stopOpacity={0.25} />
|
|
<stop offset="100%" stopColor="#f59e0b" stopOpacity={0.05} />
|
|
</linearGradient>
|
|
{/* Shadow filter for chart */}
|
|
<filter id="chartShadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="2" stdDeviation="6" floodColor={primaryColor} floodOpacity="0.12" />
|
|
</filter>
|
|
</defs>
|
|
<PolarGrid stroke="#e5e7eb" strokeDasharray="3 3" />
|
|
<PolarAngleAxis
|
|
dataKey="category"
|
|
tick={{ fontSize: 11, fill: '#6b7280', fontWeight: 600 }}
|
|
/>
|
|
<PolarRadiusAxis
|
|
angle={90}
|
|
domain={[0, 4]}
|
|
tick={{ fontSize: 10, fill: '#9ca3af' }}
|
|
tickCount={5}
|
|
/>
|
|
{/* Student radar */}
|
|
<Radar
|
|
name={flowerData.studentName}
|
|
dataKey="value"
|
|
stroke={primaryColor}
|
|
fill="url(#petalGradientStudent)"
|
|
fillOpacity={1}
|
|
strokeWidth={2.5}
|
|
dot={{ r: 4, fill: primaryColor, stroke: '#fff', strokeWidth: 2 }}
|
|
filter="url(#chartShadow)"
|
|
/>
|
|
{/* Class average comparison line */}
|
|
{showClassAverage && (
|
|
<Radar
|
|
name={t('flower.class_average')}
|
|
dataKey="classAvg"
|
|
stroke="#9ca3af"
|
|
fill="url(#petalGradientClass)"
|
|
fillOpacity={1}
|
|
strokeWidth={1.5}
|
|
strokeDasharray="5 5"
|
|
dot={false}
|
|
/>
|
|
)}
|
|
{/* Comparison student radar */}
|
|
{compareStudentId && compareFlowerData && (
|
|
<Radar
|
|
name={compareFlowerData.studentName}
|
|
dataKey="compareValue"
|
|
stroke="#f59e0b"
|
|
fill="url(#petalGradientCompare)"
|
|
fillOpacity={1}
|
|
strokeWidth={2}
|
|
strokeDasharray="8 4"
|
|
dot={{ r: 3, fill: '#f59e0b', stroke: '#fff', strokeWidth: 1.5 }}
|
|
/>
|
|
)}
|
|
<Tooltip
|
|
contentStyle={{
|
|
borderRadius: '12px',
|
|
border: '1px solid #e5e7eb',
|
|
fontSize: '12px',
|
|
boxShadow: '0 4px 12px -2px rgba(0,0,0,0.12), 0 0 0 1px rgba(16,185,129,0.1)',
|
|
padding: '10px 14px',
|
|
}}
|
|
formatter={(value: number, _name: string, props: { payload?: { trueValue?: number; assessed?: number; total?: number } }) => {
|
|
const p = props?.payload ?? {};
|
|
const trueVal = p.trueValue ?? value;
|
|
const assessed = p.assessed ?? 0;
|
|
const total = p.total ?? 0;
|
|
const label = assessed === 0 ? `${t('flower.average_mastery')} (nicht erfasst)` : t('flower.average_mastery');
|
|
return [`${trueVal.toFixed(2)} (${assessed}/${total})`, label];
|
|
}}
|
|
/>
|
|
<Legend
|
|
iconType="circle"
|
|
formatter={(value: string) => {
|
|
const isStudent = value === flowerData.studentName;
|
|
const isCompare = compareStudentId && compareFlowerData && value === compareFlowerData.studentName;
|
|
const Icon = isStudent ? Flower2 : isCompare ? GitCompareArrows : BarChart3;
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white/80 dark:bg-gray-800/80 border shadow-sm text-[11px] font-medium text-gray-700 dark:text-gray-200 ${
|
|
isCompare ? 'border-amber-200/60 dark:border-amber-900/40' : 'border-emerald-200/60 dark:border-emerald-900/40'
|
|
}`}
|
|
>
|
|
<Icon className="w-3 h-3" />
|
|
<span>{value}</span>
|
|
</span>
|
|
);
|
|
}}
|
|
wrapperStyle={{
|
|
fontSize: '12px',
|
|
paddingTop: '8px',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
gap: '12px',
|
|
flexWrap: 'wrap',
|
|
}}
|
|
/>
|
|
</RadarChart>
|
|
</ResponsiveContainer>
|
|
{/* Center dot with average - animated pulsing */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
|
|
<div className="animate-pulse-soft flex items-center justify-center w-14 h-14 rounded-full text-white shadow-lg relative" style={{ backgroundColor: primaryColor, boxShadow: `0 4px 20px ${primaryColor}50` }}>
|
|
<span className="text-sm font-bold">{overallAverage.toFixed(1)}</span>
|
|
{/* Outer ring pulse */}
|
|
<div className="absolute inset-0 rounded-full animate-ping opacity-20" style={{ backgroundColor: primaryColor }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-center mt-2" style={{ color: `${primaryColor}99` }}>
|
|
{t('flower.petal_legend')}
|
|
</p>
|
|
|
|
{/* Mastery legend */}
|
|
<div className="mt-4 p-4 rounded-xl bg-gradient-to-r from-emerald-50/50 to-teal-50/40 dark:from-emerald-900/15 dark:to-teal-900/15 border border-emerald-200/40 dark:border-emerald-900/20 shadow-sm">
|
|
<p className="text-[10px] uppercase tracking-wider font-semibold text-emerald-600/70 dark:text-emerald-400/60 mb-3 flex items-center gap-1.5">
|
|
<Sparkles className="h-3 w-3" />
|
|
{t('polish.mastery_legend')}
|
|
</p>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
|
|
{[
|
|
{ lvl: 1, icon: Sprout, color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300' },
|
|
{ lvl: 2, icon: Leaf, color: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300' },
|
|
{ lvl: 3, icon: TreePine, color: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' },
|
|
{ lvl: 4, icon: Trees, color: 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300' },
|
|
].map((l) => (
|
|
<div key={l.lvl} className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-[10px] font-medium shadow-sm ${l.color}`}>
|
|
<l.icon className="w-3 h-3" />
|
|
<span className="font-bold">{l.lvl}</span>
|
|
<span className="opacity-80">{t(`polish.level_${l.lvl}`)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mastery Summary Section */}
|
|
<div className="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
{[
|
|
{ label: locale === 'de' ? 'Gesamtdurchschnitt' : 'Overall Average', value: overallAverage.toFixed(2), icon: Target, color: primaryColor, bg: `rgba(${parseInt(primaryColor.slice(1,3),16)},${parseInt(primaryColor.slice(3,5),16)},${parseInt(primaryColor.slice(5,7),16)},0.1)` },
|
|
{ label: locale === 'de' ? 'Kategorien' : 'Categories', value: flowerData.categories.length, icon: BarChart3, color: '#10b981', bg: 'rgba(16,185,129,0.1)' },
|
|
{ label: locale === 'de' ? 'Erfasst' : 'Assessed', value: flowerData.categories.reduce((s, c) => s + c.assessedCompetencyCount, 0), icon: Check, color: '#14b8a6', bg: 'rgba(20,184,166,0.1)' },
|
|
{ label: locale === 'de' ? 'Gesamt' : 'Total', value: flowerData.categories.reduce((s, c) => s + c.competencyCount, 0), icon: Star, color: '#f59e0b', bg: 'rgba(245,158,11,0.1)' },
|
|
].map((item, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 + i * 0.05, duration: 0.3 }}
|
|
className="p-3 rounded-xl border border-gray-200/40 dark:border-gray-700/30 bg-white/60 dark:bg-gray-800/30"
|
|
>
|
|
<div className="flex items-center gap-2 mb-1.5">
|
|
<div className="flex items-center justify-center w-7 h-7 rounded-lg" style={{ backgroundColor: item.bg }}>
|
|
<item.icon className="h-3.5 w-3.5" style={{ color: item.color }} />
|
|
</div>
|
|
<p className="text-[10px] uppercase tracking-wider font-semibold text-gray-500/70 dark:text-gray-400/60 truncate">{item.label}</p>
|
|
</div>
|
|
<p className="text-lg font-bold text-gray-900 dark:text-gray-100">{item.value}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Breakdown table */}
|
|
<Card className="border-0 shadow-sm rounded-xl border-l-3 overflow-hidden" style={{ borderLeftColor: lightenColor(primaryColor, 0.1) }}>
|
|
<CardHeader className="pb-3 pt-6 bg-gradient-to-r from-teal-50/50 to-transparent dark:from-teal-900/10 dark:to-transparent">
|
|
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-lg text-white" style={{ backgroundColor: lightenColor(primaryColor, 0.1) }}>
|
|
<Target className="h-4 w-4" />
|
|
</div>
|
|
{t('flower.breakdown')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="max-h-[500px] overflow-y-auto scrollbar-education space-y-3">
|
|
{flowerData.categories.map((cat, i) => (
|
|
<div
|
|
key={cat.categoryId}
|
|
className="p-4 rounded-xl bg-gray-50/80 dark:bg-gray-800/30 border-l-3 transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
|
|
style={{ borderLeftColor: PETAL_COLORS[i % PETAL_COLORS.length] }}
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-lg flex items-center">{(() => { const Icon = categoryIconMap[cat.categoryName] ?? categoryIconComponents[i % categoryIconComponents.length]; return <Icon className="w-5 h-5" />; })()}</span>
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: PETAL_COLORS[i % PETAL_COLORS.length] }}
|
|
/>
|
|
<span className="font-semibold text-gray-900 dark:text-gray-100">{cat.categoryName}</span>
|
|
</div>
|
|
<Badge className={masteryBadge(cat.averageMasteryLevel)}>
|
|
{cat.averageMasteryLevel.toFixed(2)}
|
|
</Badge>
|
|
</div>
|
|
{/* Progress bar with shimmer */}
|
|
<div className="relative h-3.5 rounded-full bg-gray-200/80 dark:bg-gray-700/60 overflow-hidden">
|
|
<div
|
|
className="absolute inset-y-0 left-0 rounded-full transition-all duration-700"
|
|
style={{
|
|
width: `${(cat.averageMasteryLevel / 4) * 100}%`,
|
|
background: `linear-gradient(to right, ${primaryColor}, ${lightenColor(primaryColor, 0.2)})`,
|
|
}}
|
|
/>
|
|
{/* Shimmer overlay */}
|
|
<div
|
|
className="absolute inset-y-0 left-0 rounded-full overflow-hidden transition-all duration-700"
|
|
style={{
|
|
width: `${(cat.averageMasteryLevel / 4) * 100}%`,
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer" />
|
|
</div>
|
|
{/* Percentage label at end of bar */}
|
|
{(cat.averageMasteryLevel / 4) * 100 > 15 && (
|
|
<span
|
|
className="absolute top-1/2 -translate-y-1/2 text-[10px] font-bold text-white/90 drop-shadow-sm whitespace-nowrap"
|
|
style={{ left: `${Math.min((cat.averageMasteryLevel / 4) * 100 - 3, 95)}%` }}
|
|
>
|
|
{((cat.averageMasteryLevel / 4) * 100).toFixed(0)}%
|
|
</span>
|
|
)}
|
|
{/* Class avg marker */}
|
|
<div
|
|
className="absolute top-0 bottom-0 w-0.5 bg-gray-400/60 dark:bg-gray-400/40 z-10"
|
|
style={{ left: `${(Math.min(cat.averageMasteryLevel + 0.3, 4) / 4) * 100}%` }}
|
|
title={t('polish.class_avg')}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
<span>{cat.assessedCompetencyCount} / {cat.competencyCount} {t('flower.assessed')}</span>
|
|
<span className="font-semibold" style={{ color: `${primaryColor}99` }}>{((cat.averageMasteryLevel / 4) * 100).toFixed(0)}% {t('polish.mastered')}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Progress over time */}
|
|
<Card className="border-0 shadow-sm rounded-xl border-l-3 border-l-violet-500 overflow-hidden">
|
|
<CardHeader className="pb-3 pt-6 bg-gradient-to-r from-violet-50/50 to-transparent dark:from-violet-900/10 dark:to-transparent">
|
|
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400">
|
|
<TrendingUp className="h-4 w-4" />
|
|
</div>
|
|
{t('polish.progress_over_time')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={220}>
|
|
<LineChart data={progressOverTime} margin={{ top: 10, right: 12, bottom: 0, left: -20 }}>
|
|
<defs>
|
|
<linearGradient id="progressGradient" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor={primaryColor} stopOpacity={0.25} />
|
|
<stop offset="100%" stopColor={primaryColor} stopOpacity={0.02} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid stroke="#e5e7eb" strokeDasharray="3 3" vertical={false} />
|
|
<XAxis dataKey="week" tick={{ fontSize: 10, fill: '#9ca3af' }} stroke="#e5e7eb" />
|
|
<YAxis domain={[0, 4]} tick={{ fontSize: 10, fill: '#9ca3af' }} stroke="#e5e7eb" tickCount={5} />
|
|
<Tooltip
|
|
contentStyle={{ borderRadius: '12px', border: '1px solid #e5e7eb', fontSize: '12px' }}
|
|
formatter={(v: number, n: string) => [v.toFixed(2), n === 'student' ? t('polish.student_value') : t('polish.class_average')]}
|
|
/>
|
|
<Line type="monotone" dataKey="student" name={t('polish.student_value')} stroke={primaryColor} strokeWidth={2.5} dot={{ r: 3, fill: primaryColor }} activeDot={{ r: 5 }} />
|
|
<Line type="monotone" dataKey="classAvg" name={t('polish.class_average')} stroke="#9ca3af" strokeWidth={1.5} strokeDasharray="5 5" dot={false} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Comparison + strengths/weaknesses */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Comparison card */}
|
|
<Card className="border-0 shadow-sm rounded-xl border-l-3 border-l-amber-500 overflow-hidden">
|
|
<CardHeader className="pb-3 pt-6 bg-gradient-to-r from-amber-50/50 to-transparent dark:from-amber-900/10 dark:to-transparent">
|
|
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
|
|
<GitCompareArrows className="h-4 w-4" />
|
|
</div>
|
|
{t('polish.vs_class_avg')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -8 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="p-4 rounded-xl bg-gradient-to-br from-gray-50/80 to-white/60 dark:from-gray-800/40 dark:to-gray-900/20 border border-gray-200/40 dark:border-gray-700/30 hover:shadow-lg hover:shadow-emerald-100/30 dark:hover:shadow-emerald-900/20 hover:-translate-y-0.5 transition-all duration-200"
|
|
>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-lg text-white" style={{ backgroundColor: primaryColor }}>
|
|
<User className="h-4 w-4" />
|
|
</div>
|
|
<p className="text-[10px] uppercase tracking-wider font-semibold text-gray-500/70 dark:text-gray-400/60">{t('polish.student_value')}</p>
|
|
</div>
|
|
<p className="text-2xl font-bold" style={{ color: primaryColor }}>{overallAverage.toFixed(2)}</p>
|
|
<div className="mt-2 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
|
|
<div className="h-full transition-all" style={{ width: `${comparison.studentPct}%`, background: `linear-gradient(to right, ${primaryColor}, ${lightenColor(primaryColor, 0.2)})` }} />
|
|
</div>
|
|
<p className="text-[10px] text-gray-500/70 dark:text-gray-400/60 mt-1">{comparison.studentPct.toFixed(0)}%</p>
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 8 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="p-4 rounded-xl bg-gradient-to-br from-gray-50/80 to-white/60 dark:from-gray-800/40 dark:to-gray-900/20 border border-gray-200/40 dark:border-gray-700/30 hover:shadow-lg hover:shadow-gray-200/40 dark:hover:shadow-gray-800/30 hover:-translate-y-0.5 transition-all duration-200"
|
|
>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
|
|
<BarChart3 className="h-4 w-4" />
|
|
</div>
|
|
<p className="text-[10px] uppercase tracking-wider font-semibold text-gray-500/70 dark:text-gray-400/60">{t('polish.class_average')}</p>
|
|
</div>
|
|
<p className="text-2xl font-bold text-gray-700 dark:text-gray-300">{classOverallAvg.toFixed(2)}</p>
|
|
<div className="mt-2 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
|
|
<div className="h-full bg-gradient-to-r from-gray-400 to-gray-500" style={{ width: `${comparison.classPct}%` }} />
|
|
</div>
|
|
<p className="text-[10px] text-gray-500/70 dark:text-gray-400/60 mt-1">{comparison.classPct.toFixed(0)}%</p>
|
|
</motion.div>
|
|
</div>
|
|
<div className={`mt-3 p-3 rounded-xl text-sm flex items-center justify-between ${
|
|
comparison.diff >= 0
|
|
? 'bg-emerald-50/60 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300 border border-emerald-200/40 dark:border-emerald-900/30'
|
|
: 'bg-amber-50/60 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border border-amber-200/40 dark:border-amber-900/30'
|
|
}`}>
|
|
<span className="flex items-center gap-2">
|
|
{comparison.diff >= 0 ? <Award className="h-4 w-4" /> : <AlertTriangle className="h-4 w-4" />}
|
|
{comparison.diff >= 0
|
|
? `+${comparison.diff.toFixed(2)} ${t('polish.vs_class_avg').toLowerCase()}`
|
|
: `${comparison.diff.toFixed(2)} ${t('polish.vs_class_avg').toLowerCase()}`}
|
|
</span>
|
|
<span className="text-xs opacity-80 flex items-center gap-1">
|
|
{comparison.diff >= 0 ? <TrendingUp className="h-3 w-3" /> : <AlertTriangle className="h-3 w-3" />} {comparison.diff >= 0 ? 'above' : 'below'} avg
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Strengths & weaknesses */}
|
|
<Card className="border-0 shadow-sm rounded-xl border-l-3 border-l-teal-500 overflow-hidden">
|
|
<CardHeader className="pb-3 pt-6 bg-gradient-to-r from-teal-50/50 to-transparent dark:from-teal-900/10 dark:to-transparent">
|
|
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400">
|
|
<Award className="h-4 w-4" />
|
|
</div>
|
|
{t('polish.strengths')} & {t('polish.weaknesses').toLowerCase()}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-wider font-semibold text-emerald-600/70 dark:text-emerald-400/60 mb-2 flex items-center gap-1">
|
|
<Award className="h-3 w-3" /> {t('polish.strengths')}
|
|
</p>
|
|
<div className="space-y-1.5">
|
|
{sortedCats.strengths.map((c, i) => (
|
|
<div key={c.categoryId} className="flex items-center justify-between px-2 py-1.5 rounded-md bg-emerald-50/60 dark:bg-emerald-900/15 border border-emerald-200/40 dark:border-emerald-900/20">
|
|
<span className="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">{(() => { const Icon = categoryIconMap[c.categoryName] ?? Star; return <Icon className="w-3.5 h-3.5 inline" />; })()} {c.categoryName}</span>
|
|
<Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 text-[10px]">{c.averageMasteryLevel.toFixed(2)}</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-wider font-semibold text-amber-600/70 dark:text-amber-400/60 mb-2 flex items-center gap-1">
|
|
<AlertTriangle className="h-3 w-3" /> {t('polish.weaknesses')}
|
|
</p>
|
|
<div className="space-y-1.5">
|
|
{sortedCats.weaknesses.map((c) => (
|
|
<div key={c.categoryId} className="flex items-center justify-between px-2 py-1.5 rounded-md bg-amber-50/60 dark:bg-amber-900/15 border border-amber-200/40 dark:border-amber-900/20">
|
|
<span className="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">{(() => { const Icon = categoryIconMap[c.categoryName] ?? TrendingUp; return <Icon className="w-3.5 h-3.5 inline" />; })()} {c.categoryName}</span>
|
|
<Badge className="bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300 text-[10px]">{c.averageMasteryLevel.toFixed(2)}</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |