add dashboard, home, login, layout, api

2026-06-04 13:58:32 +02:00
parent fb2a7485bb
commit bf36210670
12 changed files with 497 additions and 231 deletions
@@ -0,0 +1,53 @@
+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
+
+
+1. 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.
+
+2. 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.
+
+III. 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/).