ux(ui): readable persona form instead of raw JSON + step-by-step guides for non-IT users

- GroupEdit: replace raw JSON persona dump with a labeled, sectioned PersonaForm
  (ข้อมูลพื้นฐาน / ข้อมูลลูกค้า / การขาย / ช่องทาง) shown in a modal; admin edits by field.
- New reusable components/PersonaForm.vue.
- GroupBuilder + Personas: add friendly step-by-step guidance cards ('วิธีสร้าง',
  'วิธีฝึก') so admins/trainees know what to do at each step.
- Rebuild dist.

frontend/dist/assets/AdminUsers-Dk0NfGIJ.js

@@ -1 +1 @@
-import{k as x,c as r,a,t,u,i as d,w as n,v as m,C as g,e as _,F as U,p as k,q as f,r as p,o as i,z as V}from"./index-gmrXNPrQ.js";const b={class:"card",style:{"margin-bottom":"16px"}},C={class:"row"},h={key:0,class:"error"},B={style:{flex:"1"}},M={class:"badge"},D={__name:"AdminUsers",setup(N){const v=p([]),o=p(""),s=p({name:"",email:"",password:"",role:"user"});async function c(){v.value=(await f.adminListUsers()).users}async function w(){o.value="";try{await f.adminCreateUser({...s.value}),s.value={name:"",email:"",password:"",role:"user"},await c()}catch(y){o.value=y.message}}return x(c),(y,l)=>(i(),r("div",null,[a("h2",null,t(u(d).t("users")),1),a("div",b,[a("h4",null,"+ "+t(u(d).t("create"))+" user",1),a("div",C,[n(a("input",{"onUpdate:modelValue":l[0]||(l[0]=e=>s.value.name=e),placeholder:"Name",style:{flex:"1"}},null,512),[[m,s.value.name]]),n(a("input",{"onUpdate:modelValue":l[1]||(l[1]=e=>s.value.email=e),placeholder:"Email",style:{flex:"1"}},null,512),[[m,s.value.email]]),n(a("input",{"onUpdate:modelValue":l[2]||(l[2]=e=>s.value.password=e),type:"password",placeholder:"Temp password",style:{flex:"1"}},null,512),[[m,s.value.password]]),n(a("select",{"onUpdate:modelValue":l[3]||(l[3]=e=>s.value.role=e),style:{flex:"1"}},[...l[4]||(l[4]=[a("option",{value:"user"},"user",-1),a("option",{value:"admin"},"admin",-1)])],512),[[g,s.value.role]]),a("button",{class:"primary",onClick:w},t(u(d).t("create")),1)]),o.value?(i(),r("div",h,t(o.value),1)):_("",!0)]),(i(!0),r(U,null,k(v.value,e=>(i(),r("div",{class:"card",key:e.id,style:{"margin-bottom":"8px",display:"flex","align-items":"center",gap:"12px"}},[a("strong",B,t(e.name)+" ("+t(e.email)+")",1),a("span",M,t(e.role),1),a("span",{class:V(["badge",e.active?"won":"lost"])},t(e.active?"active":"inactive"),3)]))),128))]))}};export{D as default};
+import{k as x,c as r,a,t,u,i as d,w as n,v as m,C as g,e as _,F as U,p as k,q as f,r as p,o as i,z as V}from"./index-B2m5OgR7.js";const b={class:"card",style:{"margin-bottom":"16px"}},C={class:"row"},h={key:0,class:"error"},B={style:{flex:"1"}},M={class:"badge"},D={__name:"AdminUsers",setup(N){const v=p([]),o=p(""),s=p({name:"",email:"",password:"",role:"user"});async function c(){v.value=(await f.adminListUsers()).users}async function w(){o.value="";try{await f.adminCreateUser({...s.value}),s.value={name:"",email:"",password:"",role:"user"},await c()}catch(y){o.value=y.message}}return x(c),(y,l)=>(i(),r("div",null,[a("h2",null,t(u(d).t("users")),1),a("div",b,[a("h4",null,"+ "+t(u(d).t("create"))+" user",1),a("div",C,[n(a("input",{"onUpdate:modelValue":l[0]||(l[0]=e=>s.value.name=e),placeholder:"Name",style:{flex:"1"}},null,512),[[m,s.value.name]]),n(a("input",{"onUpdate:modelValue":l[1]||(l[1]=e=>s.value.email=e),placeholder:"Email",style:{flex:"1"}},null,512),[[m,s.value.email]]),n(a("input",{"onUpdate:modelValue":l[2]||(l[2]=e=>s.value.password=e),type:"password",placeholder:"Temp password",style:{flex:"1"}},null,512),[[m,s.value.password]]),n(a("select",{"onUpdate:modelValue":l[3]||(l[3]=e=>s.value.role=e),style:{flex:"1"}},[...l[4]||(l[4]=[a("option",{value:"user"},"user",-1),a("option",{value:"admin"},"admin",-1)])],512),[[g,s.value.role]]),a("button",{class:"primary",onClick:w},t(u(d).t("create")),1)]),o.value?(i(),r("div",h,t(o.value),1)):_("",!0)]),(i(!0),r(U,null,k(v.value,e=>(i(),r("div",{class:"card",key:e.id,style:{"margin-bottom":"8px",display:"flex","align-items":"center",gap:"12px"}},[a("strong",B,t(e.name)+" ("+t(e.email)+")",1),a("span",M,t(e.role),1),a("span",{class:V(["badge",e.active?"won":"lost"])},t(e.active?"active":"inactive"),3)]))),128))]))}};export{D as default};

frontend/dist/assets/Analytics-CSPAOjOx.js

@@ -1 +1 @@
-import{_ as x,k,c,a as s,t,u as o,i as l,l as m,m as y,w as h,v as f,n as C,e as N,F as V,p as L,q as A,s as B,r as u,o as _}from"./index-gmrXNPrQ.js";const S={class:"row",style:{"align-items":"center","margin-bottom":"16px"}},j={style:{margin:"0"}},z={class:"row",style:{"margin-left":"auto",gap:"10px"}},D={class:"users-btn"},F={class:"primary"},M={class:"card filter-bar"},P={class:"muted"},R=["disabled"],T=["disabled"],U={class:"row",style:{gap:"16px",margin:"16px 0"}},W={class:"card stat"},q={class:"card stat"},E={style:{color:"var(--green)"}},I={class:"card stat"},O={style:{color:"var(--red)"}},G={class:"card stat"},H={class:"card stat"},J={class:"card"},K={class:"row",style:{"justify-content":"space-between","align-items":"center"}},Q={class:"bar"},X={class:"muted",style:{"font-size":"12px","margin-top":"6px"}},Y={style:{"margin-top":"20px"}},Z={key:0,class:"card empty-state"},$={class:"grid"},ss={class:"row",style:{"justify-content":"space-between"}},ts={class:"muted"},es={class:"row",style:{"margin-top":"10px",gap:"8px"}},as={class:"badge won"},os={class:"badge lost"},ls={class:"badge not_tried"},ns={class:"muted",style:{"margin-top":"8px"}},is={__name:"Analytics",setup(rs){const a=u({overall:{total_sessions:0,wins:0,losses:0,close_rate:0,avg_score:0},trainee_count:0,hardest_personas:[]}),i=u(""),r=u(""),d=u(!1);async function v(){d.value=!0;try{a.value=await A.analytics({from:i.value,to:r.value})}finally{d.value=!1}}function w(){v()}function b(){i.value="",r.value="",v()}return k(v),(ds,e)=>{const p=B("router-link");return _(),c("div",null,[s("div",S,[s("h2",j,"📊 "+t(o(l).t("adminOverview")),1),s("div",z,[m(p,{to:"/admin/users"},{default:y(()=>[s("button",D,"👥 "+t(o(l).t("users")),1)]),_:1}),m(p,{to:"/admin/new-group"},{default:y(()=>[s("button",F,"＋ "+t(o(l).t("addProduct")),1)]),_:1})])]),s("div",M,[s("span",P,"🗓 "+t(o(l).t("dateRange")),1),h(s("input",{type:"date","onUpdate:modelValue":e[0]||(e[0]=n=>i.value=n)},null,512),[[f,i.value]]),e[2]||(e[2]=s("span",null,"–",-1)),h(s("input",{type:"date","onUpdate:modelValue":e[1]||(e[1]=n=>r.value=n)},null,512),[[f,r.value]]),s("button",{class:"primary",onClick:w,disabled:d.value},"→ "+t(o(l).t("apply")),9,R),s("button",{onClick:b,disabled:d.value},t(o(l).t("clear")),9,T)]),s("div",U,[s("div",W,[e[3]||(e[3]=s("div",null,"Sessions",-1)),s("strong",null,t(a.value.overall.total_sessions),1)]),s("div",q,[e[4]||(e[4]=s("div",null,"Wins",-1)),s("strong",E,t(a.value.overall.wins),1)]),s("div",I,[e[5]||(e[5]=s("div",null,"Losses",-1)),s("strong",O,t(a.value.overall.losses),1)]),s("div",G,[e[6]||(e[6]=s("div",null,"Avg score",-1)),s("strong",null,t(a.value.overall.avg_score),1)]),s("div",H,[e[7]||(e[7]=s("div",null,"Trainees",-1)),s("strong",null,t(a.value.trainee_count),1)])]),s("div",J,[s("div",K,[s("strong",null,t(o(l).t("closeRate")),1),s("strong",null,t(a.value.overall.close_rate)+"%",1)]),s("div",Q,[s("div",{class:"bar-fill",style:C({width:(a.value.overall.close_rate||0)+"%"})},null,4)]),s("div",X,t(a.value.overall.wins)+" "+t(o(l).t("won").toLowerCase())+" / "+t(a.value.overall.total_sessions)+" sessions ",1)]),s("h3",Y,t(o(l).t("hardestPersonas")),1),a.value.hardest_personas.length===0?(_(),c("div",Z,[...e[8]||(e[8]=[s("strong",null,"No data",-1),s("span",null,"No sessions in this date range.",-1)])])):N("",!0),s("div",$,[(_(!0),c(V,null,L(a.value.hardest_personas,(n,g)=>(_(),c("div",{key:g,class:"card lift tier-card"},[s("div",ss,[s("strong",null,t(n.persona_name),1),s("span",ts,"#"+t(g+1),1)]),s("div",es,[s("span",as,t(n.wins)+"W",1),s("span",os,t(n.losses)+"L",1),s("span",ls,t(n.plays)+" plays",1)]),s("div",ns,t(o(l).t("score"))+": "+t(n.avg_score),1)]))),128))])])}}},us=x(is,[["__scopeId","data-v-9558687f"]]);export{us as default};
+import{_ as x,k,c,a as s,t,u as o,i as l,l as m,m as y,w as h,v as f,n as C,e as N,F as V,p as L,q as A,s as B,r as u,o as _}from"./index-B2m5OgR7.js";const S={class:"row",style:{"align-items":"center","margin-bottom":"16px"}},j={style:{margin:"0"}},z={class:"row",style:{"margin-left":"auto",gap:"10px"}},D={class:"users-btn"},F={class:"primary"},M={class:"card filter-bar"},P={class:"muted"},R=["disabled"],T=["disabled"],U={class:"row",style:{gap:"16px",margin:"16px 0"}},W={class:"card stat"},q={class:"card stat"},E={style:{color:"var(--green)"}},I={class:"card stat"},O={style:{color:"var(--red)"}},G={class:"card stat"},H={class:"card stat"},J={class:"card"},K={class:"row",style:{"justify-content":"space-between","align-items":"center"}},Q={class:"bar"},X={class:"muted",style:{"font-size":"12px","margin-top":"6px"}},Y={style:{"margin-top":"20px"}},Z={key:0,class:"card empty-state"},$={class:"grid"},ss={class:"row",style:{"justify-content":"space-between"}},ts={class:"muted"},es={class:"row",style:{"margin-top":"10px",gap:"8px"}},as={class:"badge won"},os={class:"badge lost"},ls={class:"badge not_tried"},ns={class:"muted",style:{"margin-top":"8px"}},is={__name:"Analytics",setup(rs){const a=u({overall:{total_sessions:0,wins:0,losses:0,close_rate:0,avg_score:0},trainee_count:0,hardest_personas:[]}),i=u(""),r=u(""),d=u(!1);async function v(){d.value=!0;try{a.value=await A.analytics({from:i.value,to:r.value})}finally{d.value=!1}}function w(){v()}function b(){i.value="",r.value="",v()}return k(v),(ds,e)=>{const p=B("router-link");return _(),c("div",null,[s("div",S,[s("h2",j,"📊 "+t(o(l).t("adminOverview")),1),s("div",z,[m(p,{to:"/admin/users"},{default:y(()=>[s("button",D,"👥 "+t(o(l).t("users")),1)]),_:1}),m(p,{to:"/admin/new-group"},{default:y(()=>[s("button",F,"＋ "+t(o(l).t("addProduct")),1)]),_:1})])]),s("div",M,[s("span",P,"🗓 "+t(o(l).t("dateRange")),1),h(s("input",{type:"date","onUpdate:modelValue":e[0]||(e[0]=n=>i.value=n)},null,512),[[f,i.value]]),e[2]||(e[2]=s("span",null,"–",-1)),h(s("input",{type:"date","onUpdate:modelValue":e[1]||(e[1]=n=>r.value=n)},null,512),[[f,r.value]]),s("button",{class:"primary",onClick:w,disabled:d.value},"→ "+t(o(l).t("apply")),9,R),s("button",{onClick:b,disabled:d.value},t(o(l).t("clear")),9,T)]),s("div",U,[s("div",W,[e[3]||(e[3]=s("div",null,"Sessions",-1)),s("strong",null,t(a.value.overall.total_sessions),1)]),s("div",q,[e[4]||(e[4]=s("div",null,"Wins",-1)),s("strong",E,t(a.value.overall.wins),1)]),s("div",I,[e[5]||(e[5]=s("div",null,"Losses",-1)),s("strong",O,t(a.value.overall.losses),1)]),s("div",G,[e[6]||(e[6]=s("div",null,"Avg score",-1)),s("strong",null,t(a.value.overall.avg_score),1)]),s("div",H,[e[7]||(e[7]=s("div",null,"Trainees",-1)),s("strong",null,t(a.value.trainee_count),1)])]),s("div",J,[s("div",K,[s("strong",null,t(o(l).t("closeRate")),1),s("strong",null,t(a.value.overall.close_rate)+"%",1)]),s("div",Q,[s("div",{class:"bar-fill",style:C({width:(a.value.overall.close_rate||0)+"%"})},null,4)]),s("div",X,t(a.value.overall.wins)+" "+t(o(l).t("won").toLowerCase())+" / "+t(a.value.overall.total_sessions)+" sessions ",1)]),s("h3",Y,t(o(l).t("hardestPersonas")),1),a.value.hardest_personas.length===0?(_(),c("div",Z,[...e[8]||(e[8]=[s("strong",null,"No data",-1),s("span",null,"No sessions in this date range.",-1)])])):N("",!0),s("div",$,[(_(!0),c(V,null,L(a.value.hardest_personas,(n,g)=>(_(),c("div",{key:g,class:"card lift tier-card"},[s("div",ss,[s("strong",null,t(n.persona_name),1),s("span",ts,"#"+t(g+1),1)]),s("div",es,[s("span",as,t(n.wins)+"W",1),s("span",os,t(n.losses)+"L",1),s("span",ls,t(n.plays)+" plays",1)]),s("div",ns,t(o(l).t("score"))+": "+t(n.avg_score),1)]))),128))])])}}},us=x(is,[["__scopeId","data-v-9558687f"]]);export{us as default};

frontend/dist/assets/Chat-A2iClHWr.js

@@ -1 +1 @@
-import{_ as K,k as M,q as k,c as t,l as S,m as D,u as l,a as s,t as e,z as C,e as i,j as m,i as n,F,p as I,w as q,v as E,b as H,h as J,r as c,B as L,s as O,o}from"./index-gmrXNPrQ.js";const P={class:"row",style:{"align-items":"center","margin-bottom":"12px"}},R={style:{margin:"0"}},U={key:0,class:"muted"},$=["disabled"],A={key:0,class:"spinner",style:{"margin-right":"4px"}},G={key:0,class:"card task"},Q={key:0},W={key:0,class:"bubble msg-customer muted"},X={key:2,class:"composer"},Y=["disabled","placeholder"],Z=["disabled"],ee={key:3,class:"card debrief"},se={key:0},ae={class:"json"},te={class:"primary",style:{"margin-top":"12px"}},le={__name:"Chat",setup(ne){const N=J(),_=N.params.gid,g=N.params.pid,r=c(null),f=c(!1),v=c([]),p=c(""),d=c(!1),u=c(null),w=c(""),j=c(null);function T(){L(()=>{y.value&&(y.value.scrollTop=y.value.scrollHeight)})}const y=c(null);M(async()=>{r.value=(await k.getPersona(_,g)).persona;const a=await k.chatStart(_,g);j.value=a.session.id,a.session.task&&(w.value=a.session.task),v.value=a.session.messages||[],f.value=!0,v.value.length&&T()});async function V(){if(p.value.trim()){d.value=!0;try{const a=await k.chatSend(_,g,p.value.trim());v.value=a.messages,p.value="",T()}catch(a){alert(a.message)}finally{d.value=!1}}}async function z(){if(confirm(n.t("finish")+"?")){d.value=!0;try{const a=await k.chatFinish(_,g);u.value=a.debrief,v.value=a.session.messages}catch(a){alert(a.message)}finally{d.value=!1}}}return(a,b)=>{const B=O("router-link");return o(),t("div",null,[S(B,{to:`/groups/${l(_)}/personas`,class:"btn-back"},{default:D(()=>[m("← "+e(l(n).t("personas")),1)]),_:1},8,["to"]),s("div",P,[s("h2",R,e(r.value?r.value.name:"..."),1),s("span",{class:C(["badge",r.value&&r.value.channel])},e(r.value?r.value.channel:""),3),r.value?(o(),t("span",U,e(r.value.profession)+" · "+e(r.value.age_group),1)):i("",!0),s("button",{class:"danger",style:{"margin-left":"auto"},onClick:z,disabled:v.value.length===0||!!u.value},[d.value?(o(),t("span",A)):i("",!0),m(e(l(n).t("finish")),1)],8,$)]),f.value?i("",!0):(o(),t("div",G,[s("strong",null,"📣 "+e(l(n).t("sellerInitiated")),1),w.value?(o(),t("div",Q,e(w.value),1)):i("",!0)])),f.value?(o(),t("div",{key:1,class:"thread",ref_key:"thread",ref:y},[(o(!0),t(F,null,I(v.value,(h,x)=>(o(),t("div",{key:x,class:C(["bubble",h.role==="seller"?"msg-seller":"msg-customer"])},e(h.text),3))),128)),d.value?(o(),t("div",W,"...")):i("",!0)],512)):i("",!0),f.value&&!u.value?(o(),t("div",X,[q(s("input",{"onUpdate:modelValue":b[0]||(b[0]=h=>p.value=h),onKeyup:H(V,["enter"]),disabled:d.value,placeholder:l(n).t("send")},null,40,Y),[[E,p.value]]),s("button",{class:"primary",onClick:V,disabled:d.value||!p.value.trim()},e(l(n).t("send")),9,Z)])):i("",!0),u.value?(o(),t("div",ee,[s("h3",null,e(l(n).t("debrief")),1),s("p",null,[s("span",{class:C(["badge",u.value.outcome])},e(u.value.outcome==="won"?l(n).t("won"):l(n).t("lost")),3),m(" — "+e(l(n).t("score"))+": ",1),s("strong",null,e(u.value.score),1)]),s("p",null,[s("strong",null,e(l(n).t("pain"))+":",1),m(" "+e(u.value.pain||"—"),1)]),s("p",null,[s("strong",null,e(l(n).t("why"))+":",1),m(" "+e(u.value.why),1)]),u.value.coaching&&u.value.coaching.length?(o(),t("div",se,[b[1]||(b[1]=s("strong",null,"Coaching:",-1)),s("ul",null,[(o(!0),t(F,null,I(u.value.coaching,(h,x)=>(o(),t("li",{key:x},e(h),1))),128))])])):i("",!0),s("details",null,[s("summary",null,e(l(n).t("reveal")),1),s("pre",ae,e(JSON.stringify(u.value.revealed_persona,null,2)),1)]),S(B,{to:"/"},{default:D(()=>[s("button",te,e(l(n).t("dashboard")),1)]),_:1})])):i("",!0)])}}},ue=K(le,[["__scopeId","data-v-4f54526a"]]);export{ue as default};
+import{_ as K,k as M,q as k,c as t,l as S,m as D,u as l,a as s,t as e,z as C,e as i,j as m,i as n,F,p as I,w as q,v as E,b as H,h as J,r as c,B as L,s as O,o}from"./index-B2m5OgR7.js";const P={class:"row",style:{"align-items":"center","margin-bottom":"12px"}},R={style:{margin:"0"}},U={key:0,class:"muted"},$=["disabled"],A={key:0,class:"spinner",style:{"margin-right":"4px"}},G={key:0,class:"card task"},Q={key:0},W={key:0,class:"bubble msg-customer muted"},X={key:2,class:"composer"},Y=["disabled","placeholder"],Z=["disabled"],ee={key:3,class:"card debrief"},se={key:0},ae={class:"json"},te={class:"primary",style:{"margin-top":"12px"}},le={__name:"Chat",setup(ne){const N=J(),_=N.params.gid,g=N.params.pid,r=c(null),f=c(!1),v=c([]),p=c(""),d=c(!1),u=c(null),w=c(""),j=c(null);function T(){L(()=>{y.value&&(y.value.scrollTop=y.value.scrollHeight)})}const y=c(null);M(async()=>{r.value=(await k.getPersona(_,g)).persona;const a=await k.chatStart(_,g);j.value=a.session.id,a.session.task&&(w.value=a.session.task),v.value=a.session.messages||[],f.value=!0,v.value.length&&T()});async function V(){if(p.value.trim()){d.value=!0;try{const a=await k.chatSend(_,g,p.value.trim());v.value=a.messages,p.value="",T()}catch(a){alert(a.message)}finally{d.value=!1}}}async function z(){if(confirm(n.t("finish")+"?")){d.value=!0;try{const a=await k.chatFinish(_,g);u.value=a.debrief,v.value=a.session.messages}catch(a){alert(a.message)}finally{d.value=!1}}}return(a,b)=>{const B=O("router-link");return o(),t("div",null,[S(B,{to:`/groups/${l(_)}/personas`,class:"btn-back"},{default:D(()=>[m("← "+e(l(n).t("personas")),1)]),_:1},8,["to"]),s("div",P,[s("h2",R,e(r.value?r.value.name:"..."),1),s("span",{class:C(["badge",r.value&&r.value.channel])},e(r.value?r.value.channel:""),3),r.value?(o(),t("span",U,e(r.value.profession)+" · "+e(r.value.age_group),1)):i("",!0),s("button",{class:"danger",style:{"margin-left":"auto"},onClick:z,disabled:v.value.length===0||!!u.value},[d.value?(o(),t("span",A)):i("",!0),m(e(l(n).t("finish")),1)],8,$)]),f.value?i("",!0):(o(),t("div",G,[s("strong",null,"📣 "+e(l(n).t("sellerInitiated")),1),w.value?(o(),t("div",Q,e(w.value),1)):i("",!0)])),f.value?(o(),t("div",{key:1,class:"thread",ref_key:"thread",ref:y},[(o(!0),t(F,null,I(v.value,(h,x)=>(o(),t("div",{key:x,class:C(["bubble",h.role==="seller"?"msg-seller":"msg-customer"])},e(h.text),3))),128)),d.value?(o(),t("div",W,"...")):i("",!0)],512)):i("",!0),f.value&&!u.value?(o(),t("div",X,[q(s("input",{"onUpdate:modelValue":b[0]||(b[0]=h=>p.value=h),onKeyup:H(V,["enter"]),disabled:d.value,placeholder:l(n).t("send")},null,40,Y),[[E,p.value]]),s("button",{class:"primary",onClick:V,disabled:d.value||!p.value.trim()},e(l(n).t("send")),9,Z)])):i("",!0),u.value?(o(),t("div",ee,[s("h3",null,e(l(n).t("debrief")),1),s("p",null,[s("span",{class:C(["badge",u.value.outcome])},e(u.value.outcome==="won"?l(n).t("won"):l(n).t("lost")),3),m(" — "+e(l(n).t("score"))+": ",1),s("strong",null,e(u.value.score),1)]),s("p",null,[s("strong",null,e(l(n).t("pain"))+":",1),m(" "+e(u.value.pain||"—"),1)]),s("p",null,[s("strong",null,e(l(n).t("why"))+":",1),m(" "+e(u.value.why),1)]),u.value.coaching&&u.value.coaching.length?(o(),t("div",se,[b[1]||(b[1]=s("strong",null,"Coaching:",-1)),s("ul",null,[(o(!0),t(F,null,I(u.value.coaching,(h,x)=>(o(),t("li",{key:x},e(h),1))),128))])])):i("",!0),s("details",null,[s("summary",null,e(l(n).t("reveal")),1),s("pre",ae,e(JSON.stringify(u.value.revealed_persona,null,2)),1)]),S(B,{to:"/"},{default:D(()=>[s("button",te,e(l(n).t("dashboard")),1)]),_:1})])):i("",!0)])}}},ue=K(le,[["__scopeId","data-v-4f54526a"]]);export{ue as default};

frontend/dist/assets/GroupBuilder-B8gqmNUJ.css

@@ -0,0 +1 @@
+.guide[data-v-c7f3b0ac]{background:#eef2ff;border-color:#c7d2fe;margin-bottom:16px}.req[data-v-c7f3b0ac]{color:var(--red)}

frontend/dist/assets/GroupBuilder-CxLYlayH.js

@@ -1 +0,0 @@
-import{c as g,a as e,t as l,u as o,i as n,w as r,v,C as m,e as x,r as p,g as k,o as f,q as w}from"./index-gmrXNPrQ.js";const V={class:"card"},B={class:"row"},C={style:{flex:"1"}},U={value:"facebook"},D={value:"line"},F={style:{flex:"1"}},S={value:"th"},E={value:"en"},G={key:0,class:"error"},M=["disabled"],A={__name:"GroupBuilder",setup(N){const h=k(),t=p({product:"",segment:"",description:"",channel:"facebook",language:"th"}),c=p([]),d=p(""),i=p(!1);function _(a){c.value=Array.from(a.target.files||[])}async function b(){i.value=!0,d.value="";try{const a=new FormData;a.append("product",t.value.product),a.append("segment",t.value.segment),a.append("description",t.value.description),a.append("channel",t.value.channel),a.append("language",t.value.language),c.value.forEach(y=>a.append("files",y));const u=(await w.createGroup(a)).group.id;h.push(`/admin/groups/${u}/edit`)}catch(a){d.value=a.message}finally{i.value=!1}}return(a,s)=>(f(),g("div",V,[e("h2",null,l(o(n).t("groupBuilder")),1),e("label",null,l(o(n).t("product")),1),r(e("textarea",{"onUpdate:modelValue":s[0]||(s[0]=u=>t.value.product=u),rows:"3",placeholder:"e.g. Cloud POS for small restaurants"},null,512),[[v,t.value.product]]),e("label",null,l(o(n).t("segment")),1),r(e("input",{"onUpdate:modelValue":s[1]||(s[1]=u=>t.value.segment=u)},null,512),[[v,t.value.segment]]),e("label",null,l(o(n).t("description")),1),r(e("textarea",{"onUpdate:modelValue":s[2]||(s[2]=u=>t.value.description=u),rows:"3"},null,512),[[v,t.value.description]]),e("div",B,[e("div",C,[e("label",null,l(o(n).t("channel")),1),r(e("select",{"onUpdate:modelValue":s[3]||(s[3]=u=>t.value.channel=u)},[e("option",U,l(o(n).t("facebook")),1),e("option",D,l(o(n).t("line")),1)],512),[[m,t.value.channel]])]),e("div",F,[e("label",null,l(o(n).t("language")),1),r(e("select",{"onUpdate:modelValue":s[4]||(s[4]=u=>t.value.language=u)},[e("option",S,l(o(n).t("thai")),1),e("option",E,l(o(n).t("english")),1)],512),[[m,t.value.language]])])]),e("label",null,"📎 Files (.pdf/.md/.txt) — "+l(o(n).t("product"))+" can come from here",1),e("input",{type:"file",multiple:"",accept:".pdf,.md,.txt",onChange:_},null,32),d.value?(f(),g("div",G,l(d.value),1)):x("",!0),e("button",{class:"primary",style:{"margin-top":"16px"},disabled:i.value||!t.value.product&&!c.value.length,onClick:b},l(i.value?"...":o(n).t("create")),9,M)]))}};export{A as default};

frontend/dist/assets/GroupBuilder-DfeKEJj_.js

@@ -0,0 +1 @@
+import{_ as k,c as f,l as V,m as w,a as e,j as r,t as a,u as s,i as u,w as d,v as m,C as _,e as C,s as B,r as c,q as S,g as U,o as h}from"./index-B2m5OgR7.js";const N={class:"card"},D={style:{"margin-top":"0"}},E={class:"row"},G={style:{flex:"1"}},M={value:"facebook"},P={value:"line"},q={style:{flex:"1"}},F={value:"th"},O={value:"en"},T={key:0,class:"error"},j=["disabled"],A={__name:"GroupBuilder",setup(I){const b=U(),t=c({product:"",segment:"",description:"",channel:"facebook",language:"th"}),v=c([]),i=c(""),p=c(!1);function x(n){v.value=Array.from(n.target.files||[])}async function y(){p.value=!0,i.value="";try{const n=new FormData;n.append("product",t.value.product),n.append("segment",t.value.segment),n.append("description",t.value.description),n.append("channel",t.value.channel),n.append("language",t.value.language),v.value.forEach(o=>n.append("files",o));const g=(await S.createGroup(n)).group.id;b.push(`/admin/groups/${g}/edit`)}catch(n){i.value=n.message}finally{p.value=!1}}return(n,l)=>{const g=B("router-link");return h(),f("div",null,[V(g,{to:"/training",class:"btn-back"},{default:w(()=>[r("← "+a(s(u).t("training")),1)]),_:1}),l[7]||(l[7]=e("div",{class:"card guide"},[e("strong",null,"📋 วิธีสร้างกลุ่มบุคคลต้นแบบ"),e("ol",{style:{margin:"8px 0 0","padding-left":"20px","line-height":"1.8"}},[e("li",null,[r("กรอก "),e("strong",null,"ชื่อ/รายละเอียดสินค้าหรือบริการ"),r(" ที่อยากให้ทีมฝึกขาย (ช่องด้านล่าง)")]),e("li",null,"(ไม่บังคับ) ระบุกลุ่มลูกค้าเป้าหมาย หรืออัปโหลดไฟล์เอกสารสินค้า .pdf/.md/.txt"),e("li",null,[r("กด "),e("strong",null,"สร้าง"),r(" — ระบบจะพาไปหน้าสร้างบุคคลต้นแบบ (ลูกค้าจำลอง)")])])],-1)),e("div",N,[e("h2",D,"📦 "+a(s(u).t("addProduct")),1),e("label",null,[r(a(s(u).t("product"))+" ",1),l[5]||(l[5]=e("span",{class:"req"},"*",-1))]),d(e("textarea",{"onUpdate:modelValue":l[0]||(l[0]=o=>t.value.product=o),rows:"3",placeholder:"เช่น ระบบ POS สำหรับร้านอาหาร Cloud POS for small restaurants"},null,512),[[m,t.value.product]]),e("label",null,a(s(u).t("segment")),1),d(e("input",{"onUpdate:modelValue":l[1]||(l[1]=o=>t.value.segment=o),placeholder:"เช่น SMEs ร้านอาหารในกรุงเทพ"},null,512),[[m,t.value.segment]]),e("label",null,a(s(u).t("description")),1),d(e("textarea",{"onUpdate:modelValue":l[2]||(l[2]=o=>t.value.description=o),rows:"3",placeholder:"รายละเอียดเพิ่มเติม เช่น จุดเด่นสินค้า ราคา ฯลฯ (ไม่บังคับ)"},null,512),[[m,t.value.description]]),e("div",E,[e("div",G,[e("label",null,a(s(u).t("channel")),1),d(e("select",{"onUpdate:modelValue":l[3]||(l[3]=o=>t.value.channel=o)},[e("option",M,a(s(u).t("facebook")),1),e("option",P,a(s(u).t("line")),1)],512),[[_,t.value.channel]])]),e("div",q,[e("label",null,a(s(u).t("language")),1),d(e("select",{"onUpdate:modelValue":l[4]||(l[4]=o=>t.value.language=o)},[e("option",F,a(s(u).t("thai")),1),e("option",O,a(s(u).t("english")),1)],512),[[_,t.value.language]])])]),l[6]||(l[6]=e("label",null,"📎 ไฟล์เอกสารสินค้า (.pdf/.md/.txt) — ใช้เป็นข้อมูลให้ระบบได้",-1)),e("input",{type:"file",multiple:"",accept:".pdf,.md,.txt",onChange:x},null,32),i.value?(h(),f("div",T,a(i.value),1)):C("",!0),e("button",{class:"primary",style:{"margin-top":"16px"},disabled:p.value||!t.value.product&&!v.value.length,onClick:y},a(p.value?"กำลังสร้าง…":"➕ สร้างกลุ่มบุคคลต้นแบบ"),9,j)])])}}},$=k(A,[["__scopeId","data-v-c7f3b0ac"]]);export{$ as default};

frontend/dist/assets/GroupEdit-BpqVXcH5.css

@@ -1 +0,0 @@
-.grid[data-v-ee1c1944]{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.pcard[data-v-ee1c1944]{display:flex;flex-direction:column}.pcard button[data-v-ee1c1944]{margin-top:auto}.json[data-v-ee1c1944]{background:#0f172a;color:#9ca3af;padding:10px;border-radius:8px;font-size:11px;overflow:auto;max-height:220px}

frontend/dist/assets/GroupEdit-DiRZ2lxy.js

@@ -1 +0,0 @@
-import{_ as S,k as E,c as n,l as J,m as O,a as t,t as e,u as d,i as l,e as m,j as k,F as b,p as x,h as z,q as y,s as G,r as v,o}from"./index-gmrXNPrQ.js";const V={class:"row",style:{"align-items":"center","margin-bottom":"16px"}},j={style:{margin:"0"}},A=["disabled"],P={key:0,class:"spinner",style:{"margin-right":"4px"}},F={key:0,class:"error"},I={key:1,class:"card empty-state"},L={class:"grid"},T={class:"row"},q={key:0,class:"badge"},D={class:"muted"},M={class:"muted",style:{"margin-top":"4px"}},R={style:{"margin-top":"8px"},open:""},$={class:"json"},H=["onClick"],K={__name:"GroupEdit",setup(Q){const _=z().params.gid,g=v(null),p=v([]),i=v(!1),u=v("");async function f(){const s=await y.getGroup(_);g.value=s.group,p.value=(await y.listPersonas(_)).personas}function N(s){return p.value.filter(r=>r.tier===s)}function w(s){return l.t(s==="A"?"tierA":s==="B"?"tierB":"tierC")}async function C(){i.value=!0,u.value="";try{const s=await y.analyzeGroup(_);p.value=s.personas,await f()}catch(s){u.value=s.message}finally{i.value=!1}}function B(s){const r=prompt("Edit persona JSON (full fields):",JSON.stringify(s,null,2));if(r)try{const c=JSON.parse(r);y.updatePersona(_,s.id,c).then(f)}catch(c){u.value="Invalid JSON: "+c.message}}return E(f),(s,r)=>{const c=G("router-link");return o(),n("div",null,[J(c,{to:"/",class:"btn-back"},{default:O(()=>[k("← "+e(d(l).t("dashboard")),1)]),_:1}),t("div",V,[t("h2",j,e(d(l).t("groupBuilder"))+" — "+e(g.value&&g.value.title),1),t("button",{class:"primary",style:{"margin-left":"auto"},onClick:C,disabled:i.value},[i.value?(o(),n("span",P)):m("",!0),k(e(d(l).t("analyze")),1)],8,A)]),u.value?(o(),n("div",F,e(u.value),1)):m("",!0),p.value.length===0&&!i.value?(o(),n("div",I,[r[0]||(r[0]=t("strong",null,"No personas yet",-1)),t("span",null,"Click "+e(d(l).t("analyze"))+" to generate the 15 personas (5 per tier).",1)])):m("",!0),(o(),n(b,null,x(["A","B","C"],h=>t("div",{key:h,style:{"margin-bottom":"20px"}},[t("h4",null,e(w(h)),1),t("div",L,[(o(!0),n(b,null,x(N(h),a=>(o(),n("div",{key:a.id,class:"card pcard"},[t("div",T,[t("strong",null,e(a.name),1),a.special==="wrong_text"?(o(),n("span",q,"⚠️ wrong_text")):m("",!0)]),t("div",D,e(a.profession)+" · "+e(a.age_group)+" · "+e(a.channel)+" · "+e(a.initiation_mode),1),t("div",M,"diff "+e(a.difficulty)+" · "+e(a.income)+" · "+e(a.personality),1),t("details",R,[t("summary",null,e(d(l).t("reveal")),1),t("pre",$,e(JSON.stringify(a,null,2)),1)]),t("button",{onClick:W=>B(a)},"✏️ Edit",8,H)]))),128))])])),64))])}}},Y=S(K,[["__scopeId","data-v-ee1c1944"]]);export{Y as default};

frontend/dist/assets/GroupEdit-b5HdCSuv.css

@@ -0,0 +1 @@
+.sec[data-v-738758fc]{margin-top:20px}.sec h4[data-v-738758fc]{margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}.row[data-v-738758fc]{display:flex;gap:12px;flex-wrap:wrap}.f[data-v-738758fc]{flex:1;min-width:140px}label[data-v-738758fc]{font-size:13px;color:var(--muted);display:block;margin:10px 0 4px}input[data-v-738758fc],select[data-v-738758fc],textarea[data-v-738758fc]{width:100%}.actions[data-v-738758fc]{margin-top:20px}.grid[data-v-812ba03f]{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.pcard[data-v-812ba03f]{display:flex;flex-direction:column}.edit-btn[data-v-812ba03f]{margin-top:auto}.star[data-v-812ba03f]{color:#d8dbe3}.star.on[data-v-812ba03f]{color:#f59e0b}.badge.tier-a[data-v-812ba03f]{background:#dcfce7;color:#166534}.badge.tier-b[data-v-812ba03f]{background:#fef9c3;color:#854d0e}.badge.tier-c[data-v-812ba03f]{background:#fee2e2;color:#991b1b}.guide[data-v-812ba03f]{background:#eef2ff;border-color:#c7d2fe;margin-bottom:16px}.modal-backdrop[data-v-812ba03f]{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:flex;justify-content:center;align-items:flex-start;padding:40px 16px;z-index:50;overflow:auto}.modal[data-v-812ba03f]{background:#fff;border-radius:14px;padding:24px;width:100%;max-width:720px;box-shadow:0 20px 50px #00000040}

frontend/dist/assets/Login-B_jgPg0c.js

@@ -1 +1 @@
-import{_ as b,c as d,a as e,t as s,u as c,i as o,w as y,v as x,b as w,d as k,e as S,r as l,f,g as V,h as B,o as v}from"./index-gmrXNPrQ.js";const C={class:"login-wrap"},D={class:"card login-card"},K={class:"pw-wrap"},E=["type"],L=["aria-label"],M={key:0,class:"error",role:"alert"},N=["disabled"],R={key:0,class:"spinner"},U={key:1},q={__name:"Login",setup(H){const g=B(),_=V(),n=l(""),u=l(""),a=l(!1),r=l(""),i=l(!1);async function m(){r.value="",i.value=!0;try{await f.login(n.value.trim(),u.value),f.mustSetup?_.push({path:"/setup"}):_.push(g.query.redirect||"/")}catch{r.value=o.t("loginError")}finally{i.value=!1}}return(h,t)=>(v(),d("div",C,[e("div",D,[e("h1",null,"🎯 "+s(c(o).t("app")),1),t[3]||(t[3]=e("p",{class:"muted",style:{"margin-top":"-8px"}},"Sales training simulator",-1)),e("label",null,s(c(o).t("username")),1),y(e("input",{"onUpdate:modelValue":t[0]||(t[0]=p=>n.value=p),type:"text",autocomplete:"username",onKeyup:w(m,["enter"])},null,544),[[x,n.value]]),e("label",null,s(c(o).t("password")),1),e("div",K,[y(e("input",{"onUpdate:modelValue":t[1]||(t[1]=p=>u.value=p),type:a.value?"text":"password",autocomplete:"current-password",onKeyup:w(m,["enter"])},null,40,E),[[k,u.value]]),e("button",{type:"button",class:"pw-toggle",onClick:t[2]||(t[2]=p=>a.value=!a.value),"aria-label":a.value?"Hide password":"Show password"},s(a.value?"🙈":"👁"),9,L)]),r.value?(v(),d("div",M,s(r.value),1)):S("",!0),e("button",{class:"primary",style:{width:"100%","margin-top":"16px"},disabled:i.value||!n.value||!u.value,onClick:m},[i.value?(v(),d("span",R)):(v(),d("span",U,s(c(o).t("login")),1))],8,N)])]))}},P=b(q,[["__scopeId","data-v-f7904d9f"]]);export{P as default};
+import{_ as b,c as d,a as e,t as s,u as c,i as o,w as y,v as x,b as w,d as k,e as S,r as l,f,g as V,h as B,o as v}from"./index-B2m5OgR7.js";const C={class:"login-wrap"},D={class:"card login-card"},K={class:"pw-wrap"},E=["type"],L=["aria-label"],M={key:0,class:"error",role:"alert"},N=["disabled"],R={key:0,class:"spinner"},U={key:1},q={__name:"Login",setup(H){const g=B(),_=V(),n=l(""),u=l(""),a=l(!1),r=l(""),i=l(!1);async function m(){r.value="",i.value=!0;try{await f.login(n.value.trim(),u.value),f.mustSetup?_.push({path:"/setup"}):_.push(g.query.redirect||"/")}catch{r.value=o.t("loginError")}finally{i.value=!1}}return(h,t)=>(v(),d("div",C,[e("div",D,[e("h1",null,"🎯 "+s(c(o).t("app")),1),t[3]||(t[3]=e("p",{class:"muted",style:{"margin-top":"-8px"}},"Sales training simulator",-1)),e("label",null,s(c(o).t("username")),1),y(e("input",{"onUpdate:modelValue":t[0]||(t[0]=p=>n.value=p),type:"text",autocomplete:"username",onKeyup:w(m,["enter"])},null,544),[[x,n.value]]),e("label",null,s(c(o).t("password")),1),e("div",K,[y(e("input",{"onUpdate:modelValue":t[1]||(t[1]=p=>u.value=p),type:a.value?"text":"password",autocomplete:"current-password",onKeyup:w(m,["enter"])},null,40,E),[[k,u.value]]),e("button",{type:"button",class:"pw-toggle",onClick:t[2]||(t[2]=p=>a.value=!a.value),"aria-label":a.value?"Hide password":"Show password"},s(a.value?"🙈":"👁"),9,L)]),r.value?(v(),d("div",M,s(r.value),1)):S("",!0),e("button",{class:"primary",style:{width:"100%","margin-top":"16px"},disabled:i.value||!n.value||!u.value,onClick:m},[i.value?(v(),d("span",R)):(v(),d("span",U,s(c(o).t("login")),1))],8,N)])]))}},P=b(q,[["__scopeId","data-v-f7904d9f"]]);export{P as default};

frontend/dist/assets/MyBoard-C90Y_TAq.js

@@ -1 +1 @@
-import{_ as f,k as x,q as v,c as l,a as t,t as s,u as e,i as a,e as m,w as k,x as b,F as B,p as S,r as _,y as c,o as r,z as D}from"./index-gmrXNPrQ.js";const M={key:0,class:"row stat-row"},N={class:"card stat"},T={class:"card stat won"},z={class:"card stat lost"},C={class:"card stat"},F={key:1,class:"card"},V={key:2,class:"card empty-state"},j={class:"card",style:{"margin-top":"20px"}},q={style:{"margin-top":"0"}},E={__name:"MyBoard",setup(G){const o=_([]),u=_([]),p=_(!0),y=c(()=>o.value.length),g=c(()=>o.value.filter(n=>n.my_outcome==="won").length),h=c(()=>o.value.filter(n=>n.my_outcome==="lost").length),w=c(()=>o.value.filter(n=>n.my_outcome==="not_tried").length);return x(async()=>{try{o.value=(await v.myBoard()).board||[],u.value=(await v.mySessions()).sessions||[]}finally{p.value=!1}}),(n,i)=>(r(),l("div",null,[t("h2",null,"📊 "+s(e(a).t("myDashboard")),1),p.value?m("",!0):(r(),l("div",M,[t("div",N,[t("span",null,s(e(a).t("total")),1),t("strong",null,s(y.value),1)]),t("div",T,[t("span",null,s(e(a).t("won")),1),t("strong",null,s(g.value),1)]),t("div",z,[t("span",null,s(e(a).t("lost")),1),t("strong",null,s(h.value),1)]),t("div",C,[t("span",null,s(e(a).t("notTried")),1),t("strong",null,s(w.value),1)])])),p.value?(r(),l("div",F,[...i[0]||(i[0]=[t("div",{class:"skeleton",style:{height:"50px"}},null,-1)])])):o.value.length===0?(r(),l("div",V,[...i[1]||(i[1]=[t("strong",null,"No practice yet",-1),t("span",null,"Go to Training and try closing a sale with a persona.",-1)])])):m("",!0),k(t("div",j,[t("h3",q,s(e(a).t("mySessions")),1),(r(!0),l(B,null,S(u.value,d=>(r(),l("div",{key:d.id,style:{display:"flex","justify-content":"space-between",padding:"8px 0","border-bottom":"1px solid var(--border)"}},[t("span",null,s(d.persona_name),1),t("span",{class:D(["badge",d.outcome])},s(d.outcome==="won"?e(a).t("won"):e(a).t("lost")),3)]))),128))],512),[[b,u.value.length]])]))}},L=f(E,[["__scopeId","data-v-1f6ea068"]]);export{L as default};
+import{_ as f,k as x,q as v,c as l,a as t,t as s,u as e,i as a,e as m,w as k,x as b,F as B,p as S,r as _,y as c,o as r,z as D}from"./index-B2m5OgR7.js";const M={key:0,class:"row stat-row"},N={class:"card stat"},T={class:"card stat won"},z={class:"card stat lost"},C={class:"card stat"},F={key:1,class:"card"},V={key:2,class:"card empty-state"},j={class:"card",style:{"margin-top":"20px"}},q={style:{"margin-top":"0"}},E={__name:"MyBoard",setup(G){const o=_([]),u=_([]),p=_(!0),y=c(()=>o.value.length),g=c(()=>o.value.filter(n=>n.my_outcome==="won").length),h=c(()=>o.value.filter(n=>n.my_outcome==="lost").length),w=c(()=>o.value.filter(n=>n.my_outcome==="not_tried").length);return x(async()=>{try{o.value=(await v.myBoard()).board||[],u.value=(await v.mySessions()).sessions||[]}finally{p.value=!1}}),(n,i)=>(r(),l("div",null,[t("h2",null,"📊 "+s(e(a).t("myDashboard")),1),p.value?m("",!0):(r(),l("div",M,[t("div",N,[t("span",null,s(e(a).t("total")),1),t("strong",null,s(y.value),1)]),t("div",T,[t("span",null,s(e(a).t("won")),1),t("strong",null,s(g.value),1)]),t("div",z,[t("span",null,s(e(a).t("lost")),1),t("strong",null,s(h.value),1)]),t("div",C,[t("span",null,s(e(a).t("notTried")),1),t("strong",null,s(w.value),1)])])),p.value?(r(),l("div",F,[...i[0]||(i[0]=[t("div",{class:"skeleton",style:{height:"50px"}},null,-1)])])):o.value.length===0?(r(),l("div",V,[...i[1]||(i[1]=[t("strong",null,"No practice yet",-1),t("span",null,"Go to Training and try closing a sale with a persona.",-1)])])):m("",!0),k(t("div",j,[t("h3",q,s(e(a).t("mySessions")),1),(r(!0),l(B,null,S(u.value,d=>(r(),l("div",{key:d.id,style:{display:"flex","justify-content":"space-between",padding:"8px 0","border-bottom":"1px solid var(--border)"}},[t("span",null,s(d.persona_name),1),t("span",{class:D(["badge",d.outcome])},s(d.outcome==="won"?e(a).t("won"):e(a).t("lost")),3)]))),128))],512),[[b,u.value.length]])]))}},L=f(E,[["__scopeId","data-v-1f6ea068"]]);export{L as default};

frontend/dist/assets/Personas-BGoC8X56.js

@@ -1 +0,0 @@
-import{_ as $,k as N,c as r,l as v,m as u,a as t,t as s,u as a,i as o,f as b,e as V,F as _,p as y,h as z,q as I,s as L,r as k,o as n,j as x,z as f,A as w}from"./index-gmrXNPrQ.js";const T={class:"row",style:{"align-items":"center"}},j={style:{margin:"0"}},F={class:"muted",style:{"margin-left":"auto"}},q={key:0,class:"row",style:{margin:"12px 0",gap:"10px"}},D={class:"primary"},E={class:"grid"},M={class:"row",style:{"justify-content":"space-between"}},R={class:"diff"},S={class:"muted"},G={class:"muted"},H={class:"muted"},J={class:"muted",style:{"margin-top":"6px"}},K={class:"primary",style:{width:"100%"}},O={class:"primary",style:{width:"100%"}},Q={key:1,class:"muted",style:{"margin-top":"auto","font-size":"12px"}},U={__name:"Personas",setup(W){const c=z().params.gid,p=k([]),A=k(!0);async function B(){try{p.value=(await I.listPersonas(c)).personas}finally{A.value=!1}}function C(i){return p.value.filter(l=>l.tier===i)}function P(i){return o.t(i==="A"?"tierA":i==="B"?"tierB":"tierC")}function g(i){return i==="won"?o.t("won"):i==="lost"?o.t("lost"):o.t("notTried")}return N(B),(i,l)=>{const d=L("router-link");return n(),r("div",null,[v(d,{to:"/training",class:"btn-back"},{default:u(()=>[x("← "+s(a(o).t("training")),1)]),_:1}),t("div",T,[t("h2",j,s(a(o).t("personas")),1),t("span",F,s(a(o).t("selectPersona")),1)]),a(b).isAdmin?(n(),r("div",q,[v(d,{to:`/admin/groups/${a(c)}/edit`},{default:u(()=>[t("button",D,"🛠 "+s(a(o).t("managePersonas")),1)]),_:1},8,["to"]),l[0]||(l[0]=t("span",{class:"muted"},"Admin: full persona data + edit available here.",-1))])):V("",!0),(n(),r(_,null,y(["A","B","C"],m=>t("div",{key:m,style:{margin:"20px 0"}},[t("h4",null,s(P(m)),1),t("div",E,[(n(!0),r(_,null,y(C(m),e=>(n(),r("div",{key:e.id,class:"card pcard lift"},[t("div",M,[t("strong",null,s(e.name),1),t("span",{class:f(["badge",e.my_outcome])},s(g(e.my_outcome)),3)]),t("div",R,[(n(),r(_,null,y(5,h=>t("span",{key:h,class:f(["star",{on:h<=(e.difficulty||1)}])},"★",2)),64)),t("span",S,s(a(o).t("difficulty"))+" "+s(e.difficulty||1)+"/5",1)]),t("div",G,[x(s(e.profession)+" · "+s(e.age_group)+" · "+s(e.location),1),l[1]||(l[1]=t("br",null,null,-1)),t("span",{class:f(["badge",e.channel])},s(e.channel),3),t("span",H," · "+s(e.initiation_mode==="seller"?a(o).t("sellerInitiated"):a(o).t("customerInitiated")),1)]),t("div",J,s(e.product_context),1),a(b).isAdmin?(n(),w(d,{key:0,to:`/groups/${a(c)}/chat/${e.id}`,style:{"margin-top":"auto"}},{default:u(()=>[t("button",K,s(a(o).t("chat")),1)]),_:1},8,["to"])):(n(),r(_,{key:1},[e.my_outcome==="not_tried"?(n(),w(d,{key:0,to:`/groups/${a(c)}/chat/${e.id}`,style:{"margin-top":"auto"}},{default:u(()=>[t("button",O,s(a(o).t("chat")),1)]),_:1},8,["to"])):(n(),r("div",Q,"✓ "+s(a(o).t("trained"))+" ("+s(g(e.my_outcome))+")",1))],64))]))),128))])])),64))])}}},Z=$(U,[["__scopeId","data-v-f8bfbe2d"]]);export{Z as default};

frontend/dist/assets/Personas-Be_DU4st.css

@@ -0,0 +1 @@
+.grid[data-v-0fa25205]{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.pcard[data-v-0fa25205]{display:flex;flex-direction:column;min-height:190px}.diff[data-v-0fa25205]{margin:8px 0}.star[data-v-0fa25205]{color:#d8dbe3}.star.on[data-v-0fa25205]{color:#f59e0b}.badge.won[data-v-0fa25205]{background:#dcfce7;color:#166534}.badge.lost[data-v-0fa25205]{background:#fee2e2;color:#991b1b}.badge.not_tried[data-v-0fa25205]{background:#eef2ff;color:#4338ca}.guide[data-v-0fa25205]{background:#eef2ff;border-color:#c7d2fe;margin:12px 0 16px}

frontend/dist/assets/Personas-C5Hggrz_.js

@@ -0,0 +1 @@
+import{_ as N,k as V,c as i,l as k,m as u,a as t,t as s,u as a,i as n,f as y,e as b,F as _,p as f,h as z,q as I,s as L,r as x,o,j as w,z as p,A}from"./index-B2m5OgR7.js";const T={class:"row",style:{"align-items":"center"}},j={style:{margin:"0"}},F={class:"muted",style:{"margin-left":"auto"}},q={key:0,class:"card guide"},D={key:1,class:"row",style:{margin:"12px 0",gap:"10px"}},E={class:"primary"},M={class:"grid"},R={class:"row",style:{"justify-content":"space-between"}},S={class:"diff"},G={class:"muted"},H={class:"muted"},J={class:"muted"},K={class:"muted",style:{"margin-top":"6px"}},O={class:"primary",style:{width:"100%"}},Q={class:"primary",style:{width:"100%"}},U={key:1,class:"muted",style:{"margin-top":"auto","font-size":"12px"}},W={__name:"Personas",setup(X){const d=z().params.gid,g=x([]),B=x(!0);async function C(){try{g.value=(await I.listPersonas(d)).personas}finally{B.value=!1}}function P(l){return g.value.filter(r=>r.tier===l)}function $(l){return n.t(l==="A"?"tierA":l==="B"?"tierB":"tierC")}function h(l){return l==="won"?n.t("won"):l==="lost"?n.t("lost"):n.t("notTried")}return V(C),(l,r)=>{const c=L("router-link");return o(),i("div",null,[k(c,{to:"/training",class:"btn-back"},{default:u(()=>[w("← "+s(a(n).t("training")),1)]),_:1}),t("div",T,[t("h2",j,s(a(n).t("personas")),1),t("span",F,s(a(n).t("selectPersona")),1)]),a(y).isAdmin?b("",!0):(o(),i("div",q,[...r[0]||(r[0]=[t("strong",null,"🎯 วิธีฝึก",-1),t("ol",{style:{margin:"8px 0 0","padding-left":"20px","line-height":"1.8"}},[t("li",null,"เลือกลูกค้าจำลอง (บุคคลต้นแบบ) คนหนึ่งที่อยากฝึกด้วย"),t("li",null,"ระดับ A ง่ายสุด → ระดับ C ยากสุด (ดูจากดาว ★ ความยาก)"),t("li",null,"กดปุ่มสำหรับฝึกแชทกับลูกค้าคนนั้น (ฝึกได้คนละครั้งเท่านั้น)")],-1)])])),a(y).isAdmin?(o(),i("div",D,[k(c,{to:`/admin/groups/${a(d)}/edit`},{default:u(()=>[t("button",E,"🛠 "+s(a(n).t("managePersonas")),1)]),_:1},8,["to"]),r[1]||(r[1]=t("span",{class:"muted"},"Admin: full persona data + edit available here.",-1))])):b("",!0),(o(),i(_,null,f(["A","B","C"],m=>t("div",{key:m,style:{margin:"20px 0"}},[t("h4",null,s($(m)),1),t("div",M,[(o(!0),i(_,null,f(P(m),e=>(o(),i("div",{key:e.id,class:"card pcard lift"},[t("div",R,[t("strong",null,s(e.name),1),t("span",{class:p(["badge",e.my_outcome])},s(h(e.my_outcome)),3)]),t("div",S,[(o(),i(_,null,f(5,v=>t("span",{key:v,class:p(["star",{on:v<=(e.difficulty||1)}])},"★",2)),64)),t("span",G,s(a(n).t("difficulty"))+" "+s(e.difficulty||1)+"/5",1)]),t("div",H,[w(s(e.profession)+" · "+s(e.age_group)+" · "+s(e.location),1),r[2]||(r[2]=t("br",null,null,-1)),t("span",{class:p(["badge",e.channel])},s(e.channel),3),t("span",J," · "+s(e.initiation_mode==="seller"?a(n).t("sellerInitiated"):a(n).t("customerInitiated")),1)]),t("div",K,s(e.product_context),1),a(y).isAdmin?(o(),A(c,{key:0,to:`/groups/${a(d)}/chat/${e.id}`,style:{"margin-top":"auto"}},{default:u(()=>[t("button",O,s(a(n).t("chat")),1)]),_:1},8,["to"])):(o(),i(_,{key:1},[e.my_outcome==="not_tried"?(o(),A(c,{key:0,to:`/groups/${a(d)}/chat/${e.id}`,style:{"margin-top":"auto"}},{default:u(()=>[t("button",Q,s(a(n).t("chat")),1)]),_:1},8,["to"])):(o(),i("div",U,"✓ "+s(a(n).t("trained"))+" ("+s(h(e.my_outcome))+")",1))],64))]))),128))])])),64))])}}},tt=N(W,[["__scopeId","data-v-0fa25205"]]);export{tt as default};

frontend/dist/assets/Personas-CuqA1oqu.css

@@ -1 +0,0 @@
-.grid[data-v-f8bfbe2d]{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.pcard[data-v-f8bfbe2d]{display:flex;flex-direction:column;min-height:190px}.diff[data-v-f8bfbe2d]{margin:8px 0}.star[data-v-f8bfbe2d]{color:#d8dbe3}.star.on[data-v-f8bfbe2d]{color:#f59e0b}.badge.won[data-v-f8bfbe2d]{background:#dcfce7;color:#166534}.badge.lost[data-v-f8bfbe2d]{background:#fee2e2;color:#991b1b}.badge.not_tried[data-v-f8bfbe2d]{background:#eef2ff;color:#4338ca}

frontend/dist/assets/Settings-B4k75Ydt.js

@@ -1 +1 @@
-import{_ as j,r as v,f as u,c as y,a as e,t as o,u as l,i as s,j as x,w as h,v as b,e as k,z as B,q as S,o as f}from"./index-gmrXNPrQ.js";const z={class:"card"},D={style:{"margin-top":"0"}},E={class:"muted"},M=["value"],$={class:"row",style:{gap:"10px","margin-top":"16px"}},q=["disabled"],I={key:0,class:"spinner"},L={class:"card",style:{"margin-top":"16px"}},O={style:{"margin-top":"0"}},A={class:"row",style:{gap:"10px","margin-top":"16px"}},F=["disabled"],G={key:0,class:"spinner"},H={class:"card",style:{"margin-top":"16px"}},J={style:{"margin-top":"0"}},K={class:"row"},Q={key:0,class:"error",role:"alert"},R={key:1,class:"ok",role:"status"},W={__name:"Settings",setup(X){var V,C;const m=v(((V=u.user)==null?void 0:V.name)||""),c=v(((C=u.user)==null?void 0:C.email)||""),i=v(""),_=v(""),r=v(""),p=v(""),w=v(!1),g=v(!1);async function U(){var d,a;r.value="",p.value="",w.value=!0;try{const n={};if(m.value&&m.value!==((d=u.user)==null?void 0:d.name)&&(n.name=m.value),c.value&&c.value!==((a=u.user)==null?void 0:a.email)&&(n.email=c.value),Object.keys(n).length){const t=await S.updateProfile(n);u.user=t.user,p.value=s.t("saved")}}catch(n){r.value=n.message}finally{w.value=!1}}async function N(){var d,a,n;if(r.value="",p.value="",i.value.length<4){r.value=s.t("passwordTooShort");return}if(i.value!==_.value){r.value=s.t("passwordMismatch");return}g.value=!0;try{const t=((d=u.user)==null?void 0:d.username)||((a=u.user)==null?void 0:a.id)||"",T=await S.setup({username:t,email:c.value||((n=u.user)==null?void 0:n.email),password:i.value});u.user=T.user,i.value="",_.value="",p.value=s.t("saved")}catch(t){r.value=t.message}finally{g.value=!1}}function P(d){s.set(d)}return(d,a)=>{var n;return f(),y("div",null,[e("h2",null,"⚙️ "+o(l(s).t("settings")),1),e("div",z,[e("h3",D,"👤 "+o(l(s).t("profile")),1),e("label",null,[x(o(l(s).t("username"))+" ",1),e("span",E,"("+o(l(s).t("readonly"))+")",1)]),e("input",{value:((n=l(u).user)==null?void 0:n.username)||"",disabled:""},null,8,M),e("label",null,o(l(s).t("name")),1),h(e("input",{"onUpdate:modelValue":a[0]||(a[0]=t=>m.value=t),type:"text"},null,512),[[b,m.value]]),e("label",null,o(l(s).t("email")),1),h(e("input",{"onUpdate:modelValue":a[1]||(a[1]=t=>c.value=t),type:"email"},null,512),[[b,c.value]]),e("div",$,[e("button",{class:"primary",disabled:w.value,onClick:U},[w.value?(f(),y("span",I)):k("",!0),x(o(l(s).t("saveProfile")),1)],8,q)])]),e("div",L,[e("h3",O,"🔒 "+o(l(s).t("changePassword")),1),e("label",null,o(l(s).t("newPassword")),1),h(e("input",{"onUpdate:modelValue":a[2]||(a[2]=t=>i.value=t),type:"password",autocomplete:"new-password"},null,512),[[b,i.value]]),e("label",null,o(l(s).t("confirmPassword")),1),h(e("input",{"onUpdate:modelValue":a[3]||(a[3]=t=>_.value=t),type:"password",autocomplete:"new-password"},null,512),[[b,_.value]]),e("div",A,[e("button",{class:"primary",disabled:g.value||!i.value||i.value!==_.value,onClick:N},[g.value?(f(),y("span",G)):k("",!0),x(o(l(s).t("save")),1)],8,F)])]),e("div",H,[e("h3",J,"🌐 "+o(l(s).t("language")),1),e("div",K,[e("button",{class:B({active:l(s).locale==="th"}),onClick:a[4]||(a[4]=t=>P("th"))},"ไทย",2),e("button",{class:B({active:l(s).locale==="en"}),onClick:a[5]||(a[5]=t=>P("en"))},"English",2)])]),r.value?(f(),y("div",Q,o(r.value),1)):k("",!0),p.value?(f(),y("div",R,"✅ "+o(p.value),1)):k("",!0)])}}},Z=j(W,[["__scopeId","data-v-2dca72e5"]]);export{Z as default};
+import{_ as j,r as v,f as u,c as y,a as e,t as o,u as l,i as s,j as x,w as h,v as b,e as k,z as B,q as S,o as f}from"./index-B2m5OgR7.js";const z={class:"card"},D={style:{"margin-top":"0"}},E={class:"muted"},M=["value"],$={class:"row",style:{gap:"10px","margin-top":"16px"}},q=["disabled"],I={key:0,class:"spinner"},L={class:"card",style:{"margin-top":"16px"}},O={style:{"margin-top":"0"}},A={class:"row",style:{gap:"10px","margin-top":"16px"}},F=["disabled"],G={key:0,class:"spinner"},H={class:"card",style:{"margin-top":"16px"}},J={style:{"margin-top":"0"}},K={class:"row"},Q={key:0,class:"error",role:"alert"},R={key:1,class:"ok",role:"status"},W={__name:"Settings",setup(X){var V,C;const m=v(((V=u.user)==null?void 0:V.name)||""),c=v(((C=u.user)==null?void 0:C.email)||""),i=v(""),_=v(""),r=v(""),p=v(""),w=v(!1),g=v(!1);async function U(){var d,a;r.value="",p.value="",w.value=!0;try{const n={};if(m.value&&m.value!==((d=u.user)==null?void 0:d.name)&&(n.name=m.value),c.value&&c.value!==((a=u.user)==null?void 0:a.email)&&(n.email=c.value),Object.keys(n).length){const t=await S.updateProfile(n);u.user=t.user,p.value=s.t("saved")}}catch(n){r.value=n.message}finally{w.value=!1}}async function N(){var d,a,n;if(r.value="",p.value="",i.value.length<4){r.value=s.t("passwordTooShort");return}if(i.value!==_.value){r.value=s.t("passwordMismatch");return}g.value=!0;try{const t=((d=u.user)==null?void 0:d.username)||((a=u.user)==null?void 0:a.id)||"",T=await S.setup({username:t,email:c.value||((n=u.user)==null?void 0:n.email),password:i.value});u.user=T.user,i.value="",_.value="",p.value=s.t("saved")}catch(t){r.value=t.message}finally{g.value=!1}}function P(d){s.set(d)}return(d,a)=>{var n;return f(),y("div",null,[e("h2",null,"⚙️ "+o(l(s).t("settings")),1),e("div",z,[e("h3",D,"👤 "+o(l(s).t("profile")),1),e("label",null,[x(o(l(s).t("username"))+" ",1),e("span",E,"("+o(l(s).t("readonly"))+")",1)]),e("input",{value:((n=l(u).user)==null?void 0:n.username)||"",disabled:""},null,8,M),e("label",null,o(l(s).t("name")),1),h(e("input",{"onUpdate:modelValue":a[0]||(a[0]=t=>m.value=t),type:"text"},null,512),[[b,m.value]]),e("label",null,o(l(s).t("email")),1),h(e("input",{"onUpdate:modelValue":a[1]||(a[1]=t=>c.value=t),type:"email"},null,512),[[b,c.value]]),e("div",$,[e("button",{class:"primary",disabled:w.value,onClick:U},[w.value?(f(),y("span",I)):k("",!0),x(o(l(s).t("saveProfile")),1)],8,q)])]),e("div",L,[e("h3",O,"🔒 "+o(l(s).t("changePassword")),1),e("label",null,o(l(s).t("newPassword")),1),h(e("input",{"onUpdate:modelValue":a[2]||(a[2]=t=>i.value=t),type:"password",autocomplete:"new-password"},null,512),[[b,i.value]]),e("label",null,o(l(s).t("confirmPassword")),1),h(e("input",{"onUpdate:modelValue":a[3]||(a[3]=t=>_.value=t),type:"password",autocomplete:"new-password"},null,512),[[b,_.value]]),e("div",A,[e("button",{class:"primary",disabled:g.value||!i.value||i.value!==_.value,onClick:N},[g.value?(f(),y("span",G)):k("",!0),x(o(l(s).t("save")),1)],8,F)])]),e("div",H,[e("h3",J,"🌐 "+o(l(s).t("language")),1),e("div",K,[e("button",{class:B({active:l(s).locale==="th"}),onClick:a[4]||(a[4]=t=>P("th"))},"ไทย",2),e("button",{class:B({active:l(s).locale==="en"}),onClick:a[5]||(a[5]=t=>P("en"))},"English",2)])]),r.value?(f(),y("div",Q,o(r.value),1)):k("",!0),p.value?(f(),y("div",R,"✅ "+o(p.value),1)):k("",!0)])}}},Z=j(W,[["__scopeId","data-v-2dca72e5"]]);export{Z as default};

frontend/dist/assets/Setup-CvsspD_8.js

@@ -1 +1 @@
-import{_ as x,c as v,a as e,t,u as s,i as a,j as S,f as _,w,v as f,b as y,e as V,r,g as K,o as m}from"./index-gmrXNPrQ.js";const T={class:"setup-wrap"},B={class:"card setup-card"},N={class:"muted"},U={key:0,class:"error",role:"alert"},C=["disabled"],D={key:0,class:"spinner"},M={key:1},P={__name:"Setup",setup(j){const k=K(),i=r(""),l=r(""),p=r(""),o=r(""),d=r(!1);async function c(){if(o.value="",l.value.length<4){o.value=a.t("passwordTooShort");return}if(l.value!==p.value){o.value=a.t("passwordMismatch");return}d.value=!0;try{await _.finishSetup(i.value.trim(),l.value),k.push("/")}catch(h){o.value=h.message}finally{d.value=!1}}return(h,u)=>{var b,g;return m(),v("div",T,[e("div",B,[e("h1",null,"🔐 "+t(s(a).t("setupTitle")),1),e("p",N,[S(t(s(a).t("setupSubtitle"))+" ",1),e("strong",null,t(((b=s(_).user)==null?void 0:b.name)||((g=s(_).user)==null?void 0:g.username)),1)]),e("label",null,t(s(a).t("email")),1),w(e("input",{"onUpdate:modelValue":u[0]||(u[0]=n=>i.value=n),type:"email",autocomplete:"email",onKeyup:y(c,["enter"])},null,544),[[f,i.value]]),e("label",null,t(s(a).t("newPassword")),1),w(e("input",{"onUpdate:modelValue":u[1]||(u[1]=n=>l.value=n),type:"password",autocomplete:"new-password",onKeyup:y(c,["enter"])},null,544),[[f,l.value]]),e("label",null,t(s(a).t("confirmPassword")),1),w(e("input",{"onUpdate:modelValue":u[2]||(u[2]=n=>p.value=n),type:"password",autocomplete:"new-password",onKeyup:y(c,["enter"])},null,544),[[f,p.value]]),o.value?(m(),v("div",U,t(o.value),1)):V("",!0),e("button",{class:"primary",style:{width:"100%","margin-top":"16px"},disabled:d.value||!i.value||!l.value||l.value!==p.value,onClick:c},[d.value?(m(),v("span",D)):(m(),v("span",M,t(s(a).t("save")),1))],8,C)])])}}},I=x(P,[["__scopeId","data-v-f190e120"]]);export{I as default};
+import{_ as x,c as v,a as e,t,u as s,i as a,j as S,f as _,w,v as f,b as y,e as V,r,g as K,o as m}from"./index-B2m5OgR7.js";const T={class:"setup-wrap"},B={class:"card setup-card"},N={class:"muted"},U={key:0,class:"error",role:"alert"},C=["disabled"],D={key:0,class:"spinner"},M={key:1},P={__name:"Setup",setup(j){const k=K(),i=r(""),l=r(""),p=r(""),o=r(""),d=r(!1);async function c(){if(o.value="",l.value.length<4){o.value=a.t("passwordTooShort");return}if(l.value!==p.value){o.value=a.t("passwordMismatch");return}d.value=!0;try{await _.finishSetup(i.value.trim(),l.value),k.push("/")}catch(h){o.value=h.message}finally{d.value=!1}}return(h,u)=>{var b,g;return m(),v("div",T,[e("div",B,[e("h1",null,"🔐 "+t(s(a).t("setupTitle")),1),e("p",N,[S(t(s(a).t("setupSubtitle"))+" ",1),e("strong",null,t(((b=s(_).user)==null?void 0:b.name)||((g=s(_).user)==null?void 0:g.username)),1)]),e("label",null,t(s(a).t("email")),1),w(e("input",{"onUpdate:modelValue":u[0]||(u[0]=n=>i.value=n),type:"email",autocomplete:"email",onKeyup:y(c,["enter"])},null,544),[[f,i.value]]),e("label",null,t(s(a).t("newPassword")),1),w(e("input",{"onUpdate:modelValue":u[1]||(u[1]=n=>l.value=n),type:"password",autocomplete:"new-password",onKeyup:y(c,["enter"])},null,544),[[f,l.value]]),e("label",null,t(s(a).t("confirmPassword")),1),w(e("input",{"onUpdate:modelValue":u[2]||(u[2]=n=>p.value=n),type:"password",autocomplete:"new-password",onKeyup:y(c,["enter"])},null,544),[[f,p.value]]),o.value?(m(),v("div",U,t(o.value),1)):V("",!0),e("button",{class:"primary",style:{width:"100%","margin-top":"16px"},disabled:d.value||!i.value||!l.value||l.value!==p.value,onClick:c},[d.value?(m(),v("span",D)):(m(),v("span",M,t(s(a).t("save")),1))],8,C)])])}}},I=x(P,[["__scopeId","data-v-f190e120"]]);export{I as default};

frontend/dist/assets/Training-BxzfTOYv.js

@@ -1 +1 @@
-import{_ as k,k as x,q as w,f as d,c as r,a as t,t as e,u as s,i as o,A as _,m,e as y,F as b,p as A,r as h,s as C,o as i,z as f}from"./index-gmrXNPrQ.js";const B={class:"row",style:{"align-items":"center","margin-bottom":"16px"}},N={style:{margin:"0"}},P={style:{"margin-left":"auto"}},z={class:"primary"},T={class:"muted"},F={key:0,class:"card",style:{"min-height":"80px"}},L={key:1,class:"card empty-state"},S={key:0},V={key:1},$={class:"grid"},j={class:"card lift train-card"},q={class:"row",style:{"justify-content":"space-between"}},D={class:"muted",style:{margin:"6px 0 12px"}},E={class:"row",style:{gap:"8px"}},G={class:"muted"},I={class:"primary",style:{width:"100%","margin-top":"12px"}},M={__name:"Training",setup(H){const c=h([]),u=h(!0);function v(a){return a.sales_kit&&a.sales_kit.productName||a.input&&a.input.product||""}function g(a){return a.personas||a.persona_count||0}return x(async()=>{try{const a=(await w.listGroups()).groups||[];c.value=d.isAdmin?a:a.filter(l=>l.status==="ready")}finally{u.value=!1}}),(a,l)=>{const p=C("router-link");return i(),r("div",null,[t("div",B,[t("h2",N,"🎯 "+e(s(o).t("training")),1),t("div",P,[s(d).isAdmin?(i(),_(p,{key:0,to:"/admin/new-group"},{default:m(()=>[t("button",z,"＋ "+e(s(o).t("addProduct")),1)]),_:1})):y("",!0)])]),t("p",T,e(s(o).t("trainingSubtitle")),1),u.value?(i(),r("div",F,[...l[0]||(l[0]=[t("div",{class:"skeleton",style:{height:"50px"}},null,-1)])])):c.value.length===0?(i(),r("div",L,[t("strong",null,e(s(o).t("noTraining")),1),s(d).isAdmin?(i(),r("span",S,'Click "'+e(s(o).t("addProduct"))+'" to create a persona group.',1)):(i(),r("span",V,"Ask an admin to create a persona group first."))])):y("",!0),t("div",$,[(i(!0),r(b,null,A(c.value,n=>(i(),_(p,{key:n.id,to:s(d).isAdmin?`/admin/groups/${n.id}/edit`:`/groups/${n.id}/personas`,style:{"text-decoration":"none"}},{default:m(()=>[t("div",j,[t("div",q,[t("strong",null,e(n.title),1),t("span",{class:f(["badge",n.status==="ready"?"ready":"draft"])},e(n.status),3)]),t("div",D,e(v(n)),1),t("div",E,[t("span",{class:f(["badge",n.channel||"line"])},e(n.channel||"line"),3),t("span",G,e(g(n))+" "+e(s(o).t("personas").toLowerCase()),1)]),t("button",I,e(s(d).isAdmin?n.status==="ready"?s(o).t("managePersonas"):s(o).t("analyze"):s(o).t("selectPersona")),1)])]),_:2},1032,["to"]))),128))])])}}},K=k(M,[["__scopeId","data-v-901c9d3d"]]);export{K as default};
+import{_ as k,k as x,q as w,f as d,c as r,a as t,t as e,u as s,i as o,A as _,m,e as y,F as b,p as A,r as h,s as C,o as i,z as f}from"./index-B2m5OgR7.js";const B={class:"row",style:{"align-items":"center","margin-bottom":"16px"}},N={style:{margin:"0"}},P={style:{"margin-left":"auto"}},z={class:"primary"},T={class:"muted"},F={key:0,class:"card",style:{"min-height":"80px"}},L={key:1,class:"card empty-state"},S={key:0},V={key:1},$={class:"grid"},j={class:"card lift train-card"},q={class:"row",style:{"justify-content":"space-between"}},D={class:"muted",style:{margin:"6px 0 12px"}},E={class:"row",style:{gap:"8px"}},G={class:"muted"},I={class:"primary",style:{width:"100%","margin-top":"12px"}},M={__name:"Training",setup(H){const c=h([]),u=h(!0);function v(a){return a.sales_kit&&a.sales_kit.productName||a.input&&a.input.product||""}function g(a){return a.personas||a.persona_count||0}return x(async()=>{try{const a=(await w.listGroups()).groups||[];c.value=d.isAdmin?a:a.filter(l=>l.status==="ready")}finally{u.value=!1}}),(a,l)=>{const p=C("router-link");return i(),r("div",null,[t("div",B,[t("h2",N,"🎯 "+e(s(o).t("training")),1),t("div",P,[s(d).isAdmin?(i(),_(p,{key:0,to:"/admin/new-group"},{default:m(()=>[t("button",z,"＋ "+e(s(o).t("addProduct")),1)]),_:1})):y("",!0)])]),t("p",T,e(s(o).t("trainingSubtitle")),1),u.value?(i(),r("div",F,[...l[0]||(l[0]=[t("div",{class:"skeleton",style:{height:"50px"}},null,-1)])])):c.value.length===0?(i(),r("div",L,[t("strong",null,e(s(o).t("noTraining")),1),s(d).isAdmin?(i(),r("span",S,'Click "'+e(s(o).t("addProduct"))+'" to create a persona group.',1)):(i(),r("span",V,"Ask an admin to create a persona group first."))])):y("",!0),t("div",$,[(i(!0),r(b,null,A(c.value,n=>(i(),_(p,{key:n.id,to:s(d).isAdmin?`/admin/groups/${n.id}/edit`:`/groups/${n.id}/personas`,style:{"text-decoration":"none"}},{default:m(()=>[t("div",j,[t("div",q,[t("strong",null,e(n.title),1),t("span",{class:f(["badge",n.status==="ready"?"ready":"draft"])},e(n.status),3)]),t("div",D,e(v(n)),1),t("div",E,[t("span",{class:f(["badge",n.channel||"line"])},e(n.channel||"line"),3),t("span",G,e(g(n))+" "+e(s(o).t("personas").toLowerCase()),1)]),t("button",I,e(s(d).isAdmin?n.status==="ready"?s(o).t("managePersonas"):s(o).t("analyze"):s(o).t("selectPersona")),1)])]),_:2},1032,["to"]))),128))])])}}},K=k(M,[["__scopeId","data-v-901c9d3d"]]);export{K as default};

frontend/dist/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sales Trainer</title>
-    <script type="module" crossorigin src="/assets/index-gmrXNPrQ.js"></script>
+    <script type="module" crossorigin src="/assets/index-B2m5OgR7.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-HCrojZU7.css">
   </head>
   <body>

frontend/src/components/PersonaForm.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="persona-form">
+    <h3>{{ persona.name || 'New persona' }}</h3>
+    <p class="muted">{{ persona.profession }} · {{ persona.personality }}</p>
+
+    <!-- Section: ข้อมูลพื้นฐาน -->
+    <div class="sec">
+      <h4>👤 ข้อมูลพื้นฐาน</h4>
+      <div class="row">
+        <div class="f"><label>ชื่อ</label><input v-model="d.name" /></div>
+        <div class="f"><label>ระดับความยาก (1-5)</label><input v-model.number="d.difficulty" type="number" min="1" max="5" /></div>
+        <div class="f"><label>ระดับลูกค้า</label>
+          <select v-model="d.tier"><option value="A">A — พร้อมตัดสินใจซื้อ</option><option value="B">B — ยังไม่แน่ใจ</option><option value="C">C — ไม่สนใจแต่มีปัญหา</option></select>
+        </div>
+      </div>
+      <div class="row">
+        <div class="f"><label>อาชีพ</label><input v-model="d.profession" /></div>
+        <div class="f"><label>ช่วงอายุ</label><input v-model="d.age_group" /></div>
+        <div class="f"><label>พื้นที่</label><input v-model="d.location" /></div>
+      </div>
+    </div>
+
+    <!-- Section: ข้อมูลลูกค้า (การขาย) -->
+    <div class="sec">
+      <h4>💼 ข้อมูลลูกค้า</h4>
+      <div class="row">
+        <div class="f"><label>รายได้/สถานะการเงิน</label><input v-model="d.income" /></div>
+        <div class="f"><label>งบประมาณ</label><input v-model="d.budget" /></div>
+        <div class="f"><label>ไลฟ์สไตล์</label><input v-model="d.lifestyle" /></div>
+      </div>
+      <label>ภูมิหลัง</label>
+      <textarea v-model="d.background"></textarea>
+      <label>บุคลิก / วิธีพูดคุย</label>
+      <textarea v-model="d.personality"></textarea>
+      <label>สไตล์การสื่อสาร</label>
+      <textarea v-model="d.communication_style"></textarea>
+    </div>
+
+    <!-- Section: การขาย -->
+    <div class="sec">
+      <h4>🎯 การขาย</h4>
+      <label>เป้าหมาย</label><textarea v-model="d.goal"></textarea>
+      <label>กรอบเวลาในการตัดสินใจ</label><input v-model="d.decision_timeline" />
+      <label>Pain (ปัญหา) แบบ 1 ต่อบรรทัด</label>
+      <textarea v-model="painsText" placeholder="เช่น ต้นทุนสูงเกินไป&#10;ระบบล้าสมัย"></textarea>
+      <label>ข้อโต้แย้ง (Objections) 1 ต่อบรรทัด</label>
+      <textarea v-model="objectionsText"></textarea>
+      <label>สิ่งที่ใช้ต่อรอง (เช่น ส่วนลด, ฟรีติดตั้ง)</label>
+      <textarea v-model="negLeversText"></textarea>
+      <label>ช่องทางสำหรับลูกค้าเปิดบทสนทนา (opener)</label>
+      <textarea v-model="d.opener"></textarea>
+    </div>
+
+    <!-- Section: ช่องทาง/โหมด -->
+    <div class="sec">
+      <h4>📡 ช่องทาง & โหมด</h4>
+      <div class="row">
+        <div class="f"><label>ช่องทาง</label>
+          <select v-model="d.channel"><option value="line">LINE</option><option value="facebook">Facebook</option></select>
+        </div>
+        <div class="f"><label>ใครเริ่มคุยก่อน</label>
+          <select v-model="d.initiation_mode"><option value="customer">ลูกค้าทักก่อน</option><option value="seller">เราต้องเริ่มขาย (เชิงรุก)</option></select>
+        </div>
+      </div>
+      <label class="muted" v-if="d.special">พิเศษ: {{ d.special }}</label>
+    </div>
+
+    <div class="row actions">
+      <button class="primary" @click="save" :disabled="busy">{{ busy ? 'กำลังบันทึก…' : '💾 บันทึกบุคคลต้นแบบ' }}</button>
+      <button @click="$emit('cancel')">ปิด</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from 'vue'
+
+const props = defineProps({ persona: { type: Object, required: true } })
+const emit = defineEmits(['save', 'cancel'])
+
+const d = reactive({
+  name: '', difficulty: 1, tier: 'B', profession: '', age_group: '', location: '',
+  income: '', budget: '', lifestyle: '', background: '', personality: '',
+  communication_style: '', goal: '', decision_timeline: '', opener: '', channel: 'line',
+  initiation_mode: 'customer', special: '',
+})
+const painsText = ref('')
+const objectionsText = ref('')
+const negLeversText = ref('')
+const busy = ref(false)
+
+function toLines(a) { return Array.isArray(a) ? a.join('\n') : String(a || '') }
+function fromLines(s) { return s.split('\n').map(x => x.trim()).filter(Boolean) }
+
+watch(() => props.persona, (p) => {
+  Object.assign(d, {
+    name: p?.name || '', difficulty: p?.difficulty ?? 1, tier: p?.tier || 'B',
+    profession: p?.profession || '', age_group: p?.age_group || '', location: p?.location || '',
+    income: p?.income || '', budget: p?.budget || '', lifestyle: p?.lifestyle || '',
+    background: p?.background || '', personality: p?.personality || '',
+    communication_style: p?.communication_style || '', goal: p?.goal || '',
+    decision_timeline: p?.decision_timeline || '', opener: p?.opener || '',
+    channel: p?.channel || 'line', initiation_mode: p?.initiation_mode || 'customer',
+    special: p?.special || '',
+  })
+  painsText.value = toLines(p?.pains)
+  objectionsText.value = toLines(p?.objections)
+  negLeversText.value = toLines(p?.negotiation_levers)
+}, { immediate: true })
+
+function save() {
+  emit('save', {
+    ...d,
+    pains: fromLines(painsText.value),
+    objections: fromLines(objectionsText.value),
+    negotiation_levers: fromLines(negLeversText.value),
+  })
+}
+</script>
+
+<style scoped>
+.sec { margin-top: 20px; }
+.sec h4 { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
+.row { display: flex; gap: 12px; flex-wrap: wrap; }
+.f { flex: 1; min-width: 140px; }
+label { font-size: 13px; color: var(--muted); display: block; margin: 10px 0 4px; }
+input, select, textarea { width: 100%; }
+.actions { margin-top: 20px; }
+</style>

frontend/src/views/GroupBuilder.vue

@@ -1,39 +1,53 @@
 <template>
-  <div class="card">
+  <div>
-    <h2>{{ i18n.t('groupBuilder') }}</h2>
+    <router-link to="/training" class="btn-back">← {{ i18n.t('training') }}</router-link>
-    <label>{{ i18n.t('product') }}</label>
-    <textarea v-model="form.product" rows="3" placeholder="e.g. Cloud POS for small restaurants"></textarea>
 
-    <label>{{ i18n.t('segment') }}</label>
+    <!-- Step guidance -->
-    <input v-model="form.segment" />
+    <div class="card guide">
-
+      <strong>📋 วิธีสร้างกลุ่มบุคคลต้นแบบ</strong>
-    <label>{{ i18n.t('description') }}</label>
+      <ol style="margin:8px 0 0;padding-left:20px;line-height:1.8">
-    <textarea v-model="form.description" rows="3"></textarea>
+        <li>กรอก <strong>ชื่อ/รายละเอียดสินค้าหรือบริการ</strong> ที่อยากให้ทีมฝึกขาย (ช่องด้านล่าง)</li>
-
+        <li>(ไม่บังคับ) ระบุกลุ่มลูกค้าเป้าหมาย หรืออัปโหลดไฟล์เอกสารสินค้า .pdf/.md/.txt</li>
-    <div class="row">
+        <li>กด <strong>สร้าง</strong> — ระบบจะพาไปหน้าสร้างบุคคลต้นแบบ (ลูกค้าจำลอง)</li>
-      <div style="flex:1">
+      </ol>
-        <label>{{ i18n.t('channel') }}</label>
-        <select v-model="form.channel">
-          <option value="facebook">{{ i18n.t('facebook') }}</option>
-          <option value="line">{{ i18n.t('line') }}</option>
-        </select>
-      </div>
-      <div style="flex:1">
-        <label>{{ i18n.t('language') }}</label>
-        <select v-model="form.language">
-          <option value="th">{{ i18n.t('thai') }}</option>
-          <option value="en">{{ i18n.t('english') }}</option>
-        </select>
-      </div>
     </div>
 
-    <label>📎 Files (.pdf/.md/.txt) — {{ i18n.t('product') }} can come from here</label>
+    <div class="card">
-    <input type="file" multiple accept=".pdf,.md,.txt" @change="onFiles" />
+      <h2 style="margin-top:0">📦 {{ i18n.t('addProduct') }}</h2>
+      <label>{{ i18n.t('product') }} <span class="req">*</span></label>
+      <textarea v-model="form.product" rows="3" placeholder="เช่น ระบบ POS สำหรับร้านอาหาร Cloud POS for small restaurants"></textarea>
 
-    <div class="error" v-if="error">{{ error }}</div>
+      <label>{{ i18n.t('segment') }}</label>
-    <button class="primary" style="margin-top:16px" :disabled="busy || (!form.product && !files.length)" @click="create">
+      <input v-model="form.segment" placeholder="เช่น SMEs ร้านอาหารในกรุงเทพ" />
-      {{ busy ? '...' : i18n.t('create') }}
+
-    </button>
+      <label>{{ i18n.t('description') }}</label>
+      <textarea v-model="form.description" rows="3" placeholder="รายละเอียดเพิ่มเติม เช่น จุดเด่นสินค้า ราคา ฯลฯ (ไม่บังคับ)"></textarea>
+
+      <div class="row">
+        <div style="flex:1">
+          <label>{{ i18n.t('channel') }}</label>
+          <select v-model="form.channel">
+            <option value="facebook">{{ i18n.t('facebook') }}</option>
+            <option value="line">{{ i18n.t('line') }}</option>
+          </select>
+        </div>
+        <div style="flex:1">
+          <label>{{ i18n.t('language') }}</label>
+          <select v-model="form.language">
+            <option value="th">{{ i18n.t('thai') }}</option>
+            <option value="en">{{ i18n.t('english') }}</option>
+          </select>
+        </div>
+      </div>
+
+      <label>📎 ไฟล์เอกสารสินค้า (.pdf/.md/.txt) — ใช้เป็นข้อมูลให้ระบบได้</label>
+      <input type="file" multiple accept=".pdf,.md,.txt" @change="onFiles" />
+
+      <div class="error" v-if="error">{{ error }}</div>
+      <button class="primary" style="margin-top:16px" :disabled="busy || (!form.product && !files.length)" @click="create">
+        {{ busy ? 'กำลังสร้าง…' : '➕ สร้างกลุ่มบุคคลต้นแบบ' }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -73,3 +87,8 @@ async function create() {
   }
 }
 </script>
+
+<style scoped>
+.guide { background: #eef2ff; border-color: #c7d2fe; margin-bottom: 16px; }
+.req { color: var(--red); }
+</style>

frontend/src/views/GroupEdit.vue

@@ -1,37 +1,58 @@
 <template>
   <div>
-    <router-link to="/" class="btn-back">← {{ i18n.t('dashboard') }}</router-link>
+    <router-link to="/training" class="btn-back">← {{ i18n.t('training') }}</router-link>
-    <div class="row" style="align-items:center;margin-bottom:16px">
+    <div class="row" style="align-items:center;margin-bottom:8px">
-      <h2 style="margin:0">{{ i18n.t('groupBuilder') }} — {{ group && group.title }}</h2>
+      <h2 style="margin:0">🛠 {{ i18n.t('managePersonas') }}</h2>
-      <button class="primary" style="margin-left:auto" @click="analyze" :disabled="busy">
+      <div class="row" style="margin-left:auto;gap:10px">
-        <span v-if="busy" class="spinner" style="margin-right:4px"></span>{{ i18n.t('analyze') }}
+        <button @click="analyze" :disabled="busy" class="primary">
-      </button>
+          <span v-if="busy" class="spinner"></span>{{ busy ? 'กำลังสร้าง…' : '✨ สร้าง/วิเคราะห์บุคคลต้นแบบ' }}
+        </button>
+      </div>
+    </div>
+    <p class="muted" v-if="group">สินค้า: <strong>{{ group.title }}</strong></p>
+
+    <div class="error" v-if="error" style="margin:12px 0">{{ error }}</div>
+
+    <!-- Step guidance -->
+    <div class="card guide">
+      <strong>วิธีใช้หน้านี้</strong>
+      <ol style="margin:8px 0 0;padding-left:20px;line-height:1.8">
+        <li>กดปุ่ม <strong>✨ สร้าง/วิเคราะห์บุคคลต้นแบบ</strong> เพื่อให้ระบบสร้างลูกค้าจำลอง 15 คน (ระดับ A/B/C)</li>
+        <li>แต่ละการ์ดคือลูกค้าจำลอง 1 คน — กด <strong>✏️ แก้ไข</strong> เพื่อปรับรายละเอียดให้ตรงใจ</li>
+        <li>เมื่อพร้อมให้ผู้ใช้ฝึก กด <strong>เปิดใช้งาน</strong> (ยังทำในขั้นถัดไป)</li>
+      </ol>
     </div>
-    <div class="error" v-if="error">{{ error }}</div>
 
     <div v-if="personas.length === 0 && !busy" class="card empty-state">
-      <strong>No personas yet</strong>
+      <strong>ยังไม่มีบุคคลต้นแบบ</strong>
-      <span>Click {{ i18n.t('analyze') }} to generate the 15 personas (5 per tier).</span>
+      <span>กด "✨ สร้าง/วิเคราะห์บุคคลต้นแบบ" เพื่อให้ระบบสร้างลูกค้าจำลองให้</span>
     </div>
 
+    <!-- Persona list -->
     <div v-for="tier in ['A','B','C']" :key="tier" style="margin-bottom:20px">
       <h4>{{ tierLabel(tier) }}</h4>
       <div class="grid">
         <div v-for="p in byTier(tier)" :key="p.id" class="card pcard">
-          <div class="row">
+          <div class="row" style="justify-content:space-between;align-items:center">
             <strong>{{ p.name }}</strong>
-            <span class="badge" v-if="p.special === 'wrong_text'">⚠️ wrong_text</span>
+            <span class="badge" :class="tierClass(p.tier)">{{ p.tier }}</span>
           </div>
-          <div class="muted">{{ p.profession }} · {{ p.age_group }} · {{ p.channel }} · {{ p.initiation_mode }}</div>
+          <div class="diff">
-          <div class="muted" style="margin-top:4px">diff {{ p.difficulty }} · {{ p.income }} · {{ p.personality }}</div>
+            <span v-for="n in 5" :key="n" class="star" :class="{ on: n <= (p.difficulty || 1) }">★</span>
-          <details style="margin-top:8px" open>
+          </div>
-            <summary>{{ i18n.t('reveal') }}</summary>
+          <div class="muted">{{ p.profession }} · {{ p.age_group }} · {{ p.location }}</div>
-            <pre class="json">{{ JSON.stringify(p, null, 2) }}</pre>
+          <div class="muted">{{ p.channel }} · {{ p.initiation_mode === 'seller' ? 'เริ่มขายเอง' : 'ลูกค้าทักก่อน' }}</div>
-          </details>
+          <button class="edit-btn" @click="openEdit(p)">✏️ แก้ไขรายละเอียด</button>
-          <button @click="editPersona(p)">✏️ Edit</button>
         </div>
       </div>
     </div>
+
+    <!-- Edit modal -->
+    <div v-if="editing" class="modal-backdrop" @click.self="editing=null">
+      <div class="modal">
+        <PersonaForm :persona="editing" @save="savePersona" @cancel="editing=null" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -40,6 +61,7 @@ import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { api } from '../api'
 import { i18n } from '../i18n'
+import PersonaForm from '../components/PersonaForm.vue'
 
 const route = useRoute()
 const gid = route.params.gid
@@ -47,6 +69,7 @@ const group = ref(null)
 const personas = ref([])
 const busy = ref(false)
 const error = ref('')
+const editing = ref(null)
 
 async function load() {
   const data = await api.getGroup(gid)
@@ -55,9 +78,9 @@ async function load() {
 }
 function byTier(t) { return personas.value.filter((p) => p.tier === t) }
 function tierLabel(t) { return i18n.t(t === 'A' ? 'tierA' : t === 'B' ? 'tierB' : 'tierC') }
+function tierClass(t) { return { A: 'tier-a', B: 'tier-b', C: 'tier-c' }[t] || '' }
 async function analyze() {
-  busy.value = true
+  busy.value = true; error.value = ''
-  error.value = ''
   try {
     const data = await api.analyzeGroup(gid)
     personas.value = data.personas
@@ -65,23 +88,29 @@ async function analyze() {
   } catch (e) { error.value = e.message }
   finally { busy.value = false }
 }
-function editPersona(p) {
+function openEdit(p) { editing.value = JSON.parse(JSON.stringify(p)) }
-  const json = prompt('Edit persona JSON (full fields):', JSON.stringify(p, null, 2))
+async function savePersona(payload) {
-  if (!json) return
+  busy.value = true
   try {
-    const parsed = JSON.parse(json)
+    await api.updatePersona(gid, editing.value.id, payload)
-    api.updatePersona(gid, p.id, parsed).then(load)
+    editing.value = null
-  } catch (e) { error.value = 'Invalid JSON: ' + e.message }
+    await load()
+  } catch (e) { error.value = e.message }
+  finally { busy.value = false }
 }
 onMounted(load)
 </script>
 
 <style scoped>
-.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
 .pcard { display: flex; flex-direction: column; }
-.pcard button { margin-top: auto; }
+.edit-btn { margin-top: auto; }
-.json {
+.star { color: #d8dbe3; }
-  background: #0f172a; color: #9ca3af; padding: 10px; border-radius: 8px;
+.star.on { color: #f59e0b; }
-  font-size: 11px; overflow: auto; max-height: 220px;
+.badge.tier-a { background: #dcfce7; color: #166534; }
-}
+.badge.tier-b { background: #fef9c3; color: #854d0e; }
+.badge.tier-c { background: #fee2e2; color: #991b1b; }
+.guide { background: #eef2ff; border-color: #c7d2fe; margin-bottom: 16px; }
+.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px; z-index: 50; overflow: auto; }
+.modal { background: #fff; border-radius: 14px; padding: 24px; width: 100%; max-width: 720px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
 </style>

frontend/src/views/Personas.vue

@@ -5,6 +5,14 @@
       <h2 style="margin:0">{{ i18n.t('personas') }}</h2>
       <span class="muted" style="margin-left:auto">{{ i18n.t('selectPersona') }}</span>
     </div>
+    <div class="card guide" v-if="!auth.isAdmin">
+      <strong>🎯 วิธีฝึก</strong>
+      <ol style="margin:8px 0 0;padding-left:20px;line-height:1.8">
+        <li>เลือกลูกค้าจำลอง (บุคคลต้นแบบ) คนหนึ่งที่อยากฝึกด้วย</li>
+        <li>ระดับ A ง่ายสุด → ระดับ C ยากสุด (ดูจากดาว ★ ความยาก)</li>
+        <li>กดปุ่มสำหรับฝึกแชทกับลูกค้าคนนั้น (ฝึกได้คนละครั้งเท่านั้น)</li>
+      </ol>
+    </div>
 
     <div class="row" v-if="auth.isAdmin" style="margin:12px 0;gap:10px">
       <router-link :to="`/admin/groups/${gid}/edit`"><button class="primary">🛠 {{ i18n.t('managePersonas') }}</button></router-link>
@@ -81,4 +89,5 @@ onMounted(load)
 .badge.won { background: #dcfce7; color: #166534; }
 .badge.lost { background: #fee2e2; color: #991b1b; }
 .badge.not_tried { background: #eef2ff; color: #4338ca; }
+.guide { background: #eef2ff; border-color: #c7d2fe; margin: 12px 0 16px; }
 </style>