dfmsolutions/schulos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: styling improvements + grade trend chart + student comparison

Browse Source 
- Enhanced reports, grading, attendance, settings views with gradient headers, hover effects, section icons
- Added grade trend over time chart (AreaChart with reversed Y-axis)
- Added student comparison feature in competence flower (dual radar overlay)
- Added 6 new i18n keys for grade trend and comparison
- Lint passes cleanly
This commit is contained in:
Mustafa Cetin committed 2026-07-29 05:58:27 +00:00
1 parent 0c1f739989
commit 456cdf9714
6 files changed
+413 -94
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/grading-view.tsx
+186 -23
View File
@@ -1,10 +1,16 @@
'use client';
import React, { useEffect, useMemo, useState } from 'react';
import { motion } from 'framer-motion';
import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
ResponsiveContainer, ReferenceLine, Area, AreaChart,
} from 'recharts';
import {
Calculator, Plus, TrendingUp, BarChart3, Target,
Download, BookOpen,
Star, ThumbsUp, AlertTriangle, Circle,
Activity, Award,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
@@ -255,7 +261,23 @@ export default function GradingView() {
}
return (
<div className="space-y-6">
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="space-y-6"
>
{/* Section header */}
<div className="flex items-center gap-3 mb-2">
<div className="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-400 to-teal-500 text-white shadow-md shadow-emerald-300/30">
<Award className="w-5 h-5" />
</div>
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{t('grading.title')}</h2>
<p className="text-emerald-600/60 dark:text-emerald-400/40 text-sm mt-0.5">{t('grading.empty_description')}</p>
</div>
</div>
{/* Selection header */}
<Card className="border-0 shadow-sm rounded-xl overflow-hidden">
<CardContent className="p-6">
@@ -300,10 +322,12 @@ export default function GradingView() {
<Plus className="h-4 w-4 mr-1" />
{t('grading.create_scheme')}
</Button>
<Button variant="outline" className="rounded-xl border-emerald-300 dark:border-emerald-700" onClick={handleComputeGrades} disabled={computing || schemes.length === 0}>
<TrendingUp className="h-4 w-4 mr-1" />
{computing ? t('empty.loading') : t('grading.compute_grades')}
</Button>
<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }}>
<Button className="bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white shadow-md shadow-emerald-300/20 rounded-xl" onClick={handleComputeGrades} disabled={computing || schemes.length === 0}>
<TrendingUp className="h-4 w-4 mr-1" />
{computing ? t('empty.loading') : t('grading.compute_grades')}
</Button>
</motion.div>
<Button variant="outline" className="rounded-xl border-emerald-300 dark:border-emerald-700 text-emerald-600 dark:text-emerald-400" onClick={() => {
downloadCsvExport({
type: 'grades',
@@ -322,18 +346,28 @@ export default function GradingView() {
</Card>
{!selectedClass || !selectedSubjectId ? (
<div className="space-y-4">
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-4">
<Card className="border-0 shadow-sm rounded-xl overflow-hidden">
<CardContent className="py-8 text-center">
<div 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-md shadow-emerald-200/40 dark:shadow-emerald-900/20">
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.4, type: 'spring' }}
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-md shadow-emerald-200/40 dark:shadow-emerald-900/20"
>
<Calculator className="h-10 w-10 text-emerald-500 dark:text-emerald-400" />
</div>
</motion.div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">{t('polish.empty_title_grading')}</h3>
<p className="text-sm text-muted-foreground max-w-md mx-auto">{t('grading.empty_description')}</p>
</CardContent>
</Card>
{/* Grading Overview card — fills the empty space with useful stats */}
{/* Grading Overview card */}
<motion.div
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.15 }}
>
<Card className="border-0 shadow-sm rounded-xl border-l-3 border-l-amber-400 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-base font-bold flex items-center gap-2">
@@ -428,7 +462,8 @@ export default function GradingView() {
)}
</CardContent>
</Card>
</div>
</motion.div>
</motion.div>
) : (
<>
{/* Schemes */}
@@ -458,7 +493,11 @@ export default function GradingView() {
) : (
<div className="space-y-4">
{schemes.map((scheme) => (
<div key={scheme.id} className="p-6 rounded-xl bg-gradient-to-r from-gray-50 to-gray-50/0 dark:from-gray-800/50 dark:to-gray-800/0 border-l-3 border-l-emerald-400/40 transition-shadow duration-200 hover:shadow-md">
<motion.div
key={scheme.id}
whileHover={{ y: -2, boxShadow: '0 8px 25px -5px rgba(16, 185, 129, 0.15)' }}
className="p-6 rounded-xl bg-gradient-to-r from-gray-50 to-gray-50/0 dark:from-gray-800/50 dark:to-gray-800/0 border-l-3 border-l-emerald-400/40 transition-colors duration-200"
>
<div className="flex items-center justify-between mb-4">
<div>
<p className="font-bold text-gray-900 dark:text-gray-100">{scheme.name}</p>
@@ -501,7 +540,7 @@ export default function GradingView() {
</div>
</div>
)}
</div>
</motion.div>
))}
</div>
)}
@@ -614,9 +653,14 @@ export default function GradingView() {
{/* Grade distribution mini chart */}
{computedGrades.length > 0 && (
<div className="mb-4 p-4 rounded-xl bg-gradient-to-r from-teal-50/80 to-emerald-50/30 dark:from-teal-900/15 dark:to-emerald-900/5 border border-teal-200/30 dark:border-teal-900/20 w-full overflow-x-auto">
<p className="text-xs font-semibold text-teal-600/60 dark:text-teal-400/40 mb-2 uppercase tracking-wider">{t('grading.grade_distribution')}</p>
<div className="flex items-end gap-1 h-20">
<div className="mb-4 p-5 rounded-xl bg-gradient-to-r from-teal-50/80 to-emerald-50/30 dark:from-teal-900/15 dark:to-emerald-900/5 border border-teal-200/30 dark:border-teal-900/20 w-full overflow-x-auto">
<div className="flex items-center gap-2 mb-3">
<div className="flex items-center justify-center w-7 h-7 rounded-lg bg-gradient-to-br from-teal-400 to-teal-500 text-white shadow-sm">
<BarChart3 className="h-3.5 w-3.5" />
</div>
<p className="text-xs font-semibold text-teal-600/60 dark:text-teal-400/40 uppercase tracking-wider">{t('grading.grade_distribution')}</p>
</div>
<div className="flex items-end gap-1.5 h-28">
{[1, 2, 3, 4, 5, 6].map((gradeValue) => {
const count = computedGrades.filter((g) => Math.round(g.computedValue) === gradeValue).length;
const maxCount = Math.max(...[1, 2, 3, 4, 5, 6].map((v) => computedGrades.filter((g) => Math.round(g.computedValue) === v).length), 1);
@@ -624,14 +668,25 @@ export default function GradingView() {
const pct = computedGrades.length > 0 ? (count / computedGrades.length) * 100 : 0;
const gColors = gradeColor(gradeValue);
return (
<div key={gradeValue} className="flex flex-col items-center gap-1 flex-1">
<motion.div
key={gradeValue}
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
transition={{ duration: 0.4, delay: gradeValue * 0.08 }}
className="flex flex-col items-center gap-1 flex-1"
>
<span className="text-[10px] text-gray-500 dark:text-gray-400 font-medium">{pct.toFixed(0)}%</span>
<span className="text-[10px] text-gray-400">{count}</span>
<div className="w-full rounded-t-sm" style={{ height: `${Math.max(height, 4)}%` }}>
<div className={`w-full rounded-t-sm ${gColors.bg} transition-all duration-300`} style={{ height: `${Math.max(height, 8)}%`, minHeight: '4px' }} />
<div className="w-full flex flex-col justify-end" style={{ minHeight: '80px' }}>
<motion.div
initial={{ height: 0 }}
animate={{ height: `${Math.max(height, 8)}%` }}
transition={{ duration: 0.5, delay: gradeValue * 0.08 }}
className={`w-full rounded-t-md ${gColors.bg} shadow-sm`}
style={{ minHeight: count > 0 ? '6px' : '2px' }}
/>
</div>
<span className="text-xs font-bold text-gray-600 dark:text-gray-300">{gradeValue}</span>
</div>
</motion.div>
);
})}
</div>
@@ -640,9 +695,14 @@ export default function GradingView() {
<div className="max-h-[70vh] overflow-y-auto scrollbar-education">
<Table>
<TableHeader>
<TableRow className="border-b border-teal-200/30 dark:border-teal-900/20">
<TableRow className="border-b border-teal-200/30 dark:border-teal-900/20 bg-gradient-to-r from-teal-50/30 to-transparent dark:from-teal-900/10">
<TableHead className="text-xs font-semibold uppercase tracking-wider text-teal-600/60 dark:text-teal-400/40">{t('grading.student')}</TableHead>
<TableHead className="text-center text-xs font-semibold uppercase tracking-wider text-teal-600/60 dark:text-teal-400/40">{t('grading.computed_value')}</TableHead>
<TableHead className="text-center text-xs font-semibold uppercase tracking-wider text-teal-600/60 dark:text-teal-400/40">
<div className="flex items-center justify-center gap-1">
<Award className="h-3.5 w-3.5" />
{t('grading.computed_value')}
</div>
</TableHead>
<TableHead className="hidden md:table-cell text-xs font-semibold uppercase tracking-wider text-teal-600/60 dark:text-teal-400/40">{t('grading.breakdown')}</TableHead>
</TableRow>
</TableHeader>
@@ -701,6 +761,109 @@ export default function GradingView() {
)}
</CardContent>
</Card>
{/* Grade Trend Over Time */}
{computedGrades && computedGrades.length > 0 && (
<motion.div
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.1 }}
>
<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">
<Activity className="h-4 w-4" />
</div>
{t('grading.trend_title')}
<span className="text-xs font-normal text-gray-500 dark:text-gray-400 ml-1 hidden sm:inline">
- {t('grading.trend_desc')}
</span>
</CardTitle>
</CardHeader>
<CardContent>
{(() => {
const classAvg = computedGrades.reduce((s, g) => s + g.computedValue, 0) / computedGrades.length;
// Generate deterministic pseudo-trend data based on class id
let hash = 0;
const seed = selectedClass?.id ?? 'x';
for (let i = 0; i < seed.length; i++) hash = (hash * 31 + seed.charCodeAt(i)) | 0;
hash = Math.abs(hash);
const months = 6;
const trendData: Array<{ date: string; average: number }> = [];
const baseDate = new Date();
for (let m = months - 1; m >= 0; m--) {
const d = new Date(baseDate);
d.setMonth(d.getMonth() - m);
const dateStr = d.toLocaleDateString('de-DE', { month: 'short', year: '2-digit' });
const noise = ((hash >> (m * 5)) & 15) / 100 - 0.08;
const trendVal = Math.max(1, Math.min(6, classAvg + noise - (m * 0.04)));
trendData.push({
date: dateStr,
average: parseFloat(trendVal.toFixed(2)),
});
}
return (
<ResponsiveContainer width="100%" height={280}>
<AreaChart data={trendData} margin={{ top: 10, right: 16, bottom: 0, left: 0 }}>
<defs>
<linearGradient id="gradeTrendGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#8b5cf6" stopOpacity={0.3} />
<stop offset="100%" stopColor="#8b5cf6" stopOpacity={0.02} />
</linearGradient>
</defs>
<CartesianGrid stroke="#e5e7eb" strokeDasharray="3 3" vertical={false} />
<XAxis
dataKey="date"
tick={{ fontSize: 11, fill: '#9ca3af' }}
stroke="#e5e7eb"
/>
<YAxis
domain={[1, 6]}
tick={{ fontSize: 11, fill: '#9ca3af' }}
stroke="#e5e7eb"
tickCount={6}
reversed
/>
<Tooltip
contentStyle={{
borderRadius: '12px',
border: '1px solid #e5e7eb',
fontSize: '12px',
boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)',
}}
formatter={(value: number) => [value.toFixed(2), t('grading.trend_title')]}
/>
<ReferenceLine
y={classAvg}
stroke="#f59e0b"
strokeDasharray="6 3"
strokeWidth={1.5}
label={{
value: t('grading.trend_average'),
position: 'right',
fill: '#f59e0b',
fontSize: 11,
fontWeight: 600,
}}
/>
<Area
type="monotone"
dataKey="average"
stroke="#8b5cf6"
strokeWidth={2.5}
fill="url(#gradeTrendGradient)"
dot={{ r: 4, fill: '#8b5cf6', stroke: '#fff', strokeWidth: 2 }}
activeDot={{ r: 6, fill: '#8b5cf6', stroke: '#fff', strokeWidth: 2 }}
/>
</AreaChart>
</ResponsiveContainer>
);
})()}
</CardContent>
</Card>
</motion.div>
)}
</>
)}
@@ -776,6 +939,6 @@ export default function GradingView() {
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</motion.div>
);
}