[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68b7c0131930819186558f31f2920de4","versionInt","title","Aplikasi Tempahan Bilik Khas — Smkl (v2 - Bersih)","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\n\n// ================== CONSTANTS ==================\nconst ROOMS = [\"Bilik Tayang\", \"Ruang Bacaan\"];\nconst SCHOOL_NAME = \"SMK Laksamana\";\n\nconst DEFAULT_SETTINGS = {\n whatsappList: \"60197276989\",\n notifyOnSubmit: true,\n autoOpenWhatsApp: false,\n opStart: \"07:30\",\n opEnd: \"17:00\",\n minSlotMinutes: 30,\n enableSheets: false,\n sheetsWebhookUrl: \"\",\n logoUrl: \"\",\n themeColor: \"#0ea5e9\",\n adminPIN: \"1234\"\n};\n\nconst ROOM_COLORS: Record = {\n \"Bilik Tayang\": \"bg-green-100 text-green-800 border-green-200\",\n \"Ruang Bacaan\": \"bg-blue-100 text-blue-800 border-blue-200\"\n};\n\n// ================== HELPERS ==================\nfunction todayLocal() {\n const now = new Date();\n const tz = now.getTimezoneOffset();\n const local = new Date(now.getTime() - tz * 60000);\n return local.toISOString().slice(0, 10);\n}\nfunction addDays(dateStr: string, n: number) {\n const d = new Date(dateStr + \"T00:00:00\");\n d.setDate(d.getDate() + n);\n return d.toISOString().slice(0, 10);\n}\nfunction startOfWeek(dateStr: string) {\n const d = new Date(dateStr + \"T00:00:00\");\n const day = d.getDay();\n const diff = (day === 0 ? -6 : 1) - day; // Monday start\n d.setDate(d.getDate() + diff);\n return d.toISOString().slice(0, 10);\n}\nfunction timeToMinutes(t: string) {\n const [h, m] = (t || \"00:00\").split(\":\").map(Number);\n return h * 60 + (m || 0);\n}\nfunction ensureUUID() { return \"id-\" + Math.random().toString(36).slice(2, 9); }\nfunction normalizeMsisdn(input: string) {\n const digits = String(input || \"\").replace(/\\D/g, \"\");\n if (!digits) return \"\";\n if (digits.startsWith(\"60\")) return digits;\n if (digits.startsWith(\"0\")) return \"60\" + digits.slice(1);\n if (digits.startsWith(\"6\")) return digits;\n return digits;\n}\nfunction parseWhatsappList(raw: string) {\n if (!raw) return [] as string[];\n return raw.split(/[\\,\\n\\s]+/).map(x => normalizeMsisdn(x)).filter(x => x.length >= 9).filter((v,i,a)=>a.indexOf(v)===i);\n}\nfunction buildWaText(entry: any) {\n const lines = [\n \"Tempahan Bilik Khas \" + SCHOOL_NAME,\n \"Bilik: \" + entry.room,\n \"Tarikh: \" + formatDateHB(entry.date),\n \"Masa: \" + entry.start + \" - \" + entry.end,\n \"Guru: \" + entry.person,\n \"Kelas: \" + (entry.group || \"-\"),\n \"Tujuan: \" + entry.purpose,\n \"Telefon: \" + (entry.phone || \"-\")\n ];\n return lines.join(\"\\n\");\n}\nfunction saveBookings(list: any[]) { try { localStorage.setItem(\"smkl_rooms\", JSON.stringify(list)); } catch(_){} }\nfunction loadBookings() { try { const raw = localStorage.getItem(\"smkl_rooms\"); return raw? JSON.parse(raw): []; } catch(_) { return []; } }\nfunction saveSettings(s: any) { try { localStorage.setItem(\"smkl_settings\", JSON.stringify(s)); } catch(_){} }\nfunction loadSettings() { try { const raw = localStorage.getItem(\"smkl_settings\"); return raw? { ...DEFAULT_SETTINGS, ...JSON.parse(raw)}: { ...DEFAULT_SETTINGS }; } catch(_) { return { ...DEFAULT_SETTINGS }; } }\nfunction overlaps(a: any, b: any) {\n if (a.date !== b.date) return false; if (a.room !== b.room) return false;\n const as = timeToMinutes(a.start), ae = timeToMinutes(a.end);\n const bs = timeToMinutes(b.start), be = timeToMinutes(b.end);\n return as < be && ae > bs;\n}\n// Format tarikh: HARI diikuti BULAN (cth: 31 Ogos 2025)\nfunction formatDateHB(dateStr: string){\n try {\n const d = new Date((dateStr||'') + \"T00:00:00\");\n return d.toLocaleDateString('ms-MY', { day:'2-digit', month:'long', year:'numeric' });\n } catch(_){\n const [y,m,d] = String(dateStr||'').split('-');\n const months = ['Januari','Februari','Mac','April','Mei','Jun','Julai','Ogos','September','Oktober','November','Disember'];\n const mi = Math.max(1, Math.min(12, parseInt(m||'1',10))) - 1;\n return `${d} ${months[mi]} ${y}`;\n }\n}\nfunction exportCSV(rows: any[], filename = 'tempahan.csv') {\n const headers = ['ID','Tarikh','Mula','Tamat','Bilik','Guru','Kelas','Tujuan','Telefon'];\n const csv = [headers.join(',')]\n .concat(rows.map(r => [r.id, r.date, r.start, r.end, r.room, quote(r.person), quote(r.group), quote(r.purpose), quote(r.phone)].join(',')))\n .join('\\n');\n const blob = new Blob([String.fromCharCode(0xfeff) + csv], { type: 'text/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove();\n setTimeout(() => URL.revokeObjectURL(url), 2000);\n function quote(s:any){ if (s==null) return ''; const t=String(s).replace(/\"/g,'\"\"'); return /[\",\\n]/.test(t)?`\"${t}\"`:t; }\n}\nfunction printDaily(date: string, bookings: any[]){\n const rows = bookings.filter(b=>b.date===date).sort((x,y)=>timeToMinutes(x.start)-timeToMinutes(y.start));\n const html = `Jadual Harian ${formatDateHB(date)}\n \n

${SCHOOL_NAME} - Jadual Harian (${formatDateHB(date)})

\n \n ${rows.map(r=>``).join('')}

Mula	Tamat	Bilik	Guru	Kelas	Tujuan
${r.start}	${r.end}	${r.room}	${safe(r.person)}	${safe(r.group)}	${safe(r.purpose)}

\n `;\n const w = window.open('', '_blank'); if (!w) return alert('Popup disekat. Benarkan pop-up untuk mencetak.'); w.document.write(html); w.document.close();\n function safe(s:any){return (s||'').replace(//g,'>');}\n}\n\nfunction canAutoOpen(){\n try { return window.top === window.self && !/chatgpt\\.com|openai\\.com/i.test(location.hostname); }\n catch { return false; }\n}\n\n// ================== APP ==================\nexport default function App(){\n const [bookings, setBookings] = useState([]);\n const [form, setForm] = useState({ room: ROOMS[0], date: todayLocal(), start: \"08:00\", end: \"10:00\", person: \"\", group: \"\", purpose: \"\", phone: \"\" });\n const [settings, setSettings] = useState(DEFAULT_SETTINGS);\n const [waTargets, setWaTargets] = useState([]);\n const [waText, setWaText] = useState(\"\");\n const [lastInfo, setLastInfo] = useState(null);\n const [submitMsg, setSubmitMsg] = useState(\"\");\n const [waQuickLink, setWaQuickLink] = useState(\"\");\n const [isAdmin, setIsAdmin] = useState(false);\n const [showPinModal, setShowPinModal] = useState(false);\n const [pinInput, setPinInput] = useState(\"\");\n const [weekStart, setWeekStart] = useState(startOfWeek(todayLocal()));\n const weekDates = useMemo(()=>[0,1,2,3,4,5,6].map(i=>addDays(weekStart,i)),[weekStart]);\n const [printDate, setPrintDate] = useState(todayLocal());\n\n // Kira pertindihan untuk butang merah/disabled\n const clashCount = useMemo(() => {\n const e = { room: form.room, date: form.date, start: form.start, end: form.end };\n return bookings.filter((b:any) => overlaps(e, b)).length;\n }, [bookings, form.room, form.date, form.start, form.end]);\n\n useEffect(()=>{\n setBookings(loadBookings());\n setSettings(loadSettings());\n if (localStorage.getItem('smkl_admin')==='1') setIsAdmin(true);\n },[]);\n\n function validateOperatingHours(entry:any){\n const s = timeToMinutes(entry.start), e = timeToMinutes(entry.end);\n const opS = timeToMinutes(settings.opStart||DEFAULT_SETTINGS.opStart);\n const opE = timeToMinutes(settings.opEnd||DEFAULT_SETTINGS.opEnd);\n if (s < opS || e > opE) { alert(\"Masa tempahan mesti dalam waktu operasi \" + settings.opStart + \" - \" + settings.opEnd + \".\"); return false; }\n const dur = e - s; const minDur = Math.max(5, Number(settings.minSlotMinutes||DEFAULT_SETTINGS.minSlotMinutes));\n if (dur < minDur) { alert(\"Tempoh minimum slot ialah \" + minDur + \" minit.\"); return false; }\n return true;\n }\n\n function addBooking(ev: React.FormEvent){\n ev.preventDefault();\n const entry = { ...form, id: ensureUUID(), createdAt: new Date().toISOString() };\n if (!entry.person || !entry.purpose) { alert(\"Sila isi Nama Guru/Pegawai dan Tujuan.\"); return; }\n // Validasi nombor telefon (nombor sahaja, minimum 9 digit)\n const phoneDigits = String(entry.phone || \"\").replace(/[^0-9]/g, \"\");\n if (!phoneDigits || phoneDigits.length < 9) { alert(\"Sila isi No. Telefon yang sah (nombor sahaja, minimum 9 digit).\"); return; }\n entry.phone = phoneDigits;\n if (timeToMinutes(entry.end) <= timeToMinutes(entry.start)) { alert(\"Masa tamat mesti selepas masa mula.\"); return; }\n if (!validateOperatingHours(entry)) return;\n\n const clashes = bookings.filter(b=>overlaps(entry,b));\n if (clashes.length>0){\n const msg = \"Slot bertindih dengan \" + clashes.length + \" tempahan:\\n\" + clashes.map((c:any)=>(\"- \" + c.date + \" \" + c.start + \"-\" + c.end + \" - \" + c.room + \" - \" + c.person)).join('\\n');\n alert(msg); return;\n }\n\n const list = [...bookings, entry]; setBookings(list); saveBookings(list);\n\n const textEnc = encodeURIComponent(buildWaText(entry));\n setWaText(buildWaText(entry));\n const nums = parseWhatsappList(settings.whatsappList);\n const targets = nums.map(n=>({ id: n, app: `whatsapp://send?phone=${n}&text=${textEnc}`, web: `https://wa.me/${n}?text=${textEnc}` }));\n setLastInfo({ room: entry.room, date: entry.date, start: entry.start, end: entry.end });\n setWaTargets(targets);\n setWaQuickLink(nums[0] ? `whatsapp://send?phone=${nums[0]}&text=${textEnc}` : \"\");\n\n if (settings.autoOpenWhatsApp && targets.length>0 && canAutoOpen()){\n try { window.location.href = targets[0].app; } catch(_){}\n }\n\n setSubmitMsg(\"Terima kasih! Tempahan untuk \" + entry.room + \" pada \" + formatDateHB(entry.date) + \" \" + entry.start + \"-\" + entry.end + \" telah dihantar.\");\n setForm({ room: ROOMS[0], date: todayLocal(), start: \"08:00\", end: \"10:00\", person: \"\", group: \"\", purpose: \"\", phone: \"\" });\n }\n\n function handleSaveSettings(){\n const cleaned = { ...settings, whatsappList: parseWhatsappList(settings.whatsappList).join(\",\"), minSlotMinutes: Math.max(5, Number(settings.minSlotMinutes||DEFAULT_SETTINGS.minSlotMinutes)) };\n setSettings(cleaned); saveSettings(cleaned); alert(\"Tetapan disimpan.\");\n }\n\n function openAdminLogin(){ setPinInput(\"\"); setShowPinModal(true); }\n function submitAdminLogin(){\n const expected = (settings.adminPIN||DEFAULT_SETTINGS.adminPIN).trim();\n if (pinInput.trim() === expected){ setIsAdmin(true); localStorage.setItem('smkl_admin','1'); setShowPinModal(false); }\n else alert('PIN tidak sah.');\n }\n function adminLogout(){ setIsAdmin(false); localStorage.removeItem('smkl_admin'); }\n\n return (\n

\n {settings.logoUrl ? ( $\"Logo\"$ ) : null}\n

Tempahan Bilik Khas - {SCHOOL_NAME}

Bilik Tayang - Ruang Bacaan

\n\n {submitMsg ? (

{submitMsg}

) : null}\n\n {waQuickLink ? (\n

\n WhatsApp mungkin disekat oleh pelayar.\n Buka Aplikasi WhatsApp\n \n

\n ) : null}\n\n

\n Bilik\n \n

\n Tarikh\n setForm({ ...form, date: e.target.value })} />\n

\n Masa Mula\n setForm({ ...form, start: e.target.value })} />\n

\n Masa Tamat\n setForm({ ...form, end: e.target.value })} />\n

\n Nama Guru/Pegawai\n setForm({ ...form, person: e.target.value })} required />\n

\n Kelas/Tingkatan\n setForm({ ...form, group: e.target.value })} />\n

\n Tujuan\n \n

\n No. Telefon\n { const digits = e.target.value.replace(/[^0-9]/g,''); setForm({ ...form, phone: digits }); }}\n required\n placeholder=\"cth 0123456789\"\n title=\"Masukkan nombor sahaja (0-9)\"\n />\n

* Waktu operasi: {settings.opStart} - {settings.opEnd}. Minimum {settings.minSlotMinutes} minit setiap tempahan.

\n {clashCount>0 ? (\n

\n Slot bertindih dengan {clashCount} tempahan. Sila pilih masa lain.\n

\n ) : null}\n

\n \n \n

\n\n {isAdmin && waTargets.length>0 ? (\n

Notifikasi Admin

\n {lastInfo ? (

Tempahan: {lastInfo.room} - {formatDateHB(lastInfo.date)} {lastInfo.start}-{lastInfo.end}

) : null}\n

\n {waTargets.map((t,i)=> (\n Buka WhatsApp Admin {i+1}\n ))}\n

\n ) : null}\n\n {isAdmin ? (\n

Kalendar Mingguan

\n \n \n \n

\n \n \n \n {weekDates.map(d => ())}\n \n \n \n \n {weekDates.map(d => (\n \n ))}\n \n \n

{new Date(d).toLocaleDateString('ms-MY', { weekday:'short', day:'2-digit', month:'short' })}
\n \n {bookings.filter(b=>b.date===d).sort((a:any,b:any)=>timeToMinutes(a.start)-timeToMinutes(b.start)).map(b => (\n \n {b.start}-{b.end} - {b.room} \n {b.person}{b.group ? (' - ' + b.group) : ''} \n {b.purpose} \n \n ))}\n {bookings.filter(b=>b.date===d).length===0 ? ( (Tiada) ) : null}\n \n

\n ) : null}\n\n {isAdmin ? (\n

Tetapan

\n Nombor WhatsApp Admin (boleh banyak)\n \n

Pisahkan dengan koma/ruang/baris baharu. Contoh: 60197276989, 60123456789

\n Pilihan Notifikasi\n setSettings({ ...settings, notifyOnSubmit: e.target.checked })} /> Papar seksyen notifikasi selepas tempahan (ADMIN)\n setSettings({ ...settings, autoOpenWhatsApp: e.target.checked })} /> Auto-buka WhatsApp admin pertama\n

\n\n

\n Waktu Operasi - Mula\n setSettings({ ...settings, opStart: e.target.value })} />\n

\n Waktu Operasi - Tamat\n setSettings({ ...settings, opEnd: e.target.value })} />\n

\n Tempoh Minimum Slot (minit)\n setSettings({ ...settings, minSlotMinutes: e.target.value })} />\n

\n\n

\n Logo Sekolah (URL)\n setSettings({ ...settings, logoUrl: e.target.value })} placeholder=\"https://.../logo.png\" />\n

\n Warna Tema (hex)\n setSettings({ ...settings, themeColor: e.target.value })} placeholder=\"#0ea5e9\" />\n

\n PIN Admin\n setSettings({ ...settings, adminPIN: e.target.value })} placeholder=\"cth 1234\" />\n

Tukar PIN dan tekan \"Simpan Tetapan\". Jangan kongsikan pada penempah.

\n\n

\n \n \n \n

\n ) : null}\n\n {!isAdmin ? (\n

Paparan ringkas untuk penempah.

\n \n

\n ) : null}\n\n {showPinModal ? (\n

Log Masuk Admin

Masukkan PIN Admin untuk melihat panel pentadbiran.

\n setPinInput(e.target.value)} />\n

\n \n \n

PIN lalai: 1234 (tukar dalam Tetapan selepas log masuk)

\n ) : null}\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","15033746101882409638","traceTime",1781431855908]