/* ============================================================ DevelopView.jsx — พัฒนาตนเอง (ID Plan · Training Log) • ครูบันทึกกิจกรรมการพัฒนาตนเอง (อบรม/สัมมนา/ศึกษาด้วยตนเอง) • Admin Dashboard สรุปภาพรวมทั้งโรงเรียน ============================================================ */ // 8 ด้านการพัฒนา (multi-select) const DEV_AREAS = [ {id:'curriculum', label:'หลักสูตรและการสอน', icon:'book', color:'#0ea5e9'}, {id:'assessment', label:'การวัดและประเมินผล', icon:'checkCircle',color:'#22c55e'}, {id:'tech_ai', label:'เทคโนโลยีและ AI', icon:'layers', color:'#8b5cf6'}, {id:'research', label:'วิจัยและนวัตกรรม', icon:'award', color:'#ec4899'}, {id:'student_care', label:'การดูแลช่วยเหลือนักเรียน', icon:'users', color:'#f59e0b'}, {id:'admin', label:'การบริหารงาน', icon:'shield', color:'#6366f1'}, {id:'language', label:'พัฒนาตนเองด้านภาษา', icon:'send', color:'#14b8a6'}, {id:'other', label:'อื่น ๆ', icon:'edit', color:'#94a3b8'}, ]; const areaById = id => DEV_AREAS.find(a=>a.id===id) || DEV_AREAS[7]; // รูปแบบการอบรม const DEV_FORMATS = [ {id:'onsite', label:'อบรมออนไซต์'}, {id:'online', label:'อบรมออนไลน์'}, {id:'hybrid', label:'Hybrid (ผสมผสาน)'}, {id:'self', label:'ศึกษาด้วยตนเอง'}, {id:'conference', label:'ประชุมวิชาการ / สัมมนา'}, {id:'workshop', label:'Workshop / ปฏิบัติการ'}, {id:'other', label:'อื่น ๆ'}, ]; // แหล่งงบประมาณ const BUDGET_SOURCES = [ {id:'none', label:'ไม่มีค่าใช้จ่าย', color:'#94a3b8'}, {id:'school', label:'งบโรงเรียน', color:'#1f4ba0'}, {id:'government', label:'งบราชการ / ก.ค.ศ.', color:'#0ea5e9'}, {id:'personal', label:'ส่วนตัว', color:'#f59e0b'}, {id:'external', label:'หน่วยงานภายนอก', color:'#22c55e'}, {id:'foundation', label:'มูลนิธิ / องค์กร', color:'#ec4899'}, ]; const budgetById = id => BUDGET_SOURCES.find(b=>b.id===id) || BUDGET_SOURCES[0]; // ── localStorage store ── function useDevelopRecords(){ const key = 'ntk_develop_v1'; const [list, setList] = React.useState(()=>{ try{ return JSON.parse(localStorage.getItem(key)||'[]'); }catch{ return []; } }); const save = (updater)=> setList(l=>{ const n = typeof updater==='function'?updater(l):updater; try{localStorage.setItem(key, JSON.stringify(n));}catch{} return n; }); const add = rec => save(l => [rec, ...l]); const remove = id => save(l => l.filter(r=>r.id!==id)); const update = (id, patch)=> save(l => l.map(r=>r.id===id ? {...r, ...patch} : r)); return {list, add, remove, update}; } function _emptyRec(teacher){ return { id: 'dev_'+Date.now()+'_'+Math.random().toString(36).slice(2,7), teacherId: teacher?.id || '', // 1. ผู้รายงาน (auto-fill จาก teacher) reporterName: teacher ? `${teacher.pre||''}${teacher.name||''}` : '', position:'', groupWork: teacher?.primary || '', // 2. รายละเอียดการอบรม courseName:'', organizer:'', startDate:'', endDate:'', hours:'', format:'online', venue:'', // 3. เป้าหมายการพัฒนา (multi) areas:[], areaOther:'', // 4. ผลที่ได้รับ knowledge:'', application:'', beneficiary:'', timeframe:'', // 5. หลักฐาน / ค่าใช้จ่าย evidence:'', evidenceUrl:'', cost:'', budgetSource:'none', budgetNote:'', createdAt: new Date().toISOString(), }; } // ── helpers ── function fmtDate(iso){ if(!iso) return '—'; try{const d=new Date(iso+'T00:00:00'); return `${d.getDate()}/${d.getMonth()+1}/${d.getFullYear()+543}`;}catch{return iso;} } // ═══════════════════════════════════════════════ // DevelopView — สำหรับครู // ═══════════════════════════════════════════════ function DevelopView({me}){ const {list, add, remove, update} = useDevelopRecords(); const [tab, setTab] = React.useState('new'); const [editing, setEditing] = React.useState(null); const myList = list.filter(r=>r.teacherId===me.id); const totalHours = myList.reduce((s,r)=> s + (Number(r.hours)||0), 0); const totalCost = myList.reduce((s,r)=> s + (Number(r.cost)||0), 0); const areaCount = {}; myList.forEach(r=>(r.areas||[]).forEach(a=>{ areaCount[a]=(areaCount[a]||0)+1; })); return (

พัฒนาตนเอง (ID Plan)

บันทึกและติดตามการพัฒนาตนเองของครู · การอบรม สัมมนา และวิชาการต่าง ๆ

{/* KPI cards ส่วนตัว */}
{[ ['new', editing?'บันทึกใหม่':'บันทึกใหม่','plus'], ['history', `ประวัติ (${myList.length})`, 'clipboard'], ['summary','สรุปของฉัน','layers'], ].map(([id,lbl,ic])=>( ))}
{tab==='new' && ( { if(list.find(r=>r.id===rec.id)) update(rec.id, rec); else add(rec); setEditing(null); setTab('history'); alert('บันทึกเรียบร้อยแล้ว ✓'); }} onCancel={()=>{setEditing(null); setTab('history');}}/> )} {tab==='history' && ( {setEditing(r); setTab('new');}} onDelete={(id)=>{ if(confirm('ลบรายการนี้?')) remove(id); }}/> )} {tab==='summary' && }
ข้อมูลบันทึกในเครื่องของท่านเท่านั้น (localStorage) · admin ยังเห็นเฉพาะข้อมูลในเครื่องเดียวกัน
แนะนำ: บันทึกทันทีหลังจบการอบรม พร้อมแนบเกียรติบัตร (link Google Drive) · ใช้เป็นหลักฐานสำหรับ PA และวิทยฐานะ
); } // ═══════════════════════════════════════════════ // DevelopForm — ฟอร์มบันทึกการพัฒนา (6 ส่วน) // ═══════════════════════════════════════════════ function DevelopForm({me, editing, onSave, onCancel}){ const [rec, setRec] = React.useState(editing); const set = (patch)=> setRec(r=>({...r, ...patch})); const toggleArea = (id)=> set({areas: (rec.areas||[]).includes(id) ? rec.areas.filter(a=>a!==id) : [...(rec.areas||[]), id]}); const isEdit = editing && (Array.isArray(rec) ? false : (rec.createdAt < new Date(Date.now()-1000).toISOString())); return (
{/* ส่วน 1: ผู้รายงาน */}
set({reporterName:e.target.value})}/>
set({position:e.target.value})} placeholder="เช่น ครู · ครูชำนาญการ · ครูผู้ช่วย"/>
set({groupWork:e.target.value})}/>
 {/* ส่วน 2: รายละเอียดการอบรม */}
set({courseName:e.target.value})} placeholder="เช่น การจัดการเรียนรู้เชิงรุก · Active Learning สำหรับครู"/>
set({organizer:e.target.value})} placeholder="เช่น สพฐ. · คุรุสภา · จุฬาฯ · โรงเรียนหนองตาคงพิทยาคาร"/>
set({startDate:e.target.value})}/>
set({endDate:e.target.value})}/>
set({hours:e.target.value})} placeholder="เช่น 12"/>
set({venue:e.target.value})} placeholder="เช่น โรงแรม X · Zoom · YouTube · Google Classroom"/>
 {/* ส่วน 3: เป้าหมายการพัฒนา */}
{DEV_AREAS.map(a=>{ const on = (rec.areas||[]).includes(a.id); return ( ); })}
{(rec.areas||[]).includes('other') && (
set({areaOther:e.target.value})} placeholder="ระบุด้านที่ต้องการพัฒนา"/>
)}
{/* ส่วน 4: ผลที่ได้รับ */}