{onBurger && }

{crumbs.map((c, i) => ( {i > 0 && /} i < crumbs.length - 1 && onCrumb && onCrumb(c)}> {c.label} ))}

⌕ ⌘K

{setTheme && (

{appOpen && ( <>

setAppOpen(false)} style={{position:"fixed", inset:0, zIndex:60}}/>

Thème

{[["dark","Sombre"],["light","Clair"]].map(([k,l])=>( ))}

Couleur de l'agence

{ACCENTS.map(([c,name])=>( ))}

Personnalisez le tableau de bord aux couleurs de votre agence.

)}

)} {onOpenLima && }

); } function CashflowChart({ data, mode = "line" }) { const W = 800, H = 220, pad = { l: 44, r: 14, t: 16, b: 26 }; const innerW = W - pad.l - pad.r, innerH = H - pad.t - pad.b; const max = Math.max(...data.map(d => Math.max(d.collected, d.expected))); const min = Math.min(...data.map(d => Math.min(d.collected, d.expected))) * 0.92; const range = max - min; const x = i => pad.l + (i / (data.length - 1)) * innerW; const y = v => pad.t + innerH - ((v - min) / range) * innerH; const xBand = i => pad.l + (i + 0.5) * (innerW / data.length); const ticks = 4; const gridVals = Array.from({ length: ticks + 1 }, (_, i) => min + (range * i) / ticks); const linePath = "M " + data.map((d, i) => `${x(i)} ${y(d.collected)}`).join(" L "); const areaPath = linePath + ` L ${x(data.length - 1)} ${pad.t + innerH} L ${x(0)} ${pad.t + innerH} Z`; const expPath = "M " + data.map((d, i) => `${x(i)} ${y(d.expected)}`).join(" L "); return ( ); } // Mini sparkline for KPIs function Spark({ values, color = "var(--d-ink-4)", w = 60, h = 20 }) { const max = Math.max(...values), min = Math.min(...values), range = max - min || 1; const pts = values.map((v, i) => `${(i / (values.length - 1)) * w},${h - ((v - min) / range) * h}`).join(" "); return ( ); } function KPIs() { return (

Encaissé · avrilSur 12,69 M attendus

11 730 000FCFA

▲ 4,2%vs mars

Taux de recouvrement

92,4%

—18 quittances émises

ImpayésAction requise

960 000FCFA

▲ 2 dossiers3 locataires · 42 j max

Occupation

47/ 52 lots

▲ 1,4 pt94,2%

); } Object.assign(window, { Sidebar, Topbar, CashflowChart, KPIs, Spark }); /* ╚══ end shell.jsx ══╝ */ /* ╔══ pages.jsx ══╗ */ /* global React, MOCK, fmtFCFA, KPIs, CashflowChart */ function StatusChip({ status }) { const map = { "à jour": ["pos", "à jour"], "en retard": ["warn", "en retard"], "impayé": ["neg", "impayé"], "encaissé": ["pos", "encaissé"], "en attente": ["warn", "en attente"], "émis": ["info", "émis"], }; const [cls, label] = map[status] || ["neutral", status]; return {label}; } function Overview({ onOpenTenant, chartMode, setChartMode }) { const [range, setRange] = React.useState("12M"); const [showNewQ, setShowNewQ] = React.useState(false); const [showGenQ, setShowGenQ] = React.useState(false); const [showBulkRelance, setShowBulkRelance] = React.useState(false); const overdueCount = (typeof OVERDUE !== "undefined") ? OVERDUE.length : 0; const data = range === "3M" ? MOCK.cashflow.slice(-3) : range === "6M" ? MOCK.cashflow.slice(-6) : MOCK.cashflow; return (

Tableau de bord

Mercredi 18 avril · Clôture avril dans 12 jours

Flux de trésorerie

Encaissé vs attendu

{["line","area","bar"].map(m => ( ))}

{["3M","6M","12M"].map(r => ( ))}

Encaissé Attendu Total · 138,8 M FCFA

À traiter

4 éléments

{MOCK.alerts.map(a => (

{a.title}

{a.meta}

))}

Transactions récentes

12 opérations · rapprochées automatiquement

{MOCK.transactions.map(tx => ( { const t = MOCK.tenants.find(tt => tt.name.split(" ")[0] === tx.tenant.split(" ")[0]); t && onOpenTenant(t); }}> ))}

Date	ID	Locataire	Bien	Méthode	Montant	Statut
{tx.date}	{tx.id}	{tx.tenant === "—" ? — : tx.tenant}	{tx.property}	{tx.method === "—" ? — : tx.method}	{fmtFCFA(tx.amount)}

{showNewQ && typeof NewQuittanceModal !== "undefined" && ( setShowNewQ(false)} onSave={(payload)=>{ upsertQuittance(payload); setShowNewQ(false); }}/> )} {showGenQ && typeof BatchGenerationModal !== "undefined" && ( setShowGenQ(false)}/> )} {showBulkRelance && typeof BulkRelanceModal !== "undefined" && ( setShowBulkRelance(false)} onConfirm={({channel})=>{ OVERDUE.forEach(o => recordRelance(o.id, channel, "29 mai")); setShowBulkRelance(false); }} /> )}

); } function PropertiesList({ onOpenProperty }) { const properties = useProperties(); const [q, setQ] = React.useState(""); const [filter, setFilter] = React.useState("all"); const [modal, setModal] = React.useState(null); const filtered = properties.filter(p => { if (q && !`${p.name} ${p.address} ${p.owner}`.toLowerCase().includes(q.toLowerCase())) return false; if (filter === "vacancy" && p.occupied === p.units) return false; if (filter === "full" && p.occupied !== p.units) return false; return true; }); return (

Biens immobiliers

{properties.length} biens · {properties.reduce((s,p)=>s+p.units,0)} lots · {new Set(properties.map(p=>p.owner)).size} propriétaires

⌕ setQ(e.target.value)} placeholder="Rechercher…"/>

{[["all","Tous",properties.length],["vacancy","Avec vacance",properties.filter(p=>p.occupied!==p.units).length],["full","Complets",properties.filter(p=>p.occupied===p.units).length]].map(([k,l,n])=>( ))}

{filtered.map(p => ( onOpenProperty(p)}> ))}

ID	Bien	Type	Propriétaire	Occupation	Loyer mensuel
{p.id}	{p.name} {p.address}	{p.type}	{p.owner}	{p.occupied}/{p.units}	{fmtFCFA(p.mrr)}

setModal(null)} onSave={(payload)=>{ upsertProperty(payload); setModal(null); onOpenProperty(payload); }} />

); } function TenantsList({ onOpenTenant }) { const tenants = useTenants(); const [tab, setTab] = React.useState("all"); const [modal, setModal] = React.useState(null); const filtered = tenants.filter(t => tab === "late" ? t.daysLate > 0 : tab === "ok" ? t.daysLate === 0 : true); return (

Locataires

{tenants.length} actifs · {tenants.filter(t=>t.balance>0).length} en situation d'impayé

{[["all","Tous",tenants.length],["ok","À jour",tenants.filter(t=>t.daysLate===0).length],["late","En retard",tenants.filter(t=>t.daysLate>0).length]].map(([k,l,n])=>( ))}

{filtered.map(t => ( onOpenTenant(t)}> ))}

ID	Locataire	Bien · lot	Loyer	Bail	Statut	Solde
{t.id}	{t.avatar} {t.name} {t.phone}	{t.property} · {t.unit}	{fmtFCFA(t.rent)}	{t.leaseStart} → {t.leaseEnd}		0 ? " highlight-neg" : "")}>{t.balance > 0 ? fmtFCFA(t.balance) : "—"}

setModal(null)} onSave={(payload)=>{ upsertTenant(payload); setModal(null); }} />

); } function PropertyDetail({ property, onBack, onOpenTenant }) { useProperties(); // subscribe to store updates const p = getPropertyById(property.id) || property; const [editing, setEditing] = React.useState(false); const relTenants = MOCK.tenants.filter(t => t.propertyId === p.id); const occ = Math.round((p.occupied / p.units) * 100); return (

{p.id}

BIEN · {p.type.toUpperCase()}

{p.name}

{p.address} Propriétaire : {p.owner} Bail-type : Résidentiel · OHADA

Lots

{p.occupied}/{p.units}

Occupation

{occ}%

Loyer / mois

{(p.mrr/1000000).toFixed(2).replace(".",",")} M

Locataires en place

{relTenants.length} baux actifs

{relTenants.length === 0 && } {relTenants.map(t => ( onOpenTenant(t)}> ))}

Lot	Locataire	Loyer	Bail	Statut
Aucun locataire en place.
{t.unit}	{t.avatar} {t.name}	{fmtFCFA(t.rent)}	{t.leaseStart} → {t.leaseEnd}

Encaissements · 6 mois

Taux de recouvrement mensuel

{["Novembre 25","Décembre 25","Janvier 26","Février 26","Mars 26","Avril 26"].map((m, i) => { const exp = p.mrr, col = i === 5 ? p.mrr - 220_000 : i === 2 ? p.mrr : p.mrr - (i%2 === 0 ? 0 : 110_000); const ec = col - exp, rate = exp > 0 ? Math.round((col/exp)*100) : 0; return ( ); })}

Mois	Attendu	Encaissé	Écart	Taux
{m}	{fmtFCFA(exp)}	{fmtFCFA(col)}	{ec === 0 ? "—" : fmtFCFA(ec)}	{rate}%

Informations

Référence

{p.id}

Type

{p.type}

Adresse

{p.address}

Propriétaire

{p.owner}

Nombre de lots

{p.units}

Titre foncier

TF n° 14 228 / DK

Commission & versement

Commission agence

8,0%

Loyer brut / mois

{fmtFCFA(p.mrr)}

Commission

{fmtFCFA(Math.round(p.mrr*0.08))}

Net propriétaire

{fmtFCFA(Math.round(p.mrr*0.92))}

Prochain versement

30 avr 2026

setEditing(false)} onSave={(payload)=>{ upsertProperty(payload); setEditing(false); }} />

); } function TenantDetail({ tenant, onBack, onOpenProperty }) { useTenants(); // subscribe to store updates const t = getTenantById(tenant.id) || tenant; const [editing, setEditing] = React.useState(false); const property = MOCK.properties.find(p => p.id === t.propertyId); const months = ["Mai 25","Juin 25","Juil 25","Août 25","Sept 25","Oct 25","Nov 25","Déc 25","Jan 26","Fév 26","Mars 26","Avr 26"]; const history = months.map((m, i) => { let status = "encaissé", method = ["Wave","Orange Money","Virement"][i%3], paidOn = `${(i%28)+1} ${m.split(" ")[0].toLowerCase()}`; if (t.status === "impayé" && i >= 10) { status = "impayé"; method = "—"; paidOn = "—"; } if (t.status === "en retard" && i === 11) { status = "en retard"; method = "—"; paidOn = "—"; } return { month: m, status, method, paidOn, amount: t.rent }; }).reverse(); return (

{t.id}

{t.avatar}

LOCATAIRE · {t.id}

{t.name}

{t.phone}{t.email} Loue {t.property} · lot {t.unit}

{t.balance > 0 && }

Loyer mensuel

{t.rent.toLocaleString("fr-FR")}FCFA

Inchangé depuis bail

Statut

{t.daysLate > 0 ? `Retard ${t.daysLate} j` : "À jour"}

0 ? " alert" : "")}>

Solde{t.balance > 0 && Exigible}

0 ? "var(--orange)" : "var(--d-ink)"}}>{t.balance > 0 ? t.balance.toLocaleString("fr-FR") : "0"}FCFA

{t.balance > 0 ? "À recouvrer" : "Rien à encaisser"}

Ancienneté

24mois

Depuis {t.leaseStart}

Historique de paiements

12 mois · synchronisés avec rapprochement bancaire

{history.map((r,i) => ( ))}

Mois	Payé le	Méthode	Montant	Statut
{r.month}	{r.paidOn}	{r.method === "—" ? — : r.method}	{fmtFCFA(r.amount)}

Contrat de bail

Référence

BX-{t.id.replace("T-","")}

Type

Résidentiel · OHADA

Début

{t.leaseStart}

Échéance

{t.leaseEnd}

Dépôt garantie

{fmtFCFA(t.rent*2)}

Bien loué

{property && }

Bien

{t.property}

Lot

{t.unit}

{property &&

Adresse

{property.address}

} {property &&

Propriétaire

{property.owner}

}

setEditing(false)} onSave={(payload)=>{ upsertTenant(payload); setEditing(false); }} />

); } function PlaceholderPage({ title, subtitle }) { return (

{title}

{subtitle}

Section en cours

Ce prototype démontre : Tableau de bord, Biens, Locataires. Les autres sections font partie du produit complet.

); } Object.assign(window, { Overview, PropertiesList, TenantsList, PropertyDetail, TenantDetail, PlaceholderPage, StatusChip }); /* ╚══ end pages.jsx ══╝ */ /* ╔══ pages-finance.jsx ══╗ */ /* global React, MOCK, fmtFCFA, fmtCompact, StatusChip, Spark */ /* ───────────────────────────────────────────────────────── PAIEMENTS — full payments page ───────────────────────────────────────────────────────── */ function PaymentsPage({ onOpenTenant }) { const [tab, setTab] = React.useState("all"); const [channel, setChannel] = React.useState("all"); const [period, setPeriod] = React.useState("avr"); const [q, setQ] = React.useState(""); const [showCashModal, setShowCashModal] = React.useState(false); // Build an extended payments list from MOCK transactions, scoped to rent payments const allTx = MOCK.transactions .filter(tx => tx.kind === "loyer") .map(tx => ({ ...tx, due: tx.date.replace("16 avr", "05 avr").replace("14 avr", "05 avr") || "05 avr", })); const filtered = allTx.filter(tx => { if (tab === "encaisse" && tx.status !== "encaissé") return false; if (tab === "attente" && tx.status !== "en attente") return false; if (tab === "retard" && tx.status !== "en retard" && tx.status !== "impayé") return false; if (channel !== "all" && !tx.method.toLowerCase().includes(channel)) return false; if (q && !`${tx.tenant} ${tx.property} ${tx.id}`.toLowerCase().includes(q.toLowerCase())) return false; return true; }); // Totals per status (current filtered set is "tab=all" view) const totalEnc = allTx.filter(t => t.status === "encaissé").reduce((s, t) => s + t.amount, 0); const totalAtt = allTx.filter(t => t.status === "en attente").reduce((s, t) => s + t.amount, 0); const totalRet = allTx.filter(t => t.status === "en retard" || t.status === "impayé").reduce((s, t) => s + t.amount, 0); const countEnc = allTx.filter(t => t.status === "encaissé").length; const countAtt = allTx.filter(t => t.status === "en attente").length; const countRet = allTx.filter(t => t.status === "en retard" || t.status === "impayé").length; // Breakdown by channel const byChannel = { "Espèces": 350_000, "Wave": allTx.filter(t => t.method === "Wave").reduce((s, t) => s + t.amount, 0), "Orange Money": allTx.filter(t => t.method === "Orange Money").reduce((s, t) => s + t.amount, 0), "Virement": allTx.filter(t => t.method === "Virement").reduce((s, t) => s + t.amount, 0), }; const channelTotal = Object.values(byChannel).reduce((s, v) => s + v, 0); return (

Paiements

Avril 2026 · {countEnc + countAtt + countRet} quittances suivies · rapprochement en temps réel

{/* KPIs */}

Encaissé · avril

{(totalEnc/1_000_000).toFixed(2).replace(".",",")}M FCFA

▲ 4,2%{countEnc} paiements · 4 canaux

En attente

{fmtCompact(totalAtt)}FCFA

—{countAtt} {countAtt > 1 ? "quittances émises" : "quittance émise"}

En retard / impayésAction requise

{fmtCompact(totalRet)}FCFA

▲ {countRet} dossiers42 j max

Quittances émises

18avril

▲ 1 vs mars15 réglées · 3 en cours

{/* Main: list */}

Tous les paiements

Triés du plus récent au plus ancien

{[["all","Tous",countEnc+countAtt+countRet],["encaisse","Encaissés",countEnc],["attente","En attente",countAtt],["retard","En retard",countRet]].map(([k,l,n])=>( ))}

⌕ setQ(e.target.value)} placeholder="Locataire, bien, ID…"/>

{[["all","Tous"],["espèces","Espèces"],["wave","Wave"],["orange","OM"],["virement","Virement"]].map(([k,l])=>( ))}

{[["mar","Mars"],["avr","Avril"],["q2","T2"]].map(([k,l])=>( ))}

{filtered.length === 0 && ( )} {filtered.map(tx => { const t = MOCK.tenants.find(tt => tx.tenant.startsWith(tt.name.split(" ")[0]) || tt.name.includes(tx.tenant.split(" ").slice(-1)[0])); return ( t && onOpenTenant(t)}> ); })}

Date	ID	Locataire	Bien · lot	Canal	Montant	Statut
Aucun paiement ne correspond à ces filtres.
{tx.date}	{tx.id}	{tx.tenant}	{tx.property}	{tx.method === "—" ? — : }	{fmtFCFA(tx.amount)}		{(tx.status === "en retard" \|\| tx.status === "impayé") ? ( ) : tx.status === "en attente" ? ( ) : —}

{/* Side: breakdown */}

Répartition par canal

Avril · {(channelTotal/1_000_000).toFixed(2).replace(".",",")} M FCFA

{Object.entries(byChannel).map(([name, amt]) => { const pct = channelTotal ? Math.round((amt/channelTotal)*100) : 0; const color = name === "Espèces" ? "#8E97A6" : name === "Wave" ? "#1DC3F8" : name === "Orange Money" ? "#FF7A00" : "#0056A6"; return (

{name} {fmtFCFA(amt)}

{pct}%

); })}

Relances à envoyer

3 locataires · WhatsApp

{MOCK.tenants.filter(t => t.balance > 0).map(t => (

onOpenTenant(t)} style={{display:"flex", alignItems:"center", gap:12, padding:"12px 18px", borderBottom:"1px solid var(--d-line-2)", cursor:"pointer"}}>

{t.avatar}

{t.name}

{t.property} · {t.daysLate} j retard

{fmtCompact(t.balance)}

))}

Activité du rapprochement

Dernières 24 h

{[ {tag:"WAVE", txt:"42 paiements rapprochés automatiquement", time:"il y a 12 min", c:"#1DC3F8"}, {tag:"OM", txt:"18 paiements rapprochés", time:"il y a 1 h", c:"#FF7A00"}, {tag:"ESP", txt:"3 paiements espèces saisis · A. Sall, F. Kane, P. Diop", time:"il y a 3 h", c:"var(--d-ink-4)"}, {tag:"VIR", txt:"2 virements bancaires importés (CSV)", time:"hier", c:"#0056A6"}, ].map((r, i) => (

{r.tag}

{r.txt}

{r.time}

))}

{showCashModal && setShowCashModal(false)}/>}

); } function MethodBadge({ m }) { const config = { "Wave": { c:"#001B2E", bg:"#1DC3F8", l:"Wave" }, "Orange Money": { c:"#fff", bg:"#FF7A00", l:"OM" }, "Virement": { c:"#fff", bg:"#0056A6", l:"Virement" }, "Espèces": { c:"var(--d-ink-2)", bg:"var(--d-elev)", l:"Espèces", border:"var(--d-line)" }, }; const cfg = config[m] || { c:"var(--d-ink-2)", bg:"var(--d-elev)", l:m }; return ( {cfg.l} ); } function CashPaymentModal({ onClose }) { const [tenantId, setTenantId] = React.useState(""); const [amount, setAmount] = React.useState(""); const [date, setDate] = React.useState("18/04/2026"); const [note, setNote] = React.useState(""); return (

e.stopPropagation()} style={{ background:"var(--d-panel)", border:"1px solid var(--d-line)", borderRadius:10, width:480, color:"var(--d-ink)", fontFamily:"var(--font-sans)" }}>

Saisir un paiement

Espèces ou virement reçu hors plateforme

setAmount(e.target.value)} placeholder="240 000" style={modalInput}/> setDate(e.target.value)} style={modalInput}/>

{["Espèces","Wave","Orange Money","Virement"].map(m => ( ))}

setNote(e.target.value)} placeholder="Reçu n° 0042" style={modalInput}/>

); } function ModalField({ label, children }) { return (

{label}

{children}

); } const modalInput = { width:"100%", padding:"8px 12px", borderRadius:5, border:"1px solid var(--d-line)", background:"var(--d-sunken)", color:"var(--d-ink)", fontSize:13, fontFamily:"var(--font-sans)", outline:"none", }; /* ───────────────────────────────────────────────────────── TRÉSORERIE — cashflow page ───────────────────────────────────────────────────────── */ function CashflowPage() { const [view, setView] = React.useState("month"); // Account balances (canal-level) const accounts = [ { id:"acc-cbao", name:"Compte CBAO · 0048 217 33", type:"Banque", balance: 18_420_000, delta:+2_180_000, last:"18 avr · synchronisé" }, { id:"acc-wave", name:"Wave Business · BA Immo", type:"Mobile Money", balance: 4_140_000, delta:+790_000, last:"18 avr · auto" }, { id:"acc-om", name:"Orange Money · Pro", type:"Mobile Money", balance: 2_810_000, delta:+550_000, last:"18 avr · auto" }, { id:"acc-esp", name:"Caisse espèces · siège", type:"Espèces", balance: 980_000, delta:-220_000, last:"17 avr · saisie" }, ]; const totalBalance = accounts.reduce((s, a) => s + a.balance, 0); // Cashflow chart-ish data const months = MOCK.cashflow; const collected = months[months.length-1].collected; const outflow = 8_960_000; // monthly disbursements (versements) const net = collected - outflow; // Ledger movements const ledger = [ { d:"18 avr", lib:"Loyer · M. Ndiaye · Rés. Teranga A-203", canal:"Wave", debit:0, credit:240_000, solde:26_350_000 }, { d:"18 avr", lib:"Loyer · N. F. Thiam · Rés. Ngor 3", canal:"Orange Money", debit:0, credit:290_000, solde:26_110_000 }, { d:"17 avr", lib:"Loyer · Awa Sall · Villa Mermoz 14", canal:"Virement", debit:0, credit:850_000, solde:25_820_000 }, { d:"17 avr", lib:"Loyer · A. Sall · Rés. Plateau B-04", canal:"Espèces", debit:0, credit:350_000, solde:24_970_000 }, { d:"17 avr", lib:"Loyer · P. M. Diop · Rés. Ouakam A-301", canal:"Wave", debit:0, credit:260_000, solde:24_620_000 }, { d:"16 avr", lib:"Loyer · Omar Sy · Rés. Teranga A-104", canal:"Orange Money", debit:0, credit:240_000, solde:24_360_000 }, { d:"15 avr", lib:"Loyer · F. B. Kane · Rés. Ngor 2", canal:"Wave", debit:0, credit:310_000, solde:24_120_000 }, { d:"14 avr", lib:"Loyer · A. B. Cissé · Imm. Point E B-202", canal:"Virement", debit:0, credit:260_000, solde:23_810_000 }, { d:"12 avr", lib:"Versement propriétaire · M. A. Ba", canal:"Virement", debit:1_840_000, credit:0, solde:23_550_000 }, { d:"12 avr", lib:"Commission agence · avril partiel", canal:"Interne", debit:160_000, credit:0, solde:25_390_000 }, { d:"10 avr", lib:"Versement propriétaire · Horizon SCI", canal:"Virement", debit:3_120_000, credit:0, solde:25_550_000 }, { d:"08 avr", lib:"Charges courantes · Rés. Teranga", canal:"Virement", debit:285_000, credit:0, solde:28_670_000 }, ]; return (

Trésorerie

Solde consolidé · {fmtFCFA(totalBalance)} · 4 comptes synchronisés

{/* KPIs */}

Solde consolidé4 comptes

{(totalBalance/1_000_000).toFixed(2).replace(".",",")}M FCFA

▲ 3,3 Mvs début avril

m.collected)} color="#6192FF"/>

Encaissements · avril

+{fmtCompact(collected)}FCFA

▲ 4,2%15 paiements · 4 canaux

Versements émis

−{fmtCompact(outflow)}FCFA

—6 propriétaires

Net du mois

= 0 ? "var(--pos-d)" : "var(--orange)"}}>{net >= 0 ? "+" : "−"}{fmtCompact(Math.abs(net))}FCFA

Commission + marge

{/* Chart + accounts side by side */}

Flux de trésorerie

Entrées vs sorties · 12 derniers mois

{[["month","Mensuel"],["week","Hebdo"],["day","Journalier"]].map(([k,l])=>( ))}

Entrées Sorties Net Net cumulé · {fmtFCFA(33_440_000)}

Soldes par compte

Synchronisés en temps réel

{accounts.map(a => { const colorMap = { "Banque":"#0056A6", "Mobile Money": a.name.includes("Wave") ? "#1DC3F8" : "#FF7A00", "Espèces":"var(--d-ink-3)" }; const c = colorMap[a.type]; return (

{a.type === "Banque" ? "BNK" : a.name.includes("Wave") ? "WV" : a.type === "Espèces" ? "ESP" : "OM"}

{a.name}

{a.type} · {a.last}

{fmtFCFA(a.balance)}

= 0 ? "var(--pos-d)" : "var(--orange)"}}> {a.delta >= 0 ? "▲ +" : "▼ −"}{fmtCompact(Math.abs(a.delta))}

); })}

Total consolidé {fmtFCFA(totalBalance)}

{/* Ledger */}

Grand livre

Mouvements de trésorerie · 12 dernières opérations

{["Tous","Entrées","Sorties"].map(l=>( ))}

{ledger.map((r, i) => ( ))}

Date	Libellé	Canal	Débit	Crédit	Solde
{r.d}	{r.lib}	{r.canal === "Interne" ? {r.canal} : }	0 ? " highlight-neg" : "")}>{r.debit > 0 ? fmtFCFA(r.debit) : —}	0 ? "var(--pos-d)" : undefined}}>{r.credit > 0 ? fmtFCFA(r.credit) : —}	{fmtFCFA(r.solde)}

12 opérations affichées · 348 sur le mois

{/* Recon + upcoming */}

Rapprochement bancaire

Dernier import · 18 avr 11:42

À jour

{[ { src:"Wave Business · BA Immo", total:42, ok:42, ko:0, c:"#1DC3F8" }, { src:"Orange Money · Pro", total:18, ok:18, ko:0, c:"#FF7A00" }, { src:"CBAO · 0048 217 33", total:24, ok:23, ko:1, c:"#0056A6" }, { src:"Caisse espèces · siège", total:6, ok:6, ko:0, c:"var(--d-ink-3)" }, ].map((r, i) => (

{r.src}

{r.total} opérations · {r.ok} rapprochées

{r.ko > 0 ? {r.ko} écart : ✓ aucun écart}

))}

Versements à venir

Échéance · 30 avril 2026

{[ { o:"Horizon SCI", b:4_230_000, c:338_400 }, { o:"M. Abdoulaye Ba", b:2_640_000, c:211_200 }, { o:"Katos Consulting", b:3_800_000, c:304_000 }, { o:"Mme Aïssatou Ba", b:850_000, c:68_000 }, { o:"Mme Fatou Diop", b:1_150_000, c:92_000 }, ].map(r => ( ))}

Propriétaire	Brut	Commission	Net à verser
{r.o}	{fmtFCFA(r.b)}	−{fmtFCFA(r.c)}	{fmtFCFA(r.b - r.c)}

); } /* Cashflow chart: bars (in/out) + net line */ function CashflowBarsNet({ data }) { const W = 800, H = 240, pad = { l:50, r:14, t:16, b:30 }; const innerW = W - pad.l - pad.r, innerH = H - pad.t - pad.b; // Synthesize outflow per month (~75-80% of collected) const enriched = data.map((d, i) => { const out = Math.round(d.collected * (0.74 + (i%3)*0.02)); return { ...d, out, net: d.collected - out }; }); const max = Math.max(...enriched.map(d => Math.max(d.collected, d.out))); const min = 0; const range = max - min; const x = i => pad.l + (i + 0.5) * (innerW / enriched.length); const y = v => pad.t + innerH - ((v - min) / range) * innerH; const ticks = 4; const gridVals = Array.from({ length: ticks + 1 }, (_, i) => min + (range * i) / ticks); const bw = (innerW / enriched.length) * 0.32; const netMax = Math.max(...enriched.map(d => d.net)); const yNet = v => pad.t + innerH - ((v) / netMax) * innerH * 0.8; const netPath = "M " + enriched.map((d, i) => `${x(i)} ${yNet(d.net)}`).join(" L "); return ( ); } Object.assign(window, { PaymentsPage, CashflowPage }); /* ╚══ end pages-finance.jsx ══╝ */ /* ╔══ pages-reports.jsx ══╗ */ /* global React, MOCK, fmtFCFA, fmtCompact, Spark */ /* ───────────────────────────────────────────────────────── RAPPORTS — reports catalog + preview + history ───────────────────────────────────────────────────────── */ const REPORT_CATALOG = [ { cat: "Pilotage", color: "var(--blue-d)", items: [ { id: "r-dash-monthly", name: "Tableau de bord mensuel", desc: "Synthèse encaissements, vacance, impayés", freq: "Mensuel", last: "01 avr · Auto", featured: true }, { id: "r-perf-bien", name: "Performance par bien", desc: "Rendement, occupation, recouvrement par bien", freq: "Mensuel", last: "03 avr" }, { id: "r-vacance", name: "Vacance locative", desc: "Lots vacants, durée moyenne, manque à gagner", freq: "À la demande", last: "11 avr" }, { id: "r-synthese", name: "Synthèse de gestion", desc: "Vue agence consolidée · 12 derniers mois", freq: "Mensuel", last: "01 avr · Auto" }, ], }, { cat: "Analytique comptable", color: "var(--pos-d)", items: [ { id: "r-balance", name: "Balance des locataires", desc: "Soldes ouverts, retards, échéances", freq: "À la demande", last: "17 avr" }, { id: "r-rendement", name: "Rendement par bien", desc: "Top et bottom biens · 12 mois", freq: "Trimestriel", last: "31 mars" }, { id: "r-cashflow", name: "Cash-flow consolidé", desc: "Encaissements vs sorties · réconciliation bancaire", freq: "Mensuel", last: "01 avr" }, ], }, { cat: "Fiscal & légal", color: "#C99550", items: [ { id: "r-tva", name: "Récapitulatif TVA", desc: "TVA collectée et déductible · OHADA", freq: "Trimestriel", last: "31 mars" }, { id: "r-attest", name: "Attestation fiscale propriétaire", desc: "Revenus locatifs annuels par propriétaire", freq: "Annuel", last: "31 jan 2026" }, { id: "r-ohada", name: "État conforme OHADA", desc: "États financiers selon référentiel SYSCOHADA", freq: "Annuel", last: "—" }, ], }, { cat: "Propriétaires", color: "var(--orange)", items: [ { id: "r-etat-loc", name: "État locatif annuel", desc: "Récap complet pour déclaration de revenus", freq: "Annuel", last: "—" }, { id: "r-lettre", name: "Lettre d'information propriétaire", desc: "Travaux, sinistres, renouvellements à venir", freq: "Trimestriel", last: "31 mars" }, ], }, ]; const RECENT_REPORTS = [ { id: "RPT-04223", name: "Performance par bien · Mars 2026", type: "Pilotage", period: "Mars 2026", size: "248 Ko", format: "PDF", date: "03 avr · 14:22", by: "S. Ndoye", status: "exporté" }, { id: "RPT-04212", name: "Vacance locative · T1 2026", type: "Pilotage", period: "T1 2026", size: "112 Ko", format: "PDF", date: "11 avr · 09:14", by: "S. Ndoye", status: "exporté" }, { id: "RPT-04207", name: "Balance des locataires", type: "Comptabilité", period: "Avril 2026 (en cours)", size: "92 Ko", format: "XLSX", date: "17 avr · 16:42", by: "S. Ndoye", status: "généré" }, { id: "RPT-04201", name: "Synthèse de gestion · Mars 2026", type: "Pilotage", period: "Mars 2026", size: "1,2 Mo", format: "PDF", date: "01 avr · Auto", by: "Système", status: "archivé" }, { id: "RPT-04198", name: "Cash-flow consolidé · Mars 2026", type: "Comptabilité", period: "Mars 2026", size: "148 Ko", format: "XLSX", date: "01 avr · Auto", by: "Système", status: "archivé" }, { id: "RPT-04167", name: "Récapitulatif TVA · T1 2026", type: "Fiscal", period: "Janv–Mars 2026", size: "112 Ko", format: "PDF", date: "31 mars · 17:08", by: "S. Ndoye", status: "exporté" }, { id: "RPT-04088", name: "Attestations fiscales 2025 · 6 propriétaires", type: "Fiscal", period: "Année 2025", size: "892 Ko", format: "PDF", date: "31 jan · 11:40", by: "S. Ndoye", status: "envoyé" }, ]; const SCHEDULED_REPORTS = [ { id: "S-01", name: "Comptes de gérance · tous propriétaires", next: "01 mai · 09:00", freq: "Le 1er de chaque mois", count: 6, channel: "Email" }, { id: "S-02", name: "Synthèse de gestion mensuelle", next: "01 mai · 06:00", freq: "Le 1er de chaque mois", count: 1, channel: "Email + Drive" }, { id: "S-03", name: "Récapitulatif TVA T2", next: "30 juin · 18:00", freq: "Trimestriel", count: 1, channel: "Téléchargement" }, ]; function ReportsPage({ onRoute }) { const [selectedReport, setSelectedReport] = React.useState("r-synthese"); const [period, setPeriod] = React.useState("avr-26"); const [tab, setTab] = React.useState("catalog"); return (

Rapports

{REPORT_CATALOG.reduce((s,g)=>s+g.items.length,0)} modèles · {RECENT_REPORTS.length} rapports générés ce mois · 3 envois planifiés

{/* KPIs */}

Rapports ce mois

12exports

▲ 3vs mars · analytique + fiscal

Modèles disponibles

{REPORT_CATALOG.reduce((s,g)=>s+g.items.length,0)}templates

4 catégories · dont 3 fiscaux

Envois planifiés

3actifs

—Prochain · 01 mai 06:00

Échéance fiscale

30 juin2026

TVA T2 · à préparer

{/* Tabs : catalogue | aperçu | historique */}

{tab === "catalog" && ( )} {tab === "catalog" && (

{/* Main: catalog */}

{REPORT_CATALOG.map(group => (

{group.cat}

{group.items.length} modèles

{group.items.map((r, i) => { const isLastRow = i >= group.items.length - 2; const isOdd = i % 2 === 1; const isSelected = selectedReport === r.id; return (

setSelectedReport(r.id)} style={{ padding:"14px 16px", borderBottom: !isLastRow ? "1px solid var(--d-line-2)" : "none", borderRight: !isOdd ? "1px solid var(--d-line-2)" : "none", cursor:"pointer", background: isSelected ? "var(--d-elev)" : "transparent", position:"relative", }} > {isSelected && }

{r.name} {r.featured && POPULAIRE}

{r.desc}

{r.freq} · Dernier : {r.last}

); })}

))}

{/* Side: preview of the selected report */}

Astuces

Optimiser vos rapports

{[ { t:"Planifier l'envoi automatique", d:"Le 1er du mois, les comptes de gérance partent par email aux propriétaires sans intervention." }, { t:"Modèle par propriétaire", d:"Personnalisez l'en-tête, le pied de page et le récapitulatif TVA pour chaque propriétaire." }, { t:"Exporter en lot", d:"Téléchargez tous les bordereaux du mois dans un seul .zip prêt à archiver." }, ].map((tip, i) => (

{i+1}

{tip.t}

{tip.d}

))}

)} {tab === "recent" && } {tab === "scheduled" && }

); } /* ───────────────────────────────────────────────────────── PREVIEW — Compte de gérance, etc. ───────────────────────────────────────────────────────── */ function ReportPreview({ reportId, period, setPeriod }) { const catalog = REPORT_CATALOG.flatMap(g => g.items.map(i => ({...i, cat: g.cat, color: g.color}))); const report = catalog.find(r => r.id === reportId) || catalog[0]; return (

Aperçu · {report.name}

{report.cat} · {report.freq}

{[["avr-26","Avril"],["mar-26","Mars"],["t1-26","T1 2026"]].map(([k,l])=>( ))}

{report.name}

{report.desc}

Contenu

{report.id === "r-perf-bien" && } {report.id === "r-vacance" && } {report.id === "r-synthese" && } {report.id === "r-dash-monthly" && } {report.id === "r-balance" && } {report.id === "r-rendement" && } {report.id === "r-cashflow" && } {report.id === "r-tva" && } {report.id === "r-attest" && } {report.id === "r-ohada" && } {report.id === "r-etat-loc" && } {report.id === "r-lettre" && }

); } function PreviewList({ items }) { return (

{it}

); } /* ───────────────────────────────────────────────────────── OPERATIONS CROSS-LINKS Cards that point to the operational sections (CRG, Quittances, Versements, Paiements) — Rapports stays focused on analytics. ───────────────────────────────────────────────────────── */ function OperationsCrossLinks({ onRoute }) { const ops = [ { route:"crg", name:"CRG · Comptes rendus de gestion", desc:"Document mensuel par bailleur · 6 documents en avril", c:"var(--pos-d)" }, { route:"invoices", name:"Quittances", desc:"18 émises en avril · réglées et en attente", c:"var(--blue-d)" }, { route:"disbursements", name:"Versements propriétaires", desc:"6 virements à émettre · échéance 30 avril", c:"#3FB583" }, { route:"payments", name:"Paiements & encaissements", desc:"Journal en temps réel · Wave, OM, virements", c:"var(--orange)" }, ]; return (

Documents opérationnels

Ces documents sont gérés dans leurs sections dédiées — Rapports concentre l'analytique et le fiscal.

{ops.map((o, i) => ( ))}

); } /* ───────────────────────────────────────────────────────── HISTORIQUE ───────────────────────────────────────────────────────── */ function RecentReportsPanel() { const [q, setQ] = React.useState(""); const [typeFilter, setTypeFilter] = React.useState("all"); const filtered = RECENT_REPORTS.filter(r => { if (typeFilter !== "all" && r.type.toLowerCase() !== typeFilter) return false; if (q && !`${r.name} ${r.id} ${r.period}`.toLowerCase().includes(q.toLowerCase())) return false; return true; }); return (

Historique des rapports générés

{filtered.length} rapports · archivés 90 jours

⌕ setQ(e.target.value)} placeholder="Nom, ID, période…"/>

{[["all","Tous",RECENT_REPORTS.length],["pilotage","Pilotage",RECENT_REPORTS.filter(r=>r.type==="Pilotage").length],["comptabilité","Comptabilité",RECENT_REPORTS.filter(r=>r.type==="Comptabilité").length],["fiscal","Fiscal",RECENT_REPORTS.filter(r=>r.type==="Fiscal").length],["propriétaires","Propriétaires",RECENT_REPORTS.filter(r=>r.type==="Propriétaires").length]].map(([k,l,n])=>( ))}

{filtered.length === 0 && ( )} {filtered.map(r => ( ))}

Réf.	Rapport	Type	Période	Format	Taille	Généré	Statut
Aucun rapport ne correspond.
{r.id}	{r.name}	{r.type}	{r.period}	{r.format}	{r.size}	{r.date} · {r.by}	{r.status}

); } /* ───────────────────────────────────────────────────────── ENVOIS PLANIFIÉS ───────────────────────────────────────────────────────── */ function ScheduledReportsPanel() { return (

Envois planifiés

{SCHEDULED_REPORTS.length} automatisations actives

{SCHEDULED_REPORTS.map(s => (

{s.name}

{s.freq} · {s.count} {s.count > 1 ? "destinataires" : "destinataire"} · canal {s.channel}

Prochain envoi

{s.next}

Actif

))}

Calendrier · 30 jours

Aperçu des envois à venir

{[ { d:"01 mai · 06:00", n:"Synthèse de gestion mensuelle", c:"var(--blue-d)" }, { d:"01 mai · 09:00", n:"Comptes de gérance · 6 propriétaires", c:"var(--pos-d)" }, { d:"02 mai · 08:00", n:"Bordereaux propriétaires · email", c:"var(--orange)" }, { d:"15 mai · 17:00", n:"Rapport vacance locative", c:"var(--blue-d)" }, ].map((e, i) => (

{e.n}

{e.d}

))}

Bonnes pratiques

Recommandations agence

{[ { t:"Envoyer les comptes de gérance avant le 5", d:"Les propriétaires apprécient la régularité du jour d'envoi." }, { t:"Joindre les justificatifs", d:"Joindre PDF des quittances et reçus pour la transparence." }, ].map((p, i) => (

{p.t}

{p.d}

))}

); } Object.assign(window, { ReportsPage }); /* ╚══ end pages-reports.jsx ══╝ */ /* ╔══ pages-quittances.jsx ══╗ */ /* global React, MOCK, fmtFCFA, fmtCompact, Spark, StatusChip */ /* ───────────────────────────────────────────────────────── QUITTANCES — receipts page ───────────────────────────────────────────────────────── */ const QUITTANCES = [ { id: "Q-2026-04-018", tenant: "Mariama Ndiaye", tenantId:"T-2041", property: "Rés. Teranga · A-203", amount: 240_000, method:"Wave", period:"Avril 2026", issued:"01 avr", paid:"18 avr", status:"réglée" }, { id: "Q-2026-04-017", tenant: "N. F. Thiam", tenantId:"T-2118", property: "Rés. Ngor · 3", amount: 290_000, method:"Orange Money", period:"Avril 2026", issued:"01 avr", paid:"18 avr", status:"réglée" }, { id: "Q-2026-04-016", tenant: "Awa Sall", tenantId:"T-2063", property: "Villa Mermoz 14", amount: 850_000, method:"Virement", period:"Avril 2026", issued:"01 avr", paid:"17 avr", status:"réglée" }, { id: "Q-2026-04-015", tenant: "P. M. Diop", tenantId:"T-2124", property: "Rés. Ouakam · A-301",amount: 260_000, method:"Wave", period:"Avril 2026", issued:"01 avr", paid:"17 avr", status:"réglée" }, { id: "Q-2026-04-014", tenant: "Bineta Diouf", tenantId:"T-2102", property: "Rés. Plateau · 5", amount: 225_000, method:"—", period:"Avril 2026", issued:"01 avr", paid:"—", status:"en attente" }, { id: "Q-2026-04-013", tenant: "Omar Sy", tenantId:"T-2094", property: "Rés. Teranga · A-104",amount: 240_000, method:"Orange Money", period:"Avril 2026", issued:"01 avr", paid:"16 avr", status:"réglée" }, { id: "Q-2026-04-012", tenant: "F. B. Kane", tenantId:"T-2089", property: "Rés. Ngor · 2", amount: 310_000, method:"Wave", period:"Avril 2026", issued:"01 avr", paid:"15 avr", status:"réglée" }, { id: "Q-2026-04-011", tenant: "Cheikh T. Diagne", tenantId:"T-2058", property: "Imm. Point E · B-101",amount: 280_000, method:"—", period:"Avril 2026", issued:"01 avr", paid:"—", status:"en retard" }, { id: "Q-2026-04-010", tenant: "Moussa Fall", tenantId:"T-2077", property: "Rés. Teranga · C-304",amount: 220_000, method:"—", period:"Avril 2026", issued:"01 avr", paid:"—", status:"impayée" }, { id: "Q-2026-04-009", tenant: "A. B. Cissé", tenantId:"T-2110", property: "Imm. Point E · B-202",amount: 260_000, method:"Virement", period:"Avril 2026", issued:"01 avr", paid:"14 avr", status:"réglée" }, { id: "Q-2026-03-024", tenant: "Mariama Ndiaye", tenantId:"T-2041", property: "Rés. Teranga · A-203",amount: 240_000, method:"Wave", period:"Mars 2026", issued:"01 mars", paid:"06 mars", status:"réglée" }, { id: "Q-2026-03-023", tenant: "N. F. Thiam", tenantId:"T-2118", property: "Rés. Ngor · 3", amount: 290_000, method:"Orange Money", period:"Mars 2026", issued:"01 mars", paid:"04 mars", status:"réglée" }, { id: "Q-2026-03-022", tenant: "Moussa Fall", tenantId:"T-2077", property: "Rés. Teranga · C-304",amount: 220_000, method:"—", period:"Mars 2026", issued:"01 mars", paid:"—", status:"impayée" }, { id: "Q-2026-03-021", tenant: "Awa Sall", tenantId:"T-2063", property: "Villa Mermoz 14", amount: 850_000, method:"Virement", period:"Mars 2026", issued:"01 mars", paid:"03 mars", status:"réglée" }, { id: "Q-2026-03-020", tenant: "—", tenantId:null, property: "Rés. Teranga · B-201",amount: 240_000, method:"—", period:"Mars 2026", issued:"01 mars", paid:"—", status:"annulée" }, { id: "Q-2026-03-019", tenant: "Bineta Diouf", tenantId:"T-2102", property: "Rés. Plateau · 5", amount: 225_000, method:"Wave", period:"Mars 2026", issued:"01 mars", paid:"12 mars", status:"réglée" }, { id: "Q-2026-03-018", tenant: "Omar Sy", tenantId:"T-2094", property: "Rés. Teranga · A-104",amount: 240_000, method:"Orange Money", period:"Mars 2026", issued:"01 mars", paid:"08 mars", status:"réglée" }, { id: "Q-2026-03-017", tenant: "P. M. Diop", tenantId:"T-2124", property: "Rés. Ouakam · A-301",amount: 260_000, method:"Wave", period:"Mars 2026", issued:"01 mars", paid:"05 mars", status:"réglée" }, ]; /* ─── Quittances store + helpers ─── */ const Q_MONTHS_FULL = ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"]; const Q_MONTHS_SHORT = ["janv","févr","mars","avr","mai","juin","juil","août","sept","oct","nov","déc"]; function qMonthShort(full) { const i = Q_MONTHS_FULL.indexOf(full.split(" ")[0]); return i>=0 ? Q_MONTHS_SHORT[i] : full; } function qPeriodKey(period) { const [m,y] = period.split(" "); const i = Q_MONTHS_FULL.indexOf(m); return `${y}-${String(i+1).padStart(2,"0")}`; } function nextQuittanceId(period) { const key = qPeriodKey(period); const prefix = `Q-${key}-`; const max = QUITTANCES.reduce((m,q)=> q.id.startsWith(prefix) ? Math.max(m, parseInt(q.id.slice(prefix.length),10)||0) : m, 0); return prefix + String(max+1).padStart(3,"0"); } const _qListeners = new Set(); function _notifyQ(){ _qListeners.forEach(f=>f()); } function upsertQuittance(q){ const i = QUITTANCES.findIndex(x=>x.id===q.id); if (i>=0) QUITTANCES[i] = {...QUITTANCES[i], ...q}; else QUITTANCES.unshift(q); _notifyQ(); } function useQuittances(){ const [,tick] = React.useReducer(x=>x+1,0); React.useEffect(()=>{ _qListeners.add(tick); return ()=>_qListeners.delete(tick); },[]); return QUITTANCES; } function QuittancesPage({ onOpenTenant }) { useQuittances(); // re-render when a quittance is created const [tab, setTab] = React.useState("avr"); const [statusFilter, setStatusFilter] = React.useState("all"); const [q, setQ] = React.useState(""); const [selectedId, setSelectedId] = React.useState("Q-2026-04-018"); const [showBatch, setShowBatch] = React.useState(false); const [showNew, setShowNew] = React.useState(false); const [relanceTarget, setRelanceTarget] = React.useState(null); const [markTarget, setMarkTarget] = React.useState(null); const filtered = QUITTANCES.filter(r => { if (tab === "avr" && !r.period.includes("Avril")) return false; if (tab === "mar" && !r.period.includes("Mars")) return false; if (statusFilter !== "all" && r.status !== statusFilter) return false; if (q && !`${r.tenant} ${r.property} ${r.id}`.toLowerCase().includes(q.toLowerCase())) return false; return true; }); const selected = QUITTANCES.find(r => r.id === selectedId) || filtered[0]; // Month-scoped totals (avril) const avr = QUITTANCES.filter(r => r.period.includes("Avril")); const emisAvr = avr.length; const reglAvr = avr.filter(r => r.status === "réglée").length; const totEmis = avr.reduce((s, r) => s + r.amount, 0); const totReg = avr.filter(r => r.status === "réglée").reduce((s, r) => s + r.amount, 0); const totAtt = avr.filter(r => r.status === "en attente" || r.status === "en retard" || r.status === "impayée").reduce((s, r) => s + r.amount, 0); return (

Quittances

{emisAvr} quittances émises en avril · prochaine génération auto le 01 mai 06:00

{/* KPIs */}

Émises · avril

{emisAvr}quittances

▲ 1 vs mars{(totEmis/1_000_000).toFixed(2).replace(".",",")} M FCFA · 8 propriétaires

Réglées

{reglAvr}/ {emisAvr}

{Math.round((reglAvr/emisAvr)*100)}%{(totReg/1_000_000).toFixed(2).replace(".",",")} M FCFA encaissés

En attente / impayéesSuivre

{emisAvr-reglAvr}quittances

{fmtCompact(totAtt)}FCFA à recouvrer

Délai moyen règlement

8,4jours

▼ 1,2 jvs mars · cible 10 j

{/* Period tabs */}

{[["avr","Avril 2026", QUITTANCES.filter(r=>r.period.includes("Avril")).length],["mar","Mars 2026", QUITTANCES.filter(r=>r.period.includes("Mars")).length],["all","Toutes", QUITTANCES.length]].map(([k,l,n])=>( ))}

{/* Main: table */}

⌕ setQ(e.target.value)} placeholder="Locataire, bien, ID…"/>

{[ ["all","Toutes",filtered.length+QUITTANCES.filter(r=> (tab==="avr"&&r.period.includes("Avril"))||(tab==="mar"&&r.period.includes("Mars"))||tab==="all").length-filtered.length], ["réglée","Réglées",QUITTANCES.filter(r=>r.status==="réglée"&&((tab==="avr"&&r.period.includes("Avril"))||(tab==="mar"&&r.period.includes("Mars"))||tab==="all")).length], ["en attente","Attente",QUITTANCES.filter(r=>r.status==="en attente"&&((tab==="avr"&&r.period.includes("Avril"))||(tab==="mar"&&r.period.includes("Mars"))||tab==="all")).length], ["en retard","Retard",QUITTANCES.filter(r=>r.status==="en retard"&&((tab==="avr"&&r.period.includes("Avril"))||(tab==="mar"&&r.period.includes("Mars"))||tab==="all")).length], ["impayée","Impayées",QUITTANCES.filter(r=>r.status==="impayée"&&((tab==="avr"&&r.period.includes("Avril"))||(tab==="mar"&&r.period.includes("Mars"))||tab==="all")).length], ].map(([k,l,n])=>( ))}

{filtered.length === 0 && } {filtered.map(r => ( setSelectedId(r.id)} style={{background: r.id===selectedId? "var(--d-elev)":undefined}}> ))}

Référence	Locataire	Bien · lot	Montant	Émise	Réglée	Statut
Aucune quittance ne correspond.
{r.id}	{r.tenant === "—" ? — : r.tenant}	{r.property}	{fmtFCFA(r.amount)}	{r.issued}	{r.paid === "—" ? — : r.paid}

{/* Side: preview + actions */}

{selected && setRelanceTarget(selected)} onMarkPaid={()=>setMarkTarget(selected)}/>}

{/* Generation log */}

Journal de génération

Dernières opérations · génération auto le 1er du mois

{[ {tag:"AUTO", c:"var(--blue-d)", txt:"18 quittances générées pour avril 2026 · envoi PDF par email", t:"01 avr · 06:00"}, {tag:"BATCH",c:"var(--pos-d)", txt:"Envoi groupé WhatsApp · 12 destinataires · 0 échec", t:"01 avr · 06:14"}, {tag:"MANUEL",c:"var(--d-ink-3)", txt:"Quittance Q-2026-04-018 renvoyée à M. Ndiaye · email", t:"15 avr · 11:42"}, {tag:"ANNUL",c:"var(--orange)", txt:"Q-2026-03-020 annulée · lot libéré entre-temps", t:"02 mars · 10:18"}, ].map((r, i) => (

{r.tag}

{r.txt}

{r.t}

))}

{showBatch && setShowBatch(false)}/>} {showNew && setShowNew(false)} onSave={(payload)=>{ upsertQuittance(payload); setSelectedId(payload.id); setTab("all"); setShowNew(false); }}/>} {markTarget && setMarkTarget(null)} onConfirm={({method, day})=>{ const moisShort = qMonthShort(markTarget.period); upsertQuittance({ ...markTarget, status:"réglée", method, paid:`${String(day).padStart(2,"0")} ${moisShort}` }); if (typeof settleOverdueByTenant !== "undefined" && markTarget.tenantId) settleOverdueByTenant(markTarget.tenantId, markTarget.amount); setMarkTarget(null); }}/>} {relanceTarget && typeof RelanceModal !== "undefined" && ( setRelanceTarget(null)} onSent={()=>setRelanceTarget(null)} /> )}

); } function QuittanceChip({ status }) { const map = { "réglée": ["pos","réglée"], "en attente": ["warn","en attente"], "en retard": ["warn","en retard"], "impayée": ["neg","impayée"], "annulée": ["neutral","annulée"], }; const [cls, label] = map[status] || ["neutral", status]; return {label}; } /* ───────────────────────────────────────────────────────── QUITTANCE PREVIEW (paper-style) ───────────────────────────────────────────────────────── */ function QuittancePreview({ q, onOpenTenant, onRelance, onMarkPaid }) { const tenant = MOCK.tenants.find(t => t.id === q.tenantId); return (

Aperçu · {q.id}

{q.period} · {q.tenant !== "—" ? q.tenant : "—"}

{q.status === "réglée" ? ( ) : q.status === "annulée" ? ( ) : ( <> )}

{/* Paper preview */}

{/* Watermark */} {q.status === "annulée" && (

ANNULÉE

)} {/* Header */}

Quittance de loyer

{q.period}

{q.id}

BA Immo · Dakar

Almadies, Dakar

NINEA 005 482 6 G3

{/* Parties */}

Locataire

{q.tenant}

{tenant &&

{tenant.phone}

} {tenant &&

{tenant.id}

}

Bien loué

{q.property}

{tenant &&

Bail BX-{tenant.id.replace("T-","")} · jusqu'au {tenant.leaseEnd}

}

{/* Body */}

Le soussigné, agissant en qualité d'agence de gestion locative, déclare avoir reçu de {q.tenant !== "—" ? q.tenant : "—"} la somme de {fmtFCFA(q.amount)} au titre du loyer du mois de {q.period.toLowerCase()}{q.status === "réglée" && q.paid !== "—" ? <>, payée le {q.paid} par {q.method} : ", non encore réglée à ce jour"}.

{/* Line items */}

Désignation	Montant
Loyer principal · {q.period}	{q.amount.toLocaleString("fr-FR")}
Charges locatives	0
Total	{q.amount.toLocaleString("fr-FR")} FCFA

{/* Footer */}

Mode de paiement

{q.method === "—" ? "—" : {q.method}}

{q.status === "réglée" && q.paid !== "—" &&

Réglée le {q.paid}

}

Émise par

Souleymane Ndoye

souleymane@ba-immo.sn

{/* Actions row */}

{tenant && }

); } /* ───────────────────────────────────────────────────────── BATCH GENERATION MODAL ───────────────────────────────────────────────────────── */ function BatchGenerationModal({ onClose }) { const [period, setPeriod] = React.useState("mai-26"); const [scope, setScope] = React.useState("tous"); const [autoSend, setAutoSend] = React.useState(true); const periodLabel = { "mai-26":"Mai 2026", "avr-26":"Avril 2026", "custom":"Mai 2026" }[period]; const activeTenants = (MOCK.tenants || []).filter(t => t.id && (t.rent || 0) > 0); const alreadyQ = new Set(QUITTANCES.filter(q => q.period === periodLabel).map(q => q.tenantId)); const eligible = activeTenants.filter(t => !alreadyQ.has(t.id)); const total = eligible.length; const skipped = activeTenants.length - eligible.length; function doGenerate() { const moisShort = qMonthShort(periodLabel); eligible.forEach(t => { upsertQuittance({ id: nextQuittanceId(periodLabel), tenant: t.name, tenantId: t.id, property: `${t.property}${t.unit && t.unit !== "—" ? " · " + t.unit : ""}`, amount: t.rent, charges: 0, method: "—", period: periodLabel, issued: `01 ${moisShort}`, paid: "—", status: "en attente", }); }); onClose(); } return (

e.stopPropagation()} style={{ background:"var(--d-panel)", border:"1px solid var(--d-line)", borderRadius:10, width:520, color:"var(--d-ink)", fontFamily:"var(--font-sans)" }}>

Générer les quittances du mois

Une quittance par bail actif · {periodLabel}

Période

{[["mai-26","Mai 2026"],["avr-26","Avril 2026"],["custom","Personnalisé…"]].map(([k,l])=>( ))}

Périmètre

{[ ["tous","Tous les baux actifs",`${eligible.length} à générer`], ["occupés","Lots occupés uniquement",`${eligible.length} à générer`], ["proprio","Filtrer par propriétaire…","À configurer"], ].map(([k,l,h])=>( setScope(k)} style={{accentColor:"var(--blue-d)"}}/>

{l}

{h}

))}

{skipped > 0 && (

{skipped} bail{skipped>1?"s":""} {skipped>1?"ont":"a"} déjà une quittance pour {periodLabel} — ignoré{skipped>1?"s":""} pour éviter les doublons.

)}

setAutoSend(!autoSend)} style={{accentColor:"var(--blue-d)"}}/>

Envoyer par email + WhatsApp à la génération

Récapitulatif : {total} quittance{total>1?"s":""} · envoi {autoSend ? "automatique" : "manuel"}

); } /* ───────────────────────────────────────────────────────── NEW QUITTANCE MODAL — création manuelle d'une quittance ───────────────────────────────────────────────────────── */ function NewQuittanceModal({ onClose, onSave }) { const tenants = (MOCK.tenants || []).filter(t => t.id); const [tenantId, setTenantId] = React.useState(""); const [period, setPeriod] = React.useState("Mai 2026"); const [rent, setRent] = React.useState(""); const [charges, setCharges] = React.useState(""); const [status, setStatus] = React.useState("en attente"); // en attente | réglée const [method, setMethod] = React.useState("Wave"); const [payDay, setPayDay] = React.useState(""); const [reason, setReason] = React.useState("courante"); const [moveInDay, setMoveInDay] = React.useState(""); const tenant = tenants.find(t => t.id === tenantId); // Auto-fill rent + property when tenant changes React.useEffect(() => { if (tenant) setRent(String(tenant.rent || "")); }, [tenantId]); const fullRent = Number(String(rent).replace(/[^0-9]/g,"")) || 0; const [py, pm] = qPeriodKey(period).split("-").map(Number); const daysInMonth = new Date(py, pm, 0).getDate(); const proRated = (reason === "entree" && moveInDay) ? Math.round(fullRent * (daysInMonth - Number(moveInDay) + 1) / daysInMonth) : fullRent; const rentNum = proRated; const chargesNum = Number(String(charges).replace(/[^0-9]/g,"")) || 0; const total = rentNum + chargesNum; const moisShort = qMonthShort(period); const errors = {}; if (!tenantId) errors.tenant = "Choisissez un locataire"; if (rentNum <= 0) errors.rent = "Montant du loyer requis"; if (status === "réglée" && !payDay) errors.pay = "Date de règlement requise"; if (reason === "entree" && !moveInDay) errors.prorata = "Jour d'entrée requis pour le prorata"; const canSave = Object.keys(errors).length === 0; function handleSave() { if (!canSave) return; const property = tenant ? `${tenant.property}${tenant.unit && tenant.unit !== "—" ? " · "+tenant.unit : ""}` : "—"; const payload = { id: nextQuittanceId(period), tenant: tenant ? tenant.name : "—", tenantId: tenantId, property, amount: total, charges: chargesNum, method: status === "réglée" ? method : "—", period, issued: `01 ${moisShort}`, paid: status === "réglée" ? `${String(payDay).padStart(2,"0")} ${moisShort}` : "—", status, manual: true, reason, }; onSave(payload); } React.useEffect(() => { const onKey = e => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]); return (

e.stopPropagation()} role="dialog" style={{width:"min(880px, 96vw)", maxHeight:"86vh", background:"var(--d-bg)", border:"1px solid var(--d-line)", borderRadius:10, display:"flex", flexDirection:"column", overflow:"hidden", boxShadow:"0 30px 80px -20px rgba(0,0,0,0.6)"}}>

Nouvelle quittance

{tenant ? tenant.name : "Quittance manuelle"} · {period}

{/* Form */}

En temps normal, les quittances sont générées automatiquement en lot au 1er du mois pour tous les baux actifs. N'utilisez la création manuelle que pour une entrée en cours de mois (prorata), une régularisation ou un duplicata. setMoveInDay(e.target.value.replace(/[^0-9]/g,"").slice(0,2))} placeholder="15" suffix={moisShort} style={{fontFamily:"var(--font-mono)", textAlign:"right", maxWidth:160}}/> )} setRent(e.target.value.replace(/[^0-9]/g,""))}/> setCharges(e.target.value.replace(/[^0-9]/g,""))}/> {reason==="entree" && moveInDay && (

Prorata : {fullRent.toLocaleString("fr-FR")} × {daysInMonth - Number(moveInDay) + 1}/{daysInMonth} j = {proRated.toLocaleString("fr-FR")} FCFA

)} {status === "réglée" && ( setPayDay(e.target.value.replace(/[^0-9]/g,"").slice(0,2))} placeholder="18" suffix={moisShort} style={{fontFamily:"var(--font-mono)", textAlign:"right"}}/> )}

{/* Mini live preview */}

Aperçu

Quittance de loyer

{period}

{tenantId ? nextQuittanceId(period) : "Q-…"}

Locataire

{tenant ? tenant.name : "—"}

{tenant ? `${tenant.property}${tenant.unit && tenant.unit!=="—" ? " · "+tenant.unit : ""}` : "—"}

Loyer	{rentNum.toLocaleString("fr-FR")}
Charges	{chargesNum.toLocaleString("fr-FR")}
Total	{total.toLocaleString("fr-FR")}

{status==="réglée" ? `Réglée${payDay ? ` le ${payDay} ${moisShort}` : ""} · ${method}` : "En attente de paiement"}

); } /* ───────────────────────────────────────────────────────── MARK PAID MODAL — enregistre le règlement d'une quittance ───────────────────────────────────────────────────────── */ function MarkPaidModal({ q, onClose, onConfirm }) { const [method, setMethod] = React.useState("Wave"); const [day, setDay] = React.useState("29"); const moisShort = qMonthShort(q.period); React.useEffect(() => { const onKey = e => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]); const valid = !!day; return (

e.stopPropagation()} role="dialog" style={{width:"min(480px, 96vw)", background:"var(--d-bg)", border:"1px solid var(--d-line)", borderRadius:10, overflow:"hidden", boxShadow:"0 30px 80px -20px rgba(0,0,0,0.6)"}}>

Enregistrer le règlement

{q.tenant} · {fmtFCFA(q.amount)}

{q.id}{q.property} · {q.period}

setDay(e.target.value.replace(/[^0-9]/g,"").slice(0,2))} suffix={moisShort} style={{fontFamily:"var(--font-mono)", textAlign:"right"}}/> {q.tenantId && typeof OVERDUE !== "undefined" && OVERDUE.some(o=>o.tenantId===q.tenantId) && (

Ce locataire a un dossier impayé ouvert : il sera automatiquement soldé à l'enregistrement.

)}

); } Object.assign(window, { QuittancesPage, NewQuittanceModal, BatchGenerationModal, MarkPaidModal, upsertQuittance, useQuittances, nextQuittanceId }); /* ╚══ end pages-quittances.jsx ══╝ */ /* ╔══ pages-overdue.jsx ══╗ */ /* global React, MOCK, fmtFCFA, fmtCompact, Spark */ /* ───────────────────────────────────────────────────────── IMPAYÉS — overdue page Aging buckets · workflow de recouvrement · relances ───────────────────────────────────────────────────────── */ // Extended overdue dossiers — go beyond MOCK to make this page rich const OVERDUE = [ // From MOCK { id:"D-1041", tenant:"Cheikh T. Diagne", tenantId:"T-2058", property:"Imm. Point E · B-101", balance: 280_000, monthsOpen: 1, daysLate: 7, level:"L1 · Amiable", lastContact:"15 avr · WhatsApp", nextAction:"Relance écrite", responsible:"S. Ndoye", riskScore: 22 }, { id:"D-1038", tenant:"Bineta Diouf", tenantId:"T-2102", property:"Rés. Plateau · 5", balance: 225_000, monthsOpen: 1, daysLate: 3, level:"L1 · Amiable", lastContact:"16 avr · SMS", nextAction:"Appel téléphonique", responsible:"S. Ndoye", riskScore: 14 }, { id:"D-1027", tenant:"Moussa Fall", tenantId:"T-2077", property:"Rés. Teranga · C-304", balance: 440_000, monthsOpen: 2, daysLate: 42, level:"L2 · Recouvrement", lastContact:"12 avr · Lettre", nextAction:"Mise en demeure", responsible:"A. Diallo", riskScore: 71 }, // Synthetic — give the page more density { id:"D-1019", tenant:"Bocar Sow", tenantId:null, property:"Imm. Fann Hock · 2", balance: 690_000, monthsOpen: 3, daysLate: 78, level:"L3 · Pré-contentieux", lastContact:"02 avr · Huissier", nextAction:"Commandement de payer", responsible:"A. Diallo", riskScore: 88 }, { id:"D-1003", tenant:"Aliou Diop", tenantId:null, property:"Rés. Plateau · 9", balance:1_150_000, monthsOpen: 4, daysLate: 110,level:"L4 · Contentieux", lastContact:"08 avr · Avocat", nextAction:"Audience tribunal", responsible:"Cabinet Sarr", riskScore: 95 }, { id:"D-0994", tenant:"K. M. Sarr", tenantId:null, property:"Imm. Point E · A-204", balance: 195_000, monthsOpen: 1, daysLate: 12, level:"L1 · Amiable", lastContact:"10 avr · WhatsApp", nextAction:"Relance écrite", responsible:"S. Ndoye", riskScore: 28 }, { id:"D-0981", tenant:"Y. C. Mbaye", tenantId:null, property:"Rés. Ouakam · B-102", balance: 520_000, monthsOpen: 2, daysLate: 51, level:"L2 · Recouvrement", lastContact:"06 avr · Lettre R.AR", nextAction:"Mise en demeure", responsible:"A. Diallo", riskScore: 64 }, ]; /* ─── Live activity log (seed + relances émises en session) ─── */ const RELANCE_LOG = [ { tag:"WAVE", c:"#1DC3F8", txt:"Paiement reçu · 280 000 FCFA · M. Diop (D-0987) · dossier soldé", t:"il y a 2 h" }, { tag:"WHATSAPP", c:"#25D366", txt:"Relance amiable envoyée · B. Diouf · J+3", t:"il y a 14 h" }, { tag:"LETTRE", c:"var(--d-ink-3)", txt:"Mise en demeure expédiée · M. Fall · accusé de réception attendu", t:"hier" }, { tag:"HUISSIER", c:"var(--orange)", txt:"Commandement de payer signifié · B. Sow", t:"16 avr" }, { tag:"AUDIENCE", c:"var(--neg-d)", txt:"Audience programmée · A. Diop · 22 avr · TGI Dakar", t:"15 avr" }, ]; const REL_CHANNELS = { whatsapp: { tag:"WHATSAPP", c:"#25D366", label:"WhatsApp", contact:"WhatsApp" }, sms: { tag:"SMS", c:"var(--d-ink-3)", label:"SMS", contact:"SMS" }, email: { tag:"EMAIL", c:"var(--blue-d)", label:"Email", contact:"Email" }, lettre: { tag:"LETTRE", c:"var(--orange)", label:"Lettre R.AR", contact:"Lettre R.AR" }, }; const _ovListeners = new Set(); function _notifyOv(){ _ovListeners.forEach(f=>f()); } function useOverdueStore(){ const [,tick] = React.useReducer(x=>x+1,0); React.useEffect(()=>{ _ovListeners.add(tick); return ()=>_ovListeners.delete(tick); },[]); return OVERDUE; } function recordRelance(dossierId, channelKey, dateLabel) { const ch = REL_CHANNELS[channelKey] || REL_CHANNELS.whatsapp; const d = OVERDUE.find(o => o.id === dossierId); if (d) { d.lastContact = `${dateLabel} · ${ch.contact}`; d.relances = (d.relances || 0) + 1; RELANCE_LOG.unshift({ tag: ch.tag, c: ch.c, txt: `Relance ${ch.label} envoyée · ${d.tenant} · ${d.id}`, t:"à l'instant" }); } _notifyOv(); } /* Solde le dossier impayé d'un locataire (ex. quand sa quittance est payée). */ function settleOverdueByTenant(tenantId, amount) { const i = OVERDUE.findIndex(o => o.tenantId && o.tenantId === tenantId); if (i < 0) { _notifyOv(); return false; } const d = OVERDUE[i]; OVERDUE.splice(i, 1); RELANCE_LOG.unshift({ tag:"WAVE", c:"#1DC3F8", txt:`Paiement reçu · ${fmtFCFA(amount || d.balance)} · ${d.tenant} (${d.id}) · dossier soldé`, t:"à l'instant" }); _notifyOv(); return true; } function OverduePage({ onOpenTenant }) { useOverdueStore(); // re-render when a relance is recorded const [bucket, setBucket] = React.useState("all"); const [levelFilter, setLevelFilter] = React.useState("all"); const [selectedId, setSelectedId] = React.useState(OVERDUE[2].id); // Moussa Fall const [showRelance, setShowRelance] = React.useState(false); const [relanceTarget, setRelanceTarget] = React.useState(null); const [q, setQ] = React.useState(""); // Aging buckets const buckets = [ { k:"1-7", label:"1 à 7 j", min: 1, max: 7, c:"var(--warn-d)" }, { k:"8-30", label:"8 à 30 j", min: 8, max: 30, c:"#F4B240" }, { k:"31-60", label:"31 à 60 j", min: 31, max: 60, c:"#F2933E" }, { k:"61-90", label:"61 à 90 j", min: 61, max: 90, c:"#F2723E" }, { k:"90+", label:"90 j +", min: 91, max: 9999,c:"var(--orange)" }, ]; const counts = buckets.map(b => { const items = OVERDUE.filter(o => o.daysLate >= b.min && o.daysLate <= b.max); return { ...b, count: items.length, total: items.reduce((s,o)=>s+o.balance,0) }; }); const totalAmount = OVERDUE.reduce((s,o)=>s+o.balance,0); const filtered = OVERDUE.filter(o => { if (bucket !== "all") { const b = buckets.find(b => b.k === bucket); if (b && (o.daysLate < b.min || o.daysLate > b.max)) return false; } if (levelFilter !== "all" && !o.level.startsWith(levelFilter)) return false; if (q && !`${o.tenant} ${o.property} ${o.id}`.toLowerCase().includes(q.toLowerCase())) return false; return true; }); const selected = OVERDUE.find(o => o.id === selectedId) || filtered[0] || OVERDUE[0]; // Counters const inProc = OVERDUE.filter(o => o.level.startsWith("L3") || o.level.startsWith("L4")).length; const recoveredM = 1_280_000; // recovered this month return (

Impayés

{OVERDUE.length} dossiers · {fmtCompact(totalAmount)} FCFA à recouvrer · suivi quotidien

{/* KPIs */}

Total impayésAction requise

{(totalAmount/1_000_000).toFixed(2).replace(".",",")}M FCFA

▲ 2 dossiers{OVERDUE.length} locataires · 5 biens

Retard moyen

{Math.round(OVERDUE.reduce((s,o)=>s+o.daysLate,0)/OVERDUE.length)}jours

▲ 4 jvs mars · cible < 25 j

En procédure

{inProc}dossiers

L3 · L41 audience cette semaine

Recouvré · avril

{(recoveredM/1_000_000).toFixed(2).replace(".",",")}M FCFA

▲ 38%vs mars · 4 dossiers soldés

{/* Aging breakdown */}

Échelle d'ancienneté

Répartition des soldes par retard · cliquez pour filtrer

{counts.map((b, i) => { const isActive = bucket === b.k; const pct = totalAmount ? Math.round((b.total/totalAmount)*100) : 0; return (

setBucket(isActive ? "all" : b.k)} style={{ padding:"18px 18px", borderRight: i < 4 ? "1px solid var(--d-line-2)" : "none", cursor:"pointer", background: isActive ? "var(--d-elev)" : "transparent", position:"relative", }} > {isActive && }

{b.label}

{fmtCompact(b.total)}

{b.count} {b.count > 1 ? "dossiers" : "dossier"} · {pct}%

); })}

{/* Left: list */}

⌕ setQ(e.target.value)} placeholder="Locataire, bien, ID…"/>

{[ ["all","Tous",OVERDUE.length], ["L1","Amiable",OVERDUE.filter(o=>o.level.startsWith("L1")).length], ["L2","Recouvrement",OVERDUE.filter(o=>o.level.startsWith("L2")).length], ["L3","Pré-contentieux",OVERDUE.filter(o=>o.level.startsWith("L3")).length], ["L4","Contentieux",OVERDUE.filter(o=>o.level.startsWith("L4")).length], ].map(([k,l,n])=>( ))}

{filtered.length === 0 && } {filtered.map(o => ( setSelectedId(o.id)} style={{background: o.id===selectedId? "var(--d-elev)":undefined}}> ))}

Réf.	Locataire	Bien	Solde	Retard	Niveau
Aucun dossier ne correspond.
{o.id}	{o.tenant}	{o.property}	{fmtFCFA(o.balance)}	60 ? "var(--orange)" : o.daysLate > 30 ? "#F2933E" : "var(--warn-d)", }}>{o.daysLate} j

{/* Right: dossier detail */}

setRelanceTarget(selected)}/>

{/* Templates & activité */}

Modèles de relance

Préparés pour WhatsApp, SMS et email

{[ { name:"Relance amiable J+3", chan:"WhatsApp", desc:"Ton courtois, rappel du montant et lien Wave de paiement", used:42 }, { name:"Relance ferme J+15", chan:"SMS + Email", desc:"Mention des pénalités, demande de régularisation sous 7 jours", used:18 }, { name:"Mise en demeure J+30", chan:"Lettre R.AR", desc:"Format légal · génération automatique du PDF", used:6 }, { name:"Commandement de payer", chan:"Huissier", desc:"Transmission au cabinet partenaire · 24 h", used:2 }, ].map((t, i) => (

{t.name}

{t.desc}

{t.chan}

{t.used} envois

))}

Activité récente

Actions de recouvrement · 7 derniers jours

{RELANCE_LOG.map((r, i) => (

{r.tag}

{r.txt}

{r.t}

))}

{showRelance && setShowRelance(false)} count={filtered.length}/>} {relanceTarget && setRelanceTarget(null)} onSent={({channel})=>{ recordRelance(relanceTarget.id, channel, "29 mai"); setRelanceTarget(null); }} />}

); } /* ───────────────────────────────────────────────────────── COMPONENTS ───────────────────────────────────────────────────────── */ function LevelChip({ level }) { const L = level.startsWith("L1") ? "warn" : level.startsWith("L2") ? "warn" : level.startsWith("L3") ? "neg" : "neg"; return {level}; } function RiskDot({ score }) { const c = score < 30 ? "var(--warn-d)" : score < 60 ? "#F2933E" : score < 85 ? "var(--orange)" : "var(--neg-d)"; return ( {score} ); } function DossierDetail({ dossier, onOpenTenant, onRelance }) { const d = dossier; const tenant = MOCK.tenants.find(t => t.id === d.tenantId); return (

Dossier · {d.id}

{d.tenant} · {d.property}

Solde dû

{fmtFCFA(d.balance)}

{d.monthsOpen} {d.monthsOpen > 1 ? "mois ouverts" : "mois ouvert"}

Retard

60 ? "var(--orange)" : "var(--warn-d)", letterSpacing:"-0.02em"}}>{d.daysLate} j

Score de risque {d.riskScore}/100

Niveau

Dernier contact

{d.lastContact}

Prochaine action

{d.nextAction}

Responsable

{d.responsible}

{tenant &&

Téléphone

{tenant.phone}

} {tenant &&

Locataire

onOpenTenant && onOpenTenant(tenant)}>Ouvrir la fiche →

}

); } function RecoveryWorkflow({ dossier }) { const steps = [ { k:"L1", label:"Amiable", sub:"WhatsApp + SMS · J+3 à J+15" }, { k:"L2", label:"Recouvrement", sub:"Lettre R.AR · J+15 à J+30" }, { k:"L3", label:"Pré-contentieux",sub:"Mise en demeure · J+30 à J+60" }, { k:"L4", label:"Contentieux", sub:"Huissier · audience" }, { k:"L5", label:"Soldé", sub:"Recouvrement total ou abandon" }, ]; const currentLevel = dossier.level.split(" ")[0]; const currentIdx = steps.findIndex(s => s.k === currentLevel); return (

Workflow de recouvrement

Procédure conforme OHADA

{steps.map((s, i) => { const done = i < currentIdx; const active = i === currentIdx; const next = i === currentIdx + 1; const color = done ? "var(--pos-d)" : active ? "var(--orange)" : "var(--d-ink-4)"; return (

{/* Vertical line */} {i < steps.length - 1 && ( )}

{done ? "✓" : i+1}

{s.label} {active && EN COURS} {next && SUIVANT}

{s.sub}

); })}

); } /* ───────────────────────────────────────────────────────── BULK RELANCE MODAL ───────────────────────────────────────────────────────── */ function BulkRelanceModal({ onClose, count, onConfirm }) { const [channel, setChannel] = React.useState("whatsapp"); const [template, setTemplate] = React.useState("amiable"); return (

e.stopPropagation()} style={{ background:"var(--d-panel)", border:"1px solid var(--d-line)", borderRadius:10, width:520, color:"var(--d-ink)", fontFamily:"var(--font-sans)" }}>

Relance groupée

Relancer {count} {count > 1 ? "locataires" : "locataire"} en une opération

Canal

{[["whatsapp","WhatsApp","#25D366"],["sms","SMS","var(--d-ink-3)"],["email","Email","var(--blue-d)"],["lettre","Lettre R.AR","var(--orange)"]].map(([k,l,c])=>( ))}

Modèle

Aperçu

Bonjour {"{{prenom}}"}, nous n'avons pas reçu le règlement de votre loyer de {"{{montant}}"} FCFA pour {"{{periode}}"}. Merci de procéder au paiement avant le {"{{date_limite}}"} via le lien Wave ci-joint. L'équipe BA Immo.

Envoi à {count} destinataires · canal {channel}

); } /* ───────────────────────────────────────────────────────── RELANCE MODAL — relance d'un seul dossier (composer) Réutilisé par la page Impayés et par la page Quittances. ───────────────────────────────────────────────────────── */ const REL_TEMPLATES = { amiable: { label:"Relance amiable", text:(t)=>`Bonjour ${t.prenom}, nous n'avons pas encore reçu le règlement de votre loyer de ${t.montant} FCFA pour ${t.periode}. Merci de régulariser au plus vite via le lien Wave ci-joint. Cordialement, l'équipe BA Immo.` }, ferme: { label:"Relance ferme", text:(t)=>`${t.prenom}, votre loyer de ${t.montant} FCFA (${t.periode}) reste impayé. Merci de procéder au règlement sous 7 jours afin d'éviter des pénalités de retard et une mise en demeure. BA Immo.` }, "mise-demeure": { label:"Mise en demeure", text:(t)=>`MISE EN DEMEURE — ${t.prenom}, vous restez devoir la somme de ${t.montant} FCFA au titre de ${t.periode}. À défaut de règlement sous 8 jours, une procédure de recouvrement sera engagée conformément aux dispositions du COCC. BA Immo.` }, }; function RelanceModal({ target, onClose, onSent }) { const [channel, setChannel] = React.useState("whatsapp"); const [tplKey, setTplKey] = React.useState("amiable"); const prenom = (target.name || "").replace(/^(M\.|Mme|Mlle)\s+/i,"").split(" ")[0] || "Madame, Monsieur"; const ctx = { prenom, montant: (Number(target.amount)||0).toLocaleString("fr-FR"), periode: target.period || "le mois en cours" }; const [message, setMessage] = React.useState(REL_TEMPLATES[tplKey].text(ctx)); React.useEffect(() => { setMessage(REL_TEMPLATES[tplKey].text(ctx)); /* eslint-disable-next-line */ }, [tplKey, target]); React.useEffect(() => { const onKey = e => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]); const tenant = MOCK.tenants.find(t => t.id === target.tenantId); const ch = REL_CHANNELS[channel]; return (

e.stopPropagation()} role="dialog" style={{width:"min(560px, 96vw)", background:"var(--d-bg)", border:"1px solid var(--d-line)", borderRadius:10, overflow:"hidden", boxShadow:"0 30px 80px -20px rgba(0,0,0,0.6)"}}>

Relancer

{target.name} · {fmtFCFA(target.amount)}

{/* Recipient */}

{target.property} {tenant ? tenant.phone : (target.dossierId || target.tenantId || "")}

Canal

{Object.entries(REL_CHANNELS).map(([k,c])=>( ))}

Modèle

{Object.entries(REL_TEMPLATES).map(([k,t])=>( ))}

Message

setMessage(e.target.value)} rows={5} style={{width:"100%", padding:"10px 12px", borderRadius:6, border:"1px solid var(--d-line)", background:"var(--d-sunken)", color:"var(--d-ink)", fontSize:12.5, fontFamily:"var(--font-sans)", lineHeight:1.5, outline:"none", resize:"vertical"}}/>
          {channel === "lettre" && <div style={{fontSize:11, color:"var(--d-ink-4)", marginTop:6}}>Une lettre recommandée avec A.R. sera générée en PDF et archivée au dossier.</div>}
        </div>

<footer style={{padding:"14px 22px", borderTop:"1px solid var(--d-line)", background:"var(--d-panel)", display:"flex", justifyContent:"space-between", alignItems:"center"}}>
          <div style={{fontSize:11.5, color:"var(--d-ink-3)"}}>Envoi par <b style={{color:ch.c}}>{ch.label}</b></div>
          <div style={{display:"flex", gap:8}}>
            <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
            <button className="btn btn-primary" onClick={()=>onSent({ channel, template: tplKey, message })}>
              {channel === "lettre" ? "Générer & envoyer" : "Envoyer la relance"}
            </button>
          </div>
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { OverduePage, RelanceModal, recordRelance, settleOverdueByTenant, useOverdueStore, BulkRelanceModal, OVERDUE });

/* ╚══ end pages-overdue.jsx ══╝ */

/* ╔══ pages-bailleurs.jsx ══╗ */
/* global React, MOCK, fmtFCFA, fmtCompact, Spark, StatusChip */

/* ─────────────────────────────────────────────────────────
   BAILLEURS — propriétaires (landlords / owners)
   ───────────────────────────────────────────────────────── */

// Enriched owner data — derived from MOCK.properties + contact/bank/fiscal info
const BAILLEURS = [
  {
    id: "B-001", name: "M. Abdoulaye Ba", entity: "Particulier", avatar: "AB", color:"#3F7DDB",
    phone: "+221 77 540 12 88", email: "a.ba@gmail.com",
    bank: "CBAO · 0048 217 33 6512", ninea: "—",
    commissionRate: 0.08, contractDate: "2022-03-14",
    notes: "Client historique · entre par recommandation",
  },
  {
    id: "B-002", name: "Mme Aïssatou Ba", entity: "Particulier", avatar: "ÄB", color:"#C9559C",
    phone: "+221 77 421 06 18", email: "aissatou.ba@gmail.com",
    bank: "Wave · 77 421 ••• 18", ninea: "—",
    commissionRate: 0.08, contractDate: "2024-01-10",
    notes: "Préfère le versement par Wave · alertes WhatsApp",
  },
  {
    id: "B-003", name: "Horizon SCI", entity: "Société civile immobilière", avatar: "HS", color:"#3FB583",
    phone: "+221 33 869 14 02", email: "contact@horizon-sci.sn",
    bank: "Ecobank · ••• 8841", ninea: "012 884 4 J5",
    commissionRate: 0.075, contractDate: "2021-09-01",
    notes: "Gestion multi-biens · interlocuteur K. Sarr (DG)",
  },
  {
    id: "B-004", name: "Katos Consulting", entity: "SARL", avatar: "KC", color:"#F2933E",
    phone: "+221 33 821 47 80", email: "finance@katos-consulting.sn",
    bank: "BICIS · ••• 1124", ninea: "008 421 5 K2",
    commissionRate: 0.08, contractDate: "2022-11-22",
    notes: "Bordereau attendu avant le 5 de chaque mois",
  },
  {
    id: "B-005", name: "M. Khadim Fall", entity: "Particulier", avatar: "KF", color:"#9B8AE6",
    phone: "+221 78 119 84 21", email: "k.fall@mail.sn",
    bank: "Orange Money · 78 119 ••• 21", ninea: "—",
    commissionRate: 0.09, contractDate: "2025-02-08",
    notes: "Villa actuellement vacante · recherche locataire",
  },
  {
    id: "B-006", name: "Mme Fatou Diop", entity: "Particulier", avatar: "FD", color:"#E0A74A",
    phone: "+221 77 803 26 14", email: "f.diop@mail.sn",
    bank: "CBAO · ••• 9304", ninea: "—",
    commissionRate: 0.085, contractDate: "2023-04-19",
    notes: "Réside à l'étranger · communication par email",
  },
  {
    id: "B-007", name: "Indivision Wade", entity: "Indivision", avatar: "IW", color:"#7C3AED",
    phone: "+221 77 612 88 04", email: "indivision.wade@mail.sn",
    bank: "CBAO · 0048 217 41 9923", ninea: "—",
    commissionRate: 0.08, contractDate: "2024-09-18",
    notes: "Succession Wade · 3 héritiers · convention notariée Me Sow (12/09/2024).\nVersement proportionnel demandé par les indivisaires.",
    representant: "M. Ousmane Wade",
    versementMode: "proportional",
    conventionDate: "2024-09-12",
    indivisaires: [
      { id: 1, name: "M. Ousmane Wade",  quotePart: 50, phone: "+221 77 612 88 04", email: "o.wade@mail.sn",   bank: "CBAO · ••• 9923",        lien: "fratrie" },
      { id: 2, name: "Mme Awa Wade",     quotePart: 25, phone: "+221 78 204 11 56", email: "awa.wade@mail.sn", bank: "Wave · 78 204 ••• 56",   lien: "fratrie" },
      { id: 3, name: "M. Ibrahima Wade", quotePart: 25, phone: "+221 76 408 92 17", email: "i.wade@mail.sn",   bank: "Orange Money · ••• 92 17", lien: "fratrie" },
    ],
  },
];

/* ─── Mutable store ─── allows the form modal to add/edit bailleurs
   while keeping all consumers (list, detail, versements, crg…) in sync. */
const _bailleurListeners = new Set();
function _notifyBailleurs() { _bailleurListeners.forEach(fn => fn()); }
function upsertBailleur(b) {
  const i = BAILLEURS.findIndex(x => x.id === b.id);
  if (i >= 0) BAILLEURS[i] = { ...BAILLEURS[i], ...b };
  else BAILLEURS.push(b);
  if (!BAILLEUR_LOSSES[b.id]) BAILLEUR_LOSSES[b.id] = [0,0,0,0,0,0];
  _notifyBailleurs();
}
function useBailleurs() {
  const [, tick] = React.useReducer(x => x + 1, 0);
  React.useEffect(() => { _bailleurListeners.add(tick); return () => _bailleurListeners.delete(tick); }, []);
  return BAILLEURS;
}
function getBailleurById(id) { return BAILLEURS.find(b => b.id === id); }

// Helper — pull computed metrics for a bailleur from MOCK.properties
function getBailleurMetrics(b) {
  const props = MOCK.properties.filter(p => p.owner === b.name);
  const units = props.reduce((s,p)=>s+p.units, 0);
  const occupied = props.reduce((s,p)=>s+p.occupied, 0);
  const mrr = props.reduce((s,p)=>s+p.mrr, 0);
  const commission = Math.round(mrr * b.commissionRate);
  const net = mrr - commission;
  return { props, units, occupied, mrr, commission, net };
}

/* ─────────────────────────────────────────────────────────
   SHARED SOURCE OF TRUTH — 6-month bailleur activity
   Used by: pages-versements (current + history) AND
            pages-compta (grand livre + balance + récépissés)
   ───────────────────────────────────────────────────────── */

// 6-month window. Last entry = current month being closed.
const BAILLEUR_MONTHS = [
  { code:"2025-11", label:"Nov 25",  paidOn:"30 nov", status:"versé"      },
  { code:"2025-12", label:"Déc 25",  paidOn:"30 déc", status:"versé"      },
  { code:"2026-01", label:"Jan 26",  paidOn:"30 jan", status:"versé"      },
  { code:"2026-02", label:"Fév 26",  paidOn:"29 fév", status:"versé"      },
  { code:"2026-03", label:"Mars 26", paidOn:"30 mars",status:"versé"      },
  { code:"2026-04", label:"Avr 26",  paidOn:null,     status:"à émettre"  },
];

// Realistic per-bailleur per-month losses (delinquent rent that wasn't
// collected that month). Zero = nominal mrr collected.
const BAILLEUR_LOSSES = {
  "B-001": [0,       0,       0,       110_000, 0,      0],  // Mariama Ndiaye missed Feb
  "B-002": [0,       0,       0,       0,       0,      0],
  "B-003": [0,       0,       220_000, 0,       0,      0],  // Bineta Diouf irregular
  "B-004": [0,       0,       0,       0,       75_000, 0],  // small adjustment March
  "B-005": [0,       0,       0,       0,       0,      0],  // mrr=0 (vacancy) — already zero
  "B-006": [0,       0,       0,       0,       0,      0],
  "B-007": [0,       0,       0,       0,       0,      0],
};

// Channel reference for each bailleur — used by versements + recepisses
const bailleurChannel = b => b.bank.startsWith("Wave")        ? "Wave"
                          :  b.bank.startsWith("Orange")     ? "Orange Money"
                          :  b.bank.startsWith("Ecobank")    ? "Ecobank"
                          :  b.bank.startsWith("BICIS")      ? "BICIS"
                          :  "CBAO";

// THE function. For (bailleur, month index 0..5) returns the standard
// breakdown: collected → commission → charges → versement → net.
// Charges = sum of NON-RECOVERABLE lines from the Charges module
// (récupérables go on tenant quittances, not on the bailleur 467 account).
function getBailleurMonthly(b, monthIdx) {
  const m = getBailleurMetrics(b);
  const loss = (BAILLEUR_LOSSES[b.id] || [])[monthIdx] || 0;
  const collected = Math.max(0, m.mrr - loss);
  const commission = Math.round(collected * b.commissionRate);
  // Real charges via charges module, if loaded. Fallback to flat formula.
  const monthCode = BAILLEUR_MONTHS[monthIdx].code;
  const [yr, mo] = monthCode.split("-").map(Number);
  const ch = (typeof window !== "undefined" && typeof window.monthlyChargesByOwner === "function")
    ? window.monthlyChargesByOwner(b.name, yr, mo)
    : null;
  const charges = ch
    ? ch.nonRecoverable
    : ((collected === 0 && m.units >= 1) ? 35_000
      : m.units > 5 ? 65_000
      : m.units > 1 ? 35_000
      : 0);
  const net = collected - commission - charges;
  const isCurrent = monthIdx === BAILLEUR_MONTHS.length - 1;
  return {
    month: BAILLEUR_MONTHS[monthIdx],
    units: m.units, occupied: m.occupied,
    collected, commission, charges, net,
    versement: isCurrent ? 0 : Math.max(0, net),
    paid: !isCurrent && net > 0,
    channel: bailleurChannel(b),
  };
}

// Convenience — full history for a bailleur on the 6-month window
function getBailleurHistory(b) {
  return BAILLEUR_MONTHS.map((_, i) => getBailleurMonthly(b, i));
}

/* ─────────────────────────────────────────────────────────
   LIST
   ───────────────────────────────────────────────────────── */
function BailleursList({ onOpenBailleur }) {
  const bailleurs = useBailleurs();
  const [q, setQ] = React.useState("");
  const [tab, setTab] = React.useState("all");
  const [modal, setModal] = React.useState(null); // null | { mode, initial }

const totalMrr = enriched.reduce((s,b)=>s+b.mrr, 0);
  const totalCommission = enriched.reduce((s,b)=>s+b.commission, 0);
  const totalNet = enriched.reduce((s,b)=>s+b.net, 0);
  const totalUnits = enriched.reduce((s,b)=>s+b.units, 0);

return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Bailleurs</h1>
          <div className="page-sub">{bailleurs.length} propriétaires · {MOCK.properties.length} biens · {totalUnits} lots</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost" onClick={()=>lgiToast("Export de la liste des bailleurs (.xlsx)","ok")}>Exporter</button>
          <button className="btn btn-secondary" onClick={()=>lgiToast("Import CSV de bailleurs")}>Importer CSV</button>
          <button className="btn btn-primary" onClick={()=>setModal({mode:"create", initial:null})}>+ Nouveau bailleur</button>
        </div>
      </div>

{/* KPIs */}
      <div className="kpis">
        <div className="kpi primary">
          <div className="kpi-label"><span>Parc géré</span></div>
          <div className="kpi-value num">{(totalMrr/1_000_000).toFixed(1).replace(".",",")}<span className="kpi-unit">M FCFA / mois</span></div>
          <div className="kpi-meta"><span className="delta pos">▲ 2,4%</span><span>vs mars · loyer brut consolidé</span></div>
          <div className="kpi-spark"><Spark values={[42,44,46,46,48,50,52,52,53,54,55,55]} color="#6192FF"/></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span>Commission agence</span></div>
          <div className="kpi-value num">{fmtCompact(totalCommission)}<span className="kpi-unit">FCFA / mois</span></div>
          <div className="kpi-meta"><span className="delta pos">▲ 2,1%</span><span>moyenne pondérée 8,1%</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span>Net propriétaires</span></div>
          <div className="kpi-value num">{(totalNet/1_000_000).toFixed(2).replace(".",",")}<span className="kpi-unit">M FCFA</span></div>
          <div className="kpi-meta"><span style={{color:"var(--pos-d)", fontWeight:600}}>À verser</span><span>échéance 30 avril</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span>Occupation moyenne</span></div>
          <div className="kpi-value num">{Math.round((enriched.reduce((s,b)=>s+b.occupied,0)/totalUnits)*100)}<span className="kpi-unit">%</span></div>
          <div className="kpi-meta"><span className="delta pos">▲ 1,4 pt</span><span>4 lots vacants à pourvoir</span></div>
        </div>
      </div>

{/* Tabs */}
      <div className="tabs">
        {[
          ["all", "Tous", enriched.length],
          ["particulier", "Particuliers", enriched.filter(b=>b.entity==="Particulier").length],
          ["sci", "Sociétés", enriched.filter(b=>b.entity!=="Particulier" && b.entity!=="Indivision").length],
          ["indivision", "Indivisions", enriched.filter(b=>b.entity==="Indivision").length],
        ].map(([k,l,n])=>(
          <button key={k} className={"tab" + (tab===k?" active":"")} onClick={()=>setTab(k)}>{l} <span className="tab-count">{n}</span></button>
        ))}
      </div>

<div className="panel">
        <div className="filter-bar" style={{borderTop:"none"}}>
          <div className="top-search" style={{width:300, background:"var(--d-panel)"}}>
            <span style={{color:"var(--d-ink-4)"}}>⌕</span>
            <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Nom, ID, entité…"/>
          </div>
          <div className="filter-spacer"/>
          <button className="filter-chip">Trier ▾</button>
        </div>
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{width:74}}>ID</th>
                <th>Bailleur</th>
                <th>Type</th>
                <th>Parc</th>
                <th>Occupation</th>
                <th className="right">Loyer brut</th>
                <th className="right">Commission</th>
                <th className="right">Net mensuel</th>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && <tr><td colSpan={8} className="muted" style={{textAlign:"center", padding:28}}>Aucun bailleur ne correspond.</td></tr>}
              {filtered.map(b => (
                <tr key={b.id} onClick={()=>onOpenBailleur(b)}>
                  <td className="mono muted" style={{fontSize:11.5}}>{b.id}</td>
                  <td>
                    <div style={{display:"flex", alignItems:"center", gap:10}}>
                      <div className="avatar" style={{background:b.color, color:"#fff"}}>{b.avatar}</div>
                      <div>
                        <div style={{fontWeight:500}}>{b.name}</div>
                        <div className="muted" style={{fontSize:11.5}}>{b.email}</div>
                      </div>
                    </div>
                  </td>
                  <td className="muted">
                    {b.entity}
                    {b.entity === "Indivision" && b.indivisaires && (
                      <span style={{marginLeft:6, fontSize:11, color:"var(--d-ink-4)"}}>· {b.indivisaires.length} indivisaires</span>
                    )}
                  </td>
                  <td className="muted mono" style={{fontSize:11.5}}>{b.props.length} biens · {b.units} lots</td>
                  <td>
                    <span className="occ-bar"><span className="occ-bar-fill" style={{width:`${(b.occupied/b.units)*100}%`, background: b.occupied === 0 ? "var(--orange)" : b.occupied === b.units ? "var(--pos-d)" : "var(--blue-d)"}}/></span>
                    <span className="mono" style={{marginLeft:10, fontSize:12}}>{b.occupied}/{b.units}</span>
                  </td>
                  <td className="right">{fmtFCFA(b.mrr)}</td>
                  <td className="right muted">−{fmtFCFA(b.commission).replace(" FCFA","")}<span style={{color:"var(--d-ink-4)", marginLeft:4}}>({(b.commissionRate*100).toFixed(b.commissionRate*100%1===0?0:1).replace(".",",")}%)</span></td>
                  <td className="right" style={{color: b.net > 0 ? "var(--pos-d)" : "var(--d-ink-4)", fontWeight:500}}>{b.net > 0 ? fmtFCFA(b.net) : "—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

<BailleurFormModal
        open={!!modal}
        mode={modal?.mode || "create"}
        initial={modal?.initial}
        onClose={()=>setModal(null)}
        onSave={(payload)=>{ upsertBailleur(payload); setModal(null); }}
      />
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
   DETAIL
   ───────────────────────────────────────────────────────── */
function BailleurDetail({ bailleur, onBack, onOpenProperty }) {
  useBailleurs(); // subscribe so edits via the modal re-render this view
  const b = getBailleurById(bailleur.id) || bailleur;
  const m = getBailleurMetrics(b);
  const occPct = m.units ? Math.round((m.occupied/m.units)*100) : 0;
  const isIndivision = b.entity === "Indivision";
  const [editing, setEditing] = React.useState(false);

// Synthetic 12-month disbursements history
  const months = ["Mai 25","Juin 25","Juil","Août","Sept","Oct","Nov","Déc","Jan","Fév","Mars","Avr 26"];
  const history = months.map((mo, i) => ({
    month: mo,
    expected: m.mrr,
    collected: m.mrr - (i === 2 ? 110_000 : i === 7 ? 220_000 : 0),
    commission: Math.round(m.mrr * b.commissionRate),
    charges: m.units > 5 ? 65_000 : m.units > 1 ? 35_000 : 0,
    paidOn: `${(i%26)+2} ${mo.split(" ")[0].toLowerCase()}`,
    status: i === 11 ? "à émettre" : "versé",
  }));

const totals12m = {
    collected: history.reduce((s,h)=>s+h.collected, 0),
    commission: history.reduce((s,h)=>s+h.commission, 0),
    net: history.reduce((s,h)=>s + h.collected - h.commission - h.charges, 0),
  };

return (
    <div className="page">
      <div style={{marginBottom:14, display:"flex", alignItems:"center", gap:12}}>
        <button className="btn btn-ghost" onClick={onBack}>← Bailleurs</button>
        <span className="chip neutral plain mono" style={{fontSize:11}}>{b.id}</span>
      </div>

{/* Hero */}
      <div className="t-hero">
        <div className="avatar lg" style={{background:b.color}}>{b.avatar}</div>
        <div>
          <div className="t-hero-id">BAILLEUR · {b.entity.toUpperCase()}</div>
          <div className="t-hero-name">{b.name}</div>
          <div className="t-hero-meta">
            <span>{b.phone}</span>
            <span>{b.email}</span>
            <span>Sous gestion depuis <b style={{color:"var(--d-ink-2)"}}>{b.contractDate}</b></span>
          </div>
        </div>
        <div style={{display:"flex", gap:8}}>
          <button className="btn btn-secondary" onClick={()=>setEditing(true)}>Modifier</button>
          <button className="btn btn-secondary" onClick={()=>lgiToast("Compte de gérance envoyé au bailleur","ok")}>Envoyer compte de gérance</button>
          <button className="btn btn-primary" onClick={()=>lgiToast("Versement de "+fmtCompact(m.net)+" FCFA initié","ok")}>+ Verser {fmtCompact(m.net)} FCFA</button>
        </div>
      </div>

{/* KPIs */}
      <div className="kpis">
        <div className="kpi primary">
          <div className="kpi-label"><span>Loyer brut mensuel</span></div>
          <div className="kpi-value num">{fmtCompact(m.mrr)}<span className="kpi-unit">FCFA</span></div>
          <div className="kpi-meta"><span className="delta pos">▲ stable</span><span>{m.props.length} biens · {m.units} lots</span></div>
          <div className="kpi-spark"><Spark values={[55,56,55,57,58,58,59,60,60,61,62,62]} color="#6192FF"/></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span>Occupation</span></div>
          <div className="kpi-value num">{occPct}<span className="kpi-unit">%</span></div>
          <div className="kpi-meta"><span>{m.occupied}/{m.units} lots occupés</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span>Commission agence</span></div>
          <div className="kpi-value num">{(b.commissionRate*100).toFixed(b.commissionRate*100%1===0?0:1).replace(".",",")}<span className="kpi-unit">%</span></div>
          <div className="kpi-meta"><span>{fmtCompact(m.commission)} FCFA / mois</span></div>
        </div>
        <div className="kpi" style={{borderColor:"rgba(63,181,131,0.30)"}}>
          <div className="kpi-label"><span>Net à verser · avril</span><span style={{color:"var(--pos-d)", fontWeight:600}}>30 avril</span></div>
          <div className="kpi-value num" style={{color:"var(--pos-d)"}}>{fmtCompact(m.net)}<span className="kpi-unit" style={{color:"var(--d-ink-3)"}}>FCFA</span></div>
          <div className="kpi-meta"><span>Virement sur <b style={{color:"var(--d-ink-2)"}}>{b.bank.split(" · ")[0]}</b></span></div>
        </div>
      </div>

{/* Tabs */}
      <div className="tabs">
        <button className="tab active">Vue d'ensemble</button>
        <button className="tab">Biens <span className="tab-count">{m.props.length}</span></button>
        <button className="tab">Versements <span className="tab-count">12</span></button>
        <button className="tab">Documents</button>
        <button className="tab">Activité</button>
      </div>

<div className="grid-detail">
        <div className="stack">
          {isIndivision && b.indivisaires && (
            <IndivisairesPanel b={b} m={m}/>
          )}
          {/* Properties owned */}
          <div className="panel">
            <div className="panel-head">
              <div>
                <h3 className="panel-title">Parc immobilier</h3>
                <div className="panel-sub">{m.props.length} biens sous gestion · {m.units} lots</div>
              </div>
              <button className="btn btn-ghost" onClick={()=>lgiToast("Ajout d’un bien pour ce bailleur")}>+ Ajouter un bien</button>
            </div>
            <div className="table-wrap">
              <table className="tbl">
                <thead>
                  <tr>
                    <th style={{width:80}}>ID</th>
                    <th>Bien</th>
                    <th>Type</th>
                    <th>Occupation</th>
                    <th className="right">Loyer / mois</th>
                  </tr>
                </thead>
                <tbody>
                  {m.props.length === 0 && <tr><td colSpan={5} className="muted" style={{textAlign:"center", padding:24}}>Aucun bien en gestion.</td></tr>}
                  {m.props.map(p => (
                    <tr key={p.id} onClick={()=>onOpenProperty(p)}>
                      <td className="mono muted" style={{fontSize:11.5}}>{p.id}</td>
                      <td>
                        <div style={{fontWeight:500}}>{p.name}</div>
                        <div className="muted" style={{fontSize:11.5, marginTop:1}}>{p.address}</div>
                      </td>
                      <td className="muted">{p.type}</td>
                      <td>
                        <span className="occ-bar"><span className="occ-bar-fill" style={{width:`${(p.occupied/p.units)*100}%`, background: p.occupied === 0 ? "var(--orange)" : p.occupied === p.units ? "var(--pos-d)" : "var(--blue-d)"}}/></span>
                        <span className="mono" style={{marginLeft:10, fontSize:12}}>{p.occupied}/{p.units}</span>
                      </td>
                      <td className="right">{fmtFCFA(p.mrr)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

{/* Disbursements history */}
          <div className="panel">
            <div className="panel-head">
              <div>
                <h3 className="panel-title">Historique des versements</h3>
                <div className="panel-sub">12 derniers mois · cumul {fmtCompact(totals12m.net)} FCFA versés</div>
              </div>
              <button className="btn btn-ghost" onClick={()=>lgiToast("Historique des versements exporté (PDF)","ok")}>Exporter PDF</button>
            </div>
            <div className="table-wrap">
              <table className="tbl">
                <thead>
                  <tr>
                    <th style={{width:90}}>Mois</th>
                    <th className="right">Encaissé</th>
                    <th className="right">Commission</th>
                    <th className="right">Charges</th>
                    <th className="right">Net versé</th>
                    <th>Date</th>
                    <th style={{width:110}}>Statut</th>
                  </tr>
                </thead>
                <tbody>
                  {history.slice().reverse().map((h, i) => {
                    const net = h.collected - h.commission - h.charges;
                    return (
                      <tr key={i}>
                        <td className="mono">{h.month}</td>
                        <td className="right">{fmtFCFA(h.collected)}</td>
                        <td className="right muted">−{h.commission.toLocaleString("fr-FR")}</td>
                        <td className="right muted">{h.charges ? "−"+h.charges.toLocaleString("fr-FR") : "—"}</td>
                        <td className="right" style={{color:"var(--pos-d)", fontWeight:500}}>{fmtFCFA(net)}</td>
                        <td className="muted mono" style={{fontSize:11.5}}>{h.status === "à émettre" ? <span className="empty-dash">en cours</span> : h.paidOn}</td>
                        <td><span className={`chip ${h.status==="versé"?"pos":"warn"}`}>{h.status}</span></td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </div>

{/* Sidebar */}
        <div className="stack">
          <div className="panel">
            <div className="panel-head"><h3 className="panel-title">Coordonnées</h3></div>
            <div>
              <div className="info-row"><div className="info-k">Nom</div><div className="info-v">{b.name}</div></div>
              <div className="info-row"><div className="info-k">Entité</div><div className="info-v">{b.entity}{isIndivision && b.indivisaires ? ` · ${b.indivisaires.length} indivisaires` : ""}</div></div>
              {isIndivision && b.representant && (
                <div className="info-row"><div className="info-k">Représentant</div><div className="info-v">{b.representant}</div></div>
              )}
              <div className="info-row"><div className="info-k">Téléphone</div><div className="info-v mono">{b.phone}</div></div>
              <div className="info-row"><div className="info-k">Email</div><div className="info-v" style={{fontSize:12}}>{b.email}</div></div>
              <div className="info-row" style={{borderBottom:"none"}}><div className="info-k">NINEA</div><div className="info-v mono">{b.ninea || "—"}</div></div>
            </div>
          </div>
          <div className="panel">
            <div className="panel-head">
              <h3 className="panel-title">Compte bancaire</h3>
              <button className="btn btn-ghost" style={{padding:"3px 8px", fontSize:11}}>Modifier</button>
            </div>
            <div>
              <div className="info-row"><div className="info-k">Compte</div><div className="info-v mono" style={{fontSize:11.5}}>{b.bank}</div></div>
              <div className="info-row"><div className="info-k">Devise</div><div className="info-v mono">XOF (FCFA)</div></div>
              <div className="info-row" style={{borderBottom:"none"}}><div className="info-k">Bénéficiaire</div><div className="info-v">{b.name}</div></div>
            </div>
          </div>
          <div className="panel">
            <div className="panel-head"><h3 className="panel-title">Contrat de gestion</h3></div>
            <div>
              <div className="info-row"><div className="info-k">Référence</div><div className="info-v mono">CTG-{b.id.replace("B-","")}</div></div>
              <div className="info-row"><div className="info-k">Signature</div><div className="info-v mono">{b.contractDate}</div></div>
              <div className="info-row"><div className="info-k">Commission</div><div className="info-v mono">{(b.commissionRate*100).toFixed(b.commissionRate*100%1===0?0:1).replace(".",",")}% / loyers encaissés</div></div>
              <div className="info-row"><div className="info-k">Fréquence versement</div><div className="info-v">Mensuelle · le 30</div></div>
              <div className="info-row" style={{borderBottom:"none"}}><div className="info-k">Durée</div><div className="info-v">Tacite reconduction</div></div>
            </div>
          </div>
          <div className="panel">
            <div className="panel-head"><h3 className="panel-title">Notes</h3></div>
            <div style={{padding:"14px 18px", fontSize:12.5, color:"var(--d-ink-2)", lineHeight:1.55, whiteSpace:"pre-line"}}>
              {b.notes}
            </div>
          </div>
        </div>
      </div>

<BailleurFormModal
        open={editing}
        mode="edit"
        initial={b}
        onClose={()=>setEditing(false)}
        onSave={(payload)=>{ upsertBailleur(payload); setEditing(false); }}
      />
    </div>
  );
}

Object.assign(window, {
  BailleursList, BailleurDetail, BAILLEURS,
  getBailleurMetrics, getBailleurMonthly, getBailleurHistory,
  BAILLEUR_MONTHS, bailleurChannel,
  upsertBailleur, useBailleurs, getBailleurById,
});

/* ─────────────────────────────────────────────────────────
   INDIVISAIRES PANEL — shown on detail page when entity = Indivision
   ───────────────────────────────────────────────────────── */
function IndivisairesPanel({ b, m }) {
  const items = b.indivisaires || [];
  const total = items.reduce((s,i)=>s+(Number(i.quotePart)||0), 0);
  const palette = ["#3F7DDB","#C9559C","#3FB583","#F2933E","#9B8AE6","#E0A74A","#1F6E4A","#9A2A2A","#7C3AED"];
  const modeLabel = {
    proportional:        "Versement proportionnel · chaque indivisaire reçoit sa part",
    representant:        "Versement unique au représentant",
    "compte-indivision": "Versement sur compte d'indivision dédié",
  }[b.versementMode] || "—";

return (
    <div className="panel">
      <div className="panel-head">
        <div>
          <h3 className="panel-title">Indivisaires <span style={{color:"var(--d-ink-4)", fontWeight:400, marginLeft:6}}>({items.length})</span></h3>
          <div className="panel-sub">{modeLabel}</div>
        </div>
        <div style={{display:"flex", alignItems:"center", gap:8}}>
          <span className="mono" style={{fontSize:11, color: total===100 ? "var(--pos-d)" : "var(--orange)"}}>
            Quote-parts {total} / 100%
          </span>
        </div>
      </div>

{/* Quote-parts bar */}
      <div style={{padding:"6px 22px 14px"}}>
        <div style={{display:"flex", height:14, borderRadius:3, overflow:"hidden", border:"1px solid var(--d-line-2)"}}>
          {items.map((it, i) => {
            const pct = Number(it.quotePart) || 0;
            if (!pct) return null;
            return (
              <div key={i} title={`${it.name} · ${pct}%`} style={{
                width:`${(pct / Math.max(total, 100)) * 100}%`,
                background: palette[i % palette.length],
                borderRight: i < items.length - 1 ? "1px solid var(--d-bg)" : "none",
                display:"grid", placeItems:"center",
                fontSize:9.5, color:"#fff", fontWeight:600, fontFamily:"var(--font-mono)",
              }}>{pct >= 10 ? `${pct}%` : ""}</div>
            );
          })}
        </div>
      </div>

<div className="table-wrap" style={{borderTop:"1px solid var(--d-line)"}}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width:34}}></th>
              <th>Indivisaire</th>
              <th>Lien</th>
              <th className="right">Quote-part</th>
              <th className="right">Part nette estimée</th>
              <th>Versement</th>
            </tr>
          </thead>
          <tbody>
            {items.map((it, i) => {
              const pct = Number(it.quotePart) || 0;
              const share = Math.round((m.mrr - Math.round(m.mrr * b.commissionRate)) * pct / 100);
              const isRep = b.representant === it.name;
              return (
                <tr key={i}>
                  <td><span style={{display:"block", width:10, height:10, borderRadius:2, background: palette[i % palette.length]}}/></td>
                  <td>
                    <div style={{fontWeight:500, display:"flex", alignItems:"center", gap:8}}>
                      {it.name}
                      {isRep && <span style={{
                        fontSize:9.5, fontWeight:600, padding:"1px 7px", borderRadius:3,
                        background:"rgba(124,58,237,0.15)", color:"#A78BFA",
                        letterSpacing:"0.04em", textTransform:"uppercase",
                      }}>Représentant</span>}
                    </div>
                    <div className="muted" style={{fontSize:11.5, marginTop:1}}>{it.email || it.phone}</div>
                  </td>
                  <td className="muted" style={{textTransform:"capitalize"}}>{it.lien || "—"}</td>
                  <td className="right mono">{pct}%</td>
                  <td className="right" style={{color:"var(--pos-d)", fontWeight:500}}>{share > 0 ? fmtFCFA(share) : "—"}</td>
                  <td className="mono muted" style={{fontSize:11.5}}>
                    {b.versementMode === "proportional"
                      ? (it.bank || <span className="empty-dash">non renseigné</span>)
                      : (isRep ? b.bank : <span className="muted">via représentant</span>)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

{b.conventionDate && (
        <div style={{padding:"10px 22px", borderTop:"1px solid var(--d-line)", background:"var(--d-sunken)", fontSize:11.5, color:"var(--d-ink-3)", display:"flex", justifyContent:"space-between"}}>
          <span>Convention d'indivision signée le <b className="mono" style={{color:"var(--d-ink-2)"}}>{b.conventionDate}</b></span>
          <button className="btn btn-ghost" style={{padding:"2px 10px", fontSize:11}}>Voir la convention</button>
        </div>
      )}
    </div>
  );
}

/* ╚══ end pages-bailleurs.jsx ══╝ */

/* ╔══ pages-versements.jsx ══╗ */
/* global React, MOCK, BAILLEURS, fmtFCFA, fmtCompact, Spark,
          getBailleurMonthly, BAILLEUR_MONTHS, bailleurChannel */

/* ─────────────────────────────────────────────────────────
   VERSEMENTS — owner disbursements
   À verser · planifiés · historique · bordereau CSV / Wave / OM
   Source unique partagée avec Compta bailleurs (getBailleurMonthly)
   ───────────────────────────────────────────────────────── */

// Build current-month disbursement rows (April = last month of BAILLEUR_MONTHS).
// Each row consumes the SHARED `getBailleurMonthly` so figures stay aligned
// with Compta bailleurs / Récépissés / Grand livre.
function buildDisbursements() {
  const currentIdx = BAILLEUR_MONTHS.length - 1;
  return BAILLEURS.map(b => {
    const r = getBailleurMonthly(b, currentIdx);
    return {
      id: "V-" + r.month.code + "-" + b.id.replace("B-","0"),
      bailleur: b,
      props: MOCK.properties.filter(p => p.owner === b.name),
      collected: r.collected, commission: r.commission,
      charges: r.charges, net: r.net,
      channel: r.channel,
      iban: b.bank,
      scheduled: "30 avr 2026",
      status: r.net <= 0 ? "rien à verser" : "à émettre",
    };
  });
}

// Derive history from the SAME source — every prior month, every bailleur
// with a payable net. Ordered newest → oldest.
function buildHistory() {
  const rows = [];
  for (let idx = BAILLEUR_MONTHS.length - 2; idx >= 0; idx--) {
    const mo = BAILLEUR_MONTHS[idx];
    BAILLEURS.forEach(b => {
      const r = getBailleurMonthly(b, idx);
      if (r.net <= 0) return;  // skip — vacancy months land in "Exceptions"
      const channel = r.channel;
      const refPrefix = channel === "Wave" ? "WV-" : channel === "Orange Money" ? "OM-" : "VIR-";
      const refNum = (4_500 + idx*200 + BAILLEURS.indexOf(b)*3).toString();
      rows.push({
        id: "V-" + mo.code + "-" + b.id.replace("B-","0"),
        date: mo.paidOn,
        bailleur: b.name,
        channel,
        amount: r.net,
        ref: refPrefix + refNum,
        status: "émis",
      });
    });
  }
  return rows;
}
const HISTORY = buildHistory();

function VersementsPage({ onOpenBailleur }) {
  const disbursements = React.useMemo(() => buildDisbursements(), []);
  const [emittedIds, setEmittedIds] = React.useState([]);
  const allToEmit = disbursements.filter(d => d.status === "à émettre");
  const toEmit = allToEmit.filter(d => !emittedIds.includes(d.id));
  const skipped = disbursements.filter(d => d.status === "rien à verser");

const [selected, setSelected] = React.useState(allToEmit.map(d => d.id));
  const selCount = toEmit.filter(d => selected.includes(d.id)).length;
  const allChecked = toEmit.length > 0 && selCount === toEmit.length;
  const someChecked = selCount > 0 && !allChecked;

const totalToEmit = toEmit.reduce((s, d) => s + d.net, 0);
  const totalSelected = toEmit.filter(d => selected.includes(d.id)).reduce((s, d) => s + d.net, 0);
  const totalCollected = disbursements.reduce((s, d) => s + d.collected, 0);
  const totalCommission = disbursements.reduce((s, d) => s + d.commission, 0);

function toggle(id) {
    setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  }
  function toggleAll() {
    setSelected(s => s.length === toEmit.length ? [] : toEmit.map(d => d.id));
  }

return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Versements</h1>
          <div className="page-sub">{toEmit.length} virements à émettre · échéance 30 avril · {fmtCompact(totalToEmit)} FCFA</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost">Exporter le bordereau (CSV)</button>
          <button className="btn btn-secondary">Planifier</button>
          <button className="btn btn-primary" disabled={selCount===0} style={{opacity:selCount===0?0.5:1, cursor:selCount===0?"not-allowed":"pointer"}} onClick={() => setShowRunModal(true)}>Émettre {selCount} virement{selCount>1?"s":""}</button>
        </div>
      </div>

{/* KPIs */}
      <div className="kpis">
        <div className="kpi primary">
          <div className="kpi-label"><span>À verser · avril</span></div>
          <div className="kpi-value num">{(totalToEmit/1_000_000).toFixed(2).replace(".",",")}<span className="kpi-unit">M FCFA</span></div>
          <div className="kpi-meta"><span style={{color:"var(--pos-d)", fontWeight:600}}>{toEmit.length} bénéficiaires</span><span>échéance dans 12 jours</span></div>
          <div className="kpi-spark"><Spark values={[8,8.2,8.5,8.4,8.7,9,9.2,9.5,9.4,9.6,9.8,10.6]} color="#6192FF"/></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span>Loyer brut collecté</span></div>
          <div className="kpi-value num">{(totalCollected/1_000_000).toFixed(2).replace(".",",")}<span className="kpi-unit">M FCFA</span></div>
          <div className="kpi-meta"><span>Base de calcul · avril</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span>Commission agence</span></div>
          <div className="kpi-value num">{fmtCompact(totalCommission)}<span className="kpi-unit">FCFA</span></div>
          <div className="kpi-meta"><span>Conservée sur compte BA Immo</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span>Délai moyen versement</span></div>
          <div className="kpi-value num">1,2<span className="kpi-unit">jour</span></div>
          <div className="kpi-meta"><span className="delta pos">▼ 0,4 j</span><span>vs mars · cible < 2 j</span></div>
        </div>
      </div>

{/* Tabs */}
      <div className="tabs">
        <button className={"tab" + (tab==="a-emettre"?" active":"")} onClick={()=>setTab("a-emettre")}>À émettre <span className="tab-count">{toEmit.length}</span></button>
        <button className={"tab" + (tab==="planifies"?" active":"")} onClick={()=>setTab("planifies")}>Planifiés <span className="tab-count">{toEmit.length}</span></button>
        <button className={"tab" + (tab==="historique"?" active":"")} onClick={()=>setTab("historique")}>Historique <span className="tab-count">{HISTORY.length}</span></button>
        <button className={"tab" + (tab==="exceptions"?" active":"")} onClick={()=>setTab("exceptions")}>Exceptions <span className="tab-count">{skipped.length}</span></button>
      </div>

{tab === "a-emettre" && (
        <div className="grid-2">
          <div className="panel">
            <div className="panel-head">
              <div>
                <h3 className="panel-title">Bordereaux à émettre</h3>
                <div className="panel-sub">{selCount} sélectionné{selCount>1?"s":""} · {fmtCompact(totalSelected)} FCFA</div>
              </div>
              <button className="btn btn-ghost" onClick={toggleAll}>{allChecked ? "Tout désélectionner" : "Tout sélectionner"}</button>
            </div>
            <div className="table-wrap">
              <table className="tbl">
                <thead>
                  <tr>
                    <th style={{width:34}}>
                      <span onClick={toggleAll} title={allChecked?"Tout désélectionner":"Tout sélectionner"} style={{
                        display:"inline-block", width:14, height:14, borderRadius:3, verticalAlign:"middle", cursor:"pointer", position:"relative",
                        border: (allChecked||someChecked) ? "1.5px solid var(--blue-d)" : "1.5px solid var(--d-line)",
                        background: (allChecked||someChecked) ? "var(--blue-d)" : "transparent",
                      }}>
                        {allChecked && <span style={{position:"absolute", inset:0, color:"#fff", fontSize:10, lineHeight:"12px", textAlign:"center", fontWeight:700}}>✓</span>}
                        {someChecked && <span style={{position:"absolute", inset:0, color:"#fff", fontSize:11, lineHeight:"11px", textAlign:"center", fontWeight:700}}>–</span>}
                      </span>
                    </th>
                    <th>Bénéficiaire</th>
                    <th>Canal</th>
                    <th className="right">Encaissé</th>
                    <th className="right">Commission</th>
                    <th className="right">Net à verser</th>
                  </tr>
                </thead>
                <tbody>
                  {toEmit.length === 0 && <tr><td colSpan={6} className="muted" style={{textAlign:"center", padding:28}}>Tous les virements ont été émis — voir l'onglet Historique.</td></tr>}
                  {toEmit.map(d => {
                    const checked = selected.includes(d.id);
                    return (
                      <tr key={d.id} onClick={() => toggle(d.id)} style={{background: checked ? "rgba(97,146,255,0.04)" : undefined}}>
                        <td>
                          <span onClick={(e) => { e.stopPropagation(); toggle(d.id); }} style={{
                            display:"inline-block", width:14, height:14, borderRadius:3,
                            border: checked ? "1.5px solid var(--blue-d)" : "1.5px solid var(--d-line)",
                            background: checked ? "var(--blue-d)" : "transparent",
                            position:"relative", cursor:"pointer", verticalAlign:"middle",
                          }}>
                            {checked && <span style={{position:"absolute", inset:0, color:"#fff", fontSize:10, lineHeight:"12px", textAlign:"center", fontWeight:700}}>✓</span>}
                          </span>
                        </td>
                        <td>
                          <div style={{display:"flex", alignItems:"center", gap:10}}>
                            <div className="avatar" style={{background:d.bailleur.color, color:"#fff"}}>{d.bailleur.avatar}</div>
                            <div>
                              <div style={{fontWeight:500}}>{d.bailleur.name}</div>
                              <div className="muted mono" style={{fontSize:11}}>{d.iban}</div>
                            </div>
                          </div>
                        </td>
                        <td>
                          <ChannelBadge channel={d.channel}/>
                        </td>
                        <td className="right">{fmtFCFA(d.collected)}</td>
                        <td className="right muted">−{d.commission.toLocaleString("fr-FR")}</td>
                        <td className="right" style={{color:"var(--pos-d)", fontWeight:600}}>{fmtFCFA(d.net)}</td>
                      </tr>
                    );
                  })}
                </tbody>
                <tfoot>
                  <tr style={{borderTop:"1px solid var(--d-line)", background:"var(--d-sunken)"}}>
                    <td></td>
                    <td colSpan={2} style={{padding:"12px var(--cell-px)", fontWeight:600, fontSize:12}}>TOTAL · {selCount} virement{selCount>1?"s":""}</td>
                    <td className="right mono" style={{padding:"12px var(--cell-px)", color:"var(--d-ink-3)"}}>{fmtFCFA(toEmit.reduce((s,d)=>s+d.collected,0))}</td>
                    <td className="right mono" style={{padding:"12px var(--cell-px)", color:"var(--d-ink-3)"}}>−{toEmit.reduce((s,d)=>s+d.commission,0).toLocaleString("fr-FR")}</td>
                    <td className="right mono" style={{padding:"12px var(--cell-px)", color:"var(--pos-d)", fontSize:13, fontWeight:600}}>{fmtFCFA(totalSelected)}</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>

<div className="stack">
            <DisbursementSummary toEmit={toEmit} selected={selected} totalSelected={totalSelected}/>
          </div>
        </div>
      )}

{tab === "planifies" && (
        <div className="panel">
          <div className="panel-head">
            <div>
              <h3 className="panel-title">Envois planifiés · 30 avril</h3>
              <div className="panel-sub">Exécution automatique à 09:00 si non émis manuellement</div>
            </div>
            <button className="btn btn-ghost">Modifier la planification</button>
          </div>
          <div className="table-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Bénéficiaire</th>
                  <th>Canal</th>
                  <th className="right">Montant</th>
                  <th>Date prévue</th>
                  <th>Statut</th>
                </tr>
              </thead>
              <tbody>
                {toEmit.map(d => (
                  <tr key={d.id} onClick={() => onOpenBailleur(d.bailleur)}>
                    <td>
                      <div style={{display:"flex", alignItems:"center", gap:10}}>
                        <div className="avatar" style={{background:d.bailleur.color, color:"#fff"}}>{d.bailleur.avatar}</div>
                        <div style={{fontWeight:500}}>{d.bailleur.name}</div>
                      </div>
                    </td>
                    <td><ChannelBadge channel={d.channel}/></td>
                    <td className="right" style={{color:"var(--pos-d)", fontWeight:500}}>{fmtFCFA(d.net)}</td>
                    <td className="mono muted">{d.scheduled} · 09:00</td>
                    <td><span className="chip info">planifié</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

{tab === "historique" && (
        <div className="panel">
          <div className="filter-bar" style={{borderTop:"none"}}>
            <div className="top-search" style={{width:280, background:"var(--d-panel)"}}>
              <span style={{color:"var(--d-ink-4)"}}>⌕</span>
              <input placeholder="Référence, bénéficiaire…"/>
            </div>
            <button className="filter-chip active">Tous <span className="k">{HISTORY.length}</span></button>
            {BAILLEUR_MONTHS.slice(0, -1).reverse().map(m => {
              const n = HISTORY.filter(h => h.date === m.paidOn).length;
              return <button key={m.code} className="filter-chip">{m.label.split(" ")[0]} <span className="k">{n}</span></button>;
            })}
            <div className="filter-spacer"/>
            <button className="filter-chip">Trier ▾</button>
          </div>
          <div className="table-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{width:130}}>Référence</th>
                  <th>Bénéficiaire</th>
                  <th>Canal</th>
                  <th className="right">Montant</th>
                  <th>Date</th>
                  <th>Référence canal</th>
                  <th>Statut</th>
                </tr>
              </thead>
              <tbody>
                {HISTORY.map(h => (
                  <tr key={h.id}>
                    <td className="mono muted" style={{fontSize:11.5}}>{h.id}</td>
                    <td style={{fontWeight:500}}>{h.bailleur}</td>
                    <td><ChannelBadge channel={h.channel}/></td>
                    <td className="right" style={{color: h.amount === 0 ? "var(--d-ink-4)" : "var(--pos-d)", fontWeight:500}}>{h.amount === 0 ? "—" : fmtFCFA(h.amount)}</td>
                    <td className="muted mono" style={{fontSize:11.5}}>{h.date}</td>
                    <td className="muted mono" style={{fontSize:11}}>{h.ref}</td>
                    <td><span className={`chip ${h.status==="émis"?"pos":"neutral"}`}>{h.status}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

{tab === "exceptions" && (
        <div className="panel">
          <div className="panel-head">
            <div>
              <h3 className="panel-title">Versements suspendus</h3>
              <div className="panel-sub">Bailleurs sans versement ce mois · revue manuelle requise</div>
            </div>
          </div>
          <div>
            {skipped.length === 0 && (
              <div style={{padding:"40px 24px", textAlign:"center", color:"var(--d-ink-3)", fontSize:12.5}}>Aucune exception · tous les versements sont à émettre.</div>
            )}
            {skipped.map(d => (
              <div key={d.id} style={{padding:"14px 18px", borderBottom:"1px solid var(--d-line-2)", display:"grid", gridTemplateColumns:"auto 1fr auto auto", gap:14, alignItems:"center"}}>
                <div className="avatar" style={{background:d.bailleur.color, color:"#fff"}}>{d.bailleur.avatar}</div>
                <div>
                  <div style={{fontWeight:500}}>{d.bailleur.name}</div>
                  <div className="muted" style={{fontSize:11.5}}>{d.props.length} bien · 0 lot occupé · loyer collecté nul</div>
                </div>
                <div style={{textAlign:"right"}}>
                  <div className="mono" style={{fontSize:11, color:"var(--d-ink-3)", textTransform:"uppercase", letterSpacing:"0.04em"}}>raison</div>
                  <div style={{fontSize:12, color:"var(--warn-d)", fontWeight:500}}>Vacance locative</div>
                </div>
                <div style={{display:"flex", gap:6}}>
                  <button className="btn btn-ghost" style={{padding:"4px 9px", fontSize:11.5}} onClick={()=>onOpenBailleur(d.bailleur)}>Voir bailleur →</button>
                  <button className="btn btn-secondary" style={{padding:"4px 9px", fontSize:11.5}}>Notifier</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

{showRunModal && <EmitDisbursementsModal toEmit={toEmit.filter(d => selected.includes(d.id))} total={totalSelected} onEmitted={emitSelected} onClose={() => setShowRunModal(false)}/>}
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
   SUMMARY · selected disbursements
   ───────────────────────────────────────────────────────── */
function DisbursementSummary({ toEmit, selected, totalSelected }) {
  const selRows = toEmit.filter(d => selected.includes(d.id));
  // Group by channel
  const byChannel = {};
  selRows.forEach(d => {
    byChannel[d.channel] = byChannel[d.channel] || { count: 0, total: 0 };
    byChannel[d.channel].count += 1;
    byChannel[d.channel].total += d.net;
  });
  return (
    <div className="panel">
      <div className="panel-head">
        <div>
          <h3 className="panel-title">Récapitulatif</h3>
          <div className="panel-sub">{selRows.length} virements sélectionnés</div>
        </div>
      </div>
      <div style={{padding:"18px 20px 8px"}}>
        <div style={{fontSize:10, textTransform:"uppercase", letterSpacing:"0.06em", color:"var(--d-ink-4)", fontWeight:600, marginBottom:6}}>Montant total à débiter</div>
        <div className="mono" style={{fontSize:26, fontWeight:500, color:"var(--pos-d)", letterSpacing:"-0.025em", marginBottom:14}}>{fmtFCFA(totalSelected)}</div>
        <div style={{fontSize:10, textTransform:"uppercase", letterSpacing:"0.06em", color:"var(--d-ink-4)", fontWeight:600, marginBottom:8}}>Répartition par canal</div>
      </div>
      <div style={{padding:"0 20px 16px"}}>
        {Object.entries(byChannel).map(([name, v]) => {
          const pct = totalSelected ? Math.round((v.total/totalSelected)*100) : 0;
          return (
            <div key={name} style={{marginBottom:12}}>
              <div style={{display:"flex", justifyContent:"space-between", marginBottom:6, alignItems:"center"}}>
                <span style={{display:"flex", alignItems:"center", gap:8}}>
                  <ChannelBadge channel={name}/>
                  <span className="muted mono" style={{fontSize:11}}>{v.count} virement{v.count > 1 ? "s" : ""}</span>
                </span>
                <span className="mono" style={{fontSize:12.5}}>{fmtFCFA(v.total)}</span>
              </div>
              <div style={{height:5, background:"var(--d-sunken)", borderRadius:2.5, overflow:"hidden"}}>
                <div style={{height:"100%", width:`${pct}%`, background:"var(--blue-d)", borderRadius:2.5}}/>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{padding:"14px 20px", borderTop:"1px solid var(--d-line)", background:"var(--d-sunken)", fontSize:11.5, color:"var(--d-ink-3)"}}>
        <div style={{display:"flex", justifyContent:"space-between", marginBottom:4}}>
          <span>Compte source</span>
          <span className="mono" style={{color:"var(--d-ink-2)"}}>CBAO · BA Immo · ••• 8841</span>
        </div>
        <div style={{display:"flex", justifyContent:"space-between"}}>
          <span>Solde disponible</span>
          <span className="mono" style={{color:"var(--d-ink)"}}>18,42 M FCFA</span>
        </div>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
   CHECKLIST PANEL
   ───────────────────────────────────────────────────────── */
function ChecklistPanel() {
  const items = [
    { done: true,  txt: "Rapprochement bancaire avril terminé",   sub: "42 opérations · 0 écart" },
    { done: true,  txt: "Comptes de gérance générés",              sub: "6 bordereaux · prêts à envoyer" },
    { done: true,  txt: "IBAN bénéficiaires vérifiés",             sub: "Aucun IBAN bloqué ou suspect" },
    { done: false, txt: "Validation comptable",                    sub: "À approuver par K. Diop · DAF" },
    { done: false, txt: "Émission des virements",                  sub: "Bordereau + envois Wave / Orange Money / virement" },
  ];
  return (
    <div className="panel">
      <div className="panel-head">
        <div>
          <h3 className="panel-title">Préparation</h3>
          <div className="panel-sub">3 sur 5 étapes complétées</div>
        </div>
      </div>
      <div style={{padding:"6px 0"}}>
        {items.map((it, i) => (
          <div key={i} style={{display:"flex", gap:12, padding:"11px 18px", alignItems:"flex-start", borderBottom: i < items.length-1 ? "1px solid var(--d-line-2)" : "none"}}>
            <span style={{
              width:18, height:18, borderRadius:50,
              border: it.done ? "none" : "1.5px solid var(--d-line)",
              background: it.done ? "var(--pos-d)" : "transparent",
              color:"#fff", fontSize:10, fontWeight:700,
              display:"grid", placeItems:"center", flexShrink:0, marginTop:1,
            }}>{it.done && "✓"}</span>
            <div style={{flex:1}}>
              <div style={{fontSize:12.5, color: it.done ? "var(--d-ink-3)" : "var(--d-ink)", fontWeight:500, textDecoration: it.done ? "line-through" : "none"}}>{it.txt}</div>
              <div style={{fontSize:11.5, color:"var(--d-ink-4)", marginTop:2}}>{it.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
   EMIT MODAL · confirmation
   ───────────────────────────────────────────────────────── */
function EmitDisbursementsModal({ toEmit, total, onClose, onEmitted }) {
  const [step, setStep] = React.useState("confirm"); // confirm · processing · done
  const [progress, setProgress] = React.useState(0);

React.useEffect(() => {
    if (step !== "processing") return;
    const total = toEmit.length;
    let i = 0;
    const itv = setInterval(() => {
      i += 1;
      setProgress(i);
      if (i >= total) { clearInterval(itv); setTimeout(() => { setStep("done"); onEmitted && onEmitted(toEmit.map(d => d.id)); }, 400); }
    }, 320);
    return () => clearInterval(itv);
  }, [step, toEmit.length]);

return (
    <div onClick={step === "processing" ? undefined : onClose} style={{
      position:"fixed", inset:0, background:"rgba(0,0,0,0.55)", zIndex:300,
      display:"flex", alignItems:"center", justifyContent:"center"
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        background:"var(--d-panel)", border:"1px solid var(--d-line)", borderRadius:10,
        width:560, color:"var(--d-ink)", fontFamily:"var(--font-sans)"
      }}>
        <div style={{padding:"16px 22px", borderBottom:"1px solid var(--d-line)", display:"flex", justifyContent:"space-between", alignItems:"center"}}>
          <div>
            <div style={{fontSize:14, fontWeight:600}}>
              {step === "confirm" ? "Confirmer l'émission" : step === "processing" ? "Émission en cours…" : "Virements émis"}
            </div>
            <div style={{fontSize:11.5, color:"var(--d-ink-3)", marginTop:2}}>
              {step === "confirm" && `${toEmit.length} virements · ${fmtFCFA(total)}`}
              {step === "processing" && `${progress} / ${toEmit.length} traités`}
              {step === "done" && `Tous les virements ont été émis avec succès`}
            </div>
          </div>
          {step !== "processing" && (
            <button onClick={onClose} style={{background:"none", border:"none", color:"var(--d-ink-3)", fontSize:20, cursor:"pointer"}}>×</button>
          )}
        </div>

{step === "confirm" && (
          <>
            <div style={{padding:"20px 22px", maxHeight:280, overflowY:"auto"}}>
              {toEmit.map(d => (
                <div key={d.id} style={{display:"grid", gridTemplateColumns:"auto 1fr auto", gap:12, padding:"10px 0", borderBottom:"1px solid var(--d-line-2)", alignItems:"center"}}>
                  <div className="avatar" style={{background:d.bailleur.color, color:"#fff"}}>{d.bailleur.avatar}</div>
                  <div>
                    <div style={{fontSize:12.5, fontWeight:500}}>{d.bailleur.name}</div>
                    <div className="mono muted" style={{fontSize:11}}>{d.iban}</div>
                  </div>
                  <div style={{textAlign:"right"}}>
                    <div className="mono" style={{color:"var(--pos-d)", fontSize:13, fontWeight:500}}>{fmtFCFA(d.net)}</div>
                    <ChannelBadge channel={d.channel}/>
                  </div>
                </div>
              ))}
            </div>
            <div style={{padding:"14px 22px", borderTop:"1px solid var(--d-line)", background:"var(--d-sunken)", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
              <div>
                <div style={{fontSize:11, color:"var(--d-ink-3)", textTransform:"uppercase", letterSpacing:"0.06em", fontWeight:600}}>Total à débiter</div>
                <div className="mono" style={{fontSize:18, fontWeight:500, color:"var(--pos-d)"}}>{fmtFCFA(total)}</div>
              </div>
              <div style={{display:"flex", gap:8}}>
                <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
                <button className="btn btn-primary" onClick={() => setStep("processing")}>Émettre · {toEmit.length} virements</button>
              </div>
            </div>
          </>
        )}

{step === "processing" && (
          <div style={{padding:"40px 22px", textAlign:"center"}}>
            <div style={{fontSize:28, fontWeight:500, color:"var(--blue-d)", fontFamily:"var(--font-mono)", marginBottom:14, letterSpacing:"-0.02em"}}>
              {progress} / {toEmit.length}
            </div>
            <div style={{height:6, background:"var(--d-sunken)", borderRadius:3, overflow:"hidden", maxWidth:420, margin:"0 auto 16px"}}>
              <div style={{height:"100%", width:`${(progress/toEmit.length)*100}%`, background:"var(--blue-d)", borderRadius:3, transition:"width 200ms ease"}}/>
            </div>
            <div style={{fontSize:12, color:"var(--d-ink-3)"}}>
              {progress < toEmit.length ? `Transmission à ${toEmit[Math.min(progress, toEmit.length-1)].channel}…` : "Finalisation…"}
            </div>
          </div>
        )}

{step === "done" && (
          <>
            <div style={{padding:"32px 22px", textAlign:"center"}}>
              <div style={{width:54, height:54, borderRadius:50, background:"rgba(63,181,131,0.15)", margin:"0 auto 16px", display:"grid", placeItems:"center", color:"var(--pos-d)", fontSize:24, fontWeight:700}}>✓</div>
              <div style={{fontSize:16, fontWeight:500, color:"var(--d-ink)", marginBottom:6}}>{toEmit.length} virements émis</div>
              <div style={{fontSize:12.5, color:"var(--d-ink-3)", maxWidth:380, margin:"0 auto"}}>
                Total débité : <b className="mono" style={{color:"var(--pos-d)"}}>{fmtFCFA(total)}</b>. Les avis de virement ont été envoyés par email à chaque bailleur.
              </div>
            </div>
            <div style={{padding:"14px 22px", borderTop:"1px solid var(--d-line)", background:"var(--d-sunken)", display:"flex", justifyContent:"flex-end", gap:8}}>
              <button className="btn btn-ghost">Télécharger le récap (PDF)</button>
              <button className="btn btn-primary" onClick={onClose}>Terminer</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { VersementsPage });

/* ╚══ end pages-versements.jsx ══╝ */