246 lines
8.8 KiB
Markdown
246 lines
8.8 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
|
|
- **Base de données** : Prisma + SQLite
|
|
- **Authentification** : NextAuth.js v4
|
|
- **Hashing** : bcryptjs
|
|
|
|
## 📋 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. Configurez les variables d'environnement :
|
|
|
|
Créez un fichier `.env.local` à la racine du projet :
|
|
|
|
```bash
|
|
# NextAuth Configuration
|
|
NEXTAUTH_URL=http://localhost:3000
|
|
NEXTAUTH_SECRET=votre-secret-genere-ici
|
|
|
|
# Database
|
|
DATABASE_URL="file:./prisma/dev.db"
|
|
```
|
|
|
|
**Génération d'un secret sécurisé** :
|
|
|
|
```bash
|
|
openssl rand -base64 32
|
|
```
|
|
|
|
Ou en Node.js :
|
|
|
|
```bash
|
|
node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
|
|
```
|
|
|
|
4. Initialisez la base de données :
|
|
|
|
```bash
|
|
pnpm prisma db push
|
|
pnpm prisma generate
|
|
```
|
|
|
|
5. Créez le fichier de mot de passe initial :
|
|
|
|
Le fichier `prisma/password.json` sera créé automatiquement au premier lancement avec le mot de passe par défaut `admin`. Vous pouvez aussi le créer manuellement :
|
|
|
|
```bash
|
|
node -e "const bcrypt = require('bcryptjs'); bcrypt.hash('admin', 10).then(hash => { const data = { hash, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; require('fs').promises.writeFile('prisma/password.json', JSON.stringify(data, null, 2)).then(() => console.log('✅ password.json created')); });"
|
|
```
|
|
|
|
6. Lancez le serveur de développement :
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
7. Ouvrez [http://localhost:3000](http://localhost:3000) dans votre navigateur
|
|
|
|
8. Connectez-vous avec le mot de passe par défaut : `admin`
|
|
|
|
**⚠️ Important** : Changez le mot de passe par défaut dès la première connexion dans les paramètres !
|
|
|
|
## 📦 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
|
|
- `pnpm db:push` : Synchronise le schéma Prisma avec la base de données
|
|
- `pnpm db:migrate` : Crée une nouvelle migration
|
|
- `pnpm db:seed` : Exécute le script de seed
|
|
- `pnpm db:studio` : Ouvre Prisma Studio pour visualiser la base de données
|
|
|
|
## 📁 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
|
|
│ ├── types.ts # Types TypeScript
|
|
│ ├── utils.ts # Fonctions utilitaires
|
|
│ ├── prisma.ts # Client Prisma
|
|
│ └── auth.ts # Configuration NextAuth
|
|
├── services/ # Services métier
|
|
│ ├── banking.service.ts
|
|
│ ├── account.service.ts
|
|
│ ├── category.service.ts
|
|
│ ├── folder.service.ts
|
|
│ ├── transaction.service.ts
|
|
│ ├── backup.service.ts
|
|
│ └── auth.service.ts
|
|
├── prisma/ # Base de données
|
|
│ ├── schema.prisma # Schéma Prisma
|
|
│ ├── dev.db # Base de données SQLite (non versionné)
|
|
│ ├── password.json # Hash du mot de passe (non versionné)
|
|
│ └── backups/ # Sauvegardes automatiques (non versionné)
|
|
└── public/ # Assets statiques
|
|
```
|
|
|
|
## 💾 Stockage des données
|
|
|
|
L'application utilise **Prisma** avec **SQLite** pour stocker toutes les données dans un fichier local (`prisma/dev.db`). Les données sont sauvegardées automatiquement à chaque modification.
|
|
|
|
### Base de données
|
|
|
|
- **Fichier** : `prisma/dev.db` (SQLite)
|
|
- **Schéma** : Défini dans `prisma/schema.prisma`
|
|
- **Migrations** : Gérées avec Prisma Migrate
|
|
|
|
### Authentification
|
|
|
|
L'application est protégée par un **mot de passe global** stocké dans `prisma/password.json` (hashé avec bcrypt).
|
|
|
|
- **Mot de passe par défaut** : `admin` (à changer dès la première connexion)
|
|
- **Fichier** : `prisma/password.json` (créé automatiquement au premier lancement)
|
|
- **Changement de mot de passe** : Disponible dans les paramètres
|
|
|
|
**Note** : Les fichiers `prisma/password.json` et `prisma/dev.db` sont dans `.gitignore` et ne seront pas versionnés.
|
|
|
|
## 📥 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 sont stockées localement dans un fichier SQLite
|
|
- **Authentification** : Protection par mot de passe global (hashé avec bcrypt)
|
|
- **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)
|
|
- **Sauvegardes automatiques** : Système de sauvegarde automatique configurable (horaire, quotidienne, hebdomadaire, mensuelle)
|
|
|
|
### Variables d'environnement
|
|
|
|
Le fichier `.env.local` contient des secrets sensibles et ne doit **jamais** être versionné. En production, configurez ces variables dans votre plateforme de déploiement :
|
|
|
|
- `NEXTAUTH_SECRET` : Secret pour signer les tokens JWT (générez un secret sécurisé)
|
|
- `NEXTAUTH_URL` : URL de base de l'application
|
|
- `DATABASE_URL` : Chemin vers la base de données SQLite
|
|
|
|
## 🚧 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
|