53 lines
2.1 KiB
Plaintext
53 lines
2.1 KiB
Plaintext
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/). |