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

Clonez le dépôt :

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

Installez les dépendances :

pnpm install

Lancez le serveur de développement :

pnpm dev

Ouvrez 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

Exportez vos transactions depuis votre banque au format OFX
Cliquez sur "Importer OFX" dans le tableau de bord
Sélectionnez votre fichier OFX
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é

Créez vos composants dans components/
Ajoutez les types nécessaires dans lib/types.ts
Ajoutez la logique métier dans lib/store.ts
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