setOpen(v => !v)}
style={{
background: 'linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%)',
borderRadius: 10, padding: '12px 16px',
boxShadow: open ? '0 6px 28px rgba(109,40,217,0.45)' : '0 4px 20px rgba(109,40,217,0.30)',
cursor: 'pointer', userSelect: 'none', transition: 'box-shadow .15s',
}}
>
{selected?.icon_filename && (
)}
{selected?.nom || '—'}
{open && (
{platOptions.map(p => (
{ onSelect(p.nom); setOpen(false); }}
style={{
display: 'flex', alignItems: 'center', gap: 10,
padding: '10px 14px', cursor: 'pointer',
background: p.nom === selectedPlatName ? 'var(--surface-2)' : 'transparent',
fontWeight: p.nom === selectedPlatName ? 700 : 400,
fontSize: 'var(--fs-sm)',
borderBottom: '1px solid var(--border)',
transition: 'background .1s',
}}
onMouseEnter={e => { if (p.nom !== selectedPlatName) e.currentTarget.style.background = 'var(--surface-2)'; }}
onMouseLeave={e => { if (p.nom !== selectedPlatName) e.currentTarget.style.background = 'transparent'; }}
>
{p.icon_filename ? (
) : (
)}
{p.nom}
))}
)}
);
}
/* ── Sélecteur Détenteur ── */
function DetenteurSelector({ detenteurOptions, selectedId, onSelect }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const h = e => { if (!ref.current?.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
const selected = detenteurOptions.find(d => d.id === selectedId) || detenteurOptions[0];
return (
setOpen(v => !v)}
style={{
background: 'linear-gradient(135deg, #0d9488 0%, #0891b2 100%)',
borderRadius: 10, padding: '12px 16px',
boxShadow: open ? '0 6px 22px rgba(13,148,136,0.45)' : '0 4px 16px rgba(13,148,136,0.3)',
cursor: 'pointer', userSelect: 'none', transition: 'box-shadow .15s',
}}
>
{selected?.label || '—'}
{open && (
{detenteurOptions.map(d => (
{ onSelect(d.id); setOpen(false); }}
style={{
padding: '10px 14px', cursor: 'pointer',
background: d.id === selectedId ? 'var(--surface-2)' : 'transparent',
fontWeight: d.id === selectedId ? 700 : 400,
fontSize: 'var(--fs-sm)',
borderBottom: '1px solid var(--border)',
transition: 'background .1s',
}}
onMouseEnter={e => { if (d.id !== selectedId) e.currentTarget.style.background = 'var(--surface-2)'; }}
onMouseLeave={e => { if (d.id !== selectedId) e.currentTarget.style.background = 'transparent'; }}
>
{d.label}
))}
)}
);
}
/* ── Sélecteur Année ── */
function AnneeSelector({ availableYears, selectedYear, onSelect }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const h = e => { if (!ref.current?.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
const options = [
{ value: '', label: 'Depuis le début' },
...[...availableYears].sort((a, b) => b - a).map(y => ({ value: String(y), label: String(y) })),
];
const displayLabel = selectedYear || 'Depuis le début';
const isGlobal = !selectedYear;
return (
setOpen(v => !v)}
style={{
background: 'linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%)',
borderRadius: 10, padding: '12px 16px',
boxShadow: open ? '0 6px 28px rgba(109,40,217,0.45)' : '0 4px 20px rgba(109,40,217,0.30)',
cursor: 'pointer', userSelect: 'none', transition: 'box-shadow .15s',
}}
>
{displayLabel}
{open && (
{options.map(opt => (
{ onSelect(opt.value); setOpen(false); }}
style={{
padding: '10px 14px', cursor: 'pointer',
background: opt.value === selectedYear ? 'var(--surface-2)' : 'transparent',
fontWeight: opt.value === selectedYear ? 700 : 400,
fontSize: 'var(--fs-sm)',
borderBottom: '1px solid var(--border)',
transition: 'background .1s',
}}
onMouseEnter={e => { if (opt.value !== selectedYear) e.currentTarget.style.background = 'var(--surface-2)'; }}
onMouseLeave={e => { if (opt.value !== selectedYear) e.currentTarget.style.background = 'transparent'; }}
>
{opt.label}
))}
)}
);
}
/* ═══════════════════════════════════════════════════════════════
Page principale
═══════════════════════════════════════════════════════════════ */
export default function Plateformes() {
const { activeId, activeView, investisseurs } = useInvestisseur();
const { displayMode, chartInterets, chartCapital, chartCashback } = useUi();
const navigate = useNavigate();
const location = useLocation();
const [searchParams, setSearchParams] = useSearchParams();
/* ── État données ── */
const [allRows, setAllRows] = useState([]);
const [allRembs, setAllRembs] = useState([]);
const [allReinvests, setAllReinvests] = useState([]);
const [plats, setPlats] = useState([]);
const [allDepots, setAllDepots] = useState([]);
const [allCorrections, setAllCorrections] = useState([]);
const [loading, setLoading] = useState(false);
/* ── État sélecteurs ── */
/* selectedPlatName et activeTab sont dans l'URL pour survivre au retour arrière */
const selectedPlatName = searchParams.get('plat') || null;
const setSelectedPlatName = (nom) => {
try { localStorage.setItem('cl_plat_selected', nom); } catch {}
setSearchParams(p => { const n = new URLSearchParams(p); n.set('plat', nom); return n; }, { replace: true });
};
const [selectedDetenteurId, setSelectedDetenteurId] = useState(() => { try { return localStorage.getItem('cl_plat_detenteur') || 'all'; } catch { return 'all'; } });
const [selectedYear, setSelectedYear] = useState(() => { try { return localStorage.getItem('cl_plat_year') || String(new Date().getFullYear()); } catch { return String(new Date().getFullYear()); } });
const [windowStart, setWindowStart] = useState(0);
const [drDetaille, setDrDetaille] = useState(() => {
try { return localStorage.getItem('cl_dr_plat_detaille') === 'true'; } catch { return false; }
});
const toggleDrDetaille = () => setDrDetaille(v => {
const next = !v;
try { localStorage.setItem('cl_dr_plat_detaille', String(next)); } catch {}
return next;
});
const [rembDetaille, setRembDetaille] = useState(() => {
try { return localStorage.getItem('cl_remb_plat_detaille') === 'true'; } catch { return false; }
});
const toggleRembDetaille = () => setRembDetaille(v => {
const next = !v;
try { localStorage.setItem('cl_remb_plat_detaille', String(next)); } catch {}
return next;
});
const [rembInclureInterets, setRembInclureInterets] = useState(() => {
try { return localStorage.getItem('cl_remb_plat_interets') !== 'false'; } catch { return true; }
});
const [rembInclureCapital, setRembInclureCapital] = useState(() => {
try { return localStorage.getItem('cl_remb_plat_capital') === 'true'; } catch { return false; }
});
const [rembInclureCashback, setRembInclureCashback] = useState(() => {
try { return localStorage.getItem('cl_remb_plat_cashback') === 'true'; } catch { return false; }
});
const [rembShowActual, setRembShowActual] = useState(true);
const [rembShowProjected, setRembShowProjected] = useState(true);
const [libIcons, setLibIcons] = useState({});
const [allSimulRembs, setAllSimulRembs] = useState([]);
const [pfuRates, setPfuRates] = useState([]);
/* ── État UI ── */
const activeTab = searchParams.get('tab') || (() => { try { return localStorage.getItem('cl_plat_tab') || 'remboursements'; } catch { return 'remboursements'; } })();
const setActiveTab = (tab) => {
try { localStorage.setItem('cl_plat_tab', tab); } catch {}
setSearchParams(p => { const n = new URLSearchParams(p); n.set('tab', tab); return n; }, { replace: true });
};
const [listFocused, setListFocused] = useState(false);
/* ── Chargement ── */
const load = async () => {
if (!activeId && activeView !== 'all') return;
setLoading(true);
try {
const scopeParams = activeView === 'all' ? { scope: 'all' } : {};
const [rows, p, rembs, reinvests, depots, corrections, simulRembs, pfu] = await Promise.all([
api.get('/investissements', scopeParams),
api.get('/plateformes'),
api.get('/remboursements', scopeParams),
api.get('/reinvestissements', { scope: 'all' }),
api.get('/depots-retraits', scopeParams),
api.get('/corrections', scopeParams),
api.get('/simul/all', scopeParams),
api.get('/pfu'),
]);
setAllRows(rows);
setPlats(p);
setAllRembs(rembs);
setAllReinvests(reinvests);
setAllDepots(depots);
setAllCorrections(corrections);
setAllSimulRembs(Array.isArray(simulRembs) ? simulRembs : []);
setPfuRates(Array.isArray(pfu) ? pfu : []);
} finally { setLoading(false); }
};
useEffect(() => { load(); /* eslint-disable-next-line */ }, [activeId, activeView]);
/* ── Icônes bibliothèque ── */
useEffect(() => {
api.get('/icons').then(rows => {
const m = {};
rows.forEach(r => { m[r.name] = r.filename; });
setLibIcons(m);
}).catch(() => {});
}, []);
/* ── Options plateformes : dédupliquées par nom ── */
const platOptions = useMemo(() => {
const map = {};
for (const r of allRows) {
const nom = r.plateforme_nom || '—';
if (!map[nom]) {
const p = plats.find(pl => pl.id === r.plateforme_id);
map[nom] = {
nom,
icon_filename: p?.icone_filename || p?.logo_filename || null,
investi: 0,
};
}
if (!map[nom].icon_filename) {
const p = plats.find(pl => pl.id === r.plateforme_id);
map[nom].icon_filename = p?.icone_filename || p?.logo_filename || null;
}
map[nom].investi += r.montant_investi || 0;
}
return Object.values(map).sort((a, b) => b.investi - a.investi);
}, [allRows, plats]);
/* ── Init sélecteur plateforme — préfère localStorage ── */
useEffect(() => {
if (!selectedPlatName && platOptions.length > 0) {
const saved = (() => { try { return localStorage.getItem('cl_plat_selected'); } catch { return null; } })();
const target = platOptions.find(p => p.nom === saved) ? saved : platOptions[0].nom;
setSelectedPlatName(target);
}
}, [platOptions, selectedPlatName]);
/* ── Investissements pour la plateforme sélectionnée ── */
const platRows = useMemo(() =>
allRows.filter(r => selectedPlatName && r.plateforme_nom === selectedPlatName),
[allRows, selectedPlatName]
);
/* ── Options détenteur (visible seulement si plusieurs détenteurs distincts) ── */
const detenteurOptions = useMemo(() => {
const ids = [...new Set(platRows.map(r => r.investisseur_id).filter(v => v != null))];
if (ids.length <= 1) return null;
return [
{ id: 'all', label: 'Multi-détenteur' },
...ids.map(id => {
const inv = investisseurs.find(i => i.id === id || String(i.id) === String(id));
return { id: String(id), label: inv ? memberLabel(inv) : `Détenteur ${id}` };
}),
];
}, [platRows, investisseurs]);
/* ── Vrai/faux multi-détenteur global (indépendant de la plateforme sélectionnée) ── */
const multiDetenteur = new Set(plats.map(p => p.investisseur_id)).size > 1;
/* ── Reset détenteur quand plateforme change (skip restauration initiale) ── */
const isFirstPlatChange = useRef(true);
useEffect(() => {
if (isFirstPlatChange.current) { isFirstPlatChange.current = false; return; }
setSelectedDetenteurId('all');
try { localStorage.setItem('cl_plat_detenteur', 'all'); } catch {}
}, [selectedPlatName]);
/* ── Persistance selectedYear et selectedDetenteurId ── */
useEffect(() => { try { localStorage.setItem('cl_plat_year', selectedYear); } catch {} }, [selectedYear]);
useEffect(() => { try { localStorage.setItem('cl_plat_detenteur', selectedDetenteurId); } catch {} }, [selectedDetenteurId]);
/* ── IDs des plateformes correspondant à la sélection nom + détenteur ── */
const filteredPlatIds = useMemo(() => {
if (!selectedPlatName) return new Set();
const matching = plats.filter(p => p.nom === selectedPlatName);
if (selectedDetenteurId === 'all') return new Set(matching.map(p => p.id));
return new Set(matching.filter(p => String(p.investisseur_id) === String(selectedDetenteurId)).map(p => p.id));
}, [plats, selectedPlatName, selectedDetenteurId]);
/* ── Lignes filtrées (plateforme + détenteur) ── */
const filteredRows = useMemo(() => {
if (selectedDetenteurId === 'all' || !detenteurOptions) return platRows;
return platRows.filter(r => String(r.investisseur_id) === String(selectedDetenteurId));
}, [platRows, selectedDetenteurId, detenteurOptions]);
/* ── Années disponibles (asc pour la barre de boutons, desc pour le dropdown) ── */
const availableYearsAsc = useMemo(() => {
const set = new Set(filteredRows.map(r => r.date_souscription?.slice(0,4)).filter(Boolean));
return [...set].map(Number).sort((a, b) => a - b);
}, [filteredRows]);
const availableYears = useMemo(() => [...availableYearsAsc].reverse(), [availableYearsAsc]);
/* Repositionne la fenêtre sur l'année courante à chaque changement de plateforme ── */
useEffect(() => {
if (!availableYearsAsc.length) return;
const currentYear = new Date().getFullYear();
const idx = availableYearsAsc.indexOf(currentYear);
const pos = idx >= 0 ? idx : availableYearsAsc.length - 1;
setWindowStart(Math.max(0, Math.min(Math.max(0, availableYearsAsc.length - 3), pos - 1)));
}, [selectedPlatName]); // eslint-disable-line react-hooks/exhaustive-deps
/* ── lastRembDateMap ── */
const lastRembDateMap = useMemo(() => {
const map = {};
for (const rb of allRembs) {
const id = rb.investissement_id;
const d = rb.date_remb?.slice(0,10);
if (!id || !d) continue;
if (!map[id] || d > map[id]) map[id] = d;
}
return map;
}, [allRembs]);
const isActiveAtEndOfYear = (r, yr) => {
if (!yr) return true;
const cutoff = `${yr}-12-31`;
const decStart = `${yr}-12-01`;
if (r.date_souscription > cutoff) return false;
const ACTIVE = ['en_cours', 'en_retard', 'procedure'];
if (ACTIVE.includes(r.statut)) return true;
const fin = r.date_cible ?? lastRembDateMap[r.id] ?? null;
return !!fin && fin >= decStart;
};
/* ── Lignes pour les graphiques (filtrées par année) ── */
const chartRows = useMemo(() => {
if (!selectedYear) return filteredRows;
return filteredRows.filter(r => isActiveAtEndOfYear(r, selectedYear));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [filteredRows, selectedYear, lastRembDateMap]);
/* ── Agrégats remboursements (filtrés par coupure année) ── */
const rembParInv = useMemo(() => {
const cutoff = selectedYear ? `${selectedYear}-12-31` : null;
const map = {};
for (const rb of allRembs) {
if (!rb.investissement_id) continue;
const d = rb.date_remb?.slice(0,10);
if (!d || (cutoff && d > cutoff)) continue;
const id = rb.investissement_id;
if (!map[id]) map[id] = { capital: 0, interets_bruts: 0, interets_nets: 0 };
map[id].capital += rb.capital || 0;
map[id].interets_bruts += rb.interets_bruts || 0;
map[id].interets_nets += rb.interets_nets || 0;
}
return map;
}, [allRembs, selectedYear]);
const capRembParInv = useMemo(() =>
Object.fromEntries(Object.entries(rembParInv).map(([id, v]) => [id, v.capital])),
[rembParInv]
);
const reinvestCumulParInv = useMemo(() => {
const cutoff = selectedYear ? `${selectedYear}-12-31` : null;
const map = {};
for (const rv of allReinvests) {
const d = rv.date_reinvestissement?.slice(0,10);
if (!d || (cutoff && d > cutoff)) continue;
map[rv.investissement_id] = (map[rv.investissement_id] || 0) + (rv.montant || 0);
}
return map;
}, [allReinvests, selectedYear]);
/* ── KPI rows (= chartRows : déjà filtrées par plateforme + détenteur + année) ── */
const totals = useMemo(() => chartRows.reduce((acc, r) => {
const capInv = r.montant_investi + (reinvestCumulParInv[r.id] || 0);
const capRemb = capRembParInv[r.id] || 0;
acc.investi += capInv;
acc.cap_remb += capRemb;
acc.int_perc += rembParInv[r.id]?.interets_bruts || 0;
acc.int_perc_net += rembParInv[r.id]?.interets_nets || 0;
const capRestant = Math.max(0, capInv - capRemb);
acc.encours += capRestant;
if (['en_retard', 'procedure'].includes(r.statut)) acc.defaut += capRestant;
return acc;
}, { investi: 0, cap_remb: 0, int_perc: 0, int_perc_net: 0, encours: 0, defaut: 0 }),
[chartRows, capRembParInv, rembParInv, reinvestCumulParInv]);
/* ── Pagination onglet Investissements ── */
const sortedChartRows = useMemo(() =>
chartRows.slice().sort((a, b) => (a.date_souscription || '') < (b.date_souscription || '') ? -1 : 1),
[chartRows]
);
const {
pagedItems: pagedChartRows, page: platInvPage, setPage: setPlatInvPage,
pageSize: platInvPageSize, setPageSize: setPlatInvPageSize,
totalPages: platInvTotalPages, totalItems: platInvTotalItems, PAGE_SIZES: platInvPageSizes,
} = usePagination(sortedChartRows, 'cl_pagesize_plat_inv', [selectedPlatName, selectedYear]);
/* ── KPI N-1 (pour TrendBadge) ── */
const prevTotals = useMemo(() => {
const effectiveYear = selectedYear || String(new Date().getFullYear());
const prevYear = String(Number(effectiveYear) - 1);
const cutoff = `${prevYear}-12-31`;
const prevRembParInv = {};
for (const rb of allRembs) {
if (!rb.investissement_id) continue;
const d = rb.date_remb?.slice(0,10);
if (!d || d > cutoff) continue;
const id = rb.investissement_id;
if (!prevRembParInv[id]) prevRembParInv[id] = { capital: 0, interets_bruts: 0, interets_nets: 0 };
prevRembParInv[id].capital += rb.capital || 0;
prevRembParInv[id].interets_bruts += rb.interets_bruts || 0;
prevRembParInv[id].interets_nets += rb.interets_nets || 0;
}
const prevReinvest = {};
for (const rv of allReinvests) {
const d = rv.date_reinvestissement?.slice(0,10);
if (!d || d > cutoff) continue;
prevReinvest[rv.investissement_id] = (prevReinvest[rv.investissement_id] || 0) + (rv.montant || 0);
}
const prevRows = filteredRows.filter(r => isActiveAtEndOfYear(r, prevYear));
return prevRows.reduce((acc, r) => {
const capInv = r.montant_investi + (prevReinvest[r.id] || 0);
const capRemb = prevRembParInv[r.id]?.capital || 0;
acc.investi += capInv;
acc.cap_remb += capRemb;
acc.int_perc += prevRembParInv[r.id]?.interets_bruts || 0;
acc.int_perc_net += prevRembParInv[r.id]?.interets_nets || 0;
const capRestant = Math.max(0, capInv - capRemb);
acc.encours += capRestant;
if (['en_retard', 'procedure'].includes(r.statut)) acc.defaut += capRestant;
return acc;
}, { investi: 0, cap_remb: 0, int_perc: 0, int_perc_net: 0, encours: 0, defaut: 0 });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedYear, filteredRows, allRembs, allReinvests, lastRembDateMap]);
/* ── XIRR agrégé (flux datés : investis + réinvestissements + remboursements + valorisation
du capital restant dû pour les prêts non soldés, à la date de coupure) ── */
const plateformeXirr = useMemo(() => {
const cutoff = selectedYear ? `${selectedYear}-12-31` : today();
const ids = new Set(chartRows.map(r => r.id));
const flowsBrut = [];
const flowsNet = [];
for (const r of chartRows) {
if (!r.date_souscription) continue;
flowsBrut.push({ amount: -r.montant_investi, date: r.date_souscription });
flowsNet.push({ amount: -r.montant_investi, date: r.date_souscription });
}
for (const rv of allReinvests) {
if (!ids.has(rv.investissement_id)) continue;
const d = rv.date_reinvestissement?.slice(0, 10);
if (!d || d > cutoff) continue;
flowsBrut.push({ amount: -(rv.montant || 0), date: d });
flowsNet.push({ amount: -(rv.montant || 0), date: d });
}
for (const rb of allRembs) {
if (!ids.has(rb.investissement_id)) continue;
const d = rb.date_remb?.slice(0, 10);
if (!d || d > cutoff) continue;
flowsBrut.push({ amount: (rb.capital || 0) + (rb.cashback || 0) + (rb.interets_bruts || 0), date: d });
flowsNet.push({ amount: rb.net_recu || 0, date: d });
}
let estime = false;
for (const r of chartRows) {
const capInv = r.montant_investi + (reinvestCumulParInv[r.id] || 0);
const capRemb = capRembParInv[r.id] || 0;
const capRestant = Math.max(0, capInv - capRemb);
if (capRestant > 0.01) {
estime = true;
flowsBrut.push({ amount: capRestant, date: cutoff });
flowsNet.push({ amount: capRestant, date: cutoff });
}
}
const byDate = (a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0);
flowsBrut.sort(byDate);
flowsNet.sort(byDate);
return { brut: xirr(flowsBrut), net: xirr(flowsNet), estime, cutoff };
}, [chartRows, allRembs, allReinvests, selectedYear, reinvestCumulParInv, capRembParInv]);
const netMode = displayMode === 'net';
const prevYearLabel = selectedYear ? Number(selectedYear) - 1 : new Date().getFullYear() - 1;
if (!loading && plats.length === 0) {
return (
<>
{/* 1 — Capital investi */}
Capital investi
{fmtEUR(totals.encours)}
{fmtEUR(prevTotals.encours)} en {prevYearLabel}
{/* 2 — Investissements à risque */}
Investissements à risque
0 ? 'danger' : ''}>
{fmtEUR(totals.defaut)}
{totals.defaut > 0 &&
{fmtEUR(prevTotals.defaut)} en {prevYearLabel}
{/* 3 — Investissements depuis le début */}
Investissements depuis le début
{fmtEUR(totals.investi)}
{fmtEUR(prevTotals.investi)} en {prevYearLabel}
{/* 4 — Capital remboursé */}
Capital remboursé
{fmtEUR(totals.cap_remb)}
{fmtEUR(prevTotals.cap_remb)} en {prevYearLabel}
{/* 5 — Intérêts perçus */}
Intérêts perçus — {netMode ? 'Net' : 'Brut'}
{fmtEUR(netMode ? totals.int_perc_net : totals.int_perc)}
{fmtEUR(netMode ? prevTotals.int_perc_net : prevTotals.int_perc)} en {prevYearLabel}
{/* 6 — XIRR */}
{(() => {
const rendement = netMode ? plateformeXirr.net : plateformeXirr.brut;
const cutoffLabel = selectedYear ? `31/12/${selectedYear}` : "aujourd'hui";
const xirrExplication =
`XIRR (taux de rendement interne actualisé) : taux annualisé calculé à partir de l'ensemble des flux réels datés ` +
`des prêts de cette sélection (versements initiaux, réinvestissements, remboursements ${netMode ? 'nets, après fiscalité' : 'bruts, avant fiscalité'}). ` +
`Chaque flux est pondéré par sa date exacte.\n\n` +
(plateformeXirr.estime
? `Certains prêts ne sont pas encore soldés : leur capital restant dû est ajouté en flux final, valorisé au ${cutoffLabel} — c'est donc une estimation, pas un taux définitif.`
: 'Tous les prêts de cette sélection sont soldés : taux définitif.');
return (
XIRR — {netMode ? 'Net' : 'Brut'}
{plateformeXirr.estime && rendement !== null ? (estimé) : ''}
= 0 ? 'var(--success)' : 'var(--danger)') : 'var(--text-muted)' }}
>
{rendement !== null
? `${(rendement * 100).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} %`
: 'Aucun remboursement'}
Valorisé au {cutoffLabel}
);
})()}
Mouvements de trésorerie
— {selectedYear || 'Toutes les années'}
setWindowStart(w => Math.max(0, w - 1))}
disabled={!canPrevDR} style={{ opacity: canPrevDR ? 1 : 0.3 }}>‹
{visibleYearsDR.map(y => (
setSelectedYear(String(y))}>
{y}
))}
setWindowStart(w => Math.min(Math.max(0, availableYearsAsc.length - 3), w + 1))}
disabled={!canNextDR} style={{ opacity: canNextDR ? 1 : 0.3 }}>›
setSelectedYear('')}>
TOUT
setListFocused(v => !v)}>
{listFocused ? (
) : (
)}
{/* Données par détenteur en mode détaillé */}
{(() => {
// Construire un map platId → { detenteurNom, depotsByM, retraitsByM, corrByM }
const multiHolder = filteredPlatIds.size > 1;
const showDetaille = drDetaille && multiHolder;
// Map platId → détenteur nom (depuis plats)
const detenteurByPlatId = {};
for (const pid of filteredPlatIds) {
const p = plats.find(pl => pl.id === pid);
detenteurByPlatId[pid] = p?.investisseur_nom || String(pid);
}
// Construire les données par platId
const byPlatId = {};
for (const pid of filteredPlatIds) {
byPlatId[pid] = { depots: Array(12).fill(0), retraits: Array(12).fill(0), corr: Array(12).fill(0) };
}
for (const d of allDepots) {
if (!filteredPlatIds.has(d.plateforme_id)) continue;
if (selectedYear && d.date_operation?.slice(0, 4) !== selectedYear) continue;
const m = Number(d.date_operation.slice(5, 7)) - 1;
if (d.type === 'depot') byPlatId[d.plateforme_id].depots[m] += d.montant || 0;
else byPlatId[d.plateforme_id].retraits[m] += d.montant || 0;
}
for (const co of allCorrections) {
if (!filteredPlatIds.has(co.plateforme_id)) continue;
if (selectedYear && co.date?.slice(0, 4) !== selectedYear) continue;
const m = Number(co.date.slice(5, 7)) - 1;
byPlatId[co.plateforme_id].corr[m] += co.montant || 0;
}
// Helpers navigation
const makeGoTo = (type, month, platId) => () => {
const p = new URLSearchParams({ tab: 'mouvements', type, year: String(displayYear) });
if (month !== null) p.set('month', String(month + 1).padStart(2, '0'));
if (platId != null) p.set('plat_ids', String(platId));
else if (filteredPlatIds.size > 0) p.set('plat_ids', [...filteredPlatIds].join(','));
navigate('/depots-retraits?' + p.toString());
};
// Rendu d'un groupe de 3 lignes (depot/retrait/corr) pour un platId donné (null = consolidé)
const renderGroup = (pid, key) => {
const data = pid != null ? byPlatId[pid] : {
depots: depotsByMonth, retraits: retraitsByMonth, corr: corrByMonth
};
const label = pid != null ? detenteurByPlatId[pid] : null;
const tDep = data.depots.reduce((s, v) => s + v, 0);
const tRet = data.retraits.reduce((s, v) => s + v, 0);
const tCor = data.corr.reduce((s, v) => s + v, 0);
const hasCorr = data.corr.some(v => v !== 0);
const colClass = (i) => `tip-td-num${displayYear === currentYear && i === currentMonth - 1 ? ' tip-col-current' : ''}`;
return (
{label && (
{label}
)}
Dépôts
{data.depots.map((v, i) => (
0 ? ' tip-td-link' : ''}`}
onClick={v > 0 ? makeGoTo('depot', i, pid) : undefined}
style={v > 0 ? { cursor: 'pointer' } : undefined}>
{v > 0 ? fmtEUR(v) : — }
))}
0 ? ' tip-td-link' : ''}`}
onClick={tDep > 0 ? makeGoTo('depot', null, pid) : undefined}
style={tDep > 0 ? { cursor: 'pointer' } : undefined}>
{tDep > 0 ? fmtEUR(tDep) : — }
Retraits
{data.retraits.map((v, i) => (
0 ? ' tip-td-link' : ''}`}
onClick={v > 0 ? makeGoTo('retrait', i, pid) : undefined}
style={v > 0 ? { cursor: 'pointer' } : undefined}>
{v > 0 ? <>−{fmtEUR(v)} : — }
))}
0 ? ' tip-td-link' : ''}`}
onClick={tRet > 0 ? makeGoTo('retrait', null, pid) : undefined}
style={tRet > 0 ? { cursor: 'pointer' } : undefined}>
{tRet > 0 ? <>−{fmtEUR(tRet)} : — }
{hasCorr && (
Corrections
{data.corr.map((v, i) => (
{v !== 0 ? <>{v < 0 ? '−' : '+'}{fmtEUR(Math.abs(v))} : — }
))}
{tCor !== 0 ? <>{tCor < 0 ? '−' : '+'}{fmtEUR(Math.abs(tCor))} : — }
)}
);
};
return (
{displayYear}
Mouvement
{multiHolder && (
toggleDrDetaille()}
title={drDetaille ? 'Vue détaillée — cliquer pour consolider' : 'Vue consolidée — cliquer pour détailler par détenteur'}
style={{
display: 'inline-flex', alignItems: 'center', gap: 3,
background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.3)',
borderRadius: 4, padding: '2px 5px', cursor: 'pointer',
fontSize: 10, fontWeight: 600, color: '#fff', letterSpacing: '.03em',
lineHeight: 1.4, whiteSpace: 'nowrap',
}}>
{drDetaille ? 'Consolidé' : 'Détaillé'}
)}
{MOIS_LONG.map((m, i) => (
{m}
))}
Total
{showDetaille
? [...filteredPlatIds].map(pid => renderGroup(pid, pid))
: renderGroup(null, 'consolidated')
}
Net
{netByMonth.map((v, i) => (
{v !== 0 ? fmtEUR(v) : — }
))}
{totalNet !== 0 ? fmtEUR(totalNet) : — }
);
})()}
);
})()}
{/* ====== ONGLET VISION MENSUELLE ====== */}
{activeTab === 'capital-investi' && (() => {
const currentYear = new Date().getFullYear();
const visibleYears = availableYearsAsc.length
? availableYearsAsc.slice(windowStart, windowStart + 3)
: [currentYear];
const canPrev = windowStart > 0;
const canNext = windowStart + 3 < availableYearsAsc.length;
return (
)}
{selected?.nom || '—'}
) : (
)}
{p.nom}