@pi-spi/app 0.0.0-stage → 1.2.1

package/src/modules/home/presentation/pages/home_compte_carousel.tsx

@@ -0,0 +1,299 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+
+import { useBloc, useBlocListener } from '../../../../core/bloc_react';
+import { CompteAliasStatus } from '../../../../core/compte_alias_status';
+import { Di } from '../../../../core/di';
+import type { PiSpiCompte } from '../../../../core/pi_spi_sdk_config';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { useValueListenable } from '../../../../core/value_notifier';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { ElevatedButton } from '../../../../shared/material/buttons';
+import { maskCompte } from '../../../../shared/utils/compte_mask';
+import { AliasBloc } from '../../../alias/presentation/bloc/alias_bloc';
+import { AliasExistState } from '../../../alias/presentation/bloc/alias_state';
+import { SoldeWidgetWithQr } from '../../../compte/presentation/pages/solde_widget_with_qr';
+
+/**
+ * Carte compte de l'accueil. Si le client n'a qu'un seul compte, affiche
+ * directement `SoldeWidgetWithQr`. S'il en a plusieurs, affiche un
+ * carrousel horizontal : chaque compte devient "le" compte actif de la
+ * session dès qu'on swipe dessus, et si ce compte n'a pas encore d'alias
+ * PI-SPI, l'écran de création s'ouvre automatiquement pour lui.
+ *
+ * Dans les deux cas, si l'alias du compte actif n'a pas pu être vérifié
+ * (réseau, serveur), une carte d'erreur propose de réessayer.
+ */
+export function HomeCompteCarousel({
+  onAccountChanged,
+  onAccountSwiped,
+}: {
+  /** Appelé une fois que le compte affiché a bien un alias (il est devenu le compte actif). */
+  onAccountChanged: (compte: string) => void;
+  /** Appelé dès qu'on swipe sur un autre compte, avant de savoir s'il a un alias. */
+  onAccountSwiped?: (compte: string) => void;
+}) {
+  const comptes = Di.config.user.comptes;
+  if (comptes.length <= 1) {
+    return <SingleCompte onAccountChanged={onAccountChanged} />;
+  }
+  return <MultiCompteCarousel comptes={comptes} onAccountChanged={onAccountChanged} onAccountSwiped={onAccountSwiped} />;
+}
+
+/** Client à compte unique : la carte de solde, ou la carte d'erreur si son alias n'a pas pu être vérifié. */
+function SingleCompte({ onAccountChanged }: { onAccountChanged: (compte: string) => void }) {
+  const router = useAppRouter();
+  const aliasBloc = useBloc(AliasBloc);
+  const status = useValueListenable(Di.activeCompteAlias);
+
+  const retry = async () => {
+    const compte = Di.activeCompte;
+    Di.activeCompteAlias.value = CompteAliasStatus.checking;
+    const newStatus = CompteAliasStatus.fromState(await aliasBloc.fetchFor(compte));
+    Di.activeCompteAlias.value = newStatus;
+    if (newStatus === CompteAliasStatus.exists) {
+      onAccountChanged(compte);
+    } else if (newStatus === CompteAliasStatus.missing) {
+      void AppRouter.push(router, AppRouter.alias);
+    }
+  };
+
+  switch (status) {
+    case CompteAliasStatus.error:
+      return <AliasErrorCard onRetry={() => void retry()} />;
+    case CompteAliasStatus.checking:
+      return (
+        <View style={styles.placeholderBox}>
+          <CompteCardPlaceholder />
+        </View>
+      );
+    default:
+      return <SoldeWidgetWithQr />;
+  }
+}
+
+function MultiCompteCarousel({
+  comptes,
+  onAccountChanged,
+  onAccountSwiped,
+}: {
+  comptes: readonly PiSpiCompte[];
+  onAccountChanged: (compte: string) => void;
+  onAccountSwiped?: (compte: string) => void;
+}) {
+  const router = useAppRouter();
+  const aliasBloc = useBloc(AliasBloc);
+  const initialIndex = Math.max(
+    0,
+    comptes.findIndex((c) => c.numero === Di.activeCompte),
+  );
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const currentIndexRef = useRef(initialIndex);
+  // Le tout premier compte affiché a déjà été vérifié par le redirect de /home.
+  const [status, setStatus] = useState<CompteAliasStatus>(Di.activeCompteAlias.value);
+  const statusRef = useRef(status);
+  statusRef.current = status;
+  const [pageWidth, setPageWidth] = useState(0);
+  // Hauteur de la carte affichée (230 avant la première mesure) : les pages
+  // voisines (chargement) reprennent cette hauteur, pour que le carrousel
+  // ne « saute » pas d'une page à l'autre.
+  const [cardHeight, setCardHeight] = useState(230);
+  const mounted = useRef(true);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    [],
+  );
+
+  /** Vérifie l'alias du compte de la page [index] (après un swipe ou un « Réessayer »). */
+  const checkAlias = async (index: number) => {
+    const compte = comptes[index];
+    // Actions grisées le temps de vérifier l'alias.
+    setStatus(CompteAliasStatus.checking);
+    Di.activeCompteAlias.value = CompteAliasStatus.checking;
+    // fetchFor ne retient que la réponse concernant ce compte.
+    const result = await aliasBloc.fetchFor(compte.numero);
+    // L'utilisateur a peut-être déjà re-swipé pendant l'attente.
+    if (!mounted.current || currentIndexRef.current !== index) return;
+    const newStatus = CompteAliasStatus.fromState(result);
+    setStatus(newStatus);
+    Di.activeCompteAlias.value = newStatus;
+    if (newStatus === CompteAliasStatus.exists) {
+      onAccountChanged(compte.numero);
+    } else if (newStatus === CompteAliasStatus.missing) {
+      void AppRouter.push(router, AppRouter.alias);
+    }
+  };
+
+  const onPageChanged = (index: number) => {
+    if (index === currentIndexRef.current) return;
+    const compte = comptes[index];
+    // Ce compte est "actif" dès qu'il est affiché, avant même de savoir s'il a un alias.
+    Di.activeCompte = compte.numero;
+    currentIndexRef.current = index;
+    setCurrentIndex(index);
+    onAccountSwiped?.(compte.numero);
+    void checkAlias(index);
+  };
+
+  // Rattrape le cas où l'alias du compte affiché est créé "ailleurs"
+  // (AliasPage poussée depuis checkAlias, puis retour par un simple pop).
+  useBlocListener(aliasBloc, (state) => {
+    if (
+      statusRef.current !== CompteAliasStatus.exists &&
+      statusRef.current !== CompteAliasStatus.checking &&
+      state instanceof AliasExistState &&
+      state.alias.compte === comptes[currentIndexRef.current].numero
+    ) {
+      setStatus(CompteAliasStatus.exists);
+      Di.activeCompteAlias.value = CompteAliasStatus.exists;
+      onAccountChanged(Di.activeCompte);
+    }
+  });
+
+  const onContentLayout = (e: LayoutChangeEvent) => {
+    const measured = Math.round(e.nativeEvent.layout.height);
+    if (measured > 0 && measured !== cardHeight) setCardHeight(measured);
+  };
+
+  const renderPage = (index: number) => {
+    if (index !== currentIndex || status === CompteAliasStatus.checking) {
+      return (
+        <View style={{ height: cardHeight }}>
+          <CompteCardPlaceholder />
+        </View>
+      );
+    }
+    let content;
+    switch (status) {
+      case CompteAliasStatus.error:
+        content = <AliasErrorCard onRetry={() => void checkAlias(currentIndex)} />;
+        break;
+      case CompteAliasStatus.missing:
+        content = <NoAliasCard compte={comptes[index]} />;
+        break;
+      default:
+        content = <SoldeWidgetWithQr key={comptes[index].numero} />;
+    }
+    // La carte prend sa hauteur naturelle, mesurée pour les pages voisines.
+    return <View onLayout={onContentLayout}>{content}</View>;
+  };
+
+  return (
+    <View onLayout={(e) => setPageWidth(e.nativeEvent.layout.width)}>
+      <View>
+        {pageWidth > 0 && (
+          // ScrollView (et non FlatList) : le carrousel est imbriqué dans la
+          // FlatList horizontale des onglets de l'accueil, et React Native
+          // aplatit une liste virtualisée imbriquée dans une autre de même
+          // orientation.
+          <ScrollView
+            horizontal
+            pagingEnabled
+            nestedScrollEnabled
+            showsHorizontalScrollIndicator={false}
+            contentOffset={{ x: initialIndex * pageWidth, y: 0 }}
+            onMomentumScrollEnd={(e: NativeSyntheticEvent<NativeScrollEvent>) =>
+              onPageChanged(Math.round(e.nativeEvent.contentOffset.x / pageWidth))
+            }
+          >
+            {comptes.map((compte, index) => (
+              <View key={compte.numero} style={{ width: pageWidth }}>
+                {renderPage(index)}
+              </View>
+            ))}
+          </ScrollView>
+        )}
+      </View>
+      <View style={styles.gap8} />
+      <PageDots count={comptes.length} currentIndex={currentIndex} />
+    </View>
+  );
+}
+
+function CompteCardPlaceholder() {
+  const theme = useTheme();
+  return (
+    <View style={[styles.placeholder, { backgroundColor: theme.colorScheme.surface }]}>
+      <ActivityIndicator size="small" color={theme.colorScheme.primary} />
+    </View>
+  );
+}
+
+function NoAliasCard({ compte }: { compte: PiSpiCompte }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  return (
+    <View style={[styles.infoCard, { backgroundColor: theme.colorScheme.surface }]}>
+      <Text style={theme.textTheme.headlineSmall}>{compte.libelle}</Text>
+      <View style={styles.gap2} />
+      <Text style={[theme.textTheme.bodyMedium, styles.bold]}>{maskCompte(compte.numero)}</Text>
+      <View style={styles.gap8} />
+      <Text style={[theme.textTheme.displaySmall, styles.centerText]}>{traductions.homeNoAliasForAccountMessage}</Text>
+      <View style={styles.gap12} />
+      <ElevatedButton onPress={() => void AppRouter.push(router, AppRouter.alias)}>
+        {traductions.homeNoAliasForAccountBtn}
+      </ElevatedButton>
+    </View>
+  );
+}
+
+/**
+ * L'alias du compte actif n'a pas pu être vérifié (réseau, serveur) : rien
+ * ne permet de dire qu'il n'en a pas, on propose donc de réessayer plutôt
+ * que d'en créer un.
+ */
+function AliasErrorCard({ onRetry }: { onRetry: () => void }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  return (
+    <View style={[styles.infoCard, { backgroundColor: theme.colorScheme.surface }]}>
+      <MaterialIcons name="wifi-off" size={24} color={theme.colorScheme.error} />
+      <View style={styles.gap8} />
+      <Text style={[theme.textTheme.displaySmall, styles.centerText]}>{traductions.internetErrorSubtitle}</Text>
+      <View style={styles.gap12} />
+      <ElevatedButton onPress={onRetry}>{traductions.reessayer}</ElevatedButton>
+    </View>
+  );
+}
+
+function PageDots({ count, currentIndex }: { count: number; currentIndex: number }) {
+  const theme = useTheme();
+  const color = theme.colorScheme.primary;
+  return (
+    <View style={styles.dots}>
+      {Array.from({ length: count }, (_, i) => (
+        <View
+          key={i}
+          style={[styles.dot, { width: i === currentIndex ? 16 : 6, backgroundColor: color, opacity: i === currentIndex ? 1 : 0.3 }]}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  placeholderBox: { height: 230 },
+  placeholder: { flex: 1, margin: 4, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
+  infoCard: { margin: 4, borderRadius: 16, padding: 16, alignItems: 'center' },
+  bold: { fontWeight: '600' },
+  centerText: { textAlign: 'center' },
+  gap2: { height: 2 },
+  gap8: { height: 8 },
+  gap12: { height: 12 },
+  dots: { flexDirection: 'row', justifyContent: 'center' },
+  dot: { height: 6, borderRadius: 3, marginHorizontal: 3 },
+});

package/src/modules/home/presentation/pages/home_page.tsx

@@ -0,0 +1,182 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useRef, useState } from 'react';
+import {
+  FlatList,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useBloc } from '../../../../core/bloc_react';
+import { CompteAliasStatus } from '../../../../core/compte_alias_status';
+import { Di } from '../../../../core/di';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useValueListenable } from '../../../../core/value_notifier';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { Scaffold } from '../../../../shared/material/scaffold';
+import { ContactBloc } from '../../../contacts/presentation/bloc/contact_bloc';
+import { ContactListEvent } from '../../../contacts/presentation/bloc/contact_event';
+import { ParametreHideAmountBloc } from '../../../profile/presentation/bloc/hide_amount/hide_amount_bloc';
+import { ParametreHideAmountInitEvent } from '../../../profile/presentation/bloc/hide_amount/hide_amount_event';
+import { TransactionSendBloc } from '../../../transactions/presentation/bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendUpdateStateEvent } from '../../../transactions/presentation/bloc/transaction_send/transaction_send_event';
+import { HomeTabCompte } from './home_tab_compte';
+import { HomeToolbarLeading } from './home_toolbar_leading';
+import { NotificationBtnOpenWidget } from '../../../notification/presentation/pages/notification_btn_open_widget';
+import { SubscriptionListWidget } from '../../../subscription/presentation/pages/subscription_list/subscription_list_widget';
+import { ComingSoon } from './pending_modules';
+
+/** Accueil du SDK : onglets Compte, Abonnements et Économies. */
+export function HomePage({ selectedTab }: { selectedTab?: number }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { width } = useWindowDimensions();
+  const status = useValueListenable(Di.activeCompteAlias);
+  const hasAlias = CompteAliasStatus.hasAlias(status);
+  const hideAmountBloc = useBloc(ParametreHideAmountBloc);
+  const contactBloc = useBloc(ContactBloc);
+  const transactionSendBloc = useBloc(TransactionSendBloc);
+  const listRef = useRef<FlatList<number>>(null);
+  const [tab, setTab] = useState(hasAlias ? (selectedTab ?? 0) : 0);
+  const pageWidth = width - 20;
+
+  useEffect(() => {
+    // Initialize hide amount / Eye Off Listener
+    hideAmountBloc.add(new ParametreHideAmountInitEvent());
+    // Pré-liste des PSP
+    transactionSendBloc.add(new TransactionSendUpdateStateEvent());
+    // Pre fetch contacts
+    const timer = setTimeout(() => {
+      if (!contactBloc.isClosed) contactBloc.add(new ContactListEvent(null));
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [hideAmountBloc, contactBloc, transactionSendBloc]);
+
+  /**
+   * Les onglets Abonnements et Économies sont grisés tant que le compte
+   * actif n'a pas d'alias : on revient sur l'onglet Compte.
+   */
+  useEffect(() => {
+    if (!hasAlias && tab !== 0) goToTab(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasAlias]);
+
+  const goToTab = (index: number) => {
+    if (!hasAlias && index !== 0) return;
+    setTab(index);
+    listRef.current?.scrollToIndex({ index, animated: true });
+  };
+
+  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    setTab(Math.round(e.nativeEvent.contentOffset.x / pageWidth));
+  };
+
+  const tabs = [
+    { label: traductions.homePageToolbarTabbarCompte, enabled: true },
+    { label: traductions.homePageToolbarTabbarAbonnement, enabled: hasAlias },
+    { label: traductions.homePageToolbarTabbarEconomie, enabled: hasAlias },
+  ];
+
+  return (
+    <Scaffold
+      safeTop
+      appBar={
+        <View style={{ backgroundColor: theme.appBarTheme.backgroundColor }}>
+          <View style={styles.toolbar}>
+            <HomeToolbarLeading user={Di.config.user} enabled={hasAlias} />
+            {/* Notifications (grisé si le compte actif n'a pas d'alias) */}
+            <NotificationBtnOpenWidget enabled={hasAlias} />
+          </View>
+          {/* Onglets */}
+          <View style={styles.tabBar}>
+            {tabs.map((t, i) => (
+              <Pressable
+                key={i}
+                accessibilityRole="tab"
+                accessibilityState={{ selected: tab === i, disabled: !t.enabled }}
+                onPress={() => goToTab(i)}
+                style={[styles.tab, tab === i ? styles.tabSelected : null]}
+              >
+                <Text
+                  numberOfLines={1}
+                  style={[
+                    theme.textTheme.bodySmall,
+                    { color: tab === i ? 'white' : t.enabled ? Themer.neural04Color : Themer.neural02Color },
+                  ]}
+                >
+                  {t.label}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
+      }
+    >
+      {/* Contenu de la page principale */}
+      <View style={styles.body}>
+        <FlatList
+          ref={listRef}
+          data={[0, 1, 2]}
+          horizontal
+          pagingEnabled
+          // Pas de swipe vers les autres onglets sans alias.
+          scrollEnabled={hasAlias}
+          showsHorizontalScrollIndicator={false}
+          initialScrollIndex={tab}
+          getItemLayout={(_d, i) => ({ length: pageWidth, offset: pageWidth * i, index: i })}
+          keyExtractor={(i) => String(i)}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          renderItem={({ item }) => (
+            <View style={{ width: pageWidth }}>
+              {item === 0 && <HomeTabCompte />}
+              {item === 1 && <SubscriptionListWidget />}
+              {item === 2 && <ComingSoon />}
+            </View>
+          )}
+        />
+      </View>
+      {/* Retour à l'application hôte */}
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={traductions.homeCloseSdkTooltip}
+        onPress={() => void Di.config.close()}
+        style={[styles.fab, { bottom: 16 + insets.bottom, backgroundColor: theme.colorScheme.secondary }]}
+      >
+        <MaterialIcons
+          name={Platform.OS === 'ios' ? 'arrow-back-ios-new' : 'arrow-back'}
+          size={20}
+          color={theme.colorScheme.onSecondary}
+        />
+      </Pressable>
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  toolbar: { height: 56, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  tabBar: { flexDirection: 'row', paddingHorizontal: 20, height: 46, alignItems: 'center' },
+  tab: { flex: 1, height: 36, marginHorizontal: 2, alignItems: 'center', justifyContent: 'center', borderRadius: 12.2 },
+  tabSelected: { backgroundColor: '#151413' },
+  body: { flex: 1, padding: 10 },
+  fab: {
+    position: 'absolute',
+    right: 16,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 4,
+    shadowColor: '#000',
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+  },
+});

package/src/modules/home/presentation/pages/home_tab_compte.tsx

@@ -0,0 +1,97 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { RefreshControl, ScrollView, StyleSheet, View } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { CompteAliasStatus } from '../../../../core/compte_alias_status';
+import { Di } from '../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { useValueListenable } from '../../../../core/value_notifier';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { Card } from '../../../../shared/material/card';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { CtaWidget } from '../../../../shared/widgets/cta_widget';
+import { HomeCompteCarousel } from './home_compte_carousel';
+import { HomeTabCompteMoreMenu } from './home_tab_compte_more_menu';
+import { TransactionRecentsWidget } from '../../../transactions/presentation/pages/transaction_recents/transaction_recents_widget';
+
+/** Onglet « Compte » de l'accueil : carte(s) compte, actions principales et dernières transactions. */
+export function HomeTabCompte() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const status = useValueListenable(Di.activeCompteAlias);
+  // Clé unique pour forcer la reconstruction des enfants (tirer pour rafraîchir)
+  const [refreshKey, setRefreshKey] = useState(0);
+  // Android n'enlève l'indicateur de rafraîchissement que si `refreshing`
+  // passe à true puis revient à false.
+  const [refreshing, setRefreshing] = useState(false);
+  const onRefresh = () => {
+    setRefreshing(true);
+    setRefreshKey((k) => k + 1);
+    setTimeout(() => setRefreshing(false), 300);
+  };
+  // Compte actif affiché : la liste des dernières transactions se recharge
+  // quand il change ; `null` dès qu'on swipe sur un autre compte (la liste
+  // de l'ancien compte est vidée), jusqu'à confirmation de son alias.
+  const [activeCompte, setActiveCompte] = useState<string | null>(
+    CompteAliasStatus.hasAlias(Di.activeCompteAlias.value) ? Di.activeCompte : null,
+  );
+  const hasAlias = CompteAliasStatus.hasAlias(status);
+
+  return (
+    <ScrollView
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          colors={['white']}
+          progressBackgroundColor={theme.colorScheme.primary}
+          tintColor={theme.colorScheme.primary}
+        />
+      }
+    >
+      <Card key={refreshKey}>
+        <View style={styles.content}>
+          {/* Widget solde (carrousel si le client a plusieurs comptes) */}
+          <HomeCompteCarousel
+            onAccountSwiped={() => setActiveCompte(null)}
+            onAccountChanged={(compte) => setActiveCompte(compte)}
+          />
+          <View style={styles.gap16} />
+          {/* Principales actions : Envoyer, Recevoir, Plus (grisées sans alias) */}
+          <View style={styles.actions}>
+            <CtaWidget
+              image={Images.arrowUp}
+              label={traductions.homeActionSend}
+              action={hasAlias ? () => void AppRouter.push(router, AppRouter.transactionSend) : null}
+            />
+            <CtaWidget
+              image={Images.arrowDown}
+              label={traductions.homeActionRequest}
+              action={hasAlias ? () => void AppRouter.push(router, AppRouter.transactionReceive) : null}
+            />
+            <CtaWidget
+              icon={(color) => <MaterialIcons name="more-horiz" size={30} color={color} />}
+              label={traductions.homeActionMore}
+              action={hasAlias ? () => void showModalBottomSheet(router, { themed: true, builder: () => <HomeTabCompteMoreMenu /> }) : null}
+            />
+          </View>
+          <View style={styles.gap14} />
+          {/* Liste des dernières transactions */}
+          {activeCompte != null && <TransactionRecentsWidget key={activeCompte} />}
+        </View>
+      </Card>
+      <View style={styles.gap10} />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: { paddingHorizontal: 16, paddingVertical: 12 },
+  actions: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16 },
+  gap10: { height: 10 },
+  gap14: { height: 14 },
+  gap16: { height: 16 },
+});

package/src/modules/home/presentation/pages/home_tab_compte_more_menu.tsx

@@ -0,0 +1,66 @@
+import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Images } from '../../../../core/assets';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { Card } from '../../../../shared/material/card';
+import { MenuActionItem, MenuActionsWiget } from '../../../../shared/widgets/menu_actions_widget';
+
+/**
+ * Menu « Plus » de l'accueil. Le participant peut personnaliser ce menu
+ * pour y ajouter des fonctionnalités propres à son système.
+ */
+export function HomeTabCompteMoreMenu() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const { height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  return (
+    <View
+      style={[
+        styles.box,
+        { maxHeight: height * 0.7, backgroundColor: theme.colorScheme.surface, paddingBottom: 20 + insets.bottom },
+      ]}
+    >
+      <Card>
+        <ScrollView>
+          <MenuActionsWiget
+            items={[
+              // Programmer un paiement
+              new MenuActionItem(
+                Images.homeFooterTransfer,
+                traductions.homeActionMoreSheetProgrammerTitle,
+                traductions.homeActionMoreSheetProgrammerSubTitle,
+                () => void AppRouter.push(router, AppRouter.subscriptionSchedule),
+                { iconSize: 20 },
+              ),
+              // Trouver un abonnement
+              new MenuActionItem(
+                Images.homeMoreFindSubscription,
+                traductions.homeActionMoreSheetAbonnementTitle,
+                traductions.homeActionMoreSheetAbonnementSubTitle,
+                () => void AppRouter.push(router, AppRouter.subscriptionSubscribe),
+                { iconSize: 20 },
+              ),
+              // Partager dépenses
+              new MenuActionItem(
+                Images.homeMoreSplitPayments,
+                traductions.homeActionMoreSheetPartagerTitle,
+                traductions.homeActionMoreSheetPartagerSubTitle,
+                () => void AppRouter.push(router, AppRouter.transactionSplitPaymentTx),
+                { iconSize: 20 },
+              ),
+            ]}
+          />
+        </ScrollView>
+      </Card>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { borderRadius: 20, paddingTop: 20, paddingHorizontal: 20 },
+});