439 lines
17 KiB
TypeScript
439 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import Link from "next/link";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import { CandidateForm } from "@/components/CandidateForm";
|
|
import { DimensionCard } from "@/components/DimensionCard";
|
|
import { RadarChart } from "@/components/RadarChart";
|
|
import { ExportModal } from "@/components/ExportModal";
|
|
import { ShareModal } from "@/components/ShareModal";
|
|
import { ConfirmModal } from "@/components/ConfirmModal";
|
|
import { generateFindings, generateRecommendations, computeAverageScore } from "@/lib/export-utils";
|
|
|
|
interface Dimension {
|
|
id: string;
|
|
slug: string;
|
|
title: string;
|
|
rubric: string;
|
|
suggestedQuestions?: string | null;
|
|
}
|
|
|
|
interface DimensionScore {
|
|
id: string;
|
|
dimensionId: string;
|
|
score: number | null;
|
|
justification: string | null;
|
|
examplesObserved: string | null;
|
|
confidence: string | null;
|
|
candidateNotes: string | null;
|
|
dimension: Dimension;
|
|
}
|
|
|
|
interface Evaluation {
|
|
id: string;
|
|
candidateName: string;
|
|
candidateRole: string;
|
|
candidateTeam?: string | null;
|
|
evaluatorName: string;
|
|
evaluatorId?: string | null;
|
|
evaluationDate: string;
|
|
templateId: string;
|
|
template: { id: string; name: string; dimensions: Dimension[] };
|
|
status: string;
|
|
findings: string | null;
|
|
recommendations: string | null;
|
|
dimensionScores: DimensionScore[];
|
|
sharedWith?: { id: string; user: { id: string; email: string; name: string | null } }[];
|
|
}
|
|
|
|
export default function EvaluationDetailPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const id = params.id as string;
|
|
const [evaluation, setEvaluation] = useState<Evaluation | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [templates, setTemplates] = useState<{ id: string; name: string }[]>([]);
|
|
const [exportOpen, setExportOpen] = useState(false);
|
|
const [shareOpen, setShareOpen] = useState(false);
|
|
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
|
|
const [collapseAllTrigger, setCollapseAllTrigger] = useState(0);
|
|
const [users, setUsers] = useState<{ id: string; email: string; name: string | null }[]>([]);
|
|
|
|
const fetchEval = useCallback(() => {
|
|
setLoading(true);
|
|
Promise.all([
|
|
fetch(`/api/evaluations/${id}`).then((r) => r.json()),
|
|
fetch("/api/templates").then((r) => r.json()),
|
|
fetch("/api/users").then((r) => r.json()),
|
|
])
|
|
.then(([evalData, templatesData, usersData]) => {
|
|
setTemplates(Array.isArray(templatesData) ? templatesData : []);
|
|
setUsers(Array.isArray(usersData) ? usersData : []);
|
|
if (evalData?.error) {
|
|
setEvaluation(null);
|
|
return;
|
|
}
|
|
try {
|
|
if (evalData?.template?.dimensions?.length > 0 && Array.isArray(templatesData)) {
|
|
const tmpl = templatesData.find((t: { id: string }) => t.id === evalData.templateId);
|
|
if (tmpl?.dimensions?.length) {
|
|
const dimMap = new Map(tmpl.dimensions.map((d: { id: string; suggestedQuestions?: string | null }) => [d.id, d]));
|
|
evalData.template.dimensions = evalData.template.dimensions.map((d: { id: string; suggestedQuestions?: string | null }) => ({
|
|
...d,
|
|
suggestedQuestions: d.suggestedQuestions ?? (dimMap.get(d.id) as { suggestedQuestions?: string | null } | undefined)?.suggestedQuestions,
|
|
}));
|
|
}
|
|
}
|
|
} catch {
|
|
/* merge failed, use evalData as-is */
|
|
}
|
|
setEvaluation({ ...evalData, dimensionScores: evalData.dimensionScores ?? [] });
|
|
})
|
|
.catch(() => setEvaluation(null))
|
|
.finally(() => setLoading(false));
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
fetchEval();
|
|
}, [fetchEval]);
|
|
|
|
// Draft backup to localStorage (debounced, for offline resilience)
|
|
useEffect(() => {
|
|
if (!evaluation || !id) return;
|
|
const t = setTimeout(() => {
|
|
try {
|
|
localStorage.setItem(
|
|
`eval-draft-${id}`,
|
|
JSON.stringify({ ...evaluation, evaluationDate: evaluation.evaluationDate })
|
|
);
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
}, 2000);
|
|
return () => clearTimeout(t);
|
|
}, [evaluation, id]);
|
|
|
|
const handleFormChange = (field: string, value: string) => {
|
|
if (!evaluation) return;
|
|
setEvaluation((e) => (e ? { ...e, [field]: value } : null));
|
|
};
|
|
|
|
const handleScoreChange = (dimensionId: string, data: Partial<DimensionScore>) => {
|
|
if (!evaluation) return;
|
|
setEvaluation((e) => {
|
|
if (!e) return null;
|
|
const existing = e.dimensionScores.find((ds) => ds.dimensionId === dimensionId);
|
|
const dim = e.template?.dimensions?.find((d) => d.id === dimensionId);
|
|
const scores = existing
|
|
? e.dimensionScores.map((ds) =>
|
|
ds.dimensionId === dimensionId ? { ...ds, ...data } : ds
|
|
)
|
|
: [
|
|
...e.dimensionScores,
|
|
{
|
|
id: `temp-${dimensionId}`,
|
|
dimensionId,
|
|
score: (data as { score?: number }).score ?? null,
|
|
justification: (data as { justification?: string }).justification ?? null,
|
|
examplesObserved: (data as { examplesObserved?: string }).examplesObserved ?? null,
|
|
confidence: (data as { confidence?: string }).confidence ?? null,
|
|
candidateNotes: (data as { candidateNotes?: string }).candidateNotes ?? null,
|
|
dimension: dim ?? { id: dimensionId, slug: "", title: "", rubric: "" },
|
|
},
|
|
];
|
|
const next = { ...e, dimensionScores: scores };
|
|
if (data.score !== undefined) {
|
|
setTimeout(() => handleSave(next, { skipRefresh: true }), 0);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleSave = async (evalOverride?: Evaluation | null, options?: { skipRefresh?: boolean }) => {
|
|
const toSave = evalOverride ?? evaluation;
|
|
if (!toSave) return;
|
|
setSaving(true);
|
|
try {
|
|
const res = await fetch(`/api/evaluations/${id}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
candidateName: toSave.candidateName,
|
|
candidateRole: toSave.candidateRole,
|
|
candidateTeam: toSave.candidateTeam ?? null,
|
|
evaluatorName: toSave.evaluatorName,
|
|
evaluationDate: typeof toSave.evaluationDate === "string" ? toSave.evaluationDate : new Date(toSave.evaluationDate).toISOString(),
|
|
status: toSave.status,
|
|
findings: toSave.findings,
|
|
recommendations: toSave.recommendations,
|
|
dimensionScores: (toSave.dimensionScores ?? []).map((ds) => ({
|
|
dimensionId: ds.dimensionId,
|
|
evaluationId: id,
|
|
score: ds.score,
|
|
justification: ds.justification,
|
|
examplesObserved: ds.examplesObserved,
|
|
confidence: ds.confidence,
|
|
candidateNotes: ds.candidateNotes,
|
|
})),
|
|
}),
|
|
});
|
|
if (res.ok) {
|
|
if (!options?.skipRefresh) fetchEval();
|
|
} else {
|
|
const data = await res.json().catch(() => ({}));
|
|
alert(data.error ?? `Save failed (${res.status})`);
|
|
}
|
|
} catch (err) {
|
|
console.error("Save error:", err);
|
|
alert("Erreur lors de la sauvegarde");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleGenerateFindings = () => {
|
|
if (!evaluation) return;
|
|
const findings = generateFindings(evaluation.dimensionScores ?? []);
|
|
const recommendations = generateRecommendations(evaluation.dimensionScores ?? []);
|
|
setEvaluation((e) => (e ? { ...e, findings, recommendations } : null));
|
|
};
|
|
|
|
const allFives = evaluation?.dimensionScores?.every(
|
|
(ds) => ds.score === 5 && (!ds.justification || ds.justification.trim() === "")
|
|
);
|
|
const showAllFivesWarning = allFives && evaluation?.status === "submitted";
|
|
|
|
if (loading) {
|
|
return <div className="py-12 text-center font-mono text-xs text-zinc-600 dark:text-zinc-500">loading...</div>;
|
|
}
|
|
if (!evaluation) {
|
|
return (
|
|
<div className="py-12 text-center font-mono text-xs text-zinc-600 dark:text-zinc-500">
|
|
Évaluation introuvable.{" "}
|
|
<Link href="/dashboard" className="text-cyan-600 dark:text-cyan-400 hover:underline">
|
|
← dashboard
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const dimensions = evaluation.template?.dimensions ?? [];
|
|
const dimensionScores = evaluation.dimensionScores ?? [];
|
|
const scoreMap = new Map(dimensionScores.map((ds) => [ds.dimensionId, ds]));
|
|
const radarData = dimensions
|
|
.filter((dim) => !(dim.title ?? "").startsWith("[Optionnel]"))
|
|
.map((dim) => {
|
|
const ds = scoreMap.get(dim.id);
|
|
const score = ds?.score;
|
|
if (score == null) return null;
|
|
const title = dim.title ?? "";
|
|
const s = Number(score);
|
|
if (Number.isNaN(s) || s < 0 || s > 5) return null;
|
|
return {
|
|
dimension: title.length > 12 ? title.slice(0, 12) + "…" : title,
|
|
score: s,
|
|
fullMark: 5,
|
|
};
|
|
})
|
|
.filter((d): d is { dimension: string; score: number; fullMark: number } => d != null);
|
|
const avgScore = computeAverageScore(dimensionScores);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<h1 className="font-mono text-base font-medium text-zinc-800 dark:text-zinc-100">
|
|
{evaluation.candidateName}
|
|
{evaluation.candidateTeam && (
|
|
<span className="text-zinc-500"> ({evaluation.candidateTeam})</span>
|
|
)}
|
|
<span className="text-zinc-500"> / </span> {evaluation.candidateRole}
|
|
</h1>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => handleSave()}
|
|
disabled={saving}
|
|
className="rounded border border-zinc-300 dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 px-3 py-1.5 font-mono text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700 disabled:opacity-50"
|
|
>
|
|
{saving ? "..." : "save"}
|
|
</button>
|
|
<button
|
|
onClick={() => setShareOpen(true)}
|
|
className="rounded border border-cyan-500/50 bg-cyan-500/10 px-3 py-1.5 font-mono text-xs text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/20"
|
|
>
|
|
partager
|
|
</button>
|
|
<button
|
|
onClick={() => setExportOpen(true)}
|
|
className="rounded border border-cyan-500/50 bg-cyan-500/10 px-3 py-1.5 font-mono text-xs text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/20"
|
|
>
|
|
export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{showAllFivesWarning && (
|
|
<div className="rounded border border-amber-500/30 bg-amber-500/10 p-3 font-mono text-xs text-amber-600 dark:text-amber-400">
|
|
⚠ Tous les scores = 5 sans justification
|
|
</div>
|
|
)}
|
|
|
|
<section className="relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-600 bg-gradient-to-br from-zinc-50 to-white dark:from-zinc-800/80 dark:to-zinc-800 p-5 shadow-sm dark:shadow-none">
|
|
<div className="absolute left-0 top-0 h-full w-1 bg-gradient-to-b from-cyan-500/60 to-cyan-400/40" aria-hidden />
|
|
<h2 className="mb-4 font-mono text-xs font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400">
|
|
Session
|
|
</h2>
|
|
<CandidateForm
|
|
candidateName={evaluation.candidateName}
|
|
candidateRole={evaluation.candidateRole}
|
|
candidateTeam={evaluation.candidateTeam ?? ""}
|
|
evaluatorName={evaluation.evaluatorName}
|
|
evaluationDate={evaluation.evaluationDate.split("T")[0]}
|
|
templateId={evaluation.templateId}
|
|
templates={templates}
|
|
onChange={handleFormChange}
|
|
templateDisabled
|
|
/>
|
|
</section>
|
|
|
|
<section>
|
|
<div className="mb-3 flex items-center justify-between gap-2">
|
|
<h2 className="font-mono text-xs text-zinc-600 dark:text-zinc-500">Dimensions</h2>
|
|
<button
|
|
type="button"
|
|
onClick={() => setCollapseAllTrigger((c) => c + 1)}
|
|
className="font-mono text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"
|
|
>
|
|
tout fermer
|
|
</button>
|
|
</div>
|
|
<nav className="mb-4 flex flex-wrap gap-1.5">
|
|
{dimensions.map((dim, i) => {
|
|
const ds = scoreMap.get(dim.id);
|
|
const hasScore = ds?.score != null;
|
|
return (
|
|
<a
|
|
key={dim.id}
|
|
href={`#dim-${dim.id}`}
|
|
className={`rounded px-2 py-0.5 font-mono text-xs transition-colors ${
|
|
hasScore
|
|
? "bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/30"
|
|
: "text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-700 dark:hover:text-zinc-300"
|
|
}`}
|
|
>
|
|
{i + 1}. {dim.title}
|
|
</a>
|
|
);
|
|
})}
|
|
</nav>
|
|
<div className="space-y-2">
|
|
{dimensions.map((dim, i) => (
|
|
<div key={dim.id} id={`dim-${dim.id}`} className="scroll-mt-24">
|
|
<DimensionCard
|
|
dimension={dim}
|
|
index={i}
|
|
evaluationId={id}
|
|
score={scoreMap.get(dim.id) ?? null}
|
|
onScoreChange={handleScoreChange}
|
|
collapseAllTrigger={collapseAllTrigger}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 p-4 shadow-sm dark:shadow-none">
|
|
<h2 className="mb-3 font-mono text-xs text-zinc-600 dark:text-zinc-500">Synthèse</h2>
|
|
<p className="mb-4 font-mono text-sm text-zinc-700 dark:text-zinc-300">
|
|
Moyenne <span className="text-cyan-600 dark:text-cyan-400">{avgScore.toFixed(1)}/5</span>
|
|
</p>
|
|
<RadarChart data={radarData} />
|
|
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label className="mb-1 block text-xs text-zinc-600 dark:text-zinc-500">Synthèse</label>
|
|
<textarea
|
|
value={evaluation.findings ?? ""}
|
|
onChange={(e) => setEvaluation((ev) => (ev ? { ...ev, findings: e.target.value } : null))}
|
|
rows={3}
|
|
className="w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700/80 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:border-cyan-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1 block text-xs text-zinc-600 dark:text-zinc-500">Recommandations</label>
|
|
<textarea
|
|
value={evaluation.recommendations ?? ""}
|
|
onChange={(e) =>
|
|
setEvaluation((ev) => (ev ? { ...ev, recommendations: e.target.value } : null))
|
|
}
|
|
rows={3}
|
|
className="w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700/80 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:border-cyan-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleGenerateFindings}
|
|
className="mt-2 font-mono text-xs text-cyan-600 dark:text-cyan-400 hover:text-cyan-500 dark:hover:text-cyan-300"
|
|
>
|
|
→ auto-générer
|
|
</button>
|
|
</section>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
onClick={() => {
|
|
const updated = evaluation ? { ...evaluation, status: "submitted" } : null;
|
|
setEvaluation(updated);
|
|
if (updated) handleSave(updated);
|
|
}}
|
|
className="rounded border border-emerald-500/50 bg-emerald-500/20 px-3 py-1.5 font-mono text-xs text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/30"
|
|
>
|
|
soumettre
|
|
</button>
|
|
<button onClick={() => router.push("/dashboard")} className="rounded border border-zinc-300 dark:border-zinc-600 px-3 py-1.5 font-mono text-xs text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700">
|
|
← dashboard
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setDeleteConfirmOpen(true)}
|
|
className="rounded border border-red-500/30 px-3 py-1.5 font-mono text-xs text-red-600 dark:text-red-400 hover:bg-red-500/10"
|
|
>
|
|
supprimer
|
|
</button>
|
|
</div>
|
|
|
|
<ExportModal
|
|
isOpen={exportOpen}
|
|
onClose={() => setExportOpen(false)}
|
|
evaluationId={id}
|
|
/>
|
|
|
|
<ShareModal
|
|
isOpen={shareOpen}
|
|
onClose={() => setShareOpen(false)}
|
|
evaluationId={id}
|
|
evaluatorId={evaluation.evaluatorId}
|
|
users={users}
|
|
sharedWith={evaluation.sharedWith ?? []}
|
|
onUpdate={fetchEval}
|
|
/>
|
|
|
|
<ConfirmModal
|
|
isOpen={deleteConfirmOpen}
|
|
title="Supprimer l'évaluation"
|
|
message={`Supprimer l'évaluation de ${evaluation.candidateName} ? Cette action est irréversible.`}
|
|
confirmLabel="Supprimer"
|
|
cancelLabel="Annuler"
|
|
variant="danger"
|
|
onConfirm={async () => {
|
|
const res = await fetch(`/api/evaluations/${id}`, { method: "DELETE" });
|
|
if (res.ok) router.push("/dashboard");
|
|
else alert("Erreur lors de la suppression");
|
|
}}
|
|
onCancel={() => setDeleteConfirmOpen(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|