Grades subject

src/lib/utils/grades.ts

@@ -34,3 +34,46 @@ export function getGrades({
         return true;
     });
 }
+
+export type GradeBadgeInfo = {
+    label: string;
+    rawCode: string;
+    normalizedCode: string;
+};
+
+const gradeBadgeKeywordMap: Array<{ keyword: string; label: string }> = [
+    { keyword: "math", label: "Maths" },
+    { keyword: "phys", label: "Physique" },
+    { keyword: "optique", label: "Physique" },
+    { keyword: "info", label: "Informatique" },
+    { keyword: "prog", label: "Informatique" },
+    { keyword: "web", label: "Informatique" },
+    { keyword: "anglais", label: "Anglais" },
+    { keyword: "sii", label: "SII" },
+    { keyword: "fhs", label: "FHS" },
+];
+
+export function getGradeBadgeInfoFromCode(code?: string | null): GradeBadgeInfo | null {
+    const rawCode = (code ?? "").trim();
+    if (!rawCode) return null;
+
+    const normalizedBase = rawCode
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const normalizedCode = normalizedBase.toUpperCase();
+    const searchableCode = normalizedBase.toLowerCase();
+
+    const keywordMatch = gradeBadgeKeywordMap.find(({ keyword }) =>
+        searchableCode.includes(keyword)
+    );
+    const label = keywordMatch?.label ?? "";
+
+    return {
+        label,
+        rawCode,
+        normalizedCode,
+    };
+}

src/pages/grades/grade-card.tsx

@@ -1,10 +1,12 @@
 import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { Grade } from "@/types/aurion";
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
 import { motion } from "framer-motion";
 import { SquareArrowOutDownRightIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { getGradeBadgeInfoFromCode } from "@/lib/utils/grades";
 
 const MotionCard = motion(Card);
 
@@ -39,9 +41,10 @@ export function GradeCardAnimate({
             initial="hidden"
             animate="show"
             exit="exit"
-            className="border-none bg-white shadow-md transition-shadow dark:bg-mauria-card p-4 h-full"
+            className="relative border-none bg-white shadow-md transition-shadow dark:bg-mauria-card p-4 h-full overflow-visible"
             onClick={onGradeClick.bind(null, grade)}
         >
+            <GradeTypeBadge code={grade.code} />
             <div className="flex items-center ">
                 <div className="mr-4 w-20 items-center justify-center text-center">
                     <div className="text-2xl font-bold text-mauria-accent dark:text-mauria-accent">
@@ -91,9 +94,10 @@ export function GradeCard({
 
     return (
         <Card
-            className="border-none bg-white shadow-md transition-shadow dark:bg-mauria-card p-4 h-full"
+            className="relative border-none bg-white shadow-md transition-shadow dark:bg-mauria-card p-4 h-full overflow-visible"
             onClick={onGradeClick.bind(null, grade)}
         >
+            <GradeTypeBadge code={grade.code} />
             <div className="flex items-center ">
                 <div className="mr-4 w-20 items-center justify-center text-center">
                     <div className="text-2xl font-bold text-mauria-accent dark:text-mauria-accent">
@@ -131,3 +135,19 @@ export function GradeCard({
         </Card>
     );
 }
+
+const GradeTypeBadge = ({ code }: { code?: string | null }) => {
+    if (!code?.trim()) return null;
+
+    const badgeInfo = getGradeBadgeInfoFromCode(code);
+    if (!badgeInfo?.label) return null;
+
+    return (
+        <Badge
+            data-grade-code={badgeInfo?.rawCode ?? code}
+            className="pointer-events-none absolute right-4 top-4 rounded-md bg-mauria-accent/20 px-2 py-1 text-xs font-medium text-mauria-accent whitespace-nowrap"
+        >
+            {badgeInfo.label}
+        </Badge>
+    );
+};