ajout du dashboard

structure.md

@@ -0,0 +1,99 @@
+```bash
+src/
+├── assets/         # Images, logo GISE
+├── components/     # Les petits morceaux réutilisables (Boutons, Cartes, Navbar, Footer)
+├── layouts/        # Les "moules" des pages
+│   ├── PublicLayout.jsx  # Moule avec Header/Footer standard
+│   └── AppLayout.jsx     # Moule avec Barre latérale (Sidebar) pour l'espace client
+├── pages/          # Les grandes pages
+│   ├── public/     # Accueil, Login, Register...
+│   └── app/        # Dashboard, Services, Factures...
+├── services/       # Le "moteur" : fonctions pour parler à l'API FOSSBilling/Hestia
+└── App.jsx         # Le routeur principal
+```
+
+
+## Les Routes Publiques (La Vitrine)
+Ces pages sont accessibles à tout le monde.
+
+/ (Accueil) : La page d'atterrissage. Une grande image forte (le Bunker), les 3 piliers (Web, VPS, Cloud), et un gros appel à l'action.
+
+/offres (Catalogue global) : Une page qui résume tous les produits.
+
+/offres/web : Détail des offres d'hébergement HestiaCP.
+
+/offres/vps : Détail des serveurs n8n, etc.
+
+/offres/cloud : Détail des offres Nextcloud.
+
+/login (Connexion) : Le formulaire pour entrer dans le Bunker.
+
+/register (Inscription) : Le formulaire pour créer un compte.
+
+/password-reset (Mot de passe oublié) : Essentiel.
+
+---
+
+## Les Routes Privées (L'Espace Client protégé)
+Ces routes nécessitent que l'utilisateur ait un token valide (il est connecté). Si un visiteur non connecté essaie d'y aller, il sera redirigé vers /login.
+
+/dashboard (Vue d'ensemble) : Le centre de contrôle.
+
+/services (Inventaire global) : La liste de tout ce que possède le client.
+
+/services/web : Ses sites hébergés sur HestiaCP (avec le bouton SSO magique).
+
+/services/vps : Ses serveurs.
+
+/services/cloud : Son stockage Nextcloud.
+
+/billing (Facturation) : Historique, factures impayées (relié à FOSSBilling).
+
+/support (Tickets) : Ouvrir et suivre des demandes d'aide.
+
+/settings (Profil) : Gérer ses infos perso et mots de passe.
+
+### Comment structurer ça dans ton code React ?
+Pour garder un code propre, tu vas créer une arborescence de dossiers logique dans ton projet Vite (dossier src/).
+
+
+## FOSSBilling : Le Cerveau Orchestrateur
+Dans cette architecture (qu'on appelle Billing-Driven Provisioning), le flux d'autorité est strict et unidirectionnel. Ton portail React n'est qu'une télécommande d'affichage. FOSSBilling est le chef d'orchestre.
+
+Le Catalogue : Tu crées tes "Produits" directement dans l'interface admin de FOSSBilling (ex: "Pack Web Pro", "Cloud 50Go", "VPS Linux 2C/4G").
+
+L'Affichage : Ton portail React (Nexus) interroge l'API de FOSSBilling pour récupérer cette liste et l'afficher joliment au client.
+
+L'Achat : Le client clique sur "Commander" depuis ton portail. React envoie la demande à FOSSBilling. FOSSBilling génère la facture et gère le paiement (via Stripe, PayPal, etc.).
+
+Le Provisionnement (La Magie) : Seulement lorsque la facture passe au statut "Payée", FOSSBilling déclenche automatiquement ses "Server Modules" (ses plugins internes). C'est FOSSBilling (ton backend sécurisé) qui va se connecter via API à HestiaCP ou Nextcloud pour leur dire : "Créez un compte pour ce client avec ces quotas, il a payé."
+
+## La Brique Manquante : Le Gestionnaire de VPS
+Tu as mentionné "quelque chose pour gérer les VPS". Pour que ton infrastructure soit complète, il te faut un Hyperviseur Bare-Metal.
+
+Dans l'esprit "FOSS" (Open Source) et "Bunker" que tu construis, le standard absolu de l'industrie est Proxmox VE.
+
+C'est un système d'exploitation que tu installes directement sur une machine physique.
+
+Il permet de créer, démarrer, arrêter et détruire des machines virtuelles (VPS) à la volée.
+
+Le point clé : Il possède une API ultra-puissante. Il existe des modules FOSSBilling capables de parler à Proxmox pour automatiser la création d'un VPS dès qu'un client paie sa facture.
+
+## Le Cycle de Vie Typique (Ce que verra ton client)
+Voici comment ton portail unifié (console.gise.be) va se comporter :
+
+Le Dashboard (Lecture Seule) : Ton React interroge les API de HestiaCP et Nextcloud uniquement pour lire les statistiques (Espace disque utilisé, Bande passante, Statut du serveur) et les afficher dans les jolies cartes Cyberpunk que l'on a codées.
+
+La Commande d'un VPS :
+
+Le client va sur l'onglet /offres/vps de ton portail.
+
+Il sélectionne "VPS Alpha - 5€/mois" et paie.
+
+FOSSBilling valide le paiement et envoie l'ordre à Proxmox.
+
+Proxmox clone une image Linux, lui attribue une IP et démarre le VPS (en 30 secondes).
+
+FOSSBilling récupère le mot de passe root et l'IP, et l'envoie par mail au client.
+
+Le client retourne sur son /dashboard, React interroge FOSSBilling et affiche une nouvelle carte : "VPS Alpha - ACTIF" avec un bouton de redémarrage (qui tape dans l'API Proxmox).