add register and see panel

src/App.jsx

@@ -17,7 +17,8 @@ import Home from './pages/public/Home';
 // Import des Pages Privées (Espace Client)
 import Dashboard from './pages/app/Dashboard';
 import Store from './pages/app/Store';
-//import Services from './pages/app/Services';
+import Checkout from './pages/app/Checkout';
+import Services from './pages/app/Services';
 
 export default function App() {
   return (
@@ -44,7 +45,8 @@ export default function App() {
           <Route element={<AppLayout />}>
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/store" element={<Store />} />
-            {/* <Route path="/services" element={<Services />} /> */}
+            <Route path="/checkout/:productId" element={<Checkout />} />
+            <Route path="/services" element={<Services />} />
           </Route>
           
         </Route>

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
+                if (data.list) {
-                setOrders(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)]" 

src/services/api.js

@@ -1,28 +1,67 @@
 const BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
 const CUSTOM_API_BASE_URL = import.meta.env.VITE_CUSTOM_API_BASE_URL || '';
 
-const apiCall = async (url, body = null) => {
+// Le moteur de requête unifié et intelligent
-    // Configuration de base pour l'appel réseau
+const apiCall = async (endpoint, param2 = 'GET', param3 = null) => {
+    let method = 'GET';
+    let body = null;
+
+    // DÉTECTION DE SIGNATURE (Le bouclier anti-crash)
+    if (typeof param2 === 'string') {
+        // Cas 1 : On a bien envoyé (URL, "POST", {données})
+        method = param2.toUpperCase();
+        body = param3;
+    } else if (typeof param2 === 'object' && param2 !== null) {
+        // Cas 2 : L'ancienne méthode a envoyé (URL, {données})
+        // On redirige l'objet vers le body, et on force en POST
+        body = param2;
+        method = (typeof param3 === 'string') ? param3.toUpperCase() : 'POST';
+    }
+
+    // 1. Récupération du sésame
+    const token = localStorage.getItem('token');
+
+    // 2. Préparation de l'enveloppe
+    const headers = {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+    };
+
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+
+    // 3. Configuration finale garantie sans objets égarés
     const options = {
-        method: body ? 'POST' : 'GET', // Devient GET s'il n'y a pas de body (ex: getClientProfile)
+        method: method,
-        headers: {
+        headers: headers,
-            'Content-Type': 'application/json',
+        credentials: 'include'
-            'Accept': 'application/json',
-        },
-        credentials: 'include', // CRUCIAL : Maintient la session active avec FOSSBilling
     };
 
     if (body) {
         options.body = JSON.stringify(body);
     }
 
-    const response = await fetch(url, options);
+    try {
-    const data = await response.json();
+        const response = await fetch(endpoint, options);
-    
+
-    // Interception des erreurs de l'API FOSSBilling
+        if (response.status === 401 || response.status === 403) {
-    if (data.error) throw new Error(data.error.message);
+            throw new Error("Accès refusé. Session expirée ou non valide.");
-    
+        }
-    return data.result;
+
+        const data = await response.json();
+
+        // Gestion des erreurs internes de l'API
+        if (data.error) {
+            throw new Error(data.error.message || "Erreur renvoyée par le serveur de facturation.");
+        }
+
+        return data.result || data;
+
+    } catch (error) {
+        console.error(`[API FAIL] ${method} ${endpoint} :`, error);
+        throw error;
+    }
 };
 
 // ==========================================
@@ -32,9 +71,6 @@ const apiCall = async (url, body = null) => {
 export const loginClient = (email, password) =>
     apiCall(`${BASE_URL}/api/guest/client/login`, { email, password });
 
-export const getClientProfile = () =>
-    apiCall(`${BASE_URL}/api/client/profile/get`);
-
 // Récupère la liste des services/commandes du client
 export const getClientOrders = () =>
     apiCall(`${BASE_URL}/api/client/order/get_list`);
@@ -47,6 +83,39 @@ export const getOrderService = (order_id) =>
 export const getProductList = () =>
     apiCall(`${BASE_URL}/api/guest/product/get_list`);
 
+// Vide le panier (Action PUBLIQUE : on passe par l'API Guest)
+export const resetCart = async () => {
+    try {
+        // Changement : api/guest/ au lieu de api/client/
+        const cart = await apiCall(`${BASE_URL}/api/guest/cart/get`, 'GET');
+
+        if (cart && cart.items && cart.items.length > 0) {
+            for (const item of cart.items) {
+                // Changement : api/guest/
+                await apiCall(`${BASE_URL}/api/guest/cart/remove_item`, 'POST', { id: item.id });
+            }
+        }
+    } catch (err) {
+        console.warn("Nettoyage du panier ignoré :", err);
+    }
+};
+
+// Ajoute un produit au panier avec ses options étalées à la racine
+export const addToCart = (productId, period, additionalData = {}) =>
+    apiCall(`${BASE_URL}/api/guest/cart/add_item`, 'POST', {
+        id: productId,
+        period: period,
+        ...additionalData // Les 3 petits points "étalent" le contenu de l'objet
+    });
+
+// Valide le panier (Action PRIVÉE : on reste sur l'API Client pour générer la facture)
+export const checkoutCart = () =>
+    apiCall(`${BASE_URL}/api/client/cart/checkout`, 'POST');
+
+// Récupère les informations du client connecté
+export const getClientProfile = () =>
+    apiCall(`${BASE_URL}/api/client/profile/get`, 'GET');
+
 // ==========================================
 // ROUTES PERSONNALISÉES (CUSTOM API)
 // ==========================================
@@ -65,7 +134,7 @@ export const registerUnifiedClient = async (email, username, password, firstName
                 last_name: lastName
             })
         });
-        
+
         const data = await response.json();
         if (data.error) throw new Error(data.error.message);
         return data.result;
@@ -73,4 +142,51 @@ export const registerUnifiedClient = async (email, username, password, firstName
         console.error("Erreur lors de l'inscription unifiée :", err);
         throw new Error("Échec de l'inscription. Veuillez réessayer plus tard.");
     }
-}
+}
+
+// Récupère la liste de toutes les commandes actives du client
+export const getMyServices = () =>
+    apiCall(`${BASE_URL}/api/client/order/get_list`, 'GET');
+
+// Récupère les détails secrets d'un service (dont le mot de passe HestiaCP/VPS)
+export const getServiceDetails = (orderId) =>
+    apiCall(`${BASE_URL}/api/client/order/get`, 'POST', { id: orderId });
+
+// Récupère les secrets spécifiques du service physique attaché à une commande
+export const getHostingServiceDetails = (orderId) =>
+    apiCall(`${BASE_URL}/api/client/order/service`, 'POST', { id: orderId });
+
+// Force la réinitialisation du mot de passe sur le serveur distant (HestiaCP)
+export const resetHostingPassword = (orderId, newPassword) =>
+    apiCall(`${BASE_URL}/api/client/servicehosting/change_password`, 'POST', {
+        order_id: orderId,
+        password: newPassword,
+        password_confirm: newPassword
+    });
+
+// Déclenche le sas de connexion SSO via le navigateur (Ne pas utiliser apiCall ici)
+export const launchSSOGateway = (username, password) => {
+    const form = document.createElement('form');
+    form.method = 'POST';
+
+    // Tu peux utiliser ta BASE_URL si elle pointe vers web.gise.be
+    // Sinon, on garde l'URL absolue vers ton API personnalisée
+    form.action = `${CUSTOM_API_BASE_URL}/custom_api/sso.php`;
+    form.target = '_blank';
+
+    const userField = document.createElement('input');
+    userField.type = 'hidden';
+    userField.name = 'user';
+    userField.value = username;
+    form.appendChild(userField);
+
+    const passField = document.createElement('input');
+    passField.type = 'hidden';
+    passField.name = 'password';
+    passField.value = password;
+    form.appendChild(passField);
+
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+};

src/services/useVPC.js

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+
+// Le moteur logique pour la gestion des groupes d'infrastructures
+export const useVPC = () => {
+    // 1. Initialisation : On cherche s'il y a déjà des VPC sauvegardés
+    const [vpcs, setVpcs] = useState(() => {
+        const saved = localStorage.getItem('nexus_vpcs');
+        return saved ? JSON.parse(saved) : [];
+    });
+
+    // 2. Sauvegarde automatique à chaque modification
+    useEffect(() => {
+        localStorage.setItem('nexus_vpcs', JSON.stringify(vpcs));
+    }, [vpcs]);
+
+    // 3. Créer un nouveau VPC
+    const createVPC = (name) => {
+        if (!name.trim()) return;
+        const newVpc = { 
+            id: `vpc_${Date.now()}`, 
+            name: name, 
+            services: [] // Tableau qui contiendra les IDs des commandes (ex: [13, 14])
+        };
+        setVpcs([...vpcs, newVpc]);
+    };
+
+    // 4. Supprimer un VPC (Les services à l'intérieur ne sont pas supprimés, ils redeviennent "Libres")
+    const deleteVPC = (vpcId) => {
+        setVpcs(vpcs.filter(vpc => vpc.id !== vpcId));
+    };
+
+    // 5. Assigner un service à un VPC
+    const assignToVPC = (serviceId, targetVpcId) => {
+        setVpcs(vpcs.map(vpc => {
+            // On retire d'abord le service de tous les VPC pour éviter les doublons (1 service = 1 VPC max)
+            const cleanedServices = vpc.services.filter(id => id !== serviceId);
+            
+            // Si c'est le VPC cible, on ajoute le service
+            if (vpc.id === targetVpcId) {
+                return { ...vpc, services: [...cleanedServices, serviceId] };
+            }
+            // Sinon on retourne le VPC nettoyé
+            return { ...vpc, services: cleanedServices };
+        }));
+    };
+
+    // 6. Retirer un service d'un VPC (Le rendre "Libre")
+    const removeFromVPC = (serviceId) => {
+        setVpcs(vpcs.map(vpc => ({
+            ...vpc,
+            services: vpc.services.filter(id => id !== serviceId)
+        })));
+    };
+
+    return { vpcs, createVPC, deleteVPC, assignToVPC, removeFromVPC };
+};