104 lines
3.9 KiB
TypeScript
104 lines
3.9 KiB
TypeScript
import { useState } from 'react'
|
|
import { faClock, faLocationDot, faPowerOff, faRoute, faStar } from '@fortawesome/free-solid-svg-icons'
|
|
import { SimpleGrid } from '@chakra-ui/react'
|
|
import { COLORS, MockButton, MockCard, MockDot, MockRow, MockText, MockupDevice, StatTile } from '../AdminMockup'
|
|
|
|
const DRIVERS = [
|
|
{ name: 'karim_d', status: 'busy' as const, queue: 1, today: 14, total: 512, distance: '1,8 km', eta: '6 min' },
|
|
{ name: 'sofia_l', status: 'available' as const, queue: 0, today: 9, total: 340, distance: '0,6 km', eta: '2 min' },
|
|
{ name: 'yanis_b', status: 'offline' as const, queue: 0, today: 5, total: 128, distance: '—', eta: '—' },
|
|
]
|
|
|
|
const STATUS_TONE = { available: COLORS.success, busy: COLORS.warning, offline: COLORS.text3 }
|
|
const STATUS_LABEL = { available: 'Disponible', busy: 'Occupé', offline: 'Hors ligne' }
|
|
|
|
// Sélection d'un livreur = vraie mise à jour d'état (carte + fiche + bouton
|
|
// "suivre l'itinéraire"), pas une simple image de liste.
|
|
export function LivraisonSection() {
|
|
const [selected, setSelected] = useState('karim_d')
|
|
const driver = DRIVERS.find((d) => d.name === selected)!
|
|
|
|
return (
|
|
<MockupDevice>
|
|
<SimpleGrid columns={3} spacing={2} mb={2.5}>
|
|
<StatTile icon={faLocationDot} value={1} label="Dispo" color={COLORS.success} />
|
|
<StatTile icon={faClock} value={1} label="Occupés" color={COLORS.warning} />
|
|
<StatTile icon={faPowerOff} value={1} label="Hors ligne" color={COLORS.text3} />
|
|
</SimpleGrid>
|
|
|
|
<MockCard>
|
|
<div
|
|
style={{
|
|
height: 110,
|
|
borderRadius: 8,
|
|
position: 'relative',
|
|
backgroundImage:
|
|
'linear-gradient(135deg,#161022 25%,#1c1330 25%,#1c1330 50%,#161022 50%,#161022 75%,#1c1330 75%)',
|
|
backgroundSize: '18px 18px',
|
|
marginBottom: 6,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
position: 'absolute',
|
|
top: 8,
|
|
left: 8,
|
|
background: `${STATUS_TONE[driver.status]}26`,
|
|
color: STATUS_TONE[driver.status],
|
|
fontSize: '0.62rem',
|
|
fontWeight: 800,
|
|
padding: '3px 9px',
|
|
borderRadius: 999,
|
|
}}
|
|
>
|
|
<MockDot color={STATUS_TONE[driver.status]} size="7px" />
|
|
{driver.name} — {driver.distance} · {driver.eta}
|
|
</span>
|
|
</div>
|
|
<MockText variant="muted" size="0.62rem">
|
|
Cliquez un livreur ci-dessous pour suivre son trajet en direct
|
|
</MockText>
|
|
</MockCard>
|
|
|
|
{DRIVERS.map((d) => {
|
|
const isSelected = d.name === selected
|
|
return (
|
|
<MockCard key={d.name} active={isSelected} onClick={() => setSelected(d.name)}>
|
|
<MockRow>
|
|
<MockText>
|
|
<MockDot color={STATUS_TONE[d.status]} />
|
|
{d.name}
|
|
</MockText>
|
|
<span
|
|
style={{
|
|
background: `${STATUS_TONE[d.status]}26`,
|
|
color: STATUS_TONE[d.status],
|
|
fontSize: '0.6rem',
|
|
fontWeight: 800,
|
|
padding: '2px 8px',
|
|
borderRadius: 999,
|
|
}}
|
|
>
|
|
{STATUS_LABEL[d.status]}
|
|
</span>
|
|
</MockRow>
|
|
<MockText variant="muted" size="0.62rem">
|
|
{d.queue} en attente · {d.today} aujourd'hui · {d.total} total
|
|
</MockText>
|
|
{isSelected && (
|
|
<div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
|
|
<MockButton tone="outline" icon={faStar}>
|
|
Avis
|
|
</MockButton>
|
|
<MockButton tone={d.status !== 'offline' ? 'accent' : 'outline'} icon={faRoute}>
|
|
{d.status !== 'offline' ? "Suivre l'itinéraire" : 'Indisponible'}
|
|
</MockButton>
|
|
</div>
|
|
)}
|
|
</MockCard>
|
|
)
|
|
})}
|
|
</MockupDevice>
|
|
)
|
|
}
|