Hermann_Kitio
3ce91aaa7b
Inclut le retrait du padding de AppLayout et le wrapper standardisé (mx-auto w-full max-w-[1100px] px-5 py-6 lg:px-9 lg:py-9) ajouté sur 11 pages (Dashboard, Progression, 9 pages Simulation EE/EO/T1) pour laisser chaque page gérer son max-width. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
/**
|
|
* Page /progression — Sprint 3.6c.
|
|
*
|
|
* Gating plan via `hasAccess(plan, 'pattern_analysis')` :
|
|
* - Free + Standard → `BlurredProgression` (aperçu flouté + CTA upgrade)
|
|
* - Premium → `ProgressionPremium` (NotReady ou contenu complet)
|
|
*
|
|
* Règle D : aucun `plan === 'xxx'` — tout passe par hasAccess().
|
|
* Règle L : tokens Direction H exclusivement.
|
|
*/
|
|
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Card } from '@/shared/ui/Card'
|
|
import { Button } from '@/shared/ui/Button'
|
|
import { hasAccess } from '@/entities/user/lib'
|
|
import { usePlan } from '@/features/dashboard/hooks/usePlan'
|
|
import { usePatterns } from '../hooks/usePatterns'
|
|
import { BlurredProgression } from '../components/BlurredProgression'
|
|
import { ProgressionPremium } from '../components/ProgressionPremium'
|
|
|
|
function Skeleton() {
|
|
return (
|
|
<div className="space-y-4" aria-busy="true" aria-label="Chargement de votre profil…">
|
|
<div className="h-32 animate-pulse rounded-lg bg-surface" />
|
|
<div className="h-24 animate-pulse rounded-lg bg-surface" />
|
|
<div className="h-48 animate-pulse rounded-lg bg-surface" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ProgressionPage() {
|
|
const navigate = useNavigate()
|
|
const { data: planData, isLoading: isPlanLoading } = usePlan()
|
|
const { data: patternsData, isLoading: isPatternsLoading, isError } = usePatterns(planData?.plan)
|
|
|
|
const isPremium = planData ? hasAccess(planData.plan, 'pattern_analysis') : false
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-[1100px] px-5 py-6 lg:px-9 lg:py-9">
|
|
<main className="mx-auto max-w-3xl space-y-6 px-4 py-6">
|
|
<header className="space-y-1">
|
|
<h1 className="text-lg font-semibold text-ink-primary">Profil de préparation</h1>
|
|
<p className="text-sm text-ink-secondary">
|
|
Repérez vos erreurs récurrentes et travaillez-les avec des exercices ciblés.
|
|
</p>
|
|
</header>
|
|
|
|
{isPlanLoading && <Skeleton />}
|
|
|
|
{!isPlanLoading && planData && !isPremium && (
|
|
<BlurredProgression onUpgrade={() => navigate('/plan')} />
|
|
)}
|
|
|
|
{!isPlanLoading && planData && isPremium && (
|
|
<>
|
|
{isPatternsLoading && <Skeleton />}
|
|
{isError && (
|
|
<Card variant="default" className="border-l-4 border-l-danger p-4">
|
|
<p className="text-sm text-danger" role="alert">
|
|
Impossible de charger votre profil de préparation. Réessayez dans quelques
|
|
instants.
|
|
</p>
|
|
<div className="mt-3">
|
|
<Button variant="secondary" size="sm" onClick={() => navigate(0)}>
|
|
Rafraîchir
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{patternsData && <ProgressionPremium data={patternsData} />}
|
|
</>
|
|
)}
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|