ocroguennec/crowdlending-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correction des redirections

Browse Source
This commit is contained in:
Olivier
2026-06-17 22:45:08 +02:00
parent a8781a9f62
commit eb961cbed4
7 changed files with 80 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/InvMensuelTable.jsx
+2 -2
View File
@@ -27,7 +27,7 @@ const STATUT_FG = {
cloture: 'var(--text-muted)', cloture: 'var(--text-muted)',
}; };
export default function InvMensuelTable({ rows, allRembs, allReinvests, year }) { export default function InvMensuelTable({ rows, allRembs, allReinvests, year, originFrom }) {
const navigate = useNavigate(); const navigate = useNavigate();
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1; const currentMonth = new Date().getMonth() + 1;
@@ -142,7 +142,7 @@ export default function InvMensuelTable({ rows, allRembs, allReinvests, year })
{grid.map(({ inv, months }) => ( {grid.map(({ inv, months }) => (
<tr key={inv.id} className="tip-row-plat" <tr key={inv.id} className="tip-row-plat"
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => navigate(`/investissements/${inv.id}`)}> onClick={() => navigate(`/investissements/${inv.id}`, originFrom ? { state: { from: originFrom } } : undefined)}>
<td className="tip-td-name" style={{ whiteSpace: 'normal', maxWidth: '40ch', wordBreak: 'break-word' }}> <td className="tip-td-name" style={{ whiteSpace: 'normal', maxWidth: '40ch', wordBreak: 'break-word' }}>
{inv.nom_projet || '—'} {inv.nom_projet || '—'}
frontend/src/components/Layout.jsx
+19 -2
View File
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { NavLink, Outlet, useNavigate } from 'react-router-dom'; import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
import { api } from '../api.js'; import { api } from '../api.js';
import { useInvestisseur } from '../context/InvestisseurContext.jsx'; import { useInvestisseur } from '../context/InvestisseurContext.jsx';
import { useUi } from '../context/UiContext.jsx'; import { useUi } from '../context/UiContext.jsx';
@@ -64,6 +64,7 @@ const IconPanelExpand = () => (
/* ── Recherche rapide de projet ─────────────────────────────── */ /* ── Recherche rapide de projet ─────────────────────────────── */
function ProjectSearch() { function ProjectSearch() {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const { activeId, activeView } = useInvestisseur(); const { activeId, activeView } = useInvestisseur();
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const [allInv, setAllInv] = useState([]); const [allInv, setAllInv] = useState([]);
@@ -118,9 +119,25 @@ function ProjectSearch() {
setActiveIdx(-1); setActiveIdx(-1);
}, [results.length, query]); /* eslint-disable-line */ }, [results.length, query]); /* eslint-disable-line */
const PAGE_LABELS = {
'/': 'Tableau de bord',
'/investissements': 'Investissements',
'/remboursements': 'Remboursements',
'/depots-retraits': 'Dépôts / Retraits',
'/2778-sd': 'Fiscalité',
'/plateformes': 'Plateformes',
'/taxreport': 'Fiscalité',
'/settings': 'Paramètres',
'/compte': 'Mon compte',
'/admin': 'Administration',
};
const currentLabel = PAGE_LABELS[location.pathname] ?? 'Recherche';
const goTo = (inv) => { const goTo = (inv) => {
setQuery(''); setOpen(false); setQuery(''); setOpen(false);
navigate(`/investissements/${inv.id}`); navigate(`/investissements/${inv.id}`, {
state: { from: { path: location.pathname, search: location.search, label: currentLabel } },
});
}; };
const handleKeyDown = (e) => { const handleKeyDown = (e) => {
frontend/src/pages/Imports.jsx
+3 -2
View File
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { api } from '../api.js'; import { api } from '../api.js';
import { useInvestisseur } from '../context/InvestisseurContext.jsx'; import { useInvestisseur } from '../context/InvestisseurContext.jsx';
import { fmtDate } from '../utils/format.js'; import { fmtDate } from '../utils/format.js';
@@ -52,6 +52,7 @@ const MODULE_LABEL = {
export default function Imports() { export default function Imports() {
const { activeId } = useInvestisseur(); const { activeId } = useInvestisseur();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
// ── Import classique (xlsx/csv/json) ────────────────────────── // ── Import classique (xlsx/csv/json) ──────────────────────────
const [module, setModule] = useState('depots_retraits'); const [module, setModule] = useState('depots_retraits');
@@ -444,7 +445,7 @@ function DossierImport({
{' '} {' '}
<button <button
style={{ marginLeft: 8, fontSize: 'var(--fs-xs)', padding: '2px 8px' }} style={{ marginLeft: 8, fontSize: 'var(--fs-xs)', padding: '2px 8px' }}
onClick={() => navigate(`/investissements/${dossierResult.investissementId}`)} onClick={() => navigate(`/investissements/${dossierResult.investissementId}`, { state: { from: { path: location.pathname, search: location.search, label: 'Imports' } } })}
> >
Ouvrir le dossier → Ouvrir le dossier →
</button> </button>
frontend/src/pages/InvestissementDetail.jsx
+8 -3
View File
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { api } from '../api.js'; import { api } from '../api.js';
import { useInvestisseur } from '../context/InvestisseurContext.jsx'; import { useInvestisseur } from '../context/InvestisseurContext.jsx';
import { useUi } from '../context/UiContext.jsx'; import { useUi } from '../context/UiContext.jsx';
@@ -103,6 +103,8 @@ function xirr(cashflows) {
export default function InvestissementDetail() { export default function InvestissementDetail() {
const { id } = useParams(); const { id } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const navOrigin = location.state?.from ?? null;
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const { activeId, investisseurs } = useInvestisseur(); const { activeId, investisseurs } = useInvestisseur();
const { displayMode } = useUi(); const { displayMode } = useUi();
@@ -806,8 +808,11 @@ export default function InvestissementDetail() {
<span style={{ color: 'var(--text-muted, #6b7280)', fontWeight: 300, fontSize: '0.85em' }}>·</span> <span style={{ color: 'var(--text-muted, #6b7280)', fontWeight: 300, fontSize: '0.85em' }}>·</span>
<span>{inv.nom_projet}</span> <span>{inv.nom_projet}</span>
</h2> </h2>
<button onClick={() => navigate('/investissements')} style={{ whiteSpace: 'nowrap', flexShrink: 0 }}> <button
← Investissements onClick={() => navOrigin ? navigate({ pathname: navOrigin.path, search: navOrigin.search || '' }) : navigate('/investissements')}
style={{ whiteSpace: 'nowrap', flexShrink: 0 }}
>
← {navOrigin?.label ?? 'Investissements'}
</button> </button>
</div> </div>
frontend/src/pages/Investissements.jsx
+34 -10
View File
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
import { usePagination } from '../hooks/usePagination.js'; import { usePagination } from '../hooks/usePagination.js';
import Pagination from '../components/Pagination.jsx'; import Pagination from '../components/Pagination.jsx';
import PageIcon from '../components/PageIcon.jsx'; import PageIcon from '../components/PageIcon.jsx';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
import { api } from '../api.js'; import { api } from '../api.js';
import InvSelect from '../components/InvSelect.jsx'; import InvSelect from '../components/InvSelect.jsx';
import { useInvestisseur } from '../context/InvestisseurContext.jsx'; import { useInvestisseur } from '../context/InvestisseurContext.jsx';
@@ -275,8 +275,9 @@ function dayOfMonth(isoDate) {
export default function Investissements() { export default function Investissements() {
const { activeId, activeView, investisseurs } = useInvestisseur(); const { activeId, activeView, investisseurs } = useInvestisseur();
const { displayMode } = useUi(); const { displayMode } = useUi();
const { search } = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
const platsRef = useRef([]); const platsRef = useRef([]);
const lastValidSouscriptionRef = useRef(''); const lastValidSouscriptionRef = useRef('');
@@ -286,12 +287,35 @@ export default function Investissements() {
const [plats, setPlats] = useState([]); const [plats, setPlats] = useState([]);
const [comptesCourants, setComptesCourants] = useState([]); const [comptesCourants, setComptesCourants] = useState([]);
const [comptesInvestisseur, setComptesInvestisseur] = useState([]); const [comptesInvestisseur, setComptesInvestisseur] = useState([]);
const [activeTab, setActiveTab] = useState('plateformes'); /* activeTab, filter, platYear → URL params pour survivre au retour arrière */
const activeTab = searchParams.get('tab') || 'plateformes';
const setActiveTab = (tab) => setSearchParams(p => { const n = new URLSearchParams(p); n.set('tab', tab); return n; }, { replace: true });
const [listFocused, setListFocused] = useState(false); const [listFocused, setListFocused] = useState(false);
const [filter, setFilter] = useState({ statut: '', plateforme_id: '', categorie_inv_id: '', secteur_inv_id: '', year: '', month: '' }); const filter = {
statut: searchParams.get('statut') || '',
plateforme_id: searchParams.get('pid') || '',
categorie_inv_id: searchParams.get('cat') || '',
secteur_inv_id: searchParams.get('sect') || '',
year: searchParams.get('yr') || '',
month: searchParams.get('mo') || '',
};
const setFilter = (updater) => setSearchParams(p => {
const cur = { statut: p.get('statut')||'', plateforme_id: p.get('pid')||'', categorie_inv_id: p.get('cat')||'', secteur_inv_id: p.get('sect')||'', year: p.get('yr')||'', month: p.get('mo')||'' };
const nf = typeof updater === 'function' ? updater(cur) : updater;
const n = new URLSearchParams(p);
['statut','pid','cat','sect','yr','mo'].forEach(k => n.delete(k));
if (nf.statut) n.set('statut', nf.statut);
if (nf.plateforme_id) n.set('pid', nf.plateforme_id);
if (nf.categorie_inv_id) n.set('cat', nf.categorie_inv_id);
if (nf.secteur_inv_id) n.set('sect', nf.secteur_inv_id);
if (nf.year) n.set('yr', nf.year);
if (nf.month) n.set('mo', nf.month);
return n;
}, { replace: true });
const [categoriesInv, setCategoriesInv] = useState([]); const [categoriesInv, setCategoriesInv] = useState([]);
const [secteursInv, setSecteursInv] = useState([]); const [secteursInv, setSecteursInv] = useState([]);
const [platYear, setPlatYear] = useState(String(new Date().getFullYear())); const platYear = searchParams.get('platYear') || String(new Date().getFullYear());
const setPlatYear = (y) => setSearchParams(p => { const n = new URLSearchParams(p); n.set('platYear', y); return n; }, { replace: true });
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [editingId, setEditingId] = useState(null); const [editingId, setEditingId] = useState(null);
const [form, setForm] = useState(empty); const [form, setForm] = useState(empty);
@@ -605,8 +629,8 @@ export default function Investissements() {
/* ── Ouverture auto depuis le bouton global ── */ /* ── Ouverture auto depuis le bouton global ── */
const pendingNew = useRef(false); const pendingNew = useRef(false);
useEffect(() => { useEffect(() => {
if (new URLSearchParams(search).get('new') !== '1') return; if (searchParams.get('new') !== '1') return;
navigate('/investissements', { replace: true }); navigate({ pathname: '/investissements', search: (() => { const n = new URLSearchParams(searchParams); n.delete('new'); return n.toString() ? '?' + n.toString() : ''; })() }, { replace: true });
if (plats.length > 0) { if (plats.length > 0) {
setEditingId(null); setEditingId(null);
setForm({ ...empty }); setForm({ ...empty });
@@ -615,7 +639,7 @@ export default function Investissements() {
} else { } else {
pendingNew.current = true; pendingNew.current = true;
} }
}, [search]); /* eslint-disable-next-line */ }, [searchParams]); /* eslint-disable-next-line */
useEffect(() => { useEffect(() => {
if (!pendingNew.current || !plats.length) return; if (!pendingNew.current || !plats.length) return;
@@ -746,7 +770,7 @@ export default function Investissements() {
const hasFilter = !!(filter.statut || filter.plateforme_id || filter.categorie_inv_id || filter.secteur_inv_id || filter.year || filter.month); const hasFilter = !!(filter.statut || filter.plateforme_id || filter.categorie_inv_id || filter.secteur_inv_id || filter.year || filter.month);
const netMode = displayMode === 'net'; const netMode = displayMode === 'net';
const clearFilter = () => setFilter({ statut: '', plateforme_id: '', categorie_inv_id: '', secteur_inv_id: '', year: '', month: '' }); const clearFilter = () => setSearchParams(p => { const n = new URLSearchParams(p); ['statut','pid','cat','sect','yr','mo'].forEach(k => n.delete(k)); return n; }, { replace: true });
const multiDetenteur = new Set(plats.map(p => p.investisseur_id)).size > 1; const multiDetenteur = new Set(plats.map(p => p.investisseur_id)).size > 1;
if (!loading && plats.length === 0) return ( if (!loading && plats.length === 0) return (
@@ -1186,7 +1210,7 @@ export default function Investissements() {
const capRestant = Math.max(0, capInv - (r.capital_rembourse || 0)); const capRestant = Math.max(0, capInv - (r.capital_rembourse || 0));
return ( return (
<tr key={r.id} <tr key={r.id}
onClick={() => navigate(`/investissements/${r.id}`)} onClick={() => navigate(`/investissements/${r.id}`, { state: { from: { path: '/investissements', search: location.search, label: 'Investissements' } } })}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onMouseEnter={e => e.currentTarget.style.opacity = '0.8'} onMouseEnter={e => e.currentTarget.style.opacity = '0.8'}
onMouseLeave={e => e.currentTarget.style.opacity = '1'} onMouseLeave={e => e.currentTarget.style.opacity = '1'}
frontend/src/pages/Plateformes.jsx
+11 -5
View File
@@ -1,5 +1,5 @@
import { Fragment, useEffect, useMemo, useRef, useState } from 'react'; import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
import { api } from '../api.js'; import { api } from '../api.js';
import { useInvestisseur } from '../context/InvestisseurContext.jsx'; import { useInvestisseur } from '../context/InvestisseurContext.jsx';
import { useUi } from '../context/UiContext.jsx'; import { useUi } from '../context/UiContext.jsx';
@@ -272,6 +272,8 @@ export default function Plateformes() {
const { activeId, activeView, investisseurs } = useInvestisseur(); const { activeId, activeView, investisseurs } = useInvestisseur();
const { displayMode, chartInterets, chartCapital, chartCashback } = useUi(); const { displayMode, chartInterets, chartCapital, chartCashback } = useUi();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const [searchParams, setSearchParams] = useSearchParams();
/* ── État données ── */ /* ── État données ── */
const [allRows, setAllRows] = useState([]); const [allRows, setAllRows] = useState([]);
@@ -283,7 +285,9 @@ export default function Plateformes() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
/* ── État sélecteurs ── */ /* ── État sélecteurs ── */
const [selectedPlatName, setSelectedPlatName] = useState(null); /* selectedPlatName et activeTab sont dans l'URL pour survivre au retour arrière */
const selectedPlatName = searchParams.get('plat') || null;
const setSelectedPlatName = (nom) => setSearchParams(p => { const n = new URLSearchParams(p); n.set('plat', nom); return n; }, { replace: true });
const [selectedDetenteurId, setSelectedDetenteurId] = useState('all'); const [selectedDetenteurId, setSelectedDetenteurId] = useState('all');
const [selectedYear, setSelectedYear] = useState(String(new Date().getFullYear())); const [selectedYear, setSelectedYear] = useState(String(new Date().getFullYear()));
const [windowStart, setWindowStart] = useState(0); const [windowStart, setWindowStart] = useState(0);
@@ -320,7 +324,8 @@ export default function Plateformes() {
const [pfuRates, setPfuRates] = useState([]); const [pfuRates, setPfuRates] = useState([]);
/* ── État UI ── */ /* ── État UI ── */
const [activeTab, setActiveTab] = useState('depots-retraits'); const activeTab = searchParams.get('tab') || 'depots-retraits';
const setActiveTab = (tab) => setSearchParams(p => { const n = new URLSearchParams(p); n.set('tab', tab); return n; }, { replace: true });
const [listFocused, setListFocused] = useState(false); const [listFocused, setListFocused] = useState(false);
/* ── Chargement ── */ /* ── Chargement ── */
@@ -1020,7 +1025,7 @@ export default function Plateformes() {
const rowTotal = months.reduce((s, v) => s + (v?.value ?? 0), 0); const rowTotal = months.reduce((s, v) => s + (v?.value ?? 0), 0);
return ( return (
<tr key={inv.id} className="tip-row-plat" style={{ cursor: 'pointer' }} <tr key={inv.id} className="tip-row-plat" style={{ cursor: 'pointer' }}
onClick={() => navigate(`/investissements/${inv.id}`)}> onClick={() => navigate(`/investissements/${inv.id}`, { state: { from: { path: location.pathname, search: location.search, label: 'Plateformes' } } })}>
<td className="tip-td-name" style={{ whiteSpace: 'normal', maxWidth: '40ch', wordBreak: 'break-word' }}> <td className="tip-td-name" style={{ whiteSpace: 'normal', maxWidth: '40ch', wordBreak: 'break-word' }}>
{inv.nom_projet || '—'} {inv.nom_projet || '—'}
</td> </td>
@@ -1423,6 +1428,7 @@ export default function Plateformes() {
allRembs={allRembs} allRembs={allRembs}
allReinvests={allReinvests} allReinvests={allReinvests}
year={selectedYear} year={selectedYear}
originFrom={{ path: location.pathname, search: location.search, label: 'Plateformes' }}
/> />
</div> </div>
</div> </div>
@@ -1473,7 +1479,7 @@ export default function Plateformes() {
: (rembParInv[r.id]?.interets_bruts || 0); : (rembParInv[r.id]?.interets_bruts || 0);
return ( return (
<tr key={r.id} style={{ cursor: 'pointer' }} <tr key={r.id} style={{ cursor: 'pointer' }}
onClick={() => navigate(`/investissements/${r.id}`)}> onClick={() => navigate(`/investissements/${r.id}`, { state: { from: { path: location.pathname, search: location.search, label: 'Plateformes' } } })}>
<td style={{ fontWeight: 500 }}>{r.nom_projet}</td> <td style={{ fontWeight: 500 }}>{r.nom_projet}</td>
<td className="text-muted" style={{ fontSize: 'var(--fs-sm)' }}>{r.emetteur || '—'}</td> <td className="text-muted" style={{ fontSize: 'var(--fs-sm)' }}>{r.emetteur || '—'}</td>
<td className="num" style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>{fmtDate(r.date_souscription)}</td> <td className="num" style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>{fmtDate(r.date_souscription)}</td>
frontend/src/pages/settings/ImportsSection.jsx
+3 -2
View File
@@ -1,5 +1,5 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { api } from '../../api.js'; import { api } from '../../api.js';
import { fmtDate } from '../../utils/format.js'; import { fmtDate } from '../../utils/format.js';
import { useInvestisseur } from '../../context/InvestisseurContext.jsx'; import { useInvestisseur } from '../../context/InvestisseurContext.jsx';
@@ -239,7 +239,7 @@ function DossierImport({
{' '} {' '}
<button <button
style={{ marginLeft: 8, fontSize: 'var(--fs-xs)', padding: '2px 8px' }} style={{ marginLeft: 8, fontSize: 'var(--fs-xs)', padding: '2px 8px' }}
onClick={() => navigate(`/investissements/${dossierResult.investissementId}`)} onClick={() => navigate(`/investissements/${dossierResult.investissementId}`, { state: { from: { path: location.pathname, search: location.search, label: 'Imports' } } })}
> >
Ouvrir le dossier → Ouvrir le dossier →
</button> </button>
@@ -253,6 +253,7 @@ function DossierImport({
export default function ImportsSection() { export default function ImportsSection() {
const { activeId } = useInvestisseur(); const { activeId } = useInvestisseur();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const [module, setModule] = useState('depots_retraits'); const [module, setModule] = useState('depots_retraits');
const [file, setFile] = useState(null); const [file, setFile] = useState(null);