Modèle de Tableau de Bord Financier

Tableau de bord moderne construit avec Next.js 16 et React 19, prenant en charge plusieurs langues, l'authentification et des widgets interactifs.

Fonctionnalités Clés

• Internationalisation : Support anglais & arabe avec next-intl
• Authentification : Auth personnalisée basée sur Redux avec tokens JWT
• Glisser-Déposer : Widgets interactifs avec @dnd-kit
• Graphiques & Analyses : Visualisation des données avec Recharts
• Mode Sombre/Clair : Bascule avec détection système
• Design Responsive : Fonctionne sur tous les appareils
• État Redux : Gestion centralisée de l'état

Stack Technique

Technologies Principales :

• Next.js 16 avec App Router & Turbopack
• React 19 avec fonctionnalités modernes
• TypeScript pour la sécurité de typage
• Tailwind CSS 4 (framework utilitaire)

Librairies Clés :

• UI : Radix UI, Lucide React, Framer Motion
• État : Redux Toolkit, React Redux
• Formulaires : React Hook Form, validation Zod
• Auth : bcryptjs, jsonwebtoken, localStorage
• i18n : next-intl avec routage
• Graphiques : Recharts, @tanstack/react-table
• DnD : Suite @dnd-kit (core, sortable, modifiers)

Aperçu des Composants

Widgets du Tableau de Bord :

• DashboardGrid - Layout principal avec widgets déplaçables
• BarChartWidget, StatisticsChart - Visualisation de données financières
• SmartInvestPanel - Suivi des investissements
• TransactionsPanel - Transactions récentes
• WorldMapWidget - Données géographiques
• CardSection - Gestion des cartes de crédit

Fonctionnalités de Base :

• Analytique : RevenueChart, CategoryChart
• Transactions : Tableau avec filtrage, dialogues d'ajout/export
• Authentification : LoginForm, boutons sociaux, protection de routes
• Layout : Header avec notifications, sidebar i18n
• Librairie UI : 30+ composants réutilisables

Démarrage

Installation :

1. Télécharger le fichier ZIP et extraire
2. Exécuter npm install ou yarn install
3. Exécuter npm run dev ou yarn dev
4. Ouvrir http://localhost:3000

Personnalisation

Système de Thème :

• Variables CSS pour thèmes clair/sombre
• Support RTL pour l'arabe
• Intégration Tailwind avec variantes de composants

Performance & Architecture

Optimisations :

• Next.js 16 avec Turbopack pour builds rapides
• Découpage automatique du code & lazy loading
• Optimisation SVG avec @svgr/webpack

Navigateurs Supportés : Chrome 90+, Firefox 88+, Safari 14+, Edge 90+