291 lines
11 KiB
TypeScript
291 lines
11 KiB
TypeScript
/**
|
||
* Page de rapport de correction.
|
||
*
|
||
* Sections toujours visibles : score /20, NCLC, feedback_court.
|
||
* Sections conditionnelles via isSectionVisible(plan, section) :
|
||
* detailed_report → criteres, erreurs
|
||
* tips → modele, idees, exercices
|
||
*
|
||
* SEC-05 : textes IA rendus via react-markdown, jamais dangerouslySetInnerHTML.
|
||
* Règle D : isSectionVisible() obligatoire — jamais if (plan === 'xxx').
|
||
* Règle H : logique de floutage dans entities/report/lib.ts.
|
||
*/
|
||
|
||
import ReactMarkdown from 'react-markdown'
|
||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||
import { useQuery } from '@tanstack/react-query'
|
||
import { Lock } from 'lucide-react'
|
||
import { getPlanStatus } from '@/entities/user/api'
|
||
import { isSectionVisible } from '@/entities/report/lib'
|
||
import { useRapport } from '../hooks/useRapport'
|
||
import { Card } from '@/shared/ui/Card'
|
||
import { Badge } from '@/shared/ui/Badge'
|
||
import { Button } from '@/shared/ui/Button'
|
||
import type { Critere, Exercice } from '@/entities/report/types'
|
||
|
||
// ── Composants internes ──────────────────────────────────────────────────────
|
||
|
||
function RapportSkeleton() {
|
||
return (
|
||
<div className="space-y-4" aria-busy="true" aria-label="Chargement du rapport…">
|
||
<div className="h-32 animate-pulse rounded-lg bg-canvas-2" />
|
||
<div className="h-20 animate-pulse rounded-lg bg-canvas-2" />
|
||
<div className="h-40 animate-pulse rounded-lg bg-canvas-2" />
|
||
<div className="h-40 animate-pulse rounded-lg bg-canvas-2" />
|
||
<div className="h-36 animate-pulse rounded-lg bg-canvas-2" />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const PLACEHOLDER_WIDTHS = ['w-3/4', 'w-full', 'w-3/5', 'w-4/5'] as const
|
||
|
||
function BlurredSection({
|
||
visible,
|
||
onUpgrade,
|
||
children,
|
||
}: {
|
||
visible: boolean
|
||
onUpgrade: () => void
|
||
children: React.ReactNode
|
||
}) {
|
||
if (visible) return <>{children}</>
|
||
|
||
return (
|
||
<div className="relative min-h-[88px] overflow-hidden rounded-lg border border-line bg-canvas-2">
|
||
<div className="space-y-2 p-4 opacity-25 blur-sm" aria-hidden="true">
|
||
{PLACEHOLDER_WIDTHS.map((w, i) => (
|
||
<div key={i} className={`h-3 rounded bg-ink-4 ${w}`} />
|
||
))}
|
||
</div>
|
||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-3 px-4">
|
||
<Lock className="size-5 text-ink-4" aria-hidden="true" />
|
||
<p className="text-sm font-medium text-ink-2">Disponible en Standard</p>
|
||
<Button variant="upgrade" size="sm" onClick={onUpgrade}>
|
||
Passer en Standard
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function CritereRow({ critere }: { critere: Critere }) {
|
||
return (
|
||
<li className="flex flex-col gap-1.5 rounded-lg border border-line bg-canvas-2 p-3">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<span className="text-sm font-semibold text-ink-1">{critere.nom}</span>
|
||
<Badge variant="neutral">{critere.note}</Badge>
|
||
</div>
|
||
<div className="text-sm text-ink-3">
|
||
<ReactMarkdown
|
||
disallowedElements={['script', 'iframe']}
|
||
components={{ p: ({ children: c }) => <p className="leading-relaxed">{c}</p> }}
|
||
>
|
||
{critere.commentaire}
|
||
</ReactMarkdown>
|
||
</div>
|
||
</li>
|
||
)
|
||
}
|
||
|
||
function ExerciceCard({ exercice }: { exercice: Exercice }) {
|
||
return (
|
||
<li className="rounded-lg border border-line bg-canvas-2 p-4">
|
||
<p className="mb-2 text-sm font-semibold text-ink-1">{exercice.titre}</p>
|
||
<div className="text-sm leading-relaxed text-ink-3">
|
||
<ReactMarkdown disallowedElements={['script', 'iframe']}>
|
||
{exercice.contenu}
|
||
</ReactMarkdown>
|
||
</div>
|
||
</li>
|
||
)
|
||
}
|
||
|
||
// ── Page principale ──────────────────────────────────────────────────────────
|
||
|
||
export function RapportPage() {
|
||
const { id = '' } = useParams<{ id: string }>()
|
||
const navigate = useNavigate()
|
||
|
||
const { rapport, isLoading, isError } = useRapport(id)
|
||
|
||
const {
|
||
data: planData,
|
||
isLoading: isPlanLoading,
|
||
isError: isPlanError,
|
||
} = useQuery({
|
||
queryKey: ['plan'],
|
||
queryFn: getPlanStatus,
|
||
staleTime: 5 * 60 * 1000,
|
||
})
|
||
|
||
const onUpgrade = () => navigate('/plan')
|
||
|
||
return (
|
||
<main className="mx-auto max-w-2xl space-y-6 px-4 py-6">
|
||
|
||
{/* Breadcrumb */}
|
||
<nav aria-label="Fil d'Ariane" className="flex items-center gap-1.5 text-sm text-ink-4">
|
||
<Link
|
||
to="/simulation/ee"
|
||
className="transition-colors duration-150 hover:text-ink-2"
|
||
>
|
||
Simulations
|
||
</Link>
|
||
<span aria-hidden="true">›</span>
|
||
<span aria-current="page" className="text-ink-2">Rapport</span>
|
||
</nav>
|
||
|
||
{/* Loading */}
|
||
{(isLoading || isPlanLoading) && <RapportSkeleton />}
|
||
|
||
{/* Erreur */}
|
||
{(isError || isPlanError) && !isLoading && !isPlanLoading && (
|
||
<div
|
||
role="alert"
|
||
className="space-y-3 rounded-lg border border-danger/30 bg-danger-bg px-4 py-6 text-center"
|
||
>
|
||
<p className="text-sm text-danger">
|
||
Impossible de charger ce rapport. Réessayez dans quelques instants.
|
||
</p>
|
||
<Button variant="secondary" size="sm" onClick={() => navigate('/simulation/ee')}>
|
||
Retour aux simulations
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{rapport && planData && (
|
||
<>
|
||
{/* ── Hero : Score + NCLC — toujours visibles ───────────── */}
|
||
<Card variant="raised" className="p-6">
|
||
<div className="flex flex-wrap items-end gap-8">
|
||
<div>
|
||
<p className="text-[11px] font-semibold uppercase tracking-widest text-ink-5">
|
||
Score
|
||
</p>
|
||
<p className="mt-1 tabular-nums text-ink-1">
|
||
<span className="text-5xl font-bold">{rapport.score}</span>
|
||
<span className="text-2xl font-medium text-ink-4">/20</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-[11px] font-semibold uppercase tracking-widest text-ink-5">
|
||
Niveau estimé
|
||
</p>
|
||
<Badge variant="nclc" className="mt-2">
|
||
NCLC {rapport.nclc.toFixed(1).replace('.', ',')}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
{/* ── Feedback court — toujours visible ─────────────────── */}
|
||
<section aria-label="Retour général">
|
||
<h2 className="mb-3 text-base font-semibold text-ink-1">Retour général</h2>
|
||
<Card variant="default" className="p-4">
|
||
<div className="text-sm leading-relaxed text-ink-2">
|
||
<ReactMarkdown disallowedElements={['script', 'iframe']}>
|
||
{rapport.feedback_court}
|
||
</ReactMarkdown>
|
||
</div>
|
||
</Card>
|
||
</section>
|
||
|
||
{/* ── Critères — detailed_report ────────────────────────── */}
|
||
<section aria-label="Détail par critère">
|
||
<h2 className="mb-3 text-base font-semibold text-ink-1">Détail par critère</h2>
|
||
<BlurredSection
|
||
visible={isSectionVisible(planData.plan, 'criteres')}
|
||
onUpgrade={onUpgrade}
|
||
>
|
||
<ul className="space-y-2">
|
||
{rapport.criteres.map((c) => (
|
||
<CritereRow key={c.nom} critere={c} />
|
||
))}
|
||
</ul>
|
||
</BlurredSection>
|
||
</section>
|
||
|
||
{/* ── Erreurs — detailed_report ─────────────────────────── */}
|
||
<section aria-label="Erreurs détectées">
|
||
<h2 className="mb-3 text-base font-semibold text-ink-1">Erreurs détectées</h2>
|
||
<BlurredSection
|
||
visible={isSectionVisible(planData.plan, 'erreurs')}
|
||
onUpgrade={onUpgrade}
|
||
>
|
||
<ul className="space-y-2 rounded-lg border border-line bg-canvas-2 p-4">
|
||
{rapport.erreurs.map((erreur, i) => (
|
||
<li key={i} className="flex gap-2 text-sm text-ink-2">
|
||
<span className="mt-0.5 shrink-0 text-danger" aria-hidden="true">•</span>
|
||
<ReactMarkdown
|
||
disallowedElements={['script', 'iframe']}
|
||
components={{ p: ({ children: c }) => <span>{c}</span> }}
|
||
>
|
||
{erreur}
|
||
</ReactMarkdown>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</BlurredSection>
|
||
</section>
|
||
|
||
{/* ── Modèle — tips ────────────────────────────────────── */}
|
||
<section aria-label="Production modèle">
|
||
<h2 className="mb-3 text-base font-semibold text-ink-1">Production modèle</h2>
|
||
<BlurredSection
|
||
visible={isSectionVisible(planData.plan, 'modele')}
|
||
onUpgrade={onUpgrade}
|
||
>
|
||
<Card variant="default" className="p-4">
|
||
<div className="text-sm leading-relaxed text-ink-2">
|
||
<ReactMarkdown disallowedElements={['script', 'iframe']}>
|
||
{rapport.modele}
|
||
</ReactMarkdown>
|
||
</div>
|
||
</Card>
|
||
</BlurredSection>
|
||
</section>
|
||
|
||
{/* ── Idées — tips ─────────────────────────────────────── */}
|
||
<section aria-label="Suggestions d'idées">
|
||
<h2 className="mb-3 text-base font-semibold text-ink-1">Suggestions d'idées</h2>
|
||
<BlurredSection
|
||
visible={isSectionVisible(planData.plan, 'idees')}
|
||
onUpgrade={onUpgrade}
|
||
>
|
||
<ol className="space-y-2 rounded-lg border border-line bg-canvas-2 p-4">
|
||
{rapport.idees.map((idee, i) => (
|
||
<li key={i} className="flex gap-2 text-sm text-ink-2">
|
||
<span className="shrink-0 font-semibold tabular-nums text-expria">
|
||
{i + 1}.
|
||
</span>
|
||
<ReactMarkdown
|
||
disallowedElements={['script', 'iframe']}
|
||
components={{ p: ({ children: c }) => <span>{c}</span> }}
|
||
>
|
||
{idee}
|
||
</ReactMarkdown>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
</BlurredSection>
|
||
</section>
|
||
|
||
{/* ── Exercices — tips ─────────────────────────────────── */}
|
||
<section aria-label="Exercices personnalisés">
|
||
<h2 className="mb-3 text-base font-semibold text-ink-1">Exercices personnalisés</h2>
|
||
<BlurredSection
|
||
visible={isSectionVisible(planData.plan, 'exercices')}
|
||
onUpgrade={onUpgrade}
|
||
>
|
||
<ul className="space-y-3">
|
||
{rapport.exercices.map((ex) => (
|
||
<ExerciceCard key={ex.titre} exercice={ex} />
|
||
))}
|
||
</ul>
|
||
</BlurredSection>
|
||
</section>
|
||
</>
|
||
)}
|
||
</main>
|
||
)
|
||
}
|