"use client"; import { useState, useCallback } from "react"; import { DndContext, DragEndEvent } from "@dnd-kit/core"; import { cn, generateId } from "@/lib/utils"; import { useCanvasStore } from "@/lib/store"; import { DroppableCanvas, DraggableElement } from "../dragdrop"; import { DesktopOnlyGuard } from "@/components/ui"; import type { CanvasTemplate, DraggableElement as DraggableElementType } from "@/lib/types"; interface StakeholderMapCanvasProps { canvas: CanvasTemplate; className?: string; } /** * Carte des Parties Prenantes * Matrice circulaire pour positionner et cartographier les parties prenantes * Axe vertical: Fortement Touché ↔ Peu Touché (impact) * Axe horizontal: Peu de Pouvoir ↔ Beaucoup de Pouvoir */ export function StakeholderMapCanvas({ canvas, className }: StakeholderMapCanvasProps) { const [selectedId, setSelectedId] = useState(null); const { getCanvas, addElement, updateElementPosition, updateElementLabel, removeElement } = useCanvasStore(); const canvasData = getCanvas(canvas.id); const elements = canvasData?.elements || []; const handleDragEnd = useCallback((event: DragEndEvent) => { const { active, delta } = event; const element = elements.find((e) => e.id === active.id); if (element) { updateElementPosition(canvas.id, element.id, { x: element.position.x + delta.x, y: element.position.y + delta.y, }); } }, [canvas.id, elements, updateElementPosition]); const handleAddStakeholder = useCallback(() => { const newElement: DraggableElementType = { id: generateId(), type: "stakeholder", position: { x: 300, y: 200 }, label: "Nouvelle partie prenante", }; addElement(canvas.id, newElement); }, [canvas.id, addElement]); const handleLabelChange = useCallback((elementId: string, label: string) => { updateElementLabel(canvas.id, elementId, label); }, [canvas.id, updateElementLabel]); const handleRemove = useCallback((elementId: string) => { removeElement(canvas.id, elementId); setSelectedId(null); }, [canvas.id, removeElement]); return (

{/* Sidebar: Tools */}

Outils

Pensez au-delà de l'évidence :

Objectif : Minimum 12 parties prenantes

• Utilisateurs directs & indirects
• Famille, entourage, influenceurs
• Médias, associations, communautés
• Régulateurs, institutions publiques
• Fournisseurs, sous-traitants
• Canaux de distribution
• Concurrents, partenaires
• Financeurs, actionnaires

Comment utiliser :

• Positionnez les parties prenantes selon leur influence et l'impact sur elles
• Utilisez des cercles pour grouper les acteurs similaires
• Tracez des flèches pour montrer les relations
• Notez les tensions et dépendances clés

{/* Main Canvas Area */}

} onBackgroundClick={() => setSelectedId(null)} > {elements.map((element) => ( setSelectedId(element.id)} onLabelChange={(label) => handleLabelChange(element.id, label)} onRemove={() => handleRemove(element.id)} /> ))}

); } /** * Background SVG for the stakeholder map (concentric circles + axes) * Based on Figma design with proper axis labels */ function StakeholderMapBackground() { return ( ); }