◉

Penilaian Layanan Pelanggan PMTOTO

PMTOTO selalu berupaya mengutamakan layanan terbaik. Mohon luangkan waktu sebentar untuk mengisi survei berikut.

Langkah {step+1} dari 3

{step===0?<>

Selamat datang 👋

Survei ini terdiri dari 3 langkah singkat. Waktu pengisian ±1–2 menit. Data digunakan untuk meningkatkan kualitas layanan.

♟ Identitas Responden

set('userid',v)} placeholder="contoh: pmtoto12"/>set('whatsapp',v)} placeholder="contoh: 6281234567890"/>

Kenal PMTOTO dari mana? *

{sources.map(s=>set('source',s)}/>{s})}

:step===1?<>

⭐ Penilaian Layanan Utama

{mainQuestions.map(q=>set(q[0],v)}/>)}

▣ Pengalaman Bermain

{gameQuestions.map(q=>set(q[0],v)}/>)}

:<>

▤ Feedback & Rekomendasi

{lastQuestions.map(q=>set(q[0],v)}/>)}

📝 Saran & Masukan

Tuliskan saran terbaik Anda untuk meningkatkan kualitas layanan kami

set('saran',e.target.value)}/></section></>}{error&&<p className="error" role="alert">{error}</p>}<div className="actions">{step>0?<button className="secondary" onClick={()=>{setStep(s=>s-1);setError('')}}><ArrowLeft size={15}/> Kembali</button>:<span/>}<button disabled={busy} className="darkbutton" onClick={next}>{busy?'Mengirim...':step===2?'Kirim Survei':'Lanjut'} <ArrowRight size={15}/></button></div></div></div>}
function Complaint({go}){const [v,setV]=useState({priority:'Normal',site:'PMTOTO'}),[file,setFile]=useState(null),[busy,setBusy]=useState(false),[error,setError]=useState(''),[ticket,setTicket]=useState('');const set=(k,val)=>setV(p=>({...p,[k]:val}));async function send(e){e.preventDefault();setError('');if(file&&(!['image/png','image/jpeg','image/webp'].includes(file.type)||file.size>3*1024*1024)){setError('Bukti harus JPG, PNG, atau WebP maksimal 3 MB.');return}setBusy(true);try{let attachment=null;if(file){const data=await new Promise((resolve,reject)=>{const r=new FileReader();r.onload=()=>resolve(r.result);r.onerror=reject;r.readAsDataURL(file)});attachment={name:file.name,data}}const r=await call('complaint',{...v,attachment});setTicket(r.ticket)}catch(e){setError(e.message)}finally{setBusy(false)}}if(ticket)return <div className="panel success"><CheckCircle size={50}/><h2>Laporan berhasil dikirim!</h2><p>Simpan nomor tiket ini untuk mengecek balasan admin.</p><div className="ticket">{ticket}</div><button className="primary" onClick={()=>go('inbox')}>Cek Inbox</button></div>;return <div className="panel"><div className="formheading"><h2><MessageSquareWarning size={19}/> Laporkan Masalah</h2><button className="redbutton" onClick={()=>go('inbox')}><Inbox size={16}/> Inbox</button></div><form className="complaintform" onSubmit={send}><div className="twocol"><Field label="Username" value={v.username} onChange={x=>set('username',x)}/><Field label="Nomor WA aktif" value={v.whatsapp} onChange={x=>set('whatsapp',x)} placeholder="08123456789"/></div><Field label="Tanggal Kendala" type="date" value={v.date} onChange={x=>set('date',x)}/><Field label="Kendala" value={v.issue} onChange={x=>set('issue',x)} placeholder="Judul kendala"/><label className="field"><span>Pilih Situs</span><select value={v.site} onChange={e=>set('site',e.target.value)}><option>PMTOTO</option></select></label><label className="field"><span>Deskripsi Keluhan *</span><textarea rows="6" required value={v.description||''} onChange={e=>set('description',e.target.value)} placeholder="Jelaskan kendala yang dialami..."/></label><label className="field"><span>Prioritas</span><select value={v.priority} onChange={e=>set('priority',e.target.value)}>{['Normal','Sedang','Tinggi'].map(x=><option key={x}>{x}</option>)}</select></label><label className="field"><span><Upload size={15}/> Bukti Screenshot (opsional, maks. 3 MB)</span><input type="file" accept="image/png,image/jpeg,image/webp" onChange={e=>setFile(e.target.files?.[0]||null)}/></label>{error&&<p className="error">{error}</p>}<button className="primary" disabled={busy} type="submit"><Send size={17}/>{busy?'Mengirim...':'Kirim Keluhan'}</button></form></div>}
function InboxPage({go}){const [ticket,setTicket]=useState(''),[whatsapp,setWhatsapp]=useState(''),[data,setData]=useState(null),[error,setError]=useState(''),[busy,setBusy]=useState(false);async function check(e){e.preventDefault();setBusy(true);setError('');try{setData(await call('track',{ticket,whatsapp}))}catch(e){setError(e.message);setData(null)}finally{setBusy(false)}}return <div className="panel"><div className="formheading"><h2><Inbox size={19}/> Inbox Keluhan</h2></div><form className="complaintform" onSubmit={check}><p>Masukkan nomor tiket dan WhatsApp yang digunakan saat melapor.</p><Field label="Nomor Tiket" value={ticket} onChange={setTicket} placeholder="PM-XXXXXXXX"/><Field label="Nomor WhatsApp" value={whatsapp} onChange={setWhatsapp}/><button className="primary" disabled={busy}>{busy?'Memeriksa...':'Cek Status'}</button>{error&&<p className="error">{error}</p>}{data&&<div className="result"><b>{data.issue}</b><p>Status: <strong>{data.status}</strong></p><p>Prioritas: {data.priority}</p><p>Dibuat: {data.created_at}</p><hr/><b>Balasan Admin</b><p>{data.reply||'Belum ada balasan dari admin.'}</p></div>}</form></div>}
function Admin({go}){const [auth,setAuth]=useState(false),[password,setPassword]=useState(''),[rows,setRows]=useState([]),[tab,setTab]=useState('complaints'),[selected,setSelected]=useState(null),[reply,setReply]=useState(''),[status,setStatus]=useState('Baru'),[error,setError]=useState(''),[loading,setLoading]=useState(false);async function load(t=tab){try{const r=await call('admin_list',{type:t});setRows(r.items);setAuth(true)}catch(e){setError(e.message);setAuth(false)}}async function login(e){e.preventDefault();setLoading(true);setError('');try{await call('admin_login',{password});setPassword('');await load()}catch(e){setError(e.message)}finally{setLoading(false)}}async function save(){try{await call('admin_update',{ticket:selected.ticket,status,reply});setSelected(null);await load()}catch(e){setError(e.message)}}async function logout(){await call('admin_logout');setAuth(false);setRows([])}if(!auth)return <div className="panel login"><Lock size={36}/><h2>Login Administrator</h2><form onSubmit={login}><Field label="Password Admin" type="password" value={password} onChange={setPassword}/><button className="primary" disabled={loading}>{loading?'Memeriksa...':'Masuk Dashboard'}</button></form>{error&&<p className="error">{error}</p>}</div>;return <div className="panel admin"><div className="formheading"><h2><ShieldCheck size={19}/> Dashboard Admin</h2><button className="secondary" onClick={logout}><LogOut size={16}/> Keluar</button></div><div className="admintabs"><button className={tab==='complaints'?'active':''} onClick={()=>{setTab('complaints');setSelected(null);load('complaints')}}>Keluhan</button><button className={tab==='surveys'?'active':''} onClick={()=>{setTab('surveys');setSelected(null);load('surveys')}}>Survei</button><button onClick={()=>load()}><RefreshCcw size={15}/></button></div>{error&&<p className="error">{error}</p>}<p className="muted">Total {rows.length} data</p><div className="entries">{rows.map((r,i)=><button key={r.ticket||i} className="entry" onClick={()=>{setSelected(r);setReply(r.reply||'');setStatus(r.status||'Baru')}}><b>{tab==='complaints'?r.ticket:r.answers?.userid||'Responden'}</b><span>{tab==='complaints'?`${r.username} · ${r.issue}`:`${r.answers?.source||'-'} · ${r.created_at}`}</span><small>{r.status||'Survei'} · {r.created_at}</small></button>)}</div>{selected&&<div className="detail"><h3>{tab==='complaints'?selected.ticket:'Detail Survei'}</h3>{tab==='complaints'?<><p><b>Username:</b> {selected.username}</p><p><b>WhatsApp:</b> {selected.whatsapp}</p><p><b>Kendala:</b> {selected.issue}</p><p><b>Tanggal:</b> {selected.date}</p><p><b>Prioritas:</b> {selected.priority}</p><p className="message">{selected.description}</p>{selected.attachment&&<a href={`${API}?action=admin_attachment&ticket=${encodeURIComponent(selected.ticket)}`} target="_blank" rel="noreferrer">Lihat bukti screenshot</a>}<label className="field"><span>Status</span><select value={status} onChange={e=>setStatus(e.target.value)}>{['Baru','Diproses','Selesai','Ditolak'].map(x=><option key={x}>{x}</option>)}</select></label><label className="field"><span>Balasan Admin</span><textarea rows="4" value={reply} onChange={e=>setReply(e.target.value)}/></label><button className="primary" onClick={save}>Simpan Tanggapan</button></>:Object.entries(selected.answers||{}).map(([k,v])=><p key={k}><b>{k}:</b> {v}</p>)}<button className="secondary" onClick={()=>setSelected(null)}>Tutup Detail</button></div>}</div>}
function App(){const [page,setPage]=useState(()=>{const p=location.pathname.replace(/^\/+|\/+$/g,'');return ['keluhan','survei','inbox','admin'].includes(p)?p:'home'});function go(p){setPage(p);history.pushState({},'',p==='home'?'/':'/'+p);window.scrollTo(0,0)}useEffect(()=>{const fn=()=>{const p=location.pathname.replace(/^\/+|\/+$/g,'');setPage(['keluhan','survei','inbox','admin'].includes(p)?p:'home')};window.addEventListener('popstate',fn);return()=>window.removeEventListener('popstate',fn)},[]);return <><div className="topbar"/><div className="shell"><Header go={go}/>{page==='home'?<main className="landing"><div className="welcome"><span className="eyebrow">PUSAT LAYANAN PENGGUNA</span><h1>Bagaimana kami bisa membantu?</h1><p>Sampaikan kendala atau berikan penilaian agar layanan PMTOTO semakin baik.</p></div><div className="cards"><button className="service" onClick={()=>go('keluhan')}><span className="serviceicon"><MessageSquareWarning size={28}/></span><h2>Keluhan Pengguna</h2><p>Laporkan masalah atau kendala layanan dan pantau tanggapan admin.</p><span className="servicelink">Buat Laporan <ArrowRight size={17}/></span></button><button className="service" onClick={()=>go('survei')}><span className="serviceicon"><ClipboardList size={28}/></span><h2>Survei Kepuasan</h2><p>Isi penilaian layanan melalui 3 langkah singkat dan berikan masukan.</p><span className="servicelink">Isi Survei <ArrowRight size={17}/></span></button></div><button className="inboxlink" onClick={()=>go('inbox')}><Inbox size={17}/> Sudah mengirim keluhan? Cek Inbox</button></main>:<main className="content">{page==='keluhan'?<Complaint go={go}/>:page==='survei'?<Survey go={go}/>:page==='inbox'?<InboxPage go={go}/>:<Admin go={go}/>}</main>}<footer>© {new Date().getFullYear()} PMTOTO · Pusat Layanan Pengguna <button onClick={()=>go('admin')}>Admin</button></footer></div></>};createRoot(document.getElementById('root')).render(<App/>);