// screens-homework.jsx — Teacher homework module // Hub (active · to grade · drafts · past) + create/edit + submissions list + grade view + analytics. // Real-world flows: publish, set due/late policy, attach files, send reminders, return for resubmission, bulk grade. const { useState: useStateH, useMemo: useMemoH, useEffect: useEffectH } = React; // ───────────────────────────────────────────────────────────── // TEACHER CONTEXT — drives "your classes" filter // ───────────────────────────────────────────────────────────── const TEACHER_HW_CONTEXT = { name: 'Sneha Reddy', short: 'Mrs. Reddy', classes: [ { id: '8B', label: 'Class 8-B', students: 32 }, { id: '9A', label: 'Class 9-A', students: 28 }, { id: '10C', label: 'Class 10-C', students: 30 }, ], }; const SUBJECT_META = { Mathematics: { ic: 'target', clr: 'var(--p600)', bg: 'var(--p50)' }, Science: { ic: 'flask', clr: 'var(--success)',bg: 'var(--success-50)' }, English: { ic: 'book-open', clr: '#1E40AF', bg: 'var(--info-50)' }, Hindi: { ic: 'book-open', clr: 'var(--c600)', bg: 'var(--c50)' }, 'Social Studies': { ic: 'globe', clr: '#92400E', bg: '#FEF3C7' }, History: { ic: 'history', clr: '#92400E', bg: '#FEF3C7' }, Civics: { ic: 'megaphone', clr: '#7C3AED', bg: '#F3E8FF' }, }; function subMeta(s) { return SUBJECT_META[s] || { ic: 'document', clr: 'var(--n700)', bg: 'var(--n50)' }; } // ───────────────────────────────────────────────────────────── // HOMEWORK DATA — covers all real-world states // ───────────────────────────────────────────────────────────── // state: 'draft' | 'scheduled' | 'active' | 'closed' | 'past' // Submission states per student: // 'pending' | 'submitted' | 'late' | 'graded' | 'returned' | 'absent' function buildHwSubmissions(hwId, classId, total, mix) { const cls = TEACHER_HW_CONTEXT.classes.find(c => c.id === classId); const N = cls ? cls.students : 32; const names = ['Aarav', 'Diya', 'Kavya', 'Vihaan', 'Ananya', 'Reyansh', 'Saanvi', 'Arjun', 'Ishika', 'Vivaan', 'Myra', 'Aditya', 'Aanya', 'Krishna', 'Tara', 'Rohan', 'Pari', 'Atharv', 'Nyra', 'Kabir', 'Zara', 'Veer', 'Riya', 'Ayaan', 'Anika', 'Dhruv', 'Sara', 'Ahaan', 'Mira', 'Yash', 'Inaya', 'Kian']; const surnames = ['Reddy', 'Sharma', 'Mehta', 'Iyer', 'Nair', 'Kapoor', 'Joshi', 'Singh', 'Patel', 'Khan']; const list = []; for (let i = 0; i < N; i++) { const seed = Math.abs(Math.sin((hwId.charCodeAt(0) || 1) * (i + 1) * 13)) ; const r = (seed * 1000) % 1; const name = names[i % names.length] + ' ' + surnames[(i * 3) % surnames.length].charAt(0) + '.'; let st; if (mix === 'mostly_done') st = r < 0.6 ? 'graded' : r < 0.8 ? 'submitted' : r < 0.92 ? 'late' : 'pending'; else if (mix === 'in_progress') st = r < 0.42 ? 'submitted' : r < 0.55 ? 'late' : r < 0.62 ? 'returned' : r < 0.96 ? 'pending' : 'absent'; else if (mix === 'all_done') st = r < 0.85 ? 'graded' : 'submitted'; else st = r < 0.45 ? 'submitted' : r < 0.60 ? 'late' : r < 0.75 ? 'graded' : 'pending'; const score = (st === 'graded') ? Math.round(50 + r * 49) : null; const submittedH = (st === 'submitted' || st === 'late' || st === 'graded' || st === 'returned') ? Math.round(2 + r * 70) : null; const files = (st === 'submitted' || st === 'late' || st === 'graded' || st === 'returned') ? Math.max(1, Math.round(r * 3)) : 0; list.push({ id: `s${i}`, name, state: st, score, submittedHoursAgo: submittedH, files }); } return list; } const HW_RAW = [ // Active — currently open, kids submitting { id: 'h1', subject: 'Mathematics', title: 'Linear equations · Ex 7.3 (Q1–Q12)', classId: '8B', state: 'active', publishedOn: '2026-05-05', dueOn: '2026-05-09', dueLabel: 'Tomorrow 11:59 PM', points: 20, mix: 'in_progress', description: 'Solve all 12 problems. Show working in your notebook, then upload a clear photo of each page. Late submissions accepted up to 24 hours with –20%.', attachments: [{ name: 'Ex-7-3-handout.pdf', size: '480 KB', kind: 'PDF' }], rubric: null, allowLate: true, latePolicy: '24h · –20%', resubmit: false, instructions: ['Show working clearly', 'Use blue or black pen', 'Photograph each page', 'Upload as one combined PDF (preferred)'], }, { id: 'h2', subject: 'Science', title: 'Lab report · Photosynthesis experiment', classId: '8B', state: 'active', publishedOn: '2026-05-04', dueOn: '2026-05-10', dueLabel: 'Sat · 10 May', points: 30, mix: 'in_progress', description: 'Write a 2-page lab report on the leaf disc photosynthesis experiment we did on Tuesday. Use the IB-style format: Aim, Hypothesis, Method, Observations, Conclusion.', attachments: [ { name: 'lab-report-template.docx', size: '24 KB', kind: 'DOCX' }, { name: 'rubric.pdf', size: '88 KB', kind: 'PDF' }, ], rubric: [ { name: 'Hypothesis quality', weight: 5 }, { name: 'Method clarity', weight: 8 }, { name: 'Data & graphs', weight: 8 }, { name: 'Conclusion & evaluation', weight: 9 }, ], allowLate: true, latePolicy: '48h · –10%/day', resubmit: true, instructions: ['Min 2 pages', 'Include at least 1 data table & 1 graph', 'Cite sources', 'Run a Grammarly/spell check'], }, { id: 'h3', subject: 'English', title: 'Essay · "A hero in my life" (500 words)', classId: '9A', state: 'active', publishedOn: '2026-05-03', dueOn: '2026-05-12', dueLabel: 'Mon · 12 May', points: 25, mix: 'fresh', description: 'Write a 500-word personal essay on a real-life hero — anyone outside film and sport. Focus on the qualities that make them heroic, with at least two specific examples.', attachments: [{ name: 'essay-rubric.pdf', size: '120 KB', kind: 'PDF' }], rubric: [ { name: 'Thesis & focus', weight: 6 }, { name: 'Examples & evidence', weight: 8 }, { name: 'Structure & flow', weight: 6 }, { name: 'Language & mechanics', weight: 5 }, ], allowLate: true, latePolicy: '48h · –15%', resubmit: true, instructions: ['Word count: 450–550', 'Use first person', 'No filmstars/cricketers', 'Submit as DOC or PDF'], }, // To grade — closed, awaiting grading { id: 'h4', subject: 'Mathematics', title: 'Algebra worksheet · Practice set 7.2', classId: '8B', state: 'closed', publishedOn: '2026-04-28', dueOn: '2026-05-04', dueLabel: 'Closed Mon', points: 15, mix: 'mostly_done', description: 'Complete worksheet 7.2 — focus on word problems. Show all working clearly.', attachments: [{ name: 'worksheet-7-2.pdf', size: '210 KB', kind: 'PDF' }], rubric: null, allowLate: false, latePolicy: 'Not allowed', resubmit: false, instructions: ['Show every step', 'Box your final answer', 'Use ruler for tables'], }, { id: 'h5', subject: 'Social Studies', title: 'Map work · Indian rivers', classId: '9A', state: 'closed', publishedOn: '2026-04-30', dueOn: '2026-05-06', dueLabel: 'Closed Wed', points: 10, mix: 'mostly_done', description: 'Mark and label all major Indian rivers on the outline map. Use blue for rivers, green for tributaries.', attachments: [{ name: 'india-outline.pdf', size: '64 KB', kind: 'PDF' }], rubric: null, allowLate: false, latePolicy: 'Not allowed', resubmit: false, instructions: ['Use sketchpens, not crayon', 'Label clearly', 'Submit physical sheet'], }, // Drafts — being prepared { id: 'h6', subject: 'Mathematics', title: 'Trigonometry · Ratios & angles practice', classId: '10C', state: 'draft', publishedOn: null, dueOn: null, dueLabel: 'Not set', points: 25, mix: 'fresh', description: 'Practice problems on basic trig ratios.', attachments: [], rubric: null, allowLate: true, latePolicy: '24h · –20%', resubmit: false, instructions: [], }, { id: 'h7', subject: 'Science', title: 'Chapter 6 reading questions', classId: '8B', state: 'draft', publishedOn: null, dueOn: null, dueLabel: 'Not set', points: 0, mix: 'fresh', description: '', attachments: [], rubric: null, allowLate: true, latePolicy: '24h · –20%', resubmit: false, instructions: [], }, // Scheduled — set, not yet released { id: 'h8', subject: 'English', title: 'Comprehension · Chapter 4', classId: '9A', state: 'scheduled', publishedOn: '2026-05-12', dueOn: '2026-05-15', dueLabel: 'Releases Mon · 12 May', points: 15, mix: 'fresh', description: 'Read Chapter 4 of the prose textbook and answer questions A–F.', attachments: [], rubric: null, allowLate: true, latePolicy: '24h · –10%', resubmit: false, instructions: [], }, // Past — fully graded and returned { id: 'h9', subject: 'Science', title: 'Chapter 5 worksheet · States of matter', classId: '8B', state: 'past', publishedOn: '2026-04-15', dueOn: '2026-04-22', dueLabel: 'Returned 25 Apr', points: 20, mix: 'all_done', description: 'Worksheet on states of matter and changes of state.', attachments: [{ name: 'states-of-matter.pdf', size: '180 KB', kind: 'PDF' }], rubric: null, allowLate: false, latePolicy: 'Not allowed', resubmit: false, instructions: [], avgPct: 78, }, { id: 'h10', subject: 'English', title: 'Reading comprehension · Chapter 3', classId: '9A', state: 'past', publishedOn: '2026-04-08', dueOn: '2026-04-15', dueLabel: 'Returned 18 Apr', points: 15, mix: 'all_done', description: 'Reading comprehension questions on the assigned passage.', attachments: [], rubric: null, allowLate: true, latePolicy: '24h · –10%', resubmit: false, instructions: [], avgPct: 84, }, ]; // Augment with submissions const HW_ALL = HW_RAW.map(h => { const subs = buildHwSubmissions(h.id, h.classId, null, h.mix); const submitted = subs.filter(s => s.state !== 'pending' && s.state !== 'absent').length; const graded = subs.filter(s => s.state === 'graded').length; const pending = subs.filter(s => s.state === 'pending').length; const late = subs.filter(s => s.state === 'late').length; const toGrade = subs.filter(s => s.state === 'submitted' || s.state === 'late').length; return { ...h, _subs: subs, _stats: { total: subs.length, submitted, graded, pending, late, toGrade } }; }); // ───────────────────────────────────────────────────────────── // helpers // ───────────────────────────────────────────────────────────── function StateChipHw({ state }) { const cfg = { draft: { lab: 'DRAFT', bg: 'var(--n100)', clr: 'var(--n700)' }, scheduled: { lab: 'SCHEDULED', bg: 'var(--info-50)', clr: '#1E40AF' }, active: { lab: 'ACTIVE', bg: 'var(--success-50)', clr: 'var(--success)' }, closed: { lab: 'TO GRADE', bg: '#FEF3C7', clr: 'var(--warning)' }, past: { lab: 'RETURNED', bg: 'var(--p50)', clr: 'var(--p600)' }, }[state] || { lab: state, bg: 'var(--n100)', clr: 'var(--n700)' }; return ( {cfg.lab} ); } function SubStateChip({ state }) { const cfg = { pending: { lab: 'Pending', bg: 'var(--n100)', clr: 'var(--n600)' }, submitted: { lab: 'Submitted', bg: 'var(--success-50)', clr: 'var(--success)' }, late: { lab: 'Late', bg: '#FEF3C7', clr: 'var(--warning)' }, graded: { lab: 'Graded', bg: 'var(--p50)', clr: 'var(--p600)' }, returned: { lab: 'Returned', bg: 'var(--info-50)', clr: '#1E40AF' }, absent: { lab: 'Absent', bg: 'var(--c50)', clr: 'var(--c600)' }, }[state] || { lab: state, bg: 'var(--n100)', clr: 'var(--n600)' }; return ( {cfg.lab} ); } function FileChip({ kind }) { const c = { PDF: { bg: 'var(--info-50)', clr: '#1E40AF' }, DOCX: { bg: 'var(--p50)', clr: 'var(--p600)' }, DOC: { bg: 'var(--p50)', clr: 'var(--p600)' }, JPG: { bg: 'var(--c50)', clr: 'var(--c600)' }, PNG: { bg: 'var(--c50)', clr: 'var(--c600)' }, }[kind] || { bg: 'var(--n100)', clr: 'var(--n700)' }; return ( {kind} ); } // ───────────────────────────────────────────────────────────── // 1) Teacher Homework Hub // ───────────────────────────────────────────────────────────── function TeacherHomeworkHubScreen({ nav, params }) { const initialTab = (params && params.tab) || 'active'; const [tab, setTab] = useStateH(initialTab); const [classFilter, setClassFilter] = useStateH('all'); const [search, setSearch] = useStateH(''); const filtered = useMemoH(() => { let list = HW_ALL.filter(h => { if (tab === 'active' && h.state !== 'active' && h.state !== 'scheduled') return false; if (tab === 'to_grade' && h.state !== 'closed') return false; if (tab === 'draft' && h.state !== 'draft') return false; if (tab === 'past' && h.state !== 'past') return false; if (classFilter !== 'all' && h.classId !== classFilter) return false; if (search) { const q = search.toLowerCase(); if (!h.title.toLowerCase().includes(q) && !h.subject.toLowerCase().includes(q)) return false; } return true; }); return list; }, [tab, classFilter, search]); const counts = { active: HW_ALL.filter(h => h.state === 'active' || h.state === 'scheduled').length, to_grade: HW_ALL.filter(h => h.state === 'closed').length, draft: HW_ALL.filter(h => h.state === 'draft').length, past: HW_ALL.filter(h => h.state === 'past').length, }; const stats = useMemoH(() => { const live = HW_ALL.filter(h => h.state === 'active').length; const toGrade = HW_ALL.filter(h => h.state === 'closed').reduce((s, h) => s + h._stats.toGrade, 0); const drafts = HW_ALL.filter(h => h.state === 'draft').length; const subsToday = HW_ALL.flatMap(h => h._subs).filter(s => s.submittedHoursAgo !== null && s.submittedHoursAgo < 24).length; return { live, toGrade, drafts, subsToday }; }, []); return (
Homework
{TEACHER_HW_CONTEXT.short.toUpperCase()} · {TEACHER_HW_CONTEXT.classes.length} CLASSES
{/* Stat strip */}
{stats.live}
LIVE
{stats.toGrade}
TO GRADE
{stats.drafts}
DRAFTS
{stats.subsToday}
TODAY
{/* Class chips */}
{TEACHER_HW_CONTEXT.classes.map(c => ( ))}
{/* Tabs */}
{[ { id: 'active', lab: 'Active' }, { id: 'to_grade', lab: 'To grade' }, { id: 'draft', lab: 'Drafts' }, { id: 'past', lab: 'Past' }, ].map(x => ( ))}
{/* Search */}
setSearch(e.target.value)} placeholder="Search homework or subject…" style={{ width: '100%', height: 38, padding: '0 12px 0 32px', border: '1.5px solid var(--n100)', borderRadius: 10, fontSize: 13, fontFamily: 'inherit', }}/>
{filtered.length === 0 ? (
{tab === 'draft' ? 'No drafts yet' : tab === 'past' ? 'No past homework' : 'Nothing matches'}
{tab === 'draft' ? 'Tap + New to start one.' : 'Try clearing filters.'}
{tab === 'draft' && ( )}
) : (
{filtered.map(h => )}
)}
); } function HwHubCard({ hw, nav }) { const meta = subMeta(hw.subject); const cls = TEACHER_HW_CONTEXT.classes.find(c => c.id === hw.classId); const onCardTap = () => { if (hw.state === 'draft' || hw.state === 'scheduled') { nav.push('teachCreateHomework', { editingId: hw.id }); } else { nav.push('teachHomeworkSubmissions', { hwId: hw.id }); } }; const submitPct = Math.round((hw._stats.submitted / hw._stats.total) * 100); return ( )} )} {hw.state === 'draft' && (
{hw.description ? 'Resume editing → publish when ready' : 'Title set · add details and questions'}
)} {hw.state === 'scheduled' && (
Auto-releases on {hw.publishedOn}
)} ); } // ───────────────────────────────────────────────────────────── // 2) Create / Edit Homework // ───────────────────────────────────────────────────────────── function TeacherCreateHomeworkScreen({ nav, params }) { const editingId = params && params.editingId; const editing = editingId ? HW_ALL.find(h => h.id === editingId) : null; const isNew = !editing; const [title, setTitle] = useStateH(editing?.title || ''); const [subject, setSubject] = useStateH(editing?.subject || 'Mathematics'); const [classId, setClassId] = useStateH(editing?.classId || '8B'); const [description, setDesc] = useStateH(editing?.description || ''); const [points, setPoints] = useStateH(editing?.points || 20); const [dueDate, setDueDate] = useStateH(editing?.dueOn || ''); const [allowLate, setAllowLate] = useStateH(editing ? editing.allowLate : true); const [latePenalty, setLatePenalty] = useStateH(editing?.latePolicy || '24h · –20%'); const [allowResubmit, setResubmit] = useStateH(editing ? editing.resubmit : false); const [hasRubric, setHasRubric] = useStateH(editing && editing.rubric ? true : false); const [files, setFiles] = useStateH(editing?.attachments || []); const [instr, setInstr] = useStateH(editing?.instructions || []); const [newInstr, setNewInstr] = useStateH(''); const [scheduling, setScheduling] = useStateH(false); const subjects = ['Mathematics', 'Science', 'English', 'Hindi', 'Social Studies', 'History', 'Civics']; const addInstr = () => { if (!newInstr.trim()) return; setInstr([...instr, newInstr.trim()]); setNewInstr(''); }; const addFile = (kind) => { const samples = { PDF: { name: `worksheet-${files.length + 1}.pdf`, size: '230 KB', kind: 'PDF' }, DOCX: { name: `template-${files.length + 1}.docx`, size: '64 KB', kind: 'DOCX' }, JPG: { name: `reference-${files.length + 1}.jpg`, size: '410 KB', kind: 'JPG' }, }; setFiles([...files, samples[kind]]); }; const subMetaCur = subMeta(subject); const isPublishable = !!title && !!description && !!dueDate && !!points; const onSave = () => nav.replace('teachHomework', { tab: 'draft' }); const onPublish = () => nav.replace('teachHomework', { tab: 'active' }); return (
nav.pop()} right={!isNew && editing.state === 'active' && } />
{/* Editing-state banner */} {!isNew && editing.state !== 'draft' && (
This homework is already {editing.state === 'active' ? 'live' : editing.state}.
Changes to questions or due date will notify all students.
)} {/* Title */}
HOMEWORK TITLE
setTitle(e.target.value)} placeholder="e.g. Linear equations · Ex 7.3 (Q1–Q12)" style={{ width: '100%', padding: '4px 14px 14px', border: 'none', outline: 'none', fontSize: 17, fontWeight: 700, color: 'var(--n900)', background: 'transparent', fontFamily: 'inherit', }}/>
DESCRIPTION