💰 Application de Suivi Budgétaire

Application web légère et intuitive pour suivre vos dépenses avec extraction automatique de données depuis vos factures et virements grâce à l'IA Claude Vision.

🌟 Fonctionnalités

✅ Fonctionnalités de base

Ajouter des dépenses : montant, description, catégorie, date
Supprimer des dépenses : avec confirmation
Catégorisation : 5 catégories prédéfinies
- 🍔 Alimentation
- 🚗 Transport
- 🎮 Loisirs
- 🏥 Santé
- 💼 Autre
Persistance des données : localStorage (données sauvegardées dans le navigateur)
Filtrage : par catégorie
Statistiques : graphique Chart.js avec répartition par catégorie

🚀 Fonctionnalité principale : Extraction automatique

Upload de documents : glisser-déposer ou sélection de fichiers
Formats supportés :
- Images : JPG, PNG, WEBP
- Documents : PDF
Extraction IA : Claude Vision API extrait automatiquement :
- Montant (€)
- Description
- Date
- Catégorie (suggestion intelligente)
Validation utilisateur : les données extraites pré-remplissent le formulaire que vous pouvez modifier avant validation

🛠️ Stack Technologique

Backend

Framework : FastAPI (Python)
IA : Claude Sonnet 4.5 Vision API (via Emergent LLM Key)
Traitement documents : PyPDF2, Pillow
API : RESTful endpoints

Frontend

Framework : React 18 + Vite
Styling : Tailwind CSS
Graphiques : Chart.js + react-chartjs-2
Stockage : localStorage (pas de base de données)

Infrastructure

Orchestration : Supervisord
Backend URL : http://localhost:8001
Frontend URL : http://localhost:3000

📦 Installation et Lancement

Prérequis

Python 3.11+
Node.js 18+
Yarn

1. Installation des dépendances

Backend :

cd /app/backend
pip install -r requirements.txt

Frontend :

cd /app/frontend
yarn install

2. Configuration

Les fichiers .env sont déjà configurés avec la clé Emergent LLM :

Backend (/app/backend/.env) :

EMERGENT_LLM_KEY=sk-emergent-fA690296619B525441

Frontend (/app/frontend/.env) :

REACT_APP_BACKEND_URL=http://localhost:8001

3. Lancement de l'application

Option A : Avec Supervisord (automatique)

supervisord -c /app/supervisord.conf

Pour vérifier le status :

supervisorctl -c /app/supervisord.conf status

Pour redémarrer un service :

supervisorctl -c /app/supervisord.conf restart backend
supervisorctl -c /app/supervisord.conf restart frontend

Option B : Lancement manuel

Backend :

cd /app/backend
python server.py

Frontend :

cd /app/frontend
yarn dev

4. Accéder à l'application

Ouvrez votre navigateur à l'adresse : http://localhost:3000

📖 Guide d'utilisation

Ajouter une dépense manuellement

Remplissez le formulaire "Ajouter manuellement"
Saisissez le montant, la description, choisissez la catégorie et la date
Cliquez sur "➕ Ajouter la dépense"

Scanner une facture (Extraction automatique)

Cliquez sur "📷 Scanner une facture"
Glissez-déposez votre image/PDF ou cliquez pour sélectionner
Formats acceptés : JPG, PNG, WEBP, PDF (max 5MB)
Cliquez sur "🔍 Extraire les données"
L'IA analyse le document et pré-remplit le formulaire
Vérifiez/modifiez les données si nécessaire
Cliquez sur "➕ Ajouter la dépense"

Filtrer les dépenses

Utilisez les boutons de filtre par catégorie pour afficher uniquement certaines dépenses
Cliquez sur "Toutes" pour voir l'ensemble des dépenses

Visualiser les statistiques

Le graphique Chart.js affiche la répartition des dépenses par catégorie
Survolez les barres pour voir les détails (montant total et nombre de dépenses)

Supprimer une dépense

Cliquez sur l'icône poubelle 🗑️ à droite de chaque dépense
Confirmez la suppression

🔧 Architecture de l'API Backend

Endpoints

GET `/api/health`

Description : Vérification du status du backend

Réponse :

{
  "status": "ok",
  "message": "Backend de suivi budgétaire actif"
}

POST `/api/extract`

Description : Extraction des données d'une facture ou d'un virement

Paramètres :

file (multipart/form-data) : fichier image ou PDF

Réponse :

{
  "amount": 45.99,
  "description": "Courses Carrefour",
  "date": "2025-02-18",
  "category": "alimentation"
}

Erreurs possibles :

400 : Format de fichier non supporté ou fichier trop volumineux
500 : Erreur lors de l'extraction

🧪 Tests

Test du backend

curl http://localhost:8001/api/health

Réponse attendue :

{"status":"ok","message":"Backend de suivi budgétaire actif"}

Test de l'extraction (avec une image de facture)

curl -X POST http://localhost:8001/api/extract \
  -F "file=@/chemin/vers/votre/facture.jpg"

📂 Structure du projet

/app
├── backend/
│   ├── server.py              # Application FastAPI principale
│   ├── requirements.txt       # Dépendances Python
│   └── .env                   # Variables d'environnement
├── frontend/
│   ├── src/
│   │   ├── App.jsx            # Composant principal
│   │   ├── index.jsx          # Point d'entrée React
│   │   ├── index.css          # Styles globaux + Tailwind
│   │   ├── App.css            # Styles App
│   │   └── components/
│   │       ├── ExpenseForm.jsx       # Formulaire d'ajout
│   │       ├── ExpenseList.jsx       # Liste des dépenses
│   │       ├── DocumentUploader.jsx  # Upload et extraction
│   │       └── StatsChart.jsx        # Graphique Chart.js
│   ├── package.json           # Dépendances Node.js
│   ├── vite.config.js         # Configuration Vite
│   ├── tailwind.config.js     # Configuration Tailwind
│   └── .env                   # Variables d'environnement
├── supervisord.conf           # Configuration Supervisord
└── README.md                  # Ce fichier

🎨 Personnalisation

Ajouter une catégorie

Modifiez le tableau categories dans /app/frontend/src/App.jsx
Ajoutez la couleur dans getCategoryColor() de /app/frontend/src/components/ExpenseList.jsx
Ajoutez l'icône dans getCategoryIcon() du même fichier
Ajoutez la couleur Chart.js dans /app/frontend/src/components/StatsChart.jsx

Modifier le modèle d'IA

Le modèle Claude est configuré dans /app/backend/server.py :

chat.with_model("anthropic", "claude-sonnet-4-5-20250929")

🐛 Dépannage

Le backend ne démarre pas

# Vérifier les logs
tail -n 50 /var/log/supervisor/backend.err.log

# Vérifier si le port 8001 est disponible
lsof -i :8001

# Redémarrer le backend
supervisorctl -c /app/supervisord.conf restart backend

Le frontend ne charge pas

# Vérifier les logs
tail -n 50 /var/log/supervisor/frontend.log

# Vérifier si le port 3000 est disponible
lsof -i :3000

# Redémarrer le frontend
supervisorctl -c /app/supervisord.conf restart frontend

L'extraction ne fonctionne pas

Vérifiez que la clé EMERGENT_LLM_KEY est bien dans /app/backend/.env
Vérifiez que l'image est bien lisible (pas trop floue)
Vérifiez la taille du fichier (max 5MB)
Consultez les logs backend pour plus de détails

Les données ne persistent pas

Les données sont sauvegardées dans le localStorage du navigateur
Si vous changez de navigateur ou effacez les cookies, les données seront perdues
Pour une persistance permanente, il faudrait implémenter une base de données (MongoDB, PostgreSQL, etc.)

💡 Améliorations futures possibles

Export des données en CSV/Excel
Budget mensuel avec alertes
Authentification multi-utilisateurs
Base de données persistante (MongoDB, PostgreSQL)
Mode sombre
Graphiques plus avancés (évolution temporelle, camembert)
Récurrence des dépenses
Recherche avancée
Application mobile (React Native)

📄 Licence

Ce projet est un prototype à usage personnel.

👨‍💻 Développement

Développé avec ❤️ par l'équipe Emergent AI Utilise Claude Vision API pour l'extraction intelligente de données

Note : Cette application est conçue pour un usage local et personnel. Les données sont stockées uniquement dans votre navigateur (localStorage).

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
.emergent		.emergent
backend		backend
frontend		frontend
test_reports		test_reports
.gitconfig		.gitconfig
.gitignore		.gitignore
DEPLOYMENT.md		DEPLOYMENT.md
README.md		README.md
TESTING_GUIDE.md		TESTING_GUIDE.md
backend_test.py		backend_test.py
image_testing.md		image_testing.md
supervisord.conf		supervisord.conf
supervisord.pid		supervisord.pid

Folders and files

Latest commit

History

Repository files navigation

💰 Application de Suivi Budgétaire

🌟 Fonctionnalités

✅ Fonctionnalités de base

🚀 Fonctionnalité principale : Extraction automatique

🛠️ Stack Technologique

Backend

Frontend

Infrastructure

📦 Installation et Lancement

Prérequis

1. Installation des dépendances

2. Configuration

3. Lancement de l'application

4. Accéder à l'application

📖 Guide d'utilisation

Ajouter une dépense manuellement

Scanner une facture (Extraction automatique)

Filtrer les dépenses

Visualiser les statistiques

Supprimer une dépense

🔧 Architecture de l'API Backend

Endpoints

GET /api/health

POST /api/extract

🧪 Tests

Test du backend

Test de l'extraction (avec une image de facture)

📂 Structure du projet

🎨 Personnalisation

Ajouter une catégorie

Modifier le modèle d'IA

🐛 Dépannage

Le backend ne démarre pas

Le frontend ne charge pas

L'extraction ne fonctionne pas

Les données ne persistent pas

💡 Améliorations futures possibles

📄 Licence

👨‍💻 Développement

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

GET `/api/health`

POST `/api/extract`

Packages