Modèle de Tableau de Bord Financier

Tableau de bord moderne construit avec Next.js 15 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 15.3.4 avec App Router & Turbopack
• React 19.0.0 avec fonctionnalités modernes
• TypeScript 5 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)
• Dates : react-day-picker, date-fns
• Utils : clsx, tailwind-merge, class-variance-authority

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 : 36+ composants réutilisables (boutons, formulaires, tables, etc.)

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

Fichiers Préconfigurés :

• next.config.js - Next.js avec Turbopack & gestion SVG
• tailwind.config.mjs - Configuration Tailwind CSS v4
• messages/ - Traductions anglais & arabe
• Tous les fichiers TypeScript, ESLint et configurations de composants

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

Ajout de Nouvelles Pages :

1. Créer src/app/[locale]/dashboard/votre-page/page.tsx
2. Ajouter navigation dans src/components/layout/Sidebar/config.tsx
3. Ajouter traductions dans messages/en.json et messages/ar.json

Internationalisation :

• Mettre à jour src/i18n/routing.ts pour nouvelles langues
• Créer fichiers de messages dans le dossier messages/

Performance & Architecture

Optimisations :

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

Structure du Projet :

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

Scripts : dev, build, start, lint, type-check, build:analyze