// SOBER · Individual transporter — owner-driver, single vehicle.
// Same sober design language as the company app, drastically simplified:
// no fleet manager, no drivers list, no company KPIs. Mobile-first patterns
// even on desktop (single column, stacked cards, big CTA).
const INDIVIDUAL = {
name: 'Sékou Soumah',
cni: 'CNI 094-2018-0044218',
city: 'Coyah',
phone: '+224 622 04 18 77',
vehicle: { plate: 'RG-7142-CO', brand: 'Toyota Hilux 2018', capacity: '1,5 t', type: 'Pick-up bâché' },
since: '2019',
trips: 88, // lifetime DUTs
};
const INDIVIDUAL_BILLS = [
// pending
{ id: 'DUT-2026-04-08819', from: 'Coyah', to: 'Conakry', goods: 'Produits maraîchers', amount: 64200, status: 'pending', issued: '02/05/2026', due: '04/05/2026', officer: 'F. Camara' },
// paid history
{ id: 'DUT-2026-04-08711', from: 'Forécariah', to: 'Coyah', goods: 'Manioc', amount: 38400, status: 'paid', issued: '24/04/2026', officer: 'F. Camara', method: 'Orange Money' },
{ id: 'DUT-2026-04-08599', from: 'Coyah', to: 'Kindia', goods: 'Banane plantain', amount: 41700, status: 'paid', issued: '17/04/2026', officer: 'M. Sylla', method: 'Orange Money' },
{ id: 'DUT-2026-04-08502', from: 'Coyah', to: 'Conakry', goods: 'Légumes divers', amount: 36800, status: 'paid', issued: '12/04/2026', officer: 'F. Camara', method: 'MTN MoMo' },
{ id: 'DUT-2026-03-08311', from: 'Forécariah', to: 'Conakry', goods: 'Mangues', amount: 52100, status: 'paid', issued: '28/03/2026', officer: 'F. Camara', method: 'Orange Money' },
];
// ─────────────────────────────────────────────────────────────
// Root app
// ─────────────────────────────────────────────────────────────
const SoberIndividualApp = ({ lang = 'fr', density = 'comfortable' }) => {
const [screen, setScreen] = React.useState('home'); // home | pay | payflow | receipt | account | dutView | importView
const [activeBill, setActiveBill] = React.useState(null);
const [viewedBill, setViewedBill] = React.useState(null); // DUT being viewed
const [viewedImport, setViewedImport] = React.useState(null); // import bill being viewed
const [importModal, setImportModal] = React.useState(null);
const [paymentMethod, setPaymentMethod] = React.useState('orange');
const [paymentState, setPaymentState] = React.useState('idle'); // idle | sent | success
const [paid, setPaid] = React.useState(false);
const isFr = lang !== 'en';
const pending = INDIVIDUAL_BILLS.filter(b => b.status === 'pending');
const paidBills = INDIVIDUAL_BILLS.filter(b => b.status === 'paid');
const totalDue = pending.reduce((s, b) => s + b.amount, 0);
// Import bills addressed to this individual (Sékou Soumah — CNI-7053219K)
const myImportBills = IMPORT_BILLS.filter(b => b.importerKind === 'individual' && b.importerId === 'CNI-7053219K');
const pendingImports = myImportBills.filter(b => b.status === 'pending');
const startPay = (b) => { setActiveBill(b); setPaid(false); setPaymentState('idle'); setScreen('payflow'); };
const startPayImport = (imp) => {
// Map an import bill into the DUT-shape the existing pay flow understands.
const asPayable = {
id: imp.id, amount: imp.total, kind: 'import',
from: imp.vehicle.origin, to: 'Conakry',
goods: `${imp.vehicle.make} ${imp.vehicle.model} · ${imp.vehicle.year}`,
issued: imp.date, due: imp.due, officer: imp.officer,
_import: imp,
};
setImportModal(null);
startPay(asPayable);
};
const pad = density === 'compact' ? 14 : 22;
return (
{screen === 'home' && (
setScreen('pay')} onOpenBill={startPay}
onOpenReceipt={(b) => { setActiveBill(b); setPaid(true); setScreen('receipt'); }}/>
)}
{screen === 'pay' && (
{ setViewedBill(b); setScreen('dutView'); }}
onViewImport={(b) => { setViewedImport(b); setScreen('importView'); }}
onPayImport={startPayImport}
onBack={() => setScreen('home')}/>
)}
{screen === 'dutView' && viewedBill && (
{ setScreen('pay'); setViewedBill(null); }}
onPay={() => { const b = viewedBill; setViewedBill(null); startPay(b); }}/>
)}
{screen === 'importView' && viewedImport && (
{ setScreen('pay'); setViewedImport(null); }}
onPay={() => { const b = viewedImport; setViewedImport(null); startPayImport(b); }}/>
)}
{screen === 'payflow' && activeBill && (
{ setPaid(true); setScreen('receipt'); }}
onBack={() => setScreen('pay')}/>
)}
{screen === 'receipt' && activeBill && (
setScreen('home')}/>
)}
{screen === 'account' && (
setScreen('home')}/>
)}
{importModal && setImportModal(null)} onPay={startPayImport}/>}
);
};
// ─────────────────────────────────────────────────────────────
// Top bar — same shape as Officer/Company
// ─────────────────────────────────────────────────────────────
const IndividualTopBar = ({ lang, pending }) => {
const isFr = lang !== 'en';
return (
);
};
// ─────────────────────────────────────────────────────────────
// Sidebar — matches company app shape (230px, icon nav, footer)
// ─────────────────────────────────────────────────────────────
const IndividualSidebar = ({ lang, screen, setScreen, pending }) => {
const isFr = lang !== 'en';
const Item = ({ id, icon, label, badge }) => {
const active = screen === id || (id === 'pay' && (screen === 'payflow' || screen === 'receipt'));
return (
setScreen(id)} style={{
display: 'flex', alignItems: 'center', gap: 12, padding: '9px 14px',
background: active ? '#FBF8F2' : 'transparent', color: active ? '#161413' : '#6B6557',
border: 'none', borderLeft: active ? '2px solid #CE1126' : '2px solid transparent',
width: '100%', cursor: 'pointer', fontSize: 13, textAlign: 'left',
fontWeight: active ? 600 : 500, fontFamily: 'inherit',
}}>
{label}
{badge && {badge} }
);
};
return (
{isFr ? 'Espace personnel' : 'Personal space'}
{isFr ? 'Compte' : 'Account'}
{isFr ? 'Mon véhicule' : 'My vehicle'}
RG
{INDIVIDUAL.vehicle.plate}
{INDIVIDUAL.vehicle.brand}
{isFr ? 'Carte à jour' : 'Card valid'}
{isFr ? 'DNTT · Min. des Transports' : 'DNTT · Transport Min.'}
);
};
// ─────────────────────────────────────────────────────────────
// Home — greeting hero + amount due + last few receipts
// ─────────────────────────────────────────────────────────────
const IndividualHome = ({ lang, pending, totalDue, paidBills, onPay, onOpenBill, onOpenReceipt }) => {
const isFr = lang !== 'en';
const hasPending = pending.length > 0;
return (
<>
{/* Greeting */}
{isFr ? 'Bonjour' : 'Hello'} · {INDIVIDUAL.city}
{INDIVIDUAL.name.split(' ')[0]},
{hasPending
? (isFr ? 'vous avez un règlement en attente.' : 'you have a payment pending.')
: (isFr ? 'tout est à jour.' : "you're all caught up.")}
{/* Amount due hero */}
{hasPending ? (
{isFr ? 'À régler' : 'Amount due'}
{fmtGNF(totalDue)}
{pending.length} DUT · {isFr ? 'avant le' : 'before'} {pending[0].due}
{isFr ? 'Régler maintenant' : 'Pay now'}
) : (
{isFr ? 'Vous êtes à jour' : "You're up to date"}
{isFr ? 'Aucun DUT en attente. Bon trajet.' : 'No bills pending. Safe travels.'}
)}
{/* Vehicle card */}
RG
{INDIVIDUAL.vehicle.plate}
{INDIVIDUAL.vehicle.brand} · {INDIVIDUAL.vehicle.capacity}
{isFr ? 'Carte transp.' : 'Carrier card'}
✓ {isFr ? 'À jour' : 'Valid'}
{/* Recent receipts (mini) */}
{isFr ? 'Derniers reçus' : 'Recent receipts'}
{INDIVIDUAL.trips} {isFr ? 'DUT depuis' : 'DUTs since'} {INDIVIDUAL.since}
{paidBills.slice(0, 4).map((b, i) => (
onOpenReceipt(b)} style={{
display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
background: i % 2 ? '#FBF8F2' : '#fff',
border: 'none', borderTop: '1px solid #E5DDC9',
borderBottom: i === Math.min(paidBills.length, 4) - 1 ? '1px solid #E5DDC9' : 'none',
cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
width: '100%',
}}>
{b.from} → {b.to}
{b.goods} · {b.issued}
{fmtGNF(b.amount)}
{b.id.slice(-5)}
))}
);
};
// ─────────────────────────────────────────────────────────────
// Pay list — pending bills with full detail
// ─────────────────────────────────────────────────────────────
const IndividualPayList = ({ lang, pending, totalDue, importBills = [], onOpenBill, onViewDut, onViewImport, onPayImport, onBack }) => {
const isFr = lang !== 'en';
const totalImportDue = importBills.reduce((s,b)=>s+b.total,0);
if (pending.length === 0 && importBills.length === 0) {
return (
{isFr ? 'Aucun DUT à régler' : 'Nothing to pay'}
{isFr ? 'Vous êtes à jour avec la DNTT.' : "You're all up to date."}
);
}
return (
<>
{isFr ? `À régler · ${pending.length + importBills.length} document${pending.length + importBills.length > 1 ? 's' : ''}` : `${pending.length + importBills.length} bills due`}
{fmtGNF(totalDue + totalImportDue)}
{importBills.length > 0 && (
{isFr ? 'Importations de véhicules' : 'Vehicle imports'}
{importBills.map(b => (
))}
)}
{pending.length > 0 && (
<>
{isFr ? 'Documents Uniques de Transport' : 'Transport documents'}
{pending.map(b => (
{b.id}
{isFr ? 'Émis le' : 'Issued'} {b.issued} · {b.officer}
{isFr ? 'À régler' : 'Due'}
{b.from} → {b.to}
{b.goods}
{isFr ? 'À régler avant' : 'Due'}
{b.due}
{fmtGNF(b.amount)}
onViewDut?.(b)} style={{
...ghostBtn(), flex: 1, justifyContent: 'center', padding: '11px',
}}>
{isFr ? 'Voir le DUT' : 'View bill'}
onOpenBill(b)} style={{
flex: 1, background: '#161413', color: '#FCD116',
border: 'none', padding: '11px', fontFamily: 'inherit', fontWeight: 700, fontSize: 13,
cursor: 'pointer', borderRadius: 2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
}}>
{isFr ? 'Régler le DUT' : 'Pay bill'}
))}
{/* Bill recap */}
{isFr ? 'Total' : 'Total'}
{fmtGNF(bill.amount)}
{bill.from} → {bill.to}
{bill.goods}
{isFr ? 'Redevance kilométrique' : 'Distance fee'} {fmtGNF(fee)}
{isFr ? 'Timbre fiscal' : 'Stamp duty'} {fmtGNF(stamp)}
{isFr ? 'Quote-part DNTT' : 'DNTT share'} {fmtGNF(stat)}
{/* Method picker */}
{isFr ? 'Méthode de paiement' : 'Payment method'}
{[
{ id: 'orange', label: 'Orange Money', sub: '+224 622 04 18 77', accent: '#FF6600' },
{ id: 'mtn', label: 'MTN MoMo', sub: '+224 660 12 88 21', accent: '#FFCC00' },
{ id: 'cash', label: isFr ? 'Espèces (au bureau DNTT)' : 'Cash (at DNTT office)', sub: isFr ? 'Bureau Coyah · 8h-17h' : 'Coyah office · 8a-5p', accent: '#9A9281' },
].map(m => {
const active = method === m.id;
return (
setMethod(m.id)} style={{
display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
background: active ? '#FBF8F2' : '#fff',
border: active ? '2px solid #161413' : '1px solid #E5DDC9',
cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', borderRadius: 2,
}}>
{m.label.split(' ').map(s => s[0]).slice(0, 2).join('')}
);
})}
{/* Submit */}
{paymentState === 'idle' && (
{method === 'cash'
? (isFr ? 'Réserver le paiement en espèces' : 'Reserve cash payment')
: <> {isFr ? `Envoyer demande · ${fmtGNF(bill.amount)}` : `Send request · ${fmtGNF(bill.amount)}`}}
)}
{paymentState === 'sent' && (
{isFr ? 'Confirmez sur votre téléphone…' : 'Confirm on your phone…'}
{isFr ? 'Composez #144# si rien ne s\'affiche' : 'Dial #144# if nothing appears'}
)}
{paymentState === 'success' && (
{isFr ? 'Paiement reçu' : 'Payment received'}
)}
{isFr ? 'DUT acquitté' : 'STD paid'}
{/* Paid stamp */}
{isFr ? 'PAYÉ' : 'PAID'}
République de Guinée — DNTT
Document Unique de Transport
{bill.id}
{isFr ? 'Montant payé' : 'Amount paid'}
{fmtGNF(bill.amount)}
{isFr ? 'Scannez ce QR pour vérifier l\'authenticité du DUT auprès des services DNTT.' : 'Scan to verify authenticity with DNTT services.'}
{isFr ? 'Télécharger PDF' : 'Download PDF'}
{isFr ? 'Partager' : 'Share'}
);
};
// ─────────────────────────────────────────────────────────────
// DUT view (pre-payment) — same chrome as company DUT page
// ─────────────────────────────────────────────────────────────
const IndividualDutView = ({ lang, bill, onBack, onPay }) => {
const isFr = lang !== 'en';
return (
{isFr ? 'Document prêt' : 'Document ready'} · {bill.id}
{isFr ? 'Document Unique de Transport' : 'Unique Transport Document'}
{isFr ? 'Régler le DUT' : 'Pay bill'}
{isFr ? 'Imprimer' : 'Print'}
{isFr ? 'Télécharger' : 'Download'} {isFr ? 'Annuler' : 'Cancel'}
République de Guinée — DNTT
Document Unique de Transport
{bill.id}
{isFr ? 'Montant à régler' : 'Amount due'}
{fmtGNF(bill.amount)}
{isFr ? 'Scannez ce QR pour vérifier l\'authenticité du DUT auprès des services DNTT.' : 'Scan to verify authenticity with DNTT services.'}
);
};
// ─────────────────────────────────────────────────────────────
// Import bill view — full-page invoice (same chrome as DUT page)
// ─────────────────────────────────────────────────────────────
const IndividualImportView = ({ lang, bill, onBack, onPay }) => {
const isFr = lang !== 'en';
return (
{isFr ? 'Document prêt' : 'Document ready'} · {bill.id}
{isFr ? 'Avis de Taxation · Importation Véhicule' : 'Vehicle Import Tax Notice'}
{bill.status === 'pending' && (
{isFr ? 'Régler la taxe' : 'Pay tax'}
)}
{isFr ? 'Imprimer' : 'Print'}
{isFr ? 'Télécharger' : 'Download'} {isFr ? 'Annuler' : 'Cancel'}
);
};
// ─────────────────────────────────────────────────────────────
// Account
// ─────────────────────────────────────────────────────────────
const IndividualAccount = ({ lang, onBack }) => {
const isFr = lang !== 'en';
return (
{INDIVIDUAL.name.split(' ').map(s => s[0]).join('')}
{INDIVIDUAL.name}
{isFr ? 'Transporteur indépendant' : 'Independent carrier'} · {INDIVIDUAL.city}
{isFr ? 'Personne physique' : 'Individual'}
{[
{ label: 'CNI', value: INDIVIDUAL.cni, mono: true },
{ label: isFr ? 'Téléphone' : 'Phone', value: INDIVIDUAL.phone },
{ label: isFr ? 'Localité' : 'City', value: INDIVIDUAL.city },
{ label: isFr ? 'Inscrit depuis' : 'Member since', value: INDIVIDUAL.since },
{ label: isFr ? 'DUT à vie' : 'Lifetime DUTs', value: INDIVIDUAL.trips.toString() },
].map((row, i) => (
{row.label}
{row.value}
))}
{isFr ? 'Mon véhicule' : 'My vehicle'}
RG
{INDIVIDUAL.vehicle.plate}
{INDIVIDUAL.vehicle.brand}
{INDIVIDUAL.vehicle.type} · {INDIVIDUAL.vehicle.capacity}
{isFr ? 'Se déconnecter' : 'Sign out'}
);
};
Object.assign(window, { SoberIndividualApp, INDIVIDUAL, INDIVIDUAL_BILLS });