first commit
This commit is contained in:
Space
486
app/routes/subjects.$subjectId.tsx
Normal file
486
app/routes/subjects.$subjectId.tsx
Normal file
@@ -0,0 +1,486 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user