Documentation Technique Complète

L'application TTR Gestion est construite sur une pile technologique moderne, cohérente et résolument tournée vers la performance, la sécurité et la maintenabilité. Les choix architecturaux sont excellents et démontrent une compréhension approfondie des meilleures pratiques actuelles du développement web. L'ensemble constitue une base solide et professionnelle, prête à évoluer.

1. Next.js (avec React) - Le Cerveau de l'Application

Où et Pourquoi ?

Next.js est le framework principal qui orchestre toute l'application. Il est utilisé pour le routing (la gestion des pages), le rendu des composants et la structure globale du projet. Le choix de Next.js est particulièrement judicieux car il combine le meilleur de React (pour construire des interfaces utilisateur interactives) avec des optimisations de premier ordre comme les Server Components (pour des temps de chargement plus rapides) et un système de routing basé sur les fichiers (App Router) qui simplifie l'organisation du code.

Risques et Mitigations

• Risque : Une gestion de l'état complexe peut survenir dans les grandes applications.
• Mitigation (Notre Force) : Ce risque est parfaitement maîtrisé ici grâce à l'utilisation intelligente des React Contexts (via AuthProvider et LoadingProvider). L'état global (utilisateur connecté, profil de l'entreprise, état de chargement) est centralisé, accessible partout sans complexité, et évite le recours à des bibliothèques de gestion d'état plus lourdes et superflues pour ce projet.

2. TypeScript - Le Garde-Fou du Code

Où et Pourquoi ?

TypeScript est utilisé sur l'intégralité du projet. C'est un choix exemplaire qui élève la qualité et la fiabilité du code. En ajoutant un typage strict, il permet de détecter une grande partie des erreurs potentielles dès la phase de développement, avant même que le code ne soit exécuté. Les types partagés (dans src/lib/types.ts) assurent une cohérence parfaite des données entre le frontend, le backend et même l'IA.

Risques et Mitigations

• Risque : Une légère augmentation du temps de développement initial pour définir les types.
• Mitigation (Un Investissement Rentable) : Ce "risque" est en réalité un investissement. Le temps passé à typer les données est largement regagné par la suite grâce à une maintenance simplifiée, des bugs moins nombreux en production et une collaboration beaucoup plus facile entre développeurs.

3. Tailwind CSS & ShadCN UI - Le Duo Esthétique

Où et Pourquoi ?

Cette combinaison est responsable de l'ensemble de l'interface utilisateur.

• Tailwind CSS est utilisé pour le style de bas niveau, offrant une flexibilité totale pour créer des designs sur mesure directement dans le HTML.
• ShadCN UI est une collection de composants React (boutons, formulaires, cartes, etc.) magnifiquement conçus, accessibles et personnalisables, construits sur Tailwind CSS. C'est le meilleur choix pour obtenir rapidement une interface professionnelle, cohérente et facile à maintenir. Le thème est centralisé dans src/app/globals.css, ce qui permet de changer l'apparence de toute l'application très facilement.

Risques et Mitigations

• Risque : Aucun risque technique notable. C'est une combinaison standard de l'industrie, largement adoptée pour sa robustesse.
• Conclusion : L'interface est l'un des points forts de l'application, alliant esthétique moderne et fondations techniques solides.

4. Firebase - Le Pilier Backend

Où et Pourquoi ?

Firebase sert de backend complet et sécurisé pour l'application.

• Firebase Authentication : Gère l'inscription et la connexion des utilisateurs de manière sécurisée.
• Realtime Database : Utilisée comme base de données principale pour stocker toutes les données de l'entreprise (prestations, clients, dépenses, etc.). Sa nature en temps réel pourrait être exploitée à l'avenir pour des fonctionnalités collaboratives.
• Security Rules (database.rules.json) : C'est le cœur de la sécurité. Ces règles, écrites en JSON, définissent précisément qui a le droit de lire ou d'écrire quelles données. Elles sont exécutées directement sur les serveurs de Google, rendant la base de données inviolable depuis le client.

Risques et Mitigations

• Risque : Des règles de sécurité mal configurées pourraient exposer des données.
• Mitigation (Notre Expertise) : Les règles de sécurité de l'application sont extrêmement bien écrites. Elles sont granulaires, précises et prennent en compte les rôles des utilisateurs (admin vs employé), l'appartenance à une entreprise, et même le statut de l'abonnement. C'est une implémentation de niveau professionnel qui garantit une excellente sécurité des données.

5. Genkit & OpenRouter - L'Intelligence Artificielle

Où et Pourquoi ?

La fonctionnalité d'assistant IA (TRIX Business) et la génération d'images pour les produits reposent sur cette pile.

• Genkit : C'est un framework de Google pour organiser et structurer les appels aux modèles d'IA. Il est utilisé pour définir les flux (flows), les entrées et les sorties attendues.
• OpenRouter (runAssistant.ts) : Au lieu de se lier à un seul fournisseur comme OpenAI, l'application utilise OpenRouter. C'est un choix très stratégique qui permet de choisir le meilleur modèle (comme Mistral) pour la tâche, en optimisant les coûts et la performance.

Risques et Mitigations

• Risque : Dépendance à des services tiers (OpenRouter, fournisseurs de modèles).
• Mitigation : Le risque est faible et bien géré. L'architecture via OpenRouter permet de changer de modèle d'IA très facilement si un fournisseur devient indisponible ou trop cher, sans avoir à réécrire le code principal de l'assistant. C'est une approche flexible et pérenne.

6. React Hook Form & Zod - La Gestion de Formulaires

Où et Pourquoi ?

Ce duo est utilisé dans tous les formulaires de l'application (ajout de client, nouvelle dépense, etc.).

• React Hook Form est une bibliothèque performante pour gérer l'état des formulaires.
• Zod est utilisé pour définir des schémas de validation. Il permet de s'assurer que les données envoyées (ex: un email doit être un email valide, un montant doit être un nombre positif) sont correctes avant même de les envoyer au backend.

Risques et Mitigations

• Risque : Aucun. C'est la meilleure pratique actuelle pour la gestion de formulaires dans l'écosystème React. Cela garantit la robustesse, la performance et une excellente expérience utilisateur avec des messages d'erreur clairs.

1. La Page de Connexion (/login)

Rôle de la fonctionnalité

La page de connexion est le portail d'accès principal pour tous les utilisateurs existants. Elle est conçue pour être flexible et sécurisée, en distinguant clairement le flux de connexion pour les administrateurs (généralement les propriétaires d'entreprise) et les employés.

• Administrateurs : Se connectent avec leur email et mot de passe.
• Employés : Se connectent avec leur numéro de téléphone et un mot de passe qu'ils ont défini lors de leur inscription via un lien d'invitation.

Comment ça fonctionne dans le code ?

La page de connexion est structurée à l'aide de plusieurs composants qui interagissent avec le fournisseur d'authentification (AuthProvider).

• Fichier d'interface principal : src/app/(auth)/login/page.tsx
  • Ce fichier utilise le composant <Tabs> de ShadCN pour créer les deux onglets "Administrateur" et "Employé".
  • Il affiche le formulaire correspondant à l'onglet sélectionné.
• Formulaire Administrateur : src/components/auth/login-form.tsx
  • Utilise react-hook-form et zod pour la validation des champs (email, mot de passe).
  • Lors de la soumission, il appelle la fonction login du contexte useAuth.
• Formulaire Employé : src/components/auth/employee-phone-form.tsx
  • Similaire au formulaire admin, mais pour le numéro de téléphone.
  • Appelle la fonction loginWithPhoneNumberAndPassword du contexte useAuth.
• Fournisseur d'Authentification : src/providers/auth-provider.tsx
  • Contient la logique métier de la connexion.
  • La fonction login utilise signInWithEmailAndPassword de Firebase Auth.
  • La fonction loginWithPhoneNumberAndPassword recherche d'abord l'email de l'employé dans la base de données via son numéro de téléphone, puis utilise signInWithEmailAndPassword pour le connecter.

Comment l'utiliser ?

Pour un administrateur :

1. Aller sur la page /login.
2. Rester sur l'onglet "Administrateur" (sélectionné par défaut).
3. Entrer son adresse email et son mot de passe.
4. Cliquer sur "SE CONNECTER".

Pour un employé :

1. Aller sur la page /login.
2. Cliquer sur l'onglet "Employé".
3. Sélectionner l'indicatif de son pays.
4. Entrer son numéro de téléphone (celui sur lequel il a reçu l'invitation).
5. Entrer le mot de passe qu'il a créé lors de l'acceptation de l'invitation.
6. Cliquer sur "Se connecter".

Erreurs possibles

• "Email ou mot de passe incorrect." : L'erreur la plus courante. L'utilisateur doit vérifier ses identifiants.
• "Aucun compte n'est associé à ce numéro de téléphone." : L'employé utilise un numéro qui n'est pas enregistré dans la base de données.
• "Le mot de passe est requis." : Le champ mot de passe a été laissé vide.

Frontend vs Backend

• Frontend : Gère l'affichage des formulaires, la saisie utilisateur et la validation des champs (ex: format de l'email). Les fichiers concernés sont /login/page.tsx, login-form.tsx, et employee-phone-form.tsx.
• Backend (Firebase) :
  • Firebase Authentication : Reçoit les identifiants, les vérifie et retourne un jeton d'authentification si la correspondance est bonne.
  • Firebase Realtime Database : Est interrogée par la logique de loginWithPhoneNumberAndPassword pour trouver l'email correspondant à un numéro de téléphone d'employé.

2. La Page d'Inscription (/register)

Rôle de la fonctionnalité

Cette page est le point d'entrée pour un nouvel administrateur qui souhaite créer un compte et un nouvel espace de travail pour son entreprise. C'est la première étape du parcours d'un nouveau propriétaire d'entreprise.

Note : Les employés ne passent pas par cette page. Ils utilisent un lien d'invitation.

Comment ça fonctionne dans le code ?

• Fichier d'interface et formulaire : src/components/auth/register-form.tsx
  • C'est un composant unique qui gère l'affichage et la logique du formulaire.
  • Il utilise react-hook-form et zod pour valider les informations (nom, email, mot de passe).
  • Lors de la soumission, il appelle la fonction signupAndCreateWorkspace du contexte useAuth.
• Fournisseur d'Authentification : src/providers/auth-provider.tsx
  • La fonction signupAndCreateWorkspace orchestre la création :
    1. Elle appelle createUserWithEmailAndPassword de Firebase Auth pour créer l'utilisateur d'authentification.
    2. Elle met à jour le profil de l'utilisateur Firebase avec le nom fourni.
    3. Elle crée un profil utilisateur correspondant dans la Realtime Database (/users/{uid}).
  • Une fois l'utilisateur créé, le AuthProvider détecte le nouvel utilisateur authentifié mais sans businessId, et le redirige automatiquement vers la page de configuration (/setup).

Comment l'utiliser ?

1. Depuis la page de connexion, cliquer sur le lien "Créez un compte".
2. Remplir son nom complet, son adresse email et choisir un mot de passe.
3. Confirmer le mot de passe.
4. Cliquer sur "Créer mon compte".
5. L'utilisateur est ensuite redirigé vers la page /setup pour configurer les informations de son entreprise.

Erreurs possibles

• "Cette adresse email est déjà utilisée par un autre compte." : L'email est déjà enregistré dans Firebase Authentication. L'utilisateur devrait essayer de se connecter.
• "Les mots de passe ne correspondent pas." : Le champ "mot de passe" et "confirmer le mot de passe" ne sont pas identiques.

Frontend vs Backend

• Frontend : src/components/auth/register-form.tsx collecte les informations et les valide.
• Backend (Firebase) :
  • Firebase Authentication : Crée l'enregistrement de l'utilisateur (email/mot de passe).
  • Firebase Realtime Database : Stocke les informations supplémentaires du profil utilisateur dans la table users.

3. La Page d'Invitation (/invite)

Rôle de la fonctionnalité

Ce portail est exclusivement destiné aux employés qui ont reçu un lien d'invitation de la part de leur administrateur. Il leur permet de créer leur compte et de le lier automatiquement à la bonne entreprise et au bon espace de travail.

Comment ça fonctionne dans le code ?

• Génération du lien : Dans la page de gestion des utilisateurs (/admin/users), l'admin entre le numéro de téléphone d'un employé.
  • La fonction generateInviteToken dans src/lib/firebase/database.ts est appelée.
  • Elle crée un jeton unique (un uuid) et le stocke dans la base de données sous /invitations/{tokenId} avec les informations nécessaires (ID de l'entreprise, ID de l'espace de travail, rôle, etc.).
  • Ce jeton est utilisé pour construire l'URL /invite?token=....
• Page d'invitation : src/app/invite/page.tsx
  • Au chargement, le composant extrait le token de l'URL.
  • Il appelle getInviteTokenData pour vérifier si le jeton est valide en le cherchant dans la base de données.
  • Si le jeton est valide, il affiche le formulaire d'inscription (Nom, Mot de passe). Le numéro de téléphone est pré-rempli et non modifiable.
  • Si le jeton est invalide ou expiré, un message d'erreur est affiché.
• Finalisation de l'inscription :
  • Lors de la soumission du formulaire, la fonction onSubmit de la page d'invitation :
    1. Crée un email unique pour l'employé (ex: employee+22890123456@ttr.app).
    2. Appelle createUserWithEmailAndPassword de Firebase Auth pour créer le compte d'authentification.
    3. Appelle validateInviteTokenAndCreateUser qui, à son tour, crée le profil complet de l'employé dans la Realtime Database (/users/{uid}), en utilisant les informations stockées dans le jeton d'invitation (comme businessId, workspaceId).
    4. Appelle login du AuthProvider pour connecter l'utilisateur et le rediriger vers le tableau de bord.

Erreurs possibles

• "Ce lien d'invitation est invalide." : Le jeton dans l'URL n'existe pas dans la base de données ou a déjà été utilisé.
• "Ce numéro de téléphone est déjà associé à un compte." : L'employé a déjà un compte. Il doit se connecter normalement via la page de login.

1. Rôle de la fonctionnalité

La page "Santé Financière" est un tableau de bord visuel conçu pour offrir une vue d'ensemble claire et dynamique de la performance financière de l'entreprise. Elle permet aux utilisateurs de :

• Consulter les indicateurs clés de performance (KPIs) en un coup d'œil : Revenu total, Dépenses totales, Profit net, Nouveaux clients et nombre de Prestations.
• Analyser les tendances sur différentes périodes (24h, 7 jours, 30 jours, etc.) grâce à des graphiques interactifs.
• Identifier les sources de revenus et les postes de dépenses les plus importants.

C'est un outil stratégique d'aide à la décision qui transforme les données brutes en informations visuelles faciles à interpréter.

2. Comment ça fonctionne dans le code ?

Cette fonctionnalité est entièrement gérée côté client, ce qui la rend très réactive.

• Fichier principal : src/app/(dashboard)/financial-health/page.tsx
  • Ce fichier contient toute la logique de la page.
  • Récupération des données : À l'aide du hook useEffect, il appelle plusieurs fonctions de src/lib/firebase/database.ts (getExpenses, getReservations, getQuickIncomes, getClients) pour charger l'ensemble des données financières de l'espace de travail actif.
  • Filtrage par Période : L'état period (géré par un useState) contrôle la plage de dates. Lorsqu'un utilisateur clique sur un bouton de période (ex: "7j"), l'état change.
  • Calcul des Données : Un hook useMemo est utilisé pour recalculer les données des graphiques et des KPIs uniquement lorsque les données brutes ou la période sélectionnée changent. C'est une optimisation cruciale pour la performance, qui évite des calculs inutiles à chaque rendu. La bibliothèque date-fns est utilisée pour toutes les manipulations de dates.
  • Affichage des Graphiques : La bibliothèque recharts (intégrée via les composants Chart de ShadCN) est utilisée pour dessiner les graphiques (AreaChart, PieChart, BarChart).

3. Comment l'utiliser ?

1. Accéder à la page via le menu de navigation.
2. Par défaut, les données des 30 derniers jours sont affichées.
3. Utiliser les boutons en haut de la page (24h, 7j, 30j, 3m, 6m, 12m, Tout) pour changer la période d'analyse.
4. Tous les indicateurs (KPIs) et les graphiques se mettent à jour instantanément pour refléter la période sélectionnée.
5. Survoler les graphiques avec la souris pour voir les valeurs détaillées dans les infobulles.

4. Erreurs possibles

• Graphiques vides ou "Aucune donnée" : Cela se produit si aucune transaction (revenu ou dépense) n'a été enregistrée pendant la période sélectionnée. C'est un comportement normal.
• Erreur de chargement : Une erreur de réseau ou de permission (peu probable avec les règles actuelles) pourrait empêcher le chargement des données. La page afficherait alors des squelettes de chargement indéfiniment.

5. Frontend vs Backend

• Frontend : Gère 100% de la logique de cette fonctionnalité. Il récupère les données brutes, les traite, les filtre, les agrège et les affiche sous forme de graphiques et de cartes. C'est un excellent exemple de traitement de données côté client.
• Backend (Firebase Realtime Database) : Agit comme une simple source de stockage. Son rôle est de fournir rapidement les listes complètes des dépenses, prestations, etc., lorsque le frontend les demande.

6. Code utilisé et autres

• Composants principaux : Card (pour l'organisation), Button (pour les filtres), ChartContainer, AreaChart, PieChart, BarChart (de recharts via ShadCN).
• Composant personnalisé : src/components/dashboard/kpi-card.tsx est un composant réutilisable pour afficher les indicateurs clés de performance (KPIs) en haut de la page.
• Bibliothèques clés :
  • recharts : Pour la visualisation des données.
  • date-fns : Pour toutes les opérations sur les dates (calcul des débuts et fins de période). C'est un choix robuste et performant.

1. Rôle de la fonctionnalité

"TRIX Business" est un assistant conversationnel intelligent intégré directement dans l'application. Son rôle est de servir de consultant personnel pour l'utilisateur, capable de répondre à une grande variété de questions liées à la gestion d'entreprise.

• Conseils Stratégiques : Fournir des idées marketing, des stratégies financières, des optimisations de gestion de stock, etc.
• Aide à la Rédaction : Rédiger des messages professionnels, comme des communications pour les employés ou des réponses à des clients.
• Guide d'Utilisation : Expliquer comment utiliser les fonctionnalités de TTR Gestion pour atteindre des objectifs spécifiques.

L'objectif est d'offrir une aide instantanée, personnalisée et experte, sans que l'utilisateur ait besoin de quitter l'application.

2. Comment ça fonctionne dans le code ?

1. Interface Utilisateur (Frontend) :
   • Fichier : src/app/(dashboard)/assistant/page.tsx
   • Rôle : Ce composant React gère l'interface de chat. Il utilise le hook useState pour conserver l'historique des messages. Quand l'utilisateur envoie une question, elle est ajoutée à l'état, et la fonction runAssistant est appelée. La réponse de l'IA est ensuite affichée en utilisant la bibliothèque marked pour la convertir du format Markdown en HTML.
2. Point d'Entrée du Flux (Gateway) :
   • Fichier : src/ai/flows/assistant-flow.ts
   • Rôle : Il sert de pont entre le frontend et la logique principale de l'IA. Il définit les "schémas" de données d'entrée (AssistantInput) et de sortie (AssistantOutput) avec la bibliothèque zod, garantissant que les données envoyées à l'IA sont bien structurées.
3. Logique Principale de l'IA (Backend) :
   • Fichier : src/ai/runAssistant.ts
   • Rôle : C'est le véritable cerveau de TRIX.
     • Prompt Système : La fonction formatSystemPrompt construit une instruction détaillée qui définit la personnalité, le rôle, les connaissances et les limites de TRIX. Elle injecte dynamiquement des informations sur l'utilisateur et son entreprise (userDisplayName, businessContext) pour que les réponses soient personnalisées. Cette instruction inclut également une base de connaissances sur toutes les fonctionnalités de TTR Gestion, extraite directement de la documentation.
     • Connexion à l'IA : Il utilise la bibliothèque openai pour se connecter à OpenRouter, un service qui donne accès à différents modèles de langage (LLM). Le modèle actuellement utilisé est mistralai/mistral-nemo, un excellent compromis entre performance et coût.
     • Exécution : La fonction envoie le prompt système et tout l'historique de la conversation à l'IA, qui génère alors une réponse contextuelle.
4. Gestion du Feedback :
   • Quand un utilisateur clique sur "J'aime" ou "Je n'aime pas", la fonction handleFeedback dans assistant/page.tsx est déclenchée.
   • Elle appelle logAiFeedback de src/lib/firebase/database.ts pour enregistrer le retour (le prompt, la réponse et le vote) dans la base de données Firebase. C'est essentiel pour améliorer la qualité de l'assistant sur le long terme.

3. Comment l'utiliser ?

1. Se rendre sur la page "TRIX Business" via le menu.
2. Taper une question dans la zone de texte en bas de l'écran.
3. Appuyer sur "Entrée" ou cliquer sur le bouton d'envoi.
4. La réponse de l'assistant apparaît dans la zone de conversation.
5. Utiliser les boutons 👍 / 👎 sous la réponse pour donner votre avis sur sa pertinence.

4. Erreurs possibles

• "Désolé, je n'ai pas pu générer de réponse." : Survient si l'API d'OpenRouter ne répond pas ou renvoie une erreur. C'est généralement temporaire. Il suffit de réessayer.
• Réponses vides ou non pertinentes : Très rare, mais peut arriver si le modèle d'IA ne comprend pas une requête très ambiguë. Reformuler la question est la meilleure solution.

5. Frontend vs Backend

• Frontend (assistant/page.tsx) : Gère l'affichage, l'interaction utilisateur, et l'état de la conversation. Il est purement visuel.
• Backend (runAssistant.ts et Firebase) : Toute la logique "intelligente" est exécutée sur le serveur Next.js (grâce à la directive 'use server'). C'est le serveur qui communique avec OpenRouter, garantissant que les clés d'API secrètes ne sont jamais exposées au navigateur de l'utilisateur. Firebase est utilisé comme base de données backend pour stocker le feedback.

6. Code utilisé et autres technologies

• openai : La bibliothèque officielle pour interagir avec des services compatibles avec l'API d'OpenAI, comme OpenRouter.
• marked : Une bibliothèque rapide et efficace pour transformer le texte Markdown (utilisé par l'IA pour formater ses réponses avec des titres, listes, etc.) en HTML affichable dans le navigateur.
• zod : Pour valider que la structure des données envoyées à l'IA est toujours correcte.
• OpenRouter : Le service externe qui fournit le modèle de langage. Ce choix est stratégique car il permet de changer de modèle d'IA (Mistral, GPT, etc.) sans modifier le code de l'application, simplement en changeant le nom du modèle dans runAssistant.ts.

1. Rôle de la fonctionnalité

Cette section est le cœur opérationnel de TTR Gestion. Elle permet d'enregistrer, de suivre et de gérer toutes les transactions commerciales principales de l'entreprise. La terminologie de cette page (Prestations, Réservations, Commandes, Ventes) s'adapte automatiquement au type d'activité de l'entreprise (Hôtel, Restaurant, Boutique, etc.), la rendant intuitive pour tous les utilisateurs.

Ses fonctions principales sont :

• Enregistrer de nouvelles prestations avec tous les détails nécessaires (client, dates, service, montants).
• Suivre l'état d'avancement de chaque prestation (En attente, Confirmée, Effectuée, etc.).
• Gérer les finances de chaque transaction, en suivant le montant total, le montant payé et le solde restant.
• Générer et imprimer des reçus professionnels pour les clients.

2. Comment ça fonctionne dans le code ?

• Page de Liste (/reservations) :
  • Fichier : src/app/(dashboard)/reservations/page.tsx
  • Rôle : Affiche la liste de toutes les prestations dans un tableau (<Table>). Elle récupère les données via la fonction fetchReservations et permet de les filtrer par statut (grâce au composant <DropdownMenu>) ou de les rechercher par mot-clé. C'est également depuis cette page que l'on peut accéder aux actions de modification, de suppression et d'impression.
• Page de Création (/reservations/new) :
  • Fichier : src/app/(dashboard)/reservations/new/page.tsx
  • Rôle : Contient le formulaire pour ajouter une nouvelle prestation. Elle utilise react-hook-form pour gérer l'état du formulaire et zod (reservationFormSchema) pour définir les règles de validation (ex: le nom du client est requis, les dates doivent être cohérentes, etc.). Lors de la soumission, elle appelle la fonction addReservation de la base de données.
• Page de Modification (/reservations/[id]/edit) :
  • Fichier : src/app/(dashboard)/reservations/[id]/edit/page.tsx
  • Rôle : Très similaire à la page de création, mais elle charge d'abord les données d'une prestation existante via getReservationById et pré-remplit le formulaire. À la soumission, elle appelle updateReservation.
• Logique de Terminologie Dynamique :
  • Fichier : .../reservations/page.tsx, .../new/page.tsx, etc.
  • Rôle : Le hook useTerminology() est appelé dans chaque page. Il analyse le businessProfile.type (Hôtel, Restaurant...) de l'utilisateur connecté et retourne les termes appropriés ("Réservation", "Client", "Chambre", etc.). Ces termes sont ensuite utilisés pour afficher les bons libellés dans l'interface, offrant une expérience sur mesure.
• Logique de Base de Données :
  • Fichier : src/lib/firebase/database.ts
  • Rôle : Centralise toutes les interactions avec Firebase Realtime Database. Les fonctions génériques addData, getData, updateData, et deleteData sont utilisées pour créer les fonctions spécifiques comme addReservation, getReservations, etc. Chaque opération inclut un appel à logActivity pour garantir la traçabilité.

3. Comment l'utiliser ?

1. Ajouter une prestation : Cliquer sur le bouton "Ajouter une prestation". Remplir le formulaire avec les informations du client, les dates, le type de service, le montant total et le montant déjà payé, puis enregistrer.
2. Modifier une prestation : Dans la liste, cliquer sur l'icône "Modifier" (crayon) de la ligne correspondante. Changer les informations (par exemple, passer le statut à "Effectuée") et enregistrer.
3. Suivre les paiements : La colonne "Montants" dans la liste affiche clairement le total, le payé et le reste à payer pour chaque transaction.
4. Imprimer un reçu : Cliquer sur l'icône "Imprimer" (imprimante) pour ouvrir un nouvel onglet avec un reçu professionnel, prêt à être imprimé.

4. Erreurs possibles

• "PERMISSION_DENIED" : L'erreur la plus critique. Elle survient si les Règles de Sécurité Firebase (database.rules.json) bloquent l'opération. Les causes fréquentes sont : un abonnement expiré, un utilisateur essayant d'écrire sans les droits nécessaires, ou une incohérence dans les données envoyées qui ne respectent pas la règle .validate.
• Erreurs de validation du formulaire : "Le nom du client est requis", "La date de départ doit être après la date d'arrivée", etc. Ces erreurs sont gérées par zod et s'affichent directement sous les champs concernés pour guider l'utilisateur.

5. Frontend vs Backend

• Frontend : Gère l'intégralité de l'interface utilisateur, la validation des formulaires avant envoi, et l'affichage des données. Il est responsable de l'expérience utilisateur réactive. Fichiers concernés : page.tsx, new/page.tsx, edit/page.tsx.
• Backend (Firebase) :
  • Realtime Database : Stocke de manière sécurisée toutes les données des prestations.
  • Security Rules : Agissent comme un garde du corps côté serveur. Elles vérifient que chaque requête de lecture, d'écriture ou de suppression est légitime avant de l'exécuter. C'est la couche de sécurité la plus importante de la fonctionnalité.

6. Code utilisé et autres technologies

• react-hook-form & zod : Pour des formulaires robustes, performants et avec une validation de données puissante.
• date-fns : Pour formater les dates de manière lisible et cohérente à travers l'application.
• ShadCN UI : Fournit tous les composants de base (Table, Button, DropdownMenu, etc.) qui structurent l'interface.
• react-day-picker : Utilisé à travers le composant Calendar de ShadCN pour la sélection des plages de dates.