-
- {/* --- EN-TÊTE DU TABLEAU DE BORD --- */}
-
-
-
- Console Opérationnelle
-
-
ID Réseau: usr_8472_alpha
+ // Fonction d'état : Formate le statut du service
+ const getStatusBadge = (status) => {
+ switch (status) {
+ case 'active': return
ACTIF ;
+ case 'pending_setup': return
EN PRÉPARATION ;
+ case 'suspended': return
SUSPENDU ;
+ default: return
{status.toUpperCase()} ;
+ }
+ };
+
+ return (
+
+
+
+
+ {/* GESTION DES ERREURS & CHARGEMENT */}
+ {isLoading && (
+
+ Synchronisation avec l'orchestrateur en cours...
+
+ )}
+
+ {error && (
+
+ )}
+
+ {/* GRILLE DES SERVICES */}
+ {!isLoading && !error && (
+
+
+ {/* Boucle sur les services FOSSBilling */}
+ {orders.map((order) => (
+
navigate(`/services/${order.id}`)} // Redirection future vers les détails
+ >
+
+
+
+ {getServiceIcon(order.title)}
+
+ {getStatusBadge(order.status)}
+
+
+ {order.title}
+
+
+ Facturation : {order.period}
+
+
+
+
+ ID Réseau: #{order.id}
+ Gérer >
+
+
+ ))}
+
+ {/* LA CARTE : OBTENIR UN NOUVEAU PRODUIT */}
+
navigate('/store')} // Remplace /store par l'URL de ton catalogue
+ className="bg-transparent border-2 border-dashed border-gray-700 hover:border-cyan-400 p-6 rounded-xl transition-colors cursor-pointer flex flex-col items-center justify-center text-center group min-h-[200px]"
+ >
+
+
+ Demander une accréditation
+
+
+ Déployer un nouveau serveur Web, VPS ou Cloud.
+
+
+
+
+ )}
-
-
● SYSTÈME NOMINAL
-
Dernière connexion : Aujourd'hui
-
-
-
- {/* --- GRILLE DES MODULES DE L'INFRASTRUCTURE --- */}
-
-
- {/* MODULE 1 : BARE-METAL (HESTIACP) */}
-
-
- {/* MODULE 2 : CLOUD (NEXTCLOUD) */}
-
-
- {/* MODULE 3 : FACTURATION (FOSSBILLING) */}
-
-
EN ATTENTE
-
// Facturation
-
- Centre de gestion FOSSBilling. Historique des paiements et renouvellement des baux réseau.
-
-
-
- Solde Compte: 0.00 €
-
-
- Prochaine Échéance: 12/07/2026
-
-
-
{ e.target.style.backgroundColor = '#FFB800'; e.target.style.color = '#000'; }}
- onMouseOut={(e) => { e.target.style.backgroundColor = 'transparent'; e.target.style.color = '#FFB800'; }}>
- Régler la facture
-
-
-
-
-
- {/* --- TERMINAL DE LOGS (ESTHÉTIQUE SYSADMIN) --- */}
-
-
>_ SYSTEM_LOGS
-
-
[ OK ] Connexion chiffrée établie via TLS v1.3
-
[ OK ] Jetons d'authentification synchronisés avec FOSSBilling API
-
[ INFO ] Vérification des quotas de stockage Nextcloud... Terminée.
-
[ INFO ] 0 ticket(s) de support en attente.
-
> En attente d'instructions..._
-
-
-
- {/* Animation CSS pour le curseur clignotant du terminal */}
-
-
-
- );
+ );
}
\ No newline at end of file
diff --git a/src/pages/app/Store.jsx b/src/pages/app/Store.jsx
new file mode 100644
index 0000000..0c72071
--- /dev/null
+++ b/src/pages/app/Store.jsx
@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getProductList } from '../../services/api';
+import { Server, Database, Cloud, Globe, ShoppingCart, Loader, AlertCircle, Check } from 'lucide-react';
+
+export default function Store() {
+ const navigate = useNavigate();
+ const [products, setProducts] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ // Récupération du catalogue
+ useEffect(() => {
+ const fetchCatalog = async () => {
+ try {
+ const data = await getProductList();
+ // FOSSBilling renvoie les produits dans data.list
+ setProducts(data.list || []);
+ } catch (err) {
+ setError("Impossible de contacter le serveur d'approvisionnement.");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchCatalog();
+ }, []);
+
+ // Radar visuel : Associe une icône selon le nom de la catégorie ou du produit
+ const getCategoryIcon = (text) => {
+ const t = text.toLowerCase();
+ if (t.includes('vps') || t.includes('serveur')) return
;
+ if (t.includes('cloud') || t.includes('nextcloud')) return
;
+ if (t.includes('db') || t.includes('base')) return
;
+ return
;
+ };
+
+ // Extracteur de prix : L'API FOSSBilling a une structure de prix assez profonde
+ const extractMonthlyPrice = (pricing) => {
+ if (pricing?.type === 'free') return 'Gratuit';
+ if (pricing?.type === 'once') return `${pricing.once.price} € (Une fois)`;
+
+ // CORRECTION ICI : Utilisation des crochets pour la clé numérique '1'
+ if (pricing?.type === 'recurrent' && pricing.recurrent['1']) {
+ return `${pricing.recurrent['1'].price} € / mois`;
+ }
+
+ return 'Prix sur demande';
+};
+
+ return (
+
+
+
+
+ {/* GESTION DES ERREURS & CHARGEMENT */}
+ {isLoading && (
+
+ TÉLÉCHARGEMENT DU CATALOGUE...
+
+ )}
+
+ {error && (
+
+ )}
+
+ {/* GRILLE DU CATALOGUE */}
+ {!isLoading && !error && (
+
+
+ {products.map((product) => (
+
+ {/* En-tête de la carte */}
+
+
+ {getCategoryIcon(product.category || product.title)}
+
+
+ {product.title}
+
+
+ {extractMonthlyPrice(product.pricing)}
+
+
+
+ {/* Description du produit */}
+
+ {/* FOSSBilling permet de mettre du HTML dans la description.
+ Ici, on triche un peu en simulant des puces pour le design,
+ mais tu pourras utiliser dangerouslySetInnerHTML si tu as mis du vrai HTML. */}
+
+ {product.description ? (
+
{product.description}
+ ) : (
+ <>
+
Provisionnement instantané
+
Support technique 24/7
+
SLA 99.9%
+
+ )}
+
+
+ {/* Bouton d'action */}
+
navigate(`/checkout/${product.id}`)}
+ className="w-full bg-cyan-400/10 hover:bg-cyan-400 text-cyan-400 hover:text-gray-900 border border-cyan-400 py-3 rounded-lg font-bold tracking-widest transition-all flex justify-center items-center space-x-2 group-hover:shadow-[0_0_20px_rgba(34,211,238,0.2)]"
+ >
+ COMMANDER
+
+
+
+ ))}
+
+
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/src/services/api.js b/src/services/api.js
index 8f868f4..90a66e8 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -42,6 +42,10 @@ export const getClientOrders = () =>
export const getOrderService = (order_id) =>
apiCall(`${BASE_URL}/api/client/order/service`, { id: order_id });
+// Récupère le catalogue public des produits FOSSBilling
+export const getProductList = () =>
+ apiCall(`${BASE_URL}/api/guest/product/get_list`);
+
// ==========================================
// ROUTES PERSONNALISÉES (CUSTOM API)
// ==========================================
diff --git a/vite.config.js b/vite.config.js
index f2d425d..0cc4800 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,9 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
- plugins: [react()],
+ plugins: [react(), tailwindcss()],
server: {
proxy: {
// Toutes les requêtes qui commencent par /api iront vers ton FOSSBilling