Le tableau de bord des réservations
Ce que fait le tableau de bord de l'équipe de l'hôte : la vue d'ensemble, les pages de la barre latérale, les paramètres de la société, les notifications et la connexion.
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. Chaque élément de la barre latérale n'apparaît que si l'admin connecté détient sa permission.
| Élément de la barre latérale | Chemin | Permission | Rôle |
|---|---|---|---|
| Vue d'ensemble | /en/dashboard | overview.view | L'occupation et le revenu du mois, les arrivées et départs du jour, et ce qui attend. |
| Calendrier | /en/dashboard/calendar | calendar.view | Un mois de nuits, une ligne par séjour, avec la boîte de dialogue des dates bloquées et le registre des blocages. |
| Réservations | /en/dashboard/bookings | bookings.view | Les réservations avec onglets de statut, recherche et filtres, et une page par réservation. |
| Séjours | /en/dashboard/stays | stays.view | Les séjours avec onglets de statut, recherche et filtres, et l'éditeur de séjour. |
| Demandes | /en/dashboard/inquiries | inquiries.view | Les questions des voyageurs envoyées depuis le site, avec un panneau de détail. |
| Avis | /en/dashboard/reviews | reviews.view | Ce que les voyageurs ont écrit après un séjour ; publiez ou masquez chacun. |
| Assistant IA | /en/dashboard/ai-assistant | ai_chat.use | Un chat qui répond à partir des données de la société et agit dessus. |
| Paramètres | /en/dashboard/settings | Aucune (chaque onglet a la sienne) | Société, Page d'accueil, Destinations, Paiements, Profil et Sécurité. |
| Gestion des admins | /en/dashboard/admins-management | admins.view | Les comptes de l'équipe et leurs rôles. |
| Rôles des admins | /en/dashboard/admins-roles | roles.view | Rôles et permissions. |
Une palette de recherche dans la barre du haut trouve les pages, séjours, réservations et demandes, et la cloche contient les notifications. Une page ouverte par son adresse sans la permission affiche à la place « You do not have access to this page. », le même refus que donne l'API.
La vue d'ensemble
- L'occupation, le revenu et les réservations du mois, les arrivées et départs du jour, et les voyageurs présents, dans le fuseau horaire de la société.
- Le revenu, les réservations et l'occupation mois par mois sur les douze derniers mois, les meilleurs séjours, les réservations par statut et les pays des voyageurs.
- Les arrivées et départs du jour, les réservations en attente, les sept dernières réservations, les derniers avis et les demandes ouvertes, chacun renvoyant à sa page.
- Chaque chiffre est calculé à partir des réservations quand la page le demande, il n'est donc jamais en décalage avec le calendrier.
Réservations
- Un filtre pour chaque statut avec son total, une recherche par référence ou nom du voyageur, et une plage de dates d'arrivée, les plus récentes d'abord, dix par page.
- Une page par réservation, sur
/en/dashboard/bookings/<reference>: le séjour, le voyageur, le détail du prix, le paiement, la chronologie, une note interne que le voyageur ne voit jamais, et les étapes possibles : Confirm, Check in, Complete et Cancel. - Une étape que la réservation ne peut pas franchir maintenant s'affiche désactivée avec sa raison, par exemple une réservation par carte dont le paiement n'est pas arrivé, au lieu d'être masquée.
Paramètres
Les paramètres ont six onglets. Profil et Sécurité appartiennent à l'admin connecté ; pour les autres, il faut une permission pour les voir et une autre pour enregistrer.
| Onglet | Permission | Ce qu'elle définit |
|---|---|---|
| Société | settings.view, settings.edit pour enregistrer | Le nom, le slogan et la description de la société dans les deux langues, l'e-mail de contact, le téléphone et la ligne d'adresse, la devise (USD), le fuseau horaire (America/New_York), les heures d'arrivée et de départ par défaut sur une grille d'une demi-heure, et la signature des messages aux voyageurs. |
| Page d'accueil | settings.view, settings.edit pour enregistrer | Le séjour du hero du site, les quatre séjours en vedette, dans l'ordre (séjours publiés seulement), et les questions auxquelles répond la page d'accueil, dans les deux langues. |
| Destinations | destinations.view, et créer, modifier ou supprimer | Le nom, le slogan et la description de chaque zone dans les deux langues, le slug, la photographie de couverture, l'ordre de tri, et si elle est affichée. Une destination qui a encore des séjours ne peut pas être supprimée. |
| Paiements | settings.view, settings.edit pour enregistrer | Si Stripe et PayPal sont configurés sur l'API et si leurs clés sont de test ou réelles, si le simulateur est utilisé, l'interrupteur du paiement à l'arrivée, et la politique d'annulation que lisent les voyageurs. |
| Profil | Aucune : chaque admin enregistre le sien | La photo, le prénom et le nom, l'e-mail et le téléphone de l'admin connecté. Le mot de passe se change sous Sécurité, pas ici. |
| Sécurité | Aucune | Le mot de passe de l'admin connecté. |
Les clés de paiement elles-mêmes ne sont jamais affichées ni modifiées ici : elles vivent dans le .env de l'API. Le logo de la marque ne s'envoie pas non plus ici : il vient des fichiers de marque du projet.
Notifications
- Chaque admin qui peut voir les réservations est prévenu quand une réservation est payée, que ce soit le webhook de Stripe ou de PayPal, la capture PayPal ou le simulateur qui l'ait réglée ; quand une réservation à payer à l'arrivée attend que l'hôte la confirme ; et quand une réservation est annulée, dans une phrase qui dit si c'est le voyageur, l'équipe ou une retenue impayée expirée qui y a mis fin. Une nouvelle question prévient chaque admin qui peut voir les demandes, et un nouvel avis chaque admin qui peut voir les avis.
- Elles arrivent en direct, avec un court message à l'écran, et la cloche liste les 30 plus récentes. Chacune est conservée 30 jours, jusqu'à ce qu'elle soit lue ou supprimée.
- Rien n'est envoyé par e-mail : le template n'a pas de service d'e-mail.
- La connexion en direct utilise
NEXT_PUBLIC_WEBSOCKET_BASE_URL, l'adresse de l'API sans/api, et l'API l'accepte depuisFRONTEND_URL. Un rechargement affiche toujours les dernières lignes ; seules les mises à jour en direct dépendent de la connexion.
Connexion
- Le formulaire de connexion démarre vide. Remember this device garde la session après la fermeture du navigateur, jusqu'à l'expiration du jeton de l'API (sept jours par défaut) ; décochez-le et la session se termine avec le navigateur ou l'onglet.
- Un mauvais e-mail et un mauvais mot de passe donnent le même message, « Invalid email or password », si bien que le formulaire ne dit jamais à personne quelles adresses ont un compte. Après dix tentatives échouées en quinze minutes depuis une même adresse, le formulaire demande de réessayer plus tard.
- Quand l'API refuse une session (un jeton expiré ou révoqué), le tableau de bord se déconnecte et ouvre la page de connexion. Un changement des rôles d'un admin l'atteint pendant qu'il est connecté.
- La page de connexion montre combien de séjours la société publie et combien de destinations elle affiche, lus depuis les routes publiques
GET /api/staysetGET /api/destinationsde l'API, à côté des langues que fournit le tableau de bord ; tant que l'API est injoignable, elle ne montre que les langues. - L'en-tête de la page porte le logotype, « Back to website », le sélecteur de langue et le sélecteur de thème System, Light et Dark ; son pied porte la ligne de copyright et un lien vers la page de confidentialité du site. Le logotype, « Back to website » et le lien de confidentialité ouvrent
NEXT_PUBLIC_SITE_URL, et tant qu'elle est vide les deux liens sont omis et le logotype ne mène nulle part.
Comment le code du tableau de bord s'articule
Inclus avec votre achat. Connectez-vous pour le lire, ou ouvrez-le dans votre téléchargement.
La structure du code, et les recettes pour ajouter une page, une traduction et un service API.