expria-frontend/src/features/historique/pages/HistoriquePage.tsx
Hermann_Kitio b68f160bce feat(design-system): reskin Charcoal — tokens dark-default + sidebar navy permanent
- Remplacement intégral index.css par palette Charcoal (DESIGN_SYSTEM.md v2.0)
- Dark = thème par défaut, .light = override via @custom-variant light
- Sidebar navy #0C1528 permanent (identique dark+light)
- Script anti-FOUC inline dans index.html
- Layout : radial-gradient sur <main>, sidebar 230px, max-w-[1100px]
- Renommage tokens Boréal→Charcoal sur ~45 composants
- Inversion dark: → baseline + light: sur primitives shadcn
- Fix logo blanc forcé dans sidebar
- ADR 006 mis à jour

Typecheck: OK · Tests: 122/122 

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-24 23:09:15 +03:00

58 lines
2 KiB
TypeScript

/**
* Page /historique — liste paginée des simulations de l'utilisateur connecté.
*
* Consommateurs amont :
* - `usePlan` (cache partagé avec dashboard/simulation)
* - `useSimulationsList(page, limit)` — cache `['simulations', 'list', p, l]`
*
* Gating Free via `hasAccess(plan, 'dashboard')` délégué à `SimulationsList`.
* Pagination : Précédent/Suivant via state local `page`.
*
* Règle H : aucune logique métier — toute l'orchestration vit dans SimulationsList.
*/
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { usePlan } from '@/features/dashboard/hooks/usePlan'
import { useSimulationsList } from '../hooks/useSimulationsList'
import { SimulationsList } from '../components/SimulationsList'
const PAGE_SIZE = 20
export function HistoriquePage() {
const navigate = useNavigate()
const [page, setPage] = useState(1)
const { data: planData, isLoading: isPlanLoading } = usePlan()
const { data, isLoading, isError } = useSimulationsList(page, PAGE_SIZE)
return (
<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">Historique</h1>
<p className="text-sm text-ink-secondary">
Retrouvez toutes vos simulations passées et leur progression.
</p>
</header>
{isPlanLoading || !planData ? (
<div className="space-y-3" aria-busy="true">
<div className="h-20 animate-pulse rounded-lg bg-surface" />
<div className="h-20 animate-pulse rounded-lg bg-surface" />
</div>
) : (
<SimulationsList
plan={planData.plan}
data={data}
isLoading={isLoading}
isError={isError}
page={page}
limit={PAGE_SIZE}
onPrev={() => setPage((p) => Math.max(1, p - 1))}
onNext={() => setPage((p) => p + 1)}
onUpgrade={() => navigate('/plan')}
/>
)}
</main>
)
}