@pi-spi/app 2.0.0 → 2.2.0

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_page_verification.tsx

@@ -1,18 +1,20 @@
-import { ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ComponentProps, ReactNode } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { useBloc, useBlocBuilder, useBlocListener } from '../../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { UEMOACountry } from '../../../../../shared/models/uemoa_countries';
 import { formatMontant } from '../../../../../shared/widgets/amount_widget';
 import { ConfirmActionSheetWidget } from '../../../../../shared/widgets/confirm_action_sheet_widget';
-import { CustomTextInput } from '../../../../../shared/widgets/input_text';
-import { CustomTextMultipleInput } from '../../../../../shared/widgets/input_text_multiple';
 import { CustomLoadingDialog, LoadingPage } from '../../../../../shared/widgets/loading_page';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { SelectionChamp, SelectionPastille } from '../../../../../shared/widgets/selection';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 import { ContactPI } from '../../../../contacts/domain/contact_pi';
 import { ContactBloc } from '../../../../contacts/presentation/bloc/contact_bloc';
 import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
@@ -93,15 +95,15 @@ export function TransactionVerificationPage() {
 
   /** Proposer d'enregistrer l'alias dans les contacts (s'il n'y est pas) */
   const aliasValue = command.alias?.alias();
-  const addAliasSwitch =
+  const enregistrerAlias =
     aliasValue != null && !contactBloc.isContactExist(aliasValue) ? (
-      <Switch
-        value={false}
-        trackColor={{ false: theme.switchTheme.inactiveTrackColor, true: theme.switchTheme.activeTrackColor }}
-        thumbColor={theme.switchTheme.thumbColor}
-        onValueChange={async () => {
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={traductions.contactAliasSaveText}
+        hitSlop={8}
+        style={styles.action}
+        onPress={async () => {
           const confirmed = await showModalBottomSheet<boolean>(router, {
-            themed: true,
             builder: () => (
               <ConfirmActionSheetWidget
                 title={traductions.contactAliasSaveText}
@@ -117,105 +119,94 @@ export function TransactionVerificationPage() {
             });
           }
         }}
-      />
+      >
+        <MaterialIcons name="person-add-alt-1" size={20} color={theme.colorScheme.primary} />
+      </Pressable>
     ) : null;
 
+  const compte = command.method === TransactionSendMethod.iban || command.method === TransactionSendMethod.othr;
+  const pays = UEMOACountry.get(transaction.clientPays);
+  const motif = command.motif?.value ?? '';
+  const soldeValide = command.isSoldeValid(transaction.montantFrais);
+
+  // Informations, dans l'ordre du formulaire, chacune dans un champ comme
+  // le pays et l'institution
+  const champs: ReactNode[] = [
+    command.alias != null && (
+      <Champ key="alias" libelle={traductions.aliasFormLabel} valeur={aliasValue ?? ''} icone="alternate-email" suffixe={enregistrerAlias} />
+    ),
+    command.alias != null && psp != null && (
+      <Champ key="psp" libelle={traductions.transactionFormOthrNomLabel} valeur={psp.nomMembre} icone="account-balance" />
+    ),
+    compte && (
+      <Champ
+        key="compte"
+        libelle={command.method === TransactionSendMethod.iban ? traductions.transactionFormIbanHint : traductions.transactionFormOthrLabel}
+        valeur={command.othr?.compte() ?? ''}
+        icone="credit-card"
+      />
+    ),
+    compte && (
+      <Champ
+        key="banque"
+        libelle={command.method === TransactionSendMethod.iban ? traductions.transactionFormIbanNomLabel : traductions.transactionFormOthrNomLabel}
+        valeur={command.pspNom ?? ''}
+        icone="account-balance"
+      />
+    ),
+    // Pays de l'institution, avec son code comme dans le formulaire
+    pays != null && (
+      <SelectionChamp
+        key="pays"
+        libelle={traductions.transactionFormOthrPaysLabel}
+        valeur={pays.name}
+        pastille={<SelectionPastille code={pays.iso3} />}
+      />
+    ),
+    <Champ key="nom" libelle={traductions.transactionFormVerificationClientName} valeur={transaction.clientNom} icone="person" />,
+    transaction.facture != null && (
+      <Champ key="facture" libelle={traductions.transactionDetailsFacture} valeur={transaction.facture} icone="receipt-long" />
+    ),
+    transaction.txId != null && (
+      <Champ key="ref" libelle={traductions.transactionDetailsReference} valeur={transaction.txId} icone="tag" />
+    ),
+    // Montant, et l'erreur si le solde ne suffit pas
+    <View key="montant">
+      <Champ
+        libelle={traductions.transactionFormAmountHint}
+        valeur={`${formatMontant(command.amount?.value ?? 0, locale)} FCFA`}
+        icone="payments"
+      />
+      {!soldeValide && (
+        <Text style={[theme.inputDecorationTheme.errorStyle, styles.erreur]}>{`⚠ ${traductions.transactionFormAmountInvalid}`}</Text>
+      )}
+    </View>,
+    <Champ
+      key="frais"
+      libelle={traductions.transactionDetailsRecuInfoFrais}
+      valeur={montantFrais !== 0 ? `${formatMontant(montantFrais, locale)} FCFA` : traductions.transactionDetailsRecuInfoFraisDefault}
+      icone="receipt"
+    />,
+    motif.length > 0 && <Champ key="motif" libelle={traductions.transactionFormMotifLabel} valeur={motif} icone="notes" />,
+  ].filter(Boolean);
+
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionFormVerificationTitle} />}>
       <MyPageContainer>
         <ScrollView style={styles.flex}>
-          {/* Titre de la page */}
-          <Text style={theme.textTheme.titleSmall}>{traductions.transactionFormVerificationTitle}</Text>
-          <View style={styles.gap5} />
+          <View style={styles.gap8} />
           {/* Sous-titre de la page */}
-          <Text style={theme.textTheme.displaySmall}>
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
             {command.action === TransactionSendCommand.actionSendSchedule
               ? traductions.transactionFormVerificationAbnmSubtitle
               : traductions.transactionFormVerificationSubtitle}
           </Text>
-          <View style={styles.gap32} />
-
-          {/* Alias */}
-          {command.alias != null && (
-            <>
-              <CustomTextInput labelText={traductions.aliasFormLabel} value={aliasValue ?? ''} readOnly suffixIcon={addAliasSwitch} />
-              {/* Institution */}
-              {psp != null && (
-                <>
-                  <View style={styles.gap16} />
-                  <CustomTextInput labelText={traductions.transactionFormOthrNomLabel} value={psp.nomMembre} readOnly />
-                </>
-              )}
-            </>
-          )}
-
-          {/* IBAN ou autre compte */}
-          {(command.method === TransactionSendMethod.iban || command.method === TransactionSendMethod.othr) && (
-            <>
-              <CustomTextInput
-                labelText={
-                  command.method === TransactionSendMethod.iban
-                    ? traductions.transactionFormIbanHint
-                    : traductions.transactionFormOthrLabel
-                }
-                value={command.othr?.compte() ?? ''}
-                readOnly
-              />
-              <View style={styles.gap16} />
-              <CustomTextInput
-                labelText={
-                  command.method === TransactionSendMethod.iban
-                    ? traductions.transactionFormIbanNomLabel
-                    : traductions.transactionFormOthrNomLabel
-                }
-                value={command.pspNom ?? ''}
-                readOnly
-              />
-            </>
-          )}
-
-          <View style={styles.gap16} />
-          {/* Pays de l'institution */}
-          <CustomTextInput
-            labelText={traductions.transactionFormOthrPaysLabel}
-            value={UEMOACountry.get(transaction.clientPays)?.name ?? ''}
-            readOnly
-          />
-          <View style={styles.gap16} />
-          {/* Nom du client */}
-          <CustomTextInput labelText={traductions.transactionFormVerificationClientName} value={transaction.clientNom} readOnly />
-          <View style={styles.gap16} />
-          {/* Facture */}
-          {transaction.facture != null && (
-            <>
-              <CustomTextInput labelText={traductions.transactionDetailsFacture} value={transaction.facture} readOnly />
-              <View style={styles.gap16} />
-            </>
-          )}
-          {/* Référence */}
-          {transaction.txId != null && (
-            <>
-              <CustomTextInput labelText={traductions.transactionDetailsReference} value={transaction.txId} readOnly />
-              <View style={styles.gap16} />
-            </>
-          )}
-          {/* Montant */}
-          <CustomTextInput
-            labelText={traductions.transactionFormAmountHint}
-            value={formatMontant(command.amount?.value ?? 0, locale)}
-            readOnly
-            messageError={!command.isSoldeValid(transaction.montantFrais) ? traductions.transactionFormAmountInvalid : null}
-          />
-          <View style={styles.gap16} />
-          {/* Frais */}
-          <CustomTextInput
-            labelText={traductions.transactionDetailsRecuInfoFrais}
-            value={montantFrais !== 0 ? formatMontant(montantFrais, locale) : traductions.transactionDetailsRecuInfoFraisDefault}
-            readOnly
-          />
-          <View style={styles.gap16} />
-          {/* Motif */}
-          <CustomTextMultipleInput labelText={traductions.transactionFormMotifLabel} defaultValue={command.motif?.value ?? ''} readOnly />
+          <View style={styles.gap24} />
+          {champs.map((champ, i) => (
+            <View key={i} style={i > 0 ? styles.gap12 : null}>
+              {champ}
+            </View>
+          ))}
           <View style={styles.gap64} />
         </ScrollView>
         {/* Bouton de confirmation, rejet ou programmation */}
@@ -227,11 +218,28 @@ export function TransactionVerificationPage() {
   );
 }
 
+/** Information en lecture seule : pastille avec [icone], libellé et valeur */
+function Champ({
+  libelle,
+  valeur,
+  icone,
+  suffixe,
+}: {
+  libelle: string;
+  valeur: string;
+  icone: ComponentProps<typeof MaterialIcons>['name'];
+  suffixe?: ReactNode;
+}) {
+  return <SelectionChamp libelle={libelle} valeur={valeur} pastille={<SelectionPastille icone={icone} />} suffixe={suffixe} />;
+}
+
 const styles = StyleSheet.create({
   flex: { flex: 1 },
   bottom: { paddingVertical: 16 },
-  gap5: { height: 5 },
-  gap16: { height: 16 },
-  gap32: { height: 32 },
+  gap8: { height: 8 },
+  gap12: { marginTop: 12 },
+  gap24: { height: 24 },
   gap64: { height: 64 },
+  action: { padding: 4, marginLeft: 8 },
+  erreur: { marginLeft: 8, marginTop: 4 },
 });

package/src/modules/transactions/presentation/pages/transaction_recents/transaction_recents_nombre_widget.tsx

@@ -1,13 +1,16 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { useState } from 'react';
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { useBloc } from '../../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
 import { Card } from '../../../../../shared/material/card';
+import { withAlpha } from '../../../../../shared/utils/color';
 import { NumberIncWidget } from '../../../../../shared/widgets/number_inc_widget';
+import { SelectionSheet } from '../../../../../shared/widgets/selection';
 import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
 import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
 import { ConfigKey } from '../../../../config/domain/models/config_keys';
@@ -18,7 +21,7 @@ export function TransactionRecentsNombreWidget() {
   const theme = useTheme();
   const router = useAppRouter();
   const configBloc = useBloc(ConfigBloc);
-  const { height } = useWindowDimensions();
+  const primaire = theme.colorScheme.primary;
   const [nbItems] = useState(() => {
     const param = configBloc.getParamValue(ConfigKey.transactionsRecentNbItems);
     return param != null ? parseInt(param, 10) : 3;
@@ -26,47 +29,51 @@ export function TransactionRecentsNombreWidget() {
   const [updatedNbItems, setUpdatedNbItems] = useState(nbItems);
 
   return (
-    <View style={[styles.box, { maxHeight: height * 0.5, backgroundColor: theme.colorScheme.surface }]}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Titre */}
-        <Text style={theme.textTheme.headlineMedium}>{traductions.homeTransactionsRecentsNombreTitle}</Text>
-        <View style={styles.gap10} />
-        {/* Sous titre */}
-        <Text style={theme.textTheme.displayLarge}>{traductions.homeTransactionsRecentsNombreSubTitle}</Text>
-        <View style={styles.gap32} />
-        {/* Boutons réduire et augmenter */}
-        <Card>
-          <View style={styles.row}>
-            <Text style={[theme.textTheme.headlineSmall, styles.flex]}>{traductions.homeTransactions}</Text>
-            <NumberIncWidget min={3} max={10} number={updatedNbItems} onChange={setUpdatedNbItems} />
-          </View>
-        </Card>
-        <View style={styles.gap24} />
-        {/* Enregistrer */}
-        <ElevatedButton
-          onPress={
-            updatedNbItems !== nbItems
-              ? () => {
-                  configBloc.add(new ConfigChangeEvent(ConfigKey.transactionsRecentNbItems, String(updatedNbItems)));
-                  AppRouter.pop(router);
-                }
-              : undefined
-          }
-        >
-          {traductions.homeTransactionsRecentsNombreBtnSave}
-        </ElevatedButton>
-        <View style={styles.gap10} />
-      </ScrollView>
-    </View>
+    <SelectionSheet
+      titre={traductions.homeTransactionsRecentsNombreTitle}
+      entete={
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+          {traductions.homeTransactionsRecentsNombreSubTitle}
+        </Text>
+      }
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.content}>
+          {/* Boutons réduire et augmenter */}
+          <Card style={styles.carte}>
+            <View style={styles.row}>
+              {/* Pastille */}
+              <View style={[styles.pastille, { backgroundColor: withAlpha(primaire, 0.12) }]}>
+                <MaterialIcons name="receipt-long" size={20} color={primaire} />
+              </View>
+              <Text style={[theme.textTheme.displayLarge, styles.libelle]}>{traductions.homeTransactions}</Text>
+              <NumberIncWidget min={3} max={10} number={updatedNbItems} onChange={setUpdatedNbItems} />
+            </View>
+          </Card>
+          <View style={styles.gap20} />
+          {/* Enregistrer */}
+          <ElevatedButton
+            onPress={
+              updatedNbItems !== nbItems
+                ? () => {
+                    configBloc.add(new ConfigChangeEvent(ConfigKey.transactionsRecentNbItems, String(updatedNbItems)));
+                    AppRouter.pop(router);
+                  }
+                : undefined
+            }
+          >
+            {traductions.homeTransactionsRecentsNombreBtnSave}
+          </ElevatedButton>
+        </ScrollView>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, overflow: 'hidden' },
-  content: { padding: 20 },
-  row: { flexDirection: 'row', alignItems: 'center', padding: 15 },
-  flex: { flex: 1 },
-  gap10: { height: 10 },
-  gap24: { height: 24 },
-  gap32: { height: 32 },
+  content: { paddingHorizontal: 20, paddingTop: 12, paddingBottom: 16 },
+  carte: { margin: 0 },
+  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14, paddingVertical: 12 },
+  pastille: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
+  libelle: { flex: 1, marginHorizontal: 14, fontWeight: '500' },
+  gap20: { height: 20 },
 });

package/src/modules/transactions/presentation/pages/transaction_recents/transaction_recents_widget.tsx

@@ -59,7 +59,7 @@ export function TransactionRecentsWidget() {
         <Pressable
           accessibilityRole="button"
           hitSlop={10}
-          onPress={() => void showModalBottomSheet(router, { themed: true, builder: () => <TransactionRecentsNombreWidget /> })}
+          onPress={() => void showModalBottomSheet(router, { builder: () => <TransactionRecentsNombreWidget /> })}
         >
           <MaterialIcons name="more-horiz" size={24} color={theme.colorScheme.onSurface} />
         </Pressable>

package/src/modules/transactions/presentation/pages/transaction_rtp/transaction_rtp_page_actions.tsx

@@ -74,7 +74,6 @@ export function TransactionRtpPageActions({
 
   const onRejectTap = () =>
     void showModalBottomSheet(router, {
-      themed: true,
       builder: () => (
         <BlocProvider blocs={[bloc]}>
           <TransactionRtpPageActionsReject />

package/src/modules/transactions/presentation/pages/transaction_rtp/transaction_rtp_page_actions_reject.tsx

@@ -1,19 +1,18 @@
-import { MaterialIcons } from '@expo/vector-icons';
 import { useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { ScrollView, StyleSheet, Text } from 'react-native';
 
 import { useBloc } from '../../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
 import { formatMontant } from '../../../../../shared/widgets/amount_widget';
+import { SelectionBoutons, SelectionChoix, SelectionSheet } from '../../../../../shared/widgets/selection';
 import type { Transaction } from '../../../domain/models/transaction';
 import { TransactionRejectReason } from '../../../domain/models/transaction_reject_reason';
 import { TransactionRtpBloc } from '../../bloc/transaction_rtp/transaction_rtp_bloc';
 import { TransactionRtpRejectEvent } from '../../bloc/transaction_rtp/transaction_rtp_event';
-import { SheetBox } from '../transaction_details/sheet_box';
 
 /** Textes des raisons de rejet */
 function raison(motif: TransactionRejectReason, traductions: AppLocalizations): string {
@@ -43,52 +42,52 @@ export function TransactionRtpPageActionsReject() {
   const tx = (bloc.state as unknown as { transaction: Transaction }).transaction;
 
   return (
-    <SheetBox>
-      <Text style={theme.textTheme.headlineLarge}>{traductions.transactionRtpRejectTitle(tx.clientNom)}</Text>
-      <View style={styles.gap12} />
-      <Text style={theme.textTheme.bodySmall}>
-        {traductions.transactionRtpRejectSubtitle(formatMontant(tx.montant, traductions.localeName), tx.clientNom)}
-      </Text>
-      <View style={styles.gap20} />
-      {/* Raisons du rejet */}
-      {TransactionRejectReason.values()
-        .filter((motif) => motif !== TransactionRejectReason.autre)
-        .map((motif) => (
-          <View key={motif} style={styles.chipRow}>
-            <Pressable
-              accessibilityRole="button"
-              onPress={() => setReason(motif)}
-              style={[styles.chip, { backgroundColor: theme.secondaryHeaderColor }]}
-            >
-              {reason === motif && <MaterialIcons name="check" size={18} color={theme.colorScheme.onSurface} style={styles.check} />}
-              <Text style={theme.textTheme.bodyMedium}>{raison(motif, traductions)}</Text>
-            </Pressable>
-          </View>
-        ))}
-      <View style={styles.gap10} />
-      <ElevatedButton
-        style={styles.button}
-        onPress={
-          reason != null
-            ? () => {
-                AppRouter.pop(router);
-                bloc.add(new TransactionRtpRejectEvent(tx, reason));
-              }
-            : undefined
-        }
-      >
-        {traductions.btnTextReject}
-      </ElevatedButton>
-    </SheetBox>
+    <SelectionSheet
+      titre={traductions.transactionRtpRejectTitle(tx.clientNom)}
+      entete={
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+          {traductions.transactionRtpRejectSubtitle(formatMontant(tx.montant, traductions.localeName), tx.clientNom)}
+        </Text>
+      }
+      contenu={
+        <>
+          {/* Raisons du rejet */}
+          <ScrollView bounces={false} style={styles.defile} contentContainerStyle={styles.content}>
+            {TransactionRejectReason.values()
+              .filter((motif) => motif !== TransactionRejectReason.autre)
+              .map((motif) => (
+                <SelectionChoix
+                  key={motif}
+                  texte={raison(motif, traductions)}
+                  choisi={reason === motif}
+                  onPress={() => setReason(motif)}
+                />
+              ))}
+          </ScrollView>
+          <SelectionBoutons
+            boutons={[
+              <ElevatedButton
+                key="rejeter"
+                onPress={
+                  reason != null
+                    ? () => {
+                        AppRouter.pop(router);
+                        bloc.add(new TransactionRtpRejectEvent(tx, reason));
+                      }
+                    : undefined
+                }
+              >
+                {traductions.btnTextReject}
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  gap10: { height: 10 },
-  gap12: { height: 12 },
-  gap20: { height: 20 },
-  chipRow: { paddingVertical: 5, alignItems: 'flex-start' },
-  chip: { flexDirection: 'row', alignItems: 'center', borderRadius: 8, paddingHorizontal: 12, minHeight: 32 },
-  check: { marginRight: 8 },
-  button: { height: 56 },
+  defile: { flexShrink: 1 },
+  content: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 16 },
 });

package/src/modules/transactions/presentation/pages/transaction_search/transaction_search_page.tsx

@@ -1,11 +1,9 @@
-import { Keyboard, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Keyboard, Pressable, StyleSheet, View } from 'react-native';
 
 import { BlocProvider, useCreateBloc } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
-import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 import { TransactionSens } from '../../../domain/models/transaction';
 import { TransactionSearchCommand } from '../../../domain/models/transaction_search/transaction_search_command';
@@ -14,12 +12,11 @@ import { TransactionSearchBloc } from '../../bloc/transaction_search/transaction
 import { TransactionSearchListEvent } from '../../bloc/transaction_search/transaction_search_event';
 import { TransactionSearchPageInput } from './transaction_search_page_input';
 import { TransactionSearchPageListe } from './transaction_search_page_liste';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 
 /** Recherche dans toutes les transactions du compte actif (route `transactionSearch`). */
 export function TransactionSearchPage() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
-  const router = useAppRouter();
   const bloc = useCreateBloc(() => {
     const created = new TransactionSearchBloc(Di.getTransactionInputPort());
     created.add(
@@ -34,12 +31,11 @@ export function TransactionSearchPage() {
   });
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionSearchTitle} />}>
       <BlocProvider blocs={[bloc]}>
         <MyPageContainer>
           <Pressable style={styles.flex} onPress={Keyboard.dismiss} accessible={false}>
-            <Text style={theme.textTheme.titleSmall}>{traductions.transactionSearchTitle}</Text>
-            <View style={styles.gap16} />
+            <View style={styles.gap8} />
             {/* Barre de filtre : champ et bouton */}
             <TransactionSearchPageInput />
             <View style={styles.gap32} />
@@ -54,6 +50,6 @@ export function TransactionSearchPage() {
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  gap16: { height: 16 },
+  gap8: { height: 8 },
   gap32: { height: 32 },
 });

package/src/modules/transactions/presentation/pages/transaction_split/transaction_split_page_repartition.tsx

@@ -4,18 +4,18 @@ import { useState } from 'react';
 import { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
 
 import { Images } from '../../../../../core/assets';
-import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { TextButton } from '../../../../../shared/material/buttons';
 import { Card } from '../../../../../shared/material/card';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { CircleAvatarWidget } from '../../../../../shared/widgets/circle_avatar_widget';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 import { ContactPI } from '../../../../contacts/domain/contact_pi';
 import type { Transaction } from '../../../domain/models/transaction';
 import { TransactionListItemWidget } from '../transaction_list_item_widget';
 import { SPLIT_SELF, TransactionSplitPageConfirm } from './transaction_split_page_confirm';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 
 /**
  * Partage de dépense, dernière étape : répartition du montant entre le
@@ -24,7 +24,6 @@ import { SPLIT_SELF, TransactionSplitPageConfirm } from './transaction_split_pag
 export function TransactionSplitPageRepartition({ transaction, contacts }: { transaction: Transaction; contacts: ContactPI[] }) {
   const traductions = useAppLocalizations();
   const theme = useTheme();
-  const router = useAppRouter();
   // Le client en tête de liste
   const [selectedItems] = useState(() => [new ContactPI({ name: SPLIT_SELF, phoneNumber: '', alias: SPLIT_SELF }), ...contacts]);
   // Répartition par défaut : parts égales, le reste pour le client
@@ -39,10 +38,8 @@ export function TransactionSplitPageRepartition({ transaction, contacts }: { tra
   });
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionSplitRepartitionTitle} />}>
       <MyPageContainer>
-        <Text style={theme.textTheme.titleSmall}>{traductions.transactionSplitRepartitionTitle}</Text>
-        <View style={styles.gap10} />
         <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
           {/* Détails du paiement partagé */}
           <Text style={theme.textTheme.headlineSmall}>{traductions.transactionSplitRepartitionSubtitle1}</Text>