@pi-spi/app 0.0.0-stage → 1.2.0

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

@@ -0,0 +1,43 @@
+import { Image } from 'expo-image';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import type { PiSpiUserIdentity } from '../../../../core/pi_spi_sdk_config';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { useValueListenable } from '../../../../core/value_notifier';
+import { AvatarWidget } from '../../../../shared/widgets/avatar_widget';
+import { ProfileAvatar } from '../../../profile/domain/profile_avatar';
+
+/** En-tête de l'accueil : avatar (bouton profil) et logo SPI. */
+export function HomeToolbarLeading({ user, enabled = true }: { user: PiSpiUserIdentity; enabled?: boolean }) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  const avatar = useValueListenable(ProfileAvatar.value);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={!enabled}
+      onPress={() => void AppRouter.push(router, AppRouter.profile)}
+      style={styles.row}
+    >
+      {/* Avatar bouton profil (grisé si le compte actif n'a pas d'alias) */}
+      <View style={{ opacity: enabled ? 1 : 0.4 }}>
+        <AvatarWidget userInitiales={user.initiales()} photo={avatar} size={40} />
+      </View>
+      <View style={styles.gap10} />
+      {/* Logo SPI */}
+      <Image
+        source={theme.brightness === 'dark' ? Images.logoSpiDark : Images.logoSpiLight}
+        style={styles.logo}
+        contentFit="fill"
+      />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20 },
+  gap10: { width: 10 },
+  logo: { height: 24, width: 71.98 },
+});

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

@@ -0,0 +1,18 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../../core/theme';
+
+/** Onglet « Économies » : « À venir », comme dans le SDK Flutter. */
+export function ComingSoon() {
+  const theme = useTheme();
+  return (
+    <View style={styles.center}>
+      <Text style={[theme.textTheme.bodyMedium, styles.text]}>À venir</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  text: { textAlign: 'center' },
+});

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

@@ -0,0 +1,119 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { Di } from '../../../../core/di';
+import type { PiSpiCompte } from '../../../../core/pi_spi_sdk_config';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { maskCompte } from '../../../../shared/utils/compte_mask';
+import { AmountWidget } from '../../../../shared/widgets/amount_widget';
+import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+
+/**
+ * Affichée à chaque ouverture du SDK lorsque le client a plusieurs comptes
+ * (`PiSpiUserIdentity.comptes`) : il choisit celui qu'il souhaite utiliser
+ * pour cette session (QR partagé, transactions envoyées, alias PI-SPI...).
+ * Sautée si le client n'a qu'un seul compte.
+ */
+export function SelectAccountPage() {
+  const router = useAppRouter();
+  const comptes = Di.config.user.comptes;
+  return (
+    <Scaffold
+      appBar={
+        // Rien à afficher tant qu'un compte n'est pas choisi : on rend la
+        // main à l'application hôte, comme au tout premier lancement.
+        <AppBar onBack={() => void Di.config.close()} />
+      }
+    >
+      <SelectAccountList
+        comptes={comptes}
+        onSelected={(numero) => {
+          Di.activeCompte = numero;
+          AppRouter.pushReplacement(router, AppRouter.home);
+        }}
+      />
+    </Scaffold>
+  );
+}
+
+function SelectAccountList({
+  comptes,
+  onSelected,
+}: {
+  comptes: readonly PiSpiCompte[];
+  onSelected: (numero: string) => void;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  return (
+    <MyPageContainer>
+      <ScrollView>
+        {/* Titre de la page */}
+        <Text style={theme.textTheme.titleSmall}>{traductions.aliasSelectAccountPageTitle}</Text>
+        <View style={styles.gap5} />
+        {/* Sous titre de la page */}
+        <Text style={theme.textTheme.displaySmall}>{traductions.aliasSelectAccountPageSubTitle}</Text>
+        <View style={styles.gap28} />
+        {/* Liste des comptes */}
+        {comptes.map((compte) => (
+          <View key={compte.numero} style={styles.item}>
+            <AccountCard compte={compte} onTap={() => onSelected(compte.numero)} />
+          </View>
+        ))}
+      </ScrollView>
+    </MyPageContainer>
+  );
+}
+
+function AccountCard({ compte, onTap }: { compte: PiSpiCompte; onTap: () => void }) {
+  const theme = useTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onTap}
+      style={({ pressed }) => [
+        styles.card,
+        { backgroundColor: pressed ? theme.cardColor : theme.colorScheme.surface },
+      ]}
+    >
+      {/* Icône compte */}
+      <View style={[styles.icon, { backgroundColor: `${theme.colorScheme.primary}1A` }]}>
+        <Image source={Images.iconTransactionSendByIban} style={styles.iconImage} tintColor={theme.colorScheme.primary} />
+      </View>
+      <View style={styles.gap12w} />
+      {/* Libellé + numéro */}
+      <View style={styles.expanded}>
+        <Text style={theme.textTheme.headlineSmall}>{compte.libelle}</Text>
+        <View style={styles.gap2} />
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural04Color }]}>{maskCompte(compte.numero)}</Text>
+      </View>
+      <View style={styles.gap8w} />
+      {/* Solde */}
+      <View style={styles.flexible}>
+        <AmountWidget montant={compte.solde} surfixText="XOF" numberOfLines={1} style={{ ...theme.textTheme.headlineSmall, fontSize: 15 }} />
+      </View>
+      <View style={styles.gap4w} />
+      <MaterialIcons name="chevron-right" size={24} color={Themer.neural04Color} />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  gap2: { height: 2 },
+  gap5: { height: 5 },
+  gap28: { height: 28 },
+  gap4w: { width: 4 },
+  gap8w: { width: 8 },
+  gap12w: { width: 12 },
+  item: { marginBottom: 14 },
+  card: { flexDirection: 'row', alignItems: 'center', padding: 16, borderRadius: 18, margin: 4 },
+  icon: { width: 46, height: 46, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
+  iconImage: { width: 24, height: 24 },
+  expanded: { flex: 1 },
+  flexible: { flexShrink: 1 },
+});

package/src/modules/introduction/presentation/pages/introduction.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import { useRef, useState } from 'react';
+import {
+  FlatList,
+  StyleSheet,
+  useWindowDimensions,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { Themer } from '../../../../core/theme';
+import type { SupportedLocaleCode } from '../../../../l10n/app_localizations';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { IntroductionItem } from './introduction_item';
+import { IntroductionPageItem } from './introduction_page';
+
+/**
+ * Vidéos d'introduction par langue (`onboarding_<langue>_<n>.mp4`). Metro
+ * n'accepte que des `require` statiques, d'où cette table.
+ */
+const videos: Record<SupportedLocaleCode, Record<number, number>> = {
+  fr: {
+    1: require('../../../../../assets/videos/onboarding_fr_1.mp4'),
+    2: require('../../../../../assets/videos/onboarding_fr_2.mp4'),
+    3: require('../../../../../assets/videos/onboarding_fr_3.mp4'),
+    4: require('../../../../../assets/videos/onboarding_fr_4.mp4'),
+    5: require('../../../../../assets/videos/onboarding_fr_5.mp4'),
+    6: require('../../../../../assets/videos/onboarding_fr_6.mp4'),
+  },
+  en: {
+    1: require('../../../../../assets/videos/onboarding_en_1.mp4'),
+    2: require('../../../../../assets/videos/onboarding_en_2.mp4'),
+    3: require('../../../../../assets/videos/onboarding_en_3.mp4'),
+    4: require('../../../../../assets/videos/onboarding_en_4.mp4'),
+    5: require('../../../../../assets/videos/onboarding_en_5.mp4'),
+    6: require('../../../../../assets/videos/onboarding_en_6.mp4'),
+  },
+  pt: {
+    1: require('../../../../../assets/videos/onboarding_pt_1.mp4'),
+    2: require('../../../../../assets/videos/onboarding_pt_2.mp4'),
+    3: require('../../../../../assets/videos/onboarding_pt_3.mp4'),
+    4: require('../../../../../assets/videos/onboarding_pt_4.mp4'),
+    5: require('../../../../../assets/videos/onboarding_pt_5.mp4'),
+    6: require('../../../../../assets/videos/onboarding_pt_6.mp4'),
+  },
+};
+
+export function IntroductionPage() {
+  const localizations = useAppLocalizations();
+  const { width } = useWindowDimensions();
+  const listRef = useRef<FlatList<IntroductionItem>>(null);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  // Légende affichée sous les vidéos
+  const legende = localizations.introductionLegende;
+  const lang = localizations.localeName;
+  // Liste d'éléments d'introduction
+  const itemList = [
+    new IntroductionItem(videos[lang][4], legende, localizations.introductionItem4, 0),
+    new IntroductionItem(videos[lang][5], legende, localizations.introductionItem5, 1),
+    new IntroductionItem(videos[lang][3], legende, localizations.introductionItem3, 2),
+    new IntroductionItem(videos[lang][2], legende, localizations.introductionItem2, 3),
+    new IntroductionItem(videos[lang][1], legende, localizations.introductionItem1, 4),
+    new IntroductionItem(videos[lang][6], legende, localizations.introductionItem6, 5),
+  ];
+  const nbItems = itemList.length;
+  // Marge horizontale
+  const paddingX = 20;
+  // Largeur barre de progression
+  const progressBarWidth = width - paddingX * 2;
+  const progressBarItemWidth = progressBarWidth / nbItems - 4;
+
+  const goTo = (index: number) => {
+    listRef.current?.scrollToIndex({ index, animated: true });
+    setCurrentPage(index);
+  };
+
+  const onMomentumScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    setCurrentPage(Math.round(event.nativeEvent.contentOffset.x / width));
+  };
+
+  return (
+    <SafeAreaView style={styles.page}>
+      <FlatList
+        ref={listRef}
+        data={itemList}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(item) => String(item.position)}
+        onMomentumScrollEnd={onMomentumScrollEnd}
+        getItemLayout={(_data, index) => ({ length: width, offset: width * index, index })}
+        windowSize={3}
+        renderItem={({ item, index }) => (
+          <IntroductionPageItem
+            item={item}
+            pageSize={nbItems}
+            progressBarWidth={progressBarItemWidth}
+            active={index === currentPage}
+            width={width}
+            onPrevious={() => currentPage > 0 && goTo(currentPage - 1)}
+            onNext={() => currentPage < nbItems - 1 && goTo(currentPage + 1)}
+          />
+        )}
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  page: { flex: 1, backgroundColor: Themer.brownColor },
+});

package/src/modules/introduction/presentation/pages/introduction_bar.tsx

@@ -0,0 +1,37 @@
+import type { VideoPlayer } from 'expo-video';
+import { StyleSheet, View } from 'react-native';
+
+import type { IntroductionItem } from './introduction_item';
+import { VideoProgressBar } from './introduction_progressbar';
+
+export function IntroductionBar({
+  videoPlayer,
+  item,
+  pageSize,
+  progressBarWidth,
+}: {
+  videoPlayer: VideoPlayer;
+  item: IntroductionItem;
+  pageSize: number;
+  progressBarWidth: number;
+}) {
+  const widgetPosition = item.position;
+  const barList = [];
+  for (let i = 0; i < pageSize; i++) {
+    // Page antérieure à la page en cours, page à venir, ou page actuelle
+    barList.push(
+      <VideoProgressBar
+        key={i}
+        videoPlayer={i === widgetPosition ? videoPlayer : null}
+        progressBarItemWidth={progressBarWidth}
+        passed={i < widgetPosition}
+        current={i === widgetPosition}
+      />,
+    );
+  }
+  return <View style={styles.row}>{barList}</View>;
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', justifyContent: 'space-between', alignSelf: 'stretch' },
+});

package/src/modules/introduction/presentation/pages/introduction_footer.tsx

@@ -0,0 +1,57 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useBloc } from '../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import type { AppLocalizations } from '../../../../l10n/app_localizations';
+import { ElevatedButton } from '../../../../shared/material/buttons';
+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';
+import type { IntroductionItem } from './introduction_item';
+
+export function IntroductionFooter({
+  item,
+  pageSize,
+  traductions,
+}: {
+  item: IntroductionItem;
+  pageSize: number;
+  traductions: AppLocalizations;
+}) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  const configBloc = useBloc(ConfigBloc);
+
+  if (item.position === pageSize - 1) {
+    return (
+      <ElevatedButton
+        style={styles.button}
+        onPress={() => {
+          configBloc.add(new ConfigChangeEvent(ConfigKey.introductionPassed, '1'));
+          // Contrairement à l'app de référence (qui enchaîne sur la
+          // connexion/session), le SDK n'a pas de login : l'utilisateur est
+          // déjà authentifié par l'hôte, donc on enchaîne directement sur
+          // la demande de permission contacts.
+          AppRouter.pushReplacement(router, AppRouter.permissions);
+        }}
+      >
+        <Text style={[theme.textTheme.titleSmall, styles.center]}>{traductions.btnTextContinue}</Text>
+      </ElevatedButton>
+    );
+  }
+  return (
+    <View style={styles.column}>
+      <Text style={[theme.textTheme.bodyLarge, { color: Themer.whiteColor }]}>{traductions.introductionFooterTitle}</Text>
+      <View style={styles.gap5} />
+      <Text style={[theme.textTheme.bodyLarge, { color: Themer.amberColor }]}>{traductions.introductionFooterSubtitle}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: { minHeight: 60 },
+  center: { textAlign: 'center' },
+  column: { alignItems: 'center', justifyContent: 'center' },
+  gap5: { height: 5 },
+});

package/src/modules/introduction/presentation/pages/introduction_item.ts

@@ -0,0 +1,13 @@
+/** Un element de l'introduction contient une vidéo et un titre */
+export class IntroductionItem {
+  constructor(
+    /** Vidéo (module Metro de l'asset) */
+    readonly video: number,
+    /** Légende de la vidéo */
+    readonly legende: string,
+    /** Titre de la vidéo */
+    readonly titre: string,
+    /** Position de la page de l'introduction */
+    readonly position: number,
+  ) {}
+}

package/src/modules/introduction/presentation/pages/introduction_page.tsx

@@ -0,0 +1,75 @@
+import { useVideoPlayer } from 'expo-video';
+import { useEffect } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { IntroductionBar } from './introduction_bar';
+import { IntroductionFooter } from './introduction_footer';
+import type { IntroductionItem } from './introduction_item';
+import { IntroductionVideo } from './introduction_video';
+
+/** Un item introduction : vidéo de présentation, barre de progression et pied de page. */
+export function IntroductionPageItem({
+  item,
+  pageSize,
+  progressBarWidth,
+  active,
+  width,
+  onPrevious,
+  onNext,
+}: {
+  item: IntroductionItem;
+  pageSize: number;
+  progressBarWidth: number;
+  /** Page actuellement affichée : seule sa vidéo est lue. */
+  active: boolean;
+  width: number;
+  onPrevious: () => void;
+  onNext: () => void;
+}) {
+  const traductions = useAppLocalizations();
+  const videoPlayer = useVideoPlayer(item.video, (player) => {
+    player.loop = true;
+    player.volume = 1.0;
+  });
+
+  useEffect(() => {
+    if (active) {
+      videoPlayer.currentTime = 0;
+      videoPlayer.play();
+    } else {
+      videoPlayer.pause();
+    }
+  }, [active, videoPlayer]);
+
+  return (
+    <View style={{ width }}>
+      {/* Zones cliquables invisibles sur les côtés, sous le contenu : les
+          touches qui ne tombent pas sur le contenu (ex. bouton Continuer)
+          les atteignent, et le glissement horizontal reste possible. */}
+      <View style={[StyleSheet.absoluteFill, styles.row]}>
+        {/* Zone gauche (25%) */}
+        <Pressable style={styles.side} onPress={onPrevious} />
+        {/* Zone centrale (50% - non cliquable) */}
+        <View style={styles.middle} />
+        {/* Zone droite (25%) */}
+        <Pressable style={styles.side} onPress={onNext} />
+      </View>
+      <View style={styles.page} pointerEvents="box-none">
+        {/* barre de progression */}
+        <IntroductionBar videoPlayer={videoPlayer} item={item} pageSize={pageSize} progressBarWidth={progressBarWidth} />
+        {/* Video et titres */}
+        <IntroductionVideo videoPlayer={videoPlayer} item={item} />
+        {/* Pied de la page */}
+        <IntroductionFooter item={item} pageSize={pageSize} traductions={traductions} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row' },
+  side: { flex: 1 },
+  middle: { flex: 2 },
+  page: { flex: 1, paddingVertical: 12, paddingHorizontal: 20, alignItems: 'stretch', justifyContent: 'space-between' },
+});

package/src/modules/introduction/presentation/pages/introduction_progressbar.tsx

@@ -0,0 +1,55 @@
+import type { VideoPlayer } from 'expo-video';
+import { useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../../../core/theme';
+
+/** Une barre de progression : pleine si passée, vide si à venir, suit la vidéo si en cours. */
+export function VideoProgressBar({
+  videoPlayer,
+  progressBarItemWidth,
+  passed,
+  current,
+}: {
+  videoPlayer: VideoPlayer | null;
+  progressBarItemWidth: number;
+  passed: boolean;
+  current: boolean;
+}) {
+  const [progress, setProgress] = useState(passed ? 1 : 0);
+
+  useEffect(() => {
+    if (passed) {
+      setProgress(1);
+      return undefined;
+    }
+    if (!current || !videoPlayer) {
+      setProgress(0);
+      return undefined;
+    }
+    // A une fréquence de 50 ms la progression de la vidéo est relue.
+    // La valeur est la position actuelle divisée par la durée totale.
+    const timer = setInterval(() => {
+      const duration = videoPlayer.duration;
+      const value = duration > 0 ? videoPlayer.currentTime / duration : 0;
+      setProgress(Number.isNaN(value) ? 0 : Math.min(1, value));
+    }, 50);
+    return () => clearInterval(timer);
+  }, [videoPlayer, passed, current]);
+
+  return <ProgressIndicator width={progressBarItemWidth} progress={progress} />;
+}
+
+function ProgressIndicator({ width, progress }: { width: number; progress: number }) {
+  const theme = useTheme();
+  const height = 3;
+  return (
+    <View style={[styles.track, { width, height, borderRadius: height }]}>
+      <View style={{ width: width * progress, height, borderRadius: height, backgroundColor: theme.primaryColor }} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: { backgroundColor: '#F5F5F1', flexDirection: 'row' },
+});

package/src/modules/introduction/presentation/pages/introduction_video.tsx

@@ -0,0 +1,51 @@
+import { VideoView, type VideoPlayer } from 'expo-video';
+import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import type { IntroductionItem } from './introduction_item';
+
+export function IntroductionVideo({ videoPlayer, item }: { videoPlayer: VideoPlayer; item: IntroductionItem }) {
+  const theme = useTheme();
+  const traductions = useAppLocalizations();
+  // Récupérer la taille de l'écran pour la responsivité des textes
+  const { height: hauteurEcran } = useWindowDimensions();
+  const textSize = hauteurEcran < 700 ? theme.textTheme.titleSmall : theme.textTheme.titleLarge;
+
+  return (
+    <View style={styles.column}>
+      {/* Contenant de la vidéo fond blanc et bords arrondis */}
+      <View style={styles.videoBox}>
+        <VideoView player={videoPlayer} style={styles.video} contentFit="contain" nativeControls={false} />
+      </View>
+      {/* Distance qui sépare la vidéo du texte en dessous */}
+      <View style={styles.gap20} />
+      {/* Bienvenue */}
+      <Text style={[theme.textTheme.bodyLarge, styles.legende]}>{traductions.introductionLegende}</Text>
+      {/* Distance entre Bienvenue et titre de la vidéo */}
+      <View style={styles.gap10} />
+      {/* Titre de la vidéo introductive */}
+      <Text style={[textSize, styles.titre]}>{item.titre}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  column: { alignItems: 'center' },
+  videoBox: {
+    width: 300,
+    height: 350,
+    borderRadius: 16,
+    backgroundColor: 'white',
+    borderColor: 'white',
+    borderWidth: 0.5,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  video: { width: '100%', height: '100%' },
+  gap20: { height: 20 },
+  gap10: { height: 10 },
+  legende: { color: '#8B887E' },
+  titre: { color: 'white', textAlign: 'center' },
+});

package/src/modules/notification/domain/models/notification.ts

@@ -0,0 +1,73 @@
+import { NotificationType } from './notification_type';
+
+export class Notification {
+  /** Compte du client */
+  readonly compte?: string;
+  /** Identifiant de la notification */
+  readonly id: string;
+  /** Référence de l'objet concerné */
+  readonly idObject?: string;
+  /** Type de la notification */
+  readonly type: NotificationType;
+  /** Date de l'action à l'origine de la notification */
+  readonly dateAction: Date;
+  /** Date où le client a lu la notification */
+  readonly dateLecture?: Date;
+  /** Détails sur la notification */
+  readonly details?: Record<string, any>;
+
+  constructor(params: {
+    compte?: string;
+    id: string;
+    type: NotificationType;
+    idObject?: string;
+    dateAction: Date;
+    dateLecture?: Date;
+    details?: Record<string, any>;
+  }) {
+    this.compte = params.compte;
+    this.id = params.id;
+    this.type = params.type;
+    this.idObject = params.idObject;
+    this.dateAction = params.dateAction;
+    this.dateLecture = params.dateLecture;
+    this.details = params.details;
+  }
+
+  static fromJson(json: Record<string, any>): Notification {
+    return new Notification({
+      compte: json.compte ?? undefined,
+      id: json.id,
+      type: NotificationType.get(json.type),
+      idObject: json.idObject ?? undefined,
+      dateAction: new Date(json.dateAction),
+      dateLecture: json.dateLecture != null ? new Date(json.dateLecture) : undefined,
+      details: json.details ?? undefined,
+    });
+  }
+
+  /**
+   * Comme {@link fromJson}, mais `null` pour un type de notification
+   * inconnu. (Le SDK Flutter lève une exception, et toute la liste échoue
+   * à cause d'une seule notification d'un type récent : corrigé ici.)
+   */
+  static tryFromJson(json: Record<string, any>): Notification | null {
+    try {
+      return Notification.fromJson(json);
+    } catch {
+      return null;
+    }
+  }
+
+  toJson(): Record<string, unknown> {
+    return {
+      ...(this.compte != null ? { compte: this.compte } : {}),
+      id: this.id,
+      type: this.type,
+      ...(this.idObject != null ? { idObject: this.idObject } : {}),
+      dateAction: this.dateAction.toISOString(),
+      ...(this.dateLecture != null ? { dateLecture: this.dateLecture.toISOString() } : {}),
+      ...(this.details != null ? { details: this.details } : {}),
+    };
+  }
+}