@pi-spi/app 0.0.0-stage → 1.2.0

package/src/modules/subscription/presentation/pages/subscription_details/subscription_details_page_transactions.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'react';
+import { RefreshControl, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { Di } from '../../../../../core/di';
+import { Themer, useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { AmountWidget } from '../../../../../shared/widgets/amount_widget';
+import { PaginatedScrollView } from '../../../../../shared/widgets/paginated_scroll_view';
+import { TransactionSens, type Transaction } from '../../../../transactions/domain/models/transaction';
+import { TransactionSearchCommand } from '../../../../transactions/domain/models/transaction_search/transaction_search_command';
+import { TransactionSearchFilter } from '../../../../transactions/domain/models/transaction_search/transaction_search_filter';
+import { TransactionListItemWidget } from '../../../../transactions/presentation/pages/transaction_list_item_widget';
+import { TransactionListLoadingWidget } from '../../../../transactions/presentation/pages/transaction_list_loading_widget';
+import { SubscriptionDetailsBloc } from '../../bloc/subscription_details/subscription_details_bloc';
+import { SubscriptionTransactionListEvent, SubscriptionTransactionPaginateEvent } from '../../bloc/subscription_details/subscription_details_event';
+import { SubscriptionTransactionLoadingState, SubscriptionTransactionState } from '../../bloc/subscription_details/subscription_details_state';
+
+/** Bilan (crédits - débits) */
+function bilan(transactions: Transaction[]): number {
+  return transactions.reduce((sum, e) => (e.sens === TransactionSens.debit ? sum - Math.trunc(e.montant) : sum + Math.trunc(e.montant)), 0);
+}
+
+/** Historique des paiements de l'abonnement, avec le bilan ; défiler pour paginer */
+export function SubscriptionDetailsPageTransactions() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const { height } = useWindowDimensions();
+  const bloc = useBloc(SubscriptionDetailsBloc);
+  const state = useBlocBuilder(
+    bloc,
+    (_p, current) => current instanceof SubscriptionTransactionLoadingState || current instanceof SubscriptionTransactionState,
+  );
+  const [refreshing, setRefreshing] = useState(false);
+  const command = useRef(
+    new TransactionSearchCommand({
+      compte: Di.activeCompte,
+      filters: new TransactionSearchFilter({
+        subscriptionId: bloc.subscription.endToEndId,
+        categories: [],
+        sens: [TransactionSens.credit, TransactionSens.debit],
+      }),
+    }),
+  );
+
+  useEffect(() => {
+    bloc.add(new SubscriptionTransactionListEvent({ command: command.current }));
+  }, [bloc]);
+
+  const transactions = state.transactions.data;
+  if (state instanceof SubscriptionTransactionState) command.current = state.command;
+  command.current.index = state.transactions.meta.next as number | string | null | undefined;
+
+  if (transactions.length === 0) {
+    return state instanceof SubscriptionTransactionLoadingState ? <TransactionListLoadingWidget /> : null;
+  }
+
+  return (
+    // Hauteur fixe : la moitié de l'écran (Column + Expanded dans la contrainte Flutter)
+    <View style={{ height: Math.max(100, height * 0.5) }}>
+      {/* En-tête : titre et bilan */}
+      <View style={styles.header}>
+        <Text style={theme.textTheme.bodyLarge}>{traductions.subscriptionHistoriqueTitle}</Text>
+        <AmountWidget montant={bilan(transactions)} style={{ ...theme.textTheme.displayLarge, color: Themer.neural03Color }} />
+      </View>
+      <View style={styles.gap10} />
+      {/* Liste */}
+      <PaginatedScrollView
+        style={styles.flex}
+        onEndReached={() => {
+          const c = command.current;
+          if (c.canLoadMore()) bloc.add(new SubscriptionTransactionPaginateEvent(c.index, { command: c }));
+        }}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            colors={['white']}
+            progressBackgroundColor={theme.colorScheme.primary}
+            onRefresh={() => {
+              setRefreshing(true);
+              bloc.add(new SubscriptionTransactionListEvent({ command: command.current }));
+              setTimeout(() => setRefreshing(false), 500);
+            }}
+          />
+        }
+      >
+        {transactions.map((transaction) => (
+          <TransactionListItemWidget key={transaction.endToEndId} transaction={transaction} />
+        ))}
+      </PaginatedScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  gap10: { height: 10 },
+});

package/src/modules/subscription/presentation/pages/subscription_list/subscription_list_empty_widget.tsx

@@ -0,0 +1,56 @@
+import { Image } from 'expo-image';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Images } from '../../../../../core/assets';
+import { 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 { SubscriptionMenuWidget } from '../subscription_menu_widget';
+
+/** Présentation de la fonctionnalité quand il n'y a ni abonnement ni paiement programmé */
+export function SubscriptionListEmptyWidget() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  return (
+    <View>
+      <View style={[styles.top, { backgroundColor: theme.secondaryHeaderColor }]}>
+        {/* Image illustration */}
+        <View style={styles.imageBox}>
+          <Image source={Images.subscriptionCalendar} style={styles.image} contentFit="contain" />
+        </View>
+        {/* Titre */}
+        <Text style={theme.textTheme.titleSmall}>{traductions.subscriptionEmptyTitle}</Text>
+      </View>
+      {/* Bouton nouveau */}
+      <View style={[styles.bottom, { backgroundColor: theme.cardColor }]}>
+        <Text style={[theme.textTheme.displaySmall, styles.flex]}>{traductions.subscriptionEmptySubTitle}</Text>
+        <ElevatedButton
+          style={styles.btn}
+          onPress={() => void showModalBottomSheet(router, { themed: true, builder: () => <SubscriptionMenuWidget /> })}
+        >
+          {traductions.subscriptionEmptyBtnCreate}
+        </ElevatedButton>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  top: { height: 260, padding: 20, borderTopLeftRadius: 15, borderTopRightRadius: 15 },
+  imageBox: { flex: 1, alignItems: 'flex-end', justifyContent: 'center' },
+  image: { width: 142, height: 142 },
+  bottom: {
+    height: 92,
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomLeftRadius: 15,
+    borderBottomRightRadius: 15,
+  },
+  btn: { width: 120, height: 40, minHeight: 40, paddingHorizontal: 0, paddingVertical: 0, borderRadius: 10 },
+});

package/src/modules/subscription/presentation/pages/subscription_list/subscription_list_item_widget.tsx

@@ -0,0 +1,73 @@
+import { Image } from 'expo-image';
+import { Pressable, StyleSheet, Text, 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 { AmountWidget } from '../../../../../shared/widgets/amount_widget';
+import { CircleAvatarWidget } from '../../../../../shared/widgets/circle_avatar_widget';
+import type { Subscription } from '../../../domain/models/subscription';
+import { SubscriptionStatusText } from '../subscription_status_text';
+
+/** Une souscription : client, montant et prochain paiement ; un tap ouvre son détail. */
+export function SubscriptionListItemWidget({
+  subscription,
+  detailsBackRoute,
+  noLink = false,
+}: {
+  subscription: Subscription;
+  /** Route de redirection */
+  detailsBackRoute?: string;
+  noLink?: boolean;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+
+  return (
+    <Pressable
+      disabled={noLink}
+      onPress={() =>
+        void AppRouter.push(router, AppRouter.subscriptionDetails, {
+          params: { tx: subscription, route: detailsBackRoute },
+        })
+      }
+      style={styles.tile}
+    >
+      <View>
+        <CircleAvatarWidget nom={subscription.clientNom} photo={subscription.clientPhoto} rounded radius={45} />
+        {subscription.clientAlias != null && (
+          <View style={[styles.badge, { backgroundColor: Themer.brownColor, borderColor: theme.colorScheme.surface }]}>
+            <Image source={Images.iconsPiBadge} style={styles.flex} contentFit="contain" />
+          </View>
+        )}
+      </View>
+      <View style={styles.texts}>
+        <View style={styles.row}>
+          {/* Nom et prénoms du client */}
+          <Text numberOfLines={1} style={[theme.textTheme.headlineSmall, styles.flex]}>
+            {subscription.clientNom}
+          </Text>
+          {/* Montant */}
+          <View style={styles.amount}>
+            <AmountWidget montant={subscription.montant} style={theme.textTheme.headlineSmall} sign="-" />
+          </View>
+        </View>
+        {/* Prochain paiement */}
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural04Color }]}>
+          {SubscriptionStatusText.nextPaymentIndication(traductions, subscription)}
+        </Text>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  tile: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8 },
+  badge: { position: 'absolute', right: 0, bottom: 0, width: 18, height: 18, borderRadius: 9, borderWidth: 2, overflow: 'hidden' },
+  texts: { flex: 1, marginLeft: 16 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  amount: { marginLeft: 8 },
+});

package/src/modules/subscription/presentation/pages/subscription_list/subscription_list_loading_widget.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+
+import { SkeletonWidget } from '../../../../../shared/widgets/skeleton_widget';
+
+function Section({ count, width }: { count: number; width: number }) {
+  return (
+    <>
+      <View style={styles.header}>
+        <SkeletonWidget height={15} width={150} />
+        <SkeletonWidget width={10} height={10} />
+      </View>
+      <View style={styles.list}>
+        {Array.from({ length: count }, (_, i) => (
+          <View key={i} style={styles.tile}>
+            <SkeletonWidget radius={20} />
+            <View style={styles.texts}>
+              <SkeletonWidget height={15} width={width} />
+              <View style={styles.gap4} />
+              <SkeletonWidget width={100} />
+            </View>
+          </View>
+        ))}
+      </View>
+    </>
+  );
+}
+
+/** Squelette de chargement des abonnements (deux sections) */
+export function SubscriptionListLoadingWidget() {
+  const { width } = useWindowDimensions();
+  return (
+    <View style={styles.box}>
+      <Section count={3} width={width} />
+      <View style={styles.gap30} />
+      <Section count={4} width={width} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { flex: 1, overflow: 'hidden' },
+  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 20 },
+  // Hauteur fixe de 200 (lignes au-delà coupées), comme le SDK Flutter
+  list: { height: 200, overflow: 'hidden' },
+  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8, minHeight: 72 },
+  texts: { flex: 1, marginLeft: 16, overflow: 'hidden' },
+  gap4: { height: 4 },
+  gap30: { height: 30 },
+});

package/src/modules/subscription/presentation/pages/subscription_list/subscription_list_widget.tsx

@@ -0,0 +1,108 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useRef, useState } from 'react';
+import { Pressable, RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { Di } from '../../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { Themer, useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { Card } from '../../../../../shared/material/card';
+import { showModalBottomSheet } from '../../../../../shared/material/overlays';
+import type { Subscription } from '../../../domain/models/subscription';
+import { SubscriptionListBloc } from '../../bloc/subscription_list/subscription_list_bloc';
+import { SubscriptionListFetchEvent } from '../../bloc/subscription_list/subscription_list_event';
+import { SubscriptionListLoadingState } from '../../bloc/subscription_list/subscription_list_state';
+import { SubscriptionMenuWidget } from '../subscription_menu_widget';
+import { SubscriptionListEmptyWidget } from './subscription_list_empty_widget';
+import { SubscriptionListItemWidget } from './subscription_list_item_widget';
+import { SubscriptionListLoadingWidget } from './subscription_list_loading_widget';
+
+/** Onglet « Abonnements » de l'accueil : paiements programmés et abonnements */
+export function SubscriptionListWidget() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const bloc = useBloc(SubscriptionListBloc);
+  const state = useBlocBuilder(bloc);
+  const compte = useRef(Di.activeCompte).current;
+  const [refreshing, setRefreshing] = useState(false);
+
+  useEffect(() => {
+    bloc.add(new SubscriptionListFetchEvent(compte));
+  }, [bloc, compte]);
+
+  // Skeleton
+  if (state instanceof SubscriptionListLoadingState) return <SubscriptionListLoadingWidget />;
+
+  const { subscriptions, paiementProgramme } = state;
+  const openMenu = () => void showModalBottomSheet(router, { themed: true, builder: () => <SubscriptionMenuWidget /> });
+
+  const section = (title: string, liste: Subscription[], createFn: () => void) => (
+    <View>
+      {/* En-tête de section */}
+      <View style={styles.header}>
+        <Text style={[theme.textTheme.headlineSmall, { color: Themer.neural05Color }]}>{title}</Text>
+        <Pressable accessibilityRole="button" hitSlop={4} onPress={createFn} style={styles.add}>
+          <MaterialIcons name="add" size={24} color={theme.colorScheme.primary} />
+        </Pressable>
+      </View>
+      <View style={styles.gap10} />
+      {/* Liste */}
+      <Card>
+        <View style={styles.padding}>
+          {liste.map((subscription) => (
+            <SubscriptionListItemWidget key={subscription.endToEndId} subscription={subscription} detailsBackRoute={AppRouter.home} />
+          ))}
+        </View>
+      </Card>
+      <View style={styles.gap20} />
+    </View>
+  );
+
+  return (
+    <ScrollView
+      style={styles.flex}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          colors={['white']}
+          progressBackgroundColor={theme.colorScheme.primary}
+          onRefresh={() => {
+            setRefreshing(true);
+            bloc.add(new SubscriptionListFetchEvent(compte));
+            setTimeout(() => setRefreshing(false), 500);
+          }}
+        />
+      }
+    >
+      {paiementProgramme.length === 0 && subscriptions.length === 0 ? (
+        <SubscriptionListEmptyWidget />
+      ) : (
+        <View>
+          {/* Paiements programmés */}
+          {paiementProgramme.length > 0 &&
+            section(traductions.subscriptionListOnceTitle, paiementProgramme, () =>
+              subscriptions.length === 0 ? openMenu() : void AppRouter.push(router, AppRouter.subscriptionSchedule),
+            )}
+          {/* Abonnements */}
+          {subscriptions.length > 0 &&
+            section(traductions.subscriptionListFrequenceTitle, subscriptions, () =>
+              paiementProgramme.length === 0 ? openMenu() : void AppRouter.push(router, AppRouter.subscriptionSubscribe),
+            )}
+          <View style={styles.gap30} />
+        </View>
+      )}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 16 },
+  add: { padding: 12 },
+  padding: { paddingHorizontal: 16 },
+  gap10: { height: 10 },
+  gap20: { height: 20 },
+  gap30: { height: 30 },
+});

package/src/modules/subscription/presentation/pages/subscription_menu_widget.tsx

@@ -0,0 +1,55 @@
+import { ScrollView, StyleSheet, Text, 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 de création : programmer un paiement ou souscrire à un abonnement (feuille du bas) */
+export function SubscriptionMenuWidget() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const { height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={[styles.box, { maxHeight: height * 0.4, backgroundColor: theme.colorScheme.surface }]}>
+      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
+        {/* Titre */}
+        <Text style={theme.textTheme.headlineMedium}>{traductions.subscriptionEmptyBtnCreate}</Text>
+        <View style={styles.gap20} />
+        <Card>
+          <MenuActionsWiget
+            items={[
+              // Programmer
+              new MenuActionItem(
+                Images.homeFooterTransfer,
+                traductions.subscriptionMenuScheduleTitle,
+                traductions.subscriptionMenuScheduleSubtitle,
+                () => void AppRouter.push(router, AppRouter.subscriptionSchedule),
+                { iconSize: 20 },
+              ),
+              // Souscrire à un abonnement
+              new MenuActionItem(
+                Images.iconRepeat,
+                traductions.subscriptionMenuSubscribeTitle,
+                traductions.subscriptionMenuSubscribeSubtitle,
+                () => void AppRouter.push(router, AppRouter.subscriptionSubscribe),
+                { iconSize: 20 },
+              ),
+            ]}
+          />
+        </Card>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { borderRadius: 20, overflow: 'hidden' },
+  content: { padding: 20 },
+  gap20: { height: 20 },
+});

package/src/modules/subscription/presentation/pages/subscription_status_text.ts

@@ -0,0 +1,30 @@
+import type { AppLocalizations } from '../../../../l10n/app_localizations';
+import { DateFormat } from '../../../../shared/utils/date_format';
+import { TransactionStatut } from '../../../transactions/domain/models/transaction';
+import type { Subscription } from '../../domain/models/subscription';
+
+function sameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+export class SubscriptionStatusText {
+  /** Description du statut de la souscription (prochain paiement, terminé, désactivé...) */
+  static nextPaymentIndication(traductions: AppLocalizations, subscription: Subscription): string {
+    const formatter = new DateFormat('d MMM yyyy', traductions.localeName);
+    // Abonnement désactivé
+    if (subscription.statut === TransactionStatut.desactive) return traductions.subscriptionDisabled;
+    const today = new Date();
+    const nextPayment = subscription.nextPaymentDate ?? null;
+    // Paiement prévu aujourd'hui
+    if (nextPayment != null && sameDay(nextPayment, today)) return traductions.subscriptionDateToday;
+    // Abonnement (avec fréquence)
+    if (subscription.frequence != null) {
+      if (nextPayment == null) return traductions.subscriptionDateEndsSince(formatter.format(subscription.dateFin!));
+      if (nextPayment > today) return traductions.subscriptionDateNextPayment(formatter.format(nextPayment));
+      return '';
+    }
+    // Paiement programmé unique (sans fréquence)
+    if (nextPayment! > today) return traductions.subscriptionDateScheduledFor(formatter.format(nextPayment!));
+    return traductions.subscriptionDateEndsSince(formatter.format(nextPayment!));
+  }
+}

package/src/modules/transactions/domain/models/participant/participant.ts

@@ -0,0 +1,47 @@
+export enum ParticipantEtat {
+  active = 'active',
+  desactive = 'desactive',
+}
+
+export class Participant {
+  readonly codeMembre: string;
+  readonly codeBanque?: string;
+  readonly nomMembre: string;
+  readonly pays: string;
+  readonly statut?: ParticipantEtat;
+
+  constructor(params: { nomMembre: string; codeMembre: string; codeBanque?: string; statut?: ParticipantEtat }) {
+    this.nomMembre = params.nomMembre;
+    this.codeMembre = params.codeMembre;
+    this.codeBanque = params.codeBanque;
+    this.pays = params.codeMembre.substring(0, 2);
+    this.statut = params.statut;
+  }
+
+  static fromJson(json: Record<string, any>): Participant {
+    return new Participant({
+      nomMembre: json.nomMembre,
+      codeMembre: json.codeMembre,
+      codeBanque: json.codeBanque ?? undefined,
+      statut: String(json.statut).toUpperCase() === 'ACTIVE' ? ParticipantEtat.active : ParticipantEtat.desactive,
+    });
+  }
+
+  toJson(): Record<string, any> {
+    return {
+      nomMembre: this.nomMembre,
+      codeMembre: this.codeMembre,
+      codeBanque: this.codeBanque ?? null,
+      pays: this.pays,
+      statut: this.statut ?? null,
+    };
+  }
+
+  isEnable(): boolean {
+    return this.statut === ParticipantEtat.active;
+  }
+
+  isDisable(): boolean {
+    return this.statut !== ParticipantEtat.active;
+  }
+}

package/src/modules/transactions/domain/models/participant/participant_liste.ts

@@ -0,0 +1,13 @@
+import { Participant } from './participant';
+
+export class ParticipantListe {
+  constructor(public data: Participant[]) {}
+
+  static fromJson(json: Record<string, any>): ParticipantListe {
+    return new ParticipantListe((json.data as Record<string, any>[]).map((e) => Participant.fromJson(e)));
+  }
+
+  get isEmpty(): boolean {
+    return this.data.length === 0;
+  }
+}