// teacher.jsx — Teacher app (desktop, in browser window) const { useState: useStateT, useEffect: useEffectT, useMemo: useMemoT } = React; // ─── Sidebar ────────────────────────────────────────────── function TeacherSidebar({ page, setPage, t, lang, pendingCount, open, onClose, teacher }) { const items = [ { id: 'dashboard', label: t.dashboard, icon: 'layout' }, { id: 'issues', label: t.issues, icon: 'list', badge: pendingCount }, { id: 'timeline', label: t.timeline, icon: 'clock' }, { id: 'settings', label: lang === 'th' ? 'โปรไฟล์' : 'Profile', icon: 'user' }, ]; return ( ); } // ─── Top bar ────────────────────────────────────────────── function TeacherTopBar({ title, subtitle, lang, setLang, onSwitchRole, t, onMenuClick, reports, goToIssue }) { const [showNotifs, setShowNotifs] = useStateT(false); // Build notifications: reports sorted by latest timeline event, top 8 const notifs = (reports || []) .map(r => { const events = r.timeline || []; const last = events[events.length - 1] || ['submitted', r.submittedAt, r.reporter]; const [kind, when, who, note] = last; return { id: r.id, title: lang === 'th' ? r.title : (r.titleEn || r.title), kind, when, who, reporter: r.reporter, status: r.status }; }) .sort((a, b) => (b.when || '').localeCompare(a.when || '')) .slice(0, 8); const hasUnseen = (reports || []).some(r => r.status === 'pending'); const kindLabel = (k) => ({ submitted: lang === 'th' ? 'เรื่องใหม่' : 'New report', 'in-progress': lang === 'th' ? 'เริ่มแก้ไข' : 'Started', progress: lang === 'th' ? 'อัปเดตความคืบหน้า' : 'Progress update', resolved: lang === 'th' ? 'แก้ไขเสร็จ' : 'Resolved', }[k] || k); const timeAgo = (iso) => { if (!iso) return ''; const ms = Date.now() - new Date(iso).getTime(); const m = Math.floor(ms / 60000); if (m < 1) return lang === 'th' ? 'เพิ่งจะ' : 'just now'; if (m < 60) return lang === 'th' ? `${m} นาทีที่แล้ว` : `${m}m ago`; const h = Math.floor(m / 60); if (h < 24) return lang === 'th' ? `${h} ชม. ที่แล้ว` : `${h}h ago`; const d = Math.floor(h / 24); return lang === 'th' ? `${d} วันที่แล้ว` : `${d}d ago`; }; return (
{title}
{subtitle &&
{subtitle}
}
{/* search */}
⌘K
{showNotifs && ( <>
setShowNotifs(false)} style={{ position:'fixed', inset: 0, zIndex: 50 }}/>
{lang === 'th' ? 'การแจ้งเตือน' : 'Notifications'}
{notifs.length === 0 ? (
{lang === 'th' ? 'ยังไม่มีรายงาน' : 'No reports yet'}
) : notifs.map(n => ( ))}
)}
); } // ─── Dashboard ─────────────────────────────────────────────── function TeacherDashboard({ t, lang, reports, goToIssue }) { const stats = useMemoT(() => { const total = reports.length; const resolved = reports.filter(r => r.status === 'resolved').length; const inProgress = reports.filter(r => r.status === 'in-progress').length; const pending = reports.filter(r => r.status === 'pending').length; const pct = total ? Math.round((resolved / total) * 100) : 0; return { total, resolved, inProgress, pending, pct }; }, [reports]); const byCategory = useMemoT(() => { const groups = {}; CATEGORIES.forEach(c => groups[c.id] = { cat: c, total: 0, resolved: 0 }); reports.forEach(r => { groups[r.category].total += 1; if (r.status === 'resolved') groups[r.category].resolved += 1; }); return Object.values(groups).filter(g => g.total > 0).sort((a, b) => b.total - a.total); }, [reports]); const recent = reports.slice(0, 6); return (
{/* Last updated row */}
{lang === 'th' ? 'อัปเดตล่าสุด: เมื่อสักครู่' : 'Last updated: just now'}
{/* Top row: pie + stat cards */}
{/* Pie card */}
{t.resolvedPct}
{lang === 'th' ? 'สัดส่วนสถานะของเรื่องทั้งหมด' : 'Status share of all reports'}
{stats.pct}%
{t.resolvedPct}
} />
{/* Stat cards grid */}
{/* By category bar + recent */}
{/* Category breakdown */}
{t.byCategory}
{lang === 'th' ? 'รวม' : 'Total'} · {reports.length}
{byCategory.map(g => (
{g.cat[lang]}
{g.resolved}/{g.total}
))}
{/* Recent reports table */}
{t.recent}
{t.seeAll} ›
{recent.map((r, i) => ( goToIssue(r.id)} last={i === recent.length - 1}/> ))}
); } function LegendRow({ color, label, value }) { return (
{label} {value}
); } function BigStat({ icon, tint, label, value, unit, trend }) { return (
{value} {unit && {unit}}
{label} {trend}
); } // ─── Mini progress bar (inline) ──────────────────────────── function MiniProgress({ value }) { const v = Math.max(0, Math.min(100, value)); const color = v >= 75 ? 'oklch(0.55 0.16 155)' : v >= 40 ? 'oklch(0.56 0.20 265)' : 'oklch(0.66 0.20 290)'; return (
{v}%
); } function TeacherListRow({ r, t, lang, onClick, last }) { const cat = CAT_BY_ID[r.category]; return ( ); } // ─── Issues page (list + filters) ────────────────────────── function TeacherIssues({ t, lang, reports, goToIssue }) { const [cat, setCat] = useStateT('all'); const [status, setStatus] = useStateT('all'); const filtered = reports.filter(r => (cat === 'all' || r.category === cat) && (status === 'all' || r.status === status) ); return (
{/* Filters */}
{t.filter}
[c.id, c[lang]]) ]}/>
{filtered.length} / {reports.length} {lang === 'th' ? 'รายการ' : 'reports'}
{/* Table */}
{lang === 'th' ? 'รายงาน' : 'Report'}
{t.category}
{t.reporter}
{lang === 'th' ? 'เวลา' : 'Time'}
{lang === 'th' ? 'สถานะ' : 'Status'}
{filtered.map((r, i) => { const c = CAT_BY_ID[r.category]; return ( ); })} {filtered.length === 0 && (
{lang === 'th' ? 'ไม่พบรายการตามตัวกรอง' : 'No reports match the current filter'}
)}
); } function FilterSelect({ value, onChange, options }) { return ( ); } // ─── Progress card (teacher) ───────────────────────────── function ProgressCard({ report, t, lang, onChange, onResolveSuggest }) { const saved = report.progress || 0; const [val, setVal] = useStateT(saved); // sync when report changes externally useEffectT(() => { setVal(saved); }, [saved]); const dirty = val !== saved; const color = val >= 100 ? 'oklch(0.55 0.16 155)' : val >= 50 ? 'oklch(0.56 0.20 265)' : val >= 25 ? 'oklch(0.62 0.20 290)' : 'oklch(0.68 0.18 75)'; const stateLabel = val === 0 ? (lang === 'th' ? 'ยังไม่ได้เริ่ม' : 'Not started') : val < 50 ? (lang === 'th' ? 'เริ่มดำเนินการ' : 'Started') : val < 100 ? (lang === 'th' ? 'ดำเนินการอยู่' : 'In progress') : (lang === 'th' ? 'เสร็จสมบูรณ์' : 'Complete'); return (
{t.updateProgress}
{t.progressHint}
● {stateLabel}
{/* Big % display */}
{val} % {dirty && ( {lang === 'th' ? 'ยังไม่บันทึก' : 'Unsaved'} )}
{/* Slider */} setVal(parseInt(e.target.value, 10))} className="bp-prog-slider" style={{ '--bp-slider-color': color, '--bp-slider-pct': val + '%', }}/>
0%25%50%75%100%
{/* Quick buttons */}
{[0, 25, 50, 75, 100].map(q => { const active = val === q; return ( ); })}
{/* Save button + auto-log hint */}
{t.autoLogged} {saved > 0 && ( {lang === 'th' ? 'ล่าสุด' : 'last'}: {saved}% )}
{/* 100% hint */} {val === 100 && (
{t.completedFully}
)}
); } // ─── Issue detail ────────────────────────────────────────── function TeacherDetail({ t, lang, report: r, goBack, prevPage, updateReport }) { const [showResolveModal, setShowResolveModal] = useStateT(false); const [note, setNote] = useStateT(''); const [thanked, setThanked] = useStateT((r.thanks || 0) > 0); const backLabel = lang === 'th' ? ({ dashboard: 'กลับไปแดชบอร์ด', issues: 'กลับไปยังรายการ', timeline: 'กลับไปไทม์ไลน์' }[prevPage] || 'ย้อนกลับ') : ({ dashboard: 'Back to dashboard', issues: 'Back to list', timeline: 'Back to timeline' }[prevPage] || 'Back'); if (!r) return null; const cat = CAT_BY_ID[r.category]; function accept() { updateReport(r.id, prev => ({ ...prev, status: 'in-progress', progress: Math.max(prev.progress || 0, 10), timeline: [...prev.timeline, ['in-progress', new Date().toISOString(), 'ครูประภาส']], })); } function resolve() { updateReport(r.id, prev => ({ ...prev, status: 'resolved', progress: 100, // Preserve existing after photo if teacher uploaded one; only set placeholder if none yet after: prev.after || { hue: 155, label: 'AFTER · FIX COMPLETED' }, timeline: [...prev.timeline, ['resolved', new Date().toISOString(), 'ครูประภาส', note || 'แก้ไขเสร็จเรียบร้อย']], })); setShowResolveModal(false); setNote(''); } function setProgress(newPct) { updateReport(r.id, prev => { const note = lang === 'th' ? `อัปเดตความคืบหน้าเป็น ${newPct}% (จาก ${prev.progress || 0}%)` : `Progress updated to ${newPct}% (from ${prev.progress || 0}%)`; return { ...prev, progress: newPct, status: newPct === 100 ? prev.status : (prev.status === 'pending' && newPct > 0 ? 'in-progress' : prev.status), timeline: [...prev.timeline, ['progress', new Date().toISOString(), 'ครูประภาส', note]], }; }); } function thank() { updateReport(r.id, prev => ({ ...prev, thanks: (prev.thanks || 0) + 1 })); setThanked(true); } return (
{/* Left column */}
{/* Header card */}

{lang === 'th' ? r.title : r.titleEn}

{r.id}

{lang === 'th' ? r.desc : r.descEn}

{/* Progress (in-progress only) */} {(r.status === 'in-progress' || r.status === 'pending') && ( setShowResolveModal(true)}/> )} {/* Photos */}
{t.photoLabel}
{lang === 'th' ? 'เปรียบเทียบก่อน/หลัง' : 'Before / after'}
{t.before}
{t.after}
{r.after ? (
) : ( )}
{/* Timeline */}
{t.timelineEvents}
{/* Right column — actions */}
{lang === 'th' ? 'การดำเนินการ' : 'Actions'}
{r.status === 'pending' && ( )} {r.status === 'in-progress' && ( )} {r.status === 'resolved' && ( )}
{/* Reporter card */}
{t.reporter}
{r.reporter.split('')[0]}
{r.reporter}
{r.grade}
{r.thanks > 0 && (
ขอบคุณ {r.thanks} ครั้ง
)}
{/* Quick info */}
{lang === 'th' ? 'ข้อมูลเพิ่มเติม' : 'Metadata'}
{/* Resolve modal */} {showResolveModal && (
setShowResolveModal(false)} style={{ position:'absolute', inset: 0, background:'rgba(20, 14, 60, 0.42)', backdropFilter:'blur(6px)', WebkitBackdropFilter:'blur(6px)', display:'flex', alignItems:'center', justifyContent:'center', zIndex: 50, padding: 30, }}>
e.stopPropagation()} style={{ background:'var(--bp-surface)', borderRadius: 20, padding: 26, width: 460, maxWidth:'100%', boxShadow:'var(--bp-shadow-lg)', }}>
{t.confirmResolve}
{lang === 'th' ? 'ระบบจะแจ้งเตือนนักเรียนผู้รายงานทันที' : 'The reporter will be notified immediately.'}
{t.note}