Add equipment planner toolbox module

website/src/features/toolboxes/modules/ImageAnnotationModule.jsx

@@ -1,6 +1,7 @@
 // Rôle : fournit l'outil annotation d'images avec marqueurs éditables.
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
+import { Tooltip } from "../../../components/Tooltip.jsx";
 import { DrawingOverlay } from "./DrawingOverlay.jsx";
 
 function markerLabel(index, marker, textContent) {
@@ -160,14 +161,16 @@ export function ImageAnnotationModule({ toolboxId, moduleId, context, editing })
                 )}
               </div>
               {markers.map((marker, index) => (
-                <span
+                <Tooltip
+                  as="span"
                   key={marker.id}
                   className="annotation-marker"
+                  content={markerLabel(index, marker, textContent)}
+                  position="top"
                   style={{ "--marker-x": `${marker.x}%`, "--marker-y": `${marker.y}%` }}
-                  title={markerLabel(index, marker, textContent)}
                 >
                   {index + 1}
-                </span>
+                </Tooltip>
               ))}
               <DrawingOverlay
                 active={false}

website/src/features/toolboxes/modules/TaskPlannerModule.jsx

@@ -2,6 +2,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 import { InlineNotice } from "../../../components/AppOverlays.jsx";
+import { Tooltip } from "../../../components/Tooltip.jsx";
 import { useDraftForm } from "../../../hooks/useDraftForm.js";
 import { applyGroupedReorderOperation, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
 import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
@@ -867,9 +868,13 @@ function TaskPlannerItem({
           {TASK_TYPES.map((taskType) => <option key={taskType} value={taskType}>{getTaskTypeLabel(taskType, textContent)}</option>)}
         </select>
         {missingPrerequisites.length > 0 && (
-          <span className="task-planner-warning" title={textContent.missingPrerequisiteTitle || "Pré requis non effectué"}>
+          <Tooltip
+            className="task-planner-warning"
+            content={<MissingPrerequisitesTooltip missingPrerequisites={missingPrerequisites} tasks={tasks} textContent={textContent} />}
+            position="top-start"
+          >
             {textContent.missingPrerequisiteBadge || "Pré requis"}
-          </span>
+          </Tooltip>
         )}
         <div className="task-planner-actions">
           <button
@@ -947,6 +952,19 @@ function TaskPlannerItem({
   );
 }
 
+function MissingPrerequisitesTooltip({ missingPrerequisites, tasks, textContent }) {
+  return (
+    <span className="task-planner-prerequisite-tooltip">
+      <strong>{textContent.missingPrerequisiteTitle || "Pré requis non effectué"}</strong>
+      <span>
+        {missingPrerequisites.map((relation) => (
+          <span key={relation.id}>{getTaskTitle(tasks, relation.toTaskId)}</span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
 function TaskResetSettings({ task, data, textContent, onUpdateTask }) {
   if (task.type === "daily") {
     const hasOverride = Boolean(task.dailyResetTime);

website/src/features/toolboxes/modules/index.jsx

@@ -11,6 +11,7 @@ import { ChecklistModule } from "./ChecklistModule.jsx";
 import { CombosModule } from "./CombosModule.jsx";
 import { CountersModule } from "./CountersModule.jsx";
 import { ImageAnnotationModule } from "./ImageAnnotationModule.jsx";
+import { EquipmentPlannerModule } from "./EquipmentPlannerModule.jsx";
 import { LinksModule } from "./LinksModule.jsx";
 import { NotepadModule } from "./NotepadModule.jsx";
 import { ImagesModule } from "./ImagesModule.jsx";
@@ -29,6 +30,7 @@ const MODULE_COMPONENTS = {
   table: { label: "Tableau", icon: "table", Component: TableModule, editable: false, scrollable: true },
   timer: { label: "Timer", icon: "clock", Component: TimerModule, editable: false },
   taskPlanner: { label: "Planificateur de tâches", icon: "tasklist", Component: TaskPlannerModule, editable: true, scrollable: true },
+  equipmentPlanner: { label: "Planificateur d'équipements", icon: "chest-armor", Component: EquipmentPlannerModule, editable: true, scrollable: true },
   imageAnnotation: { label: "Annotation d'images", icon: "map", Component: ImageAnnotationModule, editable: true }
 };