{/* Boutons visibles sur grand écran */}
-
-
-
+ {!isPatrimoine && (
+ <>
+
+
+
+
+ )}
+
+ {isPatrimoine && (
+
+ )}
{/* Bouton burger — visible sur tablette/mobile */}
@@ -444,16 +472,29 @@ export default function Layout() {
Rechercher un projet
-
-
-
-
+ {!isPatrimoine && (
+ <>
+
+
+
+
+
+ )}
+
+ {isPatrimoine && (
+ <>
+
+
+
+ )}
+
+ {selected?.nom}
+
+ )}
+ >
+ {err &&
+ );
+}
diff --git a/frontend/src/components/ValorisationPatrimoineChart.jsx b/frontend/src/components/ValorisationPatrimoineChart.jsx
new file mode 100644
index 0000000..520ec03
--- /dev/null
+++ b/frontend/src/components/ValorisationPatrimoineChart.jsx
@@ -0,0 +1,305 @@
+import { useMemo, useState, useRef } from 'react';
+
+/* ── Constantes ─────────────────────────────────────────────── */
+const BLUE = 'var(--primary)';
+const BG = 'var(--surface)';
+const GRID = 'var(--border)';
+const LABEL = 'var(--text-muted)';
+
+const RANGES = ['1J', '7J', '1M', '3M', 'YTD', '1A', 'TOUT'];
+const MOIS_COURT = ['jan.','fév.','mar.','avr.','mai','juin','juil.','août','sep.','oct.','nov.','déc.'];
+
+const W = 900, H = 260;
+const PAD = { top: 16, right: 16, bottom: 32, left: 70 };
+const plotW = W - PAD.left - PAD.right;
+const plotH = H - PAD.top - PAD.bottom;
+
+/* ── Helpers (identiques à ValorisationPeChart.jsx) ────────────── */
+function fmtK(v) {
+ if (v === 0) return '0 €';
+ const abs = Math.abs(v);
+ if (abs >= 1000) return (v / 1000).toLocaleString('fr-FR', { maximumFractionDigits: 0 }) + ' k €';
+ return v.toLocaleString('fr-FR', { maximumFractionDigits: 0 }) + ' €';
+}
+
+function fmtAxisDate(dateStr, range) {
+ const d = new Date(dateStr + 'T00:00:00');
+ const day = String(d.getDate()).padStart(2, '0');
+ const mon = MOIS_COURT[d.getMonth()];
+ const yr = d.getFullYear();
+ if (range === '1J' || range === '7J') return `${day}/${String(d.getMonth()+1).padStart(2,'0')}`;
+ if (range === '1M' || range === '3M') return `${day} ${mon}`;
+ return `${day}/${String(d.getMonth()+1).padStart(2,'0')}/${String(yr).slice(2)}`;
+}
+
+function fmtValueDisplay(v) {
+ return v.toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + ' €';
+}
+
+/**
+ * Graphique "Historique de valeur" d'un actif de patrimoine (compte ou ligne_patrimoine) —
+ * chantier "Historique de valeur" (30/09/26, demande Olivier). Reprend la structure SVG
+ * dessinée à la main de ValorisationPeChart.jsx (mêmes constantes W/H/PAD, mêmes plages
+ * RANGES, même tooltip au survol), mais avec une sémantique plus simple : un seul actif, une
+ * seule série de points {date, valeur} — pas d'agrégation multi-deals. `rows` est le résultat
+ * brut de GET /api/valorisations-patrimoine?compte_id=...|ligne_patrimoine_id=... (déjà trié
+ * ASC par la route sur date_valorisation, id).
+ *
+ * Contrairement à ValorisationPeChart (qui prend 0 comme valeur de repli "avant tout deal"),
+ * il n'y a pas de "0 avant le premier point" naturel ici : un actif non encore suivi n'avait pas
+ * une valeur de 0, il n'était simplement pas encore renseigné. Le repli utilisé est donc la
+ * valeur du point le plus proche disponible (avant, sinon le premier après).
+ */
+export default function ValorisationPatrimoineChart({ rows, title = 'Historique de valeur' }) {
+ const [range, setRange] = useState('TOUT');
+ const [hover, setHover] = useState(null);
+ const svgRef = useRef(null);
+
+ const todayStr = new Date().toISOString().slice(0, 10);
+
+ /* ── 1. Normalisation de la série ── */
+ const allPoints = useMemo(() => {
+ if (!rows?.length) return [];
+ return rows
+ .filter(r => r.date_valorisation && r.valeur != null)
+ .map(r => ({ date: r.date_valorisation.slice(0, 10), value: r.valeur }));
+ }, [rows]);
+
+ const currentValue = allPoints.length ? allPoints[allPoints.length - 1].value : null;
+ const currentDate = allPoints.length ? allPoints[allPoints.length - 1].date : null;
+
+ /* ── 2. Filtrage par plage ── */
+ const points = useMemo(() => {
+ if (allPoints.length < 2) return [];
+ if (range === 'TOUT') {
+ const pts = [...allPoints];
+ if (pts[pts.length - 1].date < todayStr) pts.push({ date: todayStr, value: pts[pts.length - 1].value });
+ return pts;
+ }
+ const now = new Date(todayStr + 'T00:00:00');
+ let fromDate = new Date(now);
+ switch (range) {
+ case '1J': fromDate.setDate(now.getDate() - 1); break;
+ case '7J': fromDate.setDate(now.getDate() - 7); break;
+ case '1M': fromDate.setMonth(now.getMonth() - 1); break;
+ case '3M': fromDate.setMonth(now.getMonth() - 3); break;
+ case 'YTD': fromDate = new Date(now.getFullYear(), 0, 1); break;
+ case '1A': fromDate.setFullYear(now.getFullYear() - 1); break;
+ }
+ const fromStr = fromDate.toISOString().slice(0, 10);
+ const before = allPoints.filter(p => p.date < fromStr);
+ const after = allPoints.filter(p => p.date >= fromStr);
+ const startV = before.length ? before[before.length - 1].value : (after.length ? after[0].value : allPoints[0].value);
+ const pts = after.length ? [{ date: fromStr, value: startV }, ...after] : [{ date: fromStr, value: startV }];
+ if (pts[pts.length - 1].date < todayStr) pts.push({ date: todayStr, value: pts[pts.length - 1].value });
+ return pts;
+ }, [allPoints, range, todayStr]);
+
+ /* ── 3. Échelles ── */
+ const { xScale, yScale, yTicks, xTicks, minDate, maxDate, yZero } = useMemo(() => {
+ if (points.length < 2) return {};
+ const vals = points.map(p => p.value);
+ const dataMin = Math.min(...vals);
+ const dataMax = Math.max(...vals);
+ const lo = Math.min(0, dataMin);
+ const hi = Math.max(0, dataMax);
+ const pad = (hi - lo) * 0.1 || 10;
+ const scaleLo = lo - (lo < 0 ? pad : 0);
+ const scaleHi = hi + pad;
+ const valRange = scaleHi - scaleLo || 1;
+
+ const ts = points.map(p => new Date(p.date + 'T00:00:00').getTime());
+ const minDt = ts[0];
+ const maxDt = ts[ts.length - 1];
+ const dtRange = maxDt - minDt || 1;
+
+ const xScale = d => PAD.left + ((new Date(d + 'T00:00:00').getTime() - minDt) / dtRange) * plotW;
+ const yScale = v => PAD.top + plotH - ((v - scaleLo) / valRange) * plotH;
+
+ const step = (scaleHi - scaleLo) / 4;
+ const yTicks = Array.from({ length: 5 }, (_, i) => ({ v: scaleLo + step * i, y: yScale(scaleLo + step * i) }));
+
+ const nX = Math.min(8, points.length);
+ const xTicks = Array.from({ length: nX }, (_, i) => {
+ const idx = Math.round((i / (nX - 1)) * (points.length - 1));
+ return points[idx];
+ });
+
+ return { xScale, yScale, yTicks, xTicks, minDate: minDt, maxDate: maxDt, yZero: yScale(0) };
+ }, [points]);
+
+ /* ── 4. Chemins SVG ── */
+ const { linePath, areaPath } = useMemo(() => {
+ if (!xScale || points.length < 2) return { linePath: '', areaPath: '' };
+ let line = `M ${xScale(points[0].date).toFixed(1)},${yScale(points[0].value).toFixed(1)}`;
+ for (let i = 1; i < points.length; i++) {
+ line += ` H ${xScale(points[i].date).toFixed(1)} V ${yScale(points[i].value).toFixed(1)}`;
+ }
+ const zeroY = yZero?.toFixed(1) ?? (PAD.top + plotH).toFixed(1);
+ const area = `${line} V ${zeroY} H ${PAD.left} Z`;
+ return { linePath: line, areaPath: area };
+ }, [points, xScale, yScale, yZero]);
+
+ /* ── 5. Hover ── */
+ const handleMouseMove = (e) => {
+ if (!svgRef.current || !xScale || points.length < 2) return;
+ const rect = svgRef.current.getBoundingClientRect();
+ const svgX = ((e.clientX - rect.left) / rect.width) * W;
+ const t = minDate + ((svgX - PAD.left) / plotW) * (maxDate - minDate);
+ let nearest = points[0], minDiff = Infinity;
+ for (const p of points) {
+ const diff = Math.abs(new Date(p.date + 'T00:00:00').getTime() - t);
+ if (diff < minDiff) { minDiff = diff; nearest = p; }
+ }
+ setHover({ x: xScale(nearest.date), y: yScale(nearest.value), value: nearest.value, date: nearest.date });
+ };
+
+ /* ── Tooltip ── */
+ const tooltipStyle = useMemo(() => {
+ if (!hover) return null;
+ const xPct = (hover.x / W) * 100;
+ const yPct = (hover.y / H) * 100;
+ const anchorRight = xPct > 65;
+ return {
+ position: 'absolute',
+ top: `calc(${yPct}% - 64px)`,
+ left: anchorRight ? 'auto' : `calc(${xPct}% + 12px)`,
+ right: anchorRight ? `calc(${100 - xPct}% + 12px)` : 'auto',
+ transform: 'none',
+ pointerEvents: 'none',
+ };
+ }, [hover]);
+
+ if (!allPoints.length) return null;
+
+ // Moins de 2 points : rien à tracer (une droite a besoin de 2 points), on affiche juste la
+ // valeur connue et une note plutôt que rien du tout — meilleur que de masquer complètement
+ // le bloc, l'utilisateur comprend pourquoi il n'y a pas encore de courbe.
+ if (allPoints.length < 2) {
+ return (
+ ;
+ if (err) return
+
+
+ {fmtPct(ligne.valeur_eur, grandTotal)}
+ {ligne.detenteur || '—'}
+
+ {sansValeur
+ ? Non renseigné
+ : fmtEUR(ligne.valeur_eur)}
+
+ —
+
+ );
+}
+
+// Bouton "+" par regroupement retire (chantier "Completer mon patrimoine", 30/09/26
+// (suite), demande Olivier) : faisait doublon avec le bouton "+ Completer mon patrimoine" de
+// la topbar (PatrimoineAjoutModal.jsx), qui couvre desormais tous les regroupements (pas
+// seulement les structurellement_vide) et propose en plus le sous-choix d'actifs par icone.
+
+// Ligne de regroupement (racine ou enfant, ex. Private Equity sous Comptes d'investissement) —
+// dépliable dès qu'elle a au moins une ligne de détail ou un enfant.
+function RegroupementRow({ node, depth, grandTotal, expanded, toggle }) {
+ const key = `r:${node.id}`;
+ const isOpen = expanded.has(key);
+ const hasChildren = (node.lignes && node.lignes.length > 0) || (node.enfants && node.enfants.length > 0);
+ const valeur = valeurRegroupement(node);
+ const pctText = (node.structurellement_vide || node.portefeuille_a_venir) ? '—' : fmtPct(node.total_eur, grandTotal);
+
+ return (
+ <>
+ hasChildren && toggle(key)}>
+
+
+ {hasChildren ?
+ {pctText}
+ {valeur.text}
+ —
+
+ {isOpen && node.lignes.map(l => (
+
+
+ {loading &&
Affichage
@@ -491,6 +532,9 @@ export default function Layout() {
setPatrimoineAjoutOpen(false)} />
+ )}
);
}
diff --git a/frontend/src/components/PatrimoineAjoutModal.jsx b/frontend/src/components/PatrimoineAjoutModal.jsx
new file mode 100644
index 0000000..ab70190
--- /dev/null
+++ b/frontend/src/components/PatrimoineAjoutModal.jsx
@@ -0,0 +1,208 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../api.js';
+import Modal from './Modal.jsx';
+import { useWorkspace } from '../context/WorkspaceContext.jsx';
+
+/**
+ * components/PatrimoineAjoutModal.jsx èè modale "+ Compléter mon patrimoine"
+ * (chantier du 30/09/26, demande Olivier). écran 1 : catégories (regroupements
+ * patrimoniaux racine, icône + courte explication). écran 2 : sous-choix d'actifs
+ * (enveloppes du référentiel rattachées à la catégorie choisie
+ * + ses enfants), chacune menant à la saisie (nouvelle ligne de patrimoine). Cf.
+ * claude/plan_visualisation_actif.md pour le cadrage complet (3 décisions via
+ * AskUserQuestion le 30/09/26).
+ *
+ * Cas particuliers :
+ * - Crowdlending / Private Equity (enfants de "Comptes d'investissement") : tuiles dédiées
+ * qui basculent le workspace actif puis ouvrent /plateformes èè même logique que
+ * le clic sur une ligne du tableau de bord Patrimoine (DashboardPatrimoine.jsx). Grisées
+ * si le workspace correspondant n'est pas actif pour l'utilisateur.
+ * - Passif (Emprunts) : pas d'enveloppe de référentiel (table `emprunts` séparée)
+ * èè une seule tuile "Nouvel emprunt" renvoyant vers Paramétres > Mes emprunts,
+ * même principe que le bouton "Modifier dans Paramétres" de ActifApercu.jsx.
+ */
+
+const I = ({ children }) => (
+
+);
+
+const IconImmobilier = () => {err}
}
+ {!err && !regroupements && Chargement…
}
+
+ {!err && regroupements && step === 'categorie' && (
+
+ {racines.map(r => (
+
+ ))}
+
+ )}
+
+ {!err && regroupements && step === 'actif' && (
+
+ {actifTiles.length === 0 && (
+
+ )}
+ Aucun type d'actif disponible dans cette catégorie pour le moment.
+ )}
+ {actifTiles.map(t => (
+
+ ))}
+
+
+ );
+ }
+
+ const displayDate = hover
+ ? new Date(hover.date + 'T00:00:00').toLocaleDateString('fr-FR', { day: '2-digit', month: 'long', year: 'numeric' })
+ : new Date(currentDate + 'T00:00:00').toLocaleDateString('fr-FR', { day: '2-digit', month: 'long', year: 'numeric' });
+ const displayValue = fmtValueDisplay(hover ? hover.value : currentValue);
+ const tooltipDate = hover
+ ? new Date(hover.date + 'T00:00:00').toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' })
+ : null;
+
+ return (
+
+
+
+
+
+ {title} · {new Date(currentDate + 'T00:00:00').toLocaleDateString('fr-FR', { day: '2-digit', month: 'long', year: 'numeric' })}
+
+ {fmtValueDisplay(currentValue)}
+ + Un seul point d'historique pour l'instant — la courbe apparaîtra dès la prochaine mise à jour de la valeur. +
+
+
+ {/* ── En-tête ── */}
+
+ );
+}
diff --git a/frontend/src/pages/ActifApercu.jsx b/frontend/src/pages/ActifApercu.jsx
new file mode 100644
index 0000000..e338b9f
--- /dev/null
+++ b/frontend/src/pages/ActifApercu.jsx
@@ -0,0 +1,167 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { api } from '../api.js';
+import { fmtEUR, fmtDate } from '../utils/format.js';
+import ValorisationPatrimoineChart from '../components/ValorisationPatrimoineChart.jsx';
+
+/**
+ * pages/ActifApercu.jsx — page "Gestion d'un actif" (lecture) pour un compte ou un emprunt
+ * existant (chantier "Visualisation d'un actif", Étape 3, 30/09/26 — cf.
+ * claude/plan_visualisation_actif.md). Contrairement à LignePatrimoineDetail.jsx (lignes de
+ * patrimoine, CRUD complet), cette page est volontairement en lecture seule : décision #4
+ * d'Olivier ("Il faut en faire un lien [...] cela reste limité au type de compte qui sont
+ * selectionnables par choix dans le référentiel") — Paramètres reste la source des infos
+ * structurelles pour un compte/emprunt, cette page s'y lie plutôt que de les dupliquer.
+ *
+ * Pas de section Transactions ici (Point à valider #1, réponse recommandée retenue :
+ * comptes.solde_eur reste en saisie directe en v1, les transactions sont réservées aux lignes
+ * de patrimoine) ni de section Positions (non pertinent pour un compte/emprunt). Pas de section
+ * Paramétrage éditable : un bouton "Modifier dans Paramètres" renvoie vers l'écran existant
+ * (Paramètres > Mes comptes / Mes emprunts).
+ *
+ * Route `/patrimoine/actif/:type/:id` avec `type` = "compte" | "emprunt" (cf. App.jsx).
+ * Atteinte depuis DashboardPatrimoine.jsx en cliquant une ligne de ce type.
+ */
+
+const TYPE_META = {
+ compte: { label: 'Compte', settingsSection: 'comptes', listPath: '/comptes' },
+ emprunt: { label: 'Emprunt', settingsSection: 'emprunts', listPath: '/emprunts' },
+};
+
+export default function ActifApercu() {
+ const { type, id } = useParams();
+ const navigate = useNavigate();
+ const meta = TYPE_META[type];
+
+ const [row, setRow] = useState(null);
+ const [valorisations, setValorisations] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [err, setErr] = useState(null);
+
+ useEffect(() => {
+ if (!meta) return;
+ setLoading(true);
+ setErr(null);
+ // Pas de GET /:id côté backend (comptes.js/emprunts.js n'exposent qu'un GET / — même
+ // patron que Paramètres > Mes comptes/Mes emprunts, qui chargent déjà toute la liste) : on
+ // réutilise la liste complète et on filtre côté client, sans ajouter de route backend pour
+ // un seul champ de lecture.
+ //
+ // Historique de valeur (30/09/26, demande Olivier) : uniquement pour les comptes — les
+ // emprunts sont explicitement hors périmètre de ce chantier (décision Olivier : "Non,
+ // actifs uniquement").
+ Promise.all([
+ api.get(meta.listPath),
+ type === 'compte' ? api.get('/valorisations-patrimoine', { compte_id: id }) : Promise.resolve([]),
+ ])
+ .then(([rows, valo]) => {
+ const found = rows.find(r => String(r.id) === String(id));
+ if (!found) throw new Error('Actif introuvable');
+ setRow(found);
+ setValorisations(valo);
+ })
+ .catch(e => setErr(e.message))
+ .finally(() => setLoading(false));
+ }, [type, id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ if (!meta) return
+
+
+ {/* ── SVG ── */}
+ {xScale && (
+
+ )}
+
+ {/* ── Tooltip flottant ── */}
+ {hover && tooltipStyle && (
+
+
+ {title} · {displayDate}
+ {displayValue}
+
+
+
+ {RANGES.map(r => (
+
+ ))}
+
+
+
+ )}
+
+ {tooltipDate}
+ {fmtValueDisplay(hover.value)}
+
+ Type d'actif inconnu.
;
+ if (loading) return Chargement…
{err}
;
+
+ return (
+ <>
+
+
+
+ + + {row.nom} +
+
+
+
+ {type === 'compte' && (
+
+ {type === 'compte' && (
+
+
+
+ )}
+ {type === 'emprunt' && (
+ <>
+ Solde
+
+ {row.solde_eur == null
+ ? Non renseigné
+ : fmtEUR(row.solde_eur)}
+
+
+
+ Capital restant dû
+ {fmtEUR(row.capital_restant_du)}
+
+
+ {row.taux_nominal != null && (
+ Montant emprunté
+ {fmtEUR(row.montant_emprunte)}
+
+
+ )}
+ {row.mensualite != null && (
+ Taux nominal
+ {row.taux_nominal} %
+
+
+ )}
+ {row.date_debut && (
+ Mensualité
+ {fmtEUR(row.mensualite)}
+
+
+ )}
+ {row.duree_mois != null && (
+ Date de début
+ {fmtDate(row.date_debut)}
+
+
+ )}
+
+ )}
+ {row.enveloppe_nom && (
+ Durée
+ {row.duree_mois} mois
+
+
+ )}
+ {(row.institution_nom || row.banque) && (
+ Enveloppe
+ {row.enveloppe_nom}
+
+
+ )}
+ {row.investisseur_nom && (
+ Établissement
+ {row.institution_nom || row.banque}
+
+
+ )}
+ Détenteur
+ {row.investisseur_nom}
+
+
+ )}
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/DashboardPatrimoine.jsx b/frontend/src/pages/DashboardPatrimoine.jsx
new file mode 100644
index 0000000..66a322c
--- /dev/null
+++ b/frontend/src/pages/DashboardPatrimoine.jsx
@@ -0,0 +1,364 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import PageIcon from '../components/PageIcon.jsx';
+import { api } from '../api.js';
+import { useInvestisseur } from '../context/InvestisseurContext.jsx';
+import { useWorkspace } from '../context/WorkspaceContext.jsx';
+import { fmtEUR } from '../utils/format.js';
+
+/**
+ * Tableau de bord du workspace "Patrimoine" (chantier du 28/09/26, demande Olivier — cf.
+ * claude/plan_workspace_patrimoine.md pour le cadrage complet). Vue consolidée en lecture
+ * seule par regroupement patrimonial (Admin > Regroupements — cf. AdminEnveloppes.jsx), un
+ * seul dashboard pour démarrer (décision Olivier, AskUserQuestion "Un seul dashboard
+ * consolidé (recommandé pour démarrer)"). Données : GET /api/dashboard-patrimoine (backend).
+ *
+ * Rendu en tableau (29/09/26, retour d'Olivier après avoir partagé des captures d'une autre
+ * application patrimoniale en référence : "rajouter un sorte d'organisation en tableau avec le
+ * nom, la répartition, le détenteur, la valeur, la +- values") — colonnes Nom / Répartition /
+ * Détenteur / Valeur / +/- value, lignes dépliables (regroupement → ses enfants + ses lignes de
+ * détail, cf. RegroupementRow). Remplace la précédente présentation en cartes empilées.
+ *
+ * Actif/Passif en onglets (30/09/26, retour d'Olivier avec capture d'écran à l'appui : "un
+ * système de tabulation avec actif et passif") — un seul tableau visible à la fois, via le
+ * composant .dr-tabs/.dr-tab déjà utilisé ailleurs dans l'app (Frais.jsx, TaxReport.jsx,
+ * Plateformes.jsx…). Remplace la présentation précédente où Actif et Passif étaient empilés
+ * l'un sous l'autre en permanence. L'onglet "Passifs" n'est même pas affiché s'il n'y a aucun
+ * regroupement de type passif (garde défensive — en pratique "Passif" existe toujours, seedé
+ * par db/index.js).
+ *
+ * "+/- value" est TOUJOURS affichée "—" avec une info-bulle explicative : contrairement aux
+ * captures de référence d'Olivier, l'app ne conserve aucun historique de valeur pour
+ * comptes.solde_eur ni emprunts.capital_restant_du (valeurs instantanées, écrasées à chaque
+ * saisie) — un vrai calcul de plus/moins-value nécessiterait de capturer un solde à chaque
+ * date, hors périmètre de ce chantier (cf. "Points ouverts", plan_workspace_patrimoine.md).
+ *
+ * "Répartition" est le poids de la ligne dans le total du tableau (total actif ou total passif
+ * selon la section) — une échelle commune à toutes les lignes, y compris les lignes de détail
+ * dépliées, pour rester comparable d'une ligne à l'autre quel que soit son niveau.
+ *
+ * "Détenteur" (29/09/26, retour d'Olivier, 3e puis 4e passe) n'est affiché QUE sur les lignes
+ * de détail (compte, emprunt, ou plateforme Crowdlending/Private Equity, cf. LigneRow) — jamais
+ * sur une ligne de regroupement (RegroupementRow, ex. "Comptes d'investissement", "Private
+ * Equity", "Crowdlending"), même quand toutes ses lignes partagent le même détenteur. Capture
+ * d'écran d'Olivier à l'appui, surlignant "Olivier CROGUENNEC" sur "Comptes d'investissement"/
+ * "Private Equity" et "Plusieurs" sur "Crowdlending" : *"Je voudrais que tu garde le nom des
+ * détenteurs uniquement pour les produits ou les plateformes."* La cellule Détenteur d'une
+ * RegroupementRow était d'abord passée à "—" fixe (sans agrégation — l'ancienne fonction
+ * detenteurAgrege, qui remontait un nom unique ou "Plusieurs" au niveau du regroupement, a été
+ * retirée), puis Olivier a demandé une cellule vraiment vide plutôt qu'un tiret : *"Je veux un
+ * vide à la place pas des tirets."* La cellule est donc désormais vide (aucun texte, aucun
+ * tiret) sur toute RegroupementRow.
+ *
+ * Notions à distinguer (propagées depuis le backend, cf. dashboardPatrimoine.js) :
+ * - `structurellement_vide` : regroupement qui ne peut recevoir AUCUN solde saisi aujourd'hui
+ * (Immobilier, Autres actifs) — Valeur et Répartition affichées "—".
+ * - `portefeuille_a_venir` : Crowdlending/Private Equity sans accès utilisateur — ne devrait
+ * jamais s'afficher en pratique (filtré par le useMemo `regroupements` ci-dessous), gardé
+ * en repli défensif.
+ * - `source_portefeuille` : Crowdlending/Private Equity avec accès — Valeur = capital investi
+ * réel du workspace dédié.
+ */
+
+function KpiCard({ title, value, note, color }) {
+ return (
+ Paramétrage
++ Les informations de ce {meta.label.toLowerCase()} (nom, établissement, enveloppe, détenteur{type === 'compte' ? ', solde' : ''}) + se gèrent depuis Paramètres — cette page n'en est qu'un aperçu, pour rester la source unique de vérité. +
+ +
+
+ );
+}
+
+function IconChevron({ open }) {
+ return (
+
+ );
+}
+
+const PLUS_MOINS_VALUE_TITLE = "Non disponible : l'application ne conserve pas d'historique de valeur pour ces montants (soldes et capital investi sont des valeurs instantanées)";
+
+function fmtPct(value, total) {
+ // value peut être null (compte "déclaré" en Paramètres sans solde saisi, cf. LigneRow) — la
+ // coercition JS (null / total) donnerait 0,0 %, ce qui laisserait croire à un poids nul dans
+ // le patrimoine plutôt qu'à une valeur simplement inconnue.
+ if (value == null || !total) return '—';
+ return `${(value / total * 100).toFixed(1).replace('.', ',')} %`;
+}
+
+// Texte + info-bulle de la cellule Valeur d'une ligne de regroupement — mêmes cas particuliers
+// que l'ancienne RegroupementValue (cf. commentaire d'en-tête), condensés pour tenir dans une
+// cellule de tableau.
+function valeurRegroupement(node) {
+ if (node.structurellement_vide) {
+ return { text: '—', title: 'Pas encore de saisie possible ici (à venir avec le suivi détaillé du patrimoine)' };
+ }
+ if (node.portefeuille_a_venir) {
+ return { text: '—', title: 'Portefeuille géré dans le workspace dédié — non accessible pour votre compte' };
+ }
+ if (node.source_portefeuille) {
+ return { text: fmtEUR(node.total_eur), title: `Capital investi — portefeuille du workspace ${node.nom}` };
+ }
+ if (node.nb_comptes_avec_solde === 0 && node.nb_comptes_sans_solde === 0) {
+ return { text: fmtEUR(node.total_eur), title: 'Aucun compte rattaché' };
+ }
+ const detail = `${node.nb_comptes_avec_solde} compte${node.nb_comptes_avec_solde > 1 ? 's' : ''} renseigné${node.nb_comptes_avec_solde > 1 ? 's' : ''}`
+ + (node.nb_comptes_sans_solde > 0 ? ` · ${node.nb_comptes_sans_solde} sans solde saisi` : '');
+ return { text: fmtEUR(node.total_eur), title: detail };
+}
+
+// Icône établissement/plateforme devant chaque ligne de détail (30/09/26, demande d'Olivier,
+// capture à l'appui — une ligne "LDD Solidaire - Capucine" avec le logo Crédit Agricole devant
+// le libellé) : "Peux-tu mettre en place des icones (plateformes ou institutions financières)
+// devant les actifs". Le backend (dashboardPatrimoine.js) expose désormais icone_filename/
+// logo_filename sur chaque ligne — institutions_referentiel pour les comptes/emprunts,
+// plateformes pour Crowdlending/Private Equity — servis au même endroit que partout ailleurs
+// dans l'app (/api/logos/:filename, cf. ComptesSection.jsx/PlatSelector.jsx) : icône carrée
+// dédiée en priorité, repli sur le logo large si aucune icône n'a été téléversée, rien si ni
+// l'un ni l'autre (compte en texte libre sans institution liée, plateforme sans logo).
+const API_BASE = (import.meta.env.VITE_API_URL || '/api').replace(/\/api$/, '');
+function ligneIconUrl(ligne) {
+ const filename = ligne.icone_filename || ligne.logo_filename;
+ return filename ? `${API_BASE}/api/logos/${filename}` : null;
+}
+
+// Ligne de détail (feuille — compte, emprunt, ou plateforme Crowdlending/Private Equity).
+//
+// 30/09/26, retour d'Olivier ("La déclaration des comptes courant faite dans les paramètres
+// n'apparaissent pas") : un compte peut désormais apparaître ici avec `valeur_eur: null` — il a
+// été "déclaré" (référencé) dans Paramètres, avec sa banque et son détenteur, sans qu'un solde
+// ait été saisi. But initial de la déclaration selon Olivier : "indiquer d'où venait l'argent et
+// où les remboursements pouvaient atterrir", pas nécessairement suivre un montant. On affiche
+// alors "Non renseigné" plutôt qu'une cellule vide (fmtEUR(null) retourne '') ou trompeuse
+// (fmtPct calculerait sinon 0,0 % via la coercition JS null → 0).
+function LigneRow({ ligne, depth, grandTotal }) {
+ const navigate = useNavigate();
+ const sansValeur = ligne.valeur_eur == null;
+ const icon = ligneIconUrl(ligne);
+ // Étape 3 (30/09/26) — compte/emprunt ouvrent désormais ActifApercu.jsx (lecture seule,
+ // lien vers Paramètres) en plus des lignes_patrimoine (page CRUD complète). Les plateformes
+ // Crowdlending/Private Equity (type plateforme_cl/plateforme_pe) restent non cliquables ici
+ // — Étape 4, non implementée (cf. claude/plan_visualisation_actif.md).
+ const { activeWorkspaces, setActiveWorkspace } = useWorkspace() || {};
+ const isPlateforme = ligne.type === 'plateforme_cl' || ligne.type === 'plateforme_pe';
+ const clickable = ligne.type === 'ligne_patrimoine' || ligne.type === 'compte' || ligne.type === 'emprunt' || isPlateforme;
+
+ function handleClick() {
+ if (ligne.type === 'ligne_patrimoine') { navigate(`/patrimoine/lignes/${ligne.id}`); return; }
+ if (ligne.type === 'compte' || ligne.type === 'emprunt') { navigate(`/patrimoine/actif/${ligne.type}/${ligne.id}`); return; }
+ if (isPlateforme) {
+ const wsType = ligne.type === 'plateforme_cl' ? 'crowdlending' : 'private_equity';
+ const target = (activeWorkspaces || []).find(w => w.type === wsType);
+ // Workspace accorde (access.*) mais desactive par l'utilisateur (Parametres > Mes
+ // espaces de travail) : pas dans activeWorkspaces, donc pas de bascule possible ici -
+ // cette ligne n'aurait de toute facon pas du apparaitre (cf. access.crowdlending/
+ // private_equity cote backend), garde defensive plutot qu'un crash silencieux.
+ if (!target) return;
+ setActiveWorkspace(target.id);
+ navigate('/plateformes');
+ }
+ }
+
+ return (
+ {title}
+ {value}
+ {note && {note}
}
+
+ {icon && (
+ 
+ )}
+
+
+
+ {ligne.label}
+
+ {ligne.sous_label || '—'}
+ {ligne.nb_lignes > 1 && ` · ${ligne.nb_lignes} investissements`}
+
+
+
+
+
+
+ );
+}
+
+export default function DashboardPatrimoine() {
+ const { activeId, activeView } = useInvestisseur();
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [err, setErr] = useState(null);
+ const [expanded, setExpanded] = useState(() => new Set());
+ // Onglets Actifs/Passifs (30/09/26, demande Olivier avec capture d'écran à l'appui : "un
+ // système de tabulation avec actif et passif") — même composant .dr-tabs/.dr-tab que le
+ // reste de l'app (Frais.jsx, TaxReport.jsx, Plateformes.jsx…), état local simple comme sur
+ // Frais.jsx (pas de persistance URL/localStorage nécessaire ici, un seul dashboard).
+ const [activeTab, setActiveTab] = useState('actifs');
+
+ // Filtre par détenteur actif (30/09/26, retour d'Olivier : "La sélection d'un détenteur ne
+ // semble pas filtrer le patrimoine") — même convention que Dashboard.jsx/DashboardPe.jsx :
+ // activeView === 'all' ("toute la famille") envoie ?scope=all, sinon le header
+ // X-Investisseur-Id (ajouté automatiquement par api.js depuis activeId) filtre sur le seul
+ // investisseur actif. On refetch à chaque changement de profil actif.
+ useEffect(() => {
+ if (!activeId && activeView !== 'all') return;
+ const scopeParams = activeView === 'all' ? { scope: 'all' } : undefined;
+ setLoading(true);
+ setErr(null);
+ api.get('/dashboard-patrimoine', scopeParams)
+ .then(setData)
+ .catch(e => setErr(e.message))
+ .finally(() => setLoading(false));
+ }, [activeId, activeView]);
+
+ const toggle = (key) => {
+ setExpanded(prev => {
+ const next = new Set(prev);
+ if (next.has(key)) next.delete(key); else next.add(key);
+ return next;
+ });
+ };
+
+ // Filtre "respect de l'accès utilisateur" (décision Olivier) : Crowdlending / Private Equity
+ // ne sont même pas affichés si l'utilisateur n'a pas accès au workspace correspondant — cf.
+ // backend routes/dashboardPatrimoine.js (access.crowdlending / access.private_equity).
+ //
+ // 30/09/26 : Crowdlending a été réintégré comme sous-regroupement de "Comptes
+ // d'investissement" (même statut que Private Equity, cf. claude/
+ // plan_regroupements_patrimoniaux.md) — il n'apparaît donc plus jamais au niveau racine de
+ // `data.regroupements`, seulement dans les `enfants` de "Comptes d'investissement". Le filtre
+ // par accès porte désormais uniquement sur les enfants, pour les deux noms.
+ const regroupements = useMemo(() => {
+ if (!data) return [];
+ return data.regroupements.map(r => ({
+ ...r,
+ enfants: r.enfants.filter(c =>
+ (c.nom !== 'Private Equity' || data.access.private_equity) &&
+ (c.nom !== 'Crowdlending' || data.access.crowdlending)
+ ),
+ }));
+ }, [data]);
+
+ const actifs = regroupements.filter(r => r.type === 'actif');
+ const passifs = regroupements.filter(r => r.type === 'passif');
+
+ return (
+ <>
+ | Nom | +Répartition | +Détenteur | +Valeur | ++/- value | +
|---|
Chargement…
}
+ {err && {err}
}
+
+ {!loading && !err && data && (
+ <>
+
+ = 0 ? 'var(--success)' : 'var(--danger)'}
+ />
+
+
+
+
+ {passifs.length > 0 && (
+
+ )}
+
+
+ {activeTab === 'actifs' || passifs.length === 0 ? (
+ + Les soldes affichés proviennent de la saisie manuelle sur vos comptes (Paramètres + > Mes comptes courants), à l'exception de Crowdlending et Private Equity, qui + reprennent le capital investi déjà affiché dans leur propre workspace. Les + regroupements marqués « — » ne sont pas encore couverts par cette vue consolidée. + La colonne « +/- value » n'est pas encore disponible (aucun historique de valeur + n'est conservé aujourd'hui). +
+ + )} + + ); +} diff --git a/frontend/src/pages/LignePatrimoineDetail.jsx b/frontend/src/pages/LignePatrimoineDetail.jsx new file mode 100644 index 0000000..641d7ea --- /dev/null +++ b/frontend/src/pages/LignePatrimoineDetail.jsx @@ -0,0 +1,466 @@ +import { useEffect, useMemo, useState } from 'react'; +import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; +import { api } from '../api.js'; +import Modal from '../components/Modal.jsx'; +import ConfirmModal from '../components/ConfirmModal.jsx'; +import ValorisationPatrimoineChart from '../components/ValorisationPatrimoineChart.jsx'; +import { fmtEUR, fmtDate, today } from '../utils/format.js'; +import { useAsyncAction } from '../hooks/useAsyncAction.js'; + +/** + * pages/LignePatrimoineDetail.jsx — page "Gestion d'un actif" pour une ligne_patrimoine + * (chantier "Visualisation d'un actif", relance Phase 3b, 30/09/26 — cf. demande d'Olivier : + * "j'aimerais travailler sur une notion de visualisation d'un actif [...] avoir un apercu de + * l'actif (graphique, KPI, etc..), [...] pouvoir rajouter la notion de transactions et une + * notion de parametrages" — cadrage complet dans claude/plan_visualisation_actif.md). + * + * Route `/patrimoine/lignes/:id` (`id` = "nouveau" pour la creation, cf. App.jsx) — atteinte + * depuis DashboardPatrimoine.jsx en cliquant une ligne de type `ligne_patrimoine`, ou le bouton + * "+" d'un regroupement structurellement vide (Immobilier, Autres actifs...), qui passe + * `?enveloppe_id=X®roupement_id=Y` pour pre-remplir/filtrer le selecteur Enveloppe. Le + * bouton retour ramene toujours au dashboard patrimoine (route `/`, cf. WorkspaceHome). + * + * 3 sections, comme demande ("un apercu de l'actif [...], visualiser les positions [...] si + * pertinent, [...] transactions et [...] parametrages") : Apercu (valeur actuelle + contexte), + * Transactions (uniquement en edition — une ligne doit exister avant d'avoir des + * transactions), Parametrage (le formulaire de la ligne elle-meme, reutilise pour la creation). + * Pas de section "Positions" ici : les positions (=lignes d'investissement, cf. demande + * d'Olivier) concernent Crowdlending/Private Equity, gerees dans leurs workspaces dedies — hors + * perimetre d'une ligne_patrimoine, qui est une position unique par construction. + * + * Convention de signe reprise de la migration transactions_patrimoine (db/index.js) : + * depot/achat ajoutent, retrait/vente retranchent (saisis en positif dans le formulaire, comme + * valide cote Zod backend), reevaluation est une variation signee directe (peut etre negative). + */ + +const TYPE_LABELS = { depot: 'Dépôt', retrait: 'Retrait', achat: 'Achat', vente: 'Vente', reevaluation: 'Réévaluation' }; + +function IcoDots() { + return ; +} +function IcoEdit() { + return ; +} +function IcoTrash() { + return ; +} +function MenuBtn({ onClick, icon, label, danger = false }) { + return ( + + ); +} + +function emptyTransForm() { + return { type: 'depot', montant: '', date_operation: today(), libelle: '', notes: '' }; +} +function emptyLigneForm(enveloppeIdPrefill) { + return { nom: '', enveloppe_id: enveloppeIdPrefill || '', institution_id: '', investisseur_id: '', valeur_eur: '', notes: '' }; +} + +// Valeur courante calculee depuis un historique de transactions — meme formule que +// lignesPatrimoineStmt cote backend (dashboardPatrimoine.js) : depot/achat ajoutent, +// retrait/vente retranchent, reevaluation est une variation signee directe. +function valeurDepuisTransactions(transactions) { + if (transactions.length === 0) return null; + return transactions.reduce((s, t) => { + if (t.type === 'depot' || t.type === 'achat') return s + t.montant; + if (t.type === 'retrait' || t.type === 'vente') return s - t.montant; + return s + t.montant; // reevaluation + }, 0); +} + +// Chantier "Historique de valeur" (30/09/26, demande Olivier) : quand une ligne a des +// transactions, sa valeur "officielle" est le cumul des transactions (valeurDepuisTransactions +// ci-dessus), pas la table valorisations_patrimoine (qui ne suit que la saisie directe +// valeur_eur, jamais mise a jour une fois que des transactions existent — cf. +// utils/valorisationsPatrimoine.js et lignesPatrimoine.js). Le graphique doit donc tracer CETTE +// serie cumulative-la, pas l'historique de valorisations_patrimoine, pour rester coherent avec +// la valeur actuelle affichee au-dessus. On reconstruit une serie au meme format que +// valorisations_patrimoine ({date_valorisation, valeur}) pour reutiliser +// ValorisationPatrimoineChart sans lui ajouter un second format d'entree. +function seriesDepuisTransactions(transactions) { + if (!transactions.length) return []; + const asc = [...transactions].sort((a, b) => a.date_operation.localeCompare(b.date_operation) || a.id - b.id); + let cum = 0; + const out = []; + for (const t of asc) { + if (t.type === 'depot' || t.type === 'achat') cum += t.montant; + else if (t.type === 'retrait' || t.type === 'vente') cum -= t.montant; + else cum += t.montant; // reevaluation + const d = t.date_operation.slice(0, 10); + if (out.length && out[out.length - 1].date_valorisation === d) { + out[out.length - 1].valeur = cum; + } else { + out.push({ date_valorisation: d, valeur: cum }); + } + } + return out; +} + +export default function LignePatrimoineDetail() { + const { id } = useParams(); + const [searchParams] = useSearchParams(); + const navigate = useNavigate(); + const isNew = id === 'nouveau'; + + const [ligne, setLigne] = useState(null); + const [transactions, setTransactions] = useState([]); + const [valorisations, setValorisations] = useState([]); + const [enveloppes, setEnveloppes] = useState([]); + const [institutions, setInstitutions] = useState([]); + const [investisseurs, setInvestisseurs] = useState([]); + const [loading, setLoading] = useState(true); + const [err, setErr] = useState(null); + + const [form, setForm] = useState(() => emptyLigneForm(searchParams.get('enveloppe_id'))); + + const { run, pending } = useAsyncAction(); + const { run: runTrans, pending: pendingTrans } = useAsyncAction(); + + const [transModalOpen, setTransModalOpen] = useState(false); + const [transForm, setTransForm] = useState(emptyTransForm()); + const [editingTransId, setEditingTransId] = useState(null); + const [deleteTransId, setDeleteTransId] = useState(null); + const [deleteLigneConfirm, setDeleteLigneConfirm] = useState(false); + const [openMenu, setOpenMenu] = useState(null); + const [saveErr, setSaveErr] = useState(null); + + useEffect(() => { + setLoading(true); + setErr(null); + Promise.all([ + api.get('/enveloppes-referentiel-public'), + api.get('/institutions-referentiel-public'), + api.get('/investisseurs'), + isNew ? Promise.resolve(null) : api.get(`/lignes-patrimoine/${id}`), + isNew ? Promise.resolve([]) : api.get('/transactions-patrimoine', { ligne_patrimoine_id: id }), + isNew ? Promise.resolve([]) : api.get('/valorisations-patrimoine', { ligne_patrimoine_id: id }), + ]) + .then(([env, inst, invs, lp, trans, valo]) => { + setEnveloppes(env); + setInstitutions(inst); + setInvestisseurs(invs); + if (lp) { + setLigne(lp); + setForm({ + nom: lp.nom, + enveloppe_id: String(lp.enveloppe_id), + institution_id: lp.institution_id ? String(lp.institution_id) : '', + investisseur_id: lp.investisseur_id ? String(lp.investisseur_id) : '', + valeur_eur: lp.valeur_eur ?? '', + notes: lp.notes || '', + }); + } + setTransactions(trans || []); + setValorisations(valo || []); + }) + .catch(e => setErr(e.message)) + .finally(() => setLoading(false)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [id, isNew]); + + const nbTransactions = transactions.length; + const valeurCalculee = useMemo(() => valeurDepuisTransactions(transactions), [transactions]); + const valeurActuelle = nbTransactions > 0 + ? valeurCalculee + : (form.valeur_eur !== '' ? Number(form.valeur_eur) : null); + const chartRows = useMemo( + () => (nbTransactions > 0 ? seriesDepuisTransactions(transactions) : valorisations), + [nbTransactions, transactions, valorisations] + ); + + // Filtre le selecteur Enveloppe au regroupement d'origine (query param a la creation, sinon + // celui de la ligne deja rattachee) — non contraint en base ni cote Zod (cf. commentaire + // d'en-tete de lignesPatrimoine.js), filtrage purement cote frontend, meme principe que le + // selecteur Enveloppe de Parametres > Mes comptes (restreint a eligible_compte=1, ici + // restreint au regroupement d'origine). + const regroupementId = searchParams.get('regroupement_id') || ligne?.regroupement_patrimonial_id; + const enveloppesFiltrees = useMemo(() => { + if (!regroupementId) return enveloppes; + return enveloppes.filter(e => String(e.regroupement_patrimonial_id) === String(regroupementId)); + }, [enveloppes, regroupementId]); + + function handleSaveLigne(e) { + e?.preventDefault?.(); + setSaveErr(null); + return run(async () => { + try { + const body = { + nom: form.nom, + enveloppe_id: Number(form.enveloppe_id), + institution_id: form.institution_id ? Number(form.institution_id) : null, + investisseur_id: form.investisseur_id ? Number(form.investisseur_id) : null, + // La valeur saisie directement n'est envoyee que s'il n'y a pas de transaction — au + // backend elle reste stockee telle quelle (repli de lignesPatrimoineStmt), mais le + // champ est desactive cote UI des qu'une transaction existe pour eviter toute + // confusion sur laquelle des deux fait foi. + valeur_eur: form.valeur_eur !== '' ? Number(form.valeur_eur) : null, + notes: form.notes || null, + }; + if (isNew) { + const created = await api.post('/lignes-patrimoine', body); + navigate(`/patrimoine/lignes/${created.id}`, { replace: true }); + } else { + await api.put(`/lignes-patrimoine/${id}`, body); + const refreshed = await api.get(`/lignes-patrimoine/${id}`); + setLigne(refreshed); + } + } catch (err) { + setSaveErr(err.message); + } + }); + } + + function handleDeleteLigne() { + return run(async () => { + await api.del(`/lignes-patrimoine/${id}`); + navigate('/'); + }); + } + + function openNewTrans() { + setEditingTransId(null); + setTransForm(emptyTransForm()); + setTransModalOpen(true); + } + function openEditTrans(t) { + setEditingTransId(t.id); + setTransForm({ type: t.type, montant: String(t.montant), date_operation: t.date_operation, libelle: t.libelle || '', notes: t.notes || '' }); + setTransModalOpen(true); + setOpenMenu(null); + } + + function handleSaveTrans(e) { + e?.preventDefault?.(); + return runTrans(async () => { + const body = { + ligne_patrimoine_id: Number(id), + date_operation: transForm.date_operation, + type: transForm.type, + montant: Number(transForm.montant), + libelle: transForm.libelle || null, + notes: transForm.notes || null, + }; + if (editingTransId) { + await api.put(`/transactions-patrimoine/${editingTransId}`, body); + } else { + await api.post('/transactions-patrimoine', body); + } + const refreshed = await api.get('/transactions-patrimoine', { ligne_patrimoine_id: id }); + setTransactions(refreshed); + setTransModalOpen(false); + }); + } + + function handleDeleteTrans() { + return runTrans(async () => { + await api.del(`/transactions-patrimoine/${deleteTransId}`); + const refreshed = await api.get('/transactions-patrimoine', { ligne_patrimoine_id: id }); + setTransactions(refreshed); + setDeleteTransId(null); + }); + } + + const openMenuFor = (e, t) => { + e.stopPropagation(); + const rect = e.currentTarget.getBoundingClientRect(); + setOpenMenu({ trans: t, x: rect.right, y: rect.bottom }); + }; + + if (loading) returnChargement…
{err}
;
+
+ return (
+ <>
+
+
+
+ + + {isNew ? 'Nouvelle ligne de patrimoine' : (ligne?.nom || '—')} +
+
+
+
+ {!isNew && (
+
+
+
+
+ {ligne?.enveloppe_nom && (
+ Valeur actuelle
+
+ {valeurActuelle != null ? fmtEUR(valeurActuelle) : '—'}
+
+
+ {nbTransactions > 0
+ ? `Calculee depuis ${nbTransactions} transaction${nbTransactions > 1 ? 's' : ''}`
+ : 'Saisie directe (aucune transaction enregistrée) — onglet Paramétrage'}
+
+
+
+ )}
+ {ligne?.institution_nom && (
+ Enveloppe
+ {ligne.enveloppe_nom}
+
+
+ )}
+ {ligne?.investisseur_nom && (
+ Établissement
+ {ligne.institution_nom}
+
+
+ )}
+ Détenteur
+ {ligne.investisseur_nom}
+
+
+ )}
+
+ {!isNew && (
+
+
+
+ )}
+
+ )}
+
+
+
+ {transactions.length === 0 ? (
+ Transactions
+ +Aucune transaction enregistrée — la valeur actuelle repose sur la saisie directe (onglet Paramétrage ci-dessous).
+ ) : (
+ | Date | Type | Montant | Libellé | |
|---|---|---|---|---|
| {fmtDate(t.date_operation)} | +{TYPE_LABELS[t.type] || t.type} | +{fmtEUR(t.montant)} | +{t.libelle || '—'} | ++ + | +
+
Paramétrage
+ {saveErr &&{saveErr}
}
+