487 lines
19 KiB
TypeScript
487 lines
19 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { useParams, Link, useNavigate } from "react-router";
|
||
import { ProtectedRoute } from "~/components/ProtectedRoute";
|
||
import { GradeTable } from "~/components/GradeTable";
|
||
import { GradeCalculator } from "~/components/GradeCalculator";
|
||
import { LoadingSpinner } from "~/components/LoadingSpinner";
|
||
import { Button } from "~/components/Button";
|
||
import { Input } from "~/components/Input";
|
||
import { api } from "~/api/client";
|
||
import type { Subject, Grade, GradeCreate, GradeUpdate } from "~/types/api";
|
||
import { calculateSubjectAverage, calculateTargetProgress, getTargetStatusColor } from "~/utils/gradeCalculations";
|
||
import { formatGradeBySystem, getGermanGradeDescription, germanGradeToPercentage, type GradeSystem } from "~/utils/gradeSystems";
|
||
|
||
export default function SubjectDetail() {
|
||
const { subjectId } = useParams<{ subjectId: string }>();
|
||
const navigate = useNavigate();
|
||
const [subject, setSubject] = useState<Subject | null>(null);
|
||
const [grades, setGrades] = useState<Grade[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [showAddForm, setShowAddForm] = useState(false);
|
||
const [editingGrade, setEditingGrade] = useState<Grade | null>(null);
|
||
const [deletingGradeId, setDeletingGradeId] = useState<string | null>(null);
|
||
|
||
// Form state
|
||
const [gradeName, setGradeName] = useState("");
|
||
const [gradeValue, setGradeValue] = useState("");
|
||
const [maxGrade, setMaxGrade] = useState("100");
|
||
const [category, setCategory] = useState("");
|
||
const [weight, setWeight] = useState("1");
|
||
const [date, setDate] = useState(new Date().toISOString().split("T")[0]);
|
||
const [notes, setNotes] = useState("");
|
||
const [error, setError] = useState("");
|
||
|
||
// Get input parameters based on grading system
|
||
const getGradeInputConfig = () => {
|
||
const system = (subject?.grade_system || "percentage") as GradeSystem;
|
||
switch (system) {
|
||
case "german":
|
||
return {
|
||
label: "German Grade",
|
||
placeholder: "1.0",
|
||
min: "1",
|
||
max: "6",
|
||
step: "0.1",
|
||
maxGradeValue: "6",
|
||
showMaxGradeInput: false,
|
||
helpText: "1 = sehr gut, 6 = ungenügend"
|
||
};
|
||
case "us-letter":
|
||
return {
|
||
label: "Percentage",
|
||
placeholder: "85",
|
||
min: "0",
|
||
max: "100",
|
||
step: "0.01",
|
||
maxGradeValue: "100",
|
||
showMaxGradeInput: false,
|
||
helpText: "Enter as percentage (0-100)"
|
||
};
|
||
default: // percentage
|
||
return {
|
||
label: "Grade",
|
||
placeholder: "85",
|
||
min: "0",
|
||
max: undefined,
|
||
step: "0.01",
|
||
maxGradeValue: "100",
|
||
showMaxGradeInput: true,
|
||
helpText: undefined
|
||
};
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadData();
|
||
}, [subjectId]);
|
||
|
||
const loadData = async () => {
|
||
if (!subjectId) return;
|
||
|
||
try {
|
||
const [subjectData, gradesData] = await Promise.all([
|
||
api.getSubject(subjectId),
|
||
api.getGrades(subjectId),
|
||
]);
|
||
setSubject(subjectData);
|
||
setGrades(gradesData);
|
||
if (subjectData.grading_categories.length > 0) {
|
||
setCategory(subjectData.grading_categories[0].name);
|
||
}
|
||
} catch (error) {
|
||
console.error("Failed to load subject:", error);
|
||
navigate("/subjects");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSubmitGrade = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError("");
|
||
|
||
if (!subject) return;
|
||
|
||
const config = getGradeInputConfig();
|
||
const finalMaxGrade = config.showMaxGradeInput ? parseFloat(maxGrade) : parseFloat(config.maxGradeValue);
|
||
|
||
try {
|
||
if (editingGrade) {
|
||
// Update existing grade
|
||
const updateData: GradeUpdate = {
|
||
category_name: category,
|
||
grade: parseFloat(gradeValue),
|
||
max_grade: finalMaxGrade,
|
||
weight_in_category: parseFloat(weight),
|
||
name: gradeName.trim() || undefined,
|
||
date: new Date(date).toISOString(),
|
||
notes: notes.trim() || undefined,
|
||
};
|
||
const updated = await api.updateGrade(editingGrade._id, updateData);
|
||
setGrades(grades.map((g) => (g._id === editingGrade._id ? updated : g)));
|
||
} else {
|
||
// Create new grade
|
||
const gradeData: GradeCreate = {
|
||
subject_id: subject._id,
|
||
category_name: category,
|
||
grade: parseFloat(gradeValue),
|
||
max_grade: finalMaxGrade,
|
||
weight_in_category: parseFloat(weight),
|
||
name: gradeName.trim() || undefined,
|
||
date: new Date(date).toISOString(),
|
||
notes: notes.trim() || undefined,
|
||
};
|
||
const newGrade = await api.createGrade(gradeData);
|
||
setGrades([newGrade, ...grades]);
|
||
}
|
||
// Reset form
|
||
setGradeName("");
|
||
setGradeValue("");
|
||
setMaxGrade("100");
|
||
setWeight("1");
|
||
setDate(new Date().toISOString().split("T")[0]);
|
||
setNotes("");
|
||
setShowAddForm(false);
|
||
setEditingGrade(null);
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : editingGrade ? "Failed to update grade" : "Failed to add grade");
|
||
}
|
||
};
|
||
|
||
const gradeInputConfig = subject ? getGradeInputConfig() : null;
|
||
|
||
const handleEditGrade = (grade: Grade) => {
|
||
setEditingGrade(grade);
|
||
setGradeName(grade.name || "");
|
||
setGradeValue(grade.grade.toString());
|
||
setMaxGrade(grade.max_grade.toString());
|
||
setCategory(grade.category_name);
|
||
setWeight(grade.weight_in_category.toString());
|
||
setDate(new Date(grade.date).toISOString().split("T")[0]);
|
||
setNotes(grade.notes || "");
|
||
setShowAddForm(true);
|
||
};
|
||
|
||
const handleCancelEdit = () => {
|
||
setEditingGrade(null);
|
||
setGradeName("");
|
||
setGradeValue("");
|
||
setMaxGrade("100");
|
||
setWeight("1");
|
||
setDate(new Date().toISOString().split("T")[0]);
|
||
setNotes("");
|
||
setShowAddForm(false);
|
||
};
|
||
|
||
const handleDeleteGrade = async (gradeId: string) => {
|
||
if (!confirm("Delete this grade?")) return;
|
||
|
||
try {
|
||
setDeletingGradeId(gradeId);
|
||
await api.deleteGrade(gradeId);
|
||
setGrades(grades.filter((g) => g._id !== gradeId));
|
||
} catch (error) {
|
||
alert("Failed to delete grade");
|
||
} finally {
|
||
setDeletingGradeId(null);
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<ProtectedRoute>
|
||
<div className="min-h-screen flex items-center justify-center">
|
||
<LoadingSpinner size="lg" />
|
||
</div>
|
||
</ProtectedRoute>
|
||
);
|
||
}
|
||
|
||
if (!subject) {
|
||
return null;
|
||
}
|
||
|
||
const avgData = calculateSubjectAverage(subject, grades);
|
||
const targetProgress = calculateTargetProgress(avgData.overallAverage, subject);
|
||
|
||
return (
|
||
<ProtectedRoute>
|
||
<div className="min-h-screen bg-gray-50">
|
||
<header className="bg-white shadow-sm border-b">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||
<Link to="/subjects" className="text-blue-600 hover:text-blue-700 text-sm">
|
||
← Back to Subjects
|
||
</Link>
|
||
<div className="flex justify-between items-center mt-2">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900">{subject.name}</h1>
|
||
{subject.teacher && (
|
||
<p className="text-sm text-gray-600">{subject.teacher}</p>
|
||
)}
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-3xl font-bold" style={{ color: subject.color }}>
|
||
{avgData.overallAverage > 0 ? formatGradeBySystem(
|
||
avgData.overallAverage,
|
||
(subject.grade_system as GradeSystem) || "percentage",
|
||
1
|
||
) : "-"}
|
||
</div>
|
||
<p className="text-sm text-gray-600">Overall Average</p>
|
||
{targetProgress.status !== "no-target" && avgData.overallAverage > 0 && (
|
||
<div className="mt-2 pt-2 border-t">
|
||
<div className="flex items-center gap-2 justify-end text-sm">
|
||
<span className="text-gray-600">Target:</span>
|
||
<span className="font-semibold">
|
||
{formatGradeBySystem(
|
||
targetProgress.targetPercentage,
|
||
(subject.grade_system as GradeSystem) || "percentage",
|
||
1
|
||
)}
|
||
</span>
|
||
</div>
|
||
<div className={`text-sm font-semibold ${getTargetStatusColor(targetProgress.status)}`}>
|
||
{targetProgress.difference > 0 ? "+" : ""}{targetProgress.difference.toFixed(1)}%
|
||
{targetProgress.status === "above" ? "above target" : targetProgress.status === "near" ? "near target" : "below target"}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
{/* Improvement Tip */}
|
||
{avgData.categoryAverages.length > 1 && avgData.categoryAverages.every(c => c.average > 0) && (
|
||
(() => {
|
||
const sortedCategories = [...avgData.categoryAverages].sort((a, b) => a.average - b.average);
|
||
const weakest = sortedCategories[0];
|
||
const strongest = sortedCategories[sortedCategories.length - 1];
|
||
const difference = strongest.average - weakest.average;
|
||
|
||
if (difference > 5) { // Only show if there's a significant difference
|
||
return (
|
||
<div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
|
||
<div className="flex">
|
||
<div className="flex-shrink-0">
|
||
<svg className="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<div className="ml-3">
|
||
<h3 className="text-sm font-medium text-blue-800"><EFBFBD> Improvement Tip</h3>
|
||
<div className="mt-2 text-sm text-blue-700">
|
||
<p>
|
||
Your <strong>{weakest.categoryName}</strong> grades ({formatGradeBySystem(
|
||
weakest.average,
|
||
(subject.grade_system as GradeSystem) || "percentage",
|
||
1
|
||
)}) are lower than your <strong>{strongest.categoryName}</strong> ({formatGradeBySystem(
|
||
strongest.average,
|
||
(subject.grade_system as GradeSystem) || "percentage",
|
||
1
|
||
)}).
|
||
Focus more on improving your {weakest.categoryName.toLowerCase()} performance to boost your overall grade!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
return null;
|
||
})()
|
||
)}
|
||
|
||
{/* Grade Calculator */}
|
||
<div className="mb-6">
|
||
<GradeCalculator subject={subject} currentGrades={grades} />
|
||
</div>
|
||
|
||
{/* Category Averages */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
||
{avgData.categoryAverages.map((cat) => (
|
||
<div
|
||
key={cat.categoryName}
|
||
className="bg-white rounded-lg border-2 p-4"
|
||
style={{ borderColor: cat.color || "#e5e7eb" }}
|
||
>
|
||
<p className="text-sm font-medium text-gray-600">{cat.categoryName}</p>
|
||
<p className="text-2xl font-bold mt-1" style={{ color: cat.color }}>
|
||
{cat.average > 0 ? formatGradeBySystem(
|
||
cat.average,
|
||
(subject.grade_system as GradeSystem) || "percentage",
|
||
1
|
||
) : "-"}
|
||
</p>
|
||
<p className="text-sm text-gray-500">Weight: {cat.weight}%</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Add Grade Button/Form */}
|
||
<div className="mb-6">
|
||
{!showAddForm ? (
|
||
<div className="flex gap-3">
|
||
<Button onClick={() => setShowAddForm(true)}>+ Add Grade</Button>
|
||
<Link to={`/subjects/${subjectId}/edit`}>
|
||
<Button variant="secondary">Edit Subject</Button>
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<div className="bg-white rounded-lg shadow p-6">
|
||
<h3 className="text-lg font-semibold mb-4">{editingGrade ? "Edit Grade" : "Add New Grade"}</h3>
|
||
<form onSubmit={handleSubmitGrade} className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<Input
|
||
label="Grade Name (Optional)"
|
||
value={gradeName}
|
||
onChange={(e) => setGradeName(e.target.value)}
|
||
placeholder="e.g., Midterm Exam"
|
||
/>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Category
|
||
</label>
|
||
<select
|
||
value={category}
|
||
onChange={(e) => setCategory(e.target.value)}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-lg"
|
||
required
|
||
>
|
||
{subject.grading_categories.map((cat) => (
|
||
<option key={cat.name} value={cat.name}>
|
||
{cat.name} ({cat.weight}%)
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<Input
|
||
label={gradeInputConfig?.label || "Grade"}
|
||
type="number"
|
||
value={gradeValue}
|
||
onChange={(e) => setGradeValue(e.target.value)}
|
||
placeholder={gradeInputConfig?.placeholder || "85"}
|
||
required
|
||
min={gradeInputConfig?.min || "0"}
|
||
max={gradeInputConfig?.max}
|
||
step={gradeInputConfig?.step || "0.01"}
|
||
/>
|
||
{gradeInputConfig?.helpText && (
|
||
<p className="text-xs text-gray-500 mt-1">{gradeInputConfig.helpText}</p>
|
||
)}
|
||
</div>
|
||
{gradeInputConfig?.showMaxGradeInput && (
|
||
<Input
|
||
label="Max Grade"
|
||
type="number"
|
||
value={maxGrade}
|
||
onChange={(e) => setMaxGrade(e.target.value)}
|
||
placeholder="100"
|
||
required
|
||
min="0"
|
||
step="0.01"
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* Grade Preview */}
|
||
{gradeValue && gradeInputConfig && (
|
||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||
<div className="text-sm font-medium text-blue-900 mb-1">Grade Preview</div>
|
||
{subject?.grade_system === "german" ? (
|
||
<>
|
||
<div className="text-2xl font-bold text-blue-700">
|
||
{parseFloat(gradeValue).toFixed(1)}
|
||
</div>
|
||
<div className="text-sm text-blue-600 mt-1">
|
||
{getGermanGradeDescription(parseFloat(gradeValue))}
|
||
</div>
|
||
<div className="text-xs text-blue-600 mt-2">
|
||
Percentage equivalent: {germanGradeToPercentage(parseFloat(gradeValue)).toFixed(1)}%
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="text-2xl font-bold text-blue-700">
|
||
{formatGradeBySystem(
|
||
gradeInputConfig.showMaxGradeInput && maxGrade && parseFloat(maxGrade) > 0
|
||
? (parseFloat(gradeValue) / parseFloat(maxGrade)) * 100
|
||
: parseFloat(gradeValue),
|
||
(subject?.grade_system as GradeSystem) || "percentage"
|
||
)}
|
||
</div>
|
||
{gradeInputConfig.showMaxGradeInput && maxGrade && parseFloat(maxGrade) > 0 && (
|
||
<div className="text-xs text-blue-600 mt-2">
|
||
Percentage: {((parseFloat(gradeValue) / parseFloat(maxGrade)) * 100).toFixed(1)}%
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<Input
|
||
label="Weight in Category"
|
||
type="number"
|
||
value={weight}
|
||
onChange={(e) => setWeight(e.target.value)}
|
||
placeholder="1"
|
||
required
|
||
min="0"
|
||
step="0.1"
|
||
/>
|
||
<Input
|
||
label="Date"
|
||
type="date"
|
||
value={date}
|
||
onChange={(e) => setDate(e.target.value)}
|
||
required
|
||
/>
|
||
</div>
|
||
<Input
|
||
label="Notes (Optional)"
|
||
value={notes}
|
||
onChange={(e) => setNotes(e.target.value)}
|
||
placeholder="Additional notes..."
|
||
/>
|
||
{error && (
|
||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||
{error}
|
||
</div>
|
||
)}
|
||
<div className="flex gap-3">
|
||
<Button type="submit">{editingGrade ? "Update Grade" : "Add Grade"}</Button>
|
||
<Button
|
||
type="button"
|
||
variant="secondary"
|
||
onClick={handleCancelEdit}
|
||
>
|
||
Cancel
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Grades Table */}
|
||
<div className="bg-white rounded-lg shadow p-6">
|
||
<h3 className="text-lg font-semibold mb-4">All Grades</h3>
|
||
<GradeTable
|
||
grades={grades}
|
||
subject={subject}
|
||
onEdit={handleEditGrade}
|
||
onDelete={handleDeleteGrade}
|
||
deletingGradeId={deletingGradeId}
|
||
/>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</ProtectedRoute>
|
||
);
|
||
}
|