Recette SSR

<!DOCTYPE html><html lang="fr"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/assets/app-yW1jEKvs.css" data-precedence="default"/><title>Espace client : profils de démonstration | Démo catalogue fluides</title><meta name="robots" content="noindex"/><link rel="modulepreload" href="/assets/index-Cbfsqsdq.js"/><link rel="modulepreload" href="/assets/react-DmeiICsC.js"/><link rel="modulepreload" href="/assets/schemas-DIlC3hV3.js"/><link rel="modulepreload" href="/assets/espace-client-BSQfkMMa.js"/><link rel="modulepreload" href="/assets/BoutonProfil-mOTXvqxH.js"/><link rel="canonical" href="https://otnpf6qjgg.demo.wassimzo.com/espace-client"/></head><body class="bg-slate-50 font-sans text-slate-900 antialiased"><div class="flex min-h-screen flex-col"><div class="bg-amber-100 px-3 py-1.5 text-center text-xs text-amber-900 sm:text-sm" data-bandeau-demo="true"><strong>Démo – données d’exemple · catalogue et entreprises fictifs</strong><span class="hidden sm:inline"> — aucune donnée, aucun logo, aucun prix ni client réel</span></div><header class="border-b border-slate-200 bg-white"><div class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 px-4 py-3"><a class="flex items-baseline gap-2" href="/"><span class="text-lg font-semibold tracking-tight text-marque">Fluides Rétrofit</span><span class="pastille bg-slate-100 text-slate-600">démo</span></a><a class="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700 hover:border-marque sm:text-sm active" title="Changer de profil de démonstration" href="/espace-client" data-status="active" aria-current="page"><span>Visiteur anonyme · choisir un profil</span></a></div><nav class="mx-auto flex max-w-6xl gap-1 overflow-x-auto px-2 text-sm sm:px-4" aria-label="Navigation principale"><a class="whitespace-nowrap border-b-2 border-transparent px-3 py-2 text-slate-600 hover:text-marque" href="/">Accueil</a><a class="whitespace-nowrap border-b-2 border-transparent px-3 py-2 text-slate-600 hover:text-marque" href="/catalogue">Catalogue</a><a class="whitespace-nowrap border-b-2 border-transparent px-3 py-2 text-slate-600 hover:text-marque border-marque! text-marque! font-medium" href="/espace-client" data-status="active" aria-current="page">Espace client</a><a class="whitespace-nowrap border-b-2 border-transparent px-3 py-2 text-slate-600 hover:text-marque" href="/panier">Panier de devis</a><a class="whitespace-nowrap border-b-2 border-transparent px-3 py-2 text-slate-600 hover:text-marque" href="/admin">Back-office</a><a class="whitespace-nowrap border-b-2 border-transparent px-3 py-2 text-slate-600 hover:text-marque" href="/recette-ssr">Recette SSR</a><a class="whitespace-nowrap border-b-2 border-transparent px-3 py-2 text-slate-600 hover:text-marque" href="/architecture">Architecture</a></nav></header><main class="mx-auto w-full flex-1 px-4 py-6 max-w-6xl"><!--$--><div class="space-y-6"><div><h1 class="text-2xl font-semibold">Espace client</h1><p class="mt-1 max-w-3xl text-sm text-slate-600">Choisissez un profil de démonstration : un clic, sans inscription ni mot de passe. Le profil est porté par un cookie signé par le serveur ; en production, il sera remplacé par l’authentification Supabase.</p></div><div class="grid gap-4 sm:grid-cols-2"><div class="carte flex flex-col " data-profil="fsn-admin"><div class="flex items-start justify-between gap-2"><div><p class="text-xs font-medium uppercase tracking-wide text-slate-500">Froid Service Nord</p><h2 class="text-lg font-semibold">Sophie Martel</h2><p class="text-sm text-marque">Administrateur</p></div></div><p class="mt-2 text-sm text-slate-600">Voit tous les documents de son entreprise et gère les droits des membres.</p><p class="mt-2 text-xs text-slate-500">SIRET <!-- -->999 000 111 00016<!-- --> · attestation <!-- -->AC-DEMO-2024-0117<!-- --> valable jusqu’au<!-- --> <!-- -->31/03/2029</p><div class="mt-4"><form class="contents" action="/api/profil" method="post"><input type="hidden" name="profil" value="fsn-admin"/><input type="hidden" name="retour" value="/espace-client"/><button type="submit" class="bouton-principal">Utiliser ce profil</button></form></div></div><div class="carte flex flex-col " data-profil="fsn-acheteur"><div class="flex items-start justify-between gap-2"><div><p class="text-xs font-medium uppercase tracking-wide text-slate-500">Froid Service Nord</p><h2 class="text-lg font-semibold">Julien Roche</h2><p class="text-sm text-marque">Acheteur</p></div></div><p class="mt-2 text-sm text-slate-600">Voit les documents autorisés par son administrateur et envoie des demandes de devis.</p><p class="mt-2 text-xs text-slate-500">SIRET <!-- -->999 000 111 00016<!-- --> · attestation <!-- -->AC-DEMO-2024-0117<!-- --> valable jusqu’au<!-- --> <!-- -->31/03/2029</p><div class="mt-4"><form class="contents" action="/api/profil" method="post"><input type="hidden" name="profil" value="fsn-acheteur"/><input type="hidden" name="retour" value="/espace-client"/><button type="submit" class="bouton-principal">Utiliser ce profil</button></form></div></div><div class="carte flex flex-col " data-profil="fsn-technicien"><div class="flex items-start justify-between gap-2"><div><p class="text-xs font-medium uppercase tracking-wide text-slate-500">Froid Service Nord</p><h2 class="text-lg font-semibold">Karim Benali</h2><p class="text-sm text-marque">Technicien</p></div></div><p class="mt-2 text-sm text-slate-600">Voit les documents autorisés (tarifs, bons de livraison, certificats) et peut demander un devis.</p><p class="mt-2 text-xs text-slate-500">SIRET <!-- -->999 000 111 00016<!-- --> · attestation <!-- -->AC-DEMO-2024-0117<!-- --> valable jusqu’au<!-- --> <!-- -->31/03/2029</p><div class="mt-4"><form class="contents" action="/api/profil" method="post"><input type="hidden" name="profil" value="fsn-technicien"/><input type="hidden" name="retour" value="/espace-client"/><button type="submit" class="bouton-principal">Utiliser ce profil</button></form></div></div><div class="carte flex flex-col " data-profil="ca-acheteur"><div class="flex items-start justify-between gap-2"><div><p class="text-xs font-medium uppercase tracking-wide text-slate-500">Clim Atlantique</p><h2 class="text-lg font-semibold">Léa Guérin</h2><p class="text-sm text-marque">Acheteur</p></div><span class="pastille bg-red-100 text-red-800">Attestation expirée</span></div><p class="mt-2 text-sm text-slate-600">Voit les documents autorisés par son administrateur et envoie des demandes de devis.</p><p class="mt-2 text-xs text-slate-500">SIRET <!-- -->999 000 222 00027<!-- --> · attestation <!-- -->AC-DEMO-2021-0482<!-- --> valable jusqu’au<!-- --> <!-- -->30/06/2026</p><div class="mt-4"><form class="contents" action="/api/profil" method="post"><input type="hidden" name="profil" value="ca-acheteur"/><input type="hidden" name="retour" value="/espace-client"/><button type="submit" class="bouton-principal">Utiliser ce profil</button></form></div></div></div><div class="flex flex-wrap items-center gap-3 text-sm text-slate-600"><span>Côté fournisseur :</span><form class="contents" action="/api/profil" method="post"><input type="hidden" name="profil" value="marketing"/><input type="hidden" name="retour" value="/admin"/><button type="submit" class="bouton-secondaire">Entrer dans le back-office marketing</button></form></div></div><script>(function(a,f){let l;try{l=JSON.parse(sessionStorage.getItem(a)||"{}")}catch{return}const n=l?.[f||history.state?.__TSR_key];let c=!1;for(const t in n){const e=n[t],o=e?.scrollX,s=e?.scrollY;if(Number.isFinite(o)&&Number.isFinite(s)){if(t==="window")scrollTo(o,s),c=!0;else if(t)try{const r=document.querySelector(t);r&&(r.scrollLeft=o,r.scrollTop=s)}catch{}}}if(c)return;const i=location.hash.slice(1);if(i){const t=history.state?.__hashScrollIntoViewOptions??!0;if(t){const e=document.getElementById(i);e&&e.scrollIntoView(t)}return}scrollTo(0,0)})("tsr-scroll-restoration-v1_3");document.currentScript.remove()</script><!--/$--></main><footer class="border-t border-slate-200 bg-white"><div class="mx-auto flex max-w-6xl flex-col gap-2 px-4 py-4 text-xs text-slate-500 sm:flex-row sm:items-center sm:justify-between"><p>Démonstration technique : entreprises, documents et demandes fictifs, réinitialisés à chaque redémarrage.</p><p class="flex gap-4"><a href="/recette-ssr?page=%2Fespace-client&amp;lancer=true" class="lien">Recette SSR de cette page</a><a class="lien" href="/architecture">Architecture</a></p></div></footer></div><script data-tsr-stream-part="">(self.$R=self.$R||{})["tsr"]=[];self.$_TSR={h(){this.hydrated=!0,this.c()},e(){this.streamEnded=!0,this.c()},c(){this.hydrated&&this.streamEnded&&(delete self.$_TSR,delete self.$R.tsr)},p(e){this.initialized?e():this.buffer.push(e)},buffer:[]};$_TSR.router=($R=>$R[0]={manifest:$R[1]={routes:$R[2]={__root__:$R[3]={preloads:$R[4]=["/assets/index-Cbfsqsdq.js","/assets/react-DmeiICsC.js","/assets/schemas-DIlC3hV3.js"],scripts:$R[5]=[$R[6]={attrs:$R[7]={type:"module",async:!0,src:"/assets/index-Cbfsqsdq.js"}}]},"/espace-client/":$R[8]={preloads:$R[9]=["/assets/espace-client-BSQfkMMa.js","/assets/BoutonProfil-mOTXvqxH.js"]}}},matches:$R[10]=[$R[11]={i:"__root__#",u:1791896600401,s:"success",l:$R[12]={utilisateur:null},ssr:!0},$R[13]={i:"#espace-client##espace-client#",u:1791896600401,s:"success",l:$R[14]={utilisateur:null,profils:$R[15]=[$R[16]={id:"fsn-admin",nom:"Sophie Martel",email:"sophie.martel@froid-service-nord.exemple",staff:!1,role:"admin",entreprise:$R[17]={id:"froid-service-nord",nom:"Froid Service Nord",siret:"999 000 111 00016",ville:"Lille (59)",attestation:"AC-DEMO-2024-0117",attestationValidite:"2029-03-31",attestationExpiree:!1}},$R[18]={id:"fsn-acheteur",nom:"Julien Roche",email:"julien.roche@froid-service-nord.exemple",staff:!1,role:"acheteur",entreprise:$R[19]={id:"froid-service-nord",nom:"Froid Service Nord",siret:"999 000 111 00016",ville:"Lille (59)",attestation:"AC-DEMO-2024-0117",attestationValidite:"2029-03-31",attestationExpiree:!1}},$R[20]={id:"fsn-technicien",nom:"Karim Benali",email:"karim.benali@froid-service-nord.exemple",staff:!1,role:"technicien",entreprise:$R[21]={id:"froid-service-nord",nom:"Froid Service Nord",siret:"999 000 111 00016",ville:"Lille (59)",attestation:"AC-DEMO-2024-0117",attestationValidite:"2029-03-31",attestationExpiree:!1}},$R[22]={id:"ca-acheteur",nom:"Léa Guérin",email:"lea.guerin@clim-atlantique.exemple",staff:!1,role:"acheteur",entreprise:$R[23]={id:"clim-atlantique",nom:"Clim Atlantique",siret:"999 000 222 00027",ville:"Nantes (44)",attestation:"AC-DEMO-2021-0482",attestationValidite:"2026-06-30",attestationExpiree:!0}},$R[24]={id:"marketing",nom:"Équipe marketing",email:"marketing@fournisseur.exemple",staff:!0,role:null,entreprise:null}]},ssr:!0}]})($R["tsr"]);$_TSR.e();{let s=document.currentScript,p;while((p=s.previousElementSibling)&&p.hasAttribute('data-tsr-stream-part'))p.remove();s.remove()}</script><script type="module" async="" src="/assets/index-Cbfsqsdq.js"></script><script>document.currentScript.remove();/*$tsr-stream-boundary*/</script></body></html>