Le tableau de bord admin

Ce que fait le back-office : produits, catégories, commandes, clients, page d'accueil, personnel, rôles et permissions, paramètres et notifications.

Pour le pack Full Stack

Pages

Chaque page existe en anglais sous /en et en arabe sous /ar. Le tableau de bord s'ouvre sur /en/dashboard, après la connexion sur /en/auth/login.

Élément de la barre latérale	Chemin	Rôle
Vue d'ensemble	`/en/dashboard`	La boutique en un coup d'œil, avec les dernières commandes. Les cartes de chiffre d'affaires, de ventes, d'objectif, de visiteurs, de conversion et de carte affichent des chiffres d'exemple tant que vous ne les reliez pas à vos propres données.
Assistant IA	`/en/dashboard/ai-assistant`	Une conversation qui répond aux questions sur la boutique et agit dessus dans la limite des permissions de l'administrateur.
Produits	`/en/dashboard/products/all`	La liste des produits, le formulaire produit avec le studio IA, et les produits supprimés.
Catégories	`/en/dashboard/categories/all`	La liste des catégories et les catégories supprimées.
Commandes	`/en/dashboard/orders`	Toutes les commandes, et la page de détail de chacune.
Utilisateurs	`/en/dashboard/users/all`	Les clients de la boutique, et ceux qui ont été supprimés.
Page d'accueil	`/en/dashboard/homepage`	Ce qu'affiche la page d'accueil de la boutique, section par section.
Gestion des administrateurs	`/en/dashboard/admins-management`	Les comptes du personnel.
Rôles des administrateurs	`/en/dashboard/admins-roles`	Les rôles et leurs permissions.
Paramètres	`/en/dashboard/settings`	Le profil et le mot de passe de l'administrateur connecté, et les paramètres de l'application.

La cloche de la barre supérieure contient les notifications, et le lien « Go to storefront » ouvre NEXT_PUBLIC_STOREFRONT_URL. Le tableau de bord n'est jamais indexé par les moteurs de recherche : chaque page porte une balise noindex et robots.txt interdit tous les chemins.

Ce que chaque administrateur peut faire

L'API vérifie une permission sur chaque route admin : un administrateur ne peut donc lire et modifier que ce que ses rôles autorisent, quoi qu'affiche l'écran.
Le tableau de bord masque ou désactive chaque bouton que son administrateur ne peut pas utiliser, comme Add Product sans products.create, et la page AI Assistant affiche « No Access » sans ai_chat.use.
Chaque élément reste dans la barre latérale pour chaque administrateur. Une page que l'administrateur ne peut pas lire affiche son état vide ou d'erreur.
Les changements de permissions parviennent immédiatement à un administrateur connecté, sans déconnexion.

Rôles et permissions

Produits

Partie du formulaire	Champs
Détails	Nom et descriptions courte et longue en anglais et en arabe (le nom anglais est obligatoire), slug, SKU (obligatoire), catégorie (obligatoire)
Prix et stock	Prix (obligatoire), prix barré, prix de revient, quantité en stock
Médias	Jusqu'à 12 images et vidéos (MP4, WebM, MOV), dans n'importe quel ordre, dont une principale, chacune avec un texte alternatif
Variantes	Type et valeur d'option (comme Taille et M, ou Couleur avec son code hexadécimal), SKU, ajustement de prix, stock, actif. Les SKU des variantes sont uniques.
Indicateurs et étiquettes	Actif, mis en avant, meilleure vente, et étiquettes libres

Un produit dont le prix barré est supérieur à son prix compte comme en promotion dans les filtres de la boutique.
Le formulaire enregistre un brouillon tout seul pendant que vous tapez. Rouvrez le produit et le tableau de bord vous propose de reprendre le brouillon ; enregistrer le produit le supprime.
La suppression déplace un produit dans Deleted, d'où il peut être restauré. La restauration demande la permission products.restore.
Les produits mis en avant et les meilleures ventes peuvent aussi être définis depuis leurs propres pages, /en/dashboard/products/featured et /en/dashboard/products/best-sellers, vers lesquelles la barre latérale ne renvoie pas.

Catégories

Une catégorie a un nom et une description en anglais et en arabe, une image, un slug, un ordre de tri et un interrupteur d'activation. La suppression la déplace dans Deleted, d'où elle peut être restaurée avec la permission categories.restore.

L'API enregistre un parent pour chaque catégorie et la liste peut filtrer par parent, mais le formulaire ne définit aucun parent : les catégories livrées forment un seul niveau.

Commandes

La liste permet de rechercher et de filtrer par statut de commande et statut de paiement, les plus récentes en premier. La page d'une commande affiche ses articles, ses totaux, le client, les adresses, la note, l'historique et le numéro de suivi, et se télécharge en fichier CSV.

Statut	Signification
`pending`	Passée. Une commande par carte reste à ce statut jusqu'à ce que Stripe confirme le paiement.
`confirmed`	Payée par carte, ou passée avec paiement à la livraison.
`processing`	En préparation.
`shipped`	En route. Ajoutez le numéro de suivi que verra le client.
`delivered`	Reçue. La commande est clôturée.
`cancelled`	Arrêtée. La commande est clôturée.

La page de la commande la fait avancer d'une étape à la fois, ou l'annule avant qu'elle ne soit clôturée. Le statut de paiement (non payée, payée, échouée, remboursée) est défini par le paiement, pas à la main. Modifier une commande demande orders.edit.

Clients

La liste Users permet de rechercher et de filtrer les clients par nom, e-mail, téléphone, pays, nom d'utilisateur, e-mail vérifié ou non, et dates.
Un administrateur peut créer un client, changer son mot de passe, marquer son e-mail comme vérifié ou non vérifié, et le supprimer ou le restaurer.
Les clients modifient leurs propres informations depuis leur compte sur la boutique ; le tableau de bord n'a pas de formulaire pour les modifier.

La page d'accueil de la boutique

Home Page choisit les produits et les textes affichés par chaque section de la page d'accueil de la boutique. Modifier une section demande products.edit.

Section	Éléments	Sur la boutique
Catégories	Ordre uniquement	La rangée des catégories, dans l'ordre défini ici
Piliers de style	Jusqu'à 3	Trois points forts de style
Bloc éditorial partagé	Jusqu'à 2	Un bloc éditorial en deux panneaux
Nouveautés	Jusqu'à 6	Les nouveaux arrivages ; vide, la section affiche les produits les plus récents
Meilleures ventes	Jusqu'à 8	La rangée des meilleures ventes
Coup de projecteur	Jusqu'à 6	La galerie mise en avant
Carrousel éditorial	Jusqu'à 5	Le carrousel de fin de page

L'éditeur Lux difference n'a pas de section sur la page d'accueil livrée de la boutique : ce que vous y définissez ne s'affiche donc pas.

Personnel, rôles et permissions

Admin Management liste le personnel et permet de créer, modifier et supprimer des comptes. Assign roles définit les rôles d'un administrateur.
Admin Roles permet de créer, renommer et supprimer des rôles. View permissions ouvre une grille de cases à cocher, regroupées par module, pour accorder chaque permission.
Les permissions sont nommées <module>.<action>, comme products.edit ou orders.view, et un administrateur détient toutes les permissions de tous ses rôles.
L'onglet profil de Settings enregistre via admins.edit : un administrateur en lecture seule ne peut donc pas modifier ses propres informations. L'onglet sécurité, pour changer de mot de passe, ne demande aucune permission.

Rôle de démonstration	Accorde
Super Admin	Toutes les permissions
Viewer	Toutes les permissions se terminant par `.view`, ce qui exclut l'assistant IA
Admin, Manager, Editor	Rien pour l'instant : cochez leurs permissions dans Admin Roles avant de les attribuer au personnel

Le seed connecte le Super Admin avec admin@example.com et donne le rôle Viewer aux onze autres comptes du personnel.

Toutes les permissions

Paramètres

Settings a trois onglets : Profile, Security et App settings. App settings est un tableau de paires clé-valeur, regroupées par catégorie, qu'un administrateur disposant de settings.edit peut modifier ou supprimer.

Catégorie	Clés de démonstration
payment	`stripe_fees_percentage`, `stripe_fixed_fee`, `platform_commission_percentage`
withdrawal	`minimum_withdrawal_amount`, `maximum_withdrawal_amount`, `withdrawal_processing_days`
email	`support_email`, `notification_email`
general	`site_name`, `site_tagline`, `maintenance_mode`
features	`referral_program_enabled`, `referral_bonus_percentage`

Ce sont des valeurs stockées que votre propre code peut lire. Rien dans la boutique ou l'API livrées ne les lit encore : en changer une, maintenance_mode compris, ne modifie donc aucun comportement à elle seule.

Notifications

Une nouvelle commande notifie chaque administrateur autorisé à voir les commandes, et une génération du studio IA terminée ou échouée notifie l'administrateur qui l'a lancée.
Elles arrivent en direct, avec un court message à l'écran, et restent dans la liste de la cloche jusqu'à ce qu'elles soient marquées comme lues ou supprimées.
La connexion en direct utilise NEXT_PUBLIC_WEBSOCKET_BASE_URL, l'adresse de l'API sans /api, et l'API ne l'accepte que depuis FRONTEND_URL. Sur vos propres domaines, définissez les deux.
Avec la boutique d'exemple, il n'y a pas de connexion en direct.

L'assistant IA et le studio IA

AI Assistant est une page à part dans la barre latérale. Sans clé Gemini sur l'API, elle affiche « No AI model is connected ».
Le studio IA est le formulaire produit lui-même, ouvert depuis Add Product ou depuis la ligne d'un produit. Il a deux modes, Assistant et Animate, et un bouton « Remove background ». Ses champs fonctionnent et s'enregistrent sans aucune clé ; tant que ses clés ne sont pas définies, il affiche « Listing writer not connected » ou « AI studio not connected ».

Fonctionnalités IA

La boutique d'exemple

Sans NEXT_PUBLIC_API_BASE_URL, le tableau de bord répond à chaque requête à partir d'une boutique d'exemple dans le navigateur et affiche une mention « Sample data », qui peut être fermée jusqu'au prochain rechargement.

Le formulaire de connexion est prérempli avec admin@example.com et Admin@123. N'importe quel e-mail valide avec un mot de passe d'au moins 6 caractères vous connecte en tant que Super Admin.
Les écritures sont réelles : créer un produit, modifier une catégorie, faire avancer une commande et accorder une permission sont conservés dans le navigateur et survivent à un rechargement.
L'assistant IA et les outils du studio IA sont indisponibles, et il n'y a pas de notifications en direct.
yarn remove:mock supprime la boutique d'exemple une fois votre API connectée, et garde public/mock-media/.

Mode démo

Inclus avec votre achat. Connectez-vous pour le lire, ou ouvrez-le dans votre téléchargement.

Faire tourner une démo publique : les comptes par visiteur, ce que les visiteurs peuvent modifier, et l'utilisation de leur propre clé.

Se connecter pour lire Voir le template

Comment le code du tableau de bord s'articule