Ce qu'est le template
Un tableau de bord financier pour une banque, une fintech ou une application d'argent. C'est une seule application Next.js, sans base de données ni back end : chaque chiffre, chaque carte et chaque transaction est une donnée d'exemple dans le code, et la connexion est un simple espace réservé qui s'exécute dans le navigateur. Rien n'est à configurer avant le premier lancement.
Il comprend une page de connexion, une vue d'ensemble, des analyses, les transactions, les cartes, les paramètres, et une page qui présente chaque composant d'interface réutilisable avec des exemples en direct. Il existe en anglais et en arabe, de droite à gauche, en mode sombre et en mode clair.
Un aperçu du tableau de bord
Technologies utilisées
| Technologie | Son rôle ici |
|---|---|
| Next.js 16 (App Router) | Le framework, les pages, les métadonnées et le serveur de production |
| React 19 et TypeScript | Tous les composants et fichiers source |
| Tailwind CSS 4 | Tout le style, avec des variables de couleur pour les modes clair et sombre |
| next-intl | Les textes en anglais et en arabe, et la langue dans chaque adresse |
| Redux Toolkit | L'utilisateur connecté et l'état de la connexion |
| React Hook Form et Zod | Les formulaires de connexion et de virement rapide, et leurs vérifications |
| Recharts et react-simple-maps | Les graphiques et la carte du monde |
| TanStack Table et dnd-kit | Le tableau des transactions, et les cartes de statistiques que vous pouvez déplacer |
| Radix UI, Lucide et Tabler Icons | Les menus, boîtes de dialogue et onglets accessibles, et les icônes |
Chaque dépendance est fixée à une version exacte dans package.json, et yarn.lock est inclus : votre installation obtient donc les mêmes versions que celles avec lesquelles le template a été testé.
Contenu du téléchargement
Le ZIP s'extrait dans un dossier nommé dashboard-template-1 :
| Chemin | Description |
|---|---|
src/ | L'application : les pages, la barre latérale et l'en-tête, les graphiques et widgets, la connexion et la configuration des langues |
messages/ | Tous les textes visibles, en anglais et en arabe |
public/ | Le logo, les visuels des cartes et les avatars d'exemple |
Dockerfile, .dockerignore | Construit l'application dans une image qui la sert sur le port 3030 |
.env.example | Les paramètres optionnels, avec leurs valeurs par défaut |
README.md | Le guide d'installation et de personnalisation |
LICENSE.md | Votre licence commerciale |
package.json, yarn.lock, .yarnrc.yml | Les dépendances et la configuration de Yarn 4 |
À savoir avant de construire dessus
- La connexion est un espace réservé : un seul compte, vérifié dans le navigateur. Connectez-la à votre propre API avant la mise en ligne.
- Les chiffres, les cartes, les personnes et les transactions sont des données d'exemple à remplacer par les vôtres, ou par les données de votre API.
- Les boutons qui modifieraient des données sur un serveur, comme envoyer un virement ou ajouter une transaction, n'enregistrent rien tant que vous ne les avez pas connectés.
- Il démarre en mode sombre, avec une couleur de marque orange. Quatre thèmes de couleur sont fournis, et vous en choisissez un en une seule ligne.
Le tableau de bord est fourni en anglais et en arabe. Chaque adresse commence par sa langue, comme /en/dashboard ou /ar/dashboard, et les pages en arabe sont disposées de droite à gauche.
Sous Windows, utilisez PowerShell ou Git Bash pour les commandes de ces guides.