// ============ Admin screens ============ const { useState, useRef } = React; const AdminHome = ({ onNav }) => { const totalUsers = DATA.students.length + DATA.teachers.length + 1; // +1 admin const totalWorks = DATA.works.length; const storage = 4.7; // GB mock const byClass = DATA.classes.map(c => ({ cls: c, students: DATA.students.filter(s => s.classId === c.id).length, works: DATA.works.filter(w => w.classId === c.id).length, groups: DATA.groups.filter(g => g.classId === c.id).length, })); return (
Admin Dashboard · ผู้ดูแลระบบ
ภาพรวมระบบ — system overview.
ระบบปกติ · All systems normal
ผู้ใช้งานทั้งหมด
{totalUsers}
+2 สัปดาห์นี้
ผลงานในระบบ
{totalWorks}
+5 วันนี้
ห้องเรียน · Classes
{DATA.classes.length}
ป.5: 2 · ป.6: 2
พื้นที่ใช้งาน
{storage}GB
จาก 50 GB
ห้องเรียน · classes
{byClass.map(b => ( ))}
ห้องนักเรียนผลงานกลุ่ม
{b.cls.label}
ระดับ ป.{b.cls.grade}
 {b.students} {b.works} {b.groups}
สิทธิ์การใช้งาน · roles
{[ { role:'นักเรียน · Student', count: DATA.students.length, perms:['อัปโหลด','คอมเมนต์เพื่อน','ดูผลงานในห้อง'], color:'var(--brand-500)' }, { role:'ครู · Teacher', count: DATA.teachers.length, perms:['ตรวจ + ให้คะแนน','จัดกลุ่ม','แก้ไขการส่ง','ดูทุกห้อง'], color:'var(--warm-500)' }, { role:'ผู้ดูแล · Admin', count: 1, perms:['จัดการผู้ใช้','จัดการห้อง','ตั้งค่าระบบ','สำรองข้อมูล'], color:'var(--ink)' }, ].map(r => (
{r.role} {r.count} คน
{r.perms.map(p => {p})}
))}
กิจกรรมระบบ · audit log
{[ ['14:32', 't1', 'ให้คะแนน', 'ผลงาน w08 (Short Comic)', '10.0.1.45'], ['14:21', 's01', 'อัปโหลด', 'ผลงาน w04 (Cartoon Character)', '10.0.1.21'], ['13:58', 't1', 'สร้างกลุ่ม', 'กลุ่มไฟฉาย (ป.6/1)', '10.0.1.45'], ['12:11', 'admin', 'เข้าสู่ระบบ', 'Admin panel', '10.0.1.2'], ['11:44', 's07', 'คอมเมนต์', 'ผลงาน w08', '10.0.1.28'], ].map((row, i) => ( ))}
เวลาผู้ใช้การกระทำเป้าหมายIP
{row[0]} {row[1] === 'admin' ? Admin : (
{H.person(row[1]).name}
)} 		{row[2]} {row[3]} {row[4]}
); }; // --- Users management --- const AdminUsers = () => { const [filter, setFilter] = useState('all'); // all | student | teacher const [q, setQ] = useState(''); const [showAdd, setShowAdd] = useState(false); const [editing, setEditing] = useState(null); let users = [ ...DATA.students.map(s => ({...s, role:'student'})), ...DATA.teachers.map(t => ({...t, role:'teacher'})), ]; if (filter !== 'all') users = users.filter(u => u.role === filter); if (q) users = users.filter(u => u.name.includes(q) || (u.nameEn||'').toLowerCase().includes(q.toLowerCase()) || u.id.includes(q)); return (
ผู้ใช้งาน · users
จัดการบัญชี, รหัสผ่าน, รูปโปรไฟล์ของนักเรียนและครู · {users.length} คน
setQ(e.target.value)} style={{paddingLeft:36}} />
{users.map(u => { const workCount = u.role === 'student' ? DATA.works.filter(w => w.owners.includes(u.id)).length : '—'; return ( ); })}
ชื่อ User ID บทบาท ห้อง ผลงาน สถานะ
{u.photo ? ( ) : ( )}
{u.name}
{u.nameEn}
 {u.id} {u.role === 'teacher' ? 'ครู · Teacher' : 'นักเรียน · Student'} {u.classId ? {H.cls(u.classId).label} : —} {workCount} Active
{showAdd && ( setShowAdd(false)}>
เพิ่มผู้ใช้ใหม่ · Add User
)} {editing && setEditing(null)} />}
); }; // --- Admin edit-user modal: change ID, password, profile photo --- const AdminEditUserModal = ({ user, onClose }) => { const [name, setName] = useState(user.name); const [nameEn, setNameEn] = useState(user.nameEn || ''); const [userId, setUserId] = useState(user.id); const [email, setEmail] = useState(user.email || ''); const [classId, setClassId] = useState(user.classId || ''); const [newPw, setNewPw] = useState(''); const [confirmPw, setConfirmPw] = useState(''); const [photoUrl, setPhotoUrl] = useState(user.photo || null); const [removePhoto, setRemovePhoto] = useState(false); const [msg, setMsg] = useState(''); const fileRef = useRef(null); const onPhoto = (e) => { const f = e.target.files?.[0]; if (!f) return; setRemovePhoto(false); setPhotoUrl(URL.createObjectURL(f)); }; const save = () => { if (newPw && newPw !== confirmPw) { setMsg('error:รหัสผ่านใหม่ไม่ตรงกัน'); return; } // persist to in-memory data user.name = name; user.nameEn = nameEn; user.id = userId; user.email = email; if (user.role === 'student') user.classId = classId; if (photoUrl && !removePhoto) user.photo = photoUrl; if (removePhoto) user.photo = null; setMsg('ok:บันทึกข้อมูลสำเร็จ'); setTimeout(onClose, 900); }; const resetPw = () => { const tmp = 'cmuds-'+Math.random().toString(36).slice(2,7); setNewPw(tmp); setConfirmPw(tmp); setMsg('info:รหัสผ่านชั่วคราว — แจ้งให้ผู้ใช้เปลี่ยนใหม่ทันที'); }; const isErr = msg.startsWith('error'); const isOk = msg.startsWith('ok'); const isInfo = msg.startsWith('info'); return (
จัดการผู้ใช้ · Manage User {user.name}
{user.role === 'teacher' ? 'ครู · Teacher' : 'นักเรียน · Student'}
{/* photo */}
รูปโปรไฟล์ · Profile Photo
{photoUrl && !removePhoto ? ( ) : (
{user.initial}
)}
{(photoUrl || user.photo) && !removePhoto && ( )}
PNG / JPG ขนาดไม่เกิน 5MB
{/* info */}
ข้อมูลผู้ใช้ · User Info
setName(e.target.value)} />
setNameEn(e.target.value)} />
setEmail(e.target.value)} />
{user.role === 'student' && (
)}
{/* credentials — highlight box */}
เปลี่ยน User ID & รหัสผ่าน
Change credentials · ใช้ระวัง ผู้ใช้จะต้องเข้าสู่ระบบใหม่ทันที
setUserId(e.target.value)} style={{fontFamily:'var(--font-mono)'}} />
setNewPw(e.target.value)} style={{fontFamily:'var(--font-mono)'}} />
setConfirmPw(e.target.value)} style={{fontFamily:'var(--font-mono)'}} />
{msg && (
{msg.split(':')[1]}
)}
); }; // --- Admin classes settings --- const AdminClasses = () => (
ห้องเรียน · classes & subjects
จัดการห้องเรียนและวิชา
{DATA.classes.map(c => { const s = DATA.students.filter(x => x.classId === c.id); const w = DATA.works.filter(x => x.classId === c.id); return (
{c.label}
Grade {c.grade} · Room {c.room}
นักเรียน
{s.length}
ผลงาน
{w.length}
ครู
1
x.id)} max={5} />
); })}
); Object.assign(window, { AdminHome, AdminUsers, AdminClasses });