diff --git a/src/components/DashboardClient.tsx b/src/components/DashboardClient.tsx index 94a19b7..4560856 100644 --- a/src/components/DashboardClient.tsx +++ b/src/components/DashboardClient.tsx @@ -51,14 +51,128 @@ interface DashboardClientProps { evaluations: EvalRow[]; } +type ViewMode = "full" | "team" | "table"; + +function groupByTeam(list: EvalRow[]): Map { + const map = new Map(); + for (const e of list) { + const key = e.candidateTeam ?? null; + const arr = map.get(key) ?? []; + arr.push(e); + map.set(key, arr); + } + return map; +} + +function EvalCard({ + e, + onDelete, +}: { + e: EvalRow; + onDelete: (ev: React.MouseEvent) => void; +}) { + const radarData = buildRadarData(e); + return ( + +
+
+
+

{e.candidateName}

+

+ {e.candidateRole} + {e.candidateTeam && ` · ${e.candidateTeam}`} +

+
+ + {e.status === "submitted" ? "ok" : "draft"} + +
+
+ {e.evaluatorName} + {format(new Date(e.evaluationDate), "yyyy-MM-dd")} + {e.template?.name ?? ""} +
+
+ {radarData.length > 0 ? ( + + ) : ( +
+ pas de scores +
+ )} +
+
+
+ → ouvrir + +
+ + ); +} + export function DashboardClient({ evaluations }: DashboardClientProps) { const [list, setList] = useState(evaluations); const [deleteTarget, setDeleteTarget] = useState(null); + const [viewMode, setViewMode] = useState("full"); + + const grouped = viewMode === "team" ? groupByTeam(list) : null; return (
-
+

Évaluations

+
+ Vue : +
+ + + +
+
+ ) : viewMode === "table" ? ( +
+
+ + + + + + + + + + + + + + + {list.map((e) => ( + + + + + + + + + + + ))} + +
+ Candidat + + Rôle + + Équipe + + Évaluateur + + Date + + Template + + Statut + + Actions +
+ + {e.candidateName} + + + {e.candidateRole} + + {e.candidateTeam ?? "—"} + + {e.evaluatorName} + + {format(new Date(e.evaluationDate), "yyyy-MM-dd")} + + {e.template?.name ?? ""} + + + {e.status === "submitted" ? "ok" : "draft"} + + + + + ouvrir + + + +
+
+
+ ) : viewMode === "team" && grouped ? ( +
+ {Array.from(grouped.entries()) + .sort(([a], [b]) => { + if (a == null) return 1; + if (b == null) return -1; + return a.localeCompare(b); + }) + .map(([team, evals]) => ( +
+

+ {team ?? "Sans équipe"} +

+
+ {evals.map((e) => ( + { + ev.preventDefault(); + ev.stopPropagation(); + setDeleteTarget(e); + }} + /> + ))} +
+
+ ))} +
) : (
- {list.map((e) => { - const radarData = buildRadarData(e); - return ( - -
-
-
-

{e.candidateName}

-

- {e.candidateRole} - {e.candidateTeam && ` · ${e.candidateTeam}`} -

-
- - {e.status === "submitted" ? "ok" : "draft"} - -
-
- {e.evaluatorName} - {format(new Date(e.evaluationDate), "yyyy-MM-dd")} - {e.template?.name ?? ""} -
-
- {radarData.length > 0 ? ( - - ) : ( -
- pas de scores -
- )} -
-
-
- → ouvrir - -
- - ); - })} + {list.map((e) => ( + { + ev.preventDefault(); + ev.stopPropagation(); + setDeleteTarget(e); + }} + /> + ))}
)}