first commit

app/routes/dashboard.tsx

@@ -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>
+  );
+}

app/routes/home.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router";
+import { api } from "~/api/client";
+
+export default function Home() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Redirect to dashboard if authenticated, otherwise to login
+    if (api.isAuthenticated()) {
+      navigate("/dashboard");
+    } else {
+      navigate("/login");
+    }
+  }, [navigate]);
+
+  return null;
+}

app/routes/login.tsx

@@ -0,0 +1,78 @@
+import { useState, type FormEvent } from "react";
+import { useNavigate, Link } from "react-router";
+import { api } from "~/api/client";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
+
+export default function Login() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      await api.login({ email, password });
+      navigate("/dashboard");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 px-4">
+      <div className="max-w-md w-full bg-white rounded-lg shadow-xl p-8">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Grademaxxing</h1>
+          <p className="text-gray-600 mt-2">Sign in to your account</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <Input
+            type="email"
+            label="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="your@email.com"
+            required
+            autoComplete="email"
+          />
+
+          <Input
+            type="password"
+            label="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="••••••••"
+            required
+            autoComplete="current-password"
+          />
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+              {error}
+            </div>
+          )}
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? "Signing in..." : "Sign In"}
+          </Button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-gray-600">
+          Don't have an account?{" "}
+          <Link to="/register" className="text-blue-600 hover:text-blue-700 font-medium">
+            Sign up
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

app/routes/periods.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useState, type FormEvent } from "react";
+import { Link } from "react-router";
+import { ProtectedRoute } from "~/components/ProtectedRoute";
+import { LoadingSpinner } from "~/components/LoadingSpinner";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
+import { api } from "~/api/client";
+import type { ReportPeriod, ReportPeriodCreate, ReportPeriodUpdate } from "~/types/api";
+
+export default function ReportPeriods() {
+  const [periods, setPeriods] = useState<ReportPeriod[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [editingPeriod, setEditingPeriod] = useState<ReportPeriod | null>(null);
+  const [name, setName] = useState("");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    loadPeriods();
+  }, []);
+
+  const loadPeriods = async () => {
+    try {
+      const data = await api.getPeriods();
+      setPeriods(data);
+    } catch (error) {
+      console.error("Failed to load periods:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (new Date(endDate) <= new Date(startDate)) {
+      setError("End date must be after start date");
+      return;
+    }
+
+    try {
+      if (editingPeriod) {
+        // Update existing period
+        const updateData: ReportPeriodUpdate = {
+          name: name.trim(),
+          start_date: new Date(startDate).toISOString(),
+          end_date: new Date(endDate).toISOString(),
+        };
+        const updated = await api.updatePeriod(editingPeriod._id, updateData);
+        setPeriods(periods.map((p) => (p._id === editingPeriod._id ? updated : p)));
+      } else {
+        // Create new period
+        const periodData: ReportPeriodCreate = {
+          name: name.trim(),
+          start_date: new Date(startDate).toISOString(),
+          end_date: new Date(endDate).toISOString(),
+        };
+        const newPeriod = await api.createPeriod(periodData);
+        setPeriods([newPeriod, ...periods]);
+      }
+      setName("");
+      setStartDate("");
+      setEndDate("");
+      setShowAddForm(false);
+      setEditingPeriod(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : editingPeriod ? "Failed to update period" : "Failed to create period");
+    }
+  };
+
+  const handleEdit = (period: ReportPeriod) => {
+    setEditingPeriod(period);
+    setName(period.name);
+    setStartDate(new Date(period.start_date).toISOString().split("T")[0]);
+    setEndDate(new Date(period.end_date).toISOString().split("T")[0]);
+    setShowAddForm(true);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingPeriod(null);
+    setName("");
+    setStartDate("");
+    setEndDate("");
+    setShowAddForm(false);
+  };
+
+  const handleDelete = async (periodId: string) => {
+    if (!confirm("Delete this report period?")) return;
+
+    try {
+      await api.deletePeriod(periodId);
+      setPeriods(periods.filter((p) => p._id !== periodId));
+    } catch (error) {
+      alert("Failed to delete period");
+    }
+  };
+
+  if (loading) {
+    return (
+      <ProtectedRoute>
+        <div className="min-h-screen flex items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      </ProtectedRoute>
+    );
+  }
+
+  return (
+    <ProtectedRoute>
+      <div className="min-h-screen bg-gray-50">
+        <header className="bg-white shadow-sm border-b">
+          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <Link to="/dashboard" className="text-blue-600 hover:text-blue-700 text-sm">
+              ← Back to Dashboard
+            </Link>
+            <h1 className="text-2xl font-bold text-gray-900 mt-1">Report Periods</h1>
+            <p className="text-sm text-gray-600 mt-1">
+              Define time periods for your report cards (e.g., semesters, quarters)
+            </p>
+          </div>
+        </header>
+
+        <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          {/* Add Period Button/Form */}
+          <div className="mb-6">
+            {!showAddForm ? (
+              <Button onClick={() => setShowAddForm(true)}>+ Add Period</Button>
+            ) : (
+              <div className="bg-white rounded-lg shadow p-6">
+                <h3 className="text-lg font-semibold mb-4">{editingPeriod ? "Edit Report Period" : "Create Report Period"}</h3>
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <Input
+                    label="Period Name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="e.g., First Semester 2024/2025"
+                    required
+                  />
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <Input
+                      label="Start Date"
+                      type="date"
+                      value={startDate}
+                      onChange={(e) => setStartDate(e.target.value)}
+                      required
+                    />
+                    <Input
+                      label="End Date"
+                      type="date"
+                      value={endDate}
+                      onChange={(e) => setEndDate(e.target.value)}
+                      required
+                    />
+                  </div>
+                  {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">{editingPeriod ? "Update Period" : "Create Period"}</Button>
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      onClick={handleCancelEdit}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </form>
+              </div>
+            )}
+          </div>
+
+          {/* Periods List */}
+          {periods.length > 0 ? (
+            <div className="space-y-4">
+              {periods.map((period) => (
+                <div key={period._id} className="bg-white rounded-lg shadow p-6">
+                  <div className="flex justify-between items-start">
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-gray-900">{period.name}</h3>
+                      <p className="text-sm text-gray-600 mt-1">
+                        {new Date(period.start_date).toLocaleDateString()} -{" "}
+                        {new Date(period.end_date).toLocaleDateString()}
+                      </p>
+                      <p className="text-xs text-gray-500 mt-2">
+                        Duration:{" "}
+                        {Math.ceil(
+                          (new Date(period.end_date).getTime() -
+                            new Date(period.start_date).getTime()) /
+                            (1000 * 60 * 60 * 24)
+                        )}{" "}
+                        days
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => handleEdit(period)}
+                        className="text-blue-500 hover:text-blue-700"
+                        aria-label="Edit period"
+                      >
+                        <svg
+                          className="w-5 h-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        onClick={() => handleDelete(period._id)}
+                        className="text-red-500 hover:text-red-700"
+                        aria-label="Delete period"
+                      >
+                        <svg
+                          className="w-5 h-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="bg-white rounded-lg shadow p-12 text-center">
+              <p className="text-gray-600 mb-4">
+                No report periods yet. Create your first period!
+              </p>
+              <Button onClick={() => setShowAddForm(true)}>+ Add Period</Button>
+            </div>
+          )}
+        </main>
+      </div>
+    </ProtectedRoute>
+  );
+}

app/routes/register.tsx

@@ -0,0 +1,113 @@
+import { useState, type FormEvent } from "react";
+import { useNavigate, Link } from "react-router";
+import { api } from "~/api/client";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
+
+export default function Register() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await api.register({ email, username, password });
+      navigate("/dashboard");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 px-4">
+      <div className="max-w-md w-full bg-white rounded-lg shadow-xl p-8">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Grademaxxing</h1>
+          <p className="text-gray-600 mt-2">Create your account</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <Input
+            type="email"
+            label="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="your@email.com"
+            required
+            autoComplete="email"
+          />
+
+          <Input
+            type="text"
+            label="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="johndoe"
+            required
+            autoComplete="username"
+            minLength={3}
+          />
+
+          <Input
+            type="password"
+            label="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="••••••••"
+            required
+            autoComplete="new-password"
+            minLength={6}
+          />
+
+          <Input
+            type="password"
+            label="Confirm Password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            placeholder="••••••••"
+            required
+            autoComplete="new-password"
+          />
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+              {error}
+            </div>
+          )}
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? "Creating account..." : "Sign Up"}
+          </Button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-gray-600">
+          Already have an account?{" "}
+          <Link to="/login" className="text-blue-600 hover:text-blue-700 font-medium">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

app/routes/subjects.$subjectId.edit.tsx

@@ -0,0 +1,305 @@
+import { useState, useEffect, type FormEvent } from "react";
+import { useNavigate, useParams, Link } from "react-router";
+import { ProtectedRoute } from "~/components/ProtectedRoute";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
+import { GradingCategorySelector } from "~/components/GradingCategorySelector";
+import { LoadingSpinner } from "~/components/LoadingSpinner";
+import { api } from "~/api/client";
+import type { Subject, GradingCategory } from "~/types/api";
+import { GRADE_SYSTEMS, type GradeSystem } from "~/utils/gradeSystems";
+
+const getMaxGradeForSystem = (system: GradeSystem): string => {
+  switch (system) {
+    case "german":
+      return "6";
+    case "us-letter":
+    case "percentage":
+    default:
+      return "100";
+  }
+};
+
+export default function EditSubject() {
+  const navigate = useNavigate();
+  const params = useParams();
+  const subjectId = params.subjectId;
+
+  const [subject, setSubject] = useState<Subject | null>(null);
+  const [name, setName] = useState("");
+  const [teacher, setTeacher] = useState("");
+  const [color, setColor] = useState("#3b82f6");
+  const [gradeSystem, setGradeSystem] = useState<GradeSystem>("percentage");
+  const [targetGrade, setTargetGrade] = useState("");
+  const [targetMaxGrade, setTargetMaxGrade] = useState("");
+  const [categories, setCategories] = useState<GradingCategory[]>([]);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    const fetchSubject = async () => {
+      if (!subjectId) {
+        setError("Invalid subject ID");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const subjects = await api.getSubjects();
+        const foundSubject = subjects.find((s) => s._id === subjectId);
+
+        if (!foundSubject) {
+          setError("Subject not found");
+          setLoading(false);
+          return;
+        }
+
+        setSubject(foundSubject);
+        setName(foundSubject.name);
+        setTeacher(foundSubject.teacher || "");
+        setColor(foundSubject.color ?? "#3b82f6");
+        setGradeSystem((foundSubject.grade_system as GradeSystem) || "percentage");
+        setTargetGrade(foundSubject.target_grade?.toString() || "");
+        setTargetMaxGrade(foundSubject.target_grade_max?.toString() || "");
+        setCategories(foundSubject.grading_categories);
+        setLoading(false);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch subject");
+        setLoading(false);
+      }
+    };
+
+    fetchSubject();
+  }, [subjectId]);
+  
+  // Auto-update max grade when grade system changes
+  useEffect(() => {
+    setTargetMaxGrade(getMaxGradeForSystem(gradeSystem));
+  }, [gradeSystem]);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (!name.trim()) {
+      setError("Subject name is required");
+      return;
+    }
+
+    if (categories.length === 0) {
+      setError("Add at least one grading category");
+      return;
+    }
+
+    const totalWeight = categories.reduce((sum, cat) => sum + cat.weight, 0);
+    if (Math.abs(totalWeight - 100) > 0.01) {
+      setError("Category weights must sum to 100%");
+      return;
+    }
+
+    if (categories.some((cat) => !cat.name.trim())) {
+      setError("All categories must have a name");
+      return;
+    }
+
+    if (!subjectId) {
+      setError("Invalid subject ID");
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      await api.updateSubject(subjectId, {
+        name: name.trim(),
+        teacher: teacher.trim() || undefined,
+        color,
+        grade_system: gradeSystem,
+        grading_categories: categories,
+        target_grade: targetGrade ? parseFloat(targetGrade) : undefined,
+        target_grade_max: targetMaxGrade ? parseFloat(targetMaxGrade) : undefined,
+      });
+      navigate(`/subjects/${subjectId}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update subject");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <ProtectedRoute>
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+          <LoadingSpinner />
+        </div>
+      </ProtectedRoute>
+    );
+  }
+
+  if (error && !subject) {
+    return (
+      <ProtectedRoute>
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+          <div className="bg-red-50 border border-red-200 text-red-700 px-6 py-4 rounded-lg">
+            {error}
+          </div>
+        </div>
+      </ProtectedRoute>
+    );
+  }
+
+  return (
+    <ProtectedRoute>
+      <div className="min-h-screen bg-gray-50">
+        <header className="bg-white shadow-sm border-b">
+          <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <Link
+              to={`/subjects/${subjectId}`}
+              className="text-blue-600 hover:text-blue-700 text-sm"
+            >
+              ← Back to {subject?.name || "Subject"}
+            </Link>
+            <h1 className="text-2xl font-bold text-gray-900 mt-1">Edit Subject</h1>
+          </div>
+        </header>
+
+        <main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="bg-white rounded-lg shadow p-6">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <Input
+                label="Subject Name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g., Mathematics, English, Biology"
+                required
+              />
+
+              <Input
+                label="Teacher (Optional)"
+                value={teacher}
+                onChange={(e) => setTeacher(e.target.value)}
+                placeholder="e.g., Mrs. Smith"
+              />
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Subject Color
+                </label>
+                <input
+                  type="color"
+                  value={color}
+                  onChange={(e) => setColor(e.target.value)}
+                  className="w-20 h-10 rounded cursor-pointer border border-gray-300"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Grade Display System
+                </label>
+                <select
+                  value={gradeSystem}
+                  onChange={(e) => setGradeSystem(e.target.value as GradeSystem)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                >
+                  {Object.entries(GRADE_SYSTEMS).map(([key, system]) => (
+                    <option key={key} value={key}>
+                      {system.displayName} - {system.description}
+                    </option>
+                  ))}
+                </select>
+                <p className="text-xs text-gray-500 mt-1">
+                  Choose how grades will be displayed for this subject
+                </p>
+              </div>
+
+              <GradingCategorySelector
+                categories={categories}
+                onChange={setCategories}
+              />
+
+              <div className="border-t pt-6">
+                <h3 className="text-sm font-medium text-gray-700 mb-4">
+                  Target Grade (Optional)
+                </h3>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    label="Target Grade"
+                    type="number"
+                    step="0.01"
+                    value={targetGrade}
+                    onChange={(e) => setTargetGrade(e.target.value)}
+                    placeholder={gradeSystem === "german" ? "e.g., 2.0" : "e.g., 85"}
+                  />
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Max Grade
+                    </label>
+                    <div className="px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-gray-700">
+                      {targetMaxGrade}
+                    </div>
+                    <p className="text-xs text-gray-500 mt-1">
+                      Auto-set by grade system
+                    </p>
+                  </div>
+                </div>
+                <p className="text-xs text-gray-500 mt-2">
+                  Set a target grade to track your progress. Leave empty if not needed.
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Grade Display System
+                </label>
+                <select
+                  value={gradeSystem}
+                  onChange={(e) => setGradeSystem(e.target.value as GradeSystem)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                >
+                  {Object.entries(GRADE_SYSTEMS).map(([key, system]) => (
+                    <option key={key} value={key}>
+                      {system.displayName} - {system.description}
+                    </option>
+                  ))}
+                </select>
+                <p className="text-xs text-gray-500 mt-1">
+                  Choose how grades will be displayed for this subject
+                </p>
+              </div>
+
+              <div>
+                <GradingCategorySelector
+                  categories={categories}
+                  onChange={setCategories}
+                />
+                <p className="text-xs text-gray-500 mt-2">
+                  ⚠️ Changing categories may affect how existing grades are calculated
+                </p>
+              </div>
+
+              {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" disabled={saving} className="flex-1">
+                  {saving ? "Saving..." : "Save Changes"}
+                </Button>
+                <Link to={`/subjects/${subjectId}`} className="flex-1">
+                  <Button type="button" variant="secondary" className="w-full">
+                    Cancel
+                  </Button>
+                </Link>
+              </div>
+            </form>
+          </div>
+        </main>
+      </div>
+    </ProtectedRoute>
+  );
+}

app/routes/subjects.$subjectId.tsx

@@ -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>
+  );
+}

app/routes/subjects.new.tsx

@@ -0,0 +1,206 @@
+import { useState, useEffect, type FormEvent } from "react";
+import { useNavigate, Link } from "react-router";
+import { ProtectedRoute } from "~/components/ProtectedRoute";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
+import { GradingCategorySelector } from "~/components/GradingCategorySelector";
+import { api } from "~/api/client";
+import type { GradingCategory } from "~/types/api";
+import { GRADE_SYSTEMS, type GradeSystem } from "~/utils/gradeSystems";
+
+const getMaxGradeForSystem = (system: GradeSystem): string => {
+  switch (system) {
+    case "german":
+      return "6";
+    case "us-letter":
+    case "percentage":
+    default:
+      return "100";
+  }
+};
+
+export default function NewSubject() {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [teacher, setTeacher] = useState("");
+  const [color, setColor] = useState("#3b82f6");
+  const [gradeSystem, setGradeSystem] = useState<GradeSystem>("percentage");
+  const [targetGrade, setTargetGrade] = useState("");
+  const [targetMaxGrade, setTargetMaxGrade] = useState("100");
+  
+  // Auto-update max grade when grade system changes
+  useEffect(() => {
+    setTargetMaxGrade(getMaxGradeForSystem(gradeSystem));
+  }, [gradeSystem]);
+  const [categories, setCategories] = useState<GradingCategory[]>([
+    { name: "Written", weight: 50, color: "#3b82f6" },
+    { name: "Oral", weight: 50, color: "#10b981" },
+  ]);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (!name.trim()) {
+      setError("Subject name is required");
+      return;
+    }
+
+    if (categories.length === 0) {
+      setError("Add at least one grading category");
+      return;
+    }
+
+    const totalWeight = categories.reduce((sum, cat) => sum + cat.weight, 0);
+    if (Math.abs(totalWeight - 100) > 0.01) {
+      setError("Category weights must sum to 100%");
+      return;
+    }
+
+    if (categories.some((cat) => !cat.name.trim())) {
+      setError("All categories must have a name");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await api.createSubject({
+        name: name.trim(),
+        teacher: teacher.trim() || undefined,
+        color,
+        grade_system: gradeSystem,
+        grading_categories: categories,
+        target_grade: targetGrade ? parseFloat(targetGrade) : undefined,
+        target_grade_max: targetMaxGrade ? parseFloat(targetMaxGrade) : undefined,
+      });
+      navigate("/subjects");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create subject");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ProtectedRoute>
+      <div className="min-h-screen bg-gray-50">
+        <header className="bg-white shadow-sm border-b">
+          <div className="max-w-3xl 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>
+            <h1 className="text-2xl font-bold text-gray-900 mt-1">Create New Subject</h1>
+          </div>
+        </header>
+
+        <main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="bg-white rounded-lg shadow p-6">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <Input
+                label="Subject Name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g., Mathematics, English, Biology"
+                required
+              />
+
+              <Input
+                label="Teacher (Optional)"
+                value={teacher}
+                onChange={(e) => setTeacher(e.target.value)}
+                placeholder="e.g., Mrs. Smith"
+              />
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Subject Color
+                </label>
+                <input
+                  type="color"
+                  value={color}
+                  onChange={(e) => setColor(e.target.value)}
+                  className="w-20 h-10 rounded cursor-pointer border border-gray-300"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Grade Display System
+                </label>
+                <select
+                  value={gradeSystem}
+                  onChange={(e) => setGradeSystem(e.target.value as GradeSystem)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                >
+                  {Object.entries(GRADE_SYSTEMS).map(([key, system]) => (
+                    <option key={key} value={key}>
+                      {system.displayName} - {system.description}
+                    </option>
+                  ))}
+                </select>
+                <p className="text-xs text-gray-500 mt-1">
+                  Choose how grades will be displayed for this subject
+                </p>
+              </div>
+
+              <GradingCategorySelector
+                categories={categories}
+                onChange={setCategories}
+              />
+
+              <div className="border-t pt-6">
+                <h3 className="text-sm font-medium text-gray-700 mb-4">
+                  Target Grade (Optional)
+                </h3>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    label="Target Grade"
+                    type="number"
+                    step="0.01"
+                    value={targetGrade}
+                    onChange={(e) => setTargetGrade(e.target.value)}
+                    placeholder={gradeSystem === "german" ? "e.g., 2.0" : "e.g., 85"}
+                  />
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Max Grade
+                    </label>
+                    <div className="px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-gray-700">
+                      {targetMaxGrade}
+                    </div>
+                    <p className="text-xs text-gray-500 mt-1">
+                      Auto-set by grade system
+                    </p>
+                  </div>
+                </div>
+                <p className="text-xs text-gray-500 mt-2">
+                  Set a target grade to track your progress. Leave empty if not needed.
+                </p>
+              </div>
+
+              {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" disabled={loading} className="flex-1">
+                  {loading ? "Creating..." : "Create Subject"}
+                </Button>
+                <Link to="/subjects" className="flex-1">
+                  <Button type="button" variant="secondary" className="w-full">
+                    Cancel
+                  </Button>
+                </Link>
+              </div>
+            </form>
+          </div>
+        </main>
+      </div>
+    </ProtectedRoute>
+  );
+}

app/routes/subjects.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router";
+import { ProtectedRoute } from "~/components/ProtectedRoute";
+import { SubjectCard } from "~/components/SubjectCard";
+import { LoadingSpinner } from "~/components/LoadingSpinner";
+import { Button } from "~/components/Button";
+import { api } from "~/api/client";
+import type { Subject, Grade } from "~/types/api";
+import { calculateSubjectAverage } from "~/utils/gradeCalculations";
+
+export default function SubjectsList() {
+  const [subjects, setSubjects] = useState<Subject[]>([]);
+  const [grades, setGrades] = useState<Grade[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const [subjectsData, gradesData] = await Promise.all([
+        api.getSubjects(),
+        api.getGrades(),
+      ]);
+      setSubjects(subjectsData);
+      setGrades(gradesData);
+    } catch (error) {
+      console.error("Failed to load subjects:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (subjectId: string) => {
+    if (!confirm("Are you sure? This will delete all grades for this subject.")) {
+      return;
+    }
+
+    try {
+      await api.deleteSubject(subjectId);
+      setSubjects(subjects.filter((s) => s._id !== subjectId));
+      setGrades(grades.filter((g) => g.subject_id !== subjectId));
+    } catch (error) {
+      alert("Failed to delete subject");
+    }
+  };
+
+  if (loading) {
+    return (
+      <ProtectedRoute>
+        <div className="min-h-screen flex items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      </ProtectedRoute>
+    );
+  }
+
+  // Use the first subject's grading system as the primary system
+  const primaryGradeSystem = subjects[0]?.grade_system || "percentage";
+
+  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">
+            <div className="flex justify-between items-center">
+              <div>
+                <Link to="/dashboard" className="text-blue-600 hover:text-blue-700 text-sm">
+                  ← Back to Dashboard
+                </Link>
+                <h1 className="text-2xl font-bold text-gray-900 mt-1">Manage Subjects</h1>
+              </div>
+              <Link to="/subjects/new">
+                <Button>+ Add Subject</Button>
+              </Link>
+            </div>
+          </div>
+        </header>
+
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          {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 = calculateSubjectAverage(subject, subjectGrades);
+                return (
+                  <SubjectCard
+                    key={subject._id}
+                    subject={subject}
+                    averageGrade={avgData.overallAverage}
+                    gradeSystem={primaryGradeSystem}
+                    onDelete={() => handleDelete(subject._id)}
+                  />
+                );
+              })}
+            </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>
+  );
+}