Spaces:
Sleeping
Sleeping
| import { useState, useRef, useCallback } from "react"; | |
| import { | |
| LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, | |
| BarChart, Bar, ResponsiveContainer, AreaChart, Area | |
| } from "recharts"; | |
| /* ══════════ DONNÉES KPI ══════════ */ | |
| // Latence par endpoint (3 calls : search, competences, match) | |
| const kpiLatency = [ | |
| { t:"Lun", search:1.2, competences:1.8, match:2.9 }, | |
| { t:"Mar", search:1.4, competences:2.1, match:3.2 }, | |
| { t:"Mer", search:1.1, competences:1.6, match:2.6 }, | |
| { t:"Jeu", search:1.8, competences:2.4, match:3.7 }, | |
| { t:"Ven", search:1.3, competences:1.9, match:2.8 }, | |
| { t:"Sam", search:1.0, competences:1.5, match:2.3 }, | |
| { t:"Dim", search:0.9, competences:1.3, match:2.0 }, | |
| ]; | |
| // Requêtes/jour par endpoint | |
| const kpiEndpoints = [ | |
| { t:"Lun", search:85, extract:42, competences:38, match:31 }, | |
| { t:"Mar", search:91, extract:48, competences:44, match:37 }, | |
| { t:"Mer", search:78, extract:38, competences:35, match:28 }, | |
| { t:"Jeu", search:105, extract:61, competences:57, match:49 }, | |
| { t:"Ven", search:96, extract:54, competences:50, match:42 }, | |
| { t:"Sam", search:45, extract:22, competences:19, match:14 }, | |
| { t:"Dim", search:38, extract:18, competences:15, match:10 }, | |
| ]; | |
| // Tokens par type d'appel LLM (3 call types, coûts réels) | |
| const kpiLLM = [ | |
| { t:"00h", search:320, comp:0, match:0, cost:0.001 }, | |
| { t:"04h", search:110, comp:0, match:0, cost:0.000 }, | |
| { t:"08h", search:980, comp:760, match:1240, cost:0.009 }, | |
| { t:"12h", search:1640,comp:1280, match:2080, cost:0.019 }, | |
| { t:"16h", search:1820,comp:1420, match:2310, cost:0.022 }, | |
| { t:"20h", search:1240,comp:970, match:1580, cost:0.015 }, | |
| { t:"23h", search:480, comp:360, match:580, cost:0.006 }, | |
| ]; | |
| // Usage hebdo par persona + adoption match | |
| const kpiUsage = [ | |
| { t:"S1", sophie:42, karim:18, match:18 }, | |
| { t:"S2", sophie:55, karim:27, match:29 }, | |
| { t:"S3", sophie:61, karim:35, match:38 }, | |
| { t:"S4", sophie:78, karim:44, match:51 }, | |
| { t:"S5", sophie:90, karim:52, match:64 }, | |
| { t:"S6", sophie:105,karim:63, match:79 }, | |
| ]; | |
| // Taux d'adoption match (% users who use match after competences) | |
| const kpiMatchAdoption = [ | |
| { t:"S1", taux:30, retention:45 }, | |
| { t:"S2", taux:38, retention:52 }, | |
| { t:"S3", taux:47, retention:61 }, | |
| { t:"S4", taux:56, retention:69 }, | |
| { t:"S5", taux:64, retention:75 }, | |
| { t:"S6", taux:71, retention:82 }, | |
| ]; | |
| // Scores match distribution hebdo | |
| const kpiMatchScores = [ | |
| { t:"S1", excellent:18, bon:31, partiel:35, faible:16, score_moy:62 }, | |
| { t:"S2", excellent:22, bon:35, partiel:31, faible:12, score_moy:66 }, | |
| { t:"S3", excellent:28, bon:38, partiel:26, faible:8, score_moy:71 }, | |
| { t:"S4", excellent:33, bon:40, partiel:22, faible:5, score_moy:75 }, | |
| { t:"S5", excellent:38, bon:42, partiel:16, faible:4, score_moy:79 }, | |
| { t:"S6", excellent:44, bon:41, partiel:12, faible:3, score_moy:83 }, | |
| ]; | |
| // Métriques métier : précision, satisfaction, match_rate | |
| const kpiMetier = [ | |
| { t:"S1", precision:71, satisfaction:68, export:55, match_score:62 }, | |
| { t:"S2", precision:74, satisfaction:72, export:61, match_score:66 }, | |
| { t:"S3", precision:79, satisfaction:75, export:67, match_score:71 }, | |
| { t:"S4", precision:83, satisfaction:80, export:74, match_score:75 }, | |
| { t:"S5", precision:87, satisfaction:84, export:79, match_score:79 }, | |
| { t:"S6", precision:91, satisfaction:89, export:85, match_score:83 }, | |
| ]; | |
| // Compétences détectées / validées / matchées | |
| const kpiCompetences = [ | |
| { t:"S1", detected:3.1, validated:2.4, matched:1.8 }, | |
| { t:"S2", detected:3.4, validated:2.8, matched:2.2 }, | |
| { t:"S3", detected:4.0, validated:3.3, matched:2.7 }, | |
| { t:"S4", detected:4.2, validated:3.6, matched:3.1 }, | |
| { t:"S5", detected:4.6, validated:4.0, matched:3.5 }, | |
| { t:"S6", detected:5.0, validated:4.4, matched:3.9 }, | |
| ]; | |
| /* ══════════ PERSONAS ══════════ */ | |
| const PERSONAS = { | |
| sophie: { | |
| id: "sophie", name: "Sophie", age: 38, icon: "👩💼", | |
| role: "Conseillère France Travail — Caen", | |
| color: "#059669", colorSoft: "#ECFDF5", colorMid: "#A7F3D0", | |
| defaultMode: "keywords", | |
| tagline: "Code ROME en 30 sec → PPAE sans ressaisie", | |
| context: "Open-space bruyant. Écran 19\". PPAE + Emploi Store ouverts. 23 mails non lus. Demandeur en face. 35 min max par entretien.", | |
| goal: "Identifier en 2 clics les codes ROME + NAF correspondant au profil oral du demandeur, pour orienter et remplir le PPAE sans friction.", | |
| skills: ["Écoute active","Reformulation métier","Connaissance ROME","Orientation emploi","Saisie PPAE","Gestion du temps"], | |
| pains: ["847 résultats non triés → signal noyé dans le bruit","Codes NAF hybrides (ex: BTP + logistique)","Temps de saisie > temps d'échange humain"], | |
| success: "Elle tourne l'écran vers le demandeur, clique Copier, colle dans le PPAE. Zéro ressaisie.", | |
| rgaa: ["Contraste AA minimum","Navigation clavier","Lecteur d'écran"], | |
| quickActions: ["Copier ROME","Copier NAF","Envoyer PPAE"], | |
| placeholder: "ex: agent logistique polyvalent, infirmière coordinatrice…", | |
| tip: "💡 Dites simplement le métier décrit par le demandeur — le micro est activable", | |
| }, | |
| karim: { | |
| id: "karim", name: "Karim", age: 44, icon: "🎯", | |
| role: "Chasseur de Tête indépendant — Paris/TGV", | |
| color: "#2563EB", colorSoft: "#EFF6FF", colorMid: "#BFDBFE", | |
| defaultMode: "annonce", | |
| tagline: "Annonce brute → ROME + NAF + Compétences en 12 sec", | |
| context: "MacBook en mobilité. ATS Bullhorn ouvert. Annonce client reçue à 18h avec fautes et acronymes. Brief client à 9h le lendemain.", | |
| goal: "Extraire en 10 secondes les codes ROME + NAF d'une annonce brute pour lancer immédiatement le sourcing LinkedIn Recruiter.", | |
| skills: ["Lecture annonce","Sourcing LinkedIn","Qualification profil","Connaissance secteurs","Négociation","Gestion mandats"], | |
| pains: ["Annonce non normalisée → perte de temps de qualification","Secteur mentionné sans code NAF (ex: 'industrie métallurgique')","Plusieurs ROME possibles → hésitation sur le sourcing"], | |
| success: "Il copie le code ROME, ouvre LinkedIn Recruiter, colle dans le filtre, lance la recherche. 12 secondes chrono.", | |
| rgaa: ["Copier en 1 clic","Résultat lisible mobile","Export rapide"], | |
| quickActions: ["Copier ROME","Copier NAF","Ouvrir LinkedIn","Exporter fiche"], | |
| placeholder: "Collez l'annonce brute complète — même avec fautes et acronymes internes…", | |
| tip: "💡 Collez l'annonce telle quelle, l'IA normalise et extrait ROME, NAF et compétences", | |
| }, | |
| }; | |
| /* ══════════ SECTEURS ══════════ */ | |
| const SECTORS = [ | |
| {id:"all",label:"Tous secteurs",icon:"🌐"}, | |
| {id:"IT",label:"IT & Digital",icon:"💻"}, | |
| {id:"Santé",label:"Santé & Social",icon:"🏥"}, | |
| {id:"BTP",label:"BTP & Industrie",icon:"🏗"}, | |
| {id:"Commerce",label:"Commerce & Vente",icon:"🛒"}, | |
| {id:"RH",label:"RH & Formation",icon:"👥"}, | |
| {id:"Finance",label:"Finance & Gestion",icon:"📊"}, | |
| {id:"Transport",label:"Transport & Logistique",icon:"🚛"}, | |
| ]; | |
| const LEVELS = [ | |
| {id:"all",label:"Tous niveaux"},{id:"CAP",label:"CAP/BEP"}, | |
| {id:"BAC",label:"Bac"},{id:"BAC+2",label:"Bac+2"}, | |
| {id:"BAC+3",label:"Bac+3/4"},{id:"BAC+5",label:"Bac+5+"}, | |
| ]; | |
| /* ══════════ ATOMS ══════════ */ | |
| const Spinner = () => ( | |
| <div style={{width:16,height:16,border:"2px solid #E2E8F0",borderTop:"2px solid #2563EB",borderRadius:"50%",animation:"spin .7s linear infinite",flexShrink:0}}/> | |
| ); | |
| const Skel = ({w="100%",h=14,r=6,mb=0}) => ( | |
| <div style={{width:w,height:h,borderRadius:r,marginBottom:mb,background:"linear-gradient(90deg,#F1F5F9 25%,#E2E8F0 50%,#F1F5F9 75%)",backgroundSize:"200% 100%",animation:"shimmer 1.4s infinite"}}/> | |
| ); | |
| const BdgType = ({type}) => { | |
| const m = { | |
| exact:{bg:"#DCFCE7",c:"#15803D",br:"#86EFAC",l:"Exact"}, | |
| proche:{bg:"#DBEAFE",c:"#1D4ED8",br:"#93C5FD",l:"Proche"}, | |
| "associé":{bg:"#FEF3C7",c:"#B45309",br:"#FCD34D",l:"Associé"}, | |
| naf:{bg:"#EDE9FE",c:"#6D28D9",br:"#C4B5FD",l:"NAF"}, | |
| clé:{bg:"#DCFCE7",c:"#166534",br:"#86EFAC",l:"Clé métier"}, | |
| transverse:{bg:"#F3E8FF",c:"#7E22CE",br:"#D8B4FE",l:"Transverse"}, | |
| }[type]||{bg:"#F1F5F9",c:"#475569",br:"#CBD5E1",l:type}; | |
| return <span style={{display:"inline-flex",alignItems:"center",padding:"2px 8px",borderRadius:20,fontSize:10,fontWeight:800,letterSpacing:"0.07em",textTransform:"uppercase",background:m.bg,color:m.c,border:`1px solid ${m.br}`}}>{m.l}</span>; | |
| }; | |
| function CopyBtn({text,label="Copier",onCopy,accent="#2563EB"}){ | |
| const[ok,setOk]=useState(false); | |
| return <button onClick={()=>{navigator.clipboard.writeText(text);setOk(true);onCopy?.();setTimeout(()=>setOk(false),1800);}} style={{display:"inline-flex",alignItems:"center",gap:4,padding:"5px 12px",borderRadius:6,fontSize:11,fontWeight:600,border:`1px solid ${ok?"#A7F3D0":"#E2E8F0"}`,background:ok?"#ECFDF5":"#F8FAFC",color:ok?"#059669":"#6B7280",cursor:"pointer",transition:"all .2s",whiteSpace:"nowrap",flexShrink:0}}> | |
| {ok?"✓":"⎘"} {ok?"Copié":label} | |
| </button>; | |
| } | |
| function exportCSV(rows, filename="export") { | |
| const csv = rows.map(r=>r.map(v=>`"${String(v).replace(/"/g,'""')}"`).join(";")).join("\n"); | |
| const a = document.createElement("a"); | |
| a.href = "data:text/csv;charset=utf-8,\uFEFF"+encodeURIComponent(csv); | |
| a.download = `${filename}_${Date.now()}.csv`; | |
| a.click(); | |
| } | |
| /* ══════════ DOSSIER LIGHT ATOMS ══════════ */ | |
| const DTag = ({label,color}) => ( | |
| <span style={{background:color+"18",color,border:`1px solid ${color}44`,padding:"2px 10px",borderRadius:20,fontSize:11,fontWeight:600}}>{label}</span> | |
| ); | |
| const DCard = ({children,style={}}) => ( | |
| <div style={{background:"#FFFFFF",border:"1px solid #E2E8F0",borderRadius:12,padding:20,boxShadow:"0 1px 3px rgba(0,0,0,.05)",...style}}>{children}</div> | |
| ); | |
| const DSec = ({title,children}) => ( | |
| <div style={{marginBottom:24}}> | |
| <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:12}}> | |
| <div style={{width:3,height:20,background:"#2563EB",borderRadius:2}}/> | |
| <h3 style={{margin:0,fontSize:11,fontFamily:"Syne,sans-serif",color:"#2563EB",letterSpacing:"0.1em",textTransform:"uppercase"}}>{title}</h3> | |
| </div> | |
| {children} | |
| </div> | |
| ); | |
| const DStep = ({n,label,detail,tags}) => ( | |
| <div style={{display:"flex",gap:12,marginBottom:14}}> | |
| <div style={{minWidth:26,height:26,borderRadius:"50%",background:"#2563EB",color:"#FFF",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:800,fontSize:12,fontFamily:"Syne,sans-serif",flexShrink:0}}>{n}</div> | |
| <div> | |
| <div style={{color:"#0F172A",fontWeight:600,fontSize:13}}>{label}</div> | |
| {detail&&<div style={{color:"#6B7280",fontSize:11,marginTop:3,lineHeight:1.6}}>{detail}</div>} | |
| {tags&&<div style={{marginTop:6,display:"flex",flexWrap:"wrap",gap:5}}>{tags.map((t,i)=><DTag key={i} label={t.l} color={t.c}/>)}</div>} | |
| </div> | |
| </div> | |
| ); | |
| const KPIBox = ({label,value,unit,delta,color}) => ( | |
| <div style={{background:color+"12",border:`1px solid ${color}33`,borderRadius:10,padding:"14px 18px",flex:1,minWidth:120,boxShadow:"0 1px 2px rgba(0,0,0,.04)"}}> | |
| <div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.08em"}}>{label}</div> | |
| <div style={{color,fontSize:24,fontWeight:800,fontFamily:"Syne,sans-serif",marginTop:4}}>{value}<span style={{fontSize:12,marginLeft:4}}>{unit}</span></div> | |
| {delta!=null&&<div style={{color:delta>0?"#059669":"#E11D48",fontSize:11,marginTop:2}}>{delta>0?"▲":"▼"} {Math.abs(delta)}% vs S-1</div>} | |
| </div> | |
| ); | |
| const TT = {contentStyle:{background:"#FFFFFF",border:"1px solid #E2E8F0",color:"#0F172A",fontSize:11,borderRadius:8,boxShadow:"0 4px 12px rgba(0,0,0,.1)"}}; | |
| /* ══════════ MATCH ANNONCES PAR COMPÉTENCES ══════════ */ | |
| function MatchAnnonces({competences, codes, persona}) { | |
| const pc = PERSONAS[persona]; | |
| const[annonce,setAnnonce]=useState(""); | |
| const[loading,setLoading]=useState(false); | |
| const[result,setResult]=useState(null); | |
| const[error,setError]=useState(""); | |
| const[open,setOpen]=useState(false); | |
| const fileRef=useRef(); | |
| const allCompetences = competences | |
| ? Object.values(competences).flat() | |
| : []; | |
| const match = useCallback(async() => { | |
| if(!annonce.trim()||!allCompetences.length) return; | |
| setLoading(true); setResult(null); setError(""); | |
| try { | |
| const res = await fetch("/api/claude", { | |
| method:"POST", headers:{"Content-Type":"application/json"}, | |
| body: JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:1200, | |
| messages:[{role:"user",content: | |
| `Expert RH et référentiel ROME. | |
| Compétences du profil : ${allCompetences.join(", ")} | |
| Codes ROME du profil : ${codes.join(", ")} | |
| Annonce d'emploi : | |
| ${annonce.slice(0,3000)} | |
| Analyse le niveau de correspondance. Retourne UNIQUEMENT JSON valide sans markdown : | |
| {"score":85,"niveau":"Excellent|Bon|Partiel|Faible","titre_poste":"...","competences_matchees":["..."],"competences_manquantes":["..."],"competences_bonus":["compétences dans l'annonce non requises mais utiles"],"rome_annonce":"XXXXX","recommandation":"2-3 phrases d'analyse pour le recruteur/conseiller","points_forts":["2-3 atouts du profil pour ce poste"],"points_vigilance":["1-2 points à vérifier en entretien"]}` | |
| }]}) | |
| }); | |
| const data = await res.json(); | |
| const raw = data.content?.[0]?.text||""; | |
| setResult(JSON.parse(raw.replace(/```json|```/g,"").trim())); | |
| } catch{ setError("Erreur d'analyse. Réessayez."); } | |
| finally{ setLoading(false); } | |
| },[annonce, allCompetences, codes]); | |
| const scoreColor = (s) => s>=80?"#059669":s>=60?"#D97706":s>=40?"#EA580C":"#E11D48"; | |
| const scoreLabel = (s) => s>=80?"Excellent":s>=60?"Bon":s>=40?"Partiel":"Faible"; | |
| const scoreBg = (s) => s>=80?"#ECFDF5":s>=60?"#FFFBEB":s>=40?"#FFF7ED":"#FFF1F2"; | |
| if(!allCompetences.length) return null; | |
| return ( | |
| <div style={{background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:14,overflow:"hidden",boxShadow:"0 1px 2px rgba(0,0,0,.05)",marginTop:12}}> | |
| <button onClick={()=>setOpen(o=>!o)} style={{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 20px",background:"none",border:"none",cursor:"pointer",textAlign:"left",transition:"background .15s"}} onMouseEnter={e=>e.currentTarget.style.background="#F8FAFC"} onMouseLeave={e=>e.currentTarget.style.background="none"}> | |
| <div style={{display:"flex",alignItems:"center",gap:10}}> | |
| <div style={{width:32,height:32,borderRadius:9,background:"linear-gradient(135deg,#7C3AED20,#2563EB20)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:16,border:"1.5px solid #C7D2FE"}}>🎯</div> | |
| <div> | |
| <div style={{fontSize:14,fontWeight:700,color:"#0F172A"}}>Matcher une annonce</div> | |
| <div style={{fontSize:11,color:"#9CA3AF"}}>Score de correspondance profil ↔ offre d'emploi · {allCompetences.length} compétences disponibles</div> | |
| </div> | |
| </div> | |
| <span style={{fontSize:16,color:"#9CA3AF",transition:"transform .2s",transform:open?"rotate(180deg)":"none"}}>⌄</span> | |
| </button> | |
| {open&&( | |
| <div style={{padding:"0 20px 20px",animation:"fadeIn .3s ease"}}> | |
| <div style={{height:1,background:"#E2E8F0",marginBottom:16}}/> | |
| {/* Compétences disponibles */} | |
| <div style={{background:"#F8FAFC",borderRadius:10,padding:"12px 14px",marginBottom:14,border:"1px solid #E2E8F0"}}> | |
| <div style={{fontSize:10.5,fontWeight:700,color:"#9CA3AF",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:8}}>Profil — {allCompetences.length} compétences à matcher</div> | |
| <div style={{display:"flex",flexWrap:"wrap",gap:6}}> | |
| {allCompetences.slice(0,20).map((c,i)=>( | |
| <span key={i} style={{padding:"3px 10px",borderRadius:20,fontSize:11,fontWeight:500,background:pc.colorSoft,color:pc.color,border:`1px solid ${pc.colorMid}`}}>{c}</span> | |
| ))} | |
| {allCompetences.length>20&&<span style={{padding:"3px 10px",borderRadius:20,fontSize:11,color:"#9CA3AF"}}>+{allCompetences.length-20} autres</span>} | |
| </div> | |
| </div> | |
| {/* Input annonce */} | |
| <div style={{marginBottom:12}}> | |
| <textarea value={annonce} onChange={e=>setAnnonce(e.target.value)} rows={5} | |
| placeholder="Collez ici l'offre d'emploi à évaluer pour ce profil…" | |
| style={{width:"100%",background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:10,padding:"12px 14px",fontSize:13,color:"#0F172A",outline:"none",resize:"vertical",lineHeight:1.7,transition:"all .2s"}} | |
| onFocus={e=>{e.target.style.borderColor=pc.color;e.target.style.boxShadow=`0 0 0 3px ${pc.color}18`}} | |
| onBlur={e=>{e.target.style.borderColor="#E2E8F0";e.target.style.boxShadow="none"}}/> | |
| </div> | |
| <div style={{display:"flex",gap:9,marginBottom:16}}> | |
| <button onClick={()=>fileRef.current?.click()} style={{display:"flex",alignItems:"center",gap:5,padding:"8px 14px",borderRadius:8,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:12,fontWeight:600,cursor:"pointer"}}>📎 Fichier</button> | |
| <input ref={fileRef} type="file" accept=".txt,.doc,.docx,.pdf" style={{display:"none"}} onChange={e=>{const f=e.target.files?.[0];if(!f)return;const r=new FileReader();r.onload=ev=>setAnnonce(ev.target.result);r.readAsText(f)}}/> | |
| <button onClick={match} disabled={loading||!annonce.trim()} | |
| style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8,padding:"10px",borderRadius:9,background:loading||!annonce.trim()?"#F1F5F9":"linear-gradient(135deg,#7C3AED,#2563EB)",border:"none",color:loading||!annonce.trim()?"#9CA3AF":"#FFF",fontWeight:700,fontSize:13,cursor:loading||!annonce.trim()?"not-allowed":"pointer",boxShadow:!loading&&annonce.trim()?"0 2px 10px rgba(124,58,237,.3)":"none"}}> | |
| {loading?<><Spinner/>Calcul du score…</>:<>⚡ Calculer le score de match</>} | |
| </button> | |
| </div> | |
| {error&&<div style={{padding:"12px 16px",background:"#FFF1F2",border:"1px solid #FECDD3",borderRadius:9,color:"#9F1239",fontSize:12,marginBottom:12}}>⚠ {error}</div>} | |
| {loading&&( | |
| <div style={{display:"flex",flexDirection:"column",gap:10}}> | |
| <div style={{background:"#F8FAFC",borderRadius:12,padding:20,border:"1px solid #E2E8F0"}}> | |
| <Skel w="40%" h={40} r={8} mb={14}/><Skel w="70%" h={13} mb={8}/><Skel w="55%" h={13}/> | |
| </div> | |
| </div> | |
| )} | |
| {result&&( | |
| <div style={{animation:"fadeIn .4s ease",display:"flex",flexDirection:"column",gap:12}}> | |
| {/* Score hero */} | |
| <div style={{background:scoreBg(result.score),border:`2px solid ${scoreColor(result.score)}33`,borderRadius:14,padding:"20px 22px",display:"flex",alignItems:"center",gap:20}}> | |
| <div style={{flexShrink:0,textAlign:"center"}}> | |
| <div style={{fontSize:52,fontWeight:900,color:scoreColor(result.score),lineHeight:1,fontFamily:"Syne,sans-serif"}}>{result.score}</div> | |
| <div style={{fontSize:11,fontWeight:700,color:scoreColor(result.score),marginTop:2}}>/100</div> | |
| </div> | |
| <div style={{flex:1}}> | |
| <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:8,flexWrap:"wrap"}}> | |
| <span style={{background:scoreColor(result.score),color:"#FFF",fontSize:12,fontWeight:800,padding:"4px 14px",borderRadius:20}}>{scoreLabel(result.score)}</span> | |
| {result.titre_poste&&<span style={{fontSize:13,fontWeight:700,color:"#0F172A"}}>{result.titre_poste}</span>} | |
| {result.rome_annonce&&<span style={{fontFamily:"monospace",fontSize:12,fontWeight:700,color:"#2563EB",background:"#EFF6FF",padding:"2px 9px",borderRadius:6,border:"1px solid #BFDBFE"}}>{result.rome_annonce}</span>} | |
| </div> | |
| {/* Score bar */} | |
| <div style={{height:8,background:"rgba(0,0,0,.08)",borderRadius:4,overflow:"hidden",marginBottom:8}}> | |
| <div style={{height:"100%",width:`${result.score}%`,background:`linear-gradient(90deg,${scoreColor(result.score)},${scoreColor(result.score)}CC)`,borderRadius:4,transition:"width 1.2s cubic-bezier(.4,0,.2,1)"}}/> | |
| </div> | |
| <p style={{fontSize:13,color:"#374151",lineHeight:1.65,margin:0}}>{result.recommandation}</p> | |
| </div> | |
| </div> | |
| {/* 3 colonnes : matchées / manquantes / bonus */} | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:10}}> | |
| <div style={{background:"#ECFDF5",borderRadius:12,padding:"14px 16px",border:"1.5px solid #A7F3D0"}}> | |
| <div style={{fontSize:10.5,fontWeight:800,color:"#059669",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>✓ Matchées ({result.competences_matchees?.length||0})</div> | |
| <div style={{display:"flex",flexDirection:"column",gap:5}}> | |
| {(result.competences_matchees||[]).map((c,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"#065F46"}}><span style={{color:"#059669",flexShrink:0}}>●</span>{c}</div>)} | |
| </div> | |
| </div> | |
| <div style={{background:"#FFF7ED",borderRadius:12,padding:"14px 16px",border:"1.5px solid #FED7AA"}}> | |
| <div style={{fontSize:10.5,fontWeight:800,color:"#EA580C",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>⚠ Manquantes ({result.competences_manquantes?.length||0})</div> | |
| <div style={{display:"flex",flexDirection:"column",gap:5}}> | |
| {(result.competences_manquantes||[]).map((c,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"#9A3412"}}><span style={{color:"#EA580C",flexShrink:0}}>○</span>{c}</div>)} | |
| </div> | |
| </div> | |
| <div style={{background:"#EFF6FF",borderRadius:12,padding:"14px 16px",border:"1.5px solid #BFDBFE"}}> | |
| <div style={{fontSize:10.5,fontWeight:800,color:"#2563EB",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>+ Bonus ({result.competences_bonus?.length||0})</div> | |
| <div style={{display:"flex",flexDirection:"column",gap:5}}> | |
| {(result.competences_bonus||[]).map((c,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"#1E40AF"}}><span style={{color:"#2563EB",flexShrink:0}}>+</span>{c}</div>)} | |
| </div> | |
| </div> | |
| </div> | |
| {/* Points forts / vigilance */} | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}> | |
| <div style={{background:"#F8FAFC",borderRadius:12,padding:"14px 16px",border:"1px solid #E2E8F0"}}> | |
| <div style={{fontSize:10.5,fontWeight:800,color:"#374151",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>💪 Points forts</div> | |
| {(result.points_forts||[]).map((p,i)=><div key={i} style={{display:"flex",gap:7,marginBottom:6,alignItems:"flex-start"}}><span style={{color:"#059669",flexShrink:0,marginTop:1}}>✓</span><span style={{fontSize:12,color:"#374151"}}>{p}</span></div>)} | |
| </div> | |
| <div style={{background:"#FFFBEB",borderRadius:12,padding:"14px 16px",border:"1px solid #FDE68A"}}> | |
| <div style={{fontSize:10.5,fontWeight:800,color:"#92400E",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>🔍 Points de vigilance</div> | |
| {(result.points_vigilance||[]).map((p,i)=><div key={i} style={{display:"flex",gap:7,marginBottom:6,alignItems:"flex-start"}}><span style={{color:"#D97706",flexShrink:0,marginTop:1}}>!</span><span style={{fontSize:12,color:"#92400E"}}>{p}</span></div>)} | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| /* ══════════ COMPETENCES SECTION ══════════ */ | |
| function CompetencesBlock({codes, persona}) { | |
| const[loading,setLoading]=useState(false); | |
| const[competences,setCompetences]=useState(null); | |
| const[open,setOpen]=useState(false); | |
| const pc = PERSONAS[persona]; | |
| const fetchCompetences = useCallback(async() => { | |
| if(!codes?.length) return; | |
| setLoading(true); setOpen(true); | |
| try { | |
| const res = await fetch("/api/claude", { | |
| method:"POST", | |
| headers:{"Content-Type":"application/json"}, | |
| body: JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:800,messages:[{role:"user",content: | |
| `Expert ROME France Travail. Pour les codes ROME suivants : ${codes.join(", ")}\nRetourne UNIQUEMENT JSON valide sans markdown :\n{"cles_metier":["..."],"transverses":["..."],"numeriques":["..."],"savoir_etre":["..."],"certifications":["..."]}\ncles_metier: 5-7 compétences techniques cœur de métier. transverses: 3-4 compétences transversales. numeriques: 2-3 outils/logiciels. savoir_etre: 3-4 compétences comportementales. certifications: 2-3 certifications ou habilitations utiles.` | |
| }]}) | |
| }); | |
| const data = await res.json(); | |
| const raw = data.content?.[0]?.text||""; | |
| setCompetences(JSON.parse(raw.replace(/```json|```/g,"").trim())); | |
| } catch{ setCompetences(null); } | |
| finally{ setLoading(false); } | |
| },[codes]); | |
| const categories = competences ? [ | |
| {key:"cles_metier",label:"Cœur de métier",color:pc.color,bg:pc.colorSoft,type:"clé"}, | |
| {key:"transverses",label:"Transversales",color:"#7C3AED",bg:"#F5F3FF",type:"transverse"}, | |
| {key:"numeriques",label:"Outils & digital",color:"#0891B2",bg:"#ECFEFF",type:"proche"}, | |
| {key:"savoir_etre",label:"Savoir-être",color:"#D97706",bg:"#FFFBEB",type:"associé"}, | |
| {key:"certifications",label:"Certifications",color:"#6B7280",bg:"#F1F5F9",type:"exact"}, | |
| ] : []; | |
| return ( | |
| <div style={{background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:14,overflow:"hidden",boxShadow:"0 1px 2px rgba(0,0,0,.05)"}}> | |
| <button onClick={()=>open?setOpen(false):fetchCompetences()} style={{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 20px",background:"none",border:"none",cursor:"pointer",textAlign:"left",transition:"background .15s"}} onMouseEnter={e=>e.currentTarget.style.background="#F8FAFC"} onMouseLeave={e=>e.currentTarget.style.background="none"}> | |
| <div style={{display:"flex",alignItems:"center",gap:10}}> | |
| <div style={{width:32,height:32,borderRadius:9,background:pc.colorSoft,display:"flex",alignItems:"center",justifyContent:"center",fontSize:16,border:`1.5px solid ${pc.colorMid}`}}>🧩</div> | |
| <div> | |
| <div style={{fontSize:14,fontWeight:700,color:"#0F172A"}}>Compétences associées</div> | |
| <div style={{fontSize:11,color:"#9CA3AF"}}>Référentiel ROME · cœur métier, transversales, certifications</div> | |
| </div> | |
| </div> | |
| <div style={{display:"flex",alignItems:"center",gap:8}}> | |
| {loading&&<Spinner/>} | |
| <span style={{fontSize:16,color:"#9CA3AF",transition:"transform .2s",transform:open?"rotate(180deg)":"none"}}>⌄</span> | |
| </div> | |
| </button> | |
| {open&&!loading&&competences&&( | |
| <div style={{padding:"0 20px 20px",animation:"fadeIn .3s ease"}}> | |
| <div style={{height:1,background:"#E2E8F0",marginBottom:16}}/> | |
| <div style={{display:"flex",flexDirection:"column",gap:14}}> | |
| {categories.map(cat=>(competences[cat.key]||[]).length>0&&( | |
| <div key={cat.key}> | |
| <div style={{fontSize:11,fontWeight:800,letterSpacing:"0.07em",textTransform:"uppercase",color:cat.color,marginBottom:8}}>{cat.label}</div> | |
| <div style={{display:"flex",flexWrap:"wrap",gap:7}}> | |
| {(competences[cat.key]||[]).map((c,i)=>( | |
| <div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderRadius:20,background:cat.bg,border:`1.5px solid ${cat.color}33`,cursor:"pointer",transition:"all .15s"}} title="Cliquer pour copier" onClick={()=>navigator.clipboard.writeText(c)}> | |
| <span style={{fontSize:12,fontWeight:600,color:cat.color}}>{c}</span> | |
| <span style={{fontSize:10,color:cat.color,opacity:.6}}>⎘</span> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| <div style={{marginTop:14,display:"flex",gap:8}}> | |
| <CopyBtn text={Object.values(competences).flat().join(", ")} label="Tout copier"/> | |
| <button onClick={()=>exportCSV([["Catégorie","Compétence"],...Object.entries(competences).flatMap(([k,vs])=>vs.map(v=>[k,v]))],"competences")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 12px",borderRadius:6,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:11,fontWeight:600,cursor:"pointer"}}>⬇ CSV</button> | |
| </div> | |
| {/* Match annonce sur base compétences */} | |
| <MatchAnnonces competences={competences} codes={codes} persona={persona}/> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| /* ══════════ TOOL MODULE ══════════ */ | |
| function ToolModule({persona}) { | |
| const pc = PERSONAS[persona]; | |
| const[mode,setMode]=useState(pc.defaultMode); | |
| const[input,setInput]=useState(""); | |
| const[annonceText,setAnnonceText]=useState(""); | |
| const[sector,setSector]=useState("all"); | |
| const[level,setLevel]=useState("all"); | |
| const[typeFilter,setTypeFilter]=useState("all"); | |
| const[sortBy,setSortBy]=useState("pertinence"); | |
| const[loading,setLoading]=useState(false); | |
| const[results,setResults]=useState(null); | |
| const[compared,setCompared]=useState([]); | |
| const[listening,setListening]=useState(false); | |
| const[error,setError]=useState(""); | |
| const fileRef=useRef(); | |
| const hasContent = mode==="keywords" ? input.trim().length>1 : annonceText.trim().length>20; | |
| const getQ = () => mode==="keywords" ? input.trim() : annonceText.trim(); | |
| const analyze = useCallback(async() => { | |
| if(!hasContent) return; | |
| setLoading(true); setResults(null); setError(""); | |
| const sh = sector!=="all"?`Secteur prioritaire : ${sector}. `:""; | |
| const lh = level!=="all"?`Niveau de qualification cible : ${level}. `:""; | |
| const prompt = mode==="keywords" | |
| ? `Expert ROME France Travail. ${sh}${lh}Persona : ${pc.name} (${pc.role}).\nMots-clés : "${getQ()}"\nRetourne UNIQUEMENT JSON valide sans markdown :\n[{"code":"XXXXX","intitule":"titre officiel exact","type":"exact|proche|associé","description":"1-2 phrases","domaine":"secteur","grandDomaine":"lettre + libellé","niveauAcces":"ex: Bac+2"}]\n5 à 7 codes ROME pertinents triés.` | |
| : `Expert RH ROME NAF. ${sh}Persona : ${pc.name} (${pc.role}).\nAnalyse cette offre. Retourne UNIQUEMENT JSON valide sans markdown :\n{"rome_principal":{"code":"XXXXX","intitule":"...","description":"...","domaine":"..."},"rome_alternatifs":[{"code":"XXXXX","intitule":"...","type":"proche|associé","domaine":"..."}],"naf":{"code":"XX.XXX","intitule":"...","secteur":"..."},"synthese":"2-3 phrases","mots_cles":["5-7 mots-clés"],"niveau":"junior|confirmé|senior|expert","contrat":"CDI|CDD|Stage|Alternance|Freelance|Non précisé","teletravail":"Oui|Partiel|Non|Non précisé","localisation":"ville si précisée ou vide"}\n\nOffre :\n${getQ().slice(0,4000)}`; | |
| try { | |
| const res = await fetch("/api/claude", { | |
| method:"POST", headers:{"Content-Type":"application/json"}, | |
| body: JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:1400,messages:[{role:"user",content:prompt}]}) | |
| }); | |
| const data = await res.json(); | |
| const raw = data.content?.[0]?.text||""; | |
| setResults(JSON.parse(raw.replace(/```json|```/g,"").trim())); | |
| } catch{ setError("Erreur d'analyse. Vérifiez votre connexion."); } | |
| finally{ setLoading(false); } | |
| },[mode,input,annonceText,sector,level,persona]); | |
| const startListen = () => { | |
| const SR = window.SpeechRecognition||window.webkitSpeechRecognition; | |
| if(!SR) return; | |
| const r = new SR(); r.lang="fr-FR"; | |
| r.onresult=e=>setInput(e.results[0][0].transcript); | |
| r.onend=()=>setListening(false); | |
| r.start(); setListening(true); | |
| }; | |
| const filtered = (() => { | |
| if(!results||!Array.isArray(results)) return results; | |
| let r=[...results]; | |
| if(typeFilter!=="all") r=r.filter(x=>x.type===typeFilter); | |
| if(sortBy==="alpha") r=[...r].sort((a,b)=>a.intitule.localeCompare(b.intitule)); | |
| if(sortBy==="type") r=[...r].sort((a,b)=>["exact","proche","associé"].indexOf(a.type)-["exact","proche","associé"].indexOf(b.type)); | |
| return r; | |
| })(); | |
| const codesForCompetences = results | |
| ? Array.isArray(results) ? results.map(r=>r.code) : [results.rome_principal?.code,...(results.rome_alternatifs||[]).map(r=>r.code)].filter(Boolean) | |
| : []; | |
| const lvlC={junior:{bg:"#EDE9FE",c:"#6D28D9"},confirmé:{bg:"#DBEAFE",c:"#1D4ED8"},senior:{bg:"#FEF3C7",c:"#B45309"},expert:{bg:"#FEE2E2",c:"#B91C1C"}}; | |
| const ctrC={CDI:{bg:"#DCFCE7",c:"#15803D"},CDD:{bg:"#FEF3C7",c:"#B45309"},Stage:{bg:"#EDE9FE",c:"#6D28D9"},Alternance:{bg:"#DBEAFE",c:"#1D4ED8"},Freelance:{bg:"#FEE2E2",c:"#B91C1C"}}; | |
| return ( | |
| <div> | |
| {/* Persona context banner */} | |
| <div style={{background:pc.colorSoft,border:`1.5px solid ${pc.colorMid}`,borderRadius:12,padding:"12px 18px",marginBottom:20,display:"flex",alignItems:"center",gap:14}}> | |
| <span style={{fontSize:26}}>{pc.icon}</span> | |
| <div style={{flex:1}}> | |
| <div style={{fontWeight:800,fontSize:14,color:pc.color}}>{pc.name} — {pc.role}</div> | |
| <div style={{fontSize:12,color:"#6B7280",marginTop:2}}>{pc.tagline}</div> | |
| </div> | |
| <div style={{fontSize:11,color:pc.color,background:"#FFF",border:`1px solid ${pc.colorMid}`,borderRadius:8,padding:"5px 12px",fontWeight:700}}>{pc.tip}</div> | |
| </div> | |
| {/* Mode toggle */} | |
| <div style={{display:"flex",gap:8,marginBottom:16}}> | |
| {[{id:"keywords",icon:"⌖",label:"Mots-clés → ROME"},{id:"annonce",icon:"⊡",label:"Annonce → ROME + NAF + Compétences"}].map(m=>( | |
| <button key={m.id} onClick={()=>{setMode(m.id);setResults(null);setError("")}} | |
| style={{flex:1,padding:"10px 14px",borderRadius:10,border:`1.5px solid ${mode===m.id?pc.color:"#E2E8F0"}`,background:mode===m.id?pc.colorSoft:"#FFF",color:mode===m.id?pc.color:"#6B7280",fontWeight:mode===m.id?700:500,fontSize:13,cursor:"pointer",transition:"all .2s",display:"flex",alignItems:"center",justifyContent:"center",gap:7,boxShadow:mode===m.id?`0 2px 8px ${pc.color}25`:"0 1px 2px rgba(0,0,0,.05)"}}> | |
| <span style={{fontSize:16}}>{m.icon}</span>{m.label} | |
| </button> | |
| ))} | |
| </div> | |
| {/* Filtres secteur */} | |
| <div style={{marginBottom:12,overflowX:"auto",paddingBottom:4}}> | |
| <div style={{display:"flex",gap:7,width:"max-content"}}> | |
| {SECTORS.map(s=>( | |
| <button key={s.id} onClick={()=>setSector(s.id)} style={{display:"inline-flex",alignItems:"center",gap:5,padding:"5px 13px",borderRadius:20,fontSize:12,fontWeight:sector===s.id?700:400,border:`1.5px solid ${sector===s.id?pc.color:"#E2E8F0"}`,background:sector===s.id?pc.colorSoft:"#FFF",color:sector===s.id?pc.color:"#6B7280",cursor:"pointer",whiteSpace:"nowrap",transition:"all .15s"}}> | |
| <span>{s.icon}</span>{s.label} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| {/* Filtres niveau */} | |
| <div style={{display:"flex",gap:7,flexWrap:"wrap",alignItems:"center",marginBottom:20}}> | |
| <span style={{fontSize:11,color:"#9CA3AF",fontWeight:700,textTransform:"uppercase",letterSpacing:"0.06em"}}>Niveau :</span> | |
| {LEVELS.map(l=>( | |
| <button key={l.id} onClick={()=>setLevel(l.id)} style={{padding:"4px 11px",borderRadius:16,fontSize:11.5,fontWeight:level===l.id?700:400,border:`1px solid ${level===l.id?"#0891B2":"#E2E8F0"}`,background:level===l.id?"#ECFEFF":"#FFF",color:level===l.id?"#0891B2":"#9CA3AF",cursor:"pointer",transition:"all .15s"}}> | |
| {l.label} | |
| </button> | |
| ))} | |
| </div> | |
| {/* Search box */} | |
| <div style={{background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:16,padding:20,boxShadow:"0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.05)",marginBottom:16}}> | |
| {mode==="keywords" ? ( | |
| <div style={{display:"flex",gap:10}}> | |
| <div style={{flex:1,position:"relative"}}> | |
| <span style={{position:"absolute",left:13,top:"50%",transform:"translateY(-50%)",fontSize:17,opacity:.4,pointerEvents:"none"}}>🔍</span> | |
| <input value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==="Enter"&&analyze()} | |
| placeholder={pc.placeholder} | |
| style={{width:"100%",background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:10,padding:"12px 48px 12px 42px",fontSize:14,color:"#0F172A",outline:"none",transition:"all .2s"}} | |
| onFocus={e=>{e.target.style.borderColor=pc.color;e.target.style.boxShadow=`0 0 0 3px ${pc.color}18`}} | |
| onBlur={e=>{e.target.style.borderColor="#E2E8F0";e.target.style.boxShadow="none"}}/> | |
| <button onClick={startListen} style={{position:"absolute",right:13,top:"50%",transform:"translateY(-50%)",background:"none",border:"none",cursor:"pointer",fontSize:17,color:listening?"#E11D48":"#9CA3AF",animation:listening?"pulse 1s infinite":"none"}}>🎤</button> | |
| </div> | |
| <button onClick={analyze} disabled={loading||!hasContent} | |
| style={{display:"flex",alignItems:"center",gap:8,padding:"0 22px",borderRadius:10,background:loading||!hasContent?"#F1F5F9":`linear-gradient(135deg,${pc.color},#0891B2)`,border:"none",color:loading||!hasContent?"#9CA3AF":"#FFF",fontWeight:700,fontSize:14,cursor:loading||!hasContent?"not-allowed":"pointer",transition:"all .2s",boxShadow:!loading&&hasContent?`0 2px 10px ${pc.color}35`:"none",whiteSpace:"nowrap"}}> | |
| {loading?<><Spinner/>Analyse…</>:<>→ Analyser</>} | |
| </button> | |
| </div> | |
| ) : ( | |
| <> | |
| <textarea value={annonceText} onChange={e=>setAnnonceText(e.target.value)} rows={7} | |
| placeholder={pc.placeholder} | |
| style={{width:"100%",background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:10,padding:"13px 16px",fontSize:13.5,color:"#0F172A",outline:"none",resize:"vertical",lineHeight:1.7,marginBottom:12,transition:"all .2s"}} | |
| onFocus={e=>{e.target.style.borderColor=pc.color;e.target.style.boxShadow=`0 0 0 3px ${pc.color}18`}} | |
| onBlur={e=>{e.target.style.borderColor="#E2E8F0";e.target.style.boxShadow="none"}}/> | |
| <div style={{display:"flex",gap:10}}> | |
| <button onClick={()=>fileRef.current?.click()} style={{display:"flex",alignItems:"center",gap:6,padding:"9px 16px",borderRadius:8,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:13,fontWeight:600,cursor:"pointer"}}>📎 Importer</button> | |
| <input ref={fileRef} type="file" accept=".txt,.doc,.docx,.pdf" style={{display:"none"}} onChange={e=>{const f=e.target.files?.[0];if(!f)return;const r=new FileReader();r.onload=ev=>setAnnonceText(ev.target.result);r.readAsText(f)}}/> | |
| <button onClick={analyze} disabled={loading||!hasContent} | |
| style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8,padding:"11px",borderRadius:10,background:loading||!hasContent?"#F1F5F9":`linear-gradient(135deg,${pc.color},#0891B2)`,border:"none",color:loading||!hasContent?"#9CA3AF":"#FFF",fontWeight:700,fontSize:14,cursor:loading||!hasContent?"not-allowed":"pointer",boxShadow:!loading&&hasContent?`0 2px 10px ${pc.color}35`:"none"}}> | |
| {loading?<><Spinner/>Extraction…</>:<>⟶ Extraire ROME + NAF + Compétences</>} | |
| </button> | |
| </div> | |
| </> | |
| )} | |
| </div> | |
| {/* Comparateur */} | |
| {compared.length>0&&( | |
| <div style={{background:"#EEF2FF",border:"1.5px solid #C7D2FE",borderRadius:14,padding:"14px 18px",marginBottom:16}}> | |
| <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10}}> | |
| <span style={{fontSize:12,fontWeight:800,color:"#4F46E5",letterSpacing:"0.06em",textTransform:"uppercase"}}>⚖ Comparateur — {compared.length} code{compared.length>1?"s":""}</span> | |
| <CopyBtn text={compared.map(c=>c.code).join(", ")} label="Tout copier"/> | |
| </div> | |
| <div style={{display:"flex",gap:8,flexWrap:"wrap"}}> | |
| {compared.map((item,i)=>( | |
| <div key={i} style={{display:"flex",alignItems:"center",gap:7,padding:"7px 12px",background:"#FFF",borderRadius:9,border:"1px solid #C7D2FE",boxShadow:"0 1px 2px rgba(0,0,0,.04)"}}> | |
| <span style={{fontFamily:"monospace",fontWeight:800,color:"#4F46E5",fontSize:13}}>{item.code}</span> | |
| <span style={{fontSize:12,color:"#374151",maxWidth:130,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{item.intitule}</span> | |
| <BdgType type={item.type}/> | |
| <button onClick={()=>setCompared(p=>p.filter((_,idx)=>idx!==i))} style={{background:"none",border:"none",cursor:"pointer",fontSize:13,color:"#9CA3AF",padding:0}}>×</button> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {error&&<div style={{padding:"13px 18px",background:"#FFF1F2",border:"1px solid #FECDD3",borderRadius:10,color:"#9F1239",fontSize:13,fontWeight:500,marginBottom:16}}><span>⚠ {error}</span></div>} | |
| {/* Skeletons */} | |
| {loading&&<div style={{display:"flex",flexDirection:"column",gap:10}}> | |
| {[1,2,3].map(i=><div key={i} style={{background:"#FFF",borderRadius:14,padding:20,border:"1.5px solid #E2E8F0"}}> | |
| <div style={{display:"flex",gap:8,marginBottom:10}}><Skel w="70px" h={11} r={20}/><Skel w="100px" h={11} r={20}/></div> | |
| <Skel w="50%" h={20} mb={8}/><Skel w="85%" h={12} mb={5}/><Skel w="65%" h={12}/> | |
| </div>)} | |
| </div>} | |
| {/* Résultats Keywords */} | |
| {!loading&&results&&Array.isArray(results)&&( | |
| <div style={{animation:"fadeIn .35s ease"}}> | |
| <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,flexWrap:"wrap",gap:10}}> | |
| <div style={{display:"flex",alignItems:"center",gap:10,flexWrap:"wrap"}}> | |
| <span style={{background:pc.color,color:"#FFF",fontWeight:800,fontSize:13,padding:"3px 12px",borderRadius:20}}>{filtered?.length||0}</span> | |
| <span style={{fontSize:13,color:"#6B7280"}}>code{(filtered?.length||0)>1?"s":""} ROME identifié{(filtered?.length||0)>1?"s":""}</span> | |
| {["exact","proche","associé"].map(t=>{const n=results.filter(r=>r.type===t).length;return n>0&&<span key={t} style={{fontSize:11,fontWeight:700,padding:"2px 9px",borderRadius:20,background:t==="exact"?"#DCFCE7":t==="proche"?"#DBEAFE":"#FEF3C7",color:t==="exact"?"#15803D":t==="proche"?"#1D4ED8":"#B45309"}}>{n} {t}</span>})} | |
| </div> | |
| <div style={{display:"flex",gap:7,flexWrap:"wrap"}}> | |
| <select value={typeFilter} onChange={e=>setTypeFilter(e.target.value)} style={{padding:"5px 10px",borderRadius:7,border:"1px solid #E2E8F0",background:"#FFF",fontSize:12,color:"#374151",outline:"none",cursor:"pointer"}}> | |
| <option value="all">Tous types</option> | |
| <option value="exact">Exact</option> | |
| <option value="proche">Proche</option> | |
| <option value="associé">Associé</option> | |
| </select> | |
| <select value={sortBy} onChange={e=>setSortBy(e.target.value)} style={{padding:"5px 10px",borderRadius:7,border:"1px solid #E2E8F0",background:"#FFF",fontSize:12,color:"#374151",outline:"none",cursor:"pointer"}}> | |
| <option value="pertinence">Pertinence</option> | |
| <option value="alpha">Alphabétique</option> | |
| <option value="type">Par type</option> | |
| </select> | |
| <button onClick={()=>exportCSV([["Code ROME","Intitulé","Type","Domaine","Niveau",...(results.map(r=>r.code))],[...results.map(r=>[r.code,r.intitule,r.type||"",r.domaine||"",r.niveauAcces||""])].flat()],"rome_export")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 11px",borderRadius:7,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:12,fontWeight:600,cursor:"pointer"}}>⬇ CSV</button> | |
| <CopyBtn text={results.map(r=>r.code).join(", ")} label="Tout copier"/> | |
| </div> | |
| </div> | |
| <div style={{display:"flex",flexDirection:"column",gap:10,marginBottom:16}}> | |
| {(filtered||[]).map((r,i)=>( | |
| <div key={r.code+i} style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)",transition:"all .2s",animation:`fadeUp .3s ease ${i*.06}s both"`,display:"flex",alignItems:"flex-start",gap:14}} | |
| onMouseEnter={e=>{e.currentTarget.style.borderColor=pc.color;e.currentTarget.style.boxShadow=`0 4px 20px ${pc.color}15`}} | |
| onMouseLeave={e=>{e.currentTarget.style.borderColor="#E2E8F0";e.currentTarget.style.boxShadow="0 1px 2px rgba(0,0,0,.05)"}}> | |
| <div style={{flexShrink:0,width:34,height:34,borderRadius:9,background:pc.colorSoft,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:900,fontSize:12,color:pc.color,fontFamily:"monospace",border:`1.5px solid ${pc.colorMid}`}}>{i+1}</div> | |
| <div style={{flex:1,minWidth:0}}> | |
| <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:7,flexWrap:"wrap"}}> | |
| <span style={{fontFamily:"monospace",fontSize:15.5,fontWeight:700,color:pc.color,letterSpacing:"0.04em"}}>{r.code}</span> | |
| <BdgType type={r.type}/> | |
| {r.domaine&&<span style={{fontSize:11,color:"#9CA3AF",padding:"2px 8px",background:"#F8FAFC",borderRadius:6,border:"1px solid #E2E8F0"}}>{r.domaine}</span>} | |
| {r.niveauAcces&&<span style={{fontSize:11,color:"#4F46E5",padding:"2px 8px",background:"#EEF2FF",borderRadius:6,border:"1px solid #C7D2FE"}}>{r.niveauAcces}</span>} | |
| {r.grandDomaine&&<span style={{fontSize:11,color:"#9CA3AF",padding:"2px 8px",background:"#F8FAFC",borderRadius:6,border:"1px solid #E2E8F0"}}>{r.grandDomaine}</span>} | |
| </div> | |
| <div style={{fontSize:15,fontWeight:700,color:"#0F172A",marginBottom:4,lineHeight:1.3}}>{r.intitule}</div> | |
| <div style={{fontSize:13,color:"#6B7280",lineHeight:1.65}}>{r.description}</div> | |
| </div> | |
| <div style={{display:"flex",flexDirection:"column",gap:5,flexShrink:0}}> | |
| <CopyBtn text={r.code}/> | |
| <button onClick={()=>compared.find(c=>c.code===r.code)?setCompared(p=>p.filter(c=>c.code!==r.code)):(compared.length<4&&setCompared(p=>[...p,r]))} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 11px",borderRadius:6,fontSize:11,fontWeight:600,border:`1px solid ${compared.find(c=>c.code===r.code)?"#C7D2FE":"#E2E8F0"}`,background:compared.find(c=>c.code===r.code)?"#EEF2FF":"#F8FAFC",color:compared.find(c=>c.code===r.code)?"#4F46E5":"#6B7280",cursor:"pointer",opacity:(!compared.find(c=>c.code===r.code)&&compared.length>=4)?.4:1}}> | |
| {compared.find(c=>c.code===r.code)?"✓ Ajouté":"⚖ Comparer"} | |
| </button> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| {/* Compétences pour mots-clés */} | |
| <CompetencesBlock codes={codesForCompetences} persona={persona}/> | |
| </div> | |
| )} | |
| {/* Résultats Annonce */} | |
| {!loading&&results&&!Array.isArray(results)&&( | |
| <div style={{animation:"fadeIn .4s ease"}}> | |
| {/* Hero ROME */} | |
| <div style={{background:"#FFF",borderRadius:16,padding:"22px 24px",border:`2px solid ${pc.color}`,boxShadow:`0 4px 20px ${pc.color}12`,marginBottom:12}}> | |
| <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",flexWrap:"wrap",gap:12,marginBottom:14}}> | |
| <div style={{display:"flex",gap:7,flexWrap:"wrap"}}> | |
| <span style={{background:pc.color,color:"#FFF",fontSize:10,fontWeight:800,padding:"3px 9px",borderRadius:20,letterSpacing:"0.08em",textTransform:"uppercase"}}>ROME Principal</span> | |
| {results.niveau&&lvlC[results.niveau]&&<span style={{...lvlC[results.niveau],fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,textTransform:"capitalize",background:lvlC[results.niveau].bg,color:lvlC[results.niveau].c}}>{results.niveau}</span>} | |
| {results.contrat&&results.contrat!=="Non précisé"&&ctrC[results.contrat]&&<span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,background:ctrC[results.contrat].bg,color:ctrC[results.contrat].c}}>{results.contrat}</span>} | |
| {results.teletravail&&results.teletravail!=="Non précisé"&&<span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,background:"#ECFDF5",color:"#059669"}}>🏠 {results.teletravail}</span>} | |
| {results.localisation&&<span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,background:"#F8FAFC",color:"#6B7280",border:"1px solid #E2E8F0"}}>📍 {results.localisation}</span>} | |
| </div> | |
| <div style={{display:"flex",gap:7,flexWrap:"wrap"}}> | |
| <CopyBtn text={results.rome_principal.code} label="Copier ROME" accent={pc.color}/> | |
| <CopyBtn text={[results.rome_principal.code,...(results.rome_alternatifs||[]).map(r=>r.code)].join(", ")} label="Tous ROME"/> | |
| <button onClick={()=>exportCSV([["Type","Code","Intitulé"],["Principal",results.rome_principal.code,results.rome_principal.intitule],...(results.rome_alternatifs||[]).map(r=>["Alternatif",r.code,r.intitule]),["NAF",results.naf.code,results.naf.intitule]],"extraction_annonce")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 11px",borderRadius:6,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:11,fontWeight:600,cursor:"pointer"}}>⬇ CSV</button> | |
| </div> | |
| </div> | |
| <div style={{display:"flex",alignItems:"flex-start",gap:16}}> | |
| <span style={{fontFamily:"monospace",fontSize:26,fontWeight:700,color:pc.color,letterSpacing:"0.04em",flexShrink:0,lineHeight:1}}>{results.rome_principal.code}</span> | |
| <div> | |
| <div style={{fontWeight:800,fontSize:17,color:"#0F172A",marginBottom:5,lineHeight:1.3}}>{results.rome_principal.intitule}</div> | |
| {results.rome_principal.description&&<div style={{fontSize:13,color:"#6B7280",lineHeight:1.65}}>{results.rome_principal.description}</div>} | |
| </div> | |
| </div> | |
| </div> | |
| {/* Alternatifs */} | |
| {results.rome_alternatifs?.length>0&&( | |
| <div style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)",marginBottom:12}}> | |
| <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:12,paddingBottom:8,borderBottom:"1px solid #E2E8F0"}}>ROME Alternatifs</div> | |
| <div style={{display:"flex",flexDirection:"column",gap:8}}> | |
| {results.rome_alternatifs.map((r,i)=>( | |
| <div key={i} style={{display:"flex",alignItems:"center",gap:12,padding:"9px 13px",background:"#F8FAFC",borderRadius:9,border:"1px solid #E2E8F0"}}> | |
| <span style={{fontFamily:"monospace",fontWeight:700,color:pc.color,fontSize:13,flexShrink:0}}>{r.code}</span> | |
| <span style={{fontSize:13.5,color:"#374151",flex:1}}>{r.intitule}</span> | |
| {r.domaine&&<span style={{fontSize:11,color:"#9CA3AF",padding:"2px 7px",background:"#FFF",borderRadius:5,border:"1px solid #E2E8F0",flexShrink:0}}>{r.domaine}</span>} | |
| <BdgType type={r.type||"proche"}/> | |
| <CopyBtn text={r.code}/> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {/* NAF + Synthèse */} | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginBottom:12}}> | |
| <div style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)"}}> | |
| <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:12}}>Code NAF / APE</div> | |
| <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:10}}> | |
| <div><span style={{fontFamily:"monospace",fontSize:20,fontWeight:700,color:"#7C3AED"}}>{results.naf.code}</span><div style={{fontSize:13,color:"#374151",marginTop:4}}>{results.naf.intitule}</div>{results.naf.secteur&&<div style={{fontSize:11,color:"#9CA3AF",marginTop:2}}>{results.naf.secteur}</div>}</div> | |
| <CopyBtn text={results.naf.code}/> | |
| </div> | |
| </div> | |
| <div style={{background:"#F8FAFC",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0"}}> | |
| <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:10}}>Synthèse</div> | |
| <p style={{fontSize:13,color:"#374151",lineHeight:1.75,margin:0}}>{results.synthese}</p> | |
| </div> | |
| </div> | |
| {/* Mots-clés */} | |
| {results.mots_cles?.length>0&&( | |
| <div style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)",marginBottom:12}}> | |
| <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:12}}>Mots-clés détectés</div> | |
| <div style={{display:"flex",flexWrap:"wrap",gap:8}}> | |
| {results.mots_cles.map((k,i)=><span key={i} style={{padding:"4px 12px",borderRadius:20,fontSize:12,fontWeight:600,background:pc.colorSoft,color:pc.color,border:`1px solid ${pc.colorMid}`}}>{k}</span>)} | |
| </div> | |
| </div> | |
| )} | |
| {/* Compétences enrichies */} | |
| <CompetencesBlock codes={codesForCompetences} persona={persona}/> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| /* ══════════ DOSSIER MODULE ══════════ */ | |
| function DossierModule() { | |
| const[dtab,setDtab]=useState(0); | |
| const DNAV=["👤 Personas","🗺 Parcours UX","🏗 Architecture","📈 KPIs CEO"]; | |
| return ( | |
| <div style={{background:"#FFFFFF",borderRadius:16,overflow:"hidden",border:"1px solid #E2E8F0",boxShadow:"0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.05)"}}> | |
| {/* Dossier header — accent band */} | |
| <div style={{background:"linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%)",padding:"20px 28px 0",borderBottom:"1px solid #E2E8F0"}}> | |
| <div style={{display:"flex",alignItems:"baseline",gap:12,marginBottom:4}}> | |
| <h2 style={{margin:0,fontFamily:"Syne,sans-serif",fontSize:18,color:"#FFFFFF",letterSpacing:"0.06em"}}>ROME·NAF MATCHER</h2> | |
| <span style={{color:"#94A3B8",fontSize:11}}>— Dossier de conception UX · v2.0</span> | |
| </div> | |
| <p style={{margin:"0 0 16px",color:"#94A3B8",fontSize:12}}>Personas · Parcours UX · Architecture · KPIs CEO</p> | |
| <div style={{display:"flex",gap:0}}> | |
| {DNAV.map((n,i)=>( | |
| <button key={i} onClick={()=>setDtab(i)} style={{background:"none",border:"none",cursor:"pointer",padding:"10px 18px",fontSize:12,fontFamily:"Syne,sans-serif",fontWeight:700,letterSpacing:"0.04em",color:dtab===i?"#FFFFFF":"#64748B",borderBottom:dtab===i?"2px solid #38BDF8":"2px solid transparent",transition:"all .2s"}}> | |
| {n} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| <div style={{padding:"28px",background:"#F8FAFC",fontFamily:"DM Sans,sans-serif",color:"#0F172A"}}> | |
| {/* ── PERSONAS ── */} | |
| {dtab===0&&( | |
| <div> | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18,marginBottom:18}}> | |
| {Object.values(PERSONAS).map(p=>( | |
| <DCard key={p.id}> | |
| <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:16}}> | |
| <div style={{width:50,height:50,borderRadius:"50%",background:`linear-gradient(135deg,${p.color}66,${p.color})`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:22}}>{p.icon}</div> | |
| <div> | |
| <div style={{fontFamily:"Syne,sans-serif",fontSize:16,fontWeight:700,color:p.color}}>{p.name}, {p.age} ans</div> | |
| <div style={{color:"#8B9BB4",fontSize:11}}>{p.role}</div> | |
| </div> | |
| </div> | |
| <DSec title="Contexte & environnement"> | |
| <p style={{color:"#374151",fontSize:12,lineHeight:1.7,margin:0}}>{p.context}</p> | |
| </DSec> | |
| <DSec title="Objectif principal"> | |
| <p style={{color:"#374151",fontSize:12,lineHeight:1.7,margin:0}}>{p.goal}</p> | |
| </DSec> | |
| <DSec title="Compétences mobilisées"> | |
| <div style={{display:"flex",flexWrap:"wrap",gap:5}}>{p.skills.map(s=><DTag key={s} label={s} color={p.color}/>)}</div> | |
| </DSec> | |
| <DSec title="Frustrations clés"> | |
| {p.pains.map((f,i)=><div key={i} style={{display:"flex",gap:7,marginBottom:5,alignItems:"flex-start"}}><span style={{color:"#E11D48",marginTop:2,flexShrink:0}}>✕</span><span style={{color:"#374151",fontSize:12}}>{f}</span></div>)} | |
| </DSec> | |
| <div style={{background:p.color+"15",border:`1px solid ${p.color}30`,borderRadius:8,padding:10}}> | |
| <div style={{color:"#8B9BB4",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:4}}>Critère de succès</div> | |
| <em style={{color:p.color,fontSize:12}}>"{p.success}"</em> | |
| </div> | |
| </DCard> | |
| ))} | |
| </div> | |
| {/* Persona secondaire Mehdi */} | |
| <DCard> | |
| <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:14}}> | |
| <div style={{width:40,height:40,borderRadius:"50%",background:"linear-gradient(135deg,#7B2D8B,#C77DFF)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:18}}>🧍</div> | |
| <div> | |
| <div style={{fontFamily:"Syne,sans-serif",fontSize:14,fontWeight:700,color:"#C77DFF"}}>Mehdi, 29 ans <span style={{fontSize:11,color:"#8B9BB4",fontWeight:400}}>— Demandeur d'emploi (persona secondaire)</span></div> | |
| <div style={{color:"#8B9BB4",fontSize:11}}>Cuisine, laptop, 3 onglets Indeed. Ne maîtrise pas le vocabulaire ROME officiel.</div> | |
| </div> | |
| </div> | |
| <div style={{display:"flex",gap:16,flexWrap:"wrap"}}> | |
| <div style={{flex:1,minWidth:180}}><div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:6}}>Frustration</div><p style={{color:"#374151",fontSize:12,margin:0}}>Il dit "manutentionnaire" ou "cariste" — l'outil traduit en ROME sans jargon imposé.</p></div> | |
| <div style={{flex:1,minWidth:180}}><div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:6}}>Compétences</div><div style={{display:"flex",flexWrap:"wrap",gap:5}}>{["Langage naturel","Saisie vocale","Autonomie numérique"].map(c=><DTag key={c} label={c} color="#7C3AED"/>)}</div></div> | |
| <div style={{flex:1,minWidth:180}}><div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:6}}>Succès</div><p style={{color:"#374151",fontSize:12,margin:0}}>Screenshot du résultat, rappelle Sophie avec le code en main.</p></div> | |
| </div> | |
| </DCard> | |
| </div> | |
| )} | |
| {/* ── PARCOURS UX ── */} | |
| {dtab===1&&( | |
| <div> | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,marginBottom:18}}> | |
| <DCard><div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:8}}>LOI DE MILLER · 7±2</div><p style={{color:"#374151",fontSize:12,margin:0,lineHeight:1.7}}>Chaque écran affiche <strong style={{color:"#0F172A"}}>max 5 résultats ROME</strong> visibles sans scroll. Codes NAF : 3 maximum en premier plan. Pagination pour le reste.</p></DCard> | |
| <DCard><div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:8}}>LOI DE HICK · Réduire les choix</div><p style={{color:"#374151",fontSize:12,margin:0,lineHeight:1.7}}>2 modules distincts dès l'accueil. Zéro configuration. Le résultat principal est mis en avant — les alternatifs sont secondaires.</p></DCard> | |
| </div> | |
| <DCard style={{marginBottom:18}}> | |
| <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:14}}>UX HONEYCOMB (Morville) — Application au ROME·NAF Matcher</div> | |
| <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:8}}> | |
| {[{dim:"Utile",desc:"Matching ROME/NAF réel, pertinent, opérationnel",c:"#059669"},{dim:"Utilisable",desc:"3 clics max pour un résultat. Interface épurée.",c:"#2563EB"},{dim:"Désirable",desc:"Design sobre et pro. Pas de surcharge visuelle.",c:"#D97706"},{dim:"Trouvable",desc:"Recherche vocale + texte + upload visibles au 1er regard",c:"#7C3AED"},{dim:"Accessible",desc:"RGAA AA : contraste, clavier, screen reader",c:"#EA580C"},{dim:"Crédible",desc:"Référentiel France Travail officiel. Source citée.",c:"#E11D48"},{dim:"Valeur",desc:"Gain de temps mesurable pour Sophie (PPAE) et Karim (sourcing)",c:"#059669"}].map(h=>( | |
| <div key={h.dim} style={{background:h.c+"10",border:`1px solid ${h.c}28`,borderRadius:8,padding:10}}> | |
| <div style={{color:h.c,fontFamily:"Syne,sans-serif",fontSize:11,fontWeight:700}}>{h.dim}</div> | |
| <div style={{color:"#6B7280",fontSize:10,marginTop:4,lineHeight:1.5}}>{h.desc}</div> | |
| </div> | |
| ))} | |
| </div> | |
| </DCard> | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}> | |
| <DCard> | |
| <div style={{color:"#52B788",fontFamily:"Syne,sans-serif",fontSize:14,fontWeight:700,marginBottom:14}}>👩💼 Parcours Sophie — Mots-clés → ROME + NAF</div> | |
| <DStep n="1" label="Accueil — Choix du module" detail="Sophie voit 2 boutons. Elle clique sur 'Mots-clés → ROME'. 2 sec." tags={[{l:"Hick : 2 choix max",c:"#E9C46A"},{l:"< 2 sec",c:"#52B788"}]}/> | |
| <DStep n="2" label="Saisie orale ou texte" detail="Microphone actif. Elle dit 'agent logistique polyvalent BTP'. Transcription temps réel." tags={[{l:"Web Speech API",c:"#2E86C1"},{l:"Feedback pulse",c:"#C77DFF"}]}/> | |
| <DStep n="3" label="Validation & appel API" detail="Skeleton loader < 1.5s. Indicateur de progression visible." tags={[{l:"API /rome/search",c:"#E9C46A"},{l:"LLM Claude",c:"#F4A261"}]}/> | |
| <DStep n="4" label="Résultats ROME principal" detail="1 grande carte : code + intitulé + badge 'Exact'. 3 ROME proches. 1 NAF suggéré." tags={[{l:"Miller : 5 résultats max",c:"#E9C46A"},{l:"Contraste RGAA AA",c:"#52B788"}]}/> | |
| <DStep n="5" label="Copier → PPAE" detail="Bouton 'Copier le code' → clipboard. Toast 2 sec. Zéro ressaisie." tags={[{l:"1 action = 1 clic",c:"#52B788"},{l:"Toast non bloquant",c:"#2E86C1"}]}/> | |
| <DStep n="6" label="Compétences associées" detail="Section dépliable : compétences ROME liées (ex: 'Conduite chariot', 'Gestion stocks')." tags={[{l:"Progressive disclosure",c:"#C77DFF"}]}/> | |
| </DCard> | |
| <DCard> | |
| <div style={{color:"#2E86C1",fontFamily:"Syne,sans-serif",fontSize:14,fontWeight:700,marginBottom:14}}>🎯 Parcours Karim — Annonce → ROME + NAF + Compétences</div> | |
| <DStep n="1" label="Choix module 2" detail="Karim clique sur 'Annonce → ROME+NAF'. 3 tabs : Texte / Fichier / URL." tags={[{l:"3 modes d'input",c:"#2E86C1"}]}/> | |
| <DStep n="2" label="Coller l'annonce brute" detail="Textarea large. Il paste 400 mots avec fautes et acronymes. Aucun reformatage requis." tags={[{l:"Tolérance au bruit",c:"#E9C46A"}]}/> | |
| <DStep n="3" label="Extraction automatique" detail="Appel LLM. Résultat en < 2s. Skeleton pendant l'attente." tags={[{l:"API /rome/extract",c:"#F4A261"},{l:"Timeout 8s max",c:"#E63946"}]}/> | |
| <DStep n="4" label="Résultats structurés" detail="Code ROME principal + 2 alternatifs + NAF + Synthèse + 5 mots-clés extraits." tags={[{l:"Miller : max 5 KW",c:"#E9C46A"},{l:"Hiérarchie claire",c:"#2E86C1"}]}/> | |
| <DStep n="5" label="Compétences extraites" detail="Section générée : compétences métier, transversales, outils, savoir-être, certifications." tags={[{l:"Compétences clés",c:"#52B788"},{l:"Transverses",c:"#C77DFF"}]}/> | |
| <DStep n="6" label="Export & action" detail="'Copier ROME', 'Copier NAF', 'Exporter CSV'. Karim copie ROME → LinkedIn Recruiter." tags={[{l:"Export 1 clic",c:"#52B788"},{l:"< 12 sec total",c:"#E9C46A"}]}/> | |
| </DCard> | |
| </div> | |
| </div> | |
| )} | |
| {/* ── ARCHITECTURE ── */} | |
| {dtab===2&&( | |
| <div> | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18,marginBottom:18}}> | |
| <DCard> | |
| <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:14}}>🔌 API ENDPOINTS</div> | |
| {[ | |
| {m:"GET",ep:"/rome/{code_name}",desc:"Recherche ROME par nom métier (mots-clés)"}, | |
| {m:"GET",ep:"/rome/select/{code}_{id}",desc:"Récupère un code ROME précis par ID"}, | |
| {m:"POST",ep:"/rome/extract",desc:"Annonce brute → ROME + NAF extraits par LLM"}, | |
| {m:"GET",ep:"/naf/{code}",desc:"Détails d'un code NAF"}, | |
| {m:"POST",ep:"/rome/competences",desc:"Compétences associées à un code ROME"}, | |
| {m:"GET",ep:"/rome/nearby/{code}",desc:"Codes ROME proches (voisinage sémantique)"}, | |
| {m:"GET",ep:"/analytics/kpi",desc:"Dashboard KPI infrastructure et métier"}, | |
| {m:"POST",ep:"/rome/match",desc:"Score de match compétences ↔ annonce"}, | |
| ].map(api=>( | |
| <div key={api.ep} style={{display:"flex",gap:9,marginBottom:10,alignItems:"flex-start"}}> | |
| <span style={{background:api.m==="GET"?"#DCFCE7":"#DBEAFE",color:api.m==="GET"?"#15803D":"#1D4ED8",padding:"2px 7px",borderRadius:4,fontSize:10,fontWeight:700,fontFamily:"monospace",minWidth:38,textAlign:"center",flexShrink:0}}>{api.m}</span> | |
| <div><code style={{color:"#0F172A",fontSize:11}}>{api.ep}</code><div style={{color:"#6B7280",fontSize:10,marginTop:2}}>{api.desc}</div></div> | |
| </div> | |
| ))} | |
| </DCard> | |
| <div style={{display:"flex",flexDirection:"column",gap:14}}> | |
| <DCard> | |
| <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:12}}>🤖 STACK LLM</div> | |
| {[ | |
| {label:"Modèle principal",val:"Claude Sonnet (Anthropic)",c:"#EA580C"}, | |
| {label:"Fallback",val:"Mistral-7B-Instruct (local)",c:"#7C3AED"}, | |
| {label:"Hébergement",val:"HuggingFace Spaces (prod)",c:"#2563EB"}, | |
| {label:"Température",val:"0.1 (précision > créativité)",c:"#D97706"}, | |
| {label:"Max tokens",val:"1400 tokens / requête",c:"#059669"}, | |
| {label:"Prompt strategy",val:"System prompt strict JSON + few-shot",c:"#059669"}, | |
| ].map(s=>( | |
| <div key={s.label} style={{display:"flex",justifyContent:"space-between",marginBottom:8,alignItems:"center"}}> | |
| <span style={{color:"#6B7280",fontSize:11}}>{s.label}</span> | |
| <span style={{color:s.c,fontSize:11,fontWeight:600,textAlign:"right",maxWidth:"55%"}}>{s.val}</span> | |
| </div> | |
| ))} | |
| </DCard> | |
| <DCard> | |
| <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:12}}>🐳 DOCKER COMPOSE</div> | |
| <div style={{fontFamily:"monospace",fontSize:10,color:"#374151",lineHeight:1.9,background:"#F1F5F9",padding:12,borderRadius:6,border:"1px solid #E2E8F0"}}> | |
| <span style={{color:"#059669"}}>services:</span><br/> | |
| <span style={{color:"#2563EB"}}>frontend:</span> react:18 · port 3000<br/> | |
| <span style={{color:"#2563EB"}}>api:</span> fastapi · port 8000<br/> | |
| <span style={{color:"#2563EB"}}>llm:</span> claude/mistral · port 11434<br/> | |
| <span style={{color:"#2563EB"}}>db:</span> postgres:15 · port 5432<br/> | |
| <span style={{color:"#2563EB"}}>cache:</span> redis:7 · port 6379<br/> | |
| <span style={{color:"#2563EB"}}>nginx:</span> reverse-proxy · port 80 | |
| </div> | |
| </DCard> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {/* ── KPIs CEO ── */} | |
| {dtab===3&&( | |
| <div> | |
| {/* ── KPI Infrastructure ── */} | |
| <DSec title="📡 KPI Infrastructure"> | |
| <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}> | |
| <KPIBox label="Latence moy. search" value="1.3" unit="s" delta={-8} color="#059669"/> | |
| <KPIBox label="Latence moy. match" value="2.8" unit="s" delta={-5} color="#2563EB"/> | |
| <KPIBox label="Uptime" value="99.4" unit="%" delta={0.2} color="#0891B2"/> | |
| <KPIBox label="Cache hit rate" value="67" unit="%" delta={8} color="#D97706"/> | |
| <KPIBox label="Req. match/jour" value="211" unit="" delta={22} color="#7C3AED"/> | |
| </div> | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}> | |
| <DCard> | |
| <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>LATENCE PAR ENDPOINT (secondes)</div> | |
| <ResponsiveContainer width="100%" height={160}> | |
| <AreaChart data={kpiLatency}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Area type="monotone" dataKey="search" stroke="#059669" fill="#05996912" name="Search (s)" strokeWidth={2}/><Area type="monotone" dataKey="competences" stroke="#D97706" fill="#D9770612" name="Compétences (s)" strokeWidth={2}/><Area type="monotone" dataKey="match" stroke="#7C3AED" fill="#7C3AED12" name="Match (s)" strokeWidth={2}/></AreaChart> | |
| </ResponsiveContainer> | |
| </DCard> | |
| <DCard> | |
| <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>REQUÊTES/JOUR PAR ENDPOINT</div> | |
| <ResponsiveContainer width="100%" height={160}> | |
| <BarChart data={kpiEndpoints}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Bar dataKey="search" fill="#059669" name="/rome/search" radius={[3,3,0,0]} stackId="a"/><Bar dataKey="extract" fill="#2563EB" name="/rome/extract" radius={[0,0,0,0]} stackId="a"/><Bar dataKey="competences" fill="#D97706" name="/rome/competences" radius={[0,0,0,0]} stackId="a"/><Bar dataKey="match" fill="#7C3AED" name="/rome/match" radius={[3,3,0,0]} stackId="a"/></BarChart> | |
| </ResponsiveContainer> | |
| </DCard> | |
| </div> | |
| </DSec> | |
| {/* ── KPI LLM ── */} | |
| <DSec title="🤖 KPI Infrastructure LLM"> | |
| <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}> | |
| <KPIBox label="Tokens search moy." value="487" unit="tok" delta={-4} color="#059669"/> | |
| <KPIBox label="Tokens compét. moy." value="812" unit="tok" delta={-2} color="#D97706"/> | |
| <KPIBox label="Tokens match moy." value="1 320" unit="tok" delta={-6} color="#7C3AED"/> | |
| <KPIBox label="Coût/jour estimé" value="0.22" unit="€" delta={12} color="#EA580C"/> | |
| <KPIBox label="JSON parse OK" value="97.8" unit="%" delta={1.1} color="#2563EB"/> | |
| </div> | |
| <DCard> | |
| <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>TOKENS PAR TYPE D'APPEL & COÛT ESTIMÉ / HEURE</div> | |
| <ResponsiveContainer width="100%" height={170}> | |
| <AreaChart data={kpiLLM}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis yAxisId="left" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis yAxisId="right" orientation="right" tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Area yAxisId="left" type="monotone" dataKey="search" stroke="#059669" fill="#05996912" name="Tokens search"/><Area yAxisId="left" type="monotone" dataKey="comp" stroke="#D97706" fill="#D9770612" name="Tokens compét."/><Area yAxisId="left" type="monotone" dataKey="match" stroke="#7C3AED" fill="#7C3AED12" name="Tokens match"/><Area yAxisId="right" type="monotone" dataKey="cost" stroke="#EA580C" fill="#EA580C12" name="Coût €" strokeDasharray="4 2"/></AreaChart> | |
| </ResponsiveContainer> | |
| </DCard> | |
| </DSec> | |
| {/* ── KPI Business ── */} | |
| <DSec title="💼 KPI Business"> | |
| <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}> | |
| <KPIBox label="Utilisateurs actifs" value="168" unit="/sem" delta={18} color="#D97706"/> | |
| <KPIBox label="Taux adoption match" value="71" unit="%" delta={11} color="#7C3AED"/> | |
| <KPIBox label="Taux export CSV" value="74" unit="%" delta={9} color="#059669"/> | |
| <KPIBox label="Taux retour semaine" value="63" unit="%" delta={7} color="#2563EB"/> | |
| <KPIBox label="NPS estimé" value="+41" unit="" delta={5} color="#EA580C"/> | |
| </div> | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}> | |
| <DCard> | |
| <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>SESSIONS PAR PERSONA + USAGE MATCH</div> | |
| <ResponsiveContainer width="100%" height={160}> | |
| <BarChart data={kpiUsage}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Bar dataKey="sophie" fill="#059669" name="Sophie (Conseillère)" radius={[3,3,0,0]}/><Bar dataKey="karim" fill="#2563EB" name="Karim (Chasseur)" radius={[3,3,0,0]}/><Bar dataKey="match" fill="#7C3AED" name="Sessions avec Match" radius={[3,3,0,0]}/></BarChart> | |
| </ResponsiveContainer> | |
| </DCard> | |
| <DCard> | |
| <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>TAUX ADOPTION MATCH & RÉTENTION (%)</div> | |
| <ResponsiveContainer width="100%" height={160}> | |
| <LineChart data={kpiMatchAdoption}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis domain={[0,100]} tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Line type="monotone" dataKey="taux" stroke="#7C3AED" strokeWidth={2.5} dot={{r:3,fill:"#7C3AED"}} name="Taux adoption Match %"/><Line type="monotone" dataKey="retention" stroke="#2563EB" strokeWidth={2.5} dot={{r:3,fill:"#2563EB"}} name="Taux rétention %"/></LineChart> | |
| </ResponsiveContainer> | |
| </DCard> | |
| </div> | |
| </DSec> | |
| {/* ── KPI Match ── */} | |
| <DSec title="⚡ KPI Matcher d'annonces"> | |
| <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}> | |
| <KPIBox label="Score match moyen" value="83" unit="/100" delta={4} color="#7C3AED"/> | |
| <KPIBox label="Matches Excellent+Bon" value="85" unit="%" delta={7} color="#059669"/> | |
| <KPIBox label="Compét. matchées moy." value="3.9" unit="/session" delta={12} color="#2563EB"/> | |
| <KPIBox label="Compét. manquantes moy." value="1.4" unit="/session" delta={-18} color="#EA580C"/> | |
| <KPIBox label="Durée analyse match" value="2.8" unit="s" delta={-9} color="#D97706"/> | |
| </div> | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}> | |
| <DCard> | |
| <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>DISTRIBUTION DES SCORES MATCH (%)</div> | |
| <ResponsiveContainer width="100%" height={160}> | |
| <BarChart data={kpiMatchScores}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Bar dataKey="excellent" fill="#059669" name="Excellent (≥80)" radius={[3,3,0,0]} stackId="s"/><Bar dataKey="bon" fill="#2563EB" name="Bon (60-79)" stackId="s"/><Bar dataKey="partiel" fill="#D97706" name="Partiel (40-59)" stackId="s"/><Bar dataKey="faible" fill="#E11D48" name="Faible (<40)" radius={[0,0,3,3]} stackId="s"/></BarChart> | |
| </ResponsiveContainer> | |
| </DCard> | |
| <DCard> | |
| <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>ÉVOLUTION SCORE MATCH MOYEN /100</div> | |
| <ResponsiveContainer width="100%" height={160}> | |
| <AreaChart data={kpiMatchScores}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis domain={[50,100]} tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Area type="monotone" dataKey="score_moy" stroke="#7C3AED" fill="#7C3AED18" strokeWidth={2.5} name="Score moyen /100" dot={{r:4,fill:"#7C3AED"}}/></AreaChart> | |
| </ResponsiveContainer> | |
| </DCard> | |
| </div> | |
| </DSec> | |
| {/* ── KPI Métier ── */} | |
| <DSec title="🎯 KPI Métier"> | |
| <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}> | |
| <KPIBox label="Précision ROME" value="91" unit="%" delta={4} color="#059669"/> | |
| <KPIBox label="Satisfaction globale" value="89" unit="%" delta={5} color="#D97706"/> | |
| <KPIBox label="Taux copie code" value="85" unit="%" delta={6} color="#2563EB"/> | |
| <KPIBox label="Temps moyen résultat" value="1.8" unit="s" delta={-15} color="#EA580C"/> | |
| </div> | |
| <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}> | |
| <DCard> | |
| <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>PRÉCISION ROME / SATISFACTION / EXPORT / SCORE MATCH (%)</div> | |
| <ResponsiveContainer width="100%" height={160}> | |
| <LineChart data={kpiMetier}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis domain={[50,100]} tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Line type="monotone" dataKey="precision" stroke="#059669" strokeWidth={2} dot={false} name="Précision ROME %"/><Line type="monotone" dataKey="satisfaction" stroke="#D97706" strokeWidth={2} dot={false} name="Satisfaction %"/><Line type="monotone" dataKey="export" stroke="#2563EB" strokeWidth={2} dot={false} name="Taux export %"/><Line type="monotone" dataKey="match_score" stroke="#7C3AED" strokeWidth={2} dot={false} strokeDasharray="4 2" name="Score match moy."/></LineChart> | |
| </ResponsiveContainer> | |
| </DCard> | |
| <DCard> | |
| <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>COMPÉTENCES DÉTECTÉES / VALIDÉES / MATCHÉES / SESSION</div> | |
| <ResponsiveContainer width="100%" height={160}> | |
| <AreaChart data={kpiCompetences}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Area type="monotone" dataKey="detected" stroke="#D97706" fill="#D9770610" strokeWidth={2} name="Détectées"/><Area type="monotone" dataKey="validated" stroke="#2563EB" fill="#2563EB10" strokeWidth={2} name="Validées"/><Area type="monotone" dataKey="matched" stroke="#7C3AED" fill="#7C3AED10" strokeWidth={2} name="Matchées"/></AreaChart> | |
| </ResponsiveContainer> | |
| </DCard> | |
| </div> | |
| </DSec> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } | |
| /* ══════════ APP ROOT ══════════ */ | |
| export default function App() { | |
| const[persona,setPersona]=useState("sophie"); | |
| const[mainTab,setMainTab]=useState("tool"); // tool | dossier | |
| const pc = PERSONAS[persona]; | |
| return ( | |
| <div style={{minHeight:"100vh",background:"#F4F6F9",fontFamily:"'Outfit','DM Sans',sans-serif",color:"#0F172A"}}> | |
| <style>{` | |
| @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@600;700&family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap'); | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} | |
| @keyframes fadeIn{from{opacity:0}to{opacity:1}} | |
| @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} | |
| input,textarea,button,select{font-family:inherit} | |
| ::-webkit-scrollbar{width:5px;height:5px} | |
| ::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:3px} | |
| `}</style> | |
| {/* ── HEADER ── */} | |
| <header style={{background:"#FFF",borderBottom:"1.5px solid #E2E8F0",position:"sticky",top:0,zIndex:100,boxShadow:"0 1px 0 rgba(0,0,0,.04)"}}> | |
| <div style={{maxWidth:960,margin:"0 auto",padding:"0 24px"}}> | |
| <div style={{display:"flex",alignItems:"center",gap:14,paddingTop:14,paddingBottom:12,borderBottom:"1px solid #F8FAFC",flexWrap:"wrap",rowGap:8}}> | |
| <div style={{width:40,height:40,borderRadius:11,background:"linear-gradient(135deg,#2563EB,#0891B2)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:18,boxShadow:"0 2px 8px rgba(37,99,235,.3)",flexShrink:0}}>🎯</div> | |
| <div style={{flex:1,minWidth:140}}> | |
| <div style={{fontWeight:900,fontSize:17,color:"#0F172A",letterSpacing:"-.01em",lineHeight:1.2}}>ROME NAF Pro</div> | |
| <div style={{fontSize:11,color:"#9CA3AF"}}>Décodeur IA · Référentiel France Travail · v4.0</div> | |
| </div> | |
| {/* Persona switcher */} | |
| <div style={{display:"flex",gap:1,background:"#F1F5F9",borderRadius:10,padding:3,border:"1px solid #E2E8F0"}}> | |
| {Object.values(PERSONAS).map(p=>( | |
| <button key={p.id} onClick={()=>setPersona(p.id)} style={{display:"flex",alignItems:"center",gap:7,padding:"7px 14px",borderRadius:8,border:"none",background:persona===p.id?"#FFF":"none",color:persona===p.id?p.color:"#9CA3AF",fontWeight:persona===p.id?800:500,fontSize:12.5,cursor:"pointer",transition:"all .2s",boxShadow:persona===p.id?"0 1px 3px rgba(0,0,0,.08)":"none",whiteSpace:"nowrap"}}> | |
| <span style={{fontSize:16}}>{p.icon}</span> | |
| <span>{p.name}</span> | |
| <span style={{fontSize:10,opacity:.7}}>— {p.id==="sophie"?"Conseillère":"Chasseur"}</span> | |
| </button> | |
| ))} | |
| </div> | |
| {/* Main tab switcher */} | |
| <div style={{display:"flex",gap:6}}> | |
| {[{id:"tool",label:"🔍 Outil",},{id:"dossier",label:"📋 Dossier UX"}].map(t=>( | |
| <button key={t.id} onClick={()=>setMainTab(t.id)} style={{padding:"7px 16px",borderRadius:8,border:`1.5px solid ${mainTab===t.id?"#2563EB":"#E2E8F0"}`,background:mainTab===t.id?"#EFF6FF":"#FFF",color:mainTab===t.id?"#2563EB":"#6B7280",fontWeight:mainTab===t.id?700:500,fontSize:12,cursor:"pointer",transition:"all .2s"}}> | |
| {t.label} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| {/* Persona indicator */} | |
| <div style={{padding:"8px 0",display:"flex",alignItems:"center",gap:10}}> | |
| <span style={{fontSize:18}}>{pc.icon}</span> | |
| <span style={{fontSize:12.5,fontWeight:600,color:pc.color}}>{pc.name}</span> | |
| <span style={{fontSize:11,color:"#9CA3AF"}}>·</span> | |
| <span style={{fontSize:11,color:"#9CA3AF"}}>{pc.role}</span> | |
| <span style={{fontSize:11,color:"#9CA3AF"}}>·</span> | |
| <span style={{fontSize:11,color:pc.color,fontWeight:600}}>{pc.tagline}</span> | |
| </div> | |
| </div> | |
| </header> | |
| {/* ── MAIN ── */} | |
| <main style={{maxWidth:960,margin:"0 auto",padding:"24px 24px 80px"}}> | |
| {mainTab==="tool"&&<ToolModule persona={persona}/>} | |
| {mainTab==="dossier"&&<DossierModule/>} | |
| </main> | |
| <footer style={{borderTop:"1.5px solid #E2E8F0",background:"#FFF",padding:"14px 24px",textAlign:"center"}}> | |
| <span style={{fontSize:11,color:"#CBD5E1"}}>ROME NAF Pro v4 · Claude (Anthropic) · Référentiel France Travail · <strong style={{color:"#9CA3AF"}}>RGAA AA</strong> · Données stockées localement</span> | |
| </footer> | |
| </div> | |
| ); | |
| } | |