// SOBER · Officer (DNTT) platform — issues DUTs, manages queue. // Reuses primitives from sober.jsx (paperCard, KpiTile, ghostBtn, etc.) // and sub-screens from sober-subscreens.jsx. const SoberOfficerApp = ({ lang = 'fr', density = 'comfortable', initialScreen = 'dashboard' }) => { const [screen, setScreen] = React.useState(initialScreen); // dashboard | issue | queue | transporters | vehicles | tariffs | profile | settings | bill const [step, setStep] = React.useState(0); const [activeBill, setActiveBill] = React.useState(null); const [issueForm, setIssueForm] = React.useState({ payerKind: 'company', // 'company' | 'individual' transporterId: 'TRP-04812', payerCustom: false, // toggle to enter free-form payer not in registry payerName: '', payerId: '', // RCCM or CNI/NIF payerAddress: '', payerPhone: '', 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 === issueForm.goods) || GOODS[0]; const distance = (ROUTES.find(r => r.from === issueForm.fromCity && r.to === issueForm.toCity) || { km: 254 }).km; const baseFee = Math.round(distance * 1200 + issueForm.quantity * 800); const stamp = 25000, stat = 8000; const total = baseFee + stamp + stat; const pad = density === 'compact' ? 14 : 22; const openBill = (bill) => { setActiveBill(bill); setScreen('bill'); }; const startIssue = () => { setStep(0); setScreen('issue'); }; return (
{screen === 'dashboard' && setScreen('queue')}/>} {screen === 'issue' && ( { const tr = TRANSPORTERS.find(tr=>tr.id===issueForm.transporterId); const b = { id: 'DUT-2026-05-' + (8822 + Math.floor(Math.random()*99)), transporterId: issueForm.transporterId, transporter: issueForm.payerCustom ? issueForm.payerName : (tr?.short || ''), payerKind: issueForm.payerKind, payerId: issueForm.payerCustom ? issueForm.payerId : (tr?.rccm || ''), from: issueForm.fromCity, to: issueForm.toCity, goods: goods.label, amount: total, status: 'pending', issued: '02/05/2026', officer: OFFICER.name.split(' ').map(s=>s[0]).join('. ') }; setActiveBill(b); setScreen('bill'); }} onCancel={() => setScreen('dashboard')}/> )} {screen === 'queue' && } {screen === 'transporters' && } {screen === 'vehicles' && } {screen === 'tariffs' && } {screen === 'imports' && { setActiveBill(b); setScreen('importDetail'); }} onNew={() => setScreen('importNew')}/>} {screen === 'importNew' && setScreen('imports')} onIssue={(data) => { const id = 'IMV-2026-05-' + String(922 + Math.floor(Math.random()*78)).padStart(5,'0'); const newBill = { id, date: '02/05/2026', officer: 'F. Camara', importerKind: data.importerKind, importerId: data.importerId || data.importerDoc, importerName: data.importerName, vehicle: data.vehicle, cif: data.cif, total: data.tax.total, status: 'pending', due: '12/05/2026' }; IMPORT_BILLS.unshift(newBill); setActiveBill(newBill); setScreen('importDetail'); }}/>} {screen === 'importDetail' && activeBill && activeBill.id && activeBill.id.startsWith('IMV') && setScreen('imports')}/>} {screen === 'profile' && } {screen === 'settings' && } {screen === 'bill' && activeBill && setScreen('queue')}/>}
b.status==='pending').length }, { id: 'transporters', icon: 'users', label: 'Transp.' }, { id: 'profile', icon: 'user', label: 'Compte' }, ]}/>
); }; // ───────────────────────────────────────────────────────────── // Officer top bar — official portal vibe with badge instead of company // ───────────────────────────────────────────────────────────── const OfficerTopBar = ({ lang }) => (
Plateforme DNTT — Émission DUT
{t('dntt', lang) || 'Direction Nationale du Transports Terrestre'}
Rechercher DUT, transporteur, plaque… ⌘K
5
FC
{OFFICER.name}
{OFFICER.badge}
); // ───────────────────────────────────────────────────────────── // Officer sidebar // ───────────────────────────────────────────────────────────── const OfficerSidebar = ({ lang, screen, setScreen, setStep }) => { const Item = ({ id, icon, label, badge }) => { const active = screen === id || (id === 'queue' && screen === 'bill') || (id === 'issue' && screen === 'issue'); return ( ); }; const pending = BILLS.filter(b => b.status === 'pending').length; return ( ); }; // ───────────────────────────────────────────────────────────── // Officer dashboard // ───────────────────────────────────────────────────────────── const OfficerDashboard = ({ lang, onIssue, onOpenBill, onOpenQueue }) => { const today = BILLS.filter(b => b.officer.includes('Camara')); const pending = BILLS.filter(b => b.status === 'pending'); const todayTotal = today.reduce((s, b) => s + b.amount, 0); return (
Bureau Conakry · Poste {OFFICER.badge}

Bonjour, {OFFICER.name.split(' ')[0]}.

Vue d'ensemble — jeudi 30 avril 2026 · 09:38 GMT
s+b.amount,0))} tone="warn"/>

File de DUT à valider

{['N° DUT','Transporteur','Itinéraire','Marchandise','Montant','Statut'].map(h => )} {BILLS.slice(0, 6).map((b, i) => ( onOpenBill(b)} style={{ cursor: 'pointer', background: i % 2 ? '#FBF8F2' : 'transparent' }}> ))}
{h}
{b.id} {b.transporter} {b.payerKind === 'individual' && ( P.P. )} {b.from} → {b.to} {b.goods} {fmtGNF(b.amount)}

Activité de l'équipe

{[ { who: 'F. Camara', n: 12, m: 'Vous · 3 280 K GNF' }, { who: 'M. Sylla', n: 9, m: '2 145 K GNF' }, { who: 'A. Diaby', n: 7, m: '1 870 K GNF' }, { who: 'K. Soumah', n: 5, m: '892 K GNF' }, ].map((p, i) => (
{p.who.split(' ').map(s=>s[0]).join('')}
{p.who}
{p.m}
{p.n}
))}

Alertes contrôle

3 DUT expirés en circulation présumée — RN1 km 218
Tonnage suspect — DUT-2026-04-08812 (Hydrocarbures)
SAFI · réconciliation Trésor terminée pour la veille
); }; // ───────────────────────────────────────────────────────────── // Officer queue // ───────────────────────────────────────────────────────────── const OfficerQueue = ({ lang, onOpenBill }) => { const [filter, setFilter] = React.useState('all'); const filtered = filter === 'all' ? BILLS : BILLS.filter(b => b.status === filter); return (
{[['all',`Tous (${BILLS.length})`],['paid',`${t('statusPaid', lang)} (${BILLS.filter(b=>b.status==='paid').length})`],['pending',`${t('statusPending', lang)} (${BILLS.filter(b=>b.status==='pending').length})`],['expired',`${t('statusExpired', lang)} (${BILLS.filter(b=>b.status==='expired').length})`]].map(([k,l]) => ( ))}
{['N° DUT','Date','Transporteur','Itinéraire','Marchandise','Agent','Montant','Statut'].map(h => )} {filtered.map((b, i) => ( onOpenBill(b)} style={{ cursor: 'pointer', background: i % 2 ? '#FBF8F2' : 'transparent' }}> ))}
{h}
{b.id} {b.issued} {b.transporter} {b.payerKind === 'individual' && ( P.P. )} {b.from} → {b.to} {b.goods} {b.officer} {fmtGNF(b.amount)}
); }; // ───────────────────────────────────────────────────────────── // Officer bill detail // ───────────────────────────────────────────────────────────── const OfficerBillDetail = ({ lang, bill, onClose }) => (
Détail facture · {bill.officer}

{bill.id}

{bill.status !== 'paid' && }

Informations DUT

{bill.transporter} {bill.payerKind === 'individual' ? (lang==='en'?'Indiv.':'P.P.') : (lang==='en'?'Legal':'P.M.')} }/>

Décomposition

{t('total', lang)} {fmtGNF(bill.amount)}

Journal d'audit

{[ { time: bill.issued + ' 14:32', who: bill.officer, what: 'DUT émis', tone: 'good' }, { time: bill.issued + ' 14:32', who: 'Système', what: 'Notifications SMS + email envoyées au transporteur' }, ...(bill.status === 'paid' ? [ { time: bill.issued + ' 16:08', who: 'KKiaPay', what: `Paiement reçu — ${fmtGNF(bill.amount)}`, tone: 'good' }, { time: bill.issued + ' 16:09', who: 'Système', what: 'Reçu PDF généré et tampon "PAYÉ" apposé', tone: 'good' }, ] : bill.status === 'pending' ? [ { time: '29/04/2026 08:00', who: 'Système', what: 'Rappel automatique J−1' }, { time: 'Maintenant', who: 'Système', what: 'En attente de règlement', tone: 'warn' }, ] : [ { time: '28/04/2026 18:00', who: 'Système', what: 'Échéance dépassée — DUT expiré', tone: 'bad' }, ]), ].map((e, i) => (
{e.time}
{e.what}
par {e.who}
))}
); Object.assign(window, { SoberOfficerApp });