@pi-spi/app 0.0.0-stage → 1.2.0

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

@@ -0,0 +1,141 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useBloc, useBlocBuilder, useBlocListener } 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 { ElevatedButton } from '../../../../../shared/material/buttons';
+import { showModalBottomSheet } from '../../../../../shared/material/overlays';
+import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { FrequenceInputWidget } from '../../../../../shared/widgets/frequence_input_widget';
+import { CustomLoadingDialog, LoadingPage } from '../../../../../shared/widgets/loading_page';
+import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { SubscriptionListBloc } from '../../../../subscription/presentation/bloc/subscription_list/subscription_list_bloc';
+import { SubscriptionListFetchEvent } from '../../../../subscription/presentation/bloc/subscription_list/subscription_list_event';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendConfirmEvent, TransactionSendScheduleEvent } from '../../bloc/transaction_send/transaction_send_event';
+import {
+  TransactionSendFormErrorState,
+  TransactionSendFormScheduleState,
+  TransactionSendFormSendingState,
+  TransactionSendFormSuccessState,
+} from '../../bloc/transaction_send/transaction_send_state';
+import { TransactionSendPageError } from '../transaction_send/transaction_send_page_error';
+import { TransactionSendPageSuccess } from '../transaction_send/transaction_send_page_succes';
+import { TransactionSendFormInputDate } from './transaction_form_input_date';
+
+/** Programmation d'un transfert : fréquence et dates (route `transactionFormSchedule`). */
+export function TransactionFormPageSchedule({
+  dateExpiration,
+  isRtpSchedule,
+}: {
+  dateExpiration?: Date | null;
+  /** Programmation d'un paiement de demande : la programmation est retournée à l'écran appelant. */
+  isRtpSchedule?: boolean | null;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const bloc = useBloc(TransactionSendBloc);
+  const subscriptionListBloc = useBloc(SubscriptionListBloc);
+  const state = useBlocBuilder(bloc, (_p, current) => current instanceof TransactionSendFormScheduleState);
+
+  useBlocListener(
+    bloc,
+    (s) => {
+      if (s instanceof TransactionSendFormSendingState) {
+        CustomLoadingDialog.show(router);
+      } else if (s instanceof TransactionSendFormSuccessState) {
+        CustomLoadingDialog.hide(router);
+        // Actualiser la liste des abonnements
+        subscriptionListBloc.add(new SubscriptionListFetchEvent(Di.activeCompte));
+        let isBottomSheetClosed = false;
+        // Rediriger sur la page d'accueil après 3 secondes (comme en Flutter,
+        // seulement si l'on est encore sur la vérification)
+        const homeRedirectTimer = setTimeout(() => {
+          if (!isBottomSheetClosed && AppRouter.currentRoute(router) === AppRouter.transactionFormVerification) {
+            AppRouter.pop(router);
+            AppRouter.pushReplacement(router, AppRouter.home);
+          }
+        }, 3000);
+        void showModalBottomSheet(router, {
+          isDismissible: false,
+          builder: () => (
+            <TransactionSendPageSuccess
+              transaction={s.transaction}
+              onClose={() => {
+                isBottomSheetClosed = true;
+                clearTimeout(homeRedirectTimer);
+              }}
+            />
+          ),
+        });
+      } else if (s instanceof TransactionSendFormErrorState) {
+        CustomLoadingDialog.hide(router);
+        void showModalBottomSheet(router, {
+          builder: () => <TransactionSendPageError error={s.error} method={s.command.method} />,
+        });
+      }
+    },
+    (_p, current) =>
+      current instanceof TransactionSendFormSendingState ||
+      current instanceof TransactionSendFormSuccessState ||
+      current instanceof TransactionSendFormErrorState,
+  );
+
+  if (!(state instanceof TransactionSendFormScheduleState)) return <LoadingPage />;
+  const { command, transaction } = state;
+  const scheduleValid = command.schedule != null && command.schedule.isValid();
+
+  const confirm = async () => {
+    if (isRtpSchedule === true) {
+      AppRouter.pop(router, { value: command.schedule });
+      return;
+    }
+    if (!(await Di.config.identification.requireStepUpIdentification())) return;
+    if (bloc.isClosed) return;
+    bloc.add(new TransactionSendConfirmEvent(command, transaction, Di.config.identification.confirmationMethodLabel));
+  };
+
+  return (
+    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+      <MyPageContainer>
+        <ScrollView style={styles.flex}>
+          {/* Titre de la page */}
+          <Text style={theme.textTheme.titleSmall}>{traductions.transactionFormScheduleTitle}</Text>
+          <View style={styles.gap5} />
+          {/* Sous-titre de la page */}
+          <Text style={theme.textTheme.displaySmall}>{traductions.transactionFormScheduleSubtitle}</Text>
+          <View style={styles.gap32} />
+          {/* Fréquence */}
+          <FrequenceInputWidget
+            command={command.schedule!.frequence!}
+            onChange={(value) => {
+              command.schedule!.frequence = value;
+              bloc.add(new TransactionSendScheduleEvent(command, transaction));
+            }}
+          />
+          <View style={styles.gap16} />
+          {/* Date */}
+          <TransactionSendFormInputDate command={command} transaction={transaction} dateLimite={dateExpiration} />
+          <View style={styles.gap32} />
+        </ScrollView>
+        {/* Confirmer (le bouton est doublement espacé, comme en Flutter) */}
+        <View style={styles.bottom}>
+          <ElevatedButton onPress={scheduleValid ? () => void confirm() : undefined}>
+            {traductions.transactionFormVerificationBtnConfirm}
+          </ElevatedButton>
+        </View>
+      </MyPageContainer>
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  bottom: { paddingVertical: 32, paddingHorizontal: 12 },
+  gap5: { height: 5 },
+  gap16: { height: 16 },
+  gap32: { height: 32 },
+});

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

@@ -0,0 +1,52 @@
+import { StyleSheet, View } from 'react-native';
+
+import { useBloc } from '../../../../../core/bloc_react';
+import { Di } from '../../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { ElevatedButton } from '../../../../../shared/material/buttons';
+import type { Transaction } from '../../../domain/models/transaction';
+import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendConfirmEvent } from '../../bloc/transaction_send/transaction_send_event';
+
+/**
+ * Bouton de confirmation d'une programmation : renvoie la programmation à
+ * l'écran appelant pour une demande de paiement, sinon la confirme
+ * (après l'identification renforcée de l'hôte).
+ */
+export function TransactionFormPageScheduleBtn({
+  command,
+  transaction,
+  isRtpSchedule,
+}: {
+  command: TransactionSendCommand;
+  transaction: Transaction;
+  isRtpSchedule?: boolean | null;
+}) {
+  const traductions = useAppLocalizations();
+  const router = useAppRouter();
+  const bloc = useBloc(TransactionSendBloc);
+  const valid = command.schedule != null && command.schedule.isValid();
+
+  const confirm = async () => {
+    if (isRtpSchedule === true) {
+      AppRouter.pop(router, { value: command.schedule });
+      return;
+    }
+    if (!(await Di.config.identification.requireStepUpIdentification())) return;
+    if (bloc.isClosed) return;
+    bloc.add(new TransactionSendConfirmEvent(command, transaction, Di.config.identification.confirmationMethodLabel));
+  };
+
+  return (
+    // Deux paddings de 16 imbriqués, comme le SDK Flutter
+    <View style={styles.padding}>
+      <ElevatedButton onPress={valid ? () => void confirm() : undefined}>{traductions.transactionFormVerificationBtnConfirm}</ElevatedButton>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  padding: { padding: 32 },
+});

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

@@ -0,0 +1,237 @@
+import { ScrollView, StyleSheet, Switch, 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 { useAppLocalizations } from '../../../../../l10n/localizations';
+import { showModalBottomSheet } from '../../../../../shared/material/overlays';
+import { AppBar, 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 { ContactPI } from '../../../../contacts/domain/contact_pi';
+import { ContactBloc } from '../../../../contacts/presentation/bloc/contact_bloc';
+import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import { TransactionSendMethod } from '../../../domain/models/transaction_send/transaction_send_method';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import {
+  TransactionSendFormErrorState,
+  TransactionSendFormSendingState,
+  TransactionSendFormSuccessState,
+  TransactionSendFormVerificationAskingState,
+} from '../../bloc/transaction_send/transaction_send_state';
+import { TransactionSendPageError } from '../transaction_send/transaction_send_page_error';
+import { TransactionSendPageSuccess } from '../transaction_send/transaction_send_page_succes';
+import { TransactionFormBtnConfirm } from './transaction_form_btn_confirm';
+
+/** Vérification du transfert avant confirmation (route `transactionFormVerification`). */
+export function TransactionVerificationPage() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const contactBloc = useBloc(ContactBloc);
+  useBlocBuilder(contactBloc);
+  const bloc = useBloc(TransactionSendBloc);
+  const state = useBlocBuilder(bloc, (_p, current) => current instanceof TransactionSendFormVerificationAskingState);
+  const locale = traductions.localeName;
+
+  useBlocListener(
+    bloc,
+    (s) => {
+      // Envoi en cours
+      if (s instanceof TransactionSendFormSendingState) {
+        CustomLoadingDialog.show(router);
+      }
+      // Envoyé avec succès - irrévocable
+      else if (s instanceof TransactionSendFormSuccessState) {
+        CustomLoadingDialog.hide(router);
+        let isBottomSheetClosed = false;
+        // Rediriger sur la page d'accueil après 3 secondes
+        const homeRedirectTimer = setTimeout(() => {
+          if (!isBottomSheetClosed && AppRouter.currentRoute(router) === AppRouter.transactionFormVerification) {
+            AppRouter.pop(router);
+            AppRouter.pushReplacement(router, AppRouter.home);
+          }
+        }, 3000);
+        void showModalBottomSheet(router, {
+          isDismissible: false,
+          builder: () => (
+            <TransactionSendPageSuccess
+              transaction={s.transaction}
+              onClose={() => {
+                isBottomSheetClosed = true;
+                clearTimeout(homeRedirectTimer);
+              }}
+            />
+          ),
+        });
+      }
+      // Envoyé avec erreur - rejeté
+      else if (s instanceof TransactionSendFormErrorState) {
+        CustomLoadingDialog.hide(router);
+        void showModalBottomSheet(router, {
+          isDismissible: false,
+          builder: () => <TransactionSendPageError error={s.error} method={s.command.method} />,
+        });
+      }
+    },
+    (_p, current) =>
+      current instanceof TransactionSendFormSendingState ||
+      current instanceof TransactionSendFormSuccessState ||
+      current instanceof TransactionSendFormErrorState,
+  );
+
+  if (!(state instanceof TransactionSendFormVerificationAskingState)) return <LoadingPage />;
+  const { command, transaction } = state;
+  const psp =
+    transaction.clientPSP != null ? (state.participants ?? []).find((p) => p.codeMembre === transaction.clientPSP) : undefined;
+  const montantFrais = transaction.montantFrais ?? 0;
+
+  /** Proposer d'enregistrer l'alias dans les contacts (s'il n'y est pas) */
+  const aliasValue = command.alias?.alias();
+  const addAliasSwitch =
+    aliasValue != null && !contactBloc.isContactExist(aliasValue) ? (
+      <Switch
+        value={false}
+        trackColor={{ false: theme.switchTheme.inactiveTrackColor, true: theme.switchTheme.activeTrackColor }}
+        thumbColor={theme.switchTheme.thumbColor}
+        onValueChange={async () => {
+          const confirmed = await showModalBottomSheet<boolean>(router, {
+            themed: true,
+            builder: () => (
+              <ConfirmActionSheetWidget
+                title={traductions.contactAliasSaveText}
+                subtitle={traductions.contactAliasSaveConfirmMessage(transaction.clientNom, aliasValue)}
+                confirmTitle={traductions.btnTextYes}
+                cancelTitle={traductions.btnTextNo}
+              />
+            ),
+          });
+          if (confirmed === true) {
+            void AppRouter.push(router, AppRouter.profileContacts, {
+              params: new ContactPI({ name: transaction.clientNom, alias: aliasValue }),
+            });
+          }
+        }}
+      />
+    ) : null;
+
+  return (
+    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+      <MyPageContainer>
+        <ScrollView style={styles.flex}>
+          {/* Titre de la page */}
+          <Text style={theme.textTheme.titleSmall}>{traductions.transactionFormVerificationTitle}</Text>
+          <View style={styles.gap5} />
+          {/* Sous-titre de la page */}
+          <Text style={theme.textTheme.displaySmall}>
+            {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.gap64} />
+        </ScrollView>
+        {/* Bouton de confirmation, rejet ou programmation */}
+        <View style={styles.bottom}>
+          <TransactionFormBtnConfirm command={command} transaction={transaction} />
+        </View>
+      </MyPageContainer>
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  bottom: { paddingVertical: 16 },
+  gap5: { height: 5 },
+  gap16: { height: 16 },
+  gap32: { height: 32 },
+  gap64: { height: 64 },
+});

package/src/modules/transactions/presentation/pages/transaction_list_item_widget.tsx

@@ -0,0 +1,118 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { DateFormat } from '../../../../shared/utils/date_format';
+import { AmountWidget } from '../../../../shared/widgets/amount_widget';
+import { CircleAvatarWidget } from '../../../../shared/widgets/circle_avatar_widget';
+import { TransactionSens, type Transaction } from '../../domain/models/transaction';
+
+/**
+ * Ligne de transaction : avatar du client avec pastille du sens (débit
+ * rouge / crédit vert), nom, montant signé et date. Un tap ouvre le
+ * détail, sauf si [noLink] ; avec [onSelect], une case à cocher précède la ligne.
+ */
+export function TransactionListItemWidget({
+  transaction,
+  detailsBackRoute,
+  noLink,
+  onSelect,
+  isSelected,
+}: {
+  transaction: Transaction;
+  detailsBackRoute?: string;
+  noLink?: boolean;
+  onSelect?: (value: boolean) => void;
+  isSelected?: boolean;
+}) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  const locale = useAppLocalizations().localeName;
+  const debit = transaction.sens === TransactionSens.debit;
+
+  const showDetails = () =>
+    void AppRouter.push(router, AppRouter.transactionSendDetails.replace(':id', transaction.endToEndId), {
+      params: { tx: transaction, route: detailsBackRoute },
+    });
+
+  const tile = (
+    <View style={styles.tile}>
+      <View>
+        <CircleAvatarWidget nom={transaction.clientNom} photo={transaction.clientPhoto} rounded radius={45} />
+        {/* Pastille du sens */}
+        <View
+          style={[
+            styles.badge,
+            { backgroundColor: debit ? theme.colorScheme.error : Themer.successColor, borderColor: theme.colorScheme.surface },
+          ]}
+        >
+          <MaterialIcons name={debit ? 'arrow-back' : 'arrow-forward'} size={14} color="white" />
+        </View>
+      </View>
+      <View style={styles.texts}>
+        <View style={styles.titleRow}>
+          {/* Nom et prénoms du client */}
+          <Text numberOfLines={1} style={[theme.textTheme.headlineSmall, styles.name]}>
+            {transaction.clientNom}
+          </Text>
+          {/* Montant */}
+          <View style={styles.amount}>
+            <AmountWidget montant={transaction.montant} style={theme.textTheme.headlineSmall} sign={debit ? '-' : ''} />
+          </View>
+        </View>
+        {/* Date d'irrévocabilité */}
+        {transaction.dateOperation != null && (
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural04Color }]}>
+            {new DateFormat('d MMM, HH:mm', locale).format(transaction.dateOperation)}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+
+  if (onSelect != null) {
+    return (
+      <Pressable accessibilityRole="checkbox" accessibilityState={{ checked: isSelected ?? false }} onPress={() => onSelect(!(isSelected ?? false))} style={styles.checkRow}>
+        <MaterialIcons
+          name={isSelected ? 'check-box' : 'check-box-outline-blank'}
+          size={24}
+          color={isSelected ? theme.colorScheme.primary : Themer.neural02Color}
+        />
+        <View style={styles.flex}>{tile}</View>
+      </Pressable>
+    );
+  }
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={noLink === true}
+      onPress={showDetails}
+      style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}
+    >
+      {tile}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  tile: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, minHeight: 64 },
+  badge: {
+    position: 'absolute',
+    right: -2,
+    bottom: -2,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  texts: { flex: 1, marginLeft: 16 },
+  titleRow: { flexDirection: 'row', alignItems: 'center' },
+  name: { flex: 1 },
+  amount: { paddingLeft: 8 },
+  checkRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  flex: { flex: 1 },
+});

package/src/modules/transactions/presentation/pages/transaction_list_loading_widget.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+
+import { SkeletonWidget } from '../../../../shared/widgets/skeleton_widget';
+
+/** Squelette de chargement d'une liste de transactions (3 lignes). */
+export function TransactionListLoadingWidget() {
+  const { width } = useWindowDimensions();
+  return (
+    <View style={styles.box}>
+      {[0, 1, 2].map((i) => (
+        <View key={i} style={styles.row}>
+          <SkeletonWidget radius={20} />
+          <View style={styles.texts}>
+            <SkeletonWidget height={15} width={width * 0.55} />
+            <View style={styles.gap} />
+            <SkeletonWidget width={100} />
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { height: 200 },
+  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 10 },
+  texts: { marginLeft: 16, flex: 1 },
+  gap: { height: 6 },
+});

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

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { useBloc } from '../../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { ElevatedButton } from '../../../../../shared/material/buttons';
+import { Card } from '../../../../../shared/material/card';
+import { NumberIncWidget } from '../../../../../shared/widgets/number_inc_widget';
+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';
+
+/** Feuille de réglage du nombre de transactions récentes affichées (3 à 10). */
+export function TransactionRecentsNombreWidget() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const configBloc = useBloc(ConfigBloc);
+  const { height } = useWindowDimensions();
+  const [nbItems] = useState(() => {
+    const param = configBloc.getParamValue(ConfigKey.transactionsRecentNbItems);
+    return param != null ? parseInt(param, 10) : 3;
+  });
+  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>
+  );
+}
+
+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 },
+});