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>
65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
/**
|
|
* Item d'une ligne de la liste /historique — réécrit Sprint 4.7 selon maquette.
|
|
*
|
|
* Layout flex : Date · Libellé · Badge NCLC · Score · Chevron.
|
|
* Couleur du badge NCLC selon seuil (cf. `nclcChipVariant`).
|
|
*
|
|
* Règle L : tokens DA Charcoal exclusivement.
|
|
* Règle H : purement présentationnel.
|
|
*/
|
|
|
|
import { ChevronRight } from 'lucide-react'
|
|
import { Link } from 'react-router-dom'
|
|
import type { SimulationListItem as Item } from '@/entities/production/types'
|
|
import { formatShortDate, formatTaskLabel, nclcChipVariant } from '../lib/historique'
|
|
|
|
interface Props {
|
|
item: Item
|
|
isLast: boolean
|
|
}
|
|
|
|
const CHIP_BASE =
|
|
'inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide'
|
|
|
|
const CHIP_OK = 'bg-success-soft text-success border-success/30'
|
|
const CHIP_WARN = 'bg-warning-soft text-warning border-warning/30'
|
|
const CHIP_ERR = 'bg-danger-soft text-danger border-danger/30'
|
|
const CHIP_NEUTRAL = 'bg-surface text-ink-secondary border-border'
|
|
|
|
function NclcBadge({ nclc }: { nclc: number }) {
|
|
const variant = nclcChipVariant(nclc)
|
|
const cls = variant === 'ok' ? CHIP_OK : variant === 'warn' ? CHIP_WARN : CHIP_ERR
|
|
return <span className={`${CHIP_BASE} ${cls}`}>NCLC {nclc}</span>
|
|
}
|
|
|
|
export function SimulationListItem({ item, isLast }: Props) {
|
|
const hasScore = item.score !== null && item.nclc !== null
|
|
const borderClass = isLast ? '' : 'border-b border-border'
|
|
|
|
return (
|
|
<Link
|
|
to={`/rapport/${item.id}`}
|
|
className={`flex items-center gap-[14px] px-4 py-[14px] transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:shadow-focus ${borderClass}`}
|
|
>
|
|
<span className="w-[68px] shrink-0 text-[11.5px] tabular-nums text-ink-tertiary">
|
|
{formatShortDate(item.created_at)}
|
|
</span>
|
|
|
|
<span className="min-w-0 flex-1 truncate text-[13px] font-medium text-ink-primary">
|
|
{formatTaskLabel(item)}
|
|
</span>
|
|
|
|
{hasScore && item.nclc !== null ? (
|
|
<NclcBadge nclc={item.nclc} />
|
|
) : (
|
|
<span className={`${CHIP_BASE} ${CHIP_NEUTRAL}`}>En cours</span>
|
|
)}
|
|
|
|
<span className="min-w-[56px] text-right text-[16px] font-semibold tracking-[-0.02em] tabular-nums text-ink-primary">
|
|
{hasScore ? `${item.score}/20` : '—/20'}
|
|
</span>
|
|
|
|
<ChevronRight className="size-[14px] shrink-0 text-ink-tertiary" aria-hidden="true" />
|
|
</Link>
|
|
)
|
|
}
|