feat: stages module, mobility frontend, theme toggle, employeeOnly access control

- Add stages module with full CRUD API and admin overview island
- Add mobility overview island (Liste, Kanban, Detail CRUD views)
- Add contract PDF upload/download endpoints for mobilites
- Add light/dark theme toggle in header
- Add employeeOnly flag to hide entire modules from students (admin, students, stages)
- Add read-only GET endpoints for modules/ues/ue-modules in notes module
- Add [slug].tsx catch-all routes for direct URL navigation
- Replace old mobility table with mobilites + stages schema (migration 0004)
- Allow students to create mobilites and upload contracts
- Redirect authenticated users from / to /apps catalog

compose.prod.yml

@@ -30,9 +30,12 @@ services:
     ports:
       - "4430:443"
     env_file: .env
+    volumes:
+      - contracts:/app/uploads/contracts
     depends_on:
       migrate:
         condition: service_completed_successfully
 
 volumes:
   db_data:
+  contracts:

databases/migrations/0004_add_stages_and_mobilites.sql

@@ -0,0 +1,28 @@
+DROP TABLE IF EXISTS "mobility";
+--> statement-breakpoint
+CREATE TYPE "mobility_status" AS ENUM ('contracts_received', 'under_revision', 'done', 'validated', 'canceled');
+--> statement-breakpoint
+CREATE TABLE "stages" (
+	"idStage" serial PRIMARY KEY NOT NULL,
+	"numEtud" integer NOT NULL,
+	"duree" integer NOT NULL,
+	"nomEntreprise" text NOT NULL,
+	"mission" text
+);
+--> statement-breakpoint
+CREATE TABLE "mobilites" (
+	"idMob" serial PRIMARY KEY NOT NULL,
+	"numEtud" integer NOT NULL,
+	"duree" integer NOT NULL,
+	"contratMob" text,
+	"ecole" text,
+	"pays" text,
+	"status" "mobility_status" NOT NULL DEFAULT 'contracts_received',
+	"idStage" integer
+);
+--> statement-breakpoint
+ALTER TABLE "stages" ADD CONSTRAINT "stages_numEtud_students_numEtud_fk" FOREIGN KEY ("numEtud") REFERENCES "public"."students"("numEtud") ON DELETE no action ON UPDATE no action;
+--> statement-breakpoint
+ALTER TABLE "mobilites" ADD CONSTRAINT "mobilites_numEtud_students_numEtud_fk" FOREIGN KEY ("numEtud") REFERENCES "public"."students"("numEtud") ON DELETE no action ON UPDATE no action;
+--> statement-breakpoint
+ALTER TABLE "mobilites" ADD CONSTRAINT "mobilites_idStage_stages_idStage_fk" FOREIGN KEY ("idStage") REFERENCES "public"."stages"("idStage") ON DELETE no action ON UPDATE no action;

databases/migrations/meta/_journal.json

@@ -29,6 +29,13 @@
       "when": 1777155028711,
       "tag": "0003_add_session2_and_malus",
       "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "7",
+      "when": 1777155028712,
+      "tag": "0004_add_stages_and_mobilites",
+      "breakpoints": true
     }
   ]
 }

databases/schema.ts

@@ -1,7 +1,7 @@
 import {
-  date,
   doublePrecision,
   integer,
+  pgEnum,
   pgTable,
   primaryKey,
   serial,
@@ -89,13 +89,29 @@ export const ajustements = pgTable("ajustements", {
   pk: primaryKey({ columns: [t.numEtud, t.idUE] }),
 }));
 
-export const mobility = pgTable("mobility", {
+export const stages = pgTable("stages", {
-  id: serial("id").primaryKey(),
+  id: serial("idStage").primaryKey(),
-  studentId: integer("studentId").references(() => students.numEtud),
+  numEtud: integer("numEtud").notNull().references(() => students.numEtud),
-  startDate: date("startDate"),
+  duree: integer("duree").notNull(),
-  endDate: date("endDate"),
+  nomEntreprise: text("nomEntreprise").notNull(),
-  weeksCount: integer("weeksCount"),
+  mission: text("mission"),
-  destinationCountry: text("destinationCountry"),
+});
-  destinationName: text("destinationName"),
+
-  mobilityStatus: text("mobilityStatus").default("N/A"),
+export const mobilityStatusEnum = pgEnum("mobility_status", [
+  "contracts_received",
+  "under_revision",
+  "done",
+  "validated",
+  "canceled",
+]);
+
+export const mobilites = pgTable("mobilites", {
+  id: serial("idMob").primaryKey(),
+  numEtud: integer("numEtud").notNull().references(() => students.numEtud),
+  duree: integer("duree").notNull(),
+  contratMob: text("contratMob"),
+  ecole: text("ecole"),
+  pays: text("pays"),
+  status: mobilityStatusEnum("status").notNull().default("contracts_received"),
+  idStage: integer("idStage").references(() => stages.id),
 });

defaults/interfaces.ts

@@ -20,6 +20,7 @@ export interface AppProperties {
   pages: Record<string, string>;
   adminOnly: string[];
   studentOnly?: string[];
+  employeeOnly?: boolean;
   hint: string;
 }
 

defaults/makeSlug.ts

@@ -0,0 +1,36 @@
+import { FreshContext } from "$fresh/server.ts";
+import { Route, State } from "$root/defaults/interfaces.ts";
+import { ComponentChildren } from "preact";
+
+/**
+ * Generates a catch-all [slug] route that dynamically loads partials.
+ * This enables direct URL navigation to sub-pages (e.g. /admin/modules).
+ * @param basePath The base path of the module, should be `import.meta.dirname!`.
+ * @returns A route handler that loads the partial matching the slug.
+ */
+export default function makeSlug(basePath: string): Route {
+  return async function SlugRoute(
+    request: Request,
+    context: FreshContext<State>,
+  ): Promise<ComponentChildren | Response> {
+    const slug = context.params.slug;
+
+    // Try partials/<slug>.tsx, then partials/(admin)/<slug>.tsx
+    let page: Route | undefined;
+    try {
+      page = (await import(`${basePath}/partials/${slug}.tsx`)).Page;
+    } catch {
+      try {
+        page = (await import(`${basePath}/partials/(admin)/${slug}.tsx`)).Page;
+      } catch {
+        // No partial found for this slug
+      }
+    }
+
+    if (!page) {
+      return context.renderNotFound();
+    }
+
+    return page(request, context);
+  };
+}

fresh.gen.ts

@@ -4,6 +4,7 @@
 
 import * as $_apps_layout from "./routes/(apps)/_layout.tsx";
 import * as $_apps_middleware from "./routes/(apps)/_middleware.ts";
+import * as $_apps_admin_slug_ from "./routes/(apps)/admin/[slug].tsx";
 import * as $_apps_admin_api_enseignements from "./routes/(apps)/admin/api/enseignements.ts";
 import * as $_apps_admin_api_enseignements_idProf_idModule_idPromo_ from "./routes/(apps)/admin/api/enseignements/[idProf]/[idModule]/[idPromo].ts";
 import * as $_apps_admin_api_example from "./routes/(apps)/admin/api/example.ts";
@@ -30,16 +31,22 @@ import * as $_apps_admin_partials_roles from "./routes/(apps)/admin/partials/rol
 import * as $_apps_admin_partials_ues from "./routes/(apps)/admin/partials/ues.tsx";
 import * as $_apps_admin_partials_users from "./routes/(apps)/admin/partials/users.tsx";
 import * as $_apps_admin_users_id_ from "./routes/(apps)/admin/users/[id].tsx";
-import * as $_apps_mobility_api_insert_mobility from "./routes/(apps)/mobility/api/insert_mobility.ts";
+import * as $_apps_mobility_slug_ from "./routes/(apps)/mobility/[slug].tsx";
+import * as $_apps_mobility_api_mobilites from "./routes/(apps)/mobility/api/mobilites.ts";
+import * as $_apps_mobility_api_mobilites_idMob_ from "./routes/(apps)/mobility/api/mobilites/[idMob].ts";
+import * as $_apps_mobility_api_mobilites_idMob_contrat from "./routes/(apps)/mobility/api/mobilites/[idMob]/contrat.ts";
 import * as $_apps_mobility_index from "./routes/(apps)/mobility/index.tsx";
-import * as $_apps_mobility_partials_admin_edit_mobility from "./routes/(apps)/mobility/partials/(admin)/edit_mobility.tsx";
 import * as $_apps_mobility_partials_index from "./routes/(apps)/mobility/partials/index.tsx";
 import * as $_apps_mobility_partials_overview from "./routes/(apps)/mobility/partials/overview.tsx";
+import * as $_apps_notes_slug_ from "./routes/(apps)/notes/[slug].tsx";
 import * as $_apps_notes_api_ajustements from "./routes/(apps)/notes/api/ajustements.ts";
 import * as $_apps_notes_api_ajustements_numEtud_idUE_ from "./routes/(apps)/notes/api/ajustements/[numEtud]/[idUE].ts";
+import * as $_apps_notes_api_modules from "./routes/(apps)/notes/api/modules.ts";
 import * as $_apps_notes_api_notes from "./routes/(apps)/notes/api/notes.ts";
 import * as $_apps_notes_api_notes_numEtud_idModule_ from "./routes/(apps)/notes/api/notes/[numEtud]/[idModule].ts";
 import * as $_apps_notes_api_notes_import_xlsx from "./routes/(apps)/notes/api/notes/import-xlsx.ts";
+import * as $_apps_notes_api_ue_modules from "./routes/(apps)/notes/api/ue-modules.ts";
+import * as $_apps_notes_api_ues from "./routes/(apps)/notes/api/ues.ts";
 import * as $_apps_notes_edition_numEtud_ from "./routes/(apps)/notes/edition/[numEtud].tsx";
 import * as $_apps_notes_index from "./routes/(apps)/notes/index.tsx";
 import * as $_apps_notes_partials_admin_courses from "./routes/(apps)/notes/partials/(admin)/courses.tsx";
@@ -47,6 +54,13 @@ import * as $_apps_notes_partials_admin_import from "./routes/(apps)/notes/parti
 import * as $_apps_notes_partials_index from "./routes/(apps)/notes/partials/index.tsx";
 import * as $_apps_notes_partials_notes from "./routes/(apps)/notes/partials/notes.tsx";
 import * as $_apps_notes_recap_numEtud_ from "./routes/(apps)/notes/recap/[numEtud].tsx";
+import * as $_apps_stages_slug_ from "./routes/(apps)/stages/[slug].tsx";
+import * as $_apps_stages_api_stages from "./routes/(apps)/stages/api/stages.ts";
+import * as $_apps_stages_api_stages_idStage_ from "./routes/(apps)/stages/api/stages/[idStage].ts";
+import * as $_apps_stages_index from "./routes/(apps)/stages/index.tsx";
+import * as $_apps_stages_partials_index from "./routes/(apps)/stages/partials/index.tsx";
+import * as $_apps_stages_partials_overview from "./routes/(apps)/stages/partials/overview.tsx";
+import * as $_apps_students_slug_ from "./routes/(apps)/students/[slug].tsx";
 import * as $_apps_students_api_promotions from "./routes/(apps)/students/api/promotions.ts";
 import * as $_apps_students_api_promotions_idPromo_ from "./routes/(apps)/students/api/promotions/[idPromo].ts";
 import * as $_apps_students_api_students from "./routes/(apps)/students/api/students.ts";
@@ -79,13 +93,12 @@ import * as $_apps_admin_islands_AdminUsers from "./routes/(apps)/admin/(_island
 import * as $_apps_admin_islands_EditModule from "./routes/(apps)/admin/(_islands)/EditModule.tsx";
 import * as $_apps_admin_islands_EditUser from "./routes/(apps)/admin/(_islands)/EditUser.tsx";
 import * as $_apps_admin_islands_ImportMaquette from "./routes/(apps)/admin/(_islands)/ImportMaquette.tsx";
-import * as $_apps_mobility_islands_ConsultMobility from "./routes/(apps)/mobility/(_islands)/ConsultMobility.tsx";
+import * as $_apps_mobility_islands_MobilityOverview from "./routes/(apps)/mobility/(_islands)/MobilityOverview.tsx";
-import * as $_apps_mobility_islands_EditMobility from "./routes/(apps)/mobility/(_islands)/EditMobility.tsx";
-import * as $_apps_mobility_islands_ImportFile from "./routes/(apps)/mobility/(_islands)/ImportFile.tsx";
 import * as $_apps_notes_islands_AdminConsultNotes from "./routes/(apps)/notes/(_islands)/AdminConsultNotes.tsx";
 import * as $_apps_notes_islands_ImportNotes from "./routes/(apps)/notes/(_islands)/ImportNotes.tsx";
 import * as $_apps_notes_islands_NoteRecap from "./routes/(apps)/notes/(_islands)/NoteRecap.tsx";
 import * as $_apps_notes_islands_NotesView from "./routes/(apps)/notes/(_islands)/NotesView.tsx";
+import * as $_apps_stages_islands_StagesOverview from "./routes/(apps)/stages/(_islands)/StagesOverview.tsx";
 import * as $_apps_students_islands_ConsultStudents from "./routes/(apps)/students/(_islands)/ConsultStudents.tsx";
 import * as $_apps_students_islands_EditStudents from "./routes/(apps)/students/(_islands)/EditStudents.tsx";
 import * as $_apps_students_islands_UploadStudents from "./routes/(apps)/students/(_islands)/UploadStudents.tsx";
@@ -95,6 +108,7 @@ const manifest = {
   routes: {
     "./routes/(apps)/_layout.tsx": $_apps_layout,
     "./routes/(apps)/_middleware.ts": $_apps_middleware,
+    "./routes/(apps)/admin/[slug].tsx": $_apps_admin_slug_,
     "./routes/(apps)/admin/api/enseignements.ts":
       $_apps_admin_api_enseignements,
     "./routes/(apps)/admin/api/enseignements/[idProf]/[idModule]/[idPromo].ts":
@@ -131,23 +145,29 @@ const manifest = {
     "./routes/(apps)/admin/partials/ues.tsx": $_apps_admin_partials_ues,
     "./routes/(apps)/admin/partials/users.tsx": $_apps_admin_partials_users,
     "./routes/(apps)/admin/users/[id].tsx": $_apps_admin_users_id_,
-    "./routes/(apps)/mobility/api/insert_mobility.ts":
+    "./routes/(apps)/mobility/[slug].tsx": $_apps_mobility_slug_,
-      $_apps_mobility_api_insert_mobility,
+    "./routes/(apps)/mobility/api/mobilites.ts": $_apps_mobility_api_mobilites,
+    "./routes/(apps)/mobility/api/mobilites/[idMob].ts":
+      $_apps_mobility_api_mobilites_idMob_,
+    "./routes/(apps)/mobility/api/mobilites/[idMob]/contrat.ts":
+      $_apps_mobility_api_mobilites_idMob_contrat,
     "./routes/(apps)/mobility/index.tsx": $_apps_mobility_index,
-    "./routes/(apps)/mobility/partials/(admin)/edit_mobility.tsx":
-      $_apps_mobility_partials_admin_edit_mobility,
     "./routes/(apps)/mobility/partials/index.tsx":
       $_apps_mobility_partials_index,
     "./routes/(apps)/mobility/partials/overview.tsx":
       $_apps_mobility_partials_overview,
+    "./routes/(apps)/notes/[slug].tsx": $_apps_notes_slug_,
     "./routes/(apps)/notes/api/ajustements.ts": $_apps_notes_api_ajustements,
     "./routes/(apps)/notes/api/ajustements/[numEtud]/[idUE].ts":
       $_apps_notes_api_ajustements_numEtud_idUE_,
+    "./routes/(apps)/notes/api/modules.ts": $_apps_notes_api_modules,
     "./routes/(apps)/notes/api/notes.ts": $_apps_notes_api_notes,
     "./routes/(apps)/notes/api/notes/[numEtud]/[idModule].ts":
       $_apps_notes_api_notes_numEtud_idModule_,
     "./routes/(apps)/notes/api/notes/import-xlsx.ts":
       $_apps_notes_api_notes_import_xlsx,
+    "./routes/(apps)/notes/api/ue-modules.ts": $_apps_notes_api_ue_modules,
+    "./routes/(apps)/notes/api/ues.ts": $_apps_notes_api_ues,
     "./routes/(apps)/notes/edition/[numEtud].tsx":
       $_apps_notes_edition_numEtud_,
     "./routes/(apps)/notes/index.tsx": $_apps_notes_index,
@@ -158,6 +178,15 @@ const manifest = {
     "./routes/(apps)/notes/partials/index.tsx": $_apps_notes_partials_index,
     "./routes/(apps)/notes/partials/notes.tsx": $_apps_notes_partials_notes,
     "./routes/(apps)/notes/recap/[numEtud].tsx": $_apps_notes_recap_numEtud_,
+    "./routes/(apps)/stages/[slug].tsx": $_apps_stages_slug_,
+    "./routes/(apps)/stages/api/stages.ts": $_apps_stages_api_stages,
+    "./routes/(apps)/stages/api/stages/[idStage].ts":
+      $_apps_stages_api_stages_idStage_,
+    "./routes/(apps)/stages/index.tsx": $_apps_stages_index,
+    "./routes/(apps)/stages/partials/index.tsx": $_apps_stages_partials_index,
+    "./routes/(apps)/stages/partials/overview.tsx":
+      $_apps_stages_partials_overview,
+    "./routes/(apps)/students/[slug].tsx": $_apps_students_slug_,
     "./routes/(apps)/students/api/promotions.ts":
       $_apps_students_api_promotions,
     "./routes/(apps)/students/api/promotions/[idPromo].ts":
@@ -210,12 +239,8 @@ const manifest = {
       $_apps_admin_islands_EditUser,
     "./routes/(apps)/admin/(_islands)/ImportMaquette.tsx":
       $_apps_admin_islands_ImportMaquette,
-    "./routes/(apps)/mobility/(_islands)/ConsultMobility.tsx":
+    "./routes/(apps)/mobility/(_islands)/MobilityOverview.tsx":
-      $_apps_mobility_islands_ConsultMobility,
+      $_apps_mobility_islands_MobilityOverview,
-    "./routes/(apps)/mobility/(_islands)/EditMobility.tsx":
-      $_apps_mobility_islands_EditMobility,
-    "./routes/(apps)/mobility/(_islands)/ImportFile.tsx":
-      $_apps_mobility_islands_ImportFile,
     "./routes/(apps)/notes/(_islands)/AdminConsultNotes.tsx":
       $_apps_notes_islands_AdminConsultNotes,
     "./routes/(apps)/notes/(_islands)/ImportNotes.tsx":
@@ -224,6 +249,8 @@ const manifest = {
       $_apps_notes_islands_NoteRecap,
     "./routes/(apps)/notes/(_islands)/NotesView.tsx":
       $_apps_notes_islands_NotesView,
+    "./routes/(apps)/stages/(_islands)/StagesOverview.tsx":
+      $_apps_stages_islands_StagesOverview,
     "./routes/(apps)/students/(_islands)/ConsultStudents.tsx":
       $_apps_students_islands_ConsultStudents,
     "./routes/(apps)/students/(_islands)/EditStudents.tsx":

routes/(_components)/Header.tsx

@@ -11,6 +11,14 @@ export default function Header(props: HeaderProps) {
       <nav>
         <a href="/apps" f-client-nav={false}>Catalog</a>
         <a href={`/log${props.link}`} f-client-nav={false}>Log {props.link}</a>
+        <button
+          id="theme-toggle"
+          type="button"
+          title="Changer de theme"
+          style="background:none;border:none;cursor:pointer;font-size:1.2rem;padding:0;line-height:1;"
+        >
+          <span class="material-symbols-outlined">dark_mode</span>
+        </button>
       </nav>
     </header>
   );

routes/(apps)/_middleware.ts

@@ -21,11 +21,17 @@ export const handler: MiddlewareHandler<AuthenticatedState>[] = [
       `./${currentApp}/(_props)/props.ts`
     )).default;
 
-    context.state.availablePages = { ...properties.pages };
     const isStudent =
       context.state.session.eduPersonPrimaryAffiliation === "student";
     const isLocal = Deno.env.get("LOCAL") === "true";
 
+    // Block students from accessing employeeOnly modules entirely
+    if (isStudent && properties.employeeOnly) {
+      return new Response(null, { status: 403 });
+    }
+
+    context.state.availablePages = { ...properties.pages };
+
     if (isStudent) {
       // Students only see studentOnly pages (+ non-restricted pages)
       properties.adminOnly.forEach((page) =>

routes/(apps)/admin/(_islands)/ImportMaquette.tsx

@@ -151,7 +151,10 @@ export default function ImportMaquette() {
       });
       if (res.ok) {
         const created = await res.json();
-        promos.value = [...promos.value, { id: created.id, annee: created.annee }];
+        promos.value = [...promos.value, {
+          id: created.id,
+          annee: created.annee,
+        }];
         newPromoId.value = "";
         newPromoAnnee.value = "";
       } else {
@@ -289,7 +292,14 @@ export default function ImportMaquette() {
       );
 
       const data: (string | number | null)[][] = [
-        ["Annee\nSemestres", "Codes APOGEE", null, null, "Credits\nECTS", "Coeff."],
+        [
+          "Annee\nSemestres",
+          "Codes APOGEE",
+          null,
+          null,
+          "Credits\nECTS",
+          "Coeff.",
+        ],
       ];
 
       for (const ue of uesData) {
@@ -303,7 +313,14 @@ export default function ImportMaquette() {
         data.push(["UE", null, ue.nom, null, totalCoeff]);
         for (const um of mods) {
           const mod = modMap[um.idModule];
-          data.push([null, um.idModule, null, mod ? mod.nom : um.idModule, null, um.coeff]);
+          data.push([
+            null,
+            um.idModule,
+            null,
+            mod ? mod.nom : um.idModule,
+            null,
+            um.coeff,
+          ]);
         }
         data.push([]);
       }
@@ -312,7 +329,10 @@ export default function ImportMaquette() {
       const ws = XLSX.utils.aoa_to_sheet(data);
       XLSX.utils.book_append_sheet(wb, ws, "Maquette");
       const buf = XLSX.write(wb, { bookType: "xlsx", type: "array" });
-      const blob = new Blob([buf], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+      const blob = new Blob([buf], {
+        type:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      });
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
@@ -384,8 +404,9 @@ export default function ImportMaquette() {
             class="filter-select"
             placeholder="ID (ex: 3AFISE24-25)"
             value={newPromoId.value}
-            onInput={(e) =>
+            onInput={(
-              (newPromoId.value = (e.target as HTMLInputElement).value)}
+              e,
+            ) => (newPromoId.value = (e.target as HTMLInputElement).value)}
             style="min-width: 10rem"
           />
           <input
@@ -393,8 +414,9 @@ export default function ImportMaquette() {
             class="filter-select"
             placeholder="Annee (ex: 2024-2025)"
             value={newPromoAnnee.value}
-            onInput={(e) =>
+            onInput={(
-              (newPromoAnnee.value = (e.target as HTMLInputElement).value)}
+              e,
+            ) => (newPromoAnnee.value = (e.target as HTMLInputElement).value)}
             style="min-width: 8rem"
           />
           <button
@@ -424,7 +446,7 @@ export default function ImportMaquette() {
                   <p style="font-size: 0.85rem; font-weight: 700; margin: 0">
                     {year.label}
                     <span class="col-dim" style="font-weight: 400">
-                      {" "}— {year.ues.length} UE, {totalMods} modules
+                      — {year.ues.length} UE, {totalMods} modules
                     </span>
                   </p>
                   <select
@@ -477,7 +499,7 @@ export default function ImportMaquette() {
                                   {ue.name}
                                   {ue.ects != null && (
                                     <span class="col-dim">
-                                      {" "}({ue.ects} ECTS)
+                                      ({ue.ects} ECTS)
                                     </span>
                                   )}
                                 </td>
@@ -513,6 +535,8 @@ export default function ImportMaquette() {
         >
           Telecharger Modele
         </button>
+        {
+          /* TODO: fix blob download in Fresh
         <button
           type="button"
           class="btn btn-secondary"
@@ -520,11 +544,13 @@ export default function ImportMaquette() {
         >
           Exporter Maquette
         </button>
+        */
+        }
       </div>
 
       <p class="upload-format">
         Format : fichier maquette FISE / FISA avec lignes <strong>UE</strong>
-        {" "}et <strong>modules</strong> (colonnes code, nom, coefficient)
+        et <strong>modules</strong> (colonnes code, nom, coefficient)
       </p>
     </div>
   );

routes/(apps)/admin/(_props)/props.ts

@@ -14,7 +14,17 @@ const properties: AppProperties = {
     ues: "UEs",
     "import-maquette": "Import Maquette",
   },
-  adminOnly: ["users", "roles", "permissions", "modules", "enseignements", "promotions", "ues", "import-maquette"],
+  adminOnly: [
+    "users",
+    "roles",
+    "permissions",
+    "modules",
+    "enseignements",
+    "promotions",
+    "ues",
+    "import-maquette",
+  ],
+  employeeOnly: true,
   hint: "PolyMPR module",
 };
 

routes/(apps)/admin/[slug].tsx

@@ -0,0 +1,2 @@
+import makeSlug from "$root/defaults/makeSlug.ts";
+export default makeSlug(import.meta.dirname!);

routes/(apps)/admin/partials/enseignements.tsx

@@ -14,5 +14,6 @@ async function Enseignements(
   return <AdminEnseignements />;
 }
 
+export { Enseignements as Page };
 export const config = getPartialsConfig();
 export default makePartials(Enseignements);

routes/(apps)/admin/partials/import-maquette.tsx

@@ -19,5 +19,6 @@ async function ImportMaquettePage(
   );
 }
 
+export { ImportMaquettePage as Page };
 export const config = getPartialsConfig();
 export default makePartials(ImportMaquettePage);

routes/(apps)/admin/partials/modules.tsx

@@ -14,5 +14,6 @@ async function Modules(
   return <AdminModules />;
 }
 
+export { Modules as Page };
 export const config = getPartialsConfig();
 export default makePartials(Modules);

routes/(apps)/admin/partials/permissions.tsx

@@ -14,5 +14,6 @@ async function Permissions(
   return <AdminPermissions />;
 }
 
+export { Permissions as Page };
 export const config = getPartialsConfig();
 export default makePartials(Permissions);

routes/(apps)/admin/partials/promotions.tsx

@@ -14,5 +14,6 @@ async function Promotions(
   return <AdminPromotions />;
 }
 
+export { Promotions as Page };
 export const config = getPartialsConfig();
 export default makePartials(Promotions);

routes/(apps)/admin/partials/roles.tsx

@@ -14,5 +14,6 @@ async function Roles(
   return <AdminRoles />;
 }
 
+export { Roles as Page };
 export const config = getPartialsConfig();
 export default makePartials(Roles);

routes/(apps)/admin/partials/ues.tsx

@@ -14,5 +14,6 @@ async function UEs(
   return <AdminUEs />;
 }
 
+export { UEs as Page };
 export const config = getPartialsConfig();
 export default makePartials(UEs);

routes/(apps)/admin/partials/users.tsx

@@ -14,5 +14,6 @@ async function Users(
   return <AdminUsers />;
 }
 
+export { Users as Page };
 export const config = getPartialsConfig();
 export default makePartials(Users);

routes/(apps)/mobility/(_islands)/ConsultMobility.tsx

@@ -1,115 +0,0 @@
-import { useEffect, useState } from "preact/hooks";
-
-interface Promotion {
-  id: number;
-  name: string;
-}
-
-interface Student {
-  id: string;
-  firstName: string;
-  lastName: string;
-  promotionId: number;
-}
-
-interface Mobility {
-  id: number;
-  studentId: string;
-  startDate: string | null;
-  endDate: string | null;
-  weeksCount: number | null;
-  destinationCountry: string | null;
-  destinationName: string | null;
-  mobilityStatus: string;
-}
-
-export default function ConsultMobility() {
-  const [data, setData] = useState<
-    | {
-      promotions?: Promotion[];
-      students?: Student[];
-      mobilities?: Mobility[];
-    }
-    | null
-  >(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      console.log("ConsultMobility: Fetching data from API...");
-      try {
-        const response = await fetch("/mobility/api/insert_mobility");
-        console.log("ConsultMobility: API response status:", response.status);
-
-        if (!response.ok) {
-          throw new Error(`Error fetching data: ${response.statusText}`);
-        }
-
-        const result = await response.json();
-        console.log("ConsultMobility: Data fetched successfully:", result);
-        setData(result);
-      } catch (err) {
-        console.error("ConsultMobility: Error fetching data:", err);
-        setError("Failed to load mobility data. Please try again later.");
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  if (error) {
-    return <p className="error">{error}</p>;
-  }
-
-  if (!data?.promotions) {
-    return <p>No promotions found.</p>;
-  }
-
-  return (
-    <section>
-      <h2>Consult Mobility</h2>
-      {data.promotions.map((promo) => (
-        <div key={promo.id}>
-          <h3>Promotion: {promo.name}</h3>
-          <table>
-            <thead>
-              <tr>
-                <th>ID</th>
-                <th>First Name</th>
-                <th>Last Name</th>
-                <th>Start Date</th>
-                <th>End Date</th>
-                <th>Weeks Count</th>
-                <th>Destination Country</th>
-                <th>Destination Name</th>
-                <th>Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data.students
-                ?.filter((student) => student.promotionId === promo.id)
-                .map((student) => {
-                  const mobility = data.mobilities?.find((mob) =>
-                    mob.studentId === student.id
-                  );
-                  return (
-                    <tr key={student.id}>
-                      <td>{student.id}</td>
-                      <td>{student.firstName}</td>
-                      <td>{student.lastName}</td>
-                      <td>{mobility?.startDate || "N/A"}</td>
-                      <td>{mobility?.endDate || "N/A"}</td>
-                      <td>{mobility?.weeksCount ?? "N/A"}</td>
-                      <td>{mobility?.destinationCountry || "N/A"}</td>
-                      <td>{mobility?.destinationName || "N/A"}</td>
-                      <td>{mobility?.mobilityStatus || "N/A"}</td>
-                    </tr>
-                  );
-                })}
-            </tbody>
-          </table>
-        </div>
-      ))}
-    </section>
-  );
-}

routes/(apps)/mobility/(_islands)/ConsultStudents_test.tsx

@@ -1,75 +0,0 @@
-import { useEffect, useState } from "preact/hooks";
-
-interface Promotion {
-  id: number;
-  name: string;
-}
-
-interface Student {
-  id: number;
-  firstName: string;
-  lastName: string;
-  mail: string;
-  promotionId: number;
-  promotionName: string;
-}
-
-export default function ConsultStudents_test() {
-  const [data, setData] = useState<
-    { promotions: Promotion[]; students: Student[] } | null
-  >(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await fetch("/students/api/insert_students");
-        if (!response.ok) {
-          throw new Error(`Error fetching data: ${response.statusText}`);
-        }
-
-        const result = await response.json();
-        setData(result);
-      } catch (err) {
-        console.error("Error fetching data:", err);
-        setError("Failed to load data. Please try again later.");
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  return (
-    <section>
-      <h2>Consult Students</h2>
-      {error && <p className="error">{error}</p>}
-      {data?.promotions.map((promo) => (
-        <div key={promo.id}>
-          <h3>Promotion: {promo.id}</h3>
-          <table>
-            <thead>
-              <tr>
-                <th>ID</th>
-                <th>First Name</th>
-                <th>Last Name</th>
-                <th>Email</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data.students
-                .filter((student) => student.promotionId === promo.id)
-                .map((student) => (
-                  <tr key={student.id}>
-                    <td>{student.id}</td>
-                    <td>{student.firstName}</td>
-                    <td>{student.lastName}</td>
-                    <td>{student.mail}</td>
-                  </tr>
-                ))}
-            </tbody>
-          </table>
-        </div>
-      ))}
-    </section>
-  );
-}

routes/(apps)/mobility/(_islands)/EditMobility.tsx

@@ -1,248 +0,0 @@
-import { useEffect, useState } from "preact/hooks";
-
-interface Student {
-  id: string;
-  firstName: string;
-  lastName: string;
-  promotionId: number;
-}
-
-interface Promotion {
-  id: number;
-  name: string;
-}
-
-interface Mobility {
-  id: number | null;
-  studentId: string;
-  startDate: string | null;
-  endDate: string | null;
-  weeksCount: number | null;
-  destinationCountry: string | null;
-  destinationName: string | null;
-  mobilityStatus: string;
-}
-
-export default function EditMobility() {
-  const [data, setData] = useState<
-    | {
-      promotions?: Promotion[];
-      students?: Student[];
-      mobilities?: Mobility[];
-    }
-    | null
-  >(null);
-  const [error, setError] = useState<string | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      console.log("EditMobility: Fetching data from API...");
-      try {
-        const response = await fetch("/mobility/api/insert_mobility");
-        console.log("EditMobility: API response status:", response.status);
-
-        if (!response.ok) {
-          throw new Error(`Error fetching data: ${response.statusText}`);
-        }
-
-        const result = await response.json();
-        console.log("EditMobility: Data fetched successfully:", result);
-        setData(result);
-      } catch (err) {
-        console.error("EditMobility: Error fetching data:", err);
-        setError("Failed to load mobility data. Please try again later.");
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  const handleChange = (
-    studentId: string,
-    field: keyof Mobility,
-    value: string | number | null,
-  ) => {
-    if (!data) return;
-
-    setData((prevData) => {
-      if (!prevData) return null;
-
-      const updatedMobilities = prevData.mobilities?.map((mobility) => {
-        if (mobility.studentId === studentId) {
-          const updatedMobility = { ...mobility, [field]: value };
-
-          if (field === "startDate" || field === "endDate") {
-            const startDate = new Date(updatedMobility.startDate || "");
-            const endDate = new Date(updatedMobility.endDate || "");
-            if (startDate && endDate && startDate <= endDate) {
-              const weeks = Math.ceil(
-                (endDate.getTime() - startDate.getTime()) /
-                  (7 * 24 * 60 * 60 * 1000),
-              );
-              updatedMobility.weeksCount = weeks;
-            } else {
-              updatedMobility.weeksCount = null;
-            }
-          }
-
-          return updatedMobility;
-        }
-        return mobility;
-      }) || [];
-
-      return { ...prevData, mobilities: updatedMobilities };
-    });
-  };
-
-  const handleSave = async () => {
-    setIsSaving(true);
-
-    try {
-      const response = await fetch("/mobility/api/insert_mobility", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ data: data?.mobilities }),
-      });
-
-      console.log("EditMobility: Save response status:", response.status);
-
-      if (response.ok) {
-        alert("Data saved successfully!");
-        globalThis.location.reload();
-      } else {
-        throw new Error(`Failed to save data: ${response.statusText}`);
-      }
-    } catch (error) {
-      console.error("EditMobility: Error saving data:", error);
-      alert("An error occurred while saving data.");
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  if (error) {
-    return <p className="error">{error}</p>;
-  }
-
-  if (!data?.promotions) {
-    return <p>Loading data...</p>;
-  }
-
-  return (
-    <section>
-      <h2>Edit Mobility</h2>
-      {data.promotions.map((promo) => (
-        <div key={promo.id}>
-          <h3>Promotion: {promo.name}</h3>
-          <table>
-            <thead>
-              <tr>
-                <th>ID</th>
-                <th>First Name</th>
-                <th>Last Name</th>
-                <th>Start Date</th>
-                <th>End Date</th>
-                <th>Weeks Count</th>
-                <th>Destination Country</th>
-                <th>Destination Name</th>
-                <th>Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data.students
-                ?.filter((student) => student.promotionId === promo.id)
-                .map((student) => {
-                  const mobility = data.mobilities?.find((mob) =>
-                    mob.studentId === student.id
-                  ) || {
-                    id: null,
-                    studentId: student.id,
-                    startDate: null,
-                    endDate: null,
-                    weeksCount: null,
-                    destinationCountry: null,
-                    destinationName: null,
-                    mobilityStatus: "N/A",
-                  };
-
-                  return (
-                    <tr key={student.id}>
-                      <td>{student.id}</td>
-                      <td>{student.firstName}</td>
-                      <td>{student.lastName}</td>
-                      <td>
-                        <input
-                          type="date"
-                          value={mobility.startDate || ""}
-                          onChange={(e) =>
-                            handleChange(
-                              student.id,
-                              "startDate",
-                              e.target.value,
-                            )}
-                        />
-                      </td>
-                      <td>
-                        <input
-                          type="date"
-                          value={mobility.endDate || ""}
-                          onChange={(e) =>
-                            handleChange(student.id, "endDate", e.target.value)}
-                        />
-                      </td>
-                      <td>{mobility.weeksCount ?? "N/A"}</td>
-                      <td>
-                        <input
-                          type="text"
-                          value={mobility.destinationCountry || ""}
-                          onChange={(e) =>
-                            handleChange(
-                              student.id,
-                              "destinationCountry",
-                              e.target.value,
-                            )}
-                        />
-                      </td>
-                      <td>
-                        <input
-                          type="text"
-                          value={mobility.destinationName || ""}
-                          onChange={(e) =>
-                            handleChange(
-                              student.id,
-                              "destinationName",
-                              e.target.value,
-                            )}
-                        />
-                      </td>
-                      <td>
-                        <select
-                          value={mobility.mobilityStatus}
-                          onChange={(e) =>
-                            handleChange(
-                              student.id,
-                              "mobilityStatus",
-                              e.target.value,
-                            )}
-                        >
-                          <option value="N/A">N/A</option>
-                          <option value="Planned">Planned</option>
-                          <option value="In Progress">In Progress</option>
-                          <option value="Completed">Completed</option>
-                          <option value="Validated">Validated</option>
-                        </select>
-                      </td>
-                    </tr>
-                  );
-                })}
-            </tbody>
-          </table>
-        </div>
-      ))}
-      <button type="button" onClick={handleSave} disabled={isSaving}>
-        {isSaving ? "Saving..." : "Confirm"}
-      </button>
-    </section>
-  );
-}

routes/(apps)/mobility/(_islands)/MobilityOverview.tsx

@@ -0,0 +1,931 @@
+import { useEffect, useState } from "preact/hooks";
+
+type Student = {
+  numEtud: number;
+  nom: string;
+  prenom: string;
+  idPromo: string;
+};
+type Promotion = { id: string; annee: string };
+type Mobilite = {
+  id: number;
+  numEtud: number;
+  duree: number;
+  contratMob: string | null;
+  ecole: string | null;
+  pays: string | null;
+  status: string;
+  idStage: number | null;
+};
+type Stage = {
+  id: number;
+  numEtud: number;
+  duree: number;
+  nomEntreprise: string;
+  mission: string | null;
+};
+
+const REQUIRED_WEEKS = 12;
+
+const STATUS_ORDER = [
+  "contracts_received",
+  "under_revision",
+  "done",
+  "validated",
+  "canceled",
+] as const;
+
+const STATUS_LABELS: Record<string, string> = {
+  contracts_received: "Contrats reçus",
+  under_revision: "En révision",
+  done: "Signé",
+  validated: "Validé",
+  canceled: "Annulé",
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  contracts_received: "#f5a623",
+  under_revision: "#dc2626",
+  done: "#22c55e",
+  validated: "light-dark(var(--light-accent-color), var(--dark-accent-color))",
+  canceled:
+    "light-dark(var(--light-foreground-dim), var(--dark-foreground-dim))",
+};
+
+function lowestStatus(mobs: Mobilite[]): string {
+  let lowest = STATUS_ORDER.length - 1;
+  for (const m of mobs) {
+    const idx = STATUS_ORDER.indexOf(m.status as typeof STATUS_ORDER[number]);
+    if (idx >= 0 && idx < lowest) lowest = idx;
+  }
+  return STATUS_ORDER[lowest];
+}
+
+function validatedWeeks(mobs: Mobilite[]): number {
+  return mobs
+    .filter((m) => m.status === "validated")
+    .reduce((sum, m) => sum + m.duree, 0);
+}
+
+export default function MobilityOverview() {
+  const [students, setStudents] = useState<Student[]>([]);
+  const [promos, setPromos] = useState<Promotion[]>([]);
+  const [mobilites, setMobilites] = useState<Mobilite[]>([]);
+  const [stagesMap, setStagesMap] = useState<Record<number, Stage>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [tab, setTab] = useState<"liste" | "kanban">("liste");
+  const [filterPromo, setFilterPromo] = useState("");
+  const [filterNom, setFilterNom] = useState("");
+
+  // Detail view state
+  const [detailStudent, setDetailStudent] = useState<Student | null>(null);
+  const [editingMob, setEditingMob] = useState<Mobilite | null>(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+
+  async function load() {
+    try {
+      const [sRes, pRes, mRes, stRes] = await Promise.all([
+        fetch("/students/api/students"),
+        fetch("/students/api/promotions"),
+        fetch("/mobility/api/mobilites"),
+        fetch("/stages/api/stages"),
+      ]);
+      if (!sRes.ok) throw new Error("Impossible de charger les données");
+      const [sData, pData, mData, stData] = await Promise.all([
+        sRes.json(),
+        pRes.ok ? pRes.json() : [],
+        mRes.ok ? mRes.json() : [],
+        stRes.ok ? stRes.json() : [],
+      ]);
+      setStudents(sData);
+      setPromos(pData);
+      setMobilites(mData);
+      setStagesMap(
+        Object.fromEntries((stData as Stage[]).map((s) => [s.id, s])),
+      );
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erreur");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  // If in detail view, render that
+  if (detailStudent) {
+    return (
+      <DetailView
+        student={detailStudent}
+        mobilites={mobilites.filter((m) => m.numEtud === detailStudent.numEtud)}
+        allMobilites={mobilites}
+        stagesMap={stagesMap}
+        editingMob={editingMob}
+        setEditingMob={setEditingMob}
+        showAddForm={showAddForm}
+        setShowAddForm={setShowAddForm}
+        onBack={() => {
+          setDetailStudent(null);
+          setEditingMob(null);
+          setShowAddForm(false);
+        }}
+        onReload={load}
+      />
+    );
+  }
+
+  if (loading) {
+    return (
+      <div class="page-content">
+        <p class="state-loading">Chargement...</p>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div class="page-content">
+        <p class="state-error">{error}</p>
+      </div>
+    );
+  }
+
+  const filtered = students.filter((s) => {
+    const matchPromo = !filterPromo || s.idPromo === filterPromo;
+    const matchNom = !filterNom ||
+      `${s.nom} ${s.prenom}`.toLowerCase().includes(filterNom.toLowerCase());
+    return matchPromo && matchNom;
+  });
+
+  const mobsByStudent = (numEtud: number) =>
+    mobilites.filter((m) => m.numEtud === numEtud);
+
+  return (
+    <div class="page-content">
+      <h2 class="page-title">Suivi des mobilités</h2>
+
+      <div class="tabs">
+        <button
+          type="button"
+          class={`tab-btn${tab === "liste" ? " active" : ""}`}
+          onClick={() => setTab("liste")}
+        >
+          Liste
+        </button>
+        <button
+          type="button"
+          class={`tab-btn${tab === "kanban" ? " active" : ""}`}
+          onClick={() => setTab("kanban")}
+        >
+          Kanban
+        </button>
+      </div>
+
+      <div class="filters">
+        <select
+          class="filter-select"
+          value={filterPromo}
+          onChange={(e) =>
+            setFilterPromo((e.target as HTMLSelectElement).value)}
+        >
+          <option value="">Toutes les promos</option>
+          {promos.map((p) => <option key={p.id} value={p.id}>{p.id}</option>)}
+        </select>
+        <input
+          class="filter-input"
+          placeholder="Rechercher..."
+          value={filterNom}
+          onInput={(e) => setFilterNom((e.target as HTMLInputElement).value)}
+        />
+      </div>
+
+      {tab === "liste"
+        ? (
+          <ListView
+            students={filtered}
+            mobsByStudent={mobsByStudent}
+            onConsult={(s) => setDetailStudent(s)}
+          />
+        )
+        : (
+          <KanbanView
+            students={filtered}
+            mobsByStudent={mobsByStudent}
+            onConsult={(s) => setDetailStudent(s)}
+          />
+        )}
+    </div>
+  );
+}
+
+// ─── Liste View ─────────────────────────────────────────────
+
+function ListView(
+  { students, mobsByStudent, onConsult }: {
+    students: Student[];
+    mobsByStudent: (n: number) => Mobilite[];
+    onConsult: (s: Student) => void;
+  },
+) {
+  return (
+    <div class="data-table-wrap">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>N° étud.</th>
+            <th>Nom</th>
+            <th>Prénom</th>
+            <th>Semaines</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {students.length === 0
+            ? (
+              <tr>
+                <td colspan={5} class="state-empty">Aucun élève trouvé</td>
+              </tr>
+            )
+            : students.map((s) => {
+              const mobs = mobsByStudent(s.numEtud);
+              const weeks = validatedWeeks(mobs);
+              const ok = weeks >= REQUIRED_WEEKS;
+              return (
+                <tr key={s.numEtud}>
+                  <td class="col-dim">{s.numEtud}</td>
+                  <td>{s.nom}</td>
+                  <td>{s.prenom}</td>
+                  <td>
+                    <span
+                      style={{
+                        color: ok ? "var(--ok-color,#22c55e)" : "#dc2626",
+                        fontWeight: "var(--font-weight-bold)",
+                        fontFamily: "monospace",
+                      }}
+                    >
+                      {weeks}/{REQUIRED_WEEKS}
+                    </span>
+                  </td>
+                  <td>
+                    <button
+                      type="button"
+                      class="btn btn-sm btn-primary"
+                      onClick={() => onConsult(s)}
+                    >
+                      Consulter
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ─── Kanban View ────────────────────────────────────────────
+
+function KanbanView(
+  { students, mobsByStudent, onConsult }: {
+    students: Student[];
+    mobsByStudent: (n: number) => Mobilite[];
+    onConsult: (s: Student) => void;
+  },
+) {
+  // Students who have at least one mobility
+  const studentsWithMobs = students.filter(
+    (s) => mobsByStudent(s.numEtud).length > 0,
+  );
+
+  // Group students by their lowest status
+  const columns: Record<string, Student[]> = {};
+  for (const status of STATUS_ORDER) columns[status] = [];
+
+  for (const s of studentsWithMobs) {
+    const mobs = mobsByStudent(s.numEtud);
+    // Filter out canceled for lowest-status calc (canceled is separate)
+    const activeMobs = mobs.filter((m) => m.status !== "canceled");
+    if (activeMobs.length === 0) {
+      // All canceled
+      columns["canceled"].push(s);
+    } else {
+      const lowest = lowestStatus(activeMobs);
+      columns[lowest].push(s);
+    }
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        gap: "0.75rem",
+        overflowX: "auto",
+        paddingBottom: "0.5rem",
+      }}
+    >
+      {STATUS_ORDER.map((status) => (
+        <div
+          key={status}
+          style={{
+            minWidth: "14rem",
+            flex: "1",
+            borderRadius: "4px",
+            border:
+              "1px solid light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer))",
+            background: "light-dark(white, #141228)",
+          }}
+        >
+          <div
+            style={{
+              padding: "0.6rem 0.75rem",
+              borderBottom:
+                "1px solid light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer))",
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+            }}
+          >
+            <span
+              style={{
+                width: "0.6rem",
+                height: "0.6rem",
+                borderRadius: "50%",
+                background: STATUS_COLORS[status],
+                display: "inline-block",
+              }}
+            />
+            <span
+              style={{
+                fontWeight: "var(--font-weight-bold)",
+                fontSize: "0.82rem",
+              }}
+            >
+              {STATUS_LABELS[status]}
+            </span>
+            <span
+              style={{
+                fontSize: "0.7rem",
+                opacity: "0.7",
+                marginLeft: "auto",
+              }}
+            >
+              {columns[status].length}
+            </span>
+          </div>
+          <div style={{ padding: "0.5rem" }}>
+            {columns[status].length === 0
+              ? (
+                <p
+                  style={{
+                    fontSize: "0.75rem",
+                    opacity: "0.5",
+                    textAlign: "center",
+                    margin: "1rem 0",
+                  }}
+                >
+                  Aucun
+                </p>
+              )
+              : columns[status].map((s) => {
+                const mobs = mobsByStudent(s.numEtud);
+                const weeks = validatedWeeks(mobs);
+                return (
+                  <div
+                    key={s.numEtud}
+                    style={{
+                      padding: "0.5rem 0.6rem",
+                      marginBottom: "0.4rem",
+                      borderRadius: "3px",
+                      border:
+                        "1px solid light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer))",
+                      cursor: "pointer",
+                      fontSize: "0.8rem",
+                    }}
+                    onClick={() => onConsult(s)}
+                  >
+                    <div
+                      style={{
+                        fontWeight: "var(--font-weight-bold)",
+                        marginBottom: "0.15rem",
+                      }}
+                    >
+                      {s.nom} {s.prenom}
+                    </div>
+                    <div
+                      style={{
+                        fontSize: "0.72rem",
+                        display: "flex",
+                        justifyContent: "space-between",
+                      }}
+                    >
+                      <span style={{ opacity: "0.7" }}>{s.numEtud}</span>
+                      <span
+                        style={{
+                          color: weeks >= REQUIRED_WEEKS
+                            ? "#22c55e"
+                            : "#dc2626",
+                          fontWeight: "var(--font-weight-bold)",
+                          fontFamily: "monospace",
+                        }}
+                      >
+                        {weeks}/{REQUIRED_WEEKS} sem.
+                      </span>
+                    </div>
+                  </div>
+                );
+              })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Detail View ────────────────────────────────────────────
+
+function DetailView(
+  {
+    student,
+    mobilites,
+    allMobilites,
+    stagesMap,
+    editingMob,
+    setEditingMob,
+    showAddForm,
+    setShowAddForm,
+    onBack,
+    onReload,
+  }: {
+    student: Student;
+    mobilites: Mobilite[];
+    allMobilites: Mobilite[];
+    stagesMap: Record<number, Stage>;
+    editingMob: Mobilite | null;
+    setEditingMob: (m: Mobilite | null) => void;
+    showAddForm: boolean;
+    setShowAddForm: (v: boolean) => void;
+    onBack: () => void;
+    onReload: () => Promise<void>;
+  },
+) {
+  const weeks = validatedWeeks(mobilites);
+  const ecoles = [...new Set(allMobilites.map((m) => m.ecole).filter(Boolean))];
+  const paysList = [
+    ...new Set(allMobilites.map((m) => m.pays).filter(Boolean)),
+  ];
+
+  async function deleteMob(id: number) {
+    if (!confirm("Supprimer cette mobilité ?")) return;
+    await fetch(`/mobility/api/mobilites/${id}`, { method: "DELETE" });
+    await onReload();
+  }
+
+  return (
+    <div class="page-content">
+      <button
+        type="button"
+        class="btn btn-sm btn-secondary"
+        onClick={onBack}
+        style={{ marginBottom: "0.75rem" }}
+      >
+        Retour
+      </button>
+      <h2 class="page-title">
+        Consulter : {student.prenom} {student.nom}
+        <span
+          style={{
+            fontSize: "0.8rem",
+            fontWeight: "normal",
+            marginLeft: "0.75rem",
+            color: weeks >= REQUIRED_WEEKS ? "#22c55e" : "#dc2626",
+            fontFamily: "monospace",
+          }}
+        >
+          {weeks}/{REQUIRED_WEEKS} semaines validées
+        </span>
+      </h2>
+
+      {mobilites.length === 0 && (
+        <p class="state-empty">Aucune mobilité enregistrée.</p>
+      )}
+
+      {mobilites.map((mob, i) => {
+        const stage = mob.idStage ? stagesMap[mob.idStage] : null;
+        const isEditing = editingMob?.id === mob.id;
+
+        if (isEditing) {
+          return (
+            <MobEditForm
+              key={mob.id}
+              mob={mob}
+              ecoles={ecoles}
+              paysList={paysList}
+              onCancel={() => setEditingMob(null)}
+              onSave={async () => {
+                setEditingMob(null);
+                await onReload();
+              }}
+            />
+          );
+        }
+
+        return (
+          <div key={mob.id} class="ue-card" style={{ marginBottom: "1rem" }}>
+            <div class="ue-card-header">
+              <p class="ue-card-title">
+                Mobilité {i + 1}
+                {stage ? " : Stage" : " : Étude"}
+              </p>
+              <p
+                class="ue-card-avg"
+                style={{
+                  display: "flex",
+                  gap: "0.75rem",
+                  alignItems: "center",
+                }}
+              >
+                <span
+                  class={`note-chip ${
+                    mob.status === "validated"
+                      ? "note-chip--ok"
+                      : mob.status === "canceled"
+                      ? "note-chip--fail"
+                      : "note-chip--none"
+                  }`}
+                >
+                  {STATUS_LABELS[mob.status] ?? mob.status}
+                </span>
+                <span>Durée : {mob.duree} semaine(s)</span>
+              </p>
+            </div>
+            <div style={{ padding: "0.6rem 1.1rem" }}>
+              {stage
+                ? (
+                  <p style={{ fontSize: "0.82rem", margin: "0 0 0.4rem" }}>
+                    Entreprise : <strong>{stage.nomEntreprise}</strong>
+                    {stage.mission && <span>— {stage.mission}</span>}
+                  </p>
+                )
+                : (
+                  <p style={{ fontSize: "0.82rem", margin: "0 0 0.4rem" }}>
+                    {mob.ecole && (
+                      <>
+                        École : <strong>{mob.ecole}</strong>
+                      </>
+                    )}
+                    {mob.ecole && mob.pays && <span>,</span>}
+                    {mob.pays && (
+                      <>
+                        Pays : <strong>{mob.pays}</strong>
+                      </>
+                    )}
+                  </p>
+                )}
+              <div
+                style={{
+                  display: "flex",
+                  gap: "0.5rem",
+                  flexWrap: "wrap",
+                  marginTop: "0.5rem",
+                }}
+              >
+                {mob.contratMob && (
+                  <a
+                    class="btn btn-sm btn-primary"
+                    href={`/mobility/api/mobilites/${mob.id}/contrat`}
+                    target="_blank"
+                  >
+                    Télécharger contrat
+                  </a>
+                )}
+                {!mob.idStage && (
+                  <UploadContratBtn
+                    mobId={mob.id}
+                    hasContrat={!!mob.contratMob}
+                    onDone={onReload}
+                  />
+                )}
+                <button
+                  type="button"
+                  class="btn btn-sm btn-secondary"
+                  onClick={() =>
+                    setEditingMob(mob)}
+                >
+                  Modifier
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-sm btn-danger"
+                  onClick={() =>
+                    deleteMob(mob.id)}
+                >
+                  Supprimer
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+
+      {showAddForm
+        ? (
+          <MobAddForm
+            numEtud={student.numEtud}
+            ecoles={ecoles}
+            paysList={paysList}
+            onCancel={() => setShowAddForm(false)}
+            onSave={async () => {
+              setShowAddForm(false);
+              await onReload();
+            }}
+          />
+        )
+        : (
+          <button
+            type="button"
+            class="btn btn-primary"
+            onClick={() => setShowAddForm(true)}
+          >
+            + Nouvelle mobilité
+          </button>
+        )}
+    </div>
+  );
+}
+
+// ─── Inline forms ───────────────────────────────────────────
+
+function MobEditForm(
+  { mob, ecoles, paysList, onCancel, onSave }: {
+    mob: Mobilite;
+    ecoles: string[];
+    paysList: string[];
+    onCancel: () => void;
+    onSave: () => Promise<void>;
+  },
+) {
+  const [duree, setDuree] = useState(String(mob.duree));
+  const [ecole, setEcole] = useState(mob.ecole ?? "");
+  const [pays, setPays] = useState(mob.pays ?? "");
+  const [status, setStatus] = useState(mob.status);
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    setBusy(true);
+    try {
+      const res = await fetch(`/mobility/api/mobilites/${mob.id}`, {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          duree: parseInt(duree),
+          ecole: ecole || null,
+          pays: pays || null,
+          status,
+        }),
+      });
+      if (!res.ok) throw new Error("Erreur");
+      await onSave();
+    } catch {
+      alert("Erreur lors de la modification");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div class="edit-section" style={{ marginBottom: "1rem" }}>
+      <p class="edit-section-title">Modifier la mobilité #{mob.id}</p>
+      <div class="form-grid">
+        <div class="form-field">
+          <label>Durée (semaines)</label>
+          <input
+            class="form-input"
+            type="number"
+            min="1"
+            value={duree}
+            onInput={(e) => setDuree((e.target as HTMLInputElement).value)}
+          />
+        </div>
+        {!mob.idStage && (
+          <>
+            <div class="form-field">
+              <label>École</label>
+              <input
+                class="form-input"
+                list="edit-ecoles"
+                value={ecole}
+                onInput={(e) => setEcole((e.target as HTMLInputElement).value)}
+              />
+              <datalist id="edit-ecoles">
+                {ecoles.map((e) => <option key={e} value={e} />)}
+              </datalist>
+            </div>
+            <div class="form-field">
+              <label>Pays</label>
+              <input
+                class="form-input"
+                list="edit-pays"
+                value={pays}
+                onInput={(e) => setPays((e.target as HTMLInputElement).value)}
+              />
+              <datalist id="edit-pays">
+                {paysList.map((p) => <option key={p} value={p} />)}
+              </datalist>
+            </div>
+            <div class="form-field">
+              <label>Status</label>
+              <select
+                class="filter-select"
+                value={status}
+                onChange={(e) =>
+                  setStatus((e.target as HTMLSelectElement).value)}
+              >
+                {STATUS_ORDER.map((s) => (
+                  <option key={s} value={s}>{STATUS_LABELS[s]}</option>
+                ))}
+              </select>
+            </div>
+          </>
+        )}
+      </div>
+      <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
+        <button
+          type="button"
+          class="btn btn-sm btn-primary"
+          disabled={busy}
+          onClick={submit}
+        >
+          Enregistrer
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-secondary"
+          onClick={onCancel}
+        >
+          Annuler
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function MobAddForm(
+  { numEtud, ecoles, paysList, onCancel, onSave }: {
+    numEtud: number;
+    ecoles: string[];
+    paysList: string[];
+    onCancel: () => void;
+    onSave: () => Promise<void>;
+  },
+) {
+  const [duree, setDuree] = useState("4");
+  const [ecole, setEcole] = useState("");
+  const [pays, setPays] = useState("");
+  const [status, setStatus] = useState("contracts_received");
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    setBusy(true);
+    try {
+      const res = await fetch("/mobility/api/mobilites", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          numEtud,
+          duree: parseInt(duree),
+          ecole: ecole || null,
+          pays: pays || null,
+          status,
+        }),
+      });
+      if (!res.ok) throw new Error("Erreur");
+      await onSave();
+    } catch {
+      alert("Erreur lors de la création");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div class="edit-section" style={{ marginBottom: "1rem" }}>
+      <p class="edit-section-title">Nouvelle mobilité</p>
+      <div class="form-grid">
+        <div class="form-field">
+          <label>Durée (semaines)</label>
+          <input
+            class="form-input"
+            type="number"
+            min="1"
+            value={duree}
+            onInput={(e) => setDuree((e.target as HTMLInputElement).value)}
+          />
+        </div>
+        <div class="form-field">
+          <label>École</label>
+          <input
+            class="form-input"
+            list="add-ecoles"
+            value={ecole}
+            onInput={(e) => setEcole((e.target as HTMLInputElement).value)}
+          />
+          <datalist id="add-ecoles">
+            {ecoles.map((e) => <option key={e} value={e} />)}
+          </datalist>
+        </div>
+        <div class="form-field">
+          <label>Pays</label>
+          <input
+            class="form-input"
+            list="add-pays"
+            value={pays}
+            onInput={(e) => setPays((e.target as HTMLInputElement).value)}
+          />
+          <datalist id="add-pays">
+            {paysList.map((p) => <option key={p} value={p} />)}
+          </datalist>
+        </div>
+        <div class="form-field">
+          <label>Status</label>
+          <select
+            class="filter-select"
+            value={status}
+            onChange={(e) => setStatus((e.target as HTMLSelectElement).value)}
+          >
+            {STATUS_ORDER.map((s) => (
+              <option key={s} value={s}>{STATUS_LABELS[s]}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
+        <button
+          type="button"
+          class="btn btn-sm btn-primary"
+          disabled={busy || !duree}
+          onClick={submit}
+        >
+          Créer
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-secondary"
+          onClick={onCancel}
+        >
+          Annuler
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function UploadContratBtn(
+  { mobId, hasContrat, onDone }: {
+    mobId: number;
+    hasContrat: boolean;
+    onDone: () => Promise<void>;
+  },
+) {
+  const [busy, setBusy] = useState(false);
+
+  function upload() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "application/pdf";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      setBusy(true);
+      try {
+        const fd = new FormData();
+        fd.append("contrat", file);
+        const res = await fetch(`/mobility/api/mobilites/${mobId}/contrat`, {
+          method: "POST",
+          body: fd,
+        });
+        if (!res.ok) throw new Error("Erreur upload");
+        await onDone();
+      } catch {
+        alert("Erreur lors de l'upload du contrat");
+      } finally {
+        setBusy(false);
+      }
+    };
+    input.click();
+  }
+
+  return (
+    <button
+      type="button"
+      class="btn btn-sm btn-secondary"
+      disabled={busy}
+      onClick={upload}
+    >
+      {busy ? "..." : hasContrat ? "Remplacer contrat" : "Ajouter contrat"}
+    </button>
+  );
+}

routes/(apps)/mobility/(_props)/props.ts

@@ -3,14 +3,14 @@ import { AppProperties } from "$root/defaults/interfaces.ts";
 const properties: AppProperties = {
   name: "PolyMobility",
   icon: "flight_takeoff",
-  hint: "Student mobility management",
+  hint: "Suivi des mobilités internationales",
   pages: {
-    index: "Homepage",
+    index: "Accueil",
-    overview: "Mobility overview",
+    overview: "Suivi des mobilités",
-    edit_mobility: "Mobility management",
+    "my-mobility": "Ma mobilité",
-    consult_students_test: "Test consult students",
   },
-  adminOnly: ["edit_mobility", "consult_students_test"],
+  adminOnly: ["overview"],
+  studentOnly: ["my-mobility"],
 };
 
 export default properties;

routes/(apps)/mobility/[slug].tsx

@@ -0,0 +1,2 @@
+import makeSlug from "$root/defaults/makeSlug.ts";
+export default makeSlug(import.meta.dirname!);

routes/(apps)/mobility/api/insert_mobility.ts

@@ -1,122 +0,0 @@
-import { Handlers } from "$fresh/server.ts";
-import { db } from "$root/databases/db.ts";
-import { mobility, promotions, students } from "$root/databases/schema.ts";
-import { eq } from "npm:drizzle-orm@0.45.2";
-
-export const handler: Handlers = {
-  async GET() {
-    try {
-      const studentRows = await db
-        .select({
-          id: students.userId,
-          firstName: students.firstName,
-          lastName: students.lastName,
-          promotionId: students.promotionId,
-          endyear: promotions.endyear,
-          current: promotions.current,
-        })
-        .from(students)
-        .leftJoin(promotions, eq(students.promotionId, promotions.id));
-
-      const mobilityRows = await db.select().from(mobility);
-
-      const promotionRows = await db
-        .select({
-          id: promotions.id,
-          endyear: promotions.endyear,
-          current: promotions.current,
-        })
-        .from(promotions);
-
-      return new Response(
-        JSON.stringify({
-          mobilities: mobilityRows,
-          students: studentRows,
-          promotions: promotionRows,
-        }),
-        { status: 200, headers: { "Content-Type": "application/json" } },
-      );
-    } catch (error) {
-      console.error("Error fetching mobility data:", error);
-      return new Response("Failed to fetch data", { status: 500 });
-    }
-  },
-
-  async POST(request) {
-    try {
-      const body = await request.json();
-      const { data } = body;
-
-      if (!Array.isArray(data)) {
-        throw new Error("Invalid request body");
-      }
-
-      for (const entry of data) {
-        const {
-          id,
-          studentId,
-          startDate,
-          endDate,
-          weeksCount,
-          destinationCountry,
-          destinationName,
-          mobilityStatus = "N/A",
-        } = entry;
-
-        const studentExists = await db
-          .select({ userId: students.userId })
-          .from(students)
-          .where(eq(students.userId, studentId))
-          .limit(1)
-          .then((rows) => rows.length > 0);
-
-        if (!studentExists) {
-          console.warn(`Skipping mobility for unknown studentId: ${studentId}`);
-          continue;
-        }
-
-        let calculatedWeeksCount = weeksCount;
-        if (startDate && endDate) {
-          const start = new Date(startDate);
-          const end = new Date(endDate);
-          calculatedWeeksCount = start <= end
-            ? Math.ceil(
-              (end.getTime() - start.getTime()) / (7 * 24 * 60 * 60 * 1000),
-            )
-            : null;
-        }
-
-        await db
-          .insert(mobility)
-          .values({
-            id,
-            studentId,
-            startDate,
-            endDate,
-            weeksCount: calculatedWeeksCount,
-            destinationCountry,
-            destinationName,
-            mobilityStatus,
-          })
-          .onConflictDoUpdate({
-            target: mobility.id,
-            set: {
-              startDate,
-              endDate,
-              weeksCount: calculatedWeeksCount,
-              destinationCountry,
-              destinationName,
-              mobilityStatus,
-            },
-          });
-      }
-
-      return new Response("Data inserted/updated successfully", {
-        status: 200,
-      });
-    } catch (error) {
-      console.error("Error inserting mobility data:", error);
-      return new Response("Failed to insert/update data", { status: 500 });
-    }
-  },
-};

routes/(apps)/mobility/api/mobilites.ts

@@ -0,0 +1,116 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { mobilites } from "$root/databases/schema.ts";
+import { AuthenticatedState } from "$root/defaults/interfaces.ts";
+import { eq } from "npm:drizzle-orm@0.45.2";
+
+const VALID_STATUSES = [
+  "contracts_received",
+  "under_revision",
+  "done",
+  "validated",
+  "canceled",
+] as const;
+
+export const handler: Handlers<null, AuthenticatedState> = {
+  // GET /mobilites — list all, optional ?numEtud filter
+  async GET(request) {
+    try {
+      const url = new URL(request.url);
+      const numEtudParam = url.searchParams.get("numEtud");
+
+      let query = db.select().from(mobilites).$dynamic();
+
+      if (numEtudParam) {
+        const numEtud = parseInt(numEtudParam);
+        if (isNaN(numEtud)) {
+          return new Response("Paramètre numEtud invalide", { status: 400 });
+        }
+        query = query.where(eq(mobilites.numEtud, numEtud));
+      }
+
+      const result = await query;
+
+      return new Response(JSON.stringify(result), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    } catch (error) {
+      console.error("Error fetching mobilites:", error);
+      return new Response("Failed to fetch data", { status: 500 });
+    }
+  },
+
+  // POST /mobilites — create mobility
+  async POST(
+    request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    const isEmployee =
+      context.state.session.eduPersonPrimaryAffiliation === "employee";
+
+    try {
+      const body = await request.json();
+      const { numEtud, duree, ecole, pays, status, idStage } = body;
+
+      // Students can only create mobilites for themselves
+      if (!isEmployee && numEtud !== undefined) {
+        // Students cannot set idStage or status
+        if (idStage || (status && status !== "contracts_received")) {
+          return new Response(null, { status: 403 });
+        }
+      }
+
+      if (!numEtud || duree === undefined) {
+        return new Response(
+          JSON.stringify({ error: "Champs requis: numEtud, duree" }),
+          { status: 400, headers: { "content-type": "application/json" } },
+        );
+      }
+
+      if (!Number.isInteger(duree) || duree < 1) {
+        return new Response(
+          JSON.stringify({ error: "duree doit être un entier >= 1" }),
+          { status: 400, headers: { "content-type": "application/json" } },
+        );
+      }
+
+      if (
+        status !== undefined &&
+        !VALID_STATUSES.includes(status)
+      ) {
+        return new Response(
+          JSON.stringify({
+            error: `status invalide, valeurs: ${VALID_STATUSES.join(", ")}`,
+          }),
+          { status: 400, headers: { "content-type": "application/json" } },
+        );
+      }
+
+      // Stage-linked mobilities are always validated
+      const effectiveStatus = idStage
+        ? "validated"
+        : (status ?? "contracts_received");
+
+      const [created] = await db
+        .insert(mobilites)
+        .values({
+          numEtud,
+          duree,
+          ecole: ecole ?? null,
+          pays: pays ?? null,
+          status: effectiveStatus,
+          idStage: idStage ?? null,
+        })
+        .returning();
+
+      return new Response(JSON.stringify(created), {
+        status: 201,
+        headers: { "content-type": "application/json" },
+      });
+    } catch (error) {
+      console.error("Error creating mobilite:", error);
+      return new Response("Failed to create mobilite", { status: 500 });
+    }
+  },
+};

routes/(apps)/mobility/api/mobilites/[idMob].ts

@@ -0,0 +1,149 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { mobilites } from "$root/databases/schema.ts";
+import { AuthenticatedState } from "$root/defaults/interfaces.ts";
+import { eq } from "npm:drizzle-orm@0.45.2";
+
+const VALID_STATUSES = [
+  "contracts_received",
+  "under_revision",
+  "done",
+  "validated",
+  "canceled",
+] as const;
+
+const NOT_FOUND = () =>
+  new Response(
+    JSON.stringify({ error: "Mobilité introuvable" }),
+    { status: 404, headers: { "content-type": "application/json" } },
+  );
+
+const FORBIDDEN = () => new Response(null, { status: 403 });
+
+export const handler: Handlers<null, AuthenticatedState> = {
+  // GET /mobilites/:idMob
+  async GET(
+    _request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    const idMob = Number(context.params.idMob);
+    if (isNaN(idMob)) {
+      return new Response("Paramètre idMob invalide", { status: 400 });
+    }
+
+    const row = await db
+      .select()
+      .from(mobilites)
+      .where(eq(mobilites.id, idMob))
+      .then((rows) => rows[0] ?? null);
+
+    if (!row) return NOT_FOUND();
+
+    return new Response(JSON.stringify(row), {
+      headers: { "content-type": "application/json" },
+    });
+  },
+
+  // PUT /mobilites/:idMob (employee only)
+  async PUT(
+    request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    if (context.state.session.eduPersonPrimaryAffiliation !== "employee") {
+      return FORBIDDEN();
+    }
+
+    const idMob = Number(context.params.idMob);
+    if (isNaN(idMob)) {
+      return new Response("Paramètre idMob invalide", { status: 400 });
+    }
+
+    const body = await request.json();
+    const { duree, ecole, pays, status, idStage } = body;
+
+    if (
+      status !== undefined &&
+      !VALID_STATUSES.includes(status)
+    ) {
+      return new Response(
+        JSON.stringify({
+          error: `status invalide, valeurs: ${VALID_STATUSES.join(", ")}`,
+        }),
+        { status: 400, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    if (duree !== undefined && (!Number.isInteger(duree) || duree < 1)) {
+      return new Response(
+        JSON.stringify({ error: "duree doit être un entier >= 1" }),
+        { status: 400, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    const set: Record<string, unknown> = {};
+    if (duree !== undefined) set.duree = duree;
+    if (ecole !== undefined) set.ecole = ecole;
+    if (pays !== undefined) set.pays = pays;
+    if (status !== undefined) set.status = status;
+    if (idStage !== undefined) {
+      set.idStage = idStage;
+      if (idStage) set.status = "validated";
+    }
+
+    if (Object.keys(set).length === 0) {
+      return new Response(
+        JSON.stringify({ error: "Au moins un champ à modifier requis" }),
+        { status: 400, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    const [updated] = await db
+      .update(mobilites)
+      .set(set)
+      .where(eq(mobilites.id, idMob))
+      .returning();
+
+    if (!updated) return NOT_FOUND();
+
+    return new Response(JSON.stringify(updated), {
+      headers: { "content-type": "application/json" },
+    });
+  },
+
+  // DELETE /mobilites/:idMob (employee only)
+  async DELETE(
+    _request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    if (context.state.session.eduPersonPrimaryAffiliation !== "employee") {
+      return FORBIDDEN();
+    }
+
+    const idMob = Number(context.params.idMob);
+    if (isNaN(idMob)) {
+      return new Response("Paramètre idMob invalide", { status: 400 });
+    }
+
+    // Delete contract file if exists
+    const row = await db
+      .select({ contratMob: mobilites.contratMob })
+      .from(mobilites)
+      .where(eq(mobilites.id, idMob))
+      .then((rows) => rows[0] ?? null);
+
+    if (row?.contratMob) {
+      try {
+        await Deno.remove(`uploads/contracts/${row.contratMob}`);
+      } catch { /* file may not exist */ }
+    }
+
+    const [deleted] = await db
+      .delete(mobilites)
+      .where(eq(mobilites.id, idMob))
+      .returning();
+
+    if (!deleted) return NOT_FOUND();
+
+    return new Response(null, { status: 204 });
+  },
+};

routes/(apps)/mobility/api/mobilites/[idMob]/contrat.ts

@@ -0,0 +1,156 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { mobilites } from "$root/databases/schema.ts";
+import { AuthenticatedState } from "$root/defaults/interfaces.ts";
+import { eq } from "npm:drizzle-orm@0.45.2";
+
+const CONTRACTS_DIR = "uploads/contracts";
+
+export const handler: Handlers<null, AuthenticatedState> = {
+  // GET /mobilites/:idMob/contrat — download contract PDF
+  async GET(
+    _request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    const idMob = Number(context.params.idMob);
+    if (isNaN(idMob)) {
+      return new Response("Paramètre idMob invalide", { status: 400 });
+    }
+
+    const row = await db
+      .select({ contratMob: mobilites.contratMob })
+      .from(mobilites)
+      .where(eq(mobilites.id, idMob))
+      .then((rows) => rows[0] ?? null);
+
+    if (!row) {
+      return new Response(
+        JSON.stringify({ error: "Mobilité introuvable" }),
+        { status: 404, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    if (!row.contratMob) {
+      return new Response(
+        JSON.stringify({ error: "Aucun contrat pour cette mobilité" }),
+        { status: 404, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    try {
+      const file = await Deno.readFile(`${CONTRACTS_DIR}/${row.contratMob}`);
+      return new Response(file, {
+        headers: {
+          "Content-Type": "application/pdf",
+          "Content-Disposition": `inline; filename="${row.contratMob}"`,
+        },
+      });
+    } catch {
+      return new Response(
+        JSON.stringify({ error: "Fichier contrat introuvable" }),
+        { status: 404, headers: { "content-type": "application/json" } },
+      );
+    }
+  },
+
+  // POST /mobilites/:idMob/contrat — upload contract PDF
+  async POST(
+    request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    const idMob = Number(context.params.idMob);
+    if (isNaN(idMob)) {
+      return new Response("Paramètre idMob invalide", { status: 400 });
+    }
+
+    // Check mobility exists
+    const row = await db
+      .select({ id: mobilites.id })
+      .from(mobilites)
+      .where(eq(mobilites.id, idMob))
+      .then((rows) => rows[0] ?? null);
+
+    if (!row) {
+      return new Response(
+        JSON.stringify({ error: "Mobilité introuvable" }),
+        { status: 404, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    const formData = await request.formData();
+    const file = formData.get("contrat");
+
+    if (!file || !(file instanceof File)) {
+      return new Response(
+        JSON.stringify({ error: "Fichier 'contrat' requis (PDF)" }),
+        { status: 400, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    if (file.type !== "application/pdf") {
+      return new Response(
+        JSON.stringify({ error: "Le fichier doit être un PDF" }),
+        { status: 400, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    const filename = `mob_${idMob}.pdf`;
+    await Deno.mkdir(CONTRACTS_DIR, { recursive: true });
+    await Deno.writeFile(
+      `${CONTRACTS_DIR}/${filename}`,
+      new Uint8Array(await file.arrayBuffer()),
+    );
+
+    const [updated] = await db
+      .update(mobilites)
+      .set({ contratMob: filename })
+      .where(eq(mobilites.id, idMob))
+      .returning();
+
+    return new Response(JSON.stringify(updated), {
+      status: 200,
+      headers: { "content-type": "application/json" },
+    });
+  },
+
+  // DELETE /mobilites/:idMob/contrat — remove contract (employee only)
+  async DELETE(
+    _request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    if (context.state.session.eduPersonPrimaryAffiliation !== "employee") {
+      return new Response(null, { status: 403 });
+    }
+
+    const idMob = Number(context.params.idMob);
+    if (isNaN(idMob)) {
+      return new Response("Paramètre idMob invalide", { status: 400 });
+    }
+
+    const row = await db
+      .select({ contratMob: mobilites.contratMob })
+      .from(mobilites)
+      .where(eq(mobilites.id, idMob))
+      .then((rows) => rows[0] ?? null);
+
+    if (!row) {
+      return new Response(
+        JSON.stringify({ error: "Mobilité introuvable" }),
+        { status: 404, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    if (row.contratMob) {
+      try {
+        await Deno.remove(`${CONTRACTS_DIR}/${row.contratMob}`);
+      } catch { /* file may not exist */ }
+    }
+
+    await db
+      .update(mobilites)
+      .set({ contratMob: null })
+      .where(eq(mobilites.id, idMob));
+
+    return new Response(null, { status: 204 });
+  },
+};

routes/(apps)/mobility/partials/(admin)/consult_students_test.tsx

@@ -1,21 +0,0 @@
-import ConsultStudents_test from "$root/routes/(apps)/mobility/(_islands)/ConsultStudents_test.tsx";
-import {
-  getPartialsConfig,
-  makePartials,
-} from "$root/defaults/makePartials.tsx";
-import { FreshContext } from "$fresh/server.ts";
-import { State } from "$root/routes/_middleware.ts";
-//import EditStudents from "../(_islands)/EditStudents.tsx";
-
-// deno-lint-ignore require-await
-async function Mobility(_request: Request, _context: FreshContext<State>) {
-  return (
-    <>
-      <h1>Test consult students</h1>
-      <ConsultStudents_test />
-    </>
-  );
-}
-
-export const config = getPartialsConfig();
-export default makePartials(Mobility);

routes/(apps)/mobility/partials/(admin)/edit_mobility.tsx

@@ -1,20 +0,0 @@
-import EditMobility from "$root/routes/(apps)/mobility/(_islands)/EditMobility.tsx";
-import {
-  getPartialsConfig,
-  makePartials,
-} from "$root/defaults/makePartials.tsx";
-import { FreshContext } from "$fresh/server.ts";
-import { State } from "$root/routes/_middleware.ts";
-
-// deno-lint-ignore require-await
-async function Mobility(_request: Request, _context: FreshContext<State>) {
-  return (
-    <>
-      <h1>Edit mobility</h1>
-      <EditMobility />
-    </>
-  );
-}
-
-export const config = getPartialsConfig();
-export default makePartials(Mobility);

routes/(apps)/mobility/partials/index.tsx

@@ -3,11 +3,27 @@ import {
   makePartials,
 } from "$root/defaults/makePartials.tsx";
 import { FreshContext } from "$fresh/server.ts";
-import { State } from "$root/routes/_middleware.ts";
+import { State } from "$root/defaults/interfaces.ts";
 
 // deno-lint-ignore require-await
-export async function Index(_request: Request, context: FreshContext<State>) {
+export async function Index(
-  return <h2>Welcome to {context.state.session?.displayName}.</h2>;
+  _request: Request,
+  context: FreshContext<State>,
+) {
+  return (
+    <div class="page-content">
+      <h2 class="page-title">Mobilité internationale</h2>
+      <p>
+        Bienvenue{" "}
+        <strong>
+          {(context.state as unknown as { session: Record<string, string> })
+            .session.displayName}
+        </strong>
+        .
+      </p>
+      <p>Suivi des mobilités : 12 semaines validées requises par élève.</p>
+    </div>
+  );
 }
 
 export const config = getPartialsConfig();

routes/(apps)/mobility/partials/overview.tsx

@@ -1,20 +1,19 @@
-import ConsultMobility from "$root/routes/(apps)/mobility/(_islands)/ConsultMobility.tsx";
 import {
   getPartialsConfig,
   makePartials,
 } from "$root/defaults/makePartials.tsx";
 import { FreshContext } from "$fresh/server.ts";
-import { State } from "$root/routes/_middleware.ts";
+import { State } from "$root/defaults/interfaces.ts";
+import MobilityOverview from "../(_islands)/MobilityOverview.tsx";
 
 // deno-lint-ignore require-await
-async function Mobility(_request: Request, _context: FreshContext<State>) {
+async function Overview(
-  return (
+  _request: Request,
-    <>
+  _context: FreshContext<State>,
-      <h1>Edit mobility</h1>
+) {
-      <ConsultMobility />
+  return <MobilityOverview />;
-    </>
-  );
 }
 
+export { Overview as Page };
 export const config = getPartialsConfig();
-export default makePartials(Mobility);
+export default makePartials(Overview);

routes/(apps)/notes/(_islands)/ImportNotes.tsx

@@ -273,9 +273,9 @@ export default function ImportNotes() {
     Promise.all([
       fetch("/students/api/students").then((r) => r.json()),
       fetch("/notes/api/notes").then((r) => r.json()),
-      fetch("/admin/api/modules").then((r) => r.json()),
+      fetch("/notes/api/modules").then((r) => r.json()),
-      fetch("/admin/api/ue-modules").then((r) => r.json()),
+      fetch("/notes/api/ue-modules").then((r) => r.json()),
-      fetch("/admin/api/ues").then((r) => r.json()),
+      fetch("/notes/api/ues").then((r) => r.json()),
     ]).then(
       ([
         studentsData,
@@ -450,7 +450,10 @@ export default function ImportNotes() {
         const ws2 = XLSX.utils.aoa_to_sheet([headerRow, coeffRow, ...s2Rows]);
         XLSX.utils.book_append_sheet(wb, ws2, "Session 2");
         const buf = XLSX.write(wb, { bookType: "xlsx", type: "array" });
-        const blob = new Blob([buf], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+        const blob = new Blob([buf], {
+          type:
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        });
         const url = URL.createObjectURL(blob);
         const a = document.createElement("a");
         a.href = url;
@@ -600,6 +603,8 @@ export default function ImportNotes() {
         >
           Telecharger Modele
         </button>
+        {
+          /* TODO: fix blob download in Fresh
         <button
           type="button"
           class="btn btn-secondary"
@@ -607,6 +612,8 @@ export default function ImportNotes() {
         >
           Exporter Notes
         </button>
+        */
+        }
       </div>
 
       <p class="upload-format">

routes/(apps)/notes/(_islands)/NoteRecap.tsx

@@ -66,11 +66,11 @@ export default function NoteRecap({ numEtud }: Props) {
       setStudent(s);
 
       const [uesRes, umRes, mRes, notesRes, ajustRes] = await Promise.all([
-        fetch("/admin/api/ues"),
+        fetch("/notes/api/ues"),
         fetch(
-          `/admin/api/ue-modules?idPromo=${encodeURIComponent(s.idPromo)}`,
+          `/notes/api/ue-modules?idPromo=${encodeURIComponent(s.idPromo)}`,
         ),
-        fetch("/admin/api/modules"),
+        fetch("/notes/api/modules"),
         fetch(`/notes/api/notes?numEtud=${numEtud}`),
         fetch(`/notes/api/ajustements?numEtud=${numEtud}`),
       ]);

routes/(apps)/notes/(_islands)/NotesView.tsx

@@ -62,9 +62,9 @@ export default function NotesView({ numEtud, prenom }: Props) {
       try {
         const [notesRes, uesRes, ueModRes, modRes, ajRes] = await Promise.all([
           fetch(`/notes/api/notes?numEtud=${numEtud}`),
-          fetch("/admin/api/ues"),
+          fetch("/notes/api/ues"),
-          fetch("/admin/api/ue-modules"),
+          fetch("/notes/api/ue-modules"),
-          fetch("/admin/api/modules"),
+          fetch("/notes/api/modules"),
           fetch(`/notes/api/ajustements?numEtud=${numEtud}`),
         ]);
 

routes/(apps)/notes/[slug].tsx

@@ -0,0 +1,2 @@
+import makeSlug from "$root/defaults/makeSlug.ts";
+export default makeSlug(import.meta.dirname!);

routes/(apps)/notes/api/modules.ts

@@ -0,0 +1,12 @@
+import { Handlers } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { modules } from "$root/databases/schema.ts";
+
+export const handler: Handlers = {
+  async GET() {
+    const rows = await db.select().from(modules);
+    return new Response(JSON.stringify(rows), {
+      headers: { "content-type": "application/json" },
+    });
+  },
+};

routes/(apps)/notes/api/ue-modules.ts

@@ -0,0 +1,28 @@
+import { Handlers } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { ueModules } from "$root/databases/schema.ts";
+import { and, eq } from "npm:drizzle-orm@0.45.2";
+
+export const handler: Handlers = {
+  async GET(request) {
+    const url = new URL(request.url);
+    const idPromo = url.searchParams.get("idPromo");
+    const idUEParam = url.searchParams.get("idUE");
+    const idUE = idUEParam ? parseInt(idUEParam) : null;
+
+    if (idUEParam && isNaN(idUE!)) {
+      return new Response("Paramètre idUE invalide", { status: 400 });
+    }
+
+    const rows = await db.select().from(ueModules).where(
+      and(
+        idPromo ? eq(ueModules.idPromo, idPromo) : undefined,
+        idUE ? eq(ueModules.idUE, idUE) : undefined,
+      ),
+    );
+
+    return new Response(JSON.stringify(rows), {
+      headers: { "content-type": "application/json" },
+    });
+  },
+};

routes/(apps)/notes/api/ues.ts

@@ -0,0 +1,12 @@
+import { Handlers } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { ues } from "$root/databases/schema.ts";
+
+export const handler: Handlers = {
+  async GET() {
+    const rows = await db.select().from(ues);
+    return new Response(JSON.stringify(rows), {
+      headers: { "content-type": "application/json" },
+    });
+  },
+};

routes/(apps)/notes/partials/(admin)/courses.tsx

@@ -11,5 +11,6 @@ async function Courses(_request: Request, _context: FreshContext<State>) {
   return <AdminConsultNotes />;
 }
 
+export { Courses as Page };
 export const config = getPartialsConfig();
 export default makePartials(Courses);

routes/(apps)/notes/partials/(admin)/import.tsx

@@ -19,5 +19,6 @@ async function ImportNotesPage(
   );
 }
 
+export { ImportNotesPage as Page };
 export const config = getPartialsConfig();
 export default makePartials(ImportNotesPage);

routes/(apps)/notes/partials/notes.tsx

@@ -54,5 +54,6 @@ async function Notes(
   );
 }
 
+export { Notes as Page };
 export const config = getPartialsConfig();
 export default makePartials(Notes);

routes/(apps)/stages/(_islands)/StagesOverview.tsx

@@ -0,0 +1,542 @@
+import { useEffect, useState } from "preact/hooks";
+
+type Student = {
+  numEtud: number;
+  nom: string;
+  prenom: string;
+  idPromo: string;
+};
+type Promotion = { id: string; annee: string };
+type Stage = {
+  id: number;
+  numEtud: number;
+  duree: number;
+  nomEntreprise: string;
+  mission: string | null;
+};
+
+const REQUIRED_WEEKS = 40;
+
+export default function StagesOverview() {
+  const [students, setStudents] = useState<Student[]>([]);
+  const [promos, setPromos] = useState<Promotion[]>([]);
+  const [stagesList, setStagesList] = useState<Stage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [filterPromo, setFilterPromo] = useState("");
+  const [filterNom, setFilterNom] = useState("");
+
+  // Detail view state
+  const [detailStudent, setDetailStudent] = useState<Student | null>(null);
+  const [editingStage, setEditingStage] = useState<Stage | null>(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+
+  async function load() {
+    try {
+      const [sRes, pRes, stRes] = await Promise.all([
+        fetch("/students/api/students"),
+        fetch("/students/api/promotions"),
+        fetch("/stages/api/stages"),
+      ]);
+      if (!sRes.ok) throw new Error("Impossible de charger les données");
+      const [sData, pData, stData] = await Promise.all([
+        sRes.json(),
+        pRes.ok ? pRes.json() : [],
+        stRes.ok ? stRes.json() : [],
+      ]);
+      setStudents(sData);
+      setPromos(pData);
+      setStagesList(stData);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erreur");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  if (detailStudent) {
+    return (
+      <DetailView
+        student={detailStudent}
+        stages={stagesList.filter((s) => s.numEtud === detailStudent.numEtud)}
+        allStages={stagesList}
+        editingStage={editingStage}
+        setEditingStage={setEditingStage}
+        showAddForm={showAddForm}
+        setShowAddForm={setShowAddForm}
+        onBack={() => {
+          setDetailStudent(null);
+          setEditingStage(null);
+          setShowAddForm(false);
+        }}
+        onReload={load}
+      />
+    );
+  }
+
+  if (loading) {
+    return (
+      <div class="page-content">
+        <p class="state-loading">Chargement...</p>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div class="page-content">
+        <p class="state-error">{error}</p>
+      </div>
+    );
+  }
+
+  const filtered = students.filter((s) => {
+    const matchPromo = !filterPromo || s.idPromo === filterPromo;
+    const matchNom = !filterNom ||
+      `${s.nom} ${s.prenom}`.toLowerCase().includes(filterNom.toLowerCase());
+    return matchPromo && matchNom;
+  });
+
+  const stagesByStudent = (numEtud: number) =>
+    stagesList.filter((s) => s.numEtud === numEtud);
+
+  return (
+    <div class="page-content">
+      <h2 class="page-title">Suivi des stages</h2>
+
+      <div class="filters">
+        <select
+          class="filter-select"
+          value={filterPromo}
+          onChange={(e) =>
+            setFilterPromo((e.target as HTMLSelectElement).value)}
+        >
+          <option value="">Toutes les promos</option>
+          {promos.map((p) => <option key={p.id} value={p.id}>{p.id}</option>)}
+        </select>
+        <input
+          class="filter-input"
+          placeholder="Rechercher..."
+          value={filterNom}
+          onInput={(e) => setFilterNom((e.target as HTMLInputElement).value)}
+        />
+      </div>
+
+      <ListView
+        students={filtered}
+        stagesByStudent={stagesByStudent}
+        onConsult={(s) => setDetailStudent(s)}
+      />
+    </div>
+  );
+}
+
+// ─── Liste View ─────────────────────────────────────────────
+
+function ListView(
+  { students, stagesByStudent, onConsult }: {
+    students: Student[];
+    stagesByStudent: (n: number) => Stage[];
+    onConsult: (s: Student) => void;
+  },
+) {
+  return (
+    <div class="data-table-wrap">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>N° étud.</th>
+            <th>Nom</th>
+            <th>Prénom</th>
+            <th>Semaines</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {students.length === 0
+            ? (
+              <tr>
+                <td colspan={5} class="state-empty">Aucun élève trouvé</td>
+              </tr>
+            )
+            : students.map((s) => {
+              const stages = stagesByStudent(s.numEtud);
+              const weeks = stages.reduce((sum, st) => sum + st.duree, 0);
+              const ok = weeks >= REQUIRED_WEEKS;
+              return (
+                <tr key={s.numEtud}>
+                  <td class="col-dim">{s.numEtud}</td>
+                  <td>{s.nom}</td>
+                  <td>{s.prenom}</td>
+                  <td>
+                    <span
+                      style={{
+                        color: ok ? "var(--ok-color,#22c55e)" : "#dc2626",
+                        fontWeight: "var(--font-weight-bold)",
+                        fontFamily: "monospace",
+                      }}
+                    >
+                      {weeks}/{REQUIRED_WEEKS}
+                    </span>
+                  </td>
+                  <td>
+                    <button
+                      type="button"
+                      class="btn btn-sm btn-primary"
+                      onClick={() => onConsult(s)}
+                    >
+                      Consulter
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ─── Detail View ────────────────────────────────────────────
+
+function DetailView(
+  {
+    student,
+    stages,
+    allStages,
+    editingStage,
+    setEditingStage,
+    showAddForm,
+    setShowAddForm,
+    onBack,
+    onReload,
+  }: {
+    student: Student;
+    stages: Stage[];
+    allStages: Stage[];
+    editingStage: Stage | null;
+    setEditingStage: (s: Stage | null) => void;
+    showAddForm: boolean;
+    setShowAddForm: (v: boolean) => void;
+    onBack: () => void;
+    onReload: () => Promise<void>;
+  },
+) {
+  const weeks = stages.reduce((sum, s) => sum + s.duree, 0);
+  const entreprises = [
+    ...new Set(allStages.map((s) => s.nomEntreprise).filter(Boolean)),
+  ];
+
+  async function deleteStage(id: number) {
+    if (!confirm("Supprimer ce stage ?")) return;
+    await fetch(`/stages/api/stages/${id}`, { method: "DELETE" });
+    await onReload();
+  }
+
+  return (
+    <div class="page-content">
+      <button
+        type="button"
+        class="btn btn-sm btn-secondary"
+        onClick={onBack}
+        style={{ marginBottom: "0.75rem" }}
+      >
+        Retour
+      </button>
+      <h2 class="page-title">
+        Consulter : {student.prenom} {student.nom}
+        <span
+          style={{
+            fontSize: "0.8rem",
+            fontWeight: "normal",
+            marginLeft: "0.75rem",
+            color: weeks >= REQUIRED_WEEKS ? "#22c55e" : "#dc2626",
+            fontFamily: "monospace",
+          }}
+        >
+          {weeks}/{REQUIRED_WEEKS} semaines
+        </span>
+      </h2>
+
+      {stages.length === 0 && (
+        <p class="state-empty">
+          Aucun stage enregistré.
+        </p>
+      )}
+
+      {stages.map((stage, i) => {
+        const isEditing = editingStage?.id === stage.id;
+
+        if (isEditing) {
+          return (
+            <StageEditForm
+              key={stage.id}
+              stage={stage}
+              entreprises={entreprises}
+              onCancel={() => setEditingStage(null)}
+              onSave={async () => {
+                setEditingStage(null);
+                await onReload();
+              }}
+            />
+          );
+        }
+
+        return (
+          <div key={stage.id} class="ue-card" style={{ marginBottom: "1rem" }}>
+            <div class="ue-card-header">
+              <p class="ue-card-title">
+                Stage {i + 1}
+              </p>
+              <p class="ue-card-avg">
+                Durée : {stage.duree} semaine(s)
+              </p>
+            </div>
+            <div style={{ padding: "0.6rem 1.1rem" }}>
+              <p style={{ fontSize: "0.82rem", margin: "0 0 0.4rem" }}>
+                Entreprise : <strong>{stage.nomEntreprise}</strong>
+                {stage.mission && <span>— {stage.mission}</span>}
+              </p>
+              <div
+                style={{
+                  display: "flex",
+                  gap: "0.5rem",
+                  flexWrap: "wrap",
+                  marginTop: "0.5rem",
+                }}
+              >
+                <button
+                  type="button"
+                  class="btn btn-sm btn-secondary"
+                  onClick={() =>
+                    setEditingStage(stage)}
+                >
+                  Modifier
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-sm btn-danger"
+                  onClick={() =>
+                    deleteStage(stage.id)}
+                >
+                  Supprimer
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+
+      {showAddForm
+        ? (
+          <StageAddForm
+            numEtud={student.numEtud}
+            entreprises={entreprises}
+            onCancel={() => setShowAddForm(false)}
+            onSave={async () => {
+              setShowAddForm(false);
+              await onReload();
+            }}
+          />
+        )
+        : (
+          <button
+            type="button"
+            class="btn btn-primary"
+            onClick={() => setShowAddForm(true)}
+          >
+            + Nouveau stage
+          </button>
+        )}
+    </div>
+  );
+}
+
+// ─── Inline forms ───────────────────────────────────────────
+
+function StageEditForm(
+  { stage, entreprises, onCancel, onSave }: {
+    stage: Stage;
+    entreprises: string[];
+    onCancel: () => void;
+    onSave: () => Promise<void>;
+  },
+) {
+  const [duree, setDuree] = useState(String(stage.duree));
+  const [nomEntreprise, setNomEntreprise] = useState(stage.nomEntreprise);
+  const [mission, setMission] = useState(stage.mission ?? "");
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    setBusy(true);
+    try {
+      const res = await fetch(`/stages/api/stages/${stage.id}`, {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          duree: parseInt(duree),
+          nomEntreprise,
+          mission: mission || null,
+        }),
+      });
+      if (!res.ok) throw new Error("Erreur");
+      await onSave();
+    } catch {
+      alert("Erreur lors de la modification");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div class="edit-section" style={{ marginBottom: "1rem" }}>
+      <p class="edit-section-title">Modifier le stage #{stage.id}</p>
+      <div class="form-grid">
+        <div class="form-field">
+          <label>Durée (semaines)</label>
+          <input
+            class="form-input"
+            type="number"
+            min="1"
+            value={duree}
+            onInput={(e) => setDuree((e.target as HTMLInputElement).value)}
+          />
+        </div>
+        <div class="form-field">
+          <label>Entreprise</label>
+          <input
+            class="form-input"
+            list="edit-entreprises"
+            value={nomEntreprise}
+            onInput={(e) =>
+              setNomEntreprise((e.target as HTMLInputElement).value)}
+          />
+          <datalist id="edit-entreprises">
+            {entreprises.map((e) => <option key={e} value={e} />)}
+          </datalist>
+        </div>
+        <div class="form-field">
+          <label>Mission</label>
+          <input
+            class="form-input"
+            value={mission}
+            onInput={(e) => setMission((e.target as HTMLInputElement).value)}
+          />
+        </div>
+      </div>
+      <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
+        <button
+          type="button"
+          class="btn btn-sm btn-primary"
+          disabled={busy || !nomEntreprise}
+          onClick={submit}
+        >
+          Enregistrer
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-secondary"
+          onClick={onCancel}
+        >
+          Annuler
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function StageAddForm(
+  { numEtud, entreprises, onCancel, onSave }: {
+    numEtud: number;
+    entreprises: string[];
+    onCancel: () => void;
+    onSave: () => Promise<void>;
+  },
+) {
+  const [duree, setDuree] = useState("4");
+  const [nomEntreprise, setNomEntreprise] = useState("");
+  const [mission, setMission] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    setBusy(true);
+    try {
+      const res = await fetch("/stages/api/stages", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          numEtud,
+          duree: parseInt(duree),
+          nomEntreprise,
+          mission: mission || null,
+        }),
+      });
+      if (!res.ok) throw new Error("Erreur");
+      await onSave();
+    } catch {
+      alert("Erreur lors de la création");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div class="edit-section" style={{ marginBottom: "1rem" }}>
+      <p class="edit-section-title">Nouveau stage</p>
+      <div class="form-grid">
+        <div class="form-field">
+          <label>Durée (semaines)</label>
+          <input
+            class="form-input"
+            type="number"
+            min="1"
+            value={duree}
+            onInput={(e) => setDuree((e.target as HTMLInputElement).value)}
+          />
+        </div>
+        <div class="form-field">
+          <label>Entreprise</label>
+          <input
+            class="form-input"
+            list="add-entreprises"
+            value={nomEntreprise}
+            onInput={(e) =>
+              setNomEntreprise((e.target as HTMLInputElement).value)}
+          />
+          <datalist id="add-entreprises">
+            {entreprises.map((e) => <option key={e} value={e} />)}
+          </datalist>
+        </div>
+        <div class="form-field">
+          <label>Mission</label>
+          <input
+            class="form-input"
+            value={mission}
+            onInput={(e) => setMission((e.target as HTMLInputElement).value)}
+          />
+        </div>
+      </div>
+      <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
+        <button
+          type="button"
+          class="btn btn-sm btn-primary"
+          disabled={busy || !nomEntreprise || !duree}
+          onClick={submit}
+        >
+          Créer
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-secondary"
+          onClick={onCancel}
+        >
+          Annuler
+        </button>
+      </div>
+    </div>
+  );
+}

routes/(apps)/stages/(_props)/props.ts

@@ -0,0 +1,15 @@
+import { AppProperties } from "$root/defaults/interfaces.ts";
+
+const properties: AppProperties = {
+  name: "Stages",
+  icon: "work",
+  pages: {
+    index: "Accueil",
+    overview: "Suivi des stages",
+  },
+  adminOnly: ["overview"],
+  employeeOnly: true,
+  hint: "Suivi des stages et semaines",
+};
+
+export default properties;

routes/(apps)/stages/[slug].tsx

@@ -0,0 +1,2 @@
+import makeSlug from "$root/defaults/makeSlug.ts";
+export default makeSlug(import.meta.dirname!);

routes/(apps)/stages/api/stages.ts

@@ -0,0 +1,84 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { stages } from "$root/databases/schema.ts";
+import { AuthenticatedState } from "$root/defaults/interfaces.ts";
+import { eq } from "npm:drizzle-orm@0.45.2";
+
+export const handler: Handlers<null, AuthenticatedState> = {
+  // GET /stages — list all, optional ?numEtud filter
+  async GET(request) {
+    try {
+      const url = new URL(request.url);
+      const numEtudParam = url.searchParams.get("numEtud");
+
+      let query = db.select().from(stages).$dynamic();
+
+      if (numEtudParam) {
+        const numEtud = parseInt(numEtudParam);
+        if (isNaN(numEtud)) {
+          return new Response("Paramètre numEtud invalide", { status: 400 });
+        }
+        query = query.where(eq(stages.numEtud, numEtud));
+      }
+
+      const result = await query;
+
+      return new Response(JSON.stringify(result), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    } catch (error) {
+      console.error("Error fetching stages:", error);
+      return new Response("Failed to fetch data", { status: 500 });
+    }
+  },
+
+  // POST /stages — create stage (employee only)
+  async POST(
+    request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    if (context.state.session.eduPersonPrimaryAffiliation !== "employee") {
+      return new Response(null, { status: 403 });
+    }
+
+    try {
+      const body = await request.json();
+      const { numEtud, duree, nomEntreprise, mission } = body;
+
+      if (!numEtud || duree === undefined || !nomEntreprise) {
+        return new Response(
+          JSON.stringify({
+            error: "Champs requis: numEtud, duree, nomEntreprise",
+          }),
+          { status: 400, headers: { "content-type": "application/json" } },
+        );
+      }
+
+      if (!Number.isInteger(duree) || duree < 1) {
+        return new Response(
+          JSON.stringify({ error: "duree doit être un entier >= 1" }),
+          { status: 400, headers: { "content-type": "application/json" } },
+        );
+      }
+
+      const [created] = await db
+        .insert(stages)
+        .values({
+          numEtud,
+          duree,
+          nomEntreprise,
+          mission: mission ?? null,
+        })
+        .returning();
+
+      return new Response(JSON.stringify(created), {
+        status: 201,
+        headers: { "content-type": "application/json" },
+      });
+    } catch (error) {
+      console.error("Error creating stage:", error);
+      return new Response("Failed to create stage", { status: 500 });
+    }
+  },
+};

routes/(apps)/stages/api/stages/[idStage].ts

@@ -0,0 +1,122 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { mobilites, stages } from "$root/databases/schema.ts";
+import { AuthenticatedState } from "$root/defaults/interfaces.ts";
+import { eq } from "npm:drizzle-orm@0.45.2";
+
+const NOT_FOUND = () =>
+  new Response(
+    JSON.stringify({ error: "Stage introuvable" }),
+    { status: 404, headers: { "content-type": "application/json" } },
+  );
+
+const FORBIDDEN = () => new Response(null, { status: 403 });
+
+export const handler: Handlers<null, AuthenticatedState> = {
+  // GET /stages/:idStage
+  async GET(
+    _request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    const idStage = Number(context.params.idStage);
+    if (isNaN(idStage)) {
+      return new Response("Paramètre idStage invalide", { status: 400 });
+    }
+
+    const row = await db
+      .select()
+      .from(stages)
+      .where(eq(stages.id, idStage))
+      .then((rows) => rows[0] ?? null);
+
+    if (!row) return NOT_FOUND();
+
+    return new Response(JSON.stringify(row), {
+      headers: { "content-type": "application/json" },
+    });
+  },
+
+  // PUT /stages/:idStage (employee only)
+  async PUT(
+    request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    if (context.state.session.eduPersonPrimaryAffiliation !== "employee") {
+      return FORBIDDEN();
+    }
+
+    const idStage = Number(context.params.idStage);
+    if (isNaN(idStage)) {
+      return new Response("Paramètre idStage invalide", { status: 400 });
+    }
+
+    const body = await request.json();
+    const { duree, nomEntreprise, mission } = body;
+
+    if (duree !== undefined && (!Number.isInteger(duree) || duree < 1)) {
+      return new Response(
+        JSON.stringify({ error: "duree doit être un entier >= 1" }),
+        { status: 400, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    const set: Record<string, unknown> = {};
+    if (duree !== undefined) set.duree = duree;
+    if (nomEntreprise !== undefined) set.nomEntreprise = nomEntreprise;
+    if (mission !== undefined) set.mission = mission;
+
+    if (Object.keys(set).length === 0) {
+      return new Response(
+        JSON.stringify({ error: "Au moins un champ à modifier requis" }),
+        { status: 400, headers: { "content-type": "application/json" } },
+      );
+    }
+
+    const [updated] = await db
+      .update(stages)
+      .set(set)
+      .where(eq(stages.id, idStage))
+      .returning();
+
+    if (!updated) return NOT_FOUND();
+
+    // If duration changed and this stage is linked as a mobility, update the mobility too
+    if (duree !== undefined) {
+      await db
+        .update(mobilites)
+        .set({ duree })
+        .where(eq(mobilites.idStage, idStage));
+    }
+
+    return new Response(JSON.stringify(updated), {
+      headers: { "content-type": "application/json" },
+    });
+  },
+
+  // DELETE /stages/:idStage (employee only)
+  async DELETE(
+    _request: Request,
+    context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    if (context.state.session.eduPersonPrimaryAffiliation !== "employee") {
+      return FORBIDDEN();
+    }
+
+    const idStage = Number(context.params.idStage);
+    if (isNaN(idStage)) {
+      return new Response("Paramètre idStage invalide", { status: 400 });
+    }
+
+    // Remove linked mobilites first (FK constraint)
+    await db.delete(mobilites).where(eq(mobilites.idStage, idStage));
+
+    const [deleted] = await db
+      .delete(stages)
+      .where(eq(stages.id, idStage))
+      .returning();
+
+    if (!deleted) return NOT_FOUND();
+
+    return new Response(null, { status: 204 });
+  },
+};

routes/(apps)/stages/index.tsx

@@ -0,0 +1,2 @@
+import makeIndex from "$root/defaults/makeIndex.ts";
+export default makeIndex(import.meta.dirname!);

routes/(apps)/stages/partials/index.tsx

@@ -0,0 +1,30 @@
+import {
+  getPartialsConfig,
+  makePartials,
+} from "$root/defaults/makePartials.tsx";
+import { FreshContext } from "$fresh/server.ts";
+import { State } from "$root/defaults/interfaces.ts";
+
+// deno-lint-ignore require-await
+export async function Index(
+  _request: Request,
+  context: FreshContext<State>,
+) {
+  return (
+    <div class="page-content">
+      <h2 class="page-title">Stages</h2>
+      <p>
+        Bienvenue{" "}
+        <strong>
+          {(context.state as unknown as { session: Record<string, string> })
+            .session.displayName}
+        </strong>
+        .
+      </p>
+      <p>Suivi des stages : 40 semaines requises par élève.</p>
+    </div>
+  );
+}
+
+export const config = getPartialsConfig();
+export default makePartials(Index);

routes/(apps)/stages/partials/overview.tsx

@@ -0,0 +1,19 @@
+import {
+  getPartialsConfig,
+  makePartials,
+} from "$root/defaults/makePartials.tsx";
+import { FreshContext } from "$fresh/server.ts";
+import { State } from "$root/defaults/interfaces.ts";
+import StagesOverview from "../(_islands)/StagesOverview.tsx";
+
+// deno-lint-ignore require-await
+async function Overview(
+  _request: Request,
+  _context: FreshContext<State>,
+) {
+  return <StagesOverview />;
+}
+
+export { Overview as Page };
+export const config = getPartialsConfig();
+export default makePartials(Overview);

routes/(apps)/students/(_props)/props.ts

@@ -9,6 +9,7 @@ const properties: AppProperties = {
     upload: "Import xlsx",
   },
   adminOnly: ["consult", "upload"],
+  employeeOnly: true,
   hint: "Create students promotion and see informations",
 };
 

routes/(apps)/students/[slug].tsx

@@ -0,0 +1,2 @@
+import makeSlug from "$root/defaults/makeSlug.ts";
+export default makeSlug(import.meta.dirname!);

routes/(apps)/students/api/students/[numEtud].ts

@@ -2,8 +2,9 @@ import { FreshContext, Handlers } from "$fresh/server.ts";
 import { db } from "$root/databases/db.ts";
 import {
   ajustements,
-  mobility,
+  mobilites,
   notes,
+  stages,
   students,
 } from "$root/databases/schema.ts";
 import { AuthenticatedState } from "$root/defaults/interfaces.ts";
@@ -80,7 +81,7 @@ export const handler: Handlers<null, AuthenticatedState> = {
   },
 
   // #12 DELETE /students/{numEtud}
-  // Cascade: deletes notes, ajustements, mobility for this student.
+  // Cascade: deletes notes, ajustements, mobilites, stages for this student.
   async DELETE(
     _request: Request,
     context: FreshContext<AuthenticatedState>,
@@ -102,7 +103,8 @@ export const handler: Handlers<null, AuthenticatedState> = {
     await db.transaction(async (tx) => {
       await tx.delete(notes).where(eq(notes.numEtud, numEtud));
       await tx.delete(ajustements).where(eq(ajustements.numEtud, numEtud));
-      await tx.delete(mobility).where(eq(mobility.studentId, numEtud));
+      await tx.delete(mobilites).where(eq(mobilites.numEtud, numEtud));
+      await tx.delete(stages).where(eq(stages.numEtud, numEtud));
       await tx.delete(students).where(eq(students.numEtud, numEtud));
     });
 

routes/(apps)/students/partials/(admin)/consult.tsx

@@ -11,5 +11,6 @@ async function Students(_request: Request, _context: FreshContext<State>) {
   return <ConsultStudents />;
 }
 
+export { Students as Page };
 export const config = getPartialsConfig();
 export default makePartials(Students);

routes/(apps)/students/partials/(admin)/upload.tsx

@@ -16,5 +16,6 @@ async function Students(_request: Request, _context: FreshContext<State>) {
   );
 }
 
+export { Students as Page };
 export const config = getPartialsConfig();
 export default makePartials(Students);

routes/_app.tsx

@@ -29,6 +29,7 @@ export default async function App(
         <link rel="stylesheet" href="/styles/app-cards.css" />
         <link rel="stylesheet" href="/styles/students.css" />
         <link rel="stylesheet" href="/styles/ui.css" />
+        <script src="/theme.js"></script>
       </head>
       <body f-client-nav>
         <Header link={link} />

routes/apps.tsx

@@ -44,9 +44,20 @@ export default async function Apps(
   _request: Request,
   context: FreshContext<State, Record<string, AppProperties>>,
 ) {
+  let visibleApps = context.data;
+
+  if (
+    context.state.isAuthenticated &&
+    context.state.session.eduPersonPrimaryAffiliation === "student"
+  ) {
+    visibleApps = Object.fromEntries(
+      Object.entries(context.data).filter(([_, app]) => !app.employeeOnly),
+    );
+  }
+
   return (
     <>
-      <AppNavigator apps={context.data} />
+      <AppNavigator apps={visibleApps} />
     </>
   );
 }

routes/index.tsx

@@ -1,13 +1,28 @@
-import { FreshContext } from "$fresh/server.ts";
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { State } from "$root/defaults/interfaces.ts";
 
-// deno-lint-ignore require-await
+export const handler: Handlers<unknown, State> = {
-export default async function Home(_request: Request, _context: FreshContext) {
+  GET(_request: Request, context: FreshContext<State>) {
+    if (context.state.isAuthenticated) {
+      return new Response(null, {
+        status: 302,
+        headers: { Location: "/apps" },
+      });
+    }
+    return context.render();
+  },
+};
+
+export default function Home() {
   return (
     <>
       <h2>PolyMPR</h2>
       <h3>
         The <em>ultimate</em> HR platform
       </h3>
+      <p>
+        <a href="/login">Se connecter</a>
+      </p>
     </>
   );
 }

scripts/generate-templates.ts

@@ -5,7 +5,12 @@ import * as XLSX from "https://cdn.sheetjs.com/xlsx-0.20.3/package/xlsx.mjs";
 {
   const wb = XLSX.utils.book_new();
   const ws = XLSX.utils.aoa_to_sheet([
-    [null, null, null, "Promotion peut etre vide mais doit prealablement Exister"],
+    [
+      null,
+      null,
+      null,
+      "Promotion peut etre vide mais doit prealablement Exister",
+    ],
     ["Nom", "Prenom", "Numero-etudiant", "Promotion"],
     ["NOM", "PRENOM", 12345678, "3AFISE24-25"],
   ]);
@@ -38,8 +43,26 @@ import * as XLSX from "https://cdn.sheetjs.com/xlsx-0.20.3/package/xlsx.mjs";
 {
   const data = [
     ["Intitule du diplome", null, "Informatique - Annee 20.. - 20.."],
-    ["Description des UE du diplome", null, null, null, null, null, "Nombre d'heures"],
+    [
-    ["Annee\nSemestres", "Codes APOGEE", null, null, "Credits\n ECTS", "Coeff.", "CM", "TD", "TP"],
+      "Description des UE du diplome",
+      null,
+      null,
+      null,
+      null,
+      null,
+      "Nombre d'heures",
+    ],
+    [
+      "Annee\nSemestres",
+      "Codes APOGEE",
+      null,
+      null,
+      "Credits\n ECTS",
+      "Coeff.",
+      "CM",
+      "TD",
+      "TP",
+    ],
     ["INFO3A", null, null, null, "ECTS", "Coef", "CM", "TD", "TP"],
     ["SEM 5", null, null, null, 30],
     ["UE", "CODE_UE1", "Nom de l'UE 1", null, 6],

scripts/inspect-maquette.ts

@@ -9,7 +9,9 @@ for (const file of ["FISE-INFO-2025.xlsx", "FISA-INFO-2025.xlsx"]) {
   for (const sheetName of wb.SheetNames) {
     console.log(`\n--- Sheet: ${sheetName} ---`);
     const sheet = wb.Sheets[sheetName];
-    const rows = XLSX.utils.sheet_to_json<(string | number | null)[]>(sheet, { header: 1 });
+    const rows = XLSX.utils.sheet_to_json<(string | number | null)[]>(sheet, {
+      header: 1,
+    });
     // Print first 5 cols of each row, mark rows that look like year/semester headers
     for (let i = 0; i < rows.length; i++) {
       const row = rows[i];
@@ -17,7 +19,9 @@ for (const file of ["FISE-INFO-2025.xlsx", "FISA-INFO-2025.xlsx"]) {
       const col0 = row[0] != null ? String(row[0]).trim() : "";
       // Show rows that are structural (year, semester, UE headers)
       if (col0 || (row[1] != null && String(row[1]).trim())) {
-        const preview = row.slice(0, 6).map(c => c != null ? String(c).substring(0, 25) : "").join(" | ");
+        const preview = row.slice(0, 6).map((c) =>
+          c != null ? String(c).substring(0, 25) : ""
+        ).join(" | ");
         console.log(`  [${i}] ${preview}`);
       }
     }

static/theme.js

@@ -0,0 +1,29 @@
+(function () {
+  var t = localStorage.getItem("theme");
+  if (t) document.documentElement.style.colorScheme = t;
+
+  document.addEventListener("click", function (e) {
+    var btn = e.target.closest("#theme-toggle");
+    if (!btn) return;
+    var cs = getComputedStyle(document.documentElement).colorScheme;
+    var isDark = cs === "dark" ||
+      (!cs || cs === "light dark") &&
+        matchMedia("(prefers-color-scheme:dark)").matches;
+    var next = isDark ? "light" : "dark";
+    document.documentElement.style.colorScheme = next;
+    localStorage.setItem("theme", next);
+    btn.querySelector("span").textContent = next === "dark"
+      ? "light_mode"
+      : "dark_mode";
+  });
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var btn = document.getElementById("theme-toggle");
+    if (!btn) return;
+    var cs = getComputedStyle(document.documentElement).colorScheme;
+    var isDark = cs === "dark" ||
+      (!cs || cs === "light dark") &&
+        matchMedia("(prefers-color-scheme:dark)").matches;
+    btn.querySelector("span").textContent = isDark ? "light_mode" : "dark_mode";
+  });
+})();

tests/helpers/db_integration.ts

@@ -26,7 +26,7 @@ export const testPool = createTestPool();
 export const testDb = drizzle(testPool, { schema });
 
 const ALL_TABLES =
-  '"mobility","ajustements","notes","ue_modules","enseignements","role_permissions","students","users","modules","ues","promotions","permissions","roles"';
+  '"mobilites","stages","ajustements","notes","ue_modules","enseignements","role_permissions","students","users","modules","ues","promotions","permissions","roles"';
 
 /**
  * Vide toutes les tables dans le bon ordre.