add register and see panel

src/pages/app/Checkout.jsx

@@ -0,0 +1,195 @@
+import { useState, useEffect } from 'react';
+import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
+import { resetCart, addToCart, checkoutCart, getProductList, getClientProfile } from '../../services/api';
+
+export default function Checkout() {
+    const { productId } = useParams();
+    const [searchParams] = useSearchParams();
+    const period = searchParams.get('period');
+    const navigate = useNavigate();
+
+    const [product, setProduct] = useState(null);
+    const [userProfile, setUserProfile] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [error, setError] = useState(null);
+
+    // Chargement asynchrone sécurisé
+    useEffect(() => {
+        const loadData = async () => {
+            try {
+                // 1. On charge d'abord le produit (Requête Publique)
+                const productData = await getProductList();
+                const foundProduct = productData.list?.find(p => p.id === parseInt(productId));
+                
+                if (!foundProduct) {
+                    setError("Le produit demandé n'existe pas dans le catalogue.");
+                    setIsLoading(false);
+                    return;
+                }
+                setProduct(foundProduct);
+
+                // 2. Ensuite, on tente de charger le profil (Requête Privée)
+                try {
+                    const profileData = await getClientProfile();
+                    setUserProfile(profileData);
+                } catch (profileErr) {
+                    // Si on tombe ici, c'est que FOSSBilling refuse l'accès au profil.
+                    console.error("Rejet API Profil :", profileErr);
+                    setError("Accès refusé. Vous devez être connecté à votre compte pour provisionner une instance.");
+                    // Tu pourras décommenter la ligne suivante plus tard pour forcer la redirection :
+                    // navigate('/login');
+                    setIsLoading(false);
+                    return;
+                }
+
+            } catch (err) {
+                // Erreur serveur globale (FOSSBilling hors ligne)
+                console.error("Erreur Globale Serveur :", err);
+                setError(`Impossible de contacter le serveur de facturation : ${err.message}`);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        loadData();
+    }, [productId]);
+
+    // Outil de traduction des catégories FOSSBilling
+    // Vérifie que ces ID correspondent bien à ce que tu as dans ton FOSSBilling
+    const getCategoryTag = (categoryId) => {
+        const map = {
+            1: 'web',   // Hébergement Web
+            4: 'vps',   // Serveurs VPS
+            2: 'db',    // Base de données
+            3: 'cloud'  // Cloud Privé
+        };
+        return map[categoryId] || 'srv'; // 'srv' en solution de secours
+    };
+
+    // Exécution de la commande sur FOSSBilling
+    const handleConfirmOrder = async () => {
+        setIsProcessing(true);
+        setError(null);
+        try {
+            await resetCart();
+
+            // ⚙️ NOUVEL ALGORITHME D'ISOLATION UNITAIRE
+            
+            // 1. Nettoyage strict du prénom (uniquement lettres et chiffres, pas de tirets)
+            let cleanName = 'user';
+            if (userProfile && userProfile.first_name) {
+                cleanName = userProfile.first_name
+                    .toLowerCase()
+                    .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Supprime les accents
+                    .replace(/[^a-z0-9]/g, ""); // Supprime tout le reste (espaces, tirets, etc.)
+            }
+
+            // 2. Récupération du tag de catégorie (web, vps, db, cloud)
+            const catTag = getCategoryTag(product.product_category_id);
+            
+            // 3. Génération d'une chaîne aléatoire alphanumérique de 4 caractères
+            const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+            let randomHash = '';
+            for (let i = 0; i < 4; i++) {
+                randomHash += chars.charAt(Math.floor(Math.random() * chars.length));
+            }
+
+            // 4. Création du nom unique pour le domaine (ex: adam-web-b4m2)
+            const serverName = `${cleanName}-${catTag}-${randomHash}`;
+            const fullServerName = `${serverName}.gise.be`;
+
+            // ⚙️ STRUCTURE D'INJECTION POUR FOSSBILLING & HESTIACP
+            const productConfig = {
+                hostname: fullServerName,
+                
+                domain: {
+                    action: 'register',
+                    register_sld: serverName, // Devient l'identifiant unique de la commande
+                    register_tld: '.gise.be',
+                    register_years: 1
+                }
+            };
+
+            await addToCart(productId, period, productConfig);
+            await checkoutCart();
+
+            navigate('/dashboard', { 
+                state: { successMessage: `Instance initialisée sur ${serverName}.gise.be` } 
+            });
+
+        } catch (err) {
+            setError(err.message || "La transaction a échoué. L'API a refusé le contrat.");
+        } finally {
+            setIsProcessing(false);
+        }
+    };
+
+    if (isLoading) {
+        return (
+            <div className="w-full max-w-md mx-auto mt-20 p-6 bg-gray-900 border border-gray-800 rounded-2xl text-center">
+                <p className="text-cyan-400 font-mono tracking-widest animate-pulse">ANALYSE DU CONTRAT EN COURS...</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="w-full max-w-xl mx-auto mt-12 p-8 bg-gray-900 border border-gray-800 rounded-2xl shadow-2xl">
+            <h2 className="text-3xl font-black text-white tracking-wider mb-6">CONFIRMATION DE COMMANDE</h2>
+
+            {error && (
+                <div className="mb-6 p-4 bg-red-500/10 border border-red-500/30 text-red-400 rounded-xl text-sm font-mono">
+                    ERREUR: {error}
+                </div>
+            )}
+
+            {product && (
+                <div className="space-y-6">
+                    <div className="bg-black/40 p-6 rounded-xl border border-gray-800 space-y-4">
+                        <div>
+                            <span className="text-xs text-gray-500 font-mono block uppercase">Instance sélectionnée</span>
+                            <span className="text-xl font-bold text-white">{product.title}</span>
+                        </div>
+                        
+                        <div>
+                            <span className="text-xs text-gray-500 font-mono block uppercase">Cycle de facturation</span>
+                            <span className="text-md text-cyan-400 font-bold uppercase tracking-wider">
+                                {period === '1W' ? 'Hebdomadaire (7 jours)' : period === '1M' ? 'Mensuel (30 jours)' : 'Annuel (365 jours)'}
+                            </span>
+                        </div>
+
+                        <div className="pt-4 border-t border-gray-800 flex justify-between items-baseline">
+                            <span className="text-sm font-medium text-gray-400">Total à régler immédiatement :</span>
+                            <span className="text-3xl font-black text-cyan-400">
+                                {product.pricing.recurrent[period]?.price} €
+                            </span>
+                        </div>
+                    </div>
+
+                    <div className="text-xs text-gray-500 font-mono leading-relaxed bg-gray-950 p-4 rounded-lg border border-gray-800">
+                        En validant cette commande, vous autorisez le Terminal Nexus à provisionner les ressources matérielles. Un domaine sécurisé <strong>.gise.be</strong> vous sera automatiquement attribué.
+                    </div>
+
+                    <div className="flex space-x-4">
+                        <button
+                            type="button"
+                            onClick={() => navigate('/store')}
+                            disabled={isProcessing}
+                            className="w-1/3 bg-transparent hover:bg-gray-800 text-gray-400 border border-gray-700 py-3 rounded-lg font-bold tracking-widest transition-colors"
+                        >
+                            ANNULER
+                        </button>
+                        
+                        <button
+                            type="button"
+                            onClick={handleConfirmOrder}
+                            disabled={isProcessing}
+                            className="w-2/3 bg-cyan-400 hover:bg-cyan-500 text-gray-900 py-3 rounded-lg font-black tracking-widest transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_20px_rgba(34,211,238,0.15)] font-mono"
+                        >
+                            {isProcessing ? 'PROVISIONNEMENT...' : 'INITIALISER L\'INSTANCE'}
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

src/pages/app/Dashboard.jsx

@@ -13,11 +13,31 @@ export default function Dashboard() {
     useEffect(() => {
         const fetchInventory = async () => {
             try {
-                // Appel à FOSSBilling via notre api.js
                 const data = await getClientOrders();
                 
-                // FOSSBilling renvoie souvent la liste dans data.list
-                setOrders(data.list || []);
+                if (data.list) {
+                    // LE FILTRE CHIRURGICAL PAR PREFIXE
+                    const filteredOrders = data.list.filter(order => {
+                        const title = (order.title || '').toLowerCase();
+                        const type = (order.type || '').toLowerCase();
+
+                        // On masque la commande SI :
+                        // 1. Le type technique est "domain"
+                        // 2. OU le titre COMMENCE par "domain", "domaine" ou "enregistrement"
+                        const isGhostProduct = 
+                            type === 'domain' || 
+                            title.startsWith('domain ') || 
+                            title.startsWith('domaine ') ||
+                            title.startsWith('enregistrement ');
+                        
+                        // On retourne true (on affiche) uniquement si ce n'est pas un produit fantôme
+                        return !isGhostProduct;
+                    });
+
+                    setOrders(filteredOrders);
+                } else {
+                    setOrders([]);
+                }
             } catch (err) {
                 setError(err.message || "Impossible de récupérer la télémétrie des services.");
             } finally {

src/pages/app/Services.jsx

@@ -0,0 +1,293 @@
+import { useState, useEffect } from 'react';
+import { getMyServices, getServiceDetails, getHostingServiceDetails, resetHostingPassword, launchSSOGateway } from '../../services/api';
+import { useVPC } from '../../services/useVPC';
+import { Server, Database, Cloud, Globe, Folder, Trash2, ExternalLink, Loader, Plus } from 'lucide-react';
+
+export default function Services() {
+    const [services, setServices] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [newVpcName, setNewVpcName] = useState("");
+    const [isConnecting, setIsConnecting] = useState(null); // Pour le loader du bouton Auto-Login
+    const [ssoVault, setSsoVault] = useState(null);
+
+    // Branchement du moteur logique VPC
+    const { vpcs, createVPC, deleteVPC, assignToVPC, removeFromVPC } = useVPC();
+
+    // 1. Récupération et Filtrage des Infrastructures
+    useEffect(() => {
+        const fetchServices = async () => {
+            try {
+                const data = await getMyServices();
+
+                if (data.list && data.list.length > 0) {
+                    // On récupère les mots de passe de chaque service pour le bouton Auto-Login
+                    const detailedServices = await Promise.all(
+                        data.list.map(async (order) => {
+                            const details = await getServiceDetails(order.id);
+                            return details;
+                        })
+                    );
+
+                    // LE FILTRE CHIRURGICAL : On exclut les produits "Domaine" fantômes
+                    const filteredServices = detailedServices.filter(s => {
+                        const type = (s.type || '').toLowerCase();
+                        const title = (s.title || '').toLowerCase();
+                        const isGhostProduct =
+                            type === 'domain' ||
+                            title.startsWith('domain ') ||
+                            title.startsWith('domaine ') ||
+                            title.startsWith('enregistrement ');
+
+                        // On garde les actifs/en préparation qui ne sont pas des domaines
+                        return (s.status === 'active' || s.status === 'pending_setup') && !isGhostProduct;
+                    });
+
+                    setServices(filteredServices);
+                }
+            } catch (err) {
+                setError(err.message || "Impossible de charger la télémétrie des services.");
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchServices();
+    }, []);
+
+    // 2. Moteur de Connexion Furtive (SSO HestiaCP) avec contournement du bloqueur de pop-up
+    const handleAutoLogin = async (service) => {
+        setIsConnecting(service.id);
+
+        try {
+            // 1. Récupération de l'utilisateur
+            const hostingDetails = await getHostingServiceDetails(service.id);
+            const username = hostingDetails.username;
+            if (!username) throw new Error("Infrastructure non synchronisée avec le métal.");
+
+            // 2. Ghost Reset (Génération du mot de passe jetable)
+            const secureHash = Math.random().toString(36).slice(-8) + Math.random().toString(36).slice(-4).toUpperCase();
+            const rollingPassword = `Nx${secureHash}`;
+
+            console.log("Ghost Reset généré pour", username);
+            await resetHostingPassword(service.id, rollingPassword);
+
+            // 3. On affiche le Coffre-Fort à l'utilisateur
+            setSsoVault({
+                username: username,
+                password: rollingPassword,
+                url: 'https://panel.gise.be/login/'
+            });
+
+        } catch (err) {
+            alert("Échec du protocole d'accès : " + err.message);
+        } finally {
+            setIsConnecting(null);
+        }
+    };
+
+    // Utilitaires UI
+    const getServiceIcon = (title) => {
+        const t = (title || '').toLowerCase();
+        if (t.includes('vps') || t.includes('serveur')) return <Server className="w-8 h-8 text-cyan-400" />;
+        if (t.includes('cloud') || t.includes('nextcloud')) return <Cloud className="w-8 h-8 text-blue-400" />;
+        if (t.includes('db') || t.includes('base') || t.includes('sql')) return <Database className="w-8 h-8 text-purple-400" />;
+        return <Globe className="w-8 h-8 text-emerald-400" />;
+    };
+
+    // Composant Interne : La Carte d'Instance
+    const InstanceCard = ({ service }) => (
+        <div className="bg-gray-900 border border-gray-800 rounded-xl p-5 flex flex-col justify-between hover:border-cyan-400/30 transition-all">
+            <div>
+                <div className="flex justify-between items-start mb-4">
+                    <div className="p-2 bg-black/40 rounded-lg">
+                        {getServiceIcon(service.title)}
+                    </div>
+                    {service.status === 'active' ? (
+                        <span className="bg-emerald-500/10 text-emerald-400 px-2 py-1 rounded text-xs border border-emerald-500/20">ONLINE</span>
+                    ) : (
+                        <span className="bg-orange-500/10 text-orange-400 px-2 py-1 rounded text-xs border border-orange-500/20 animate-pulse">DEPLOYING</span>
+                    )}
+                </div>
+
+                <h3 className="font-bold text-white text-lg truncate" title={service.title}>{service.title}</h3>
+                <p className="text-cyan-400 text-xs font-mono mt-1 mb-4">{service.domain || `ID: #${service.id}`}</p>
+            </div>
+
+            <div className="mt-auto space-y-3">
+                {/* Sélecteur VPC */}
+                <div className="flex items-center justify-between text-sm border-t border-gray-800 pt-3">
+                    <span className="text-gray-500 text-xs">Projet:</span>
+                    <select
+                        onChange={(e) => {
+                            const val = e.target.value;
+                            if (val === "free") removeFromVPC(service.id);
+                            else if (val) assignToVPC(service.id, val);
+                        }}
+                        className="bg-black border border-gray-700 text-gray-300 rounded px-2 py-1 outline-none focus:border-cyan-400 text-xs w-[140px]"
+                        defaultValue={vpcs.find(v => v.services.includes(service.id))?.id || "free"}
+                    >
+                        <option value="free">-- Libre --</option>
+                        {vpcs.map(vpc => (
+                            <option key={vpc.id} value={vpc.id}>{vpc.name}</option>
+                        ))}
+                    </select>
+                </div>
+
+                {/* Bouton d'accès Auto-Login */}
+                <button
+                    onClick={() => handleAutoLogin(service)}
+                    disabled={isConnecting === service.id || service.status !== 'active'}
+                    className="w-full flex items-center justify-center space-x-2 bg-cyan-400/10 hover:bg-cyan-400 text-cyan-400 hover:text-gray-900 border border-cyan-400 py-2.5 rounded-lg font-bold text-sm tracking-wide transition-all disabled:opacity-50"
+                >
+                    {isConnecting === service.id ? (
+                        <><Loader className="w-4 h-4 animate-spin" /><span>CONNEXION...</span></>
+                    ) : (
+                        <><ExternalLink className="w-4 h-4" /><span>CONSOLE D'ADMINISTRATION</span></>
+                    )}
+                </button>
+            </div>
+        </div>
+    );
+
+    // Tri des instances (Libres vs Assignées)
+    const assignedServiceIds = vpcs.flatMap(vpc => vpc.services);
+    const freeServices = services.filter(s => !assignedServiceIds.includes(s.id));
+
+    if (isLoading) return <div className="text-center mt-20 text-cyan-400 animate-pulse font-mono tracking-widest">ANALYSE DU RÉSEAU...</div>;
+
+    return (
+        <div className="max-w-7xl mx-auto mt-8 p-6">
+
+            {/* EN-TÊTE ET CRÉATION VPC */}
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 gap-4">
+                <div>
+                    <h1 className="text-3xl font-black text-white tracking-wider">INVENTAIRE RÉSEAU</h1>
+                    <p className="text-gray-400 mt-1">Orchestration des environnements et des Virtual Private Clouds.</p>
+                </div>
+
+                <div className="flex space-x-2 bg-gray-900 p-2 rounded-xl border border-gray-800">
+                    <input
+                        type="text"
+                        placeholder="Nom du nouveau VPC..."
+                        value={newVpcName}
+                        onChange={(e) => setNewVpcName(e.target.value)}
+                        className="bg-black border border-gray-800 rounded-lg px-4 py-2 text-sm text-white focus:outline-none focus:border-cyan-400 w-64"
+                    />
+                    <button
+                        onClick={() => { createVPC(newVpcName); setNewVpcName(""); }}
+                        disabled={!newVpcName.trim()}
+                        className="bg-cyan-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm disabled:opacity-50 hover:bg-cyan-300 flex items-center"
+                    >
+                        <Plus className="w-4 h-4 mr-1" /> CRÉER GROUPE
+                    </button>
+                </div>
+            </div>
+
+            {error && <div className="text-red-400 bg-red-400/10 p-4 rounded-xl border border-red-500/20 mb-6">{error}</div>}
+
+            {/* LES VPC (Groupes de projets) */}
+            <div className="space-y-8 mb-12">
+                {vpcs.map(vpc => {
+                    const vpcServices = services.filter(s => vpc.services.includes(s.id));
+
+                    return (
+                        <div key={vpc.id} className="bg-gray-900/40 border border-gray-800 rounded-2xl p-6">
+                            <div className="flex justify-between items-center mb-6 border-b border-gray-800 pb-4">
+                                <div className="flex items-center space-x-3 text-white">
+                                    <Folder className="w-6 h-6 text-cyan-400" />
+                                    <h2 className="text-xl font-bold tracking-wider">{vpc.name.toUpperCase()}</h2>
+                                    <span className="bg-gray-800 text-gray-400 px-2 py-0.5 rounded text-xs font-mono">{vpcServices.length} INSTANCES</span>
+                                </div>
+                                <button onClick={() => deleteVPC(vpc.id)} className="text-gray-500 hover:text-red-400 transition-colors flex items-center text-sm">
+                                    <Trash2 className="w-4 h-4 mr-1" /> Démanteler VPC
+                                </button>
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                                {vpcServices.length === 0 ? (
+                                    <div className="col-span-full text-gray-600 text-sm border border-dashed border-gray-800 rounded-xl p-6 text-center font-mono">
+                                        Réseau virtuel vide. Assigner des instances depuis le pool libre.
+                                    </div>
+                                ) : (
+                                    vpcServices.map(service => <InstanceCard key={service.id} service={service} />)
+                                )}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+
+            {/* LE POOL LIBRE (Instances non groupées) */}
+            <div>
+                <h2 className="text-lg font-bold text-gray-500 tracking-wider mb-6 flex items-center">
+                    <Server className="w-5 h-5 mr-2" /> POOL D'INSTANCES LIBRES
+                </h2>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {freeServices.length === 0 ? (
+                        <div className="col-span-full text-gray-600 text-sm border border-gray-900 bg-gray-900/20 rounded-xl p-6 text-center font-mono">
+                            Aucune instance libre. Toutes vos accréditations sont assignées à des VPC.
+                        </div>
+                    ) : (
+                        freeServices.map(service => <InstanceCard key={service.id} service={service} />)
+                    )}
+                </div>
+            </div>
+            {/* MODAL DU COFFRE-FORT ÉPHÉMÈRE */}
+            {ssoVault && (
+                <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+                    <div className="bg-gray-900 border border-cyan-500/50 rounded-lg shadow-2xl shadow-cyan-500/20 max-w-md w-full p-6 text-gray-200">
+
+                        <div className="flex justify-between items-center mb-6">
+                            <h3 className="text-xl font-bold text-cyan-400 font-mono tracking-wider">ACCÈS AUTORISÉ</h3>
+                            <button onClick={() => setSsoVault(null)} className="text-gray-400 hover:text-white transition">
+                                ✖
+                            </button>
+                        </div>
+
+                        <p className="text-sm text-gray-400 mb-6">
+                            Le pare-feu HestiaCP bloque les injections de session directes. Un mot de passe de session <strong>jetable</strong> vient d'être généré sur le métal. Copiez-le et connectez-vous.
+                        </p>
+
+                        <div className="space-y-4 mb-8">
+                            <div>
+                                <label className="block text-xs uppercase tracking-widest text-cyan-500 mb-1">Utilisateur</label>
+                                <div className="flex bg-gray-950 border border-gray-800 rounded p-3 justify-between items-center">
+                                    <span className="font-mono text-white">{ssoVault.username}</span>
+                                    <button
+                                        onClick={() => navigator.clipboard.writeText(ssoVault.username)}
+                                        className="text-xs bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded transition"
+                                    >Copier</button>
+                                </div>
+                            </div>
+
+                            <div>
+                                <label className="block text-xs uppercase tracking-widest text-cyan-500 mb-1">Clé Éphémère</label>
+                                <div className="flex bg-gray-950 border border-gray-800 rounded p-3 justify-between items-center">
+                                    <span className="font-mono text-green-400">{ssoVault.password}</span>
+                                    <button
+                                        onClick={() => navigator.clipboard.writeText(ssoVault.password)}
+                                        className="text-xs bg-cyan-600 hover:bg-cyan-500 text-white px-3 py-1 rounded transition shadow-lg shadow-cyan-500/30"
+                                    >Copier</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="flex justify-end gap-3">
+                            <a
+                                href={ssoVault.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                onClick={() => setSsoVault(null)}
+                                className="w-full bg-cyan-500 hover:bg-cyan-400 text-gray-950 font-bold py-3 text-center rounded transition font-mono tracking-widest uppercase"
+                            >
+                                Ouvrir le Terminal Hestia
+                            </a>
+                        </div>
+
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

src/pages/app/Store.jsx

@@ -178,7 +178,7 @@ const ProductCard = ({ product, selectedPeriod, categoryName }) => {
 
                 <button 
                     disabled={!priceData.isAvailable}
-                    onClick={() => navigate(`/checkout/${product.id}`)}
+                    onClick={() => navigate(`/checkout/${product.id}?period=${selectedPeriod}`)}
                     className={`w-full py-3 rounded-lg font-bold tracking-widest transition-all flex justify-center items-center space-x-2 
                         ${priceData.isAvailable 
                             ? "bg-cyan-400/10 hover:bg-cyan-400 text-cyan-400 hover:text-gray-900 border border-cyan-400 group-hover:shadow-[0_0_20px_rgba(34,211,238,0.2)]"