fix: sécuriser les identifiants Firebase avec variables d'environnement

- Déplacement des identifiants Firebase vers .env
- Ajout de .env au .gitignore
- Installation de expo-constants
- Validation automatique des variables au démarrage
- Mise à jour de .env.example avec EXPO_PUBLIC_ prefix
- Mise à jour du README avec instructions .env

BREAKING CHANGE: Les identifiants Firebase doivent maintenant être configurés dans .env

.env.example

@@ -0,0 +1,12 @@
+# Firebase Configuration
+# Copiez ce fichier en .env et remplissez avec vos vraies valeurs
+# Ne commitez JAMAIS le fichier .env dans Git !
+
+# IMPORTANT: Les variables doivent commencer par EXPO_PUBLIC_ pour être accessibles dans l'app
+EXPO_PUBLIC_FIREBASE_API_KEY=your_api_key_here
+EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
+EXPO_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
+EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
+EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
+EXPO_PUBLIC_FIREBASE_APP_ID=your_app_id
+EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

.gitignore

@@ -31,6 +31,7 @@ yarn-error.*
 *.pem
 
 # local env files
+.env
 .env*.local
 
 # typescript

App.tsx

@@ -1,20 +1,88 @@
+import React, { useState, useEffect } from 'react';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { StyleSheet, View, Text, ActivityIndicator } from 'react-native';
+import { AppNavigator } from './src/navigation/AppNavigator';
 
 export default function App() {
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Simuler un chargement pour détecter les erreurs
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (loading) {
     return (
-    <View style={styles.container}>
+      <View style={styles.loadingContainer}>
-      <Text>Open up App.tsx to start working on your app!</Text>
+        <ActivityIndicator size="large" color="#4A90E2" />
-      <StatusBar style="auto" />
+        <Text style={styles.loadingText}>Chargement de WalletTracker...</Text>
       </View>
     );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorTitle}>❌ Erreur</Text>
+        <Text style={styles.errorText}>{error}</Text>
+      </View>
+    );
+  }
+
+  try {
+    return (
+      <GestureHandlerRootView style={styles.container}>
+        <AppNavigator />
+        <StatusBar style="auto" />
+      </GestureHandlerRootView>
+    );
+  } catch (err: any) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorTitle}>❌ Erreur de chargement</Text>
+        <Text style={styles.errorText}>{err.message || 'Erreur inconnue'}</Text>
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flex: 1
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F8F9FA'
+  },
+  loadingText: {
+    marginTop: 16,
+    fontSize: 16,
+    color: '#666'
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFF',
+    padding: 24
+  },
+  errorTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#FF6B6B',
+    marginBottom: 16
+  },
+  errorText: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center'
+  }
 });

README.md

@@ -0,0 +1,75 @@
+# 💰 WalletTracker
+
+> Application mobile de gestion de budget développée avec React Native et Firebase
+
+[![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)](https://github.com/alempereur/WalletTracker)
+[![React Native](https://img.shields.io/badge/React%20Native-0.81-61dafb.svg)](https://reactnative.dev/)
+[![Firebase](https://img.shields.io/badge/Firebase-12.4-orange.svg)](https://firebase.google.com/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/)
+
+## 📱 Fonctionnalités
+
+✅ **Authentification sécurisée** avec Firebase  
+✅ **Gestion des transactions** (dépenses et revenus)  
+✅ **Abonnements récurrents** avec rappels  
+✅ **Tableau de bord** avec statistiques mensuelles  
+✅ **Analyses visuelles** par catégorie  
+✅ **Synchronisation temps réel**  
+✅ **Multi-plateforme** (iOS & Android)
+
+## 🚀 Démarrage rapide
+
+```bash
+# 1. Cloner le projet
+git clone git@git.fnix.fr:alempereur/WalletTracker.git
+cd WalletTracker
+
+# 2. Installer les dépendances
+npm install
+
+# 3. Configurer Firebase
+cp .env.example .env
+# Éditez .env avec vos identifiants Firebase
+
+# 4. Lancer l'application
+npm start
+```
+
+**📚 Documentation complète : [Wiki](../../wiki)**
+
+## 📖 Documentation
+
+**[📚 Wiki complet](../../wiki)** - Toute la documentation
+
+### Liens rapides
+- **[🏠 Accueil](../../wiki/Home)** - Vue d'ensemble
+- **[📦 Installation](../../wiki/Installation)** - Installation rapide ou complète
+- **[🔥 Configuration Firebase](../../wiki/Configuration-Firebase)** - Setup Firebase
+- **[🔧 Dépannage](../../wiki/Dépannage)** - Solutions aux problèmes
+- **[💻 Développement](../../wiki/Développement)** - Architecture et contribution
+
+## 🛠️ Stack Technique
+
+- **Frontend** : React Native + Expo SDK 54
+- **Langage** : TypeScript 5.9
+- **Backend** : Firebase (Auth, Firestore, Storage)
+- **Navigation** : React Navigation 7
+- **UI** : React Native Components + Custom Design System
+
+## 🤝 Contribution
+
+Les contributions sont les bienvenues ! Consultez le [guide de contribution](../../wiki/Développement) dans le Wiki.
+
+## 📄 Licence
+
+MIT © 2025 WalletTracker
+
+## 🆘 Support
+
+- **Problèmes** : [Issues](../../issues)
+- **Questions** : [Wiki - Dépannage](../../wiki/Dépannage)
+- **Documentation** : [Wiki](../../wiki)
+
+---
+
+**Développé avec ❤️ pour une meilleure gestion de budget**

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
     "name": "WalletTracker",
-    "slug": "WalletTracker",
+    "slug": "wallettracker",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -10,21 +10,41 @@
     "splash": {
       "image": "./assets/splash-icon.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#4A90E2"
     },
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.wallettracker.app"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
+        "backgroundColor": "#4A90E2"
       },
+      "package": "com.wallettracker.app",
       "edgeToEdgeEnabled": true,
       "predictiveBackGestureEnabled": false
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "L'application a besoin d'accéder à vos photos pour ajouter des tickets."
+        }
+      ]
+    ],
+    "extra": {
+      "eas": {
+        "projectId": "your-project-id"
+      }
+    },
+    "updates": {
+      "enabled": false,
+      "checkAutomatically": "ON_ERROR_RECOVERY",
+      "fallbackToCacheTimeout": 0
     }
   }
 }

firestore.rules

@@ -0,0 +1,92 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    
+    // Fonction helper pour vérifier si l'utilisateur est authentifié
+    function isAuthenticated() {
+      return request.auth != null;
+    }
+    
+    // Fonction helper pour vérifier si l'utilisateur est propriétaire
+    function isOwner(userId) {
+      return isAuthenticated() && request.auth.uid == userId;
+    }
+    
+    // Règles pour la collection users
+    match /users/{userId} {
+      // Lecture : l'utilisateur peut lire ses propres données ou celles partagées avec lui
+      allow read: if isOwner(userId) || 
+                     (isAuthenticated() && 
+                      resource.data.sharedWith != null && 
+                      request.auth.uid in resource.data.sharedWith);
+      
+      // Écriture : uniquement le propriétaire
+      allow create: if isOwner(userId);
+      allow update: if isOwner(userId);
+      allow delete: if isOwner(userId);
+    }
+    
+    // Règles pour la collection transactions
+    match /transactions/{transactionId} {
+      // Lecture : l'utilisateur peut lire ses propres transactions
+      allow read: if isAuthenticated() && 
+                     resource.data.userId == request.auth.uid;
+      
+      // Création : l'utilisateur peut créer ses propres transactions
+      allow create: if isAuthenticated() && 
+                       request.resource.data.userId == request.auth.uid &&
+                       request.resource.data.keys().hasAll(['userId', 'type', 'amount', 'category', 'date', 'createdAt', 'updatedAt']);
+      
+      // Mise à jour : uniquement le propriétaire
+      allow update: if isAuthenticated() && 
+                       resource.data.userId == request.auth.uid &&
+                       request.resource.data.userId == resource.data.userId;
+      
+      // Suppression : uniquement le propriétaire
+      allow delete: if isAuthenticated() && 
+                       resource.data.userId == request.auth.uid;
+    }
+    
+    // Règles pour la collection categories
+    match /categories/{categoryId} {
+      // Lecture : l'utilisateur peut lire ses propres catégories
+      allow read: if isAuthenticated() && 
+                     resource.data.userId == request.auth.uid;
+      
+      // Création : l'utilisateur peut créer ses propres catégories
+      allow create: if isAuthenticated() && 
+                       request.resource.data.userId == request.auth.uid &&
+                       request.resource.data.keys().hasAll(['userId', 'name', 'icon', 'color', 'type']);
+      
+      // Mise à jour : uniquement le propriétaire
+      allow update: if isAuthenticated() && 
+                       resource.data.userId == request.auth.uid &&
+                       request.resource.data.userId == resource.data.userId;
+      
+      // Suppression : uniquement le propriétaire
+      allow delete: if isAuthenticated() && 
+                       resource.data.userId == request.auth.uid;
+    }
+    
+    // Règles pour la collection subscriptions
+    match /subscriptions/{subscriptionId} {
+      // Lecture : l'utilisateur peut lire ses propres abonnements
+      allow read: if isAuthenticated() && 
+                     resource.data.userId == request.auth.uid;
+      
+      // Création : l'utilisateur peut créer ses propres abonnements
+      allow create: if isAuthenticated() && 
+                       request.resource.data.userId == request.auth.uid &&
+                       request.resource.data.keys().hasAll(['userId', 'name', 'amount', 'category', 'frequency', 'nextPaymentDate', 'reminderDaysBefore', 'isActive', 'createdAt', 'updatedAt']);
+      
+      // Mise à jour : uniquement le propriétaire
+      allow update: if isAuthenticated() && 
+                       resource.data.userId == request.auth.uid &&
+                       request.resource.data.userId == resource.data.userId;
+      
+      // Suppression : uniquement le propriétaire
+      allow delete: if isAuthenticated() && 
+                       resource.data.userId == request.auth.uid;
+    }
+  }
+}

metro.config.js

@@ -0,0 +1,17 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+// Augmenter le timeout pour les connexions lentes
+config.server = {
+  ...config.server,
+  enhanceMiddleware: (middleware) => {
+    return (req, res, next) => {
+      // Augmenter le timeout à 5 minutes
+      res.setTimeout(300000);
+      return middleware(req, res, next);
+    };
+  },
+};
+
+module.exports = config;

package.json

@@ -1,6 +1,5 @@
 {
   "name": "wallettracker",
-  "license": "0BSD",
   "version": "1.0.0",
   "main": "index.ts",
   "scripts": {
@@ -10,10 +9,24 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/ngrok": "^4.1.3",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-navigation/bottom-tabs": "^7.5.0",
+    "@react-navigation/native": "^7.1.18",
+    "@react-navigation/stack": "^7.5.0",
     "expo": "~54.0.18",
+    "expo-constants": "~18.0.10",
+    "expo-image-picker": "^17.0.8",
     "expo-status-bar": "~3.0.8",
+    "firebase": "^12.4.0",
     "react": "19.1.0",
-    "react-native": "0.81.5"
+    "react-native": "0.81.5",
+    "react-native-chart-kit": "^6.12.0",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "^4.1.3",
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",

src/components/Button.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle
+} from 'react-native';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'outline';
+  loading?: boolean;
+  disabled?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+  loading = false,
+  disabled = false,
+  style,
+  textStyle
+}) => {
+  const getButtonStyle = () => {
+    switch (variant) {
+      case 'secondary':
+        return styles.secondaryButton;
+      case 'outline':
+        return styles.outlineButton;
+      default:
+        return styles.primaryButton;
+    }
+  };
+
+  const getTextStyle = () => {
+    switch (variant) {
+      case 'outline':
+        return styles.outlineText;
+      default:
+        return styles.buttonText;
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        getButtonStyle(),
+        (disabled || loading) && styles.disabledButton,
+        style
+      ]}
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.7}
+    >
+      {loading ? (
+        <ActivityIndicator color={variant === 'outline' ? '#4A90E2' : '#FFF'} />
+      ) : (
+        <Text style={[getTextStyle(), textStyle]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 12,
+    padding: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 52
+  },
+  primaryButton: {
+    backgroundColor: '#4A90E2'
+  },
+  secondaryButton: {
+    backgroundColor: '#6C757D'
+  },
+  outlineButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: '#4A90E2'
+  },
+  disabledButton: {
+    opacity: 0.5
+  },
+  buttonText: {
+    color: '#FFF',
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  outlineText: {
+    color: '#4A90E2',
+    fontSize: 16,
+    fontWeight: '600'
+  }
+});

src/components/InputText.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { TextInput, StyleSheet, View, Text, TextInputProps } from 'react-native';
+
+interface InputTextProps extends TextInputProps {
+  label?: string;
+  error?: string;
+}
+
+export const InputText: React.FC<InputTextProps> = ({ label, error, style, ...props }) => {
+  return (
+    <View style={styles.container}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <TextInput
+        style={[styles.input, error && styles.inputError, style]}
+        placeholderTextColor="#999"
+        {...props}
+      />
+      {error && <Text style={styles.errorText}>{error}</Text>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8
+  },
+  input: {
+    backgroundColor: '#F5F5F5',
+    borderRadius: 12,
+    padding: 16,
+    fontSize: 16,
+    color: '#333',
+    borderWidth: 1,
+    borderColor: '#E0E0E0'
+  },
+  inputError: {
+    borderColor: '#FF6B6B'
+  },
+  errorText: {
+    color: '#FF6B6B',
+    fontSize: 12,
+    marginTop: 4,
+    marginLeft: 4
+  }
+});

src/components/SubscriptionCard.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Subscription } from '../types';
+
+interface SubscriptionCardProps {
+  subscription: Subscription;
+  onPress?: () => void;
+  categoryIcon?: string;
+  categoryColor?: string;
+}
+
+export const SubscriptionCard: React.FC<SubscriptionCardProps> = ({
+  subscription,
+  onPress,
+  categoryIcon = '📱',
+  categoryColor = '#F8B739'
+}) => {
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('fr-FR', {
+      day: '2-digit',
+      month: 'short'
+    }).format(date);
+  };
+
+  const getFrequencyLabel = (frequency: string) => {
+    switch (frequency) {
+      case 'daily':
+        return 'Quotidien';
+      case 'weekly':
+        return 'Hebdomadaire';
+      case 'monthly':
+        return 'Mensuel';
+      case 'yearly':
+        return 'Annuel';
+      default:
+        return frequency;
+    }
+  };
+
+  const getDaysUntilPayment = () => {
+    const today = new Date();
+    const daysUntil = Math.ceil(
+      (subscription.nextPaymentDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)
+    );
+    
+    if (daysUntil < 0) return 'En retard';
+    if (daysUntil === 0) return 'Aujourd\'hui';
+    if (daysUntil === 1) return 'Demain';
+    return `Dans ${daysUntil} jours`;
+  };
+
+  const isUpcoming = () => {
+    const today = new Date();
+    const daysUntil = Math.ceil(
+      (subscription.nextPaymentDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)
+    );
+    return daysUntil <= subscription.reminderDaysBefore && daysUntil >= 0;
+  };
+
+  return (
+    <TouchableOpacity
+      style={[styles.card, isUpcoming() && styles.upcomingCard]}
+      onPress={onPress}
+      activeOpacity={0.7}
+      disabled={!onPress}
+    >
+      <View style={styles.leftSection}>
+        <View style={[styles.iconContainer, { backgroundColor: categoryColor + '20' }]}>
+          <Text style={styles.icon}>{categoryIcon}</Text>
+        </View>
+        <View style={styles.infoContainer}>
+          <Text style={styles.name}>{subscription.name}</Text>
+          <Text style={styles.frequency}>{getFrequencyLabel(subscription.frequency)}</Text>
+          <Text style={[styles.nextPayment, isUpcoming() && styles.upcomingText]}>
+            {getDaysUntilPayment()} • {formatDate(subscription.nextPaymentDate)}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.rightSection}>
+        <Text style={styles.amount}>{subscription.amount.toFixed(2)} €</Text>
+        {!subscription.isActive && (
+          <Text style={styles.inactiveLabel}>Inactif</Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#FFF',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  upcomingCard: {
+    borderWidth: 2,
+    borderColor: '#FFA07A'
+  },
+  leftSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12
+  },
+  icon: {
+    fontSize: 24
+  },
+  infoContainer: {
+    flex: 1
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4
+  },
+  frequency: {
+    fontSize: 13,
+    color: '#999',
+    marginBottom: 4
+  },
+  nextPayment: {
+    fontSize: 12,
+    color: '#666'
+  },
+  upcomingText: {
+    color: '#FF6B6B',
+    fontWeight: '600'
+  },
+  rightSection: {
+    alignItems: 'flex-end'
+  },
+  amount: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#333'
+  },
+  inactiveLabel: {
+    fontSize: 11,
+    color: '#999',
+    marginTop: 4,
+    fontStyle: 'italic'
+  }
+});

src/components/TransactionCard.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Transaction } from '../types';
+
+interface TransactionCardProps {
+  transaction: Transaction;
+  onPress?: () => void;
+  categoryIcon?: string;
+  categoryColor?: string;
+}
+
+export const TransactionCard: React.FC<TransactionCardProps> = ({
+  transaction,
+  onPress,
+  categoryIcon = '📦',
+  categoryColor = '#95A5A6'
+}) => {
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('fr-FR', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric'
+    }).format(date);
+  };
+
+  const formatAmount = (amount: number, type: 'income' | 'expense') => {
+    const sign = type === 'income' ? '+' : '-';
+    return `${sign}${amount.toFixed(2)} €`;
+  };
+
+  return (
+    <TouchableOpacity
+      style={styles.card}
+      onPress={onPress}
+      activeOpacity={0.7}
+      disabled={!onPress}
+    >
+      <View style={styles.leftSection}>
+        <View style={[styles.iconContainer, { backgroundColor: categoryColor + '20' }]}>
+          <Text style={styles.icon}>{categoryIcon}</Text>
+        </View>
+        <View style={styles.infoContainer}>
+          <Text style={styles.category}>{transaction.category}</Text>
+          <Text style={styles.date}>{formatDate(transaction.date)}</Text>
+          {transaction.note && <Text style={styles.note}>{transaction.note}</Text>}
+        </View>
+      </View>
+      <View style={styles.rightSection}>
+        <Text
+          style={[
+            styles.amount,
+            transaction.type === 'income' ? styles.incomeAmount : styles.expenseAmount
+          ]}
+        >
+          {formatAmount(transaction.amount, transaction.type)}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#FFF',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  leftSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12
+  },
+  icon: {
+    fontSize: 24
+  },
+  infoContainer: {
+    flex: 1
+  },
+  category: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4
+  },
+  date: {
+    fontSize: 13,
+    color: '#999'
+  },
+  note: {
+    fontSize: 12,
+    color: '#666',
+    marginTop: 4,
+    fontStyle: 'italic'
+  },
+  rightSection: {
+    alignItems: 'flex-end'
+  },
+  amount: {
+    fontSize: 18,
+    fontWeight: '700'
+  },
+  incomeAmount: {
+    color: '#52C41A'
+  },
+  expenseAmount: {
+    color: '#FF6B6B'
+  }
+});

src/config/firebase.ts

@@ -0,0 +1,38 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+import { getFirestore } from 'firebase/firestore';
+import { getStorage } from 'firebase/storage';
+
+// Configuration Firebase depuis les variables d'environnement
+// Les identifiants sont stockés dans le fichier .env (non commité dans Git)
+// Pour configurer : copiez .env.example vers .env et remplissez vos valeurs
+const firebaseConfig = {
+  apiKey: process.env.EXPO_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.EXPO_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.EXPO_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID
+};
+
+// Vérification que toutes les variables sont définies
+if (!firebaseConfig.apiKey || !firebaseConfig.projectId) {
+  throw new Error(
+    '❌ Configuration Firebase manquante!\n\n' +
+    'Veuillez créer un fichier .env à la racine du projet avec vos identifiants Firebase.\n' +
+    'Copiez .env.example vers .env et remplissez les valeurs.\n\n' +
+    'Consultez la documentation: Configuration-Firebase.md'
+  );
+}
+
+// Initialisation de Firebase
+const app = initializeApp(firebaseConfig);
+
+// Services Firebase
+// Note: AsyncStorage est géré automatiquement par Firebase pour React Native
+export const auth = getAuth(app);
+export const db = getFirestore(app);
+export const storage = getStorage(app);
+
+export default app;

src/hooks/useAuth.ts

@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react';
+import { User as FirebaseUser, onAuthStateChanged } from 'firebase/auth';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { auth } from '../config/firebase';
+import { authService } from '../services/authService';
+import { User } from '../types';
+
+const USER_STORAGE_KEY = '@wallettracker_user';
+
+export const useAuth = () => {
+  const [user, setUser] = useState<FirebaseUser | null>(null);
+  const [userData, setUserData] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    // Charger l'utilisateur depuis AsyncStorage au démarrage
+    loadUserFromStorage();
+
+    // Écouter les changements d'état d'authentification
+    const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
+      setUser(firebaseUser);
+
+      if (firebaseUser) {
+        // Sauvegarder l'utilisateur dans AsyncStorage
+        await AsyncStorage.setItem(USER_STORAGE_KEY, JSON.stringify(firebaseUser.uid));
+        
+        // Récupérer les données utilisateur depuis Firestore
+        const data = await authService.getUserData(firebaseUser.uid);
+        setUserData(data);
+      } else {
+        // Supprimer l'utilisateur d'AsyncStorage
+        await AsyncStorage.removeItem(USER_STORAGE_KEY);
+        setUserData(null);
+      }
+
+      if (initializing) {
+        setInitializing(false);
+      }
+      setLoading(false);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const loadUserFromStorage = async () => {
+    try {
+      const storedUid = await AsyncStorage.getItem(USER_STORAGE_KEY);
+      if (storedUid) {
+        // L'utilisateur sera chargé par onAuthStateChanged
+        setLoading(true);
+      } else {
+        setLoading(false);
+        setInitializing(false);
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement de l\'utilisateur:', error);
+      setLoading(false);
+      setInitializing(false);
+    }
+  };
+
+  const signup = async (email: string, password: string, displayName?: string) => {
+    setLoading(true);
+    try {
+      await authService.signup(email, password, displayName);
+    } catch (error) {
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const login = async (email: string, password: string) => {
+    setLoading(true);
+    try {
+      await authService.login(email, password);
+    } catch (error) {
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const logout = async () => {
+    setLoading(true);
+    try {
+      await authService.logout();
+    } catch (error) {
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    user,
+    userData,
+    loading,
+    initializing,
+    signup,
+    login,
+    logout
+  };
+};

src/navigation/AppNavigator.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { ActivityIndicator, View, StyleSheet, Text } from 'react-native';
+
+import { useAuth } from '../hooks/useAuth';
+import { LoginScreen } from '../screens/LoginScreen';
+import { SignupScreen } from '../screens/SignupScreen';
+import { DashboardScreen } from '../screens/DashboardScreen';
+import { TransactionScreen } from '../screens/TransactionScreen';
+import { SubscriptionScreen } from '../screens/SubscriptionScreen';
+import { AnalysisScreen } from '../screens/AnalysisScreen';
+
+import { RootStackParamList, MainTabParamList } from '../types';
+
+const Stack = createStackNavigator<RootStackParamList>();
+const Tab = createBottomTabNavigator<MainTabParamList>();
+
+const MainTabs = () => {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: '#4A90E2',
+        tabBarInactiveTintColor: '#999',
+        tabBarStyle: {
+          position: 'absolute',
+          backgroundColor: 'rgba(255, 255, 255, 0.95)',
+          borderTopWidth: 0,
+          elevation: 0,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: -2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 8,
+          paddingBottom: 34, // Espace pour la barre iOS
+          paddingTop: 12,
+          height: 90, // Plus haute
+          borderTopLeftRadius: 20,
+          borderTopRightRadius: 20
+        },
+        tabBarLabelStyle: {
+          fontSize: 11,
+          fontWeight: '600',
+          marginTop: 4
+        }
+      }}
+    >
+      <Tab.Screen
+        name="Dashboard"
+        component={DashboardScreen}
+        options={{
+          tabBarLabel: 'Tableau de bord',
+          tabBarIcon: ({ color }) => <TabIcon icon="📊" color={color} />
+        }}
+      />
+      <Tab.Screen
+        name="Transactions"
+        component={TransactionScreen}
+        options={{
+          tabBarLabel: 'Transactions',
+          tabBarIcon: ({ color }) => <TabIcon icon="💸" color={color} />
+        }}
+      />
+      <Tab.Screen
+        name="Subscriptions"
+        component={SubscriptionScreen}
+        options={{
+          tabBarLabel: 'Abonnements',
+          tabBarIcon: ({ color }) => <TabIcon icon="📱" color={color} />
+        }}
+      />
+      <Tab.Screen
+        name="Analysis"
+        component={AnalysisScreen}
+        options={{
+          tabBarLabel: 'Analyses',
+          tabBarIcon: ({ color }) => <TabIcon icon="📈" color={color} />
+        }}
+      />
+    </Tab.Navigator>
+  );
+};
+
+const TabIcon = ({ icon, color }: { icon: string; color: string }) => (
+  <Text style={{ fontSize: 24, opacity: color === '#4A90E2' ? 1 : 0.5 }}>
+    {icon}
+  </Text>
+);
+
+export const AppNavigator = () => {
+  const { user, initializing } = useAuth();
+
+  if (initializing) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#4A90E2" />
+      </View>
+    );
+  }
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        {user ? (
+          <Stack.Screen name="Main" component={MainTabs} />
+        ) : (
+          <>
+            <Stack.Screen name="Login" component={LoginScreen} />
+            <Stack.Screen name="Signup" component={SignupScreen} />
+          </>
+        )}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F8F9FA'
+  }
+});

src/screens/AnalysisScreen.tsx

@@ -0,0 +1,495 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  Dimensions,
+  TouchableOpacity
+} from 'react-native';
+// Temporairement désactivé pour éviter les problèmes de chargement
+// import { PieChart, BarChart } from 'react-native-chart-kit';
+import { useAuth } from '../hooks/useAuth';
+import { transactionService } from '../services/transactionService';
+import { categoryService } from '../services/categoryService';
+import { Transaction, Category, CategoryStats } from '../types';
+
+const screenWidth = Dimensions.get('window').width;
+
+export const AnalysisScreen = () => {
+  const { user } = useAuth();
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedMonth, setSelectedMonth] = useState(new Date());
+  const [viewType, setViewType] = useState<'expense' | 'income'>('expense');
+
+  useEffect(() => {
+    if (!user) return;
+
+    loadData();
+  }, [user, selectedMonth]);
+
+  const loadData = async () => {
+    if (!user) return;
+
+    try {
+      // Charger les catégories
+      const userCategories = await categoryService.getCategories(user.uid);
+      setCategories(userCategories);
+
+      // Charger les transactions du mois sélectionné
+      const monthTransactions = await transactionService.getMonthlyTransactions(
+        user.uid,
+        selectedMonth.getFullYear(),
+        selectedMonth.getMonth()
+      );
+      setTransactions(monthTransactions);
+    } catch (error) {
+      console.error('Erreur lors du chargement des données:', error);
+    }
+  };
+
+  const getCategoryStats = (): CategoryStats[] => {
+    const filteredTransactions = transactions.filter((t) => t.type === viewType);
+    const total = filteredTransactions.reduce((sum, t) => sum + t.amount, 0);
+
+    const categoryMap = new Map<string, { total: number; count: number }>();
+
+    filteredTransactions.forEach((t) => {
+      const current = categoryMap.get(t.category) || { total: 0, count: 0 };
+      categoryMap.set(t.category, {
+        total: current.total + t.amount,
+        count: current.count + 1
+      });
+    });
+
+    const stats: CategoryStats[] = [];
+    categoryMap.forEach((value, category) => {
+      stats.push({
+        category,
+        total: value.total,
+        count: value.count,
+        percentage: total > 0 ? (value.total / total) * 100 : 0
+      });
+    });
+
+    return stats.sort((a, b) => b.total - a.total);
+  };
+
+  const getPieChartData = () => {
+    const stats = getCategoryStats();
+    
+    return stats.map((stat) => {
+      const category = categories.find((c) => c.name === stat.category);
+      return {
+        name: stat.category,
+        amount: stat.total,
+        color: category?.color || '#95A5A6',
+        legendFontColor: '#333',
+        legendFontSize: 12
+      };
+    });
+  };
+
+  const getMonthlyTrend = () => {
+    const months: string[] = [];
+    const incomeData: number[] = [];
+    const expenseData: number[] = [];
+
+    // Récupérer les 6 derniers mois
+    for (let i = 5; i >= 0; i--) {
+      const date = new Date();
+      date.setMonth(date.getMonth() - i);
+      
+      const monthName = new Intl.DateTimeFormat('fr-FR', { month: 'short' }).format(date);
+      months.push(monthName);
+
+      const monthTransactions = transactions.filter((t) => {
+        const tDate = new Date(t.date);
+        return (
+          tDate.getMonth() === date.getMonth() &&
+          tDate.getFullYear() === date.getFullYear()
+        );
+      });
+
+      const income = monthTransactions
+        .filter((t) => t.type === 'income')
+        .reduce((sum, t) => sum + t.amount, 0);
+      
+      const expense = monthTransactions
+        .filter((t) => t.type === 'expense')
+        .reduce((sum, t) => sum + t.amount, 0);
+
+      incomeData.push(income);
+      expenseData.push(expense);
+    }
+
+    return { months, incomeData, expenseData };
+  };
+
+  const stats = getCategoryStats();
+  const pieData = getPieChartData();
+  const totalAmount = stats.reduce((sum, s) => sum + s.total, 0);
+
+  const chartConfig = {
+    backgroundColor: '#FFF',
+    backgroundGradientFrom: '#FFF',
+    backgroundGradientTo: '#FFF',
+    decimalPlaces: 0,
+    color: (opacity = 1) => `rgba(74, 144, 226, ${opacity})`,
+    labelColor: (opacity = 1) => `rgba(51, 51, 51, ${opacity})`,
+    style: {
+      borderRadius: 16
+    },
+    propsForLabels: {
+      fontSize: 12
+    }
+  };
+
+  const getMonthName = () => {
+    return new Intl.DateTimeFormat('fr-FR', { month: 'long', year: 'numeric' }).format(
+      selectedMonth
+    );
+  };
+
+  const changeMonth = (direction: 'prev' | 'next') => {
+    const newDate = new Date(selectedMonth);
+    if (direction === 'prev') {
+      newDate.setMonth(newDate.getMonth() - 1);
+    } else {
+      newDate.setMonth(newDate.getMonth() + 1);
+    }
+    setSelectedMonth(newDate);
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Analyses</Text>
+      </View>
+
+      <View style={styles.monthSelector}>
+        <TouchableOpacity onPress={() => changeMonth('prev')} style={styles.monthButton}>
+          <Text style={styles.monthButtonText}>←</Text>
+        </TouchableOpacity>
+        <Text style={styles.monthText}>{getMonthName()}</Text>
+        <TouchableOpacity onPress={() => changeMonth('next')} style={styles.monthButton}>
+          <Text style={styles.monthButtonText}>→</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.typeSelector}>
+        <TouchableOpacity
+          style={[
+            styles.typeButton,
+            viewType === 'expense' && styles.typeButtonActive
+          ]}
+          onPress={() => setViewType('expense')}
+        >
+          <Text
+            style={[
+              styles.typeButtonText,
+              viewType === 'expense' && styles.typeButtonTextActive
+            ]}
+          >
+            Dépenses
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[
+            styles.typeButton,
+            viewType === 'income' && styles.typeButtonActive
+          ]}
+          onPress={() => setViewType('income')}
+        >
+          <Text
+            style={[
+              styles.typeButtonText,
+              viewType === 'income' && styles.typeButtonTextActive
+            ]}
+          >
+            Revenus
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      {pieData.length > 0 ? (
+        <>
+          <View style={styles.chartContainer}>
+            <Text style={styles.chartTitle}>Répartition par catégorie</Text>
+            {/* Graphique temporairement désactivé - sera réactivé après configuration */}
+            <View style={styles.placeholderChart}>
+              <Text style={styles.placeholderText}>📊</Text>
+              <Text style={styles.placeholderSubtext}>
+                Graphique disponible prochainement
+              </Text>
+            </View>
+          </View>
+
+          <View style={styles.statsContainer}>
+            <View style={styles.totalCard}>
+              <Text style={styles.totalLabel}>
+                Total {viewType === 'expense' ? 'dépenses' : 'revenus'}
+              </Text>
+              <Text
+                style={[
+                  styles.totalAmount,
+                  viewType === 'income' ? styles.incomeColor : styles.expenseColor
+                ]}
+              >
+                {totalAmount.toFixed(2)} €
+              </Text>
+            </View>
+
+            {stats.map((stat, index) => {
+              const category = categories.find((c) => c.name === stat.category);
+              return (
+                <View key={index} style={styles.statCard}>
+                  <View style={styles.statLeft}>
+                    <View
+                      style={[
+                        styles.statIcon,
+                        { backgroundColor: (category?.color || '#95A5A6') + '20' }
+                      ]}
+                    >
+                      <Text style={styles.statEmoji}>{category?.icon || '📦'}</Text>
+                    </View>
+                    <View style={styles.statInfo}>
+                      <Text style={styles.statCategory}>{stat.category}</Text>
+                      <Text style={styles.statCount}>{stat.count} transaction(s)</Text>
+                    </View>
+                  </View>
+                  <View style={styles.statRight}>
+                    <Text style={styles.statAmount}>{stat.total.toFixed(2)} €</Text>
+                    <Text style={styles.statPercentage}>{stat.percentage.toFixed(1)}%</Text>
+                  </View>
+                </View>
+              );
+            })}
+          </View>
+        </>
+      ) : (
+        <View style={styles.emptyState}>
+          <Text style={styles.emptyIcon}>📊</Text>
+          <Text style={styles.emptyText}>Aucune donnée</Text>
+          <Text style={styles.emptySubtext}>
+            Ajoutez des transactions pour voir vos analyses
+          </Text>
+        </View>
+      )}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA'
+  },
+  header: {
+    padding: 24,
+    paddingTop: 60,
+    backgroundColor: '#FFF'
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#333'
+  },
+  monthSelector: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 24,
+    paddingTop: 16
+  },
+  monthButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#FFF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  monthButtonText: {
+    fontSize: 20,
+    color: '#4A90E2'
+  },
+  monthText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    textTransform: 'capitalize'
+  },
+  typeSelector: {
+    flexDirection: 'row',
+    gap: 12,
+    paddingHorizontal: 24,
+    marginBottom: 24
+  },
+  typeButton: {
+    flex: 1,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: '#E0E0E0',
+    alignItems: 'center',
+    backgroundColor: '#FFF'
+  },
+  typeButtonActive: {
+    borderColor: '#4A90E2',
+    backgroundColor: '#F0F7FF'
+  },
+  typeButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#666'
+  },
+  typeButtonTextActive: {
+    color: '#4A90E2'
+  },
+  chartContainer: {
+    backgroundColor: '#FFF',
+    marginHorizontal: 24,
+    marginBottom: 24,
+    padding: 16,
+    borderRadius: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  chartTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 16
+  },
+  statsContainer: {
+    paddingHorizontal: 24,
+    paddingBottom: 24
+  },
+  totalCard: {
+    backgroundColor: '#4A90E2',
+    padding: 20,
+    borderRadius: 12,
+    marginBottom: 16,
+    alignItems: 'center'
+  },
+  totalLabel: {
+    fontSize: 14,
+    color: '#FFF',
+    opacity: 0.9,
+    marginBottom: 8
+  },
+  totalAmount: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: '#FFF'
+  },
+  incomeColor: {
+    color: '#FFF'
+  },
+  expenseColor: {
+    color: '#FFF'
+  },
+  statCard: {
+    backgroundColor: '#FFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  statLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1
+  },
+  statIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12
+  },
+  statEmoji: {
+    fontSize: 24
+  },
+  statInfo: {
+    flex: 1
+  },
+  statCategory: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4
+  },
+  statCount: {
+    fontSize: 12,
+    color: '#999'
+  },
+  statRight: {
+    alignItems: 'flex-end'
+  },
+  statAmount: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#333',
+    marginBottom: 4
+  },
+  statPercentage: {
+    fontSize: 12,
+    color: '#4A90E2',
+    fontWeight: '600'
+  },
+  emptyState: {
+    alignItems: 'center',
+    paddingVertical: 60
+  },
+  emptyIcon: {
+    fontSize: 64,
+    marginBottom: 16
+  },
+  emptyText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#666',
+    marginBottom: 8
+  },
+  emptySubtext: {
+    fontSize: 14,
+    color: '#999',
+    textAlign: 'center'
+  },
+  placeholderChart: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 60,
+    backgroundColor: '#F8F9FA',
+    borderRadius: 12,
+    marginVertical: 16
+  },
+  placeholderText: {
+    fontSize: 48,
+    marginBottom: 12
+  },
+  placeholderSubtext: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center'
+  }
+});

src/screens/DashboardScreen.tsx

@@ -0,0 +1,321 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+  TouchableOpacity
+} from 'react-native';
+import { useAuth } from '../hooks/useAuth';
+import { transactionService } from '../services/transactionService';
+import { Transaction } from '../types';
+import { TransactionCard } from '../components/TransactionCard';
+
+export const DashboardScreen = ({ navigation }: any) => {
+  const { user, logout } = useAuth();
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+
+  useEffect(() => {
+    if (!user) return;
+
+    const unsubscribe = transactionService.subscribeToTransactions(
+      user.uid,
+      (newTransactions) => {
+        setTransactions(newTransactions);
+        setLoading(false);
+        setRefreshing(false);
+      }
+    );
+
+    return () => unsubscribe();
+  }, [user]);
+
+  const onRefresh = () => {
+    setRefreshing(true);
+  };
+
+  const getCurrentMonthStats = () => {
+    const now = new Date();
+    const currentMonth = now.getMonth();
+    const currentYear = now.getFullYear();
+
+    const monthlyTransactions = transactions.filter((t) => {
+      const transactionDate = new Date(t.date);
+      return (
+        transactionDate.getMonth() === currentMonth &&
+        transactionDate.getFullYear() === currentYear
+      );
+    });
+
+    const totalIncome = monthlyTransactions
+      .filter((t) => t.type === 'income')
+      .reduce((sum, t) => sum + t.amount, 0);
+
+    const totalExpenses = monthlyTransactions
+      .filter((t) => t.type === 'expense')
+      .reduce((sum, t) => sum + t.amount, 0);
+
+    const balance = totalIncome - totalExpenses;
+
+    return { totalIncome, totalExpenses, balance };
+  };
+
+  const stats = getCurrentMonthStats();
+  const recentTransactions = transactions.slice(0, 5);
+
+  const getMonthName = () => {
+    return new Intl.DateTimeFormat('fr-FR', { month: 'long', year: 'numeric' }).format(
+      new Date()
+    );
+  };
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.scrollContent}
+      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+    >
+      <View style={styles.header}>
+        <View>
+          <Text style={styles.greeting}>Bonjour 👋</Text>
+          <Text style={styles.monthLabel}>{getMonthName()}</Text>
+        </View>
+        <TouchableOpacity onPress={logout} style={styles.logoutButton}>
+          <Text style={styles.logoutText}>Déconnexion</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.balanceCard}>
+        <Text style={styles.balanceLabel}>Solde du mois</Text>
+        <Text
+          style={[
+            styles.balanceAmount,
+            stats.balance >= 0 ? styles.positiveBalance : styles.negativeBalance
+          ]}
+        >
+          {stats.balance >= 0 ? '+' : ''}{stats.balance.toFixed(2)} €
+        </Text>
+        <View style={styles.statsRow}>
+          <View style={styles.statItem}>
+            <Text style={styles.statLabel}>Revenus</Text>
+            <Text style={styles.incomeText}>+{stats.totalIncome.toFixed(2)} €</Text>
+          </View>
+          <View style={styles.statDivider} />
+          <View style={styles.statItem}>
+            <Text style={styles.statLabel}>Dépenses</Text>
+            <Text style={styles.expenseText}>-{stats.totalExpenses.toFixed(2)} €</Text>
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.section}>
+        <View style={styles.sectionHeader}>
+          <Text style={styles.sectionTitle}>Transactions récentes</Text>
+          {transactions.length > 5 && (
+            <TouchableOpacity onPress={() => navigation.navigate('Transactions')}>
+              <Text style={styles.seeAllText}>Voir tout</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {loading ? (
+          <Text style={styles.emptyText}>Chargement...</Text>
+        ) : recentTransactions.length === 0 ? (
+          <View style={styles.emptyState}>
+            <Text style={styles.emptyIcon}>📊</Text>
+            <Text style={styles.emptyText}>Aucune transaction</Text>
+            <Text style={styles.emptySubtext}>
+              Ajoutez votre première transaction pour commencer
+            </Text>
+          </View>
+        ) : (
+          recentTransactions.map((transaction) => (
+            <TransactionCard key={transaction.id} transaction={transaction} />
+          ))
+        )}
+      </View>
+
+      <View style={styles.quickActions}>
+        <TouchableOpacity
+          style={[styles.actionButton, styles.addExpenseButton]}
+          onPress={() => navigation.navigate('Transactions', { type: 'expense', openModal: true })}
+        >
+          <Text style={styles.actionIcon}>➖</Text>
+          <Text style={styles.actionText}>Dépense</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.actionButton, styles.addIncomeButton]}
+          onPress={() => navigation.navigate('Transactions', { type: 'income', openModal: true })}
+        >
+          <Text style={styles.actionIcon}>➕</Text>
+          <Text style={styles.actionText}>Revenu</Text>
+        </TouchableOpacity>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA'
+  },
+  scrollContent: {
+    paddingBottom: 100 // Espace pour la tab bar
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 24,
+    paddingTop: 60
+  },
+  greeting: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#333'
+  },
+  monthLabel: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 4,
+    textTransform: 'capitalize'
+  },
+  logoutButton: {
+    padding: 8
+  },
+  logoutText: {
+    color: '#4A90E2',
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  balanceCard: {
+    backgroundColor: '#4A90E2',
+    margin: 24,
+    marginTop: 0,
+    padding: 24,
+    borderRadius: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 5
+  },
+  balanceLabel: {
+    fontSize: 14,
+    color: '#FFF',
+    opacity: 0.9,
+    marginBottom: 8
+  },
+  balanceAmount: {
+    fontSize: 36,
+    fontWeight: 'bold',
+    marginBottom: 20
+  },
+  positiveBalance: {
+    color: '#FFF'
+  },
+  negativeBalance: {
+    color: '#FFE0E0'
+  },
+  statsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  statItem: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  statDivider: {
+    width: 1,
+    backgroundColor: '#FFF',
+    opacity: 0.3
+  },
+  statLabel: {
+    fontSize: 12,
+    color: '#FFF',
+    opacity: 0.8,
+    marginBottom: 4
+  },
+  incomeText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFF'
+  },
+  expenseText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFF'
+  },
+  section: {
+    padding: 24,
+    paddingTop: 0
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#333'
+  },
+  seeAllText: {
+    fontSize: 14,
+    color: '#4A90E2',
+    fontWeight: '600'
+  },
+  emptyState: {
+    alignItems: 'center',
+    paddingVertical: 40
+  },
+  emptyIcon: {
+    fontSize: 48,
+    marginBottom: 12
+  },
+  emptyText: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center'
+  },
+  emptySubtext: {
+    fontSize: 14,
+    color: '#999',
+    textAlign: 'center',
+    marginTop: 8
+  },
+  quickActions: {
+    flexDirection: 'row',
+    padding: 24,
+    paddingTop: 0,
+    gap: 12
+  },
+  actionButton: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+    borderRadius: 12,
+    gap: 8
+  },
+  addExpenseButton: {
+    backgroundColor: '#FF6B6B'
+  },
+  addIncomeButton: {
+    backgroundColor: '#52C41A'
+  },
+  actionIcon: {
+    fontSize: 20
+  },
+  actionText: {
+    color: '#FFF',
+    fontSize: 16,
+    fontWeight: '600'
+  }
+});

src/screens/LoginScreen.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Alert
+} from 'react-native';
+import { InputText } from '../components/InputText';
+import { Button } from '../components/Button';
+import { useAuth } from '../hooks/useAuth';
+
+export const LoginScreen = ({ navigation }: any) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
+  const { login, loading } = useAuth();
+
+  const validateForm = () => {
+    const newErrors: { email?: string; password?: string } = {};
+
+    if (!email.trim()) {
+      newErrors.email = 'L\'email est requis';
+    } else if (!/\S+@\S+\.\S+/.test(email)) {
+      newErrors.email = 'Email invalide';
+    }
+
+    if (!password) {
+      newErrors.password = 'Le mot de passe est requis';
+    } else if (password.length < 6) {
+      newErrors.password = 'Le mot de passe doit contenir au moins 6 caractères';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleLogin = async () => {
+    if (!validateForm()) return;
+
+    try {
+      await login(email.trim(), password);
+    } catch (error: any) {
+      Alert.alert('Erreur de connexion', error.message);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.header}>
+          <Text style={styles.logo}>💰</Text>
+          <Text style={styles.title}>WalletTracker</Text>
+          <Text style={styles.subtitle}>Gérez votre budget facilement</Text>
+        </View>
+
+        <View style={styles.form}>
+          <InputText
+            label="Email"
+            placeholder="votre@email.com"
+            value={email}
+            onChangeText={(text) => {
+              setEmail(text);
+              setErrors({ ...errors, email: undefined });
+            }}
+            error={errors.email}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoComplete="email"
+          />
+
+          <InputText
+            label="Mot de passe"
+            placeholder="••••••••"
+            value={password}
+            onChangeText={(text) => {
+              setPassword(text);
+              setErrors({ ...errors, password: undefined });
+            }}
+            error={errors.password}
+            secureTextEntry
+            autoCapitalize="none"
+            autoComplete="password"
+          />
+
+          <Button
+            title="Se connecter"
+            onPress={handleLogin}
+            loading={loading}
+            style={styles.loginButton}
+          />
+
+          <Button
+            title="Créer un compte"
+            onPress={() => navigation.navigate('Signup')}
+            variant="outline"
+            style={styles.signupButton}
+          />
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA'
+  },
+  scrollContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    padding: 24
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 48
+  },
+  logo: {
+    fontSize: 64,
+    marginBottom: 16
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666'
+  },
+  form: {
+    width: '100%'
+  },
+  loginButton: {
+    marginTop: 8
+  },
+  signupButton: {
+    marginTop: 12
+  }
+});

src/screens/SignupScreen.tsx

@@ -0,0 +1,202 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Alert
+} from 'react-native';
+import { InputText } from '../components/InputText';
+import { Button } from '../components/Button';
+import { useAuth } from '../hooks/useAuth';
+import { categoryService } from '../services/categoryService';
+
+export const SignupScreen = ({ navigation }: any) => {
+  const [displayName, setDisplayName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [errors, setErrors] = useState<{
+    displayName?: string;
+    email?: string;
+    password?: string;
+    confirmPassword?: string;
+  }>({});
+  const { signup, loading } = useAuth();
+
+  const validateForm = () => {
+    const newErrors: any = {};
+
+    if (!displayName.trim()) {
+      newErrors.displayName = 'Le nom est requis';
+    }
+
+    if (!email.trim()) {
+      newErrors.email = 'L\'email est requis';
+    } else if (!/\S+@\S+\.\S+/.test(email)) {
+      newErrors.email = 'Email invalide';
+    }
+
+    if (!password) {
+      newErrors.password = 'Le mot de passe est requis';
+    } else if (password.length < 6) {
+      newErrors.password = 'Le mot de passe doit contenir au moins 6 caractères';
+    }
+
+    if (!confirmPassword) {
+      newErrors.confirmPassword = 'Veuillez confirmer le mot de passe';
+    } else if (password !== confirmPassword) {
+      newErrors.confirmPassword = 'Les mots de passe ne correspondent pas';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSignup = async () => {
+    if (!validateForm()) return;
+
+    try {
+      const user = await signup(email.trim(), password, displayName.trim());
+      
+      // Initialiser les catégories par défaut pour le nouvel utilisateur
+      // Note: user sera disponible via le hook useAuth après la création
+      Alert.alert(
+        'Compte créé',
+        'Votre compte a été créé avec succès !',
+        [{ text: 'OK' }]
+      );
+    } catch (error: any) {
+      Alert.alert('Erreur d\'inscription', error.message);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.header}>
+          <Text style={styles.logo}>💰</Text>
+          <Text style={styles.title}>Créer un compte</Text>
+          <Text style={styles.subtitle}>Commencez à gérer votre budget</Text>
+        </View>
+
+        <View style={styles.form}>
+          <InputText
+            label="Nom"
+            placeholder="Votre nom"
+            value={displayName}
+            onChangeText={(text) => {
+              setDisplayName(text);
+              setErrors({ ...errors, displayName: undefined });
+            }}
+            error={errors.displayName}
+            autoCapitalize="words"
+          />
+
+          <InputText
+            label="Email"
+            placeholder="votre@email.com"
+            value={email}
+            onChangeText={(text) => {
+              setEmail(text);
+              setErrors({ ...errors, email: undefined });
+            }}
+            error={errors.email}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoComplete="email"
+          />
+
+          <InputText
+            label="Mot de passe"
+            placeholder="••••••••"
+            value={password}
+            onChangeText={(text) => {
+              setPassword(text);
+              setErrors({ ...errors, password: undefined });
+            }}
+            error={errors.password}
+            secureTextEntry
+            autoCapitalize="none"
+            autoComplete="password"
+          />
+
+          <InputText
+            label="Confirmer le mot de passe"
+            placeholder="••••••••"
+            value={confirmPassword}
+            onChangeText={(text) => {
+              setConfirmPassword(text);
+              setErrors({ ...errors, confirmPassword: undefined });
+            }}
+            error={errors.confirmPassword}
+            secureTextEntry
+            autoCapitalize="none"
+            autoComplete="password"
+          />
+
+          <Button
+            title="Créer mon compte"
+            onPress={handleSignup}
+            loading={loading}
+            style={styles.signupButton}
+          />
+
+          <Button
+            title="J'ai déjà un compte"
+            onPress={() => navigation.navigate('Login')}
+            variant="outline"
+            style={styles.loginButton}
+          />
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA'
+  },
+  scrollContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    padding: 24
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 48
+  },
+  logo: {
+    fontSize: 64,
+    marginBottom: 16
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666'
+  },
+  form: {
+    width: '100%'
+  },
+  signupButton: {
+    marginTop: 8
+  },
+  loginButton: {
+    marginTop: 12
+  }
+});

src/screens/SubscriptionScreen.tsx

@@ -0,0 +1,456 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Modal,
+  Alert,
+  Platform
+} from 'react-native';
+import { useAuth } from '../hooks/useAuth';
+import { subscriptionService } from '../services/subscriptionService';
+import { categoryService } from '../services/categoryService';
+import { Subscription, SubscriptionFrequency, Category } from '../types';
+import { SubscriptionCard } from '../components/SubscriptionCard';
+import { InputText } from '../components/InputText';
+import { Button } from '../components/Button';
+
+export const SubscriptionScreen = () => {
+  const { user } = useAuth();
+  const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // Form state
+  const [name, setName] = useState('');
+  const [amount, setAmount] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('');
+  const [frequency, setFrequency] = useState<SubscriptionFrequency>('monthly');
+  const [dayOfMonth, setDayOfMonth] = useState('1');
+
+  useEffect(() => {
+    if (!user) return;
+
+    // Charger les catégories
+    loadCategories();
+
+    // Écouter les abonnements
+    const unsubscribe = subscriptionService.subscribeToSubscriptions(
+      user.uid,
+      (newSubscriptions) => {
+        setSubscriptions(newSubscriptions);
+      }
+    );
+
+    return () => unsubscribe();
+  }, [user]);
+
+  const loadCategories = async () => {
+    if (!user) return;
+
+    try {
+      const userCategories = await categoryService.getCategories(user.uid);
+      const expenseCategories = userCategories.filter((c) => c.type === 'expense');
+      setCategories(expenseCategories);
+
+      if (expenseCategories.length > 0) {
+        setSelectedCategory(expenseCategories[0].name);
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement des catégories:', error);
+    }
+  };
+
+  const handleAddSubscription = async () => {
+    if (!user) return;
+
+    if (!name.trim()) {
+      Alert.alert('Erreur', 'Veuillez entrer un nom pour l\'abonnement');
+      return;
+    }
+
+    if (!amount || parseFloat(amount) <= 0) {
+      Alert.alert('Erreur', 'Veuillez entrer un montant valide');
+      return;
+    }
+
+    if (!selectedCategory) {
+      Alert.alert('Erreur', 'Veuillez sélectionner une catégorie');
+      return;
+    }
+
+    const day = parseInt(dayOfMonth);
+    if (isNaN(day) || day < 1 || day > 31) {
+      Alert.alert('Erreur', 'Veuillez entrer un jour valide (1-31)');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Calculer la prochaine date de paiement
+      const now = new Date();
+      const nextPaymentDate = new Date(now.getFullYear(), now.getMonth(), day);
+      
+      // Si la date est déjà passée ce mois-ci, passer au mois suivant
+      if (nextPaymentDate < now) {
+        nextPaymentDate.setMonth(nextPaymentDate.getMonth() + 1);
+      }
+
+      await subscriptionService.addSubscription(
+        user.uid,
+        name.trim(),
+        parseFloat(amount),
+        selectedCategory,
+        frequency,
+        nextPaymentDate,
+        3 // Rappel 3 jours avant
+      );
+
+      // Réinitialiser le formulaire
+      setName('');
+      setAmount('');
+      setSelectedCategory('');
+      setDayOfMonth('1');
+      setFrequency('monthly');
+      setLoading(false);
+      setModalVisible(false);
+
+      Alert.alert('Succès', 'Abonnement ajouté avec succès');
+    } catch (error: any) {
+      setLoading(false);
+      Alert.alert('Erreur', error.message);
+    }
+  };
+
+  const getTotalMonthly = () => {
+    return subscriptions
+      .filter((s) => s.isActive)
+      .reduce((sum, s) => {
+        // Convertir en coût mensuel
+        switch (s.frequency) {
+          case 'daily':
+            return sum + s.amount * 30;
+          case 'weekly':
+            return sum + s.amount * 4;
+          case 'monthly':
+            return sum + s.amount;
+          case 'yearly':
+            return sum + s.amount / 12;
+          default:
+            return sum;
+        }
+      }, 0);
+  };
+
+  const getCategoryInfo = (categoryName: string) => {
+    const category = categories.find((c) => c.name === categoryName);
+    return category || { icon: '📱', color: '#F8B739' };
+  };
+
+  const frequencyOptions: { value: SubscriptionFrequency; label: string }[] = [
+    { value: 'monthly', label: 'Mensuel' },
+    { value: 'yearly', label: 'Annuel' },
+    { value: 'weekly', label: 'Hebdomadaire' }
+  ];
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View>
+          <Text style={styles.title}>Abonnements</Text>
+          <Text style={styles.totalText}>
+            Total mensuel: {getTotalMonthly().toFixed(2)} €
+          </Text>
+        </View>
+        <TouchableOpacity
+          style={styles.addButton}
+          onPress={() => setModalVisible(true)}
+        >
+          <Text style={styles.addButtonText}>+ Ajouter</Text>
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView style={styles.content}>
+        {subscriptions.length === 0 ? (
+          <View style={styles.emptyState}>
+            <Text style={styles.emptyIcon}>📱</Text>
+            <Text style={styles.emptyText}>Aucun abonnement</Text>
+            <Text style={styles.emptySubtext}>
+              Ajoutez vos abonnements pour suivre vos dépenses récurrentes
+            </Text>
+          </View>
+        ) : (
+          subscriptions.map((subscription) => {
+            const categoryInfo = getCategoryInfo(subscription.category);
+            return (
+              <SubscriptionCard
+                key={subscription.id}
+                subscription={subscription}
+                categoryIcon={categoryInfo.icon}
+                categoryColor={categoryInfo.color}
+              />
+            );
+          })
+        )}
+      </ScrollView>
+
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        transparent={true}
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>Nouvel abonnement</Text>
+              <TouchableOpacity onPress={() => setModalVisible(false)}>
+                <Text style={styles.closeButton}>✕</Text>
+              </TouchableOpacity>
+            </View>
+
+            <ScrollView>
+              <InputText
+                label="Nom de l'abonnement"
+                placeholder="Netflix, Spotify..."
+                value={name}
+                onChangeText={setName}
+              />
+
+              <InputText
+                label="Montant (€)"
+                placeholder="0.00"
+                value={amount}
+                onChangeText={(text) => {
+                  // Permettre uniquement les chiffres et un point décimal
+                  const cleaned = text.replace(/[^0-9.]/g, '');
+                  // Empêcher plusieurs points
+                  const parts = cleaned.split('.');
+                  if (parts.length > 2) return;
+                  // Limiter à 2 décimales
+                  if (parts[1] && parts[1].length > 2) return;
+                  setAmount(cleaned);
+                }}
+                keyboardType="decimal-pad"
+              />
+
+              <Text style={styles.label}>Fréquence</Text>
+              <View style={styles.frequencySelector}>
+                {frequencyOptions.map((option) => (
+                  <TouchableOpacity
+                    key={option.value}
+                    style={[
+                      styles.frequencyButton,
+                      frequency === option.value && styles.frequencyButtonActive
+                    ]}
+                    onPress={() => setFrequency(option.value)}
+                  >
+                    <Text
+                      style={[
+                        styles.frequencyButtonText,
+                        frequency === option.value && styles.frequencyButtonTextActive
+                      ]}
+                    >
+                      {option.label}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+
+              {frequency === 'monthly' && (
+                <InputText
+                  label="Jour du mois (1-31)"
+                  placeholder="1"
+                  value={dayOfMonth}
+                  onChangeText={setDayOfMonth}
+                  keyboardType="number-pad"
+                />
+              )}
+
+              <Text style={styles.label}>Catégorie</Text>
+              <View style={styles.categoryGrid}>
+                {categories.map((category) => (
+                  <TouchableOpacity
+                    key={category.id}
+                    style={[
+                      styles.categoryItem,
+                      selectedCategory === category.name && styles.categoryItemActive
+                    ]}
+                    onPress={() => setSelectedCategory(category.name)}
+                  >
+                    <Text style={styles.categoryIcon}>{category.icon}</Text>
+                    <Text style={styles.categoryName}>{category.name}</Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+
+              <Button
+                title="Ajouter l'abonnement"
+                onPress={handleAddSubscription}
+                loading={loading}
+                style={styles.submitButton}
+              />
+            </ScrollView>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 24,
+    paddingTop: 60,
+    backgroundColor: '#FFF'
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#333'
+  },
+  totalText: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 4
+  },
+  addButton: {
+    backgroundColor: '#4A90E2',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8
+  },
+  addButtonText: {
+    color: '#FFF',
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  content: {
+    flex: 1,
+    padding: 24
+  },
+  emptyState: {
+    alignItems: 'center',
+    paddingVertical: 60
+  },
+  emptyIcon: {
+    fontSize: 64,
+    marginBottom: 16
+  },
+  emptyText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#666',
+    marginBottom: 8
+  },
+  emptySubtext: {
+    fontSize: 14,
+    color: '#999',
+    textAlign: 'center',
+    paddingHorizontal: 40
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end'
+  },
+  modalContent: {
+    backgroundColor: '#FFF',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    padding: 24,
+    maxHeight: '90%'
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 24
+  },
+  modalTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333'
+  },
+  closeButton: {
+    fontSize: 24,
+    color: '#999'
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12
+  },
+  frequencySelector: {
+    flexDirection: 'row',
+    gap: 8,
+    marginBottom: 24
+  },
+  frequencyButton: {
+    flex: 1,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: '#E0E0E0',
+    alignItems: 'center'
+  },
+  frequencyButtonActive: {
+    borderColor: '#4A90E2',
+    backgroundColor: '#F0F7FF'
+  },
+  frequencyButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#666'
+  },
+  frequencyButtonTextActive: {
+    color: '#4A90E2'
+  },
+  categoryGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginBottom: 24
+  },
+  categoryItem: {
+    width: '31%',
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    borderColor: '#E0E0E0',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFF',
+    minHeight: 70
+  },
+  categoryItemActive: {
+    backgroundColor: '#F0F7FF',
+    borderWidth: 2,
+    borderColor: '#4A90E2'
+  },
+  categoryIcon: {
+    fontSize: 24,
+    marginBottom: 4
+  },
+  categoryName: {
+    fontSize: 10,
+    color: '#666',
+    fontWeight: '500',
+    textAlign: 'center'
+  },
+  submitButton: {
+    marginTop: 8,
+    marginBottom: Platform.OS === 'ios' ? 20 : 0
+  }
+});

src/screens/TransactionScreen.tsx

@@ -0,0 +1,440 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Modal,
+  Alert,
+  Platform
+} from 'react-native';
+import { useAuth } from '../hooks/useAuth';
+import { transactionService } from '../services/transactionService';
+import { categoryService } from '../services/categoryService';
+import { Transaction, Category, TransactionType } from '../types';
+import { TransactionCard } from '../components/TransactionCard';
+import { InputText } from '../components/InputText';
+import { Button } from '../components/Button';
+
+export const TransactionScreen = ({ route, navigation }: any) => {
+  const { user } = useAuth();
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // Form state
+  const [type, setType] = useState<TransactionType>(route?.params?.type || 'expense');
+  const [amount, setAmount] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('');
+  const [note, setNote] = useState('');
+  const [date, setDate] = useState(new Date());
+
+  useEffect(() => {
+    if (!user) return;
+
+    // Charger les catégories
+    loadCategories();
+
+    // Écouter les transactions
+    const unsubscribe = transactionService.subscribeToTransactions(
+      user.uid,
+      (newTransactions) => {
+        setTransactions(newTransactions);
+      }
+    );
+
+    return () => unsubscribe();
+  }, [user]);
+
+  // Ouvrir le modal automatiquement si on vient du Dashboard
+  useEffect(() => {
+    if (route?.params?.openModal) {
+      setModalVisible(true);
+      if (route.params.type) {
+        setType(route.params.type);
+      }
+      // Réinitialiser le paramètre
+      navigation.setParams({ openModal: false });
+    }
+  }, [route?.params]);
+
+  const loadCategories = async () => {
+    if (!user) return;
+
+    try {
+      let userCategories = await categoryService.getCategories(user.uid);
+      
+      // Si l'utilisateur n'a pas de catégories, initialiser les catégories par défaut
+      if (userCategories.length === 0) {
+        await categoryService.initializeDefaultCategories(user.uid);
+        userCategories = await categoryService.getCategories(user.uid);
+      }
+
+      setCategories(userCategories);
+      
+      // Sélectionner la première catégorie du type approprié
+      const defaultCategory = userCategories.find((c) => c.type === type);
+      if (defaultCategory) {
+        setSelectedCategory(defaultCategory.name);
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement des catégories:', error);
+    }
+  };
+
+  const handleAddTransaction = async () => {
+    if (!user) return;
+
+    if (!amount || parseFloat(amount) <= 0) {
+      Alert.alert('Erreur', 'Veuillez entrer un montant valide');
+      return;
+    }
+
+    if (!selectedCategory) {
+      Alert.alert('Erreur', 'Veuillez sélectionner une catégorie');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await transactionService.addTransaction(
+        user.uid,
+        type,
+        parseFloat(amount),
+        selectedCategory,
+        date,
+        note
+      );
+
+      // Réinitialiser le formulaire
+      setAmount('');
+      setSelectedCategory('');
+      setNote('');
+      setDate(new Date());
+      setLoading(false);
+      setModalVisible(false);
+
+      Alert.alert('Succès', 'Transaction ajoutée avec succès');
+    } catch (error: any) {
+      setLoading(false);
+      Alert.alert('Erreur', error.message);
+    }
+  };
+
+  const filteredCategories = categories.filter((c) => c.type === type);
+
+  const getCategoryInfo = (categoryName: string) => {
+    const category = categories.find((c) => c.name === categoryName);
+    return category || { icon: '📦', color: '#95A5A6' };
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Transactions</Text>
+        <TouchableOpacity
+          style={styles.addButton}
+          onPress={() => setModalVisible(true)}
+        >
+          <Text style={styles.addButtonText}>+ Ajouter</Text>
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView style={styles.content}>
+        {transactions.length === 0 ? (
+          <View style={styles.emptyState}>
+            <Text style={styles.emptyIcon}>💸</Text>
+            <Text style={styles.emptyText}>Aucune transaction</Text>
+            <Text style={styles.emptySubtext}>
+              Ajoutez votre première transaction pour commencer
+            </Text>
+          </View>
+        ) : (
+          transactions.map((transaction) => {
+            const categoryInfo = getCategoryInfo(transaction.category);
+            return (
+              <TransactionCard
+                key={transaction.id}
+                transaction={transaction}
+                categoryIcon={categoryInfo.icon}
+                categoryColor={categoryInfo.color}
+              />
+            );
+          })
+        )}
+      </ScrollView>
+
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        transparent={true}
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>Nouvelle transaction</Text>
+              <TouchableOpacity onPress={() => setModalVisible(false)}>
+                <Text style={styles.closeButton}>✕</Text>
+              </TouchableOpacity>
+            </View>
+
+            <ScrollView>
+              <View style={styles.typeSelector}>
+                <TouchableOpacity
+                  style={[
+                    styles.typeButton,
+                    type === 'expense' && styles.typeButtonActive,
+                    styles.expenseButton
+                  ]}
+                  onPress={() => {
+                    setType('expense');
+                    const defaultCategory = filteredCategories.find((c) => c.type === 'expense');
+                    if (defaultCategory) setSelectedCategory(defaultCategory.name);
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.typeButtonText,
+                      type === 'expense' && styles.typeButtonTextActive
+                    ]}
+                  >
+                    Dépense
+                  </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[
+                    styles.typeButton,
+                    type === 'income' && styles.typeButtonActive,
+                    styles.incomeButton
+                  ]}
+                  onPress={() => {
+                    setType('income');
+                    const defaultCategory = filteredCategories.find((c) => c.type === 'income');
+                    if (defaultCategory) setSelectedCategory(defaultCategory.name);
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.typeButtonText,
+                      type === 'income' && styles.typeButtonTextActive
+                    ]}
+                  >
+                    Revenu
+                  </Text>
+                </TouchableOpacity>
+              </View>
+
+              <InputText
+                label="Montant (€)"
+                placeholder="0.00"
+                value={amount}
+                onChangeText={(text) => {
+                  // Permettre uniquement les chiffres et un point décimal
+                  const cleaned = text.replace(/[^0-9.]/g, '');
+                  // Empêcher plusieurs points
+                  const parts = cleaned.split('.');
+                  if (parts.length > 2) return;
+                  // Limiter à 2 décimales
+                  if (parts[1] && parts[1].length > 2) return;
+                  setAmount(cleaned);
+                }}
+                keyboardType="decimal-pad"
+              />
+
+              <Text style={styles.label}>Catégorie</Text>
+              <View style={styles.categoryGrid}>
+                {filteredCategories.map((category) => (
+                  <TouchableOpacity
+                    key={category.id}
+                    style={[
+                      styles.categoryItem,
+                      selectedCategory === category.name && styles.categoryItemActive
+                    ]}
+                    onPress={() => setSelectedCategory(category.name)}
+                  >
+                    <Text style={styles.categoryIcon}>{category.icon}</Text>
+                    <Text style={styles.categoryName}>{category.name}</Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+
+              <InputText
+                label="Note (optionnel)"
+                placeholder="Ajouter une note..."
+                value={note}
+                onChangeText={setNote}
+                multiline
+                numberOfLines={3}
+              />
+
+              <Button
+                title="Ajouter la transaction"
+                onPress={handleAddTransaction}
+                loading={loading}
+                style={styles.submitButton}
+              />
+            </ScrollView>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 24,
+    paddingTop: 60,
+    backgroundColor: '#FFF'
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#333'
+  },
+  addButton: {
+    backgroundColor: '#4A90E2',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8
+  },
+  addButtonText: {
+    color: '#FFF',
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  content: {
+    flex: 1,
+    padding: 24
+  },
+  emptyState: {
+    alignItems: 'center',
+    paddingVertical: 60
+  },
+  emptyIcon: {
+    fontSize: 64,
+    marginBottom: 16
+  },
+  emptyText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#666',
+    marginBottom: 8
+  },
+  emptySubtext: {
+    fontSize: 14,
+    color: '#999',
+    textAlign: 'center'
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end'
+  },
+  modalContent: {
+    backgroundColor: '#FFF',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    padding: 24,
+    maxHeight: '90%'
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 24
+  },
+  modalTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333'
+  },
+  closeButton: {
+    fontSize: 24,
+    color: '#999'
+  },
+  typeSelector: {
+    flexDirection: 'row',
+    gap: 12,
+    marginBottom: 24
+  },
+  typeButton: {
+    flex: 1,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: '#E0E0E0',
+    alignItems: 'center'
+  },
+  typeButtonActive: {
+    borderWidth: 3,
+    backgroundColor: '#F0F7FF'
+  },
+  expenseButton: {
+    borderColor: '#FF6B6B'
+  },
+  incomeButton: {
+    borderColor: '#52C41A'
+  },
+  typeButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#999'
+  },
+  typeButtonTextActive: {
+    color: '#333',
+    fontWeight: '700'
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12
+  },
+  categoryGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginBottom: 24
+  },
+  categoryItem: {
+    width: '31%',
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    borderColor: '#E0E0E0',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFF',
+    minHeight: 70
+  },
+  categoryItemActive: {
+    backgroundColor: '#F0F7FF',
+    borderWidth: 2,
+    borderColor: '#4A90E2'
+  },
+  categoryIcon: {
+    fontSize: 24,
+    marginBottom: 4
+  },
+  categoryName: {
+    fontSize: 10,
+    color: '#666',
+    fontWeight: '500',
+    textAlign: 'center'
+  },
+  submitButton: {
+    marginTop: 8,
+    marginBottom: Platform.OS === 'ios' ? 20 : 0
+  }
+});

src/services/authService.ts

@@ -0,0 +1,96 @@
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  signOut,
+  User as FirebaseUser,
+  updateProfile
+} from 'firebase/auth';
+import { doc, setDoc, getDoc } from 'firebase/firestore';
+import { auth, db } from '../config/firebase';
+import { User } from '../types';
+
+export const authService = {
+  // Inscription
+  async signup(email: string, password: string, displayName?: string): Promise<FirebaseUser> {
+    try {
+      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+      const user = userCredential.user;
+
+      // Mettre à jour le profil avec le nom d'affichage
+      if (displayName) {
+        await updateProfile(user, { displayName });
+      }
+
+      // Créer le document utilisateur dans Firestore
+      const userData: Omit<User, 'uid'> = {
+        email: user.email!,
+        displayName: displayName || undefined,
+        createdAt: new Date(),
+        sharedWith: []
+      };
+
+      await setDoc(doc(db, 'users', user.uid), userData);
+
+      return user;
+    } catch (error: any) {
+      throw new Error(this.getErrorMessage(error.code));
+    }
+  },
+
+  // Connexion
+  async login(email: string, password: string): Promise<FirebaseUser> {
+    try {
+      const userCredential = await signInWithEmailAndPassword(auth, email, password);
+      return userCredential.user;
+    } catch (error: any) {
+      throw new Error(this.getErrorMessage(error.code));
+    }
+  },
+
+  // Déconnexion
+  async logout(): Promise<void> {
+    try {
+      await signOut(auth);
+    } catch (error: any) {
+      throw new Error('Erreur lors de la déconnexion');
+    }
+  },
+
+  // Récupérer les données utilisateur depuis Firestore
+  async getUserData(uid: string): Promise<User | null> {
+    try {
+      const userDoc = await getDoc(doc(db, 'users', uid));
+      if (userDoc.exists()) {
+        return { uid, ...userDoc.data() } as User;
+      }
+      return null;
+    } catch (error) {
+      console.error('Erreur lors de la récupération des données utilisateur:', error);
+      return null;
+    }
+  },
+
+  // Messages d'erreur en français
+  getErrorMessage(errorCode: string): string {
+    switch (errorCode) {
+      case 'auth/email-already-in-use':
+        return 'Cette adresse email est déjà utilisée';
+      case 'auth/invalid-email':
+        return 'Adresse email invalide';
+      case 'auth/operation-not-allowed':
+        return 'Opération non autorisée';
+      case 'auth/weak-password':
+        return 'Le mot de passe doit contenir au moins 6 caractères';
+      case 'auth/user-disabled':
+        return 'Ce compte a été désactivé';
+      case 'auth/user-not-found':
+        return 'Aucun compte trouvé avec cette adresse email';
+      case 'auth/wrong-password':
+        return 'Mot de passe incorrect';
+      case 'auth/invalid-credential':
+        return 'Identifiants invalides';
+      default:
+        return 'Une erreur est survenue. Veuillez réessayer.';
+    }
+  }
+};

src/services/categoryService.ts

@@ -0,0 +1,156 @@
+import {
+  collection,
+  addDoc,
+  updateDoc,
+  deleteDoc,
+  doc,
+  query,
+  where,
+  getDocs,
+  onSnapshot
+} from 'firebase/firestore';
+import { db } from '../config/firebase';
+import { Category, TransactionType } from '../types';
+
+// Catégories par défaut
+export const DEFAULT_CATEGORIES: Omit<Category, 'id' | 'userId'>[] = [
+  // Dépenses
+  { name: 'Courses', icon: '🛒', color: '#FF6B6B', type: 'expense' },
+  { name: 'Logement', icon: '🏠', color: '#4ECDC4', type: 'expense' },
+  { name: 'Transport', icon: '🚗', color: '#45B7D1', type: 'expense' },
+  { name: 'Loisirs', icon: '🎮', color: '#FFA07A', type: 'expense' },
+  { name: 'Restaurant', icon: '🍽️', color: '#98D8C8', type: 'expense' },
+  { name: 'Santé', icon: '💊', color: '#F7DC6F', type: 'expense' },
+  { name: 'Vêtements', icon: '👕', color: '#BB8FCE', type: 'expense' },
+  { name: 'Éducation', icon: '📚', color: '#85C1E2', type: 'expense' },
+  { name: 'Abonnements', icon: '📱', color: '#F8B739', type: 'expense' },
+  { name: 'Autre', icon: '📦', color: '#95A5A6', type: 'expense' },
+  
+  // Revenus
+  { name: 'Salaire', icon: '💰', color: '#52C41A', type: 'income' },
+  { name: 'Freelance', icon: '💼', color: '#13C2C2', type: 'income' },
+  { name: 'Investissement', icon: '📈', color: '#1890FF', type: 'income' },
+  { name: 'Cadeau', icon: '🎁', color: '#EB2F96', type: 'income' },
+  { name: 'Autre', icon: '💵', color: '#52C41A', type: 'income' }
+];
+
+export const categoryService = {
+  // Initialiser les catégories par défaut pour un utilisateur
+  async initializeDefaultCategories(userId: string): Promise<void> {
+    try {
+      const promises = DEFAULT_CATEGORIES.map((category) =>
+        addDoc(collection(db, 'categories'), {
+          ...category,
+          userId
+        })
+      );
+
+      await Promise.all(promises);
+    } catch (error) {
+      console.error('Erreur lors de l\'initialisation des catégories:', error);
+      throw new Error('Impossible d\'initialiser les catégories');
+    }
+  },
+
+  // Ajouter une catégorie personnalisée
+  async addCategory(
+    userId: string,
+    name: string,
+    icon: string,
+    color: string,
+    type: TransactionType
+  ): Promise<string> {
+    try {
+      const categoryData = {
+        userId,
+        name,
+        icon,
+        color,
+        type
+      };
+
+      const docRef = await addDoc(collection(db, 'categories'), categoryData);
+      return docRef.id;
+    } catch (error) {
+      console.error('Erreur lors de l\'ajout de la catégorie:', error);
+      throw new Error('Impossible d\'ajouter la catégorie');
+    }
+  },
+
+  // Mettre à jour une catégorie
+  async updateCategory(
+    categoryId: string,
+    updates: Partial<Omit<Category, 'id' | 'userId'>>
+  ): Promise<void> {
+    try {
+      const categoryRef = doc(db, 'categories', categoryId);
+      await updateDoc(categoryRef, updates);
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la catégorie:', error);
+      throw new Error('Impossible de mettre à jour la catégorie');
+    }
+  },
+
+  // Supprimer une catégorie
+  async deleteCategory(categoryId: string): Promise<void> {
+    try {
+      await deleteDoc(doc(db, 'categories', categoryId));
+    } catch (error) {
+      console.error('Erreur lors de la suppression de la catégorie:', error);
+      throw new Error('Impossible de supprimer la catégorie');
+    }
+  },
+
+  // Récupérer les catégories d'un utilisateur
+  async getCategories(userId: string): Promise<Category[]> {
+    try {
+      const q = query(collection(db, 'categories'), where('userId', '==', userId));
+      const snapshot = await getDocs(q);
+
+      const categories: Category[] = [];
+      snapshot.forEach((doc) => {
+        const data = doc.data();
+        categories.push({
+          id: doc.id,
+          userId: data.userId,
+          name: data.name,
+          icon: data.icon,
+          color: data.color,
+          type: data.type
+        });
+      });
+
+      return categories;
+    } catch (error) {
+      console.error('Erreur lors de la récupération des catégories:', error);
+      throw new Error('Impossible de récupérer les catégories');
+    }
+  },
+
+  // Écouter les catégories en temps réel
+  subscribeToCategories(
+    userId: string,
+    callback: (categories: Category[]) => void
+  ): () => void {
+    const q = query(collection(db, 'categories'), where('userId', '==', userId));
+
+    const unsubscribe = onSnapshot(q, (snapshot) => {
+      const categories: Category[] = [];
+      snapshot.forEach((doc) => {
+        const data = doc.data();
+        categories.push({
+          id: doc.id,
+          userId: data.userId,
+          name: data.name,
+          icon: data.icon,
+          color: data.color,
+          type: data.type
+        });
+      });
+
+      callback(categories);
+    });
+
+    return unsubscribe;
+  }
+};

src/services/subscriptionService.ts

@@ -0,0 +1,149 @@
+import {
+  collection,
+  addDoc,
+  updateDoc,
+  deleteDoc,
+  doc,
+  query,
+  where,
+  orderBy,
+  onSnapshot,
+  Timestamp
+} from 'firebase/firestore';
+import { db } from '../config/firebase';
+import { Subscription, SubscriptionFrequency } from '../types';
+
+export const subscriptionService = {
+  // Ajouter un abonnement
+  async addSubscription(
+    userId: string,
+    name: string,
+    amount: number,
+    category: string,
+    frequency: SubscriptionFrequency,
+    nextPaymentDate: Date,
+    reminderDaysBefore: number = 3
+  ): Promise<string> {
+    try {
+      const subscriptionData = {
+        userId,
+        name,
+        amount,
+        category,
+        frequency,
+        nextPaymentDate: Timestamp.fromDate(nextPaymentDate),
+        reminderDaysBefore,
+        isActive: true,
+        createdAt: Timestamp.fromDate(new Date()),
+        updatedAt: Timestamp.fromDate(new Date())
+      };
+
+      const docRef = await addDoc(collection(db, 'subscriptions'), subscriptionData);
+      return docRef.id;
+    } catch (error) {
+      console.error('Erreur lors de l\'ajout de l\'abonnement:', error);
+      throw new Error('Impossible d\'ajouter l\'abonnement');
+    }
+  },
+
+  // Mettre à jour un abonnement
+  async updateSubscription(
+    subscriptionId: string,
+    updates: Partial<Omit<Subscription, 'id' | 'userId' | 'createdAt'>>
+  ): Promise<void> {
+    try {
+      const subscriptionRef = doc(db, 'subscriptions', subscriptionId);
+      const updateData: any = {
+        ...updates,
+        updatedAt: Timestamp.fromDate(new Date())
+      };
+
+      if (updates.nextPaymentDate) {
+        updateData.nextPaymentDate = Timestamp.fromDate(updates.nextPaymentDate);
+      }
+
+      await updateDoc(subscriptionRef, updateData);
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de l\'abonnement:', error);
+      throw new Error('Impossible de mettre à jour l\'abonnement');
+    }
+  },
+
+  // Supprimer un abonnement
+  async deleteSubscription(subscriptionId: string): Promise<void> {
+    try {
+      await deleteDoc(doc(db, 'subscriptions', subscriptionId));
+    } catch (error) {
+      console.error('Erreur lors de la suppression de l\'abonnement:', error);
+      throw new Error('Impossible de supprimer l\'abonnement');
+    }
+  },
+
+  // Écouter les abonnements en temps réel
+  subscribeToSubscriptions(
+    userId: string,
+    callback: (subscriptions: Subscription[]) => void
+  ): () => void {
+    const q = query(
+      collection(db, 'subscriptions'),
+      where('userId', '==', userId),
+      orderBy('nextPaymentDate', 'asc')
+    );
+
+    const unsubscribe = onSnapshot(q, (snapshot) => {
+      const subscriptions: Subscription[] = [];
+      snapshot.forEach((doc) => {
+        const data = doc.data();
+        subscriptions.push({
+          id: doc.id,
+          userId: data.userId,
+          name: data.name,
+          amount: data.amount,
+          category: data.category,
+          frequency: data.frequency,
+          nextPaymentDate: data.nextPaymentDate.toDate(),
+          reminderDaysBefore: data.reminderDaysBefore,
+          isActive: data.isActive,
+          createdAt: data.createdAt.toDate(),
+          updatedAt: data.updatedAt.toDate()
+        });
+      });
+
+      callback(subscriptions);
+    });
+
+    return unsubscribe;
+  },
+
+  // Calculer la prochaine date de paiement
+  calculateNextPaymentDate(currentDate: Date, frequency: SubscriptionFrequency): Date {
+    const nextDate = new Date(currentDate);
+
+    switch (frequency) {
+      case 'daily':
+        nextDate.setDate(nextDate.getDate() + 1);
+        break;
+      case 'weekly':
+        nextDate.setDate(nextDate.getDate() + 7);
+        break;
+      case 'monthly':
+        nextDate.setMonth(nextDate.getMonth() + 1);
+        break;
+      case 'yearly':
+        nextDate.setFullYear(nextDate.getFullYear() + 1);
+        break;
+    }
+
+    return nextDate;
+  },
+
+  // Vérifier si un rappel doit être envoyé
+  shouldSendReminder(subscription: Subscription): boolean {
+    const today = new Date();
+    const daysUntilPayment = Math.ceil(
+      (subscription.nextPaymentDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)
+    );
+
+    return daysUntilPayment <= subscription.reminderDaysBefore && daysUntilPayment >= 0;
+  }
+};

src/services/transactionService.ts

@@ -0,0 +1,188 @@
+import {
+  collection,
+  addDoc,
+  updateDoc,
+  deleteDoc,
+  doc,
+  query,
+  where,
+  orderBy,
+  onSnapshot,
+  Timestamp,
+  getDocs,
+  QueryConstraint
+} from 'firebase/firestore';
+import { db } from '../config/firebase';
+import { Transaction, TransactionType } from '../types';
+
+export const transactionService = {
+  // Ajouter une transaction
+  async addTransaction(
+    userId: string,
+    type: TransactionType,
+    amount: number,
+    category: string,
+    date: Date,
+    note?: string,
+    imageUrl?: string
+  ): Promise<string> {
+    try {
+      const transactionData = {
+        userId,
+        type,
+        amount,
+        category,
+        date: Timestamp.fromDate(date),
+        note: note || '',
+        imageUrl: imageUrl || '',
+        createdAt: Timestamp.fromDate(new Date()),
+        updatedAt: Timestamp.fromDate(new Date())
+      };
+
+      const docRef = await addDoc(collection(db, 'transactions'), transactionData);
+      return docRef.id;
+    } catch (error) {
+      console.error('Erreur lors de l\'ajout de la transaction:', error);
+      throw new Error('Impossible d\'ajouter la transaction');
+    }
+  },
+
+  // Mettre à jour une transaction
+  async updateTransaction(
+    transactionId: string,
+    updates: Partial<Omit<Transaction, 'id' | 'userId' | 'createdAt'>>
+  ): Promise<void> {
+    try {
+      const transactionRef = doc(db, 'transactions', transactionId);
+      const updateData: any = {
+        ...updates,
+        updatedAt: Timestamp.fromDate(new Date())
+      };
+
+      if (updates.date) {
+        updateData.date = Timestamp.fromDate(updates.date);
+      }
+
+      await updateDoc(transactionRef, updateData);
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la transaction:', error);
+      throw new Error('Impossible de mettre à jour la transaction');
+    }
+  },
+
+  // Supprimer une transaction
+  async deleteTransaction(transactionId: string): Promise<void> {
+    try {
+      await deleteDoc(doc(db, 'transactions', transactionId));
+    } catch (error) {
+      console.error('Erreur lors de la suppression de la transaction:', error);
+      throw new Error('Impossible de supprimer la transaction');
+    }
+  },
+
+  // Écouter les transactions en temps réel
+  subscribeToTransactions(
+    userId: string,
+    callback: (transactions: Transaction[]) => void,
+    filters?: {
+      type?: TransactionType;
+      category?: string;
+      startDate?: Date;
+      endDate?: Date;
+    }
+  ): () => void {
+    const constraints: QueryConstraint[] = [
+      where('userId', '==', userId),
+      orderBy('date', 'desc')
+    ];
+
+    if (filters?.type) {
+      constraints.push(where('type', '==', filters.type));
+    }
+
+    if (filters?.category) {
+      constraints.push(where('category', '==', filters.category));
+    }
+
+    const q = query(collection(db, 'transactions'), ...constraints);
+
+    const unsubscribe = onSnapshot(q, (snapshot) => {
+      const transactions: Transaction[] = [];
+      snapshot.forEach((doc) => {
+        const data = doc.data();
+        transactions.push({
+          id: doc.id,
+          userId: data.userId,
+          type: data.type,
+          amount: data.amount,
+          category: data.category,
+          date: data.date.toDate(),
+          note: data.note,
+          imageUrl: data.imageUrl,
+          createdAt: data.createdAt.toDate(),
+          updatedAt: data.updatedAt.toDate()
+        });
+      });
+
+      // Filtrer par dates si nécessaire (côté client car Firestore a des limitations)
+      let filteredTransactions = transactions;
+      if (filters?.startDate || filters?.endDate) {
+        filteredTransactions = transactions.filter((t) => {
+          if (filters.startDate && t.date < filters.startDate) return false;
+          if (filters.endDate && t.date > filters.endDate) return false;
+          return true;
+        });
+      }
+
+      callback(filteredTransactions);
+    });
+
+    return unsubscribe;
+  },
+
+  // Récupérer les transactions d'un mois spécifique
+  async getMonthlyTransactions(
+    userId: string,
+    year: number,
+    month: number
+  ): Promise<Transaction[]> {
+    try {
+      const startDate = new Date(year, month, 1);
+      const endDate = new Date(year, month + 1, 0, 23, 59, 59);
+
+      const q = query(
+        collection(db, 'transactions'),
+        where('userId', '==', userId),
+        orderBy('date', 'desc')
+      );
+
+      const snapshot = await getDocs(q);
+      const transactions: Transaction[] = [];
+
+      snapshot.forEach((doc) => {
+        const data = doc.data();
+        const transactionDate = data.date.toDate();
+
+        if (transactionDate >= startDate && transactionDate <= endDate) {
+          transactions.push({
+            id: doc.id,
+            userId: data.userId,
+            type: data.type,
+            amount: data.amount,
+            category: data.category,
+            date: transactionDate,
+            note: data.note,
+            imageUrl: data.imageUrl,
+            createdAt: data.createdAt.toDate(),
+            updatedAt: data.updatedAt.toDate()
+          });
+        }
+      });
+
+      return transactions;
+    } catch (error) {
+      console.error('Erreur lors de la récupération des transactions mensuelles:', error);
+      throw new Error('Impossible de récupérer les transactions');
+    }
+  }
+};

src/types/index.ts

@@ -0,0 +1,81 @@
+// Types pour l'utilisateur
+export interface User {
+  uid: string;
+  email: string;
+  displayName?: string;
+  createdAt: Date;
+  sharedWith?: string[]; // UIDs des utilisateurs avec qui le compte est partagé
+}
+
+// Types pour les transactions
+export type TransactionType = 'expense' | 'income';
+
+export interface Transaction {
+  id: string;
+  userId: string;
+  type: TransactionType;
+  amount: number;
+  category: string;
+  date: Date;
+  note?: string;
+  imageUrl?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+// Types pour les catégories
+export interface Category {
+  id: string;
+  name: string;
+  icon: string;
+  color: string;
+  type: TransactionType;
+  userId: string;
+}
+
+// Types pour les abonnements
+export type SubscriptionFrequency = 'daily' | 'weekly' | 'monthly' | 'yearly';
+
+export interface Subscription {
+  id: string;
+  userId: string;
+  name: string;
+  amount: number;
+  category: string;
+  frequency: SubscriptionFrequency;
+  nextPaymentDate: Date;
+  reminderDaysBefore: number;
+  isActive: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+// Types pour les statistiques
+export interface CategoryStats {
+  category: string;
+  total: number;
+  count: number;
+  percentage: number;
+}
+
+export interface MonthlyStats {
+  month: string;
+  totalIncome: number;
+  totalExpenses: number;
+  balance: number;
+  categoryBreakdown: CategoryStats[];
+}
+
+// Types pour la navigation
+export type RootStackParamList = {
+  Login: undefined;
+  Signup: undefined;
+  Main: undefined;
+};
+
+export type MainTabParamList = {
+  Dashboard: undefined;
+  Transactions: undefined;
+  Subscriptions: undefined;
+  Analysis: undefined;
+};

src/utils/constants.ts

@@ -0,0 +1,161 @@
+/**
+ * Constantes utilisées dans l'application
+ */
+
+// Couleurs principales
+export const COLORS = {
+  primary: '#4A90E2',
+  secondary: '#6C757D',
+  success: '#52C41A',
+  danger: '#FF6B6B',
+  warning: '#FFA07A',
+  info: '#13C2C2',
+  light: '#F8F9FA',
+  dark: '#333',
+  white: '#FFF',
+  gray: '#999',
+  border: '#E0E0E0'
+};
+
+// Couleurs des catégories par défaut
+export const CATEGORY_COLORS = {
+  // Dépenses
+  courses: '#FF6B6B',
+  logement: '#4ECDC4',
+  transport: '#45B7D1',
+  loisirs: '#FFA07A',
+  restaurant: '#98D8C8',
+  sante: '#F7DC6F',
+  vetements: '#BB8FCE',
+  education: '#85C1E2',
+  abonnements: '#F8B739',
+  autre: '#95A5A6',
+  
+  // Revenus
+  salaire: '#52C41A',
+  freelance: '#13C2C2',
+  investissement: '#1890FF',
+  cadeau: '#EB2F96',
+  autreRevenu: '#52C41A'
+};
+
+// Tailles de police
+export const FONT_SIZES = {
+  xs: 11,
+  sm: 12,
+  md: 14,
+  lg: 16,
+  xl: 18,
+  xxl: 24,
+  xxxl: 32
+};
+
+// Espacements
+export const SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32
+};
+
+// Rayons de bordure
+export const BORDER_RADIUS = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  round: 999
+};
+
+// Formats de date
+export const DATE_FORMATS = {
+  short: 'DD/MM/YYYY',
+  medium: 'DD MMM YYYY',
+  long: 'DD MMMM YYYY',
+  full: 'dddd DD MMMM YYYY'
+};
+
+// Messages d'erreur
+export const ERROR_MESSAGES = {
+  network: 'Erreur de connexion. Vérifiez votre connexion Internet.',
+  auth: {
+    invalidEmail: 'Adresse email invalide',
+    weakPassword: 'Le mot de passe doit contenir au moins 6 caractères',
+    emailInUse: 'Cette adresse email est déjà utilisée',
+    userNotFound: 'Aucun compte trouvé avec cette adresse email',
+    wrongPassword: 'Mot de passe incorrect',
+    tooManyRequests: 'Trop de tentatives. Veuillez réessayer plus tard.'
+  },
+  transaction: {
+    invalidAmount: 'Montant invalide',
+    missingCategory: 'Veuillez sélectionner une catégorie',
+    addFailed: 'Impossible d\'ajouter la transaction',
+    updateFailed: 'Impossible de mettre à jour la transaction',
+    deleteFailed: 'Impossible de supprimer la transaction'
+  },
+  subscription: {
+    invalidName: 'Nom invalide',
+    invalidAmount: 'Montant invalide',
+    invalidDate: 'Date invalide',
+    addFailed: 'Impossible d\'ajouter l\'abonnement',
+    updateFailed: 'Impossible de mettre à jour l\'abonnement',
+    deleteFailed: 'Impossible de supprimer l\'abonnement'
+  }
+};
+
+// Messages de succès
+export const SUCCESS_MESSAGES = {
+  auth: {
+    signupSuccess: 'Compte créé avec succès',
+    loginSuccess: 'Connexion réussie',
+    logoutSuccess: 'Déconnexion réussie'
+  },
+  transaction: {
+    addSuccess: 'Transaction ajoutée avec succès',
+    updateSuccess: 'Transaction mise à jour',
+    deleteSuccess: 'Transaction supprimée'
+  },
+  subscription: {
+    addSuccess: 'Abonnement ajouté avec succès',
+    updateSuccess: 'Abonnement mis à jour',
+    deleteSuccess: 'Abonnement supprimé'
+  }
+};
+
+// Limites
+export const LIMITS = {
+  maxTransactionsPerPage: 50,
+  maxCategoriesPerUser: 50,
+  maxSubscriptionsPerUser: 100,
+  maxNoteLength: 500,
+  minPasswordLength: 6,
+  maxImageSize: 5 * 1024 * 1024 // 5 MB
+};
+
+// Fréquences d'abonnement
+export const SUBSCRIPTION_FREQUENCIES = [
+  { value: 'daily', label: 'Quotidien' },
+  { value: 'weekly', label: 'Hebdomadaire' },
+  { value: 'monthly', label: 'Mensuel' },
+  { value: 'yearly', label: 'Annuel' }
+];
+
+// Jours de rappel par défaut
+export const DEFAULT_REMINDER_DAYS = 3;
+
+// Clés de stockage AsyncStorage
+export const STORAGE_KEYS = {
+  user: '@wallettracker_user',
+  theme: '@wallettracker_theme',
+  language: '@wallettracker_language'
+};
+
+// URLs utiles
+export const URLS = {
+  privacyPolicy: 'https://example.com/privacy',
+  termsOfService: 'https://example.com/terms',
+  support: 'https://example.com/support',
+  github: 'https://github.com/yourusername/wallettracker'
+};

src/utils/helpers.ts

@@ -0,0 +1,251 @@
+/**
+ * Fonctions utilitaires pour l'application
+ */
+
+/**
+ * Formate un montant en euros
+ */
+export const formatCurrency = (amount: number): string => {
+  return new Intl.NumberFormat('fr-FR', {
+    style: 'currency',
+    currency: 'EUR'
+  }).format(amount);
+};
+
+/**
+ * Formate une date
+ */
+export const formatDate = (
+  date: Date,
+  format: 'short' | 'medium' | 'long' = 'medium'
+): string => {
+  const formatOptions: Record<string, Intl.DateTimeFormatOptions> = {
+    short: { day: '2-digit', month: '2-digit', year: 'numeric' },
+    medium: { day: '2-digit', month: 'short', year: 'numeric' },
+    long: { day: '2-digit', month: 'long', year: 'numeric' }
+  };
+
+  return new Intl.DateTimeFormat('fr-FR', formatOptions[format]).format(date);
+};
+
+/**
+ * Formate une date relative (il y a X jours)
+ */
+export const formatRelativeDate = (date: Date): string => {
+  const now = new Date();
+  const diffInMs = now.getTime() - date.getTime();
+  const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+
+  if (diffInDays === 0) return "Aujourd'hui";
+  if (diffInDays === 1) return 'Hier';
+  if (diffInDays < 7) return `Il y a ${diffInDays} jours`;
+  if (diffInDays < 30) {
+    const weeks = Math.floor(diffInDays / 7);
+    return `Il y a ${weeks} semaine${weeks > 1 ? 's' : ''}`;
+  }
+  if (diffInDays < 365) {
+    const months = Math.floor(diffInDays / 30);
+    return `Il y a ${months} mois`;
+  }
+  const years = Math.floor(diffInDays / 365);
+  return `Il y a ${years} an${years > 1 ? 's' : ''}`;
+};
+
+/**
+ * Obtient le nom du mois en français
+ */
+export const getMonthName = (date: Date, format: 'long' | 'short' = 'long'): string => {
+  return new Intl.DateTimeFormat('fr-FR', {
+    month: format,
+    year: 'numeric'
+  }).format(date);
+};
+
+/**
+ * Calcule le nombre de jours entre deux dates
+ */
+export const daysBetween = (date1: Date, date2: Date): number => {
+  const diffInMs = Math.abs(date2.getTime() - date1.getTime());
+  return Math.ceil(diffInMs / (1000 * 60 * 60 * 24));
+};
+
+/**
+ * Vérifie si une date est dans le mois en cours
+ */
+export const isCurrentMonth = (date: Date): boolean => {
+  const now = new Date();
+  return (
+    date.getMonth() === now.getMonth() && date.getFullYear() === now.getFullYear()
+  );
+};
+
+/**
+ * Obtient le premier jour du mois
+ */
+export const getFirstDayOfMonth = (date: Date): Date => {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+
+/**
+ * Obtient le dernier jour du mois
+ */
+export const getLastDayOfMonth = (date: Date): Date => {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59);
+};
+
+/**
+ * Valide une adresse email
+ */
+export const isValidEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+/**
+ * Valide un montant
+ */
+export const isValidAmount = (amount: string | number): boolean => {
+  const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
+  return !isNaN(numAmount) && numAmount > 0;
+};
+
+/**
+ * Tronque un texte
+ */
+export const truncate = (text: string, maxLength: number): string => {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + '...';
+};
+
+/**
+ * Capitalise la première lettre
+ */
+export const capitalize = (text: string): string => {
+  if (!text) return '';
+  return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+};
+
+/**
+ * Génère une couleur aléatoire
+ */
+export const generateRandomColor = (): string => {
+  const colors = [
+    '#FF6B6B',
+    '#4ECDC4',
+    '#45B7D1',
+    '#FFA07A',
+    '#98D8C8',
+    '#F7DC6F',
+    '#BB8FCE',
+    '#85C1E2',
+    '#F8B739',
+    '#52C41A',
+    '#13C2C2',
+    '#1890FF',
+    '#EB2F96'
+  ];
+  return colors[Math.floor(Math.random() * colors.length)];
+};
+
+/**
+ * Calcule le pourcentage
+ */
+export const calculatePercentage = (value: number, total: number): number => {
+  if (total === 0) return 0;
+  return (value / total) * 100;
+};
+
+/**
+ * Arrondit un nombre à N décimales
+ */
+export const roundTo = (num: number, decimals: number = 2): number => {
+  return Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals);
+};
+
+/**
+ * Groupe les transactions par date
+ */
+export const groupByDate = <T extends { date: Date }>(items: T[]): Map<string, T[]> => {
+  const grouped = new Map<string, T[]>();
+
+  items.forEach((item) => {
+    const dateKey = formatDate(item.date, 'short');
+    const existing = grouped.get(dateKey) || [];
+    grouped.set(dateKey, [...existing, item]);
+  });
+
+  return grouped;
+};
+
+/**
+ * Groupe les transactions par mois
+ */
+export const groupByMonth = <T extends { date: Date }>(items: T[]): Map<string, T[]> => {
+  const grouped = new Map<string, T[]>();
+
+  items.forEach((item) => {
+    const monthKey = getMonthName(item.date);
+    const existing = grouped.get(monthKey) || [];
+    grouped.set(monthKey, [...existing, item]);
+  });
+
+  return grouped;
+};
+
+/**
+ * Trie les transactions par date (plus récentes en premier)
+ */
+export const sortByDateDesc = <T extends { date: Date }>(items: T[]): T[] => {
+  return [...items].sort((a, b) => b.date.getTime() - a.date.getTime());
+};
+
+/**
+ * Filtre les transactions par période
+ */
+export const filterByDateRange = <T extends { date: Date }>(
+  items: T[],
+  startDate: Date,
+  endDate: Date
+): T[] => {
+  return items.filter((item) => item.date >= startDate && item.date <= endDate);
+};
+
+/**
+ * Calcule la somme des montants
+ */
+export const sumAmounts = <T extends { amount: number }>(items: T[]): number => {
+  return items.reduce((sum, item) => sum + item.amount, 0);
+};
+
+/**
+ * Attend X millisecondes (pour les animations)
+ */
+export const wait = (ms: number): Promise<void> => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+/**
+ * Debounce une fonction
+ */
+export const debounce = <T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) => {
+  let timeoutId: NodeJS.Timeout;
+
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func(...args), delay);
+  };
+};
+
+/**
+ * Vérifie si l'objet est vide
+ */
+export const isEmpty = (obj: any): boolean => {
+  if (obj === null || obj === undefined) return true;
+  if (typeof obj === 'string') return obj.trim().length === 0;
+  if (Array.isArray(obj)) return obj.length === 0;
+  if (typeof obj === 'object') return Object.keys(obj).length === 0;
+  return false;
+};

src/utils/sampleData.ts

@@ -0,0 +1,237 @@
+/**
+ * Données d'exemple pour faciliter les tests et le développement
+ * Ces fonctions peuvent être utilisées pour peupler la base de données avec des données de test
+ */
+
+import { transactionService } from '../services/transactionService';
+import { subscriptionService } from '../services/subscriptionService';
+import { TransactionType, SubscriptionFrequency } from '../types';
+
+/**
+ * Génère des transactions d'exemple pour un utilisateur
+ */
+export const generateSampleTransactions = async (userId: string) => {
+  const transactions = [
+    // Revenus
+    {
+      type: 'income' as TransactionType,
+      amount: 2500,
+      category: 'Salaire',
+      date: new Date(2025, 9, 1),
+      note: 'Salaire mensuel'
+    },
+    {
+      type: 'income' as TransactionType,
+      amount: 500,
+      category: 'Freelance',
+      date: new Date(2025, 9, 15),
+      note: 'Projet web client XYZ'
+    },
+
+    // Dépenses - Courses
+    {
+      type: 'expense' as TransactionType,
+      amount: 85.50,
+      category: 'Courses',
+      date: new Date(2025, 9, 5),
+      note: 'Supermarché Carrefour'
+    },
+    {
+      type: 'expense' as TransactionType,
+      amount: 42.30,
+      category: 'Courses',
+      date: new Date(2025, 9, 12),
+      note: 'Marché local'
+    },
+    {
+      type: 'expense' as TransactionType,
+      amount: 67.80,
+      category: 'Courses',
+      date: new Date(2025, 9, 19),
+      note: 'Supermarché Leclerc'
+    },
+
+    // Dépenses - Logement
+    {
+      type: 'expense' as TransactionType,
+      amount: 850,
+      category: 'Logement',
+      date: new Date(2025, 9, 1),
+      note: 'Loyer mensuel'
+    },
+    {
+      type: 'expense' as TransactionType,
+      amount: 120,
+      category: 'Logement',
+      date: new Date(2025, 9, 10),
+      note: 'Électricité et gaz'
+    },
+
+    // Dépenses - Transport
+    {
+      type: 'expense' as TransactionType,
+      amount: 60,
+      category: 'Transport',
+      date: new Date(2025, 9, 3),
+      note: 'Essence'
+    },
+    {
+      type: 'expense' as TransactionType,
+      amount: 75,
+      category: 'Transport',
+      date: new Date(2025, 9, 8),
+      note: 'Pass Navigo'
+    },
+
+    // Dépenses - Restaurant
+    {
+      type: 'expense' as TransactionType,
+      amount: 45,
+      category: 'Restaurant',
+      date: new Date(2025, 9, 6),
+      note: 'Dîner au restaurant italien'
+    },
+    {
+      type: 'expense' as TransactionType,
+      amount: 28,
+      category: 'Restaurant',
+      date: new Date(2025, 9, 13),
+      note: 'Déjeuner avec collègues'
+    },
+    {
+      type: 'expense' as TransactionType,
+      amount: 15,
+      category: 'Restaurant',
+      date: new Date(2025, 9, 20),
+      note: 'Fast food'
+    },
+
+    // Dépenses - Loisirs
+    {
+      type: 'expense' as TransactionType,
+      amount: 60,
+      category: 'Loisirs',
+      date: new Date(2025, 9, 7),
+      note: 'Cinéma et pop-corn'
+    },
+    {
+      type: 'expense' as TransactionType,
+      amount: 35,
+      category: 'Loisirs',
+      date: new Date(2025, 9, 14),
+      note: 'Jeu vidéo Steam'
+    },
+
+    // Dépenses - Santé
+    {
+      type: 'expense' as TransactionType,
+      amount: 25,
+      category: 'Santé',
+      date: new Date(2025, 9, 9),
+      note: 'Pharmacie - médicaments'
+    },
+
+    // Dépenses - Vêtements
+    {
+      type: 'expense' as TransactionType,
+      amount: 89,
+      category: 'Vêtements',
+      date: new Date(2025, 9, 16),
+      note: 'Nouvelle paire de chaussures'
+    }
+  ];
+
+  try {
+    for (const transaction of transactions) {
+      await transactionService.addTransaction(
+        userId,
+        transaction.type,
+        transaction.amount,
+        transaction.category,
+        transaction.date,
+        transaction.note
+      );
+    }
+    console.log('✅ Transactions d\'exemple créées avec succès');
+  } catch (error) {
+    console.error('❌ Erreur lors de la création des transactions d\'exemple:', error);
+  }
+};
+
+/**
+ * Génère des abonnements d'exemple pour un utilisateur
+ */
+export const generateSampleSubscriptions = async (userId: string) => {
+  const subscriptions = [
+    {
+      name: 'Netflix',
+      amount: 15.99,
+      category: 'Abonnements',
+      frequency: 'monthly' as SubscriptionFrequency,
+      dayOfMonth: 15
+    },
+    {
+      name: 'Spotify',
+      amount: 9.99,
+      category: 'Abonnements',
+      frequency: 'monthly' as SubscriptionFrequency,
+      dayOfMonth: 1
+    },
+    {
+      name: 'Amazon Prime',
+      amount: 6.99,
+      category: 'Abonnements',
+      frequency: 'monthly' as SubscriptionFrequency,
+      dayOfMonth: 10
+    },
+    {
+      name: 'Salle de sport',
+      amount: 35,
+      category: 'Santé',
+      frequency: 'monthly' as SubscriptionFrequency,
+      dayOfMonth: 5
+    },
+    {
+      name: 'Assurance téléphone',
+      amount: 120,
+      category: 'Autre',
+      frequency: 'yearly' as SubscriptionFrequency,
+      dayOfMonth: 1
+    }
+  ];
+
+  try {
+    for (const subscription of subscriptions) {
+      const now = new Date();
+      const nextPaymentDate = new Date(now.getFullYear(), now.getMonth(), subscription.dayOfMonth);
+      
+      // Si la date est déjà passée ce mois-ci, passer au mois suivant
+      if (nextPaymentDate < now) {
+        nextPaymentDate.setMonth(nextPaymentDate.getMonth() + 1);
+      }
+
+      await subscriptionService.addSubscription(
+        userId,
+        subscription.name,
+        subscription.amount,
+        subscription.category,
+        subscription.frequency,
+        nextPaymentDate,
+        3
+      );
+    }
+    console.log('✅ Abonnements d\'exemple créés avec succès');
+  } catch (error) {
+    console.error('❌ Erreur lors de la création des abonnements d\'exemple:', error);
+  }
+};
+
+/**
+ * Génère toutes les données d'exemple
+ */
+export const generateAllSampleData = async (userId: string) => {
+  console.log('🔄 Génération des données d\'exemple...');
+  await generateSampleTransactions(userId);
+  await generateSampleSubscriptions(userId);
+  console.log('✅ Toutes les données d\'exemple ont été générées !');
+};