Amelioration table de payments robustes supression modification etc

Author: Juju-kpi

app/app/expense/[id].tsx

@@ -52,6 +52,8 @@ export default function ExpenseDetailScreen() {
     mutationFn: () => expensesApi.delete(id),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ['group'] });
+      // Le nombre de depenses affiche dans la liste des groupes change aussi.
+      qc.invalidateQueries({ queryKey: ['groups'] });
       router.back();
     },
   });

app/src/i18n/locales/de.json

@@ -382,7 +382,21 @@
     "pending_badge": "⏳ {{n}} zu bestätigen",
     "all_settled": "🎉 Alles beglichen — nichts mehr offen.",
     "chain_hint": "Dieser Saldo entsteht aus einer Verrechnung über mehrere Personen: keine gemeinsame Ausgabe verbindet euch, die Rückzahlung wird deshalb separat erfasst.",
-    "guest_auto": "{{name}} hat kein Konto: diese Seite wird automatisch bestätigt."
+    "guest_auto": "{{name}} hat kein Konto: diese Seite wird automatisch bestätigt.",
+    "calc_show": "🔎 Rechnung anzeigen",
+    "calc_hide": "Rechnung ausblenden",
+    "calc_title": "Woher diese Beträge kommen",
+    "calc_paid": "hat ausgelegt",
+    "calc_share": "sein Anteil",
+    "calc_settled_own": "bereits beglichene Anteile",
+    "calc_settled_as_payer": "beglichene Anteile, die er ausgelegt hatte",
+    "calc_paid_back": "gezahlte Rückzahlungen",
+    "calc_received": "erhaltene Rückzahlungen",
+    "calc_net": "Position",
+    "calc_total": "Summe der Positionen",
+    "calc_total_ok": "✓ Plus und Minus heben sich exakt auf — nichts ist verloren gegangen",
+    "calc_total_bad": "⚠ Abweichung von {{amount}} — bitte melden, das sollte nie passieren",
+    "calc_explain": "Jede Position wird anschließend zugeordnet: wer am meisten schuldet, zahlt an den mit dem größten Guthaben, dann an den nächsten, bis alles auf null steht. Daraus entstehen die Überweisungen oben, mit möglichst wenigen Schritten."
   },
   "home": {
     "greeting": "Hallo, {{name}} 👋"

app/src/i18n/locales/en.json

@@ -382,7 +382,21 @@
     "pending_badge": "⏳ {{n}} to confirm",
     "all_settled": "🎉 All settled — nothing left to pay back.",
     "chain_hint": "This balance comes from netting across several people: no expense links you directly, so the reimbursement is recorded on its own.",
-    "guest_auto": "{{name}} has no account: their side is confirmed automatically."
+    "guest_auto": "{{name}} has no account: their side is confirmed automatically.",
+    "calc_show": "🔎 Show the maths",
+    "calc_hide": "Hide the maths",
+    "calc_title": "Where these amounts come from",
+    "calc_paid": "paid out",
+    "calc_share": "their share",
+    "calc_settled_own": "their shares already settled",
+    "calc_settled_as_payer": "settled shares they had fronted",
+    "calc_paid_back": "reimbursements paid",
+    "calc_received": "reimbursements received",
+    "calc_net": "position",
+    "calc_total": "Sum of positions",
+    "calc_total_ok": "✓ the + and − cancel out exactly — nothing went missing",
+    "calc_total_bad": "⚠ off by {{amount}} — please report it, this should never happen",
+    "calc_explain": "Each position is then matched up: whoever owes most pays whoever is owed most, then the next, until everything is at zero. That is what produces the transfers above, in as few moves as possible."
   },
   "home": {
     "greeting": "Hi, {{name}} 👋"

app/src/i18n/locales/es.json

@@ -382,7 +382,21 @@
     "pending_badge": "⏳ {{n}} por confirmar",
     "all_settled": "🎉 Todo saldado — no queda nada por devolver.",
     "chain_hint": "Este saldo viene de una compensación entre varias personas: ningún gasto os une directamente, así que el reembolso se anota aparte.",
-    "guest_auto": "{{name}} no tiene cuenta: su lado se valida automáticamente."
+    "guest_auto": "{{name}} no tiene cuenta: su lado se valida automáticamente.",
+    "calc_show": "🔎 Ver el cálculo",
+    "calc_hide": "Ocultar el cálculo",
+    "calc_title": "De dónde salen estos importes",
+    "calc_paid": "ha adelantado",
+    "calc_share": "su parte",
+    "calc_settled_own": "sus partes ya saldadas",
+    "calc_settled_as_payer": "partes saldadas que había adelantado",
+    "calc_paid_back": "reembolsos pagados",
+    "calc_received": "reembolsos recibidos",
+    "calc_net": "posición",
+    "calc_total": "Suma de las posiciones",
+    "calc_total_ok": "✓ los + y los − se anulan exactamente — no se ha perdido nada",
+    "calc_total_bad": "⚠ desfase de {{amount}} — comunícalo, esto no debería ocurrir",
+    "calc_explain": "Cada posición se empareja después: quien más debe paga a quien más se le debe, luego al siguiente, hasta que todo queda a cero. Eso produce las transferencias de arriba, en el mínimo de operaciones."
   },
   "home": {
     "greeting": "Hola, {{name}} 👋"

app/src/i18n/locales/fr.json

@@ -382,7 +382,21 @@
     "pending_badge": "⏳ {{n}} à confirmer",
     "all_settled": "🎉 Tout est soldé — plus rien à rembourser.",
     "chain_hint": "Ce solde vient d'une compensation entre plusieurs personnes : aucune dépense ne vous lie directement, le remboursement se note donc à part.",
-    "guest_auto": "{{name}} n'a pas de compte : son accord est validé d'office."
+    "guest_auto": "{{name}} n'a pas de compte : son accord est validé d'office.",
+    "calc_show": "🔎 Voir le calcul",
+    "calc_hide": "Masquer le calcul",
+    "calc_title": "D'où viennent ces montants",
+    "calc_paid": "a avancé",
+    "calc_share": "sa part",
+    "calc_settled_own": "ses parts déjà réglées",
+    "calc_settled_as_payer": "parts réglées qu'il avait avancées",
+    "calc_paid_back": "remboursements versés",
+    "calc_received": "remboursements reçus",
+    "calc_net": "position",
+    "calc_total": "Somme des positions",
+    "calc_total_ok": "✓ les + et les − s'annulent exactement — rien ne s'est perdu",
+    "calc_total_bad": "⚠ écart de {{amount}} — signale-le, ce ne devrait jamais arriver",
+    "calc_explain": "Chaque position est ensuite appariée : le plus endetté verse au plus créditeur, puis au suivant, jusqu'à ce que tout soit à zéro. C'est ce qui donne les virements ci-dessus, en un minimum d'opérations."
   },
   "home": {
     "greeting": "Bonjour, {{name}} 👋"

app/src/i18n/locales/it.json

@@ -382,7 +382,21 @@
     "pending_badge": "⏳ {{n}} da confermare",
     "all_settled": "🎉 Tutto saldato — non resta nulla da rimborsare.",
     "chain_hint": "Questo saldo nasce da una compensazione tra più persone: nessuna spesa vi lega direttamente, quindi il rimborso si annota a parte.",
-    "guest_auto": "{{name}} non ha un account: il suo lato è validato d'ufficio."
+    "guest_auto": "{{name}} non ha un account: il suo lato è validato d'ufficio.",
+    "calc_show": "🔎 Vedi il calcolo",
+    "calc_hide": "Nascondi il calcolo",
+    "calc_title": "Da dove vengono questi importi",
+    "calc_paid": "ha anticipato",
+    "calc_share": "la sua parte",
+    "calc_settled_own": "le sue parti già saldate",
+    "calc_settled_as_payer": "parti saldate che aveva anticipato",
+    "calc_paid_back": "rimborsi versati",
+    "calc_received": "rimborsi ricevuti",
+    "calc_net": "posizione",
+    "calc_total": "Somma delle posizioni",
+    "calc_total_ok": "✓ i + e i − si annullano esattamente — non si è perso nulla",
+    "calc_total_bad": "⚠ scarto di {{amount}} — segnalalo, non dovrebbe mai succedere",
+    "calc_explain": "Ogni posizione viene poi abbinata: chi deve di più paga chi è più in credito, poi il successivo, finché tutto è a zero. È ciò che produce i bonifici qui sopra, nel minor numero di operazioni."
   },
   "home": {
     "greeting": "Ciao, {{name}} 👋"

app/src/screens/expenses/AddExpenseScreen.tsx

@@ -229,6 +229,8 @@ export default function AddExpenseScreen() {
     mutationFn: expensesApi.create,
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ['group', groupId] });
+      // Le nombre de dépenses affiché dans la liste des groupes change aussi.
+      qc.invalidateQueries({ queryKey: ['groups'] });
       router.replace(`/group/${groupId}`);
     },
     onError: (e: any) =>

app/src/screens/groups/GroupDetailScreen.tsx

@@ -53,6 +53,7 @@ export default function GroupDetailScreen() {
 
   const [expandedBalance, setExpandedBalance] = useState<string | null>(null);
   const [showLog, setShowLog] = useState(false);
+  const [showCalc, setShowCalc] = useState(false);
   // Formulaire de remboursement — ouvert depuis une ligne de solde
   const [settleFor, setSettleFor] = useState<Balance | null>(null);
   const [amountInput, setAmountInput] = useState('');
@@ -63,6 +64,10 @@ export default function GroupDetailScreen() {
     queryKey: ['group', id],
     queryFn: () => groupsApi.get(id),
     enabled: !!id,
+    // On revient toujours ici apres avoir touche a une depense : les soldes
+    // doivent etre recalcules a l'arrivee, sans dependre des 30 s de cache par
+    // defaut ni du fait qu'un ecran ait pense a invalider.
+    refetchOnMount: 'always',
   });
 
   const refresh = () => qc.invalidateQueries({ queryKey: ['group', id] });
@@ -123,17 +128,22 @@ export default function GroupDetailScreen() {
   // Compte les dépenses incomplètes
   const incompleteCount = (group.expenses || []).filter(isExpenseIncomplete).length;
 
-  // Solde net : ce qu'il a avancé moins ce qu'il doit. Mêmes données que les
-  // remboursements ci-dessous — affichage seul, le calcul n'est pas modifié.
-  const memberNet: Record<string, number> = {};
-  group.members.forEach((m: any) => { memberNet[m.id] = 0; });
-  (group.expenses || []).forEach((exp: any) => {
-    const payments = exp.payments?.length > 0
-      ? exp.payments
-      : [{ memberId: exp.paidByMemberId, amount: exp.totalAmount }];
-    payments.forEach((p: any) => { memberNet[p.memberId] = (memberNet[p.memberId] || 0) + p.amount; });
-    exp.splits?.forEach((sp: any) => { memberNet[sp.memberId] = (memberNet[sp.memberId] || 0) - sp.amount; });
-  });
+  // Position nette de chaque membre — calculee par le backend, qui est le seul
+  // a voir les remboursements. La recalculer ici a partir des seules depenses
+  // laissait les barres figees sur l'etat d'avant remboursement.
+  // Le repli local ne sert qu'aux reponses d'un backend anterieur a ce champ.
+  const memberNet: Record<string, number> = group.netByMember ?? (() => {
+    const net: Record<string, number> = {};
+    group.members.forEach((m: any) => { net[m.id] = 0; });
+    (group.expenses || []).forEach((exp: any) => {
+      const payments = exp.payments?.length > 0
+        ? exp.payments
+        : [{ memberId: exp.paidByMemberId, amount: exp.totalAmount }];
+      payments.forEach((p: any) => { net[p.memberId] = (net[p.memberId] || 0) + p.amount; });
+      exp.splits?.forEach((sp: any) => { net[sp.memberId] = (net[sp.memberId] || 0) - sp.amount; });
+    });
+    return net;
+  })();
   const netRows = group.members
     .map((m: any) => ({ member: m, net: Math.round((memberNet[m.id] || 0) * 100) / 100 }))
     .sort((a: any, b: any) => b.net - a.net);
@@ -363,22 +373,13 @@ export default function GroupDetailScreen() {
           <>
             <View style={styles.balancesHeader}>
               <SectionLabel label={t('settlements.section')} />
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                {myPendingCount > 0 && (
-                  <View style={styles.pendingBadge}>
-                    <Text style={styles.pendingBadgeText}>
-                      {t('settlements.pending_badge', { n: myPendingCount })}
-                    </Text>
-                  </View>
-                )}
-                <TouchableOpacity
-                  onPress={() => setShowLog(true)}
-                  style={styles.logBtn}
-                  hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-                >
-                  <Text style={styles.logBtnText}>📋 {t('balances.detail')}</Text>
-                </TouchableOpacity>
-              </View>
+              {myPendingCount > 0 && (
+                <View style={styles.pendingBadge}>
+                  <Text style={styles.pendingBadgeText}>
+                    {t('settlements.pending_badge', { n: myPendingCount })}
+                  </Text>
+                </View>
+              )}
             </View>
 
             <Card>
@@ -521,6 +522,12 @@ export default function GroupDetailScreen() {
                   </React.Fragment>
                 );
               })}
+
+              {/* Pleine largeur en bas de carte : dans le coin haut-droit la
+                  cible etait petite et loin du pouce. */}
+              <TouchableOpacity style={styles.detailBtn} onPress={() => setShowLog(true)}>
+                <Text style={styles.detailBtnText}>📋 {t('settlements.history_title')}</Text>
+              </TouchableOpacity>
             </Card>
           </>
         )}
@@ -658,6 +665,82 @@ export default function GroupDetailScreen() {
               );
             })}
 
+            {/* Le calcul en clair — replie par defaut : c'est une verification,
+                pas une lecture quotidienne. Les chiffres viennent du backend,
+                ceux-la memes qui produisent les virements affiches. */}
+            <TouchableOpacity style={styles.calcToggle} onPress={() => setShowCalc(v => !v)}>
+              <Text style={styles.calcToggleText}>
+                {showCalc ? t('settlements.calc_hide') : t('settlements.calc_show')}
+              </Text>
+            </TouchableOpacity>
+
+            {showCalc && (() => {
+              const rows = group.netBreakdown;
+              if (!rows) return (
+                <Text style={styles.historyEmpty}>
+                  Le détail du calcul arrive avec la prochaine mise à jour du serveur.
+                </Text>
+              );
+              const total = Math.round(
+                group.members.reduce((s: number, m: any) => s + (rows[m.id]?.net ?? 0), 0) * 100
+              ) / 100;
+              const ok = Math.abs(total) < 0.005;
+              const line = (label: string, value: number, sign: string) =>
+                Math.abs(value) < 0.005 ? null : (
+                  <View style={styles.calcLine} key={label}>
+                    <Text style={styles.calcLabel}>{sign} {label}</Text>
+                    <Text style={styles.calcValue}>{fmt(value)}</Text>
+                  </View>
+                );
+              return (
+                <View style={{ marginBottom: 18 }}>
+                  <Text style={styles.historyLabel}>{t('settlements.calc_title')}</Text>
+                  {group.members.map((m: any) => {
+                    const r = rows[m.id];
+                    if (!r) return null;
+                    return (
+                      <View key={m.id} style={styles.calcCard}>
+                        <View style={styles.calcHead}>
+                          <Avatar initials={m.avatarInitials} color={m.avatarColor} size={20} />
+                          <Text style={styles.calcName} numberOfLines={1}>{m.displayName}</Text>
+                        </View>
+                        {line(t('settlements.calc_paid'), r.paid, '+')}
+                        {line(t('settlements.calc_share'), r.share, '−')}
+                        {line(t('settlements.calc_settled_own'), r.settledOwn, '+')}
+                        {line(t('settlements.calc_settled_as_payer'), r.settledAsPayer, '−')}
+                        {line(t('settlements.calc_paid_back'), r.settlementsPaid, '+')}
+                        {line(t('settlements.calc_received'), r.settlementsReceived, '−')}
+                        <View style={styles.calcTotalLine}>
+                          <Text style={styles.calcNetLabel}>= {t('settlements.calc_net')}</Text>
+                          <Text style={[
+                            styles.calcNetValue,
+                            r.net > 0.005 && { color: colors.green },
+                            r.net < -0.005 && { color: colors.amber },
+                          ]}>
+                            {r.net > 0 ? '+' : ''}{fmt(r.net)}
+                          </Text>
+                        </View>
+                      </View>
+                    );
+                  })}
+
+                  {/* La verification : la somme doit tomber a zero au centime. */}
+                  <View style={[styles.calcLine, { marginTop: 10, paddingHorizontal: 4 }]}>
+                    <Text style={styles.calcNetLabel}>{t('settlements.calc_total')}</Text>
+                    <Text style={[styles.calcNetValue, { color: ok ? colors.green : colors.amber }]}>
+                      {fmt(total)}
+                    </Text>
+                  </View>
+                  <Text style={[styles.calcHint, { color: ok ? colors.green : colors.amber }]}>
+                    {ok
+                      ? t('settlements.calc_total_ok')
+                      : t('settlements.calc_total_bad', { amount: fmt(total) })}
+                  </Text>
+                  <Text style={styles.calcHint}>{t('settlements.calc_explain')}</Text>
+                </View>
+              );
+            })()}
+
             <Text style={[styles.historyLabel, { marginTop: 18 }]}>{t('balances.detail_title')}</Text>
             {Object.values(netLog).map((entry, i) => {
               const remaining = entry.total - entry.settled;
@@ -919,6 +1002,12 @@ const styles = StyleSheet.create({
   },
   pendingBadgeText: { fontSize: 10, color: colors.amber, fontWeight: '700' },
   allSettled: { fontSize: 13, color: colors.text2, textAlign: 'center', paddingVertical: 10 },
+  detailBtn: {
+    marginTop: 14, minHeight: 48, borderRadius: radius.md,
+    alignItems: 'center', justifyContent: 'center',
+    backgroundColor: colors.accentBg, borderWidth: 1, borderColor: 'rgba(124,110,250,0.3)',
+  },
+  detailBtnText: { fontSize: 14, color: colors.accent2, fontWeight: '600' },
   pendingCard: {
     marginTop: 8, borderRadius: radius.sm, padding: 10,
     backgroundColor: 'rgba(251,191,36,0.06)', borderWidth: 1, borderColor: 'rgba(251,191,36,0.25)',
@@ -941,6 +1030,26 @@ const styles = StyleSheet.create({
   historyStatus: { fontSize: 11, flex: 1 },
   historyNote: { fontSize: 11, color: colors.text3, marginTop: 4 },
 
+  calcToggle: {
+    minHeight: 44, borderRadius: radius.md, marginBottom: 16,
+    alignItems: 'center', justifyContent: 'center',
+    backgroundColor: colors.surface2, borderWidth: 0.5, borderColor: colors.border,
+  },
+  calcToggleText: { fontSize: 12, color: colors.text2, fontWeight: '600' },
+  calcCard: { backgroundColor: colors.surface2, borderRadius: radius.sm, padding: 10, marginBottom: 8 },
+  calcHead: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 4 },
+  calcName: { fontSize: 12, color: colors.text, fontWeight: '500', flex: 1 },
+  calcLine: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 2 },
+  calcLabel: { fontSize: 11, color: colors.text3, flex: 1 },
+  calcValue: { fontSize: 11, fontFamily: 'monospace', color: colors.text2 },
+  calcTotalLine: {
+    flexDirection: 'row', justifyContent: 'space-between',
+    paddingTop: 6, marginTop: 4, borderTopWidth: 0.5, borderTopColor: colors.border,
+  },
+  calcNetLabel: { fontSize: 12, color: colors.text2, fontWeight: '600' },
+  calcNetValue: { fontSize: 12, fontFamily: 'monospace', fontWeight: '700', color: colors.text3 },
+  calcHint: { fontSize: 11, color: colors.text3, lineHeight: 16, marginTop: 8 },
+
   formDirection: { fontSize: 12, color: colors.text3, marginBottom: 18 },
   formLabel: {
     fontSize: 11, color: colors.text3, fontWeight: '700',