// ───────────────────────────────────────────────────────────── // SOBER · Institutional Direction // "Direction Générale des Transports Terrestres" feel. // Cream/paper background, deep ink, narrow flag-bar accents, // serif (Crimson Pro) for headlines, sans (Inter) for UI body. // ───────────────────────────────────────────────────────────── const SoberTransporterApp = ({ lang = 'fr', density = 'comfortable', userState = 'active', initialScreen = 'dashboard', initialStep = 0, initialPaid = false, initialPaymentState = 'idle' }) => { const _ = (k, v) => v ? tFmt(t(k, lang), v) : t(k, lang); const [screen, setScreen] = React.useState(initialScreen); // dashboard | form | payment | pdf const [step, setStep] = React.useState(initialStep); // for form const [paid, setPaid] = React.useState(initialPaid); const [paymentMethod, setPaymentMethod] = React.useState('orange'); const [paymentState, setPaymentState] = React.useState(initialPaymentState); // idle | sent | success const [selectedImport, setSelectedImport] = React.useState(null); // import bill being paid (null = DUT) const [viewedImport, setViewedImport] = React.useState(null); // import bill being viewed (full-screen invoice) const [form, setForm] = React.useState({ fromCity: 'Kamsar', toCity: 'Conakry', goods: 'BAUX', quantity: 32, unit: 'tonnes', vehicle: 'RC-4821-AC', driver: 'Ousmane Bah', departure: '2026-05-02', arrival: '2026-05-02', value: 18500000, }); const goods = GOODS.find((g) => g.code === form.goods) || GOODS[0]; const route = { from: form.fromCity, to: form.toCity }; const distance = (ROUTES.find((r) => r.from === route.from && r.to === route.to) || { km: 254 }).km; const baseFee = Math.round(distance * 1200 + form.quantity * 800); const stamp = 25000; const stat = 8000; const total = baseFee + stamp + stat; const pad = density === 'compact' ? 14 : 22; return (
{screen === 'dashboard' && ( setScreen('payments')} onOpenDut={() => setScreen('pdf')} userState={userState} /> )} {screen === 'form' && ( // Transporters cannot issue DUTs — only officers can. Redirect.

{lang === 'en' ? 'STDs are issued by DNTT officers only. Please proceed to payment of your due bills.' : 'Les DUT sont émis par les agents DNTT uniquement. Veuillez procéder au règlement de vos DUT en attente.'}

)} {screen === 'payment' && ( { setPaid(true); if (selectedImport) { setScreen('payments'); setSelectedImport(null); setPaymentState('idle'); } else { setScreen('pdf'); } }} onBack={() => { setScreen('payments'); setSelectedImport(null); }} /> )} {screen === 'pdf' && ( { setSelectedImport(null); setPaymentState('idle'); setScreen('payment'); } : undefined} onClose={() => setScreen('dashboard')} /> )} {screen === 'history' && setScreen('pdf')}/>} {screen === 'fleet' && } {screen === 'payments' && { setSelectedImport(null); setScreen('payment'); }} onPayImport={(b) => { setSelectedImport(b); setPaymentState('idle'); setScreen('payment'); }} onViewDut={() => setScreen('pdf')} onViewImport={(b) => { setViewedImport(b); setScreen('importView'); }}/>} {screen === 'importView' && viewedImport && (
{t('documentReady', lang)} · {viewedImport.id}

{lang === 'en' ? 'Vehicle Import Tax Notice' : 'Avis de Taxation · Importation Véhicule'}

{viewedImport.status === 'pending' && ( )}
{ setScreen('payments'); setViewedImport(null); }}/>
)} {screen === 'profile' && } {screen === 'support' && } {screen === 'settings' && }
); }; // ───────────────────────────────────────────────────────────── // Top bar: emblem + portal title + identification + language // ───────────────────────────────────────────────────────────── const SoberTopBar = ({ lang }) => (
{t('appName', lang)}
{t('portal', lang)}
{t('search', lang)}… ⌘K
FR SUS PUL MAN
3
MD
{CARRIER.director}
{CARRIER.short} · NIF {CARRIER.nif}
); // ───────────────────────────────────────────────────────────── // Sidebar // ───────────────────────────────────────────────────────────── const SoberSidebar = ({ lang = 'fr', screen, setScreen, setStep, setPaid, setPaymentState }) => { const Item = ({ id, icon, label, badge }) => { const active = screen === id || (id === 'form' && screen === 'payment') || (id === 'history' && screen === 'pdf'); return ( ); }; return ( ); }; // ───────────────────────────────────────────────────────────── // Dashboard // ───────────────────────────────────────────────────────────── const SoberDashboard = ({ lang = 'fr', onPay, onOpenDut, userState }) => { const overdue = userState === 'overdue'; return (
{/* Page header */}
{t('carrierSpace', lang)} — N° 04/MTI/2019

{t('welcome', lang)}, {CARRIER.director.split(' ').slice(-2).join(' ')}.

{t('overview', lang)} — 04 / 2026
{overdue && (
{t('overdue', lang)} — DUT-2026-04-08698
372 000 GNF · {t('overdueDetail', lang)}
)} {/* KPI strip */}
{/* Recent DUTs table */}

{t('recentDocs', lang)}

{[t('docNumber', lang), t('issuedOn', lang), t('route', lang), t('cargo', lang), t('vehicle', lang), t('total', lang), 'Statut'].map((h) => ( ))} {RECENT_DUTS.map((d, i) => ( ))}
{h}
{d.id} {d.date} {d.from} {d.to} {d.goods} {d.vehicle} {fmtGNF(d.amount)}
{/* Right column */}

{t('notifications', lang)}

{ALERTS.map((a, i) => (
{a.label}
{a.detail}
))}

{t('myFleet', lang)}

5 / {CARRIER.fleet}
{VEHICLES.slice(0, 4).map((v, i) => (
RG
{v.plate}
{v.brand} · {v.capacity} · {v.driver}
))}
); }; // ───────────────────────────────────────────────────────────── // Multi-step DUT form // ───────────────────────────────────────────────────────────── const SoberForm = ({ lang = 'fr', form, setForm, step, setStep, goods, distance, total, baseFee, stamp, stat, onSubmit, onCancel }) => { const STEPS = [ lang === 'en' ? 'Payer' : 'Redevable', t('route', lang), t('cargo', lang), `${t('vehicle', lang)} & ${t('driver', lang).toLowerCase()}`, t('summary', lang), ]; const set = (k, v) => setForm((f) => ({ ...f, [k]: v })); return (
{t('newDut', lang)} · {tFmt(t('stepOf', lang), { n: step + 1, total: STEPS.length })}

{STEPS[step]}

{/* Stepper */}
    {STEPS.map((s, i) => { const done = i < step, active = i === step; return (
  1. {done ? : i + 1}
    {s} {i < STEPS.length - 1 &&
    }
    2. ); })}
{step === 0 && } {step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && }
{step < STEPS.length - 1 ? ( ) : ( )}
); }; const StepPayer = ({ lang = 'fr', form, set }) => { const isFr = lang !== 'en'; const filtered = TRANSPORTERS.filter(tr => tr.kind === form.payerKind); const selected = TRANSPORTERS.find(tr => tr.id === form.transporterId); // Lookup-derived auto-filled fields (only when not custom) const displayName = form.payerCustom ? form.payerName : (selected?.short || ''); const displayId = form.payerCustom ? form.payerId : (selected?.rccm || ''); const displayContact = form.payerCustom ? form.payerName : (selected?.contact || ''); const switchKind = (k) => { const first = TRANSPORTERS.find(tr => tr.kind === k); set('payerKind', k); if (first) set('transporterId', first.id); }; return ( <>
{isFr ? 'Type de redevable' : 'Payer type'}
{[ { k: 'company', title: isFr ? 'Personne morale' : 'Legal entity', sub: isFr ? 'Société, RCCM' : 'Company, RCCM', icon: 'truck' }, { k: 'individual', title: isFr ? 'Personne physique' : 'Individual', sub: isFr ? 'Particulier, CNI' : 'Private, ID card', icon: 'user' }, ].map(o => { const active = form.payerKind === o.k; return ( ); })}
{isFr ? 'Identification' : 'Identification'}
{!form.payerCustom ? ( ) : ( set('payerName', v)} placeholder={form.payerKind === 'company' ? 'ex. SOCOTRANS SA' : 'ex. Mariama Bah'} /> set('payerId', v)} placeholder={form.payerKind === 'company' ? 'RCCM/CKY/B/…' : 'CNI 094-…'} /> )} set('payerAddress', v)} placeholder={isFr ? 'Quartier, commune, ville' : 'Neighborhood, city'} /> set('payerPhone', v)} placeholder="+224 6•• •• •• ••" />
{isFr ? 'Récapitulatif redevable' : 'Payer summary'}
{isFr ? 'Désignation' : 'Name'}
{displayName || '—'}
{form.payerKind === 'company' ? 'RCCM/NIF' : 'CNI/NIF'}
{displayId || '—'}
{!form.payerCustom && (
{isFr ? 'Représentant / contact' : 'Contact'}
{displayContact || '—'}
)}
{isFr ? 'Type' : 'Type'}
{form.payerKind === 'company' ? (isFr ? 'Personne morale' : 'Legal entity') : (isFr ? 'Personne physique' : 'Individual')}
); }; const StepRoute = ({ lang = 'fr', form, set, distance }) => ( <> set('toCity', v)} options={GUINEA_CITIES} /> set('departure', v)} /> set('arrival', v)} />