// ─────────────────────────────────────────────────────────────
// MODERN · Civic Direction
// Larger type, softer shapes, an emerald primary against off-white,
// red used as a sharp accent for actions, yellow for status.
// ─────────────────────────────────────────────────────────────
const ModernApp = ({ lang = 'fr', density = 'comfortable', userState = 'active', initialScreen = 'dashboard', initialStep = 0, initialPaid = false, initialPaymentState = 'idle' }) => {
const [screen, setScreen] = React.useState(initialScreen);
const [step, setStep] = React.useState(initialStep);
const [paid, setPaid] = React.useState(initialPaid);
const [paymentMethod, setPaymentMethod] = React.useState('orange');
const [paymentState, setPaymentState] = React.useState(initialPaymentState);
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, stat = 8000;
const total = baseFee + stamp + stat;
return (
{screen === 'dashboard' && (
{ setScreen('form'); setStep(0); setPaid(false); setPaymentState('idle'); }}
onOpenDut={() => setScreen('pdf')} userState={userState} />
)}
{screen === 'form' && (
setScreen('payment')} onCancel={() => setScreen('dashboard')} />
)}
{screen === 'payment' && (
{ setPaid(true); setScreen('pdf'); }}
onBack={() => setScreen('form')} />
)}
{screen === 'pdf' && (
setScreen('dashboard')} />
)}
);
};
// ─────────────────────────────────────────────────────────────
// Sidebar
// ─────────────────────────────────────────────────────────────
const ModernSidebar = ({ screen, setScreen, setStep, setPaid, setPaymentState, lang }) => {
const Item = ({ id, icon, label, badge }) => {
const active = screen === id || (id === 'form' && screen === 'payment') || (id === 'history' && screen === 'pdf');
return (
);
};
return (
);
};
// ─────────────────────────────────────────────────────────────
// Top bar
// ─────────────────────────────────────────────────────────────
const ModernTopBar = ({ lang }) => (
);
// ─────────────────────────────────────────────────────────────
// Dashboard
// ─────────────────────────────────────────────────────────────
const ModernDashboard = ({ onNew, onOpenDut, userState }) => {
const overdue = userState === 'overdue';
return (
{/* Hero */}
Avril 2026 · Espace transporteur
Bienvenue, Mamadou.
38 DUT émis ce mois — vous êtes en règle.
{overdue && (
Paiement en retard — DUT-2026-04-08698
372 000 GNF · invalidé sous 48 h sans régularisation.
)}
{/* KPI cards */}
{/* Recent + activity */}
Documents récents
{['Tous', 'Payés', 'En attente'].map((c, i) => (
{c}
))}
{RECENT_DUTS.map((d, i) => (
{d.id}
{d.from} {d.to} · {d.goods}
{d.date}
{fmtGNF(d.amount)}
))}
{/* Mini chart */}
Activité — 14 derniers jours
Volume DUT · GNF
{/* Right column */}
Notifications
{ALERTS.map((a, i) => (
))}
Astuce
Pré-remplissez vos DUT avec un itinéraire-modèle
Gagnez 4 minutes par document en sauvegardant Kamsar → Conakry comme trajet récurrent.
{data.map((v, i) => {
const isYesterday = i === data.length - 1;
return (
);
})}
15 avr.22 avr.28 avr.
);
};
// ─────────────────────────────────────────────────────────────
// Form (modern variant)
// ─────────────────────────────────────────────────────────────
const ModernForm = ({ form, setForm, step, setStep, goods, distance, total, baseFee, stamp, stat, onSubmit, onCancel }) => {
const STEPS = ['Itinéraire', 'Marchandise', 'Véhicule', 'Récapitulatif'];
const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
const pct = ((step + 1) / STEPS.length) * 100;
return (
Nouveau Document Unique
Étape {step + 1} sur {STEPS.length} · {STEPS[step]}
{/* Progress + stepper */}
{STEPS.map((s, i) => {
const done = i < step, active = i === step;
return (
- i < step && setStep(i)} style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 12,
background: active ? '#0F1A14' : done ? '#E2F1E7' : '#fff',
color: active ? '#fff' : done ? '#1F4F2C' : '#9AA89E',
cursor: i < step ? 'pointer' : 'default',
border: '1px solid', borderColor: active ? '#0F1A14' : done ? '#CDE3D5' : '#E4ECE4' }}>
{done ? : i + 1}
{s}
);
})}
{step === 0 && }
{step === 1 && }
{step === 2 && }
{step === 3 && }
{step < STEPS.length - 1 ? (
) : (
)}
);
};
const MStepRoute = ({ form, set, distance }) => (
<>
set('fromCity', v)} options={GUINEA_CITIES}/>
set('toCity', v)} options={GUINEA_CITIES}/>
set('departure', v)}/>
set('arrival', v)}/>
{/* Map illustration */}
);
const MStepGoods = ({ form, set }) => (
<>
{GOODS.map((g) => {
const sel = form.goods === g.code;
return (
);
})}
Glisser-déposer ou cliquer pour choisir
PDF · JPG · PNG — max 8 Mo
);
const MStepVehicle = ({ form, set }) => (
<>
{VEHICLES.slice(0, 4).map((v) => {
const sel = form.vehicle === v.plate;
return (
);
})}
{[
{ label: 'Visite technique', detail: 'Valide → 14 / 09 / 2026' },
{ label: 'Assurance SUNU', detail: 'Police 2026-0218' },
{ label: 'Carte transporteur', detail: 'Active → 07 / 06 / 2026' },
].map((c) => (
))}
Vérifiez ci-dessous. Une fois soumis, le DUT n'est plus modifiable — seule une annulation motivée auprès du DNTT est possible.
);
// ─────────────────────────────────────────────────────────────
// Payment (modern)
// ─────────────────────────────────────────────────────────────
const ModernPayment = ({ total, method, setMethod, paymentState, setPaymentState, onDone, onBack }) => {
React.useEffect(() => {
if (paymentState === 'sent') {
const t1 = setTimeout(() => setPaymentState('success'), 1800);
const t2 = setTimeout(() => onDone(), 2800);
return () => { clearTimeout(t1); clearTimeout(t2); };
}
}, [paymentState]);
const methods = [
{ id: 'orange', label: 'Orange Money', sub: 'Mobile Money · GN', tag: 'OM', bg: '#FF6E0E', emoji: '🟠' },
{ id: 'mtn', label: 'MTN MoMo', sub: 'Mobile Money · GN', tag: 'MTN', bg: '#FFCC00', emoji: '🟡' },
{ id: 'card', label: 'Carte bancaire', sub: 'Visa · Mastercard · GIM-UEMOA', tag: 'CB', bg: '#1A1F71', emoji: '💳' },
{ id: 'bank', label: 'Virement', sub: 'BICIGUI · Ecobank · UBA · Vista', tag: 'IBAN', bg: '#0F1A14', emoji: '🏦' },
];
return (
Paiement sécurisé
Traité par KKiaPay · TLS 1.3 · PCI-DSS
Choisissez un moyen de paiement
{methods.map((m) => {
const sel = method === m.id;
return (
);
})}
Vous recevrez une demande de validation USSD — composez *144# pour confirmer.
)}
{method === 'card' && (
)}
Aucune donnée bancaire stockée
);
};
// ─────────────────────────────────────────────────────────────
// PDF preview (modern shell)
// ─────────────────────────────────────────────────────────────
const ModernPdfPreview = ({ form, goods, distance, total, baseFee, stamp, stat, paid, onClose }) => (
Votre DUT est prêt {paid && · payé ✓}
DUT-2026-04-08821 · émis 28 / 04 / 2026
{/* Faux PDF inside soft modern frame */}
{paid &&
PAYÉ
}
République de Guinée — Travail · Justice · Solidarité
Ministère des Transports · DGTT · DNTT
RÉFÉRENCE
DUT-2026-04-08821
DOCUMENT UNIQUE DE TRANSPORT
Arrêté n° 2025/MTI/DNTT du 14 janvier 2026
Liquidation
Total {paid ? 'réglé' : 'à régler'}{fmtGNF(total)}
Le transporteur
M.S. Diallo
);
// ─────────────────────────────────────────────────────────────
// Reusable
// ─────────────────────────────────────────────────────────────
const MField = ({ label, icon, children }) => (
);
const MFieldRow = ({ children }) => (
{children}
);
const MInput = (p) => (
p.onChange?.(e.target.value)} style={{
width: '100%', padding: '12px 14px', border: '1.5px solid #E4ECE4', background: '#fff',
borderRadius: 12, fontFamily: 'inherit', fontSize: 14, color: '#0F1A14', outline: 'none',
boxSizing: 'border-box',
}}/>
);
const MSelect = ({ value, onChange, options }) => (
);
const MSumRow = ({ label, v }) => (
{label}
{v}
);
const ModernKpi = ({ label, big, suffix, hint, delta, tone }) => {
const bg = tone === 'green' ? '#E2F1E7' : tone === 'yellow' ? '#FFF6D6' : '#fff';
const fg = tone === 'green' ? '#1F4F2C' : tone === 'yellow' ? '#73591F' : '#0F1A14';
return (
{label}
{big} {suffix && {suffix}}
{delta && {delta}}
{hint}
);
};
const ModernPill = ({ status }) => {
const m = {
paid: { bg: '#E2F1E7', fg: '#1F4F2C', label: 'Payé' },
pending: { bg: '#FFF6D6', fg: '#73591F', label: 'En attente' },
expired: { bg: '#FFE7EA', fg: '#8A1B1B', label: 'Expiré' },
}[status];
return {m.label};
};
const MReviewBlock = ({ title, items }) => (
{title}
{items.map(([k, v]) => (
{k}
{v}
))}
);
const PdfMini = ({ title, rows }) => (
{title}
{rows.map(([k, v]) => (
{k}
{v}
))}
);
const PdfRow2 = ({ k, v }) => (
{k}{v}
);
// styles
const modernCard = () => ({
background: '#fff', border: '1px solid #E4ECE4', borderRadius: 20, padding: 22,
});
const modernPrimaryBtn = (size) => ({
display: 'inline-flex', alignItems: 'center', gap: 8,
padding: size === 'big' ? '12px 22px' : '10px 18px',
background: '#009460', color: '#fff', border: 'none',
borderRadius: size === 'big' ? 14 : 12, cursor: 'pointer', fontFamily: 'inherit',
fontSize: size === 'big' ? 14 : 13, fontWeight: 600,
boxShadow: '0 1px 0 rgba(0,0,0,.04), 0 6px 18px rgba(0,148,96,.18)',
});
const modernGhostBtn = () => ({
display: 'inline-flex', alignItems: 'center', gap: 6, padding: '10px 16px', background: '#fff',
border: '1.5px solid #E4ECE4', color: '#0F1A14', borderRadius: 12, cursor: 'pointer',
fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
});
Object.assign(window, { ModernApp });