G1 surface homework in lesson planner UI

2026-07-24 19:20:43 +01:00
10 changed files with 90 additions and 353 deletions
@@ -10,7 +10,6 @@ import {
 } from '@mui/icons-material';
 import { useAuth } from '../../contexts/AuthContext';
 import { ResultsWidget } from '../exam';
-import MarkbookPanel from './MarkbookPanel';

 const API_BASE = import.meta.env.VITE_API_BASE || import.meta.env.VITE_API_URL || '/api';

@@ -271,7 +270,6 @@ const ClassDetailPage: React.FC = () => {
            {/* Tabs */}
            <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
                <Tab label={`Students (${cls.student_count})`} />
-                <Tab label="Markbook" />
                <Tab label={`Requests${pendingCount > 0 ? ` (${pendingCount})` : ''}`} />
                <Tab label={`Teachers (${cls.teachers.length})`} />
            </Tabs>
@@ -334,13 +332,8 @@ const ClassDetailPage: React.FC = () => {
                </Box>
            )}

-            {/* Markbook tab */}
-            {tab === 1 && (
-                <MarkbookPanel classId={cls.id} accessToken={accessToken || ''} />
-            )}
-
            {/* Enrollment requests tab */}
-            {tab === 2 && (
+            {tab === 1 && (
                <Box>
                    {cls.enrollment_requests.length === 0 ? (
                        <Typography color="text.secondary" sx={{ py: 4, textAlign: 'center' }}>
@@ -399,7 +392,7 @@ const ClassDetailPage: React.FC = () => {
            )}

            {/* Teachers tab */}
-            {tab === 3 && (
+            {tab === 2 && (
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    {cls.teachers.length === 0 ? (
                        <Typography color="text.secondary" sx={{ py: 4, textAlign: 'center' }}>
@@ -39,6 +39,7 @@ interface LessonPlan {
    year_group: string | null;
    duration_minutes: number | null;
    context_notes: string | null;
+    homework: string | null;
    objectives: Objective[];
    activities: Activity[];
    is_public: boolean;
@@ -88,6 +89,7 @@ const LessonPlanDetailPage: React.FC = () => {
    const [yearGroup, setYearGroup] = useState('');
    const [duration, setDuration] = useState('');
    const [contextNotes, setContextNotes] = useState('');
+    const [homework, setHomework] = useState('');
    const [isPublic, setIsPublic] = useState(false);
    const [objectives, setObjectives] = useState<Objective[]>([]);
    const [activities, setActivities] = useState<Activity[]>([]);
@@ -110,6 +112,7 @@ const LessonPlanDetailPage: React.FC = () => {
                setYearGroup(data.year_group || '');
                setDuration(data.duration_minutes?.toString() || '');
                setContextNotes(data.context_notes || '');
+                setHomework(data.homework || '');
                setIsPublic(data.is_public || false);
                setObjectives(data.objectives || []);
                setActivities(data.activities || []);
@@ -128,7 +131,7 @@ const LessonPlanDetailPage: React.FC = () => {
    // ── Save ──────────────────────────────────────────────────────────────────

    const save = useCallback(async (
-        overrides?: Partial<{ title: string; subject: string; year_group: string; duration_minutes: number | null; context_notes: string; is_public: boolean; objectives: Objective[]; activities: Activity[] }>
+        overrides?: Partial<{ title: string; subject: string; year_group: string; duration_minutes: number | null; context_notes: string; homework: string; is_public: boolean; objectives: Objective[]; activities: Activity[] }>
    ) => {
        if (!accessToken || !planId) return;
        setSaving(true);
@@ -143,6 +146,7 @@ const LessonPlanDetailPage: React.FC = () => {
                    year_group: yearGroup || null,
                    duration_minutes: duration ? parseInt(duration, 10) : null,
                    context_notes: contextNotes || null,
+                    homework: homework || '',
                    is_public: isPublic,
                    objectives,
                    activities,
@@ -156,7 +160,7 @@ const LessonPlanDetailPage: React.FC = () => {
        } finally {
            setSaving(false);
        }
-    }, [accessToken, planId, title, subject, yearGroup, duration, contextNotes, isPublic, objectives, activities]);
+    }, [accessToken, planId, title, subject, yearGroup, duration, contextNotes, homework, isPublic, objectives, activities]);

    const scheduleAutoSave = useCallback(() => {
        if (autoSaveTimer.current) clearTimeout(autoSaveTimer.current);
@@ -359,6 +363,22 @@ const LessonPlanDetailPage: React.FC = () => {
                />
            </Box>

+            {/* Homework */}
+            <Box sx={{ mb: 3 }}>
+                <Typography variant="subtitle2" fontWeight={600} sx={{ mb: 0.75 }}>
+                    Homework
+                </Typography>
+                <TextField
+                    value={homework}
+                    onChange={e => { setHomework(e.target.value); scheduleAutoSave(); }}
+                    multiline
+                    minRows={2}
+                    fullWidth
+                    size="small"
+                    placeholder="Homework to carry with this plan when assigned to a taught lesson…"
+                />
+            </Box>
+
            <Divider sx={{ mb: 3 }} />

            {/* Objectives */}
@@ -21,6 +21,7 @@ interface PlanSummary {
    duration_minutes: number | null;
    objectives: { id: string; text: string; bloom_level?: string }[];
    activities: { id: string; section: string; title: string }[];
+    homework: string | null;
    is_public: boolean;
    created_at: string;
    updated_at: string;
@@ -144,6 +145,7 @@ function PlanCard({ plan, onOpen, onDelete }: {
                </Box>
                <Typography variant="caption" color="text.secondary">
                    {objCount} objective{objCount !== 1 ? 's' : ''} · {actCount} activit{actCount !== 1 ? 'ies' : 'y'}
+                    {plan.homework ? ' · homework set' : ''}
                </Typography>
            </CardContent>
            <CardActions sx={{ pt: 0, px: 1.5, pb: 1.5, justifyContent: 'flex-end' }} onClick={e => e.stopPropagation()}>
@@ -1,319 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
-import DownloadIcon from '@mui/icons-material/Download';
-
-import { API_BASE } from '../../config/apiConfig';
-
-interface Assessment {
-  id: string;
-  title: string;
-  date?: string | null;
-  max_marks: number;
-}
-
-interface MarkbookStudent {
-  student_id: string;
-  student_name: string;
-  row_number: number;
-  marks: Record<string, number | null>;
-  total: number | null;
-  percentage: number | null;
-}
-
-interface AssessmentSummary {
-  assessment_id: string;
-  entered_count: number;
-  average_mark: number | null;
-  average_percentage: number | null;
-}
-
-interface MarkbookGrid {
-  assessments: Assessment[];
-  students: MarkbookStudent[];
-  assessment_summaries: AssessmentSummary[];
-  summary: {
-    student_count: number;
-    assessment_count: number;
-    entered_mark_count: number;
-    class_average_mark: number | null;
-  };
-}
-
-interface MarkbookPanelProps {
-  classId: string;
-  accessToken: string;
-}
-
-const MARKBOOK_BASE = `${API_BASE}/api/markbook`;
-
-function formatNumber(value: number | null | undefined) {
-  return value === null || value === undefined ? '—' : Number(value).toFixed(Number.isInteger(value) ? 0 : 1);
-}
-
-function markInputValue(value: number | null | undefined) {
-  return value === null || value === undefined ? '' : String(value);
-}
-
-function AddAssessmentDialog({
-  open,
-  saving,
-  onClose,
-  onCreate,
-}: {
-  open: boolean;
-  saving: boolean;
-  onClose: () => void;
-  onCreate: (payload: { title: string; date?: string; max_marks: number }) => Promise<void>;
-}) {
-  const [title, setTitle] = useState('');
-  const [date, setDate] = useState('');
-  const [maxMarks, setMaxMarks] = useState('100');
-
-  useEffect(() => {
-    if (open) {
-      setTitle('');
-      setDate('');
-      setMaxMarks('100');
-    }
-  }, [open]);
-
-  const handleCreate = async () => {
-    const parsedMax = Number(maxMarks);
-    if (!title.trim() || !Number.isFinite(parsedMax) || parsedMax <= 0) return;
-    await onCreate({ title: title.trim(), date: date || undefined, max_marks: parsedMax });
-  };
-
-  return (
-    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
-      <DialogTitle>Add assessment column</DialogTitle>
-      <DialogContent sx={{ pt: 2 }}>
-        <Stack spacing={2} sx={{ mt: 1 }}>
-          <TextField label="Title" size="small" value={title} onChange={(e) => setTitle(e.target.value)} autoFocus />
-          <TextField label="Date" type="date" size="small" value={date} onChange={(e) => setDate(e.target.value)} InputLabelProps={{ shrink: true }} />
-          <TextField label="Max marks" type="number" size="small" value={maxMarks} onChange={(e) => setMaxMarks(e.target.value)} inputProps={{ min: 0, step: 0.5 }} />
-        </Stack>
-      </DialogContent>
-      <DialogActions sx={{ px: 3, pb: 2 }}>
-        <Button onClick={onClose} disabled={saving}>Cancel</Button>
-        <Button onClick={handleCreate} variant="contained" disabled={saving || !title.trim()} startIcon={saving ? <CircularProgress size={16} /> : <AddIcon />}>
-          Add
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
-
-const MarkbookPanel: React.FC<MarkbookPanelProps> = ({ classId, accessToken }) => {
-  const [grid, setGrid] = useState<MarkbookGrid | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [savingKey, setSavingKey] = useState<string | null>(null);
-  const [addOpen, setAddOpen] = useState(false);
-  const [savingAssessment, setSavingAssessment] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const headers = useMemo(() => ({ Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' }), [accessToken]);
-
-  const load = useCallback(async () => {
-    if (!classId || !accessToken) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await fetch(`${MARKBOOK_BASE}/classes/${classId}/grid`, { headers });
-      const body = await res.json();
-      if (!res.ok) throw new Error(body.detail || 'Failed to load markbook');
-      setGrid(body);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  }, [accessToken, classId, headers]);
-
-  useEffect(() => {
-    void load();
-  }, [load]);
-
-  const createAssessment = async (payload: { title: string; date?: string; max_marks: number }) => {
-    setSavingAssessment(true);
-    setError(null);
-    try {
-      const res = await fetch(`${MARKBOOK_BASE}/classes/${classId}/assessments`, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(payload),
-      });
-      const body = await res.json();
-      if (!res.ok) throw new Error(body.detail || 'Failed to create assessment');
-      setAddOpen(false);
-      await load();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setSavingAssessment(false);
-    }
-  };
-
-  const saveMark = async (studentId: string, assessment: Assessment, raw: string) => {
-    const key = `${studentId}:${assessment.id}`;
-    const trimmed = raw.trim();
-    const mark = trimmed === '' ? null : Number(trimmed);
-    if (mark !== null && (!Number.isFinite(mark) || mark < 0 || mark > Number(assessment.max_marks))) {
-      setError(`Mark must be between 0 and ${assessment.max_marks}`);
-      return;
-    }
-    setSavingKey(key);
-    setError(null);
-    try {
-      const res = await fetch(`${MARKBOOK_BASE}/classes/${classId}/assessments/${assessment.id}/marks/${studentId}`, {
-        method: 'PUT',
-        headers,
-        body: JSON.stringify({ mark }),
-      });
-      const body = await res.json();
-      if (!res.ok) throw new Error(body.detail || 'Failed to save mark');
-      await load();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setSavingKey(null);
-    }
-  };
-
-  const downloadCsv = async () => {
-    setError(null);
-    try {
-      const res = await fetch(`${MARKBOOK_BASE}/classes/${classId}/csv`, { headers });
-      const text = await res.text();
-      if (!res.ok) throw new Error(text || 'Failed to export CSV');
-      const blob = new Blob([text], { type: 'text/csv;charset=utf-8' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `markbook-${classId}.csv`;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      URL.revokeObjectURL(url);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    }
-  };
-
-  if (loading) {
-    return <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>;
-  }
-
-  if (!grid) {
-    return <Alert severity="error">{error || 'Could not load markbook'}</Alert>;
-  }
-
-  const summaryByAssessment = new Map(grid.assessment_summaries.map((s) => [s.assessment_id, s]));
-
-  return (
-    <Box>
-      {error && <Alert severity="error" onClose={() => setError(null)} sx={{ mb: 2 }}>{error}</Alert>}
-      <Stack direction="row" spacing={1} sx={{ mb: 2 }} justifyContent="space-between" alignItems="center" flexWrap="wrap" useFlexGap>
-        <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
-          <Typography variant="body2" color="text.secondary">{grid.summary.student_count} roster students</Typography>
-          <Typography variant="body2" color="text.secondary">{grid.summary.assessment_count} assessments</Typography>
-          <Typography variant="body2" color="text.secondary">Class average mark {formatNumber(grid.summary.class_average_mark)}</Typography>
-        </Stack>
-        <Stack direction="row" spacing={1}>
-          <Button size="small" variant="outlined" startIcon={<DownloadIcon />} onClick={downloadCsv} disabled={grid.assessments.length === 0}>CSV</Button>
-          <Button size="small" variant="contained" startIcon={<AddIcon />} onClick={() => setAddOpen(true)}>Add assessment</Button>
-        </Stack>
-      </Stack>
-
-      {grid.assessments.length === 0 ? (
-        <Paper variant="outlined" sx={{ py: 4, px: 2, textAlign: 'center' }}>
-          <Typography color="text.secondary" sx={{ mb: 2 }}>No assessment columns yet.</Typography>
-          <Button variant="contained" startIcon={<AddIcon />} onClick={() => setAddOpen(true)}>Add first assessment</Button>
-        </Paper>
-      ) : (
-        <TableContainer component={Paper} variant="outlined" sx={{ maxHeight: 620 }}>
-          <Table size="small" stickyHeader>
-            <TableHead>
-              <TableRow>
-                <TableCell sx={{ minWidth: 44 }}>#</TableCell>
-                <TableCell sx={{ minWidth: 180 }}>Student</TableCell>
-                {grid.assessments.map((assessment) => (
-                  <TableCell key={assessment.id} align="right" sx={{ minWidth: 130 }}>
-                    <Typography variant="body2" fontWeight={700}>{assessment.title}</Typography>
-                    <Typography variant="caption" color="text.secondary">
-                      {assessment.date ? `${new Date(assessment.date).toLocaleDateString('en-GB')} · ` : ''}/{assessment.max_marks}
-                    </Typography>
-                  </TableCell>
-                ))}
-                <TableCell align="right">Total</TableCell>
-                <TableCell align="right">%</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {grid.students.map((student) => (
-                <TableRow key={student.student_id}>
-                  <TableCell>{student.row_number}</TableCell>
-                  <TableCell>
-                    <Typography variant="body2" fontWeight={600}>{student.student_name || student.student_id}</Typography>
-                    <Typography variant="caption" color="text.secondary">{student.student_id}</Typography>
-                  </TableCell>
-                  {grid.assessments.map((assessment) => {
-                    const key = `${student.student_id}:${assessment.id}`;
-                    return (
-                      <TableCell key={assessment.id} align="right">
-                        <TextField
-                          size="small"
-                          type="number"
-                          defaultValue={markInputValue(student.marks[assessment.id])}
-                          onBlur={(e) => void saveMark(student.student_id, assessment, e.target.value)}
-                          disabled={savingKey === key}
-                          inputProps={{ min: 0, max: assessment.max_marks, step: 0.5, style: { textAlign: 'right' } }}
-                          sx={{ width: 86 }}
-                        />
-                      </TableCell>
-                    );
-                  })}
-                  <TableCell align="right"><strong>{formatNumber(student.total)}</strong></TableCell>
-                  <TableCell align="right">{formatNumber(student.percentage)}</TableCell>
-                </TableRow>
-              ))}
-              <TableRow sx={{ bgcolor: 'action.hover' }}>
-                <TableCell />
-                <TableCell><strong>Average</strong></TableCell>
-                {grid.assessments.map((assessment) => {
-                  const summary = summaryByAssessment.get(assessment.id);
-                  return <TableCell key={assessment.id} align="right"><strong>{formatNumber(summary?.average_mark)}</strong></TableCell>;
-                })}
-                <TableCell />
-                <TableCell />
-              </TableRow>
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
-
-      <AddAssessmentDialog open={addOpen} saving={savingAssessment} onClose={() => setAddOpen(false)} onCreate={createAssessment} />
-    </Box>
-  );
-};
-
-export default MarkbookPanel;
@@ -22,6 +22,7 @@ interface Lesson {
    week_cycle: string;
    day_of_week: string;
    status: string;
+    homework: string | null;
    teacher_name: string | null;
 }

@@ -95,6 +96,11 @@ function LessonCard({ lesson }: { lesson: Lesson }) {
                    sx={{ height: 16, fontSize: '0.65rem' }}
                />
            </Box>
+            {lesson.homework && (
+                <Typography variant="caption" sx={{ color: 'primary.main', fontSize: '0.68rem', fontWeight: 600 }}>
+                    Homework: {lesson.homework.length > 80 ? lesson.homework.slice(0, 80) + '…' : lesson.homework}
+                </Typography>
+            )}
            {lesson.teacher_name && (
                <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: '0.68rem' }}>
                    {lesson.teacher_name}
@@ -30,6 +30,7 @@ interface Lesson {
    day_of_week: string;
    status: string;
    lesson_plan: Record<string, any>;
+    homework: string | null;
    notes: string | null;
    whiteboard_room_id: string | null;
 }
@@ -76,16 +77,18 @@ const STATUS_COLORS: Record<string, 'default' | 'primary' | 'success' | 'error'
 interface EditDialogProps {
    lesson: Lesson | null;
    onClose: () => void;
-    onSave: (id: string, updates: { notes?: string; status?: string }) => Promise<void>;
+    onSave: (id: string, updates: { homework?: string; notes?: string; status?: string }) => Promise<void>;
 }

 function LessonEditDialog({ lesson, onClose, onSave }: EditDialogProps) {
+    const [homework, setHomework] = useState('');
    const [notes, setNotes] = useState('');
    const [status, setStatus] = useState('planned');
    const [saving, setSaving] = useState(false);

    useEffect(() => {
        if (lesson) {
+            setHomework(lesson.homework || '');
            setNotes(lesson.notes || '');
            setStatus(lesson.status || 'planned');
        }
@@ -94,7 +97,7 @@ function LessonEditDialog({ lesson, onClose, onSave }: EditDialogProps) {
    const handleSave = async () => {
        if (!lesson) return;
        setSaving(true);
-        await onSave(lesson.id, { notes, status });
+        await onSave(lesson.id, { homework, notes, status });
        setSaving(false);
        onClose();
    };
@@ -127,6 +130,16 @@ function LessonEditDialog({ lesson, onClose, onSave }: EditDialogProps) {
                            <MenuItem value="substituted">Substituted</MenuItem>
                        </Select>
                    </FormControl>
+                    <TextField
+                        label="Homework"
+                        value={homework}
+                        onChange={e => setHomework(e.target.value)}
+                        multiline
+                        minRows={2}
+                        fullWidth
+                        size="small"
+                        placeholder="Homework for this lesson…"
+                    />
                    <TextField
                        label="Notes"
                        value={notes}
@@ -209,6 +222,11 @@ function LessonCard({ lesson, onEdit, onAssignPlan }: LessonCardProps) {
                    sx={{ height: 16, fontSize: '0.65rem' }}
                />
            </Box>
+            {lesson.homework && (
+                <Typography variant="caption" sx={{ color: 'primary.main', fontSize: '0.68rem', fontWeight: 600, mt: 0.25 }}>
+                    Homework: {lesson.homework.length > 80 ? lesson.homework.slice(0, 80) + '…' : lesson.homework}
+                </Typography>
+            )}
            {lesson.notes && (
                <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: '0.68rem', fontStyle: 'italic', mt: 0.25 }}>
                    {lesson.notes.length > 80 ? lesson.notes.slice(0, 80) + '…' : lesson.notes}
@@ -287,7 +305,7 @@ const TaughtLessonsPage: React.FC = () => {
        }
    };

-    const handleSaveLesson = async (id: string, updates: { notes?: string; status?: string }) => {
+    const handleSaveLesson = async (id: string, updates: { homework?: string; notes?: string; status?: string }) => {
        if (!accessToken) return;
        await fetch(`${API_BASE}/timetable/lessons/${id}`, {
            method: 'PATCH',
@@ -86,6 +86,12 @@ export class CCPlannedLessonNodeShapeUtil extends CCBaseShapeUtil<CCPlannedLesso
          labelStyle={styles.property.label}
          valueStyle={styles.property.value}
        />
+        <NodeProperty
+          label="Homework"
+          value={shape.props.homework}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
        <NodeProperty
          label="Topic Code"
          value={shape.props.topic_code}
@@ -5,7 +5,8 @@ import { CCGraphShape, GraphShapeType } from './cc-graph-types'
 // Helper function to create version IDs for a shape type
 const createVersions = (shapeType: GraphShapeType) => {
  return createShapePropsMigrationIds(shapeType, {
-    Initial: 1  // All shapes start at version 1 as required by TLDraw
+    Initial: 1,  // All shapes start at version 1 as required by TLDraw
+    AddPlannedLessonHomework: 2,
  })
 }

@@ -21,6 +22,13 @@ const createMigrationSequence = (shapeType: GraphShapeType) => {
          return props
        },
      },
+      ...(shapeType === 'cc-planned-lesson-node' ? [{
+        id: versions.AddPlannedLessonHomework,
+        up: (props: CCGraphShape['props']) => ({
+          homework: '',
+          ...props,
+        }),
+      }] : []),
    ],
  })
 }
@@ -199,6 +199,7 @@ export const ccGraphShapeProps = {
    subject: T.string,
    teacher_code: T.string,
    planning_status: T.string,
+    homework: T.string,
    topic_code: T.string,
    topic_name: T.string,
    lesson_code: T.string,
@@ -560,6 +561,7 @@ export const getDefaultCCPlannedLessonNodeProps = () => ({
  subject: '',
  teacher_code: '',
  planning_status: '',
+  homework: '',
  topic_code: '',
  topic_name: '',
  lesson_code: '',
@@ -204,6 +204,7 @@ export type CCPlannedLessonNodeProps = CCGraphShapeProps & {
    subject: string
    teacher_code: string
    planning_status: string
+    homework: string
    topic_code: string
    topic_name: string
    lesson_code: string