158 lines
5.5 KiB
Markdown
158 lines
5.5 KiB
Markdown
# FinTrack - Gestion de Compte Bancaire
|
|
|
|
Application web moderne de gestion personnelle de comptes bancaires avec import de fichiers OFX, catégorisation automatique des transactions et visualisations statistiques.
|
|
|
|
## 🚀 Fonctionnalités
|
|
|
|
- **Gestion de comptes** : Ajout, modification et organisation de vos comptes bancaires (chèques, épargne, cartes de crédit)
|
|
- **Import OFX** : Import automatique de transactions depuis des fichiers OFX exportés par votre banque
|
|
- **Catégorisation automatique** : Catégorisation intelligente des transactions basée sur des mots-clés
|
|
- **Organisation par dossiers** : Structurez vos comptes avec des dossiers personnalisables
|
|
- **Gestion de catégories** : Créez et gérez vos catégories de dépenses avec couleurs et icônes
|
|
- **Tableau de bord** : Vue d'ensemble avec cartes récapitulatives, transactions récentes et répartition par catégorie
|
|
- **Statistiques** : Visualisations graphiques de vos finances
|
|
- **Thème sombre/clair** : Support du mode sombre et clair
|
|
- **Stockage local** : Toutes vos données sont stockées localement dans le navigateur (localStorage)
|
|
|
|
## 🛠️ Technologies
|
|
|
|
- **Framework** : Next.js 16 (App Router)
|
|
- **UI** : React 19, TypeScript
|
|
- **Styling** : Tailwind CSS 4, shadcn/ui
|
|
- **Composants** : Radix UI
|
|
- **Graphiques** : Recharts
|
|
- **Formulaires** : React Hook Form + Zod
|
|
- **Thème** : next-themes
|
|
|
|
## 📋 Prérequis
|
|
|
|
- Node.js 18+
|
|
- pnpm (recommandé) ou npm/yarn
|
|
|
|
## 🔧 Installation
|
|
|
|
1. Clonez le dépôt :
|
|
|
|
```bash
|
|
git clone <url-du-repo>
|
|
cd bank-account-management-app
|
|
```
|
|
|
|
2. Installez les dépendances :
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
3. Lancez le serveur de développement :
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
4. Ouvrez [http://localhost:3000](http://localhost:3000) dans votre navigateur
|
|
|
|
## 📦 Scripts disponibles
|
|
|
|
- `pnpm dev` : Lance le serveur de développement
|
|
- `pnpm build` : Compile l'application pour la production
|
|
- `pnpm start` : Lance le serveur de production
|
|
- `pnpm lint` : Vérifie le code avec ESLint
|
|
|
|
## 📁 Structure du projet
|
|
|
|
```
|
|
├── app/ # Pages Next.js (App Router)
|
|
│ ├── accounts/ # Page de gestion des comptes
|
|
│ ├── categories/ # Page de gestion des catégories
|
|
│ ├── folders/ # Page d'organisation par dossiers
|
|
│ ├── settings/ # Page des paramètres
|
|
│ ├── statistics/ # Page des statistiques
|
|
│ └── transactions/ # Page de gestion des transactions
|
|
├── components/ # Composants React
|
|
│ ├── dashboard/ # Composants du tableau de bord
|
|
│ ├── import/ # Composants d'import OFX
|
|
│ └── ui/ # Composants UI réutilisables (shadcn/ui)
|
|
├── lib/ # Utilitaires et logique métier
|
|
│ ├── hooks.ts # Hooks personnalisés
|
|
│ ├── ofx-parser.tsx # Parser de fichiers OFX
|
|
│ ├── store.ts # Gestion du stockage local
|
|
│ ├── types.ts # Types TypeScript
|
|
│ └── utils.ts # Fonctions utilitaires
|
|
└── public/ # Assets statiques
|
|
```
|
|
|
|
## 💾 Stockage des données
|
|
|
|
L'application utilise `localStorage` pour stocker toutes les données localement dans le navigateur. Les données sont sauvegardées automatiquement à chaque modification.
|
|
|
|
**Note** : Les données sont stockées uniquement dans votre navigateur. Si vous supprimez les données du navigateur ou changez d'appareil, vous devrez réimporter vos fichiers OFX.
|
|
|
|
## 📥 Import de fichiers OFX
|
|
|
|
1. Exportez vos transactions depuis votre banque au format OFX
|
|
2. Cliquez sur "Importer OFX" dans le tableau de bord
|
|
3. Sélectionnez votre fichier OFX
|
|
4. Les transactions sont automatiquement importées et catégorisées
|
|
|
|
L'application détecte automatiquement les doublons basés sur l'ID unique (FITID) de chaque transaction.
|
|
|
|
## 🎨 Personnalisation
|
|
|
|
### Catégories par défaut
|
|
|
|
L'application inclut des catégories pré-configurées avec des mots-clés pour la catégorisation automatique :
|
|
|
|
- Alimentation
|
|
- Transport
|
|
- Logement
|
|
- Loisirs
|
|
- Santé
|
|
- Revenus
|
|
- Abonnements
|
|
- Shopping
|
|
|
|
Vous pouvez modifier, ajouter ou supprimer des catégories selon vos besoins.
|
|
|
|
### Thème
|
|
|
|
Le thème sombre/clair peut être changé dans les paramètres. L'application détecte automatiquement les préférences de votre système.
|
|
|
|
## 🔒 Sécurité et confidentialité
|
|
|
|
- **100% local** : Toutes vos données restent dans votre navigateur
|
|
- **Aucune connexion externe** : Aucune donnée n'est envoyée à des serveurs externes
|
|
- **Pas de tracking** : Aucun service d'analytics tiers (sauf Vercel Analytics optionnel)
|
|
|
|
## 🚧 Développement
|
|
|
|
### Ajouter une nouvelle fonctionnalité
|
|
|
|
1. Créez vos composants dans `components/`
|
|
2. Ajoutez les types nécessaires dans `lib/types.ts`
|
|
3. Ajoutez la logique métier dans `lib/store.ts`
|
|
4. Créez la page dans `app/`
|
|
|
|
### Structure des données
|
|
|
|
Les données sont structurées comme suit :
|
|
|
|
- **Accounts** : Comptes bancaires avec solde et métadonnées
|
|
- **Transactions** : Transactions avec montant, date, description, catégorie
|
|
- **Folders** : Dossiers pour organiser les comptes
|
|
- **Categories** : Catégories avec mots-clés pour auto-catégorisation
|
|
- **CategoryRules** : Règles avancées de catégorisation (futur)
|
|
|
|
## 📝 Licence
|
|
|
|
Ce projet est privé et destiné à un usage personnel.
|
|
|
|
## 🤝 Contribution
|
|
|
|
Ce projet est en développement actif. Les suggestions et améliorations sont les bienvenues.
|
|
|
|
---
|
|
|
|
Développé avec ❤️ en utilisant Next.js et React
|
|
|