hermann/expria-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat(sprint-0.5-bis): AppLayout + primitives UI + refonte pages

Browse source 
- AppLayout (sidebar fixe, drawer mobile, BottomNav)
- MobileHeader sticky + Sidebar avec verrouillage hasAccess()
- Primitives src/shared/ui/ : Button, Card, Badge
- SimulationPage + DashboardPage : suppression headers internes
- TaskSelector : Card interactive + Badge EE/EO + eyebrow
- router.tsx : layout routes + ComingSoon inline
This commit is contained in:
Hermann_Kitio 2026-04-20 02:37:19 +03:00
parent 997f39bd33
commit 8450265449
11 changed files with 752 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/features/simulations/components/TaskSelector.tsx
View file

@ -13,6 +13,8 @@
import { Lock, Loader2 } from 'lucide-react'
import { canSimulate } from '@/entities/user/lib'
import { cn } from '@/shared/lib/utils'
import { Card } from '@/shared/ui/Card'
import { Badge } from '@/shared/ui/Badge'
import type { Plan } from '@/entities/user/lib'
import type { CreateSimulationPayload, Tache } from '@/entities/production/types'
@ -40,7 +42,6 @@ const TASK_CARDS: readonly TaskCard[] = [
{ tache: null, label: 'Expression Orale', sublabel: 'Tâche 2 — Live', sprintLocked: true, lockLabel: 'Exclusivité Premium' },
]
export function TaskSelector({ plan, simulationsUsed, isLoading, onSelect }: Props) {
const simulationCheck = canSimulate(plan, simulationsUsed)
const quotaBlocked = !simulationCheck.allowed
@ -70,41 +71,47 @@ export function TaskSelector({ plan, simulationsUsed, isLoading, onSelect }: Pro
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
{TASK_CARDS.map((card) => {
const locked = card.sprintLocked || quotaBlocked
const disabled = locked || isLoading || card.tache === null
const abbrev = (card.tache?.split('_')[0]) ?? 'EO'
if (locked || card.tache === null) {
return (
<Card
key={card.tache ?? 'eo-t2'}
variant="default"
className="flex flex-col p-4 opacity-60"
>
<Lock className="mb-2 size-4 text-ink-4" aria-hidden="true" />
<span className="text-[11px] font-semibold uppercase tracking-widest text-ink-5">
{card.label}
</span>
<span className="mt-1 text-sm font-semibold text-ink-1">{card.sublabel}</span>
{card.lockLabel && (
<span className="mt-1.5 text-xs text-ink-4">{card.lockLabel}</span>
)}
</Card>
)
}
return (
<button
key={`${card.tache ?? 'eo-t2'}`}
type="button"
disabled={disabled}
<Card
key={card.tache}
variant="interactive"
className={cn('relative flex flex-col p-4', isLoading && 'cursor-wait')}
onClick={() => {
if (card.tache && !locked) {
onSelect({ tache: card.tache, mode: 'entrainement' })
}
if (!isLoading) onSelect({ tache: card.tache as Tache, mode: 'entrainement' })
}}
className={cn(
'group relative flex flex-col rounded-lg border p-4 text-left transition-colors',
locked || card.tache === null
? 'cursor-not-allowed border-line bg-canvas-2 opacity-60'
: 'cursor-pointer border-line bg-surface hover:border-expria hover:bg-expria-50',
isLoading && !locked && 'cursor-wait',
)}
>
{(card.sprintLocked || card.tache === null) && (
<Lock
className="mb-2 size-4 text-ink-4"
aria-hidden="true"
/>
)}
<span className="text-xs font-medium text-ink-4">{card.label}</span>
<span className="mt-0.5 text-sm font-semibold text-ink-1">{card.sublabel}</span>
{card.lockLabel && (
<span className="mt-1.5 text-xs text-ink-4">{card.lockLabel}</span>
)}
{isLoading && !locked && card.tache && (
<Loader2 className="absolute right-3 top-3 size-3.5 animate-spin text-expria" aria-hidden="true" />
)}
</button>
<div className="mb-2 flex items-center justify-between">
<Badge variant="neutral">{abbrev}</Badge>
{isLoading && (
<Loader2 className="size-3.5 animate-spin text-expria" aria-hidden="true" />
)}
</div>
<span className="text-[11px] font-semibold uppercase tracking-widest text-ink-5">
{card.label}
</span>
<span className="mt-1 text-sm font-semibold text-ink-1">{card.sublabel}</span>
</Card>
)
})}
</div>