// screens.jsx — Rbac46 production screens const D = () => window.RBAC_DATA; const cat = (id) => D().helpCategories.find(c => c.id === id); const person = (id) => { if (!id || id === "me") return RBAC_ME(); return D().alumni.find(a => a.id === id) || RBAC_ME(); }; // Safe-area-aware top padding helper (works in inline styles) const safeTop = (extra = 16) => `calc(var(--safe-t) + ${extra}px)`; // ──────────────────────────────────────────────────────────── // 0) Login — LINE OAuth + identity picker // ──────────────────────────────────────────────────────────── const LINE_ICON = ( ); function SplashScreen({ onEnter }) { const [step, setStep] = React.useState("check"); // check|line|pick const [lineName, setLineName] = React.useState(""); const [linePic, setLinePic] = React.useState(""); const [mode, setMode] = React.useState("search"); // search|add const [pickedId, setPickedId] = React.useState(""); const [search, setSearch] = React.useState(""); const [formName, setFormName] = React.useState(""); const [formNick, setFormNick] = React.useState(""); const [formRole, setFormRole] = React.useState(""); const [linking, setLinking] = React.useState(false); const [authErr, setAuthErr] = React.useState(false); const lineUidRef = React.useRef(null); React.useEffect(() => { try { const params = new URLSearchParams(window.location.search); const lUid = params.get("line_uid"); const alumniId = params.get("alumni_id"); const lName = params.get("line_name") || ""; const lPic = params.get("line_picture") || ""; const isErr = params.get("auth_error"); if (params.toString()) window.history.replaceState({}, "", window.location.pathname); if (isErr) { setAuthErr(true); setStep("line"); return; } if (lUid && alumniId) { RBAC_SET_ME(alumniId, lUid); onEnter(); return; } if (lUid) { lineUidRef.current = lUid; setLineName(lName); setLinePic(lPic); setFormName(lName); setStep("pick"); return; } // Restore existing session const uid = localStorage.getItem("rbac46_uid"); if (uid) { if (D().alumni.find(a => a.id === uid)) { onEnter(); return; } try { const p = JSON.parse(localStorage.getItem("rbac46_profile") || "null"); if (p && p.id === uid) { onEnter(); return; } } catch {} } } catch {} setStep("line"); }, []); // ── confirm from alumni list ─────────────────────────────── const handlePickAlumni = async () => { if (!pickedId) return; setLinking(true); const lUid = lineUidRef.current; if (lUid) await RBAC_API.linkLine(lUid, pickedId); RBAC_SET_ME(pickedId, lUid || undefined); onEnter(); }; // ── confirm from add-yourself form ──────────────────────── const handleAddSelf = async () => { const name = formName.trim(); if (!name) return; setLinking(true); const lUid = lineUidRef.current; const id = lUid ? `line_${lUid}` : `manual_${Date.now()}`; const profile = { id, name, nick: formNick.trim() || name.split(" ")[0], role: formRole.trim(), province: "", hue: 210, help: [], since: 2546, active: true, pictureUrl: linePic, }; if (lUid) { await RBAC_API.createProfile({ line_uid: lUid, name: profile.name, nick: profile.nick, role: profile.role, picture_url: linePic, }); } RBAC_SET_PROFILE(profile); onEnter(); }; const filtered = D().alumni.filter(a => !search || a.name.includes(search) || a.nick.includes(search) ); const inp = { width: "100%", padding: "13px 14px", borderRadius: 10, border: "1px solid var(--border)", background: "var(--paper)", fontFamily: "var(--ui)", fontSize: 15, color: "var(--ink)", outline: "none", }; // ── loading ──────────────────────────────────────────────── if (step === "check") return (
กำลังโหลด…
); // ── LINE login ───────────────────────────────────────────── if (step === "line") return (
CL.46 · Alumni Network

Rbac.

เพื่อนเก่า · เครือข่ายใหม่
เครือข่ายศิษย์เก่ารุ่น 46

{authErr && (
เข้าสู่ระบบไม่สำเร็จ — กรุณาลองอีกครั้ง
)} {LINE_ICON} เข้าสู่ระบบด้วย LINE

สำหรับศิษย์เก่า Rbac เท่านั้น

); // ── identity picker ──────────────────────────────────────── return (
{/* LINE profile card */}
{linePic ? ( ) : (
{LINE_ICON}
)}
เชื่อมต่อด้วย LINE แล้ว
{lineName || "ผู้ใช้ LINE"}
{/* tabs */}
{[["search", "ค้นจากทำเนียบรุ่น"], ["add", "เพิ่มข้อมูลตัวเอง"]].map(([m, label]) => ( ))}
{/* content */} {mode === "search" ? ( <>
setSearch(e.target.value)} placeholder="ค้นชื่อ-สกุล หรือชื่อเล่น…" style={{ ...inp, background: "var(--paper)" }}/>
{filtered.map(a => ( ))} {filtered.length === 0 && (
ไม่พบชื่อ — ลองค้นคำอื่น หรือเปลี่ยนแท็บ "เพิ่มข้อมูลตัวเอง"
)}
) : ( <>
setFormName(e.target.value)} placeholder="กรอกชื่อ-นามสกุล" style={{ ...inp, marginTop: 6 }}/>
setFormNick(e.target.value)} placeholder="ชื่อเล่น (ถ้ามี)" style={{ ...inp, marginTop: 6 }}/>
setFormRole(e.target.value)} placeholder="เช่น วิศวกร, ครู, นักธุรกิจ" style={{ ...inp, marginTop: 6 }}/>
ข้อมูลจาก LINE: {lineName || "—"}
ชื่อและรูปโปรไฟล์ LINE จะถูกนำมาใช้ในระบบ
)}
); } // ──────────────────────────────────────────────────────────── // 1) Home // ──────────────────────────────────────────────────────────── function HomeScreen({ go, sepia }) { const d = D(); const me = RBAC_ME(); const [broadcasts, setBroadcasts] = React.useState(d.broadcasts); React.useEffect(() => { RBAC_API.getBroadcasts().then(data => { if (Array.isArray(data) && data.length > 0) { setBroadcasts(data.map(b => ({ id: b.id, kind: b.kind || "help", from: b.from_id, title: b.title, body: b.body, ago: fmtAgo(b.created_at), replies: 0, }))); } }).catch(() => {}); }, []); return (
{/* hero */}
Today

สวัสดี {me.nick} —
วันนี้รุ่นเรา กระดิกตัว นิดหน่อย

{/* quick actions */}
go("directory")}/> go("meetups")}/> go("compose")}/>
{broadcasts.map(b => )}
go("directory")}>
{d.alumni.filter(a => a.online).map(a => ( ))}
go("gallery")}>
); } function fmtAgo(ts) { if (!ts) return ""; const diff = Date.now() - ts; const h = Math.floor(diff / 3600000); if (h < 1) return "เมื่อกี้"; if (h < 24) return `${h} ชม.`; const d = Math.floor(h / 24); return d === 1 ? "เมื่อวาน" : `${d} วัน`; } function Stat({ n, l }) { return (
{n}
{l}
); } function Action({ icon, label, accent, onClick }) { return ( ); } function Section({ title, children, trailing, onTrailing }) { return (

{title}

{trailing && ( )}
{children}
); } function BroadcastCard({ b, go, sepia }) { const fromP = b.from === "class" ? null : person(b.from); const kindColor = b.kind === "help" ? "var(--accent)" : "var(--sage)"; const kindLabel = b.kind === "help" ? "ขอความช่วยเหลือ" : "กิจกรรมรุ่น"; return (
{fromP ? : (
46
)}
· {kindLabel}
{b.ago}
{b.title}
{b.body}
ตอบ {b.replies || 0}
); } // ──────────────────────────────────────────────────────────── // 2) Directory // ──────────────────────────────────────────────────────────── function DirectoryScreen({ go, sepia }) { const d = D(); const [q, setQ] = React.useState(""); const [activeCat, setAC] = React.useState(null); const [view, setView] = React.useState("list"); const filtered = d.alumni.filter(a => { if (activeCat && !a.help.includes(activeCat)) return false; if (q) { const t = q.toLowerCase(); const cats = a.help.map(h => (cat(h)?.th + " " + cat(h)?.en).toLowerCase()).join(" "); if (!(a.name + a.nick + a.en + a.province + a.role + cats).toLowerCase().includes(t)) return false; } return true; }); return (

ทำเนียบรุ่น

{["list", "grid", "map"].map(v => ( ))}
setQ(e.target.value)} placeholder="ค้นหาชื่อ, จังหวัด, ทักษะ..." style={{ flex: 1, border: 0, background: "transparent", outline: "none", fontFamily: "var(--ui)", fontSize: 14, color: "var(--ink)" }} /> {q && ( )}
setAC(null)}> ทั้งหมด {d.alumni.length} {d.helpCategories.map(c => ( setAC(activeCat === c.id ? null : c.id)} count={c.count}> {c.th} ))}
พบ {filtered.length} คน {activeCat && `· ${cat(activeCat).th}`}
{view === "list" && (
{filtered.map(a => )} {!filtered.length && }
)} {view === "grid" && (
{filtered.map(a => )}
)} {view === "map" && }
); } function AlumniRow({ a, go, sepia }) { return ( ); } function AlumniCard({ a, go, sepia }) { return ( ); } function EmptyState() { return (
ไม่พบเพื่อนที่ค้นหา
ลองคำอื่นหรือล้างตัวกรอง
); } function MapView({ alumni, go }) { const provs = window.PROVINCE_COORDS; const groups = {}; alumni.forEach(a => { (groups[a.province] = groups[a.province] || []).push(a); }); return (
{Object.entries(groups).map(([prov, list]) => { const c = provs[prov]; if (!c) return null; return ( ); })}
{Object.entries(groups).map(([prov, list]) => (
{prov} {list.length} คน
))}
); } // ──────────────────────────────────────────────────────────── // 3) Profile detail // ──────────────────────────────────────────────────────────── function ProfileScreen({ id, go, sepia, thenNow }) { const a = person(id) || D().alumni[0]; const [tab, setTab] = React.useState("about"); const isThen = thenNow === "then"; return (
{["now", "then"].map(k => ( ))}
{isThen ? a.tenure || "CL.46 · UNDERGRAD" : "CL.46 · ALUMNI"}
{a.name}
"{a.nick}"
{a.role}
{a.company}
{a.province}
{a.verified && (
VERIFIED
)}
alert("ส่งข้อความผ่าน LINE")}/>
What I can help
"{a.helpNote}"
{a.help.map(h => ( {cat(h).th} ))}
{[["about", "ข้อมูล"], ["photos", "ภาพ"], ["mutual", "เพื่อนร่วม"]].map(([k, l]) => ( ))}
{tab === "about" && (
)} {tab === "photos" && (
{[0,1,2,3,4,5].map(i => (
))}
)} {tab === "mutual" && (
{D().alumni.filter(x => x.id !== a.id).slice(0, 4).map(m => (
go("profile", m.id)} style={{ display: "flex", gap: 10, alignItems: "center", padding: "10px 4px", borderRadius: 10, cursor: "pointer" }}>
{m.nick} · {m.name}
{m.role}
))}
)}
); } function CTA({ icon, label, primary, onClick }) { return ( ); } function InfoRow({ icon, label, value, private: priv, last }) { const [reveal, setReveal] = React.useState(!priv); return (
{label}
{value}
{priv && ( )}
); } // ──────────────────────────────────────────────────────────── // 4) Gallery // ──────────────────────────────────────────────────────────── function GalleryScreen({ go, sepia }) { const d = D(); const [year, setYear] = React.useState("all"); const [open, setOpen] = React.useState(null); const years = ["all", ...new Set(d.gallery.map(g => g.year))].sort((a, b) => a === "all" ? -1 : b === "all" ? 1 : a - b); const filtered = year === "all" ? d.gallery : d.gallery.filter(g => g.year === year); const colA = filtered.filter((_, i) => i % 2 === 0); const colB = filtered.filter((_, i) => i % 2 === 1); return (

คลังภาพ

Memory
{years.map(y => ( setYear(y)} size="sm"> {y === "all" ? "ทั้งหมด" : `พ.ศ. ${y}`} ))}
{[colA, colB].map((col, ci) => (
{col.map(g => ( ))}
))}
{open && (
setOpen(null)} style={{ position: "absolute", inset: 0, background: "rgba(20,15,10,0.88)", zIndex: 90, display: "flex", flexDirection: "column", justifyContent: "center", padding: 24, }}>
{open.caption}
พ.ศ. {open.year} · #{open.id.toUpperCase()}
)}
); } // ──────────────────────────────────────────────────────────── // 5) Me / Profile settings // ──────────────────────────────────────────────────────────── function MeScreen({ go, sepia, palette, onPalette, onSepia }) { const me = RBAC_ME(); const fallback = { phone: false, email: true, address: false }; const [priv, setPriv] = React.useState(me.privacy || fallback); const handleLogout = () => { RBAC_LOGOUT(); go("splash"); }; return (

โปรไฟล์ของฉัน

{me.name}
{me.role} · {me.company}
{/* Help note */} {me.help?.length > 0 && (
"{me.helpNote || "—"}"
{me.help.map(h => ( {cat(h)?.th} ))}
)} {/* Privacy toggles */}
{[ ["phone", "เบอร์โทรศัพท์", me.phone || "081-xxx-xxxx"], ["email", "อีเมล", me.email || `${(me.nick||"x").toLowerCase()}@rbac.local`], ["address", "จังหวัด", me.province], ].map(([k, l, v], i, arr) => (
{l}
{priv[k] ? "เห็นเฉพาะเพื่อนที่ Verify แล้ว" : v}
setPriv(p => ({ ...p, [k]: !p[k] }))}/>
))}
{/* Theme */}
{[["#1f3a8a", "น้ำเงินทอง"], ["#b94a2c", "ดินเผา"], ["#2f5d3a", "เขียวงาช้าง"]].map(([p, l]) => ( ))}
ฟิลเตอร์เซเปีย onSepia(v => !v)}/>
RBAC ALUMNI · CL.46 · v1.1
); } function Toggle({ on, onChange }) { return ( ); } // ──────────────────────────────────────────────────────────── // 6) Compose // ──────────────────────────────────────────────────────────── function ComposeScreen({ go }) { const [title, setTitle] = React.useState(""); const [body, setBody] = React.useState(""); const [cats, setCats] = React.useState([]); const [sending, setSending] = React.useState(false); const [sent, setSent] = React.useState(false); const toggle = (id) => setCats(c => c.includes(id) ? c.filter(x => x !== id) : [...c, id]); const handleSend = async () => { if (!title || !body || sending) return; setSending(true); const result = await RBAC_API.postBroadcast({ title, body, kind: "help" }); setSending(false); if (result) { setSent(true); setTimeout(() => go("home"), 1400); } else { alert("ส่งไม่สำเร็จ — กรุณาลองใหม่"); } }; if (sent) { return (
ส่งแล้ว!
กำลังกลับสู่หน้าหลัก…
); } return (

ขอความช่วยเหลือ

setTitle(e.target.value)} placeholder="เช่น ตามหาทนายที่เชี่ยวชาญสัญญา" style={{ display: "block", width: "100%", marginTop: 8, padding: "14px 16px", borderRadius: 12, border: "1px solid var(--border)", background: "var(--paper)", fontFamily: "'Newsreader', serif", fontSize: 18, color: "var(--ink)", outline: "none", }} />