// Sub-screens shared across Officer and Transporter platforms: // transporters list, vehicles, tariffs, fleet, profile, support, settings. // ─── Officer: Transporteurs (référentiel) ────────────────────────── const OfficerTransporters = ({ lang }) => (
{TRANSPORTERS.map(tr => { const isInd = tr.kind === 'individual'; const initials = isInd ? tr.contact.split(' ').map(s=>s[0]).slice(0,2).join('') : tr.short.split(' ').map(s=>s[0]).slice(0,2).join(''); return (
{initials}
{tr.short}
{tr.id}
{isInd ? 'P. physique' : 'Agréé'}
{!isInd &&
{tr.contact}
}
{tr.rccm}
{tr.city} · {tr.fleet} {isInd ? (tr.fleet > 1 ? 'véhicules' : 'véhicule') : 'véhicules'}
{BILLS.filter(b => b.transporterId === tr.id).length} DUT émis
); })}
); // ─── Officer: Véhicules ──────────────────────────────────────────── const OfficerVehicles = ({ lang }) => (
{['Plaque','Type','Marque','Année','Capacité','Conducteur'].map(h => )} {VEHICLES.map((v, i) => ( ))}
{h}
{v.plate} {v.type} {v.brand} {v.year} {v.capacity} {v.driver}
); // ─── Officer: Grille tarifaire ───────────────────────────────────── const OfficerTariffs = ({ lang }) => (

Majorations & exemptions

{[ ['Hydrocarbures (essence, gasoil, GPL)', '+15%', 'Majoration risque'], ['Marchandises classées dangereuses', '+15%', 'CMR Article 7'], ['Convois exceptionnels (>40 t)', '+25%', 'Étude voirie requise'], ['Aide humanitaire homologuée', 'Exonération totale', 'Sur visa MAE'], ['Produits du cru — circuits courts', '−50%', 'Décret 2024/PR/452'], ].map(([k, v, note], i) => ( ))}
{k} {v} {note}
); // ─── Officer: Profil ─────────────────────────────────────────────── const OfficerProfile = ({ lang }) => (
FC
{OFFICER.name}
{OFFICER.role}
{OFFICER.badge}

Coordonnées professionnelles

); // ─── Officer: Paramètres ─────────────────────────────────────────── const OfficerSettings = ({ lang }) => (
); // ─── Transporter: Historique des DUT ─────────────────────────────── const TransporterHistory = ({ lang, onOpen }) => { const [filter, setFilter] = React.useState('all'); const allRows = [...RECENT_DUTS, ...RECENT_DUTS.map(r => ({ ...r, id: r.id.replace('821','712'), date: '12/04/2026' }))]; const filtered = filter === 'all' ? allRows : allRows.filter(r => r.status === filter); return (
{[['all','Tous'],['paid',t('statusPaid', lang)],['pending',t('statusPending', lang)],['expired',t('statusExpired', lang)]].map(([k,l]) => ( ))}
{[t('docNumber', lang), t('issuedOn', lang), t('route', lang), t('cargo', lang), t('vehicle', lang), t('total', lang), 'Statut'].map(h => )} {filtered.map((d, i) => ( ))}
{h}
{d.id} {d.date} {d.from} → {d.to} {d.goods} {d.vehicle} {fmtGNF(d.amount)}
); }; // ─── Transporter: Paiements ──────────────────────────────────────── const TransporterPayments = ({ lang, onPay, onPayImport, onViewDut, onViewImport }) => { const isFr = lang !== 'en'; // Mock: bills issued to this carrier (Diallo & Frères = TRP-04812) that are unpaid. const pending = [ { id: 'DUT-2026-04-08820', from: 'Boffa', to: 'Conakry', goods: 'Ciment', amount: 198500, due: '02/05/2026', issued: '28/04/2026', officer: 'F. Camara' }, { id: 'DUT-2026-04-08812', from: 'Kindia', to: 'Conakry', goods: 'Hydrocarbures', amount: 524800, due: '03/05/2026', issued: '26/04/2026', officer: 'F. Camara' }, ]; const totalDue = pending.reduce((s, b) => s + b.amount, 0); // Vehicle import bills addressed to this company const myImports = (typeof IMPORT_BILLS !== 'undefined' ? IMPORT_BILLS : []).filter(b => b.importerKind === 'company' && b.importerId === 'TRP-04812'); const pendingImports = myImports.filter(b => b.status === 'pending'); const importDue = pendingImports.reduce((s, b) => s + b.total, 0); const grandTotal = totalDue + importDue; const [importModal, setImportModal] = React.useState(null); return (
{/* Hero summary */}
{isFr ? 'Total à régler' : 'Total due'}
{fmtGNF(grandTotal)}
{pending.length} {isFr ? 'DUT' : 'DUT'}{pendingImports.length > 0 ? ` + ${pendingImports.length} ${isFr ? 'taxe d’importation véhicule' + (pendingImports.length > 1 ? 's' : '') : 'vehicle import tax' + (pendingImports.length > 1 ? 'es' : '')}` : ''} · {isFr ? 'prochain règlement avant le 02/05' : 'next due May 2'}
{/* Vehicle import bills */} {pendingImports.length > 0 && (
{isFr ? 'Importations de véhicules' : 'Vehicle imports'} · {pendingImports.length} {isFr ? 'taxe' : 'tax'}{pendingImports.length > 1 ? 's' : ''} {isFr ? 'à régler' : 'due'}
1 ? 'repeat(auto-fit, minmax(360px, 1fr))' : '1fr', gap: 12 }}> {pendingImports.map(b => ( onViewImport ? onViewImport(x) : setImportModal(x)} onPay={(x) => onPayImport ? onPayImport(x) : setImportModal(x)}/> ))}
)} {/* Pending DUT cards */}
{isFr ? 'Documents Uniques de Transport' : 'Transport documents'}
{pending.map(b => (
{b.id}
{isFr ? 'Émis le' : 'Issued'} {b.issued} · {b.officer}
{b.from} → {b.to}
{b.goods}
{isFr ? 'À régler avant' : 'Due'}
{b.due}
{fmtGNF(b.amount)}
))}
{/* KPI strip */}

{isFr ? 'Transactions récentes' : 'Recent transactions'}

{[isFr?'Référence':'Reference', 'Date', 'DUT', isFr?'Méthode':'Method', isFr?'Montant':'Amount', isFr?'Statut':'Status'].map(h => )} {[ { ref: 'KKP-2026-A4F71B', date: '28/04', dut: 'DUT-2026-04-08821', method: 'Orange Money', amount: 338000, ok: true }, { ref: 'KKP-2026-9B22E0', date: '25/04', dut: 'DUT-2026-04-08714', method: 'MTN MoMo', amount: 412500, ok: true }, { ref: 'KKP-2026-7CD104', date: '22/04', dut: 'DUT-2026-04-08698', method: 'Carte BICIGUI', amount: 372000, ok: false }, { ref: 'KKP-2026-4F8A2E', date: '18/04', dut: 'DUT-2026-04-08512', method: 'Virement Ecobank', amount: 1240000, ok: true }, { ref: 'KKP-2026-3119BA', date: '14/04', dut: 'DUT-2026-04-08344', method: 'Orange Money', amount: 296500, ok: true }, ].map((p, i) => ( ))}
{h}
{p.ref} {p.date}/2026 {p.dut} {p.method} {fmtGNF(p.amount)}
{importModal && setImportModal(null)} onPay={(b) => { setImportModal(null); onPayImport?.(b); }}/>}
); }; // ─── Transporter: Ma flotte ──────────────────────────────────────── const TransporterFleet = ({ lang }) => (
{VEHICLES.map(v => (
{v.plate}
{v.type}
✓ Visite technique à jour
))}
); // ─── Transporter: Profil ─────────────────────────────────────────── const TransporterProfile = ({ lang }) => (
D&F
{CARRIER.name}
Depuis {CARRIER.since}
✓ Compte vérifié

Identité juridique

); // ─── Transporter: Support ────────────────────────────────────────── const TransporterSupport = ({ lang }) => (

Questions fréquentes

{[ ['Comment puis-je payer un DUT par USSD ?', 'Composez *144# depuis le numéro associé à votre compte, choisissez "Payer une facture DUT" puis saisissez la référence DUT-AAAA-MM-XXXXX. Validez avec votre code Mobile Money.'], ['Que faire si le contrôle routier ne reconnaît pas mon DUT ?', 'Présentez le QR code imprimé ou affichez-le depuis l\'application. Le QR est vérifiable hors ligne sur les terminaux des agents de contrôle.'], ['Combien de temps un DUT est-il valide ?', 'Un DUT est valide pour le seul trajet déclaré, entre les dates de départ et d\'arrivée saisies. Au-delà, un nouveau DUT est requis.'], ['Puis-je contester une liquidation ?', 'Oui, dans un délai de 48 h après émission, via le bouton "Contester" sur la facture. La réclamation est instruite par la DGTT sous 5 jours ouvrés.'], ].map(([q, a], i) => (
{q}
{a}
))}
); // ─── Transporter: Paramètres ─────────────────────────────────────── const TransporterSettings = ({ lang }) => (
); // ─── Small helpers used by the screens above ─────────────────────── const PageHead = ({ kicker, title, children }) => (
{kicker}

{title}

{children &&
{children}
}
); const SettingsCard = ({ title, children }) => (

{title}

{children}
); const SettingRow = ({ label, value, tone, toggle, defaultChecked }) => (
{label}
{value}
{toggle ? : }
); const ToggleSwitch = ({ defaultChecked }) => { const [on, setOn] = React.useState(!!defaultChecked); return ( ); }; const ContactTile = ({ icon, label, value, detail }) => (
{label}
{value}
{detail}
); Object.assign(window, { OfficerTransporters, OfficerVehicles, OfficerTariffs, OfficerProfile, OfficerSettings, TransporterHistory, TransporterPayments, TransporterFleet, TransporterProfile, TransporterSupport, TransporterSettings, PageHead, SettingsCard, SettingRow, ToggleSwitch, ContactTile, });