import React, { useState } from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" const c = { page: "min-h-screen bg-[#f5f3ec] p-4 font-['Space_Grotesk',sans-serif]", header: "max-w-3xl mx-auto mb-4 bg-white border-[3px] border-[#1a1a2e] rounded shadow-[4px_4px_0_#1a1a2e] overflow-hidden", bar: "flex h-[6px] border-b-[3px] border-[#1a1a2e]", title: "text-2xl font-bold uppercase tracking-tight text-[#1a1a2e]", sub: "text-[0.65rem] uppercase tracking-[0.15em] text-[#6b6b80] font-mono mt-1", feature: "max-w-3xl mx-auto mb-4 p-4 bg-white border-[3px] border-[#1a1a2e] rounded shadow-[4px_4px_0_#1a1a2e]", featureTitle: "text-[0.7rem] font-bold uppercase tracking-[0.15em] mb-3 text-[#1a1a2e]", red: "bg-[#e63946]", yellow: "bg-[#f4c430]", green: "bg-[#2a9d5f]", blue: "bg-[#2563c9]", muted: "text-[#6b6b80]", btn: "px-3 py-2 text-xs font-bold uppercase tracking-wider border-[3px] border-[#1a1a2e] rounded shadow-[3px_3px_0_#1a1a2e] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all", btnRed: "bg-[#e63946] text-white", btnYellow: "bg-[#f4c430] text-[#1a1a2e]", btnGhost: "bg-white text-[#1a1a2e]", input: "w-full px-3 py-2 text-sm border-[3px] border-[#1a1a2e] rounded bg-white focus:outline-none", }; const DB = "sunday-school-roster"; function sundayKey(d) { const x = new Date(d); const day = x.getDay(); x.setDate(x.getDate() - day); return x.toISOString().slice(0, 10); } function Classes({ selectedId, setSelectedId }) { const { useLiveQuery, useDocument, database } = useFireproof(DB); const { docs: classes } = useLiveQuery("type", { key: "class" }); const { doc, merge, submit } = useDocument({ type: "class", name: "", grade: "", teacher: "", room: "" }); const [loading, setLoading] = useState(false); const onSubmit = (e) => { e.preventDefault(); if (doc.name.trim()) submit(); }; const suggest = async () => { setLoading(true); try { const r = await callAI("Suggest one Sunday school class with fields: name, grade (like '1st' or 'K'), teacher (first+last name), room (like 'A2').", { schema: { properties: { name:{type:"string"}, grade:{type:"string"}, teacher:{type:"string"}, room:{type:"string"} } } }); const j = JSON.parse(r); merge(j); } finally { setLoading(false); } }; const accents = [c.red, c.yellow, c.green, c.blue]; return (

Classes

{classes.map((k, i) => { const active = selectedId === k._id; const onDark = i%4===0 || i%4===3; return ( ); })} {classes.length === 0 &&

No classes yet. Add one below.

}

); } function Lesson({ selectedId, weekKey, setWeekKey }) { const { useLiveQuery, database } = useFireproof(DB); const { docs } = useLiveQuery("type", { key: "lesson" }); const existing = docs.find(d => d.classId === selectedId && d.week === weekKey); const [title, setTitle] = useState(""); const [saving, setSaving] = useState(false); React.useEffect(() => { setTitle(existing?.title || ""); }, [existing?._id, selectedId, weekKey]); const save = async () => { if (!selectedId) return; setSaving(true); try { await database.put({ ...(existing||{}), type:"lesson", classId:selectedId, week:weekKey, title }); } finally { setSaving(false); } }; const shiftWeek = (delta) => { const d = new Date(weekKey); d.setDate(d.getDate() + delta*7); setWeekKey(sundayKey(d)); }; const suggest = async () => { setSaving(true); try { const r = await callAI("Suggest one age-appropriate Sunday school lesson title (3-8 words).", { schema: { properties: { title: { type: "string" } } } }); setTitle(JSON.parse(r).title); } finally { setSaving(false); } }; return (

This Week's Lesson

{weekKey}

{selectedId ? (

setTitle(e.target.value)}/>

) :

Select a class above.

}

); } function Attendance({ selectedId, weekKey }) { const { useLiveQuery, useDocument, database } = useFireproof(DB); const { docs: students } = useLiveQuery("type", { key: "student" }); const { docs: attendance } = useLiveQuery("type", { key: "attendance" }); const { doc, merge, submit } = useDocument({ type:"student", name:"", classId: selectedId || "" }); const [loading, setLoading] = useState(false); React.useEffect(()=>{ merge({ classId: selectedId || "" }); }, [selectedId]); const roster = students.filter(s => s.classId === selectedId); const markMap = {}; attendance.forEach(a => { if (a.classId===selectedId && a.week===weekKey) markMap[a.studentId] = a; }); const toggle = async (s) => { const existing = markMap[s._id]; if (existing) await database.put({ ...existing, present: !existing.present }); else await database.put({ type:"attendance", classId:selectedId, week:weekKey, studentId:s._id, present:true }); }; const onSubmit = (e) => { e.preventDefault(); if (doc.name.trim() && selectedId) submit(); }; const suggest = async () => { setLoading(true); try { const r = await callAI("Suggest one kid first+last name for a class roster.", { schema:{ properties:{ name:{type:"string"} } } }); merge({ name: JSON.parse(r).name }); } finally { setLoading(false); } }; const presentCount = roster.filter(s => markMap[s._id]?.present).length; if (!selectedId) return

Attendance

Select a class to see its roster.

; return (

Attendance

{presentCount}/{roster.length} here

{roster.map(s => { const present = markMap[s._id]?.present; return ( ); })} {roster.length === 0 &&

No students yet. Add one below.

}

); } export default function App() { const [selectedId, setSelectedId] = useState(null); const [weekKey, setWeekKey] = useState(sundayKey(new Date())); return (

); }