first commit
This commit is contained in:
Space
629
app/routes/dashboard.tsx
Normal file
629
app/routes/dashboard.tsx
Normal file
@@ -0,0 +1,629 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import { ProtectedRoute } from "~/components/ProtectedRoute";
|
||||
import { StatCard } from "~/components/StatCard";
|
||||
import { SubjectCard } from "~/components/SubjectCard";
|
||||
import { LoadingSpinner } from "~/components/LoadingSpinner";
|
||||
import { Button } from "~/components/Button";
|
||||
import { api } from "~/api/client";
|
||||
import type { Subject, Grade, ReportPeriod, User, TeacherGrade } from "~/types/api";
|
||||
import { calculateReportCard, calculateOverallGPA, calculateTargetProgress, getTargetStatusColor } from "~/utils/gradeCalculations";
|
||||
import { formatGradeBySystem, germanGradeToPercentage, type GradeSystem } from "~/utils/gradeSystems";
|
||||
|
||||
export default function Dashboard() {
|
||||
const navigate = useNavigate();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [subjects, setSubjects] = useState<Subject[]>([]);
|
||||
const [grades, setGrades] = useState<Grade[]>([]);
|
||||
const [periods, setPeriods] = useState<ReportPeriod[]>([]);
|
||||
const [selectedPeriod, setSelectedPeriod] = useState<ReportPeriod | null>(null);
|
||||
const [teacherGrades, setTeacherGrades] = useState<TeacherGrade[]>([]);
|
||||
const [editingTeacherGrade, setEditingTeacherGrade] = useState<{ subjectId: string; value: string; maxValue: string; notes: string } | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const [deletingTeacherGradeId, setDeletingTeacherGradeId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [userData, subjectsData, gradesData, periodsData, teacherGradesData] = await Promise.all([
|
||||
api.getMe(),
|
||||
api.getSubjects(),
|
||||
api.getGrades(),
|
||||
api.getPeriods(),
|
||||
api.getTeacherGrades(),
|
||||
]);
|
||||
|
||||
setUser(userData);
|
||||
setSubjects(subjectsData);
|
||||
setGrades(gradesData);
|
||||
setPeriods(periodsData);
|
||||
setTeacherGrades(teacherGradesData);
|
||||
|
||||
if (periodsData.length > 0) {
|
||||
// Find the period that contains today's date
|
||||
const today = new Date();
|
||||
const currentPeriod = periodsData.find(period => {
|
||||
const start = new Date(period.start_date);
|
||||
const end = new Date(period.end_date);
|
||||
return today >= start && today <= end;
|
||||
});
|
||||
|
||||
// Use current period if found, otherwise use the most recent period (first in list)
|
||||
setSelectedPeriod(currentPeriod || periodsData[0]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
api.logout();
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
const handleTeacherGradeClick = (subjectId: string) => {
|
||||
const subject = subjects.find(s => s._id === subjectId);
|
||||
if (!subject || !selectedPeriod) return;
|
||||
|
||||
const existing = teacherGrades.find(
|
||||
tg => tg.subject_id === subjectId && tg.period_id === selectedPeriod._id
|
||||
);
|
||||
|
||||
const config = getGradeInputConfig(subject.grade_system as GradeSystem);
|
||||
|
||||
setEditingTeacherGrade({
|
||||
subjectId,
|
||||
value: existing ? existing.grade.toString() : "",
|
||||
maxValue: existing ? existing.max_grade.toString() : config.maxGradeValue,
|
||||
notes: existing?.notes || "",
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveTeacherGrade = async () => {
|
||||
if (!editingTeacherGrade || !selectedPeriod) return;
|
||||
|
||||
try {
|
||||
const subject = subjects.find(s => s._id === editingTeacherGrade.subjectId);
|
||||
if (!subject) return;
|
||||
|
||||
const config = getGradeInputConfig(subject.grade_system as GradeSystem);
|
||||
const finalMaxGrade = config.showMaxGradeInput
|
||||
? parseFloat(editingTeacherGrade.maxValue)
|
||||
: parseFloat(config.maxGradeValue);
|
||||
|
||||
const data = {
|
||||
subject_id: editingTeacherGrade.subjectId,
|
||||
period_id: selectedPeriod._id,
|
||||
grade: parseFloat(editingTeacherGrade.value),
|
||||
max_grade: finalMaxGrade,
|
||||
notes: editingTeacherGrade.notes || undefined,
|
||||
};
|
||||
|
||||
const result = await api.createTeacherGrade(data);
|
||||
setTeacherGrades([...teacherGrades.filter(
|
||||
tg => !(tg.subject_id === result.subject_id && tg.period_id === result.period_id)
|
||||
), result]);
|
||||
setEditingTeacherGrade(null);
|
||||
} catch (error) {
|
||||
alert("Failed to save teacher grade");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteTeacherGrade = async (subjectId: string) => {
|
||||
if (!selectedPeriod) return;
|
||||
|
||||
const existing = teacherGrades.find(
|
||||
tg => tg.subject_id === subjectId && tg.period_id === selectedPeriod._id
|
||||
);
|
||||
|
||||
if (existing && confirm("Remove teacher's grade?")) {
|
||||
try {
|
||||
setDeletingTeacherGradeId(subjectId);
|
||||
await api.deleteTeacherGrade(existing._id);
|
||||
setTeacherGrades(teacherGrades.filter(tg => tg._id !== existing._id));
|
||||
} catch (error) {
|
||||
alert("Failed to delete teacher grade");
|
||||
} finally {
|
||||
setDeletingTeacherGradeId(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getGradeInputConfig = (gradeSystem: GradeSystem) => {
|
||||
switch (gradeSystem) {
|
||||
case "german":
|
||||
return {
|
||||
label: "German Grade",
|
||||
placeholder: "1.0",
|
||||
min: "1",
|
||||
max: "6",
|
||||
step: "0.1",
|
||||
maxGradeValue: "6",
|
||||
showMaxGradeInput: false,
|
||||
};
|
||||
case "us-letter":
|
||||
return {
|
||||
label: "Percentage",
|
||||
placeholder: "85",
|
||||
min: "0",
|
||||
max: "100",
|
||||
step: "0.01",
|
||||
maxGradeValue: "100",
|
||||
showMaxGradeInput: false,
|
||||
};
|
||||
default:
|
||||
return {
|
||||
label: "Grade",
|
||||
placeholder: "85",
|
||||
min: "0",
|
||||
max: undefined,
|
||||
step: "0.01",
|
||||
maxGradeValue: "100",
|
||||
showMaxGradeInput: true,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportCSV = async () => {
|
||||
try {
|
||||
setExporting(true);
|
||||
await api.exportGradesCSV(selectedPeriod?._id);
|
||||
} catch (error) {
|
||||
console.error("Failed to export grades:", error);
|
||||
alert("Failed to export grades. Please try again.");
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
|
||||
const reportCardData = selectedPeriod
|
||||
? calculateReportCard(
|
||||
subjects,
|
||||
grades,
|
||||
new Date(selectedPeriod.start_date),
|
||||
new Date(selectedPeriod.end_date)
|
||||
)
|
||||
: [];
|
||||
|
||||
const calculatedGPA = calculateOverallGPA(reportCardData);
|
||||
|
||||
// Calculate GPA with teacher grade overrides
|
||||
const getSubjectFinalGrade = (subjectId: string, calculatedAverage: number) => {
|
||||
if (!selectedPeriod) return calculatedAverage;
|
||||
const teacherGrade = teacherGrades.find(
|
||||
tg => tg.subject_id === subjectId && tg.period_id === selectedPeriod._id
|
||||
);
|
||||
if (!teacherGrade) return calculatedAverage;
|
||||
|
||||
const subject = subjects.find(s => s._id === subjectId);
|
||||
if (!subject) return calculatedAverage;
|
||||
|
||||
// Convert teacher grade to percentage
|
||||
const gradeSystem = subject.grade_system as GradeSystem || "percentage";
|
||||
if (gradeSystem === "german" && teacherGrade.max_grade === 6) {
|
||||
return germanGradeToPercentage(teacherGrade.grade);
|
||||
}
|
||||
return (teacherGrade.grade / teacherGrade.max_grade) * 100;
|
||||
};
|
||||
|
||||
const overallGPA = selectedPeriod && reportCardData.length > 0
|
||||
? reportCardData.reduce((sum, data) => {
|
||||
const finalGrade = getSubjectFinalGrade(data.subject._id, data.overallAverage);
|
||||
return sum + finalGrade;
|
||||
}, 0) / reportCardData.length
|
||||
: calculatedGPA;
|
||||
|
||||
// Use the first subject's grading system as the primary system
|
||||
const primaryGradeSystem = (subjects[0]?.grade_system as GradeSystem) || "percentage";
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<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">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Grademaxxing</h1>
|
||||
<p className="text-sm text-gray-600">Welcome back, {user?.username}!</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Link to="/periods">
|
||||
<Button variant="ghost">Report Periods</Button>
|
||||
</Link>
|
||||
<Link to="/subjects">
|
||||
<Button variant="secondary">Manage Subjects</Button>
|
||||
</Link>
|
||||
<Button variant="ghost" onClick={handleLogout}>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Period Selector */}
|
||||
{periods.length > 0 && (
|
||||
<div className="mb-8 flex items-end gap-4">
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Select Report Period
|
||||
</label>
|
||||
<select
|
||||
value={selectedPeriod?._id || ""}
|
||||
onChange={(e) => {
|
||||
const period = periods.find((p) => p._id === e.target.value);
|
||||
setSelectedPeriod(period || null);
|
||||
}}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{periods.map((period) => (
|
||||
<option key={period._id} value={period._id}>
|
||||
{period.name} ({new Date(period.start_date).toLocaleDateString()} -{" "}
|
||||
{new Date(period.end_date).toLocaleDateString()})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleExportCSV}
|
||||
disabled={exporting}
|
||||
variant="secondary"
|
||||
>
|
||||
{exporting ? "Exporting..." : "📥 Export CSV"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<StatCard
|
||||
title="Overall Average"
|
||||
value={
|
||||
overallGPA > 0
|
||||
? selectedPeriod && teacherGrades.some(tg => tg.period_id === selectedPeriod._id) && calculatedGPA !== overallGPA
|
||||
? `${formatGradeBySystem(overallGPA, primaryGradeSystem, 1)} (${formatGradeBySystem(calculatedGPA, primaryGradeSystem, 1)})`
|
||||
: formatGradeBySystem(overallGPA, primaryGradeSystem, 1)
|
||||
: "-"
|
||||
}
|
||||
subtitle={selectedPeriod?.name || "All time"}
|
||||
color="#3b82f6"
|
||||
/>
|
||||
<StatCard
|
||||
title="Total Subjects"
|
||||
value={subjects.length}
|
||||
subtitle={`${reportCardData.filter((d) => d.grades.length > 0).length} with grades`}
|
||||
color="#10b981"
|
||||
/>
|
||||
<StatCard
|
||||
title="Total Grades"
|
||||
value={grades.length}
|
||||
subtitle={`${
|
||||
selectedPeriod
|
||||
? reportCardData.reduce((sum, d) => sum + d.grades.length, 0)
|
||||
: grades.length
|
||||
} in period`}
|
||||
color="#f59e0b"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Improvement Tips */}
|
||||
{selectedPeriod && reportCardData.length > 0 && (
|
||||
(() => {
|
||||
const tipsForSubjects = reportCardData
|
||||
.filter(data => data.categoryAverages.length > 1 && data.categoryAverages.every(c => c.average > 0))
|
||||
.map(data => {
|
||||
const sortedCategories = [...data.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) {
|
||||
return {
|
||||
subject: data.subject,
|
||||
weakest,
|
||||
strongest,
|
||||
difference
|
||||
};
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter(tip => tip !== null);
|
||||
|
||||
if (tipsForSubjects.length > 0) {
|
||||
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">💡 Improvement Tips</h3>
|
||||
<div className="mt-2 text-sm text-blue-700 space-y-2">
|
||||
{tipsForSubjects.map((tip, idx) => (
|
||||
<p key={idx}>
|
||||
<strong>{tip!.subject.name}:</strong> Your {tip!.weakest.categoryName} ({formatGradeBySystem(
|
||||
tip!.weakest.average,
|
||||
primaryGradeSystem,
|
||||
1
|
||||
)}) needs work compared to {tip!.strongest.categoryName} ({formatGradeBySystem(
|
||||
tip!.strongest.average,
|
||||
primaryGradeSystem,
|
||||
1
|
||||
)}). Focus on {tip!.weakest.categoryName.toLowerCase()} to improve!
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()
|
||||
)}
|
||||
|
||||
{/* Report Card */}
|
||||
{selectedPeriod && reportCardData.length > 0 ? (
|
||||
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
||||
Report Card - {selectedPeriod.name}
|
||||
</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-3 px-4 font-semibold text-gray-700">
|
||||
Subject
|
||||
</th>
|
||||
{reportCardData[0]?.categoryAverages.map((cat) => (
|
||||
<th
|
||||
key={cat.categoryName}
|
||||
className="text-right py-3 px-4 font-semibold text-gray-700"
|
||||
>
|
||||
{cat.categoryName} ({cat.weight}%)
|
||||
</th>
|
||||
))}
|
||||
<th className="text-right py-3 px-4 font-semibold text-gray-700">
|
||||
Final Grade
|
||||
</th>
|
||||
<th className="text-right py-3 px-4 font-semibold text-gray-700">
|
||||
Target
|
||||
</th>
|
||||
<th className="text-right py-3 px-4 font-semibold text-gray-700">
|
||||
Diff
|
||||
</th>
|
||||
<th className="text-right py-3 px-4 font-semibold text-gray-700">
|
||||
Teacher's Grade
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{reportCardData.map((data) => {
|
||||
const teacherGrade = selectedPeriod ? teacherGrades.find(
|
||||
tg => tg.subject_id === data.subject._id && tg.period_id === selectedPeriod._id
|
||||
) : null;
|
||||
|
||||
const isEditing = editingTeacherGrade?.subjectId === data.subject._id;
|
||||
|
||||
// Calculate target progress for this subject
|
||||
const targetProgress = calculateTargetProgress(data.overallAverage, data.subject);
|
||||
|
||||
return (
|
||||
<tr key={data.subject._id} className="border-b hover:bg-gray-50">
|
||||
<td className="py-3 px-4 font-medium">{data.subject.name}</td>
|
||||
{data.categoryAverages.map((cat) => (
|
||||
<td key={cat.categoryName} className="text-right py-3 px-4">
|
||||
{cat.average > 0
|
||||
? formatGradeBySystem(
|
||||
cat.average,
|
||||
primaryGradeSystem,
|
||||
1
|
||||
)
|
||||
: "-"}
|
||||
</td>
|
||||
))}
|
||||
<td className="text-right py-3 px-4 font-bold">
|
||||
{teacherGrade ? (
|
||||
<span className="text-green-700">
|
||||
{formatGradeBySystem(
|
||||
primaryGradeSystem === "german" && teacherGrade.max_grade === 6
|
||||
? germanGradeToPercentage(teacherGrade.grade)
|
||||
: (teacherGrade.grade / teacherGrade.max_grade) * 100,
|
||||
primaryGradeSystem,
|
||||
1
|
||||
)}
|
||||
{data.overallAverage > 0 && (
|
||||
<span className="text-gray-500 text-sm font-normal">
|
||||
{" "}({formatGradeBySystem(
|
||||
data.overallAverage,
|
||||
primaryGradeSystem,
|
||||
1
|
||||
)})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-blue-600">
|
||||
{data.overallAverage > 0
|
||||
? formatGradeBySystem(
|
||||
data.overallAverage,
|
||||
primaryGradeSystem,
|
||||
1
|
||||
)
|
||||
: "-"}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-right py-3 px-4 text-gray-600">
|
||||
{targetProgress.status !== "no-target"
|
||||
? primaryGradeSystem === "german" && data.subject.target_grade_max === 6
|
||||
? data.subject.target_grade?.toFixed(1)
|
||||
: formatGradeBySystem(
|
||||
targetProgress.targetPercentage,
|
||||
primaryGradeSystem,
|
||||
1
|
||||
)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`text-right py-3 px-4 font-semibold ${getTargetStatusColor(targetProgress.status)}`}>
|
||||
{targetProgress.status !== "no-target" && data.overallAverage > 0
|
||||
? (targetProgress.difference > 0 ? "+" : "") + targetProgress.difference.toFixed(1) + "%"
|
||||
: "-"}
|
||||
</td>
|
||||
<td className="text-right py-3 px-4">
|
||||
{isEditing ? (
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<input
|
||||
type="number"
|
||||
value={editingTeacherGrade.value}
|
||||
onChange={(e) => setEditingTeacherGrade({
|
||||
...editingTeacherGrade,
|
||||
value: e.target.value
|
||||
})}
|
||||
className="w-20 px-2 py-1 border rounded text-sm"
|
||||
placeholder={getGradeInputConfig(primaryGradeSystem).placeholder}
|
||||
min={getGradeInputConfig(primaryGradeSystem).min}
|
||||
max={getGradeInputConfig(primaryGradeSystem).max}
|
||||
step={getGradeInputConfig(primaryGradeSystem).step}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSaveTeacherGrade}
|
||||
className="text-green-600 hover:text-green-800"
|
||||
title="Save"
|
||||
>
|
||||
✓
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingTeacherGrade(null)}
|
||||
className="text-red-600 hover:text-red-800"
|
||||
title="Cancel"
|
||||
>
|
||||
✗
|
||||
</button>
|
||||
</div>
|
||||
) : teacherGrade ? (
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<span className="font-bold text-green-700">
|
||||
{formatGradeBySystem(
|
||||
primaryGradeSystem === "german" && teacherGrade.max_grade === 6
|
||||
? germanGradeToPercentage(teacherGrade.grade)
|
||||
: (teacherGrade.grade / teacherGrade.max_grade) * 100,
|
||||
primaryGradeSystem,
|
||||
1
|
||||
)}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleTeacherGradeClick(data.subject._id)}
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
title="Edit"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteTeacherGrade(data.subject._id)}
|
||||
className="text-red-600 hover:text-red-800 disabled:opacity-50"
|
||||
title="Remove"
|
||||
disabled={deletingTeacherGradeId === data.subject._id}
|
||||
>
|
||||
{deletingTeacherGradeId === data.subject._id ? "..." : "✗"}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleTeacherGradeClick(data.subject._id)}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||
>
|
||||
+ Add
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mb-8">
|
||||
<p className="text-yellow-800">
|
||||
{periods.length === 0 ? (
|
||||
<>
|
||||
No report periods defined.{" "}
|
||||
<Link to="/periods" className="underline font-medium">
|
||||
Create your first period
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
"No grades recorded for this period yet."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Subjects Grid */}
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<h2 className="text-xl font-bold text-gray-900">Your Subjects</h2>
|
||||
<Link to="/subjects/new">
|
||||
<Button>+ Add Subject</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{subjects.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{subjects.map((subject) => {
|
||||
const subjectGrades = grades.filter((g) => g.subject_id === subject._id);
|
||||
const avgData = reportCardData.find((d) => d.subject._id === subject._id);
|
||||
const teacherGrade = selectedPeriod ? teacherGrades.find(
|
||||
tg => tg.subject_id === subject._id && tg.period_id === selectedPeriod._id
|
||||
) : null;
|
||||
|
||||
const calculatedAverage = avgData?.overallAverage;
|
||||
const finalAverage = calculatedAverage !== undefined
|
||||
? getSubjectFinalGrade(subject._id, calculatedAverage)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<SubjectCard
|
||||
key={subject._id}
|
||||
subject={subject}
|
||||
averageGrade={finalAverage}
|
||||
calculatedAverage={calculatedAverage}
|
||||
gradeSystem={primaryGradeSystem}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-lg shadow p-12 text-center">
|
||||
<p className="text-gray-600 mb-4">No subjects yet. Create your first subject!</p>
|
||||
<Link to="/subjects/new">
|
||||
<Button>+ Add Subject</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user