Finalized students app

routes/(apps)/students/(_components)/Promotion.tsx

@@ -0,0 +1,30 @@
+import Student from "$root/routes/(apps)/students/(_components)/Student.tsx";
+
+type PromotionProps = { students: Student[]; promo: Promotion };
+
+export default function Promotion(props: PromotionProps) {
+  if (!props.promo) {
+    return <p>Unable to find user in database.</p>;
+  }
+
+  return (
+    <div key={props.promo.id}>
+      <h3>Promotion {props.promo.endyear}</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Email</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.students
+            .filter((student) => student.promotionId === props.promo.id)
+            .map((student) => <Student student={student} />)}
+        </tbody>
+      </table>
+    </div>
+  );
+}

routes/(apps)/students/(_components)/SelfPortrait.tsx

@@ -0,0 +1,31 @@
+import { CasContent } from "$root/defaults/interfaces.ts";
+
+type SelfPortraitProps = { self: CasContent };
+
+const regex =
+  /^(?<year>\d{4})(?<month>\d{2})(?<date>\d{2})(?<hours>\d{2})(?<minutes>\d{2})(?<seconds>\d{2})Z$/;
+
+export default function SelfPortrait(props: SelfPortraitProps) {
+  const { year, month, date, hours, minutes, seconds } = props.self
+    .amuDateValidation.match(regex)!.groups!;
+
+  const validationIsoDate =
+    `${year}-${month}-${date}T${hours}:${minutes}:${seconds}Z`;
+
+  const validationDate = new Date(validationIsoDate);
+
+  return (
+    <div id="self-portrait">
+      <div>Identity</div>
+      <div>{props.self.supannCivilite} {props.self.displayName}</div>
+      <div>Student number</div>
+      <div>{props.self.uid}</div>
+      <div>amU mail</div>
+      <div>{props.self.mail}</div>
+      <div>First amU registration</div>
+      <div>{validationDate.toLocaleString()}</div>
+      <div>amU class code</div>
+      <div>{props.self.supannEtuEtape}</div>
+    </div>
+  );
+}

routes/(apps)/students/(_components)/Student.tsx

@@ -0,0 +1,13 @@
+type StudentProps = { student: Student; promo?: number };
+
+export default function Student(props: StudentProps) {
+  return (
+    <tr key={props.student.userId}>
+      <td>{props.student.userId}</td>
+      <td>{props.student.firstName}</td>
+      <td>{props.student.lastName}</td>
+      <td>{props.student.mail}</td>
+      {props.promo && <td>{props.promo}</td>}
+    </tr>
+  );
+}