fintrack/README.md

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 :

git clone <url-du-repo>
cd bank-account-management-app

2. Installez les dépendances :

pnpm install

3. Configurez les variables d'environnement :

Créez un fichier .env.local à la racine du projet :

# 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é :

openssl rand -base64 32

Ou en Node.js :

node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"

4. Initialisez la base de données :

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 :

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 :

pnpm dev

7. Ouvrez 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