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