feat(exam): version templates on dashboard

src/pages/exam/ExamDashboardPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   Alert,
@@ -22,6 +22,8 @@ import {
 import AddIcon from '@mui/icons-material/Add';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import AssignmentIcon from '@mui/icons-material/Assignment';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import EditIcon from '@mui/icons-material/Edit';
 
 import { useAuth } from '../../contexts/AuthContext';
 import { examRepository } from '../../services/exam/examRepository';
@@ -34,6 +36,51 @@ const STATUS_COLOR: Record<string, 'default' | 'info' | 'success' | 'warning'> =
   archived: 'default',
 };
 
+const VERSION_SEPARATOR = ' · ';
+const VERSION_RE = /(?:^|\s)[vV](\d+(?:\.\d+)*)$/;
+
+type DialogMode = 'create' | 'edit' | 'duplicate';
+
+type TemplateDialogState = {
+  mode: DialogMode;
+  template?: ExamTemplate;
+} | null;
+
+function splitTemplateTitle(title: string): { name: string; version: string } {
+  const parts = title.split(VERSION_SEPARATOR);
+  const possibleVersion = parts[parts.length - 1]?.trim() ?? '';
+  if (parts.length > 1 && VERSION_RE.test(possibleVersion)) {
+    return { name: parts.slice(0, -1).join(VERSION_SEPARATOR).trim(), version: possibleVersion };
+  }
+  return { name: title, version: 'v1' };
+}
+
+function composeTemplateTitle(name: string, version: string): string {
+  const cleanName = name.trim();
+  const cleanVersion = version.trim();
+  return cleanVersion ? `${cleanName}${VERSION_SEPARATOR}${cleanVersion}` : cleanName;
+}
+
+function nextVersionLabel(version: string): string {
+  const match = version.trim().match(VERSION_RE);
+  if (!match) return 'v2';
+  const segments = match[1].split('.');
+  const last = Number(segments[segments.length - 1]);
+  segments[segments.length - 1] = Number.isFinite(last) ? String(last + 1) : '2';
+  return `v${segments.join('.')}`;
+}
+
+function paperKey(t: ExamTemplate): string {
+  return t.exam_id ?? t.source_file_id ?? t.exam_code ?? t.subject ?? 'custom-paper';
+}
+
+function paperLabel(t: ExamTemplate): string {
+  if (t.exam_code) return t.exam_code;
+  if (t.subject) return t.subject;
+  if (t.source_file_id) return 'Uploaded paper';
+  return 'Custom paper';
+}
+
 const ExamDashboardPage: React.FC = () => {
   const navigate = useNavigate();
   const { bootstrapData } = useAuth();
@@ -43,8 +90,9 @@ const ExamDashboardPage: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  const [createOpen, setCreateOpen] = useState(false);
+  const [dialog, setDialog] = useState<TemplateDialogState>(null);
-  const [title, setTitle] = useState('');
+  const [templateName, setTemplateName] = useState('');
+  const [version, setVersion] = useState('v1');
   const [subject, setSubject] = useState('');
   const [saving, setSaving] = useState(false);
 
@@ -66,33 +114,99 @@ const ExamDashboardPage: React.FC = () => {
     void load();
   }, [load, instituteId]);
 
-  const handleCreate = async () => {
+  const groupedTemplates = useMemo(() => {
-    if (!title.trim()) return;
+    const groups = new Map<string, { label: string; templates: ExamTemplate[] }>();
+    templates.forEach((template) => {
+      const key = paperKey(template);
+      const existing = groups.get(key);
+      if (existing) {
+        existing.templates.push(template);
+      } else {
+        groups.set(key, { label: paperLabel(template), templates: [template] });
+      }
+    });
+    return Array.from(groups.entries()).map(([key, group]) => ({ key, ...group }));
+  }, [templates]);
+
+  const openCreate = () => {
+    setTemplateName('New template');
+    setVersion('v1');
+    setSubject('');
+    setDialog({ mode: 'create' });
+  };
+
+  const openEdit = (template: ExamTemplate, ev: React.MouseEvent) => {
+    ev.stopPropagation();
+    const parsed = splitTemplateTitle(template.title);
+    setTemplateName(parsed.name);
+    setVersion(parsed.version);
+    setSubject(template.subject ?? '');
+    setDialog({ mode: 'edit', template });
+  };
+
+  const openDuplicate = (template: ExamTemplate, ev: React.MouseEvent) => {
+    ev.stopPropagation();
+    const parsed = splitTemplateTitle(template.title);
+    setTemplateName(parsed.name);
+    setVersion(nextVersionLabel(parsed.version));
+    setSubject(template.subject ?? '');
+    setDialog({ mode: 'duplicate', template });
+  };
+
+  const closeDialog = () => {
+    if (!saving) setDialog(null);
+  };
+
+  const handleSaveDialog = async () => {
+    if (!dialog || !templateName.trim()) return;
+    const title = composeTemplateTitle(templateName, version);
     setSaving(true);
     try {
-      const created = await examRepository.createTemplate({
+      if (dialog.mode === 'create') {
-        title: title.trim(),
+        const created = await examRepository.createTemplate({
-        subject: subject.trim() || undefined,
+          title,
-        institute_id: instituteId,
+          subject: subject.trim() || undefined,
+          institute_id: instituteId,
+        });
+        setDialog(null);
+        navigate(`/exam-marker/${created.id}/setup`);
+        return;
+      }
+
+      if (!dialog.template) return;
+
+      if (dialog.mode === 'duplicate') {
+        const created = await examRepository.duplicateTemplate(dialog.template.id, title);
+        setTemplates((prev) => [created, ...prev]);
+        setDialog(null);
+        navigate(`/exam-marker/${created.id}/setup`);
+        return;
+      }
+
+      const updated = await examRepository.updateTemplateMeta(dialog.template.id, {
+        title,
+        subject: subject.trim() || null,
       });
-      setCreateOpen(false);
+      setTemplates((prev) => prev.map((t) => (t.id === updated.id ? updated : t)));
-      setTitle('');
+      setDialog(null);
-      setSubject('');
-      navigate(`/exam-marker/${created.id}/setup`);
     } catch (e) {
       const msg = e instanceof Error ? e.message : String(e);
-      logger.error('cc-exam-marker', 'Create template failed', { message: msg });
+      logger.error('cc-exam-marker', 'Template action failed', { message: msg, mode: dialog.mode });
       setError(msg);
     } finally {
       setSaving(false);
     }
   };
 
-  const handleArchive = async (id: string, ev: React.MouseEvent) => {
+  const handleArchive = async (template: ExamTemplate, ev: React.MouseEvent) => {
     ev.stopPropagation();
+    const parsed = splitTemplateTitle(template.title);
+    if (!window.confirm(`Archive ${parsed.name} ${parsed.version}? This hides it from the dashboard but keeps the work recoverable.`)) {
+      return;
+    }
     try {
-      await examRepository.archiveTemplate(id);
+      await examRepository.archiveTemplate(template.id);
-      setTemplates((prev) => prev.filter((t) => t.id !== id));
+      setTemplates((prev) => prev.filter((t) => t.id !== template.id));
     } catch (e) {
       const msg = e instanceof Error ? e.message : String(e);
       logger.error('cc-exam-marker', 'Archive failed', { message: msg });
@@ -100,6 +214,12 @@ const ExamDashboardPage: React.FC = () => {
     }
   };
 
+  const dialogTitle = dialog?.mode === 'edit'
+    ? 'Rename template / edit version'
+    : dialog?.mode === 'duplicate'
+      ? 'Duplicate as new version'
+      : 'New exam template';
+
   return (
     <Container maxWidth="lg" sx={{ py: 6 }}>
       <Stack spacing={4}>
@@ -108,11 +228,11 @@ const ExamDashboardPage: React.FC = () => {
             <Typography variant="h3" component="h1" gutterBottom>
               Exam Marker
             </Typography>
-            <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 560 }}>
+            <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 620 }}>
-              Build a template for an exam paper, then run marking batches against your classes.
+              Build multiple named templates for the same paper, version them as your setup changes, and archive drafts you no longer need.
             </Typography>
           </Box>
-          <Button variant="contained" startIcon={<AddIcon />} onClick={() => setCreateOpen(true)}>
+          <Button variant="contained" startIcon={<AddIcon />} onClick={openCreate}>
             New template
           </Button>
         </Box>
@@ -132,73 +252,118 @@ const ExamDashboardPage: React.FC = () => {
             <AssignmentIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 1 }} />
             <Typography variant="h6" gutterBottom>No exam templates yet</Typography>
             <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-              Create your first template to start mapping an exam paper.
+              Create your first named template to start mapping an exam paper.
             </Typography>
-            <Button variant="outlined" startIcon={<AddIcon />} onClick={() => setCreateOpen(true)}>
+            <Button variant="outlined" startIcon={<AddIcon />} onClick={openCreate}>
               New template
             </Button>
           </Paper>
         ) : (
-          <Grid container spacing={3}>
+          <Stack spacing={3}>
-            {templates.map((t) => (
+            {groupedTemplates.map((group) => (
-              <Grid item xs={12} sm={6} md={4} key={t.id}>
+              <Box key={group.key}>
-                <Paper
+                <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 1 }}>
-                  elevation={2}
+                  <Typography variant="h6">{group.label}</Typography>
-                  sx={{ p: 3, height: '100%', cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 1,
+                  <Chip size="small" label={`${group.templates.length} template${group.templates.length === 1 ? '' : 's'}`} variant="outlined" />
-                        transition: 'box-shadow 120ms', '&:hover': { boxShadow: 6 } }}
+                </Stack>
-                  onClick={() => navigate(`/exam-marker/${t.id}/setup`)}
+                <Grid container spacing={3}>
-                >
+                  {group.templates.map((t) => {
-                  <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+                    const parsed = splitTemplateTitle(t.title);
-                    <Typography variant="h6" sx={{ pr: 1 }}>{t.title}</Typography>
+                    return (
-                    <Tooltip title="Archive">
+                      <Grid item xs={12} sm={6} md={4} key={t.id}>
-                      <IconButton size="small" onClick={(e) => handleArchive(t.id, e)} aria-label="archive template">
+                        <Paper
-                        <ArchiveIcon fontSize="small" />
+                          elevation={2}
-                      </IconButton>
+                          sx={{
-                    </Tooltip>
+                            p: 3,
-                  </Box>
+                            height: '100%',
-                  {t.subject && (
+                            cursor: 'pointer',
-                    <Typography variant="body2" color="text.secondary">{t.subject}</Typography>
+                            display: 'flex',
-                  )}
+                            flexDirection: 'column',
-                  {t.exam_code && (
+                            gap: 1,
-                    <Typography variant="caption" color="text.secondary">{t.exam_code}</Typography>
+                            transition: 'box-shadow 120ms',
-                  )}
+                            '&:hover': { boxShadow: 6 },
-                  <Box sx={{ mt: 'auto', pt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                          }}
-                    <Chip size="small" label={t.status} color={STATUS_COLOR[t.status] ?? 'default'} variant="outlined" />
+                          onClick={() => navigate(`/exam-marker/${t.id}/setup`)}
-                    <Typography variant="caption" color="text.secondary">
+                        >
-                      {new Date(t.updated_at).toLocaleDateString()}
+                          <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
-                    </Typography>
+                            <Box sx={{ minWidth: 0 }}>
-                  </Box>
+                              <Typography variant="h6" sx={{ pr: 1 }}>{parsed.name}</Typography>
-                </Paper>
+                              <Chip size="small" label={parsed.version} color="info" variant="outlined" sx={{ mt: 0.5 }} />
-              </Grid>
+                            </Box>
+                            <Stack direction="row" spacing={0.5}>
+                              <Tooltip title="Rename / edit version">
+                                <IconButton size="small" onClick={(e) => openEdit(t, e)} aria-label="rename template">
+                                  <EditIcon fontSize="small" />
+                                </IconButton>
+                              </Tooltip>
+                              <Tooltip title="Duplicate as new version">
+                                <IconButton size="small" onClick={(e) => openDuplicate(t, e)} aria-label="duplicate template">
+                                  <ContentCopyIcon fontSize="small" />
+                                </IconButton>
+                              </Tooltip>
+                              <Tooltip title="Archive">
+                                <IconButton size="small" onClick={(e) => handleArchive(t, e)} aria-label="archive template">
+                                  <ArchiveIcon fontSize="small" />
+                                </IconButton>
+                              </Tooltip>
+                            </Stack>
+                          </Box>
+                          {t.subject && (
+                            <Typography variant="body2" color="text.secondary">{t.subject}</Typography>
+                          )}
+                          {t.exam_code && (
+                            <Typography variant="caption" color="text.secondary">{t.exam_code}</Typography>
+                          )}
+                          <Box sx={{ mt: 'auto', pt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                            <Chip size="small" label={t.status} color={STATUS_COLOR[t.status] ?? 'default'} variant="outlined" />
+                            <Typography variant="caption" color="text.secondary">
+                              Updated {new Date(t.updated_at).toLocaleDateString()}
+                            </Typography>
+                          </Box>
+                        </Paper>
+                      </Grid>
+                    );
+                  })}
+                </Grid>
+              </Box>
             ))}
-          </Grid>
+          </Stack>
         )}
       </Stack>
 
-      <Dialog open={createOpen} onClose={() => (saving ? null : setCreateOpen(false))} fullWidth maxWidth="sm">
+      <Dialog open={Boolean(dialog)} onClose={closeDialog} fullWidth maxWidth="sm">
-        <DialogTitle>New exam template</DialogTitle>
+        <DialogTitle>{dialogTitle}</DialogTitle>
         <DialogContent>
           <Stack spacing={2} sx={{ mt: 1 }}>
             <TextField
-              label="Title"
+              label="Template name"
-              value={title}
+              value={templateName}
-              onChange={(e) => setTitle(e.target.value)}
+              onChange={(e) => setTemplateName(e.target.value)}
               fullWidth
               autoFocus
               required
+              helperText="User-facing name. Several templates can share the same paper."
             />
             <TextField
-              label="Subject"
+              label="Version"
+              value={version}
+              onChange={(e) => setVersion(e.target.value)}
+              fullWidth
+              helperText="Stored in the template title until the API grows a dedicated version column."
+            />
+            <TextField
+              label="Paper / subject label"
               value={subject}
               onChange={(e) => setSubject(e.target.value)}
               fullWidth
+              disabled={dialog?.mode === 'duplicate'}
             />
           </Stack>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setCreateOpen(false)} disabled={saving}>Cancel</Button>
+          <Button onClick={closeDialog} disabled={saving}>Cancel</Button>
-          <Button variant="contained" onClick={handleCreate} disabled={saving || !title.trim()}>
+          <Button variant="contained" onClick={handleSaveDialog} disabled={saving || !templateName.trim()}>
-            {saving ? 'Creating…' : 'Create'}
+            {saving ? 'Saving…' : dialog?.mode === 'duplicate' ? 'Create version' : 'Save'}
           </Button>
         </DialogActions>
       </Dialog>

src/services/exam/examRepository.ts

@@ -8,11 +8,16 @@
 import axios from 'axios';
 
 import { API_BASE } from '../../config/apiConfig';
+import { logger } from '../../debugConfig';
 import { supabase } from '../../supabaseClient';
 import type {
   CreateTemplatePayload,
+  ExamBoundary,
+  ExamQuestion,
+  ExamResponseArea,
   ExamTemplate,
   ExamTemplateDetail,
+  UpdateTemplateMetaPayload,
 } from '../../types/exam.types';
 
 const EXAM_BASE = `${API_BASE}/api/exam`;
@@ -25,6 +30,86 @@ async function authHeaders(): Promise<Record<string, string>> {
   return { Authorization: `Bearer ${session.access_token}` };
 }
 
+function newUuid(): string {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return crypto.randomUUID();
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = Math.floor(Math.random() * 16);
+    const v = c === 'x' ? r : (r % 4) + 8;
+    return v.toString(16);
+  });
+}
+
+function questionPayload(q: ExamQuestion, idMap?: Map<string, string>) {
+  return {
+    id: idMap?.get(q.id) ?? q.id,
+    parent_id: q.parent_id ? (idMap?.get(q.parent_id) ?? q.parent_id) : null,
+    label: q.label,
+    order: q.order,
+    max_marks: q.max_marks,
+    answer_type: q.answer_type,
+    mcq_options: q.mcq_options,
+    mark_scheme: q.mark_scheme ?? {},
+    is_container: q.is_container,
+    spec_ref: q.spec_ref,
+    bounds: q.bounds ?? null,
+    page: q.page ?? null,
+  };
+}
+
+function responseAreaPayload(r: ExamResponseArea, idMap?: Map<string, string>, duplicate = false) {
+  return {
+    id: duplicate ? newUuid() : r.id,
+    question_id: idMap?.get(r.question_id) ?? r.question_id,
+    page: r.page,
+    bounds: r.bounds,
+    kind: r.kind,
+    response_form: r.response_form,
+    context_type: r.context_type ?? null,
+    source: r.source,
+    confirmed: r.confirmed,
+    confidence: r.confidence,
+  };
+}
+
+function boundaryPayload(b: ExamBoundary, idMap?: Map<string, string>, duplicate = false) {
+  return {
+    id: duplicate ? newUuid() : b.id,
+    question_id: b.question_id ? (idMap?.get(b.question_id) ?? b.question_id) : null,
+    label: b.label,
+    page_index: b.page_index,
+    y: b.y,
+    bounds: b.bounds,
+    source: b.source,
+    confirmed: b.confirmed,
+  };
+}
+
+async function replaceTemplate(
+  templateId: string,
+  detail: ExamTemplateDetail,
+  meta?: UpdateTemplateMetaPayload,
+  duplicateIds = false,
+): Promise<ExamTemplateDetail> {
+  const headers = await authHeaders();
+  const idMap = new Map<string, string>();
+  if (duplicateIds) {
+    detail.questions.forEach((q) => idMap.set(q.id, newUuid()));
+  }
+  const res = await axios.put<ExamTemplateDetail>(
+    `${EXAM_BASE}/templates/${templateId}`,
+    {
+      meta,
+      questions: detail.questions.map((q) => questionPayload(q, idMap)),
+      response_areas: detail.response_areas.map((r) => responseAreaPayload(r, idMap, duplicateIds)),
+      boundaries: detail.boundaries.map((b) => boundaryPayload(b, idMap, duplicateIds)),
+    },
+    { headers },
+  );
+  return res.data;
+}
+
 export const examRepository = {
   async listTemplates(includeArchived = false): Promise<ExamTemplate[]> {
     const headers = await authHeaders();
@@ -47,6 +132,38 @@ export const examRepository = {
     return res.data;
   },
 
+  async updateTemplateMeta(templateId: string, meta: UpdateTemplateMetaPayload): Promise<ExamTemplate> {
+    const headers = await authHeaders();
+    const res = await axios.patch<ExamTemplate>(`${EXAM_BASE}/templates/${templateId}`, meta, { headers });
+    return res.data;
+  },
+
+  async duplicateTemplate(templateId: string, title: string): Promise<ExamTemplateDetail> {
+    const detail = await this.getTemplate(templateId);
+    const created = await this.createTemplate({
+      title,
+      subject: detail.subject ?? undefined,
+      exam_id: detail.exam_id ?? undefined,
+      exam_code: detail.exam_code ?? undefined,
+      source_file_id: detail.source_file_id ?? undefined,
+      page_count: detail.page_count ?? undefined,
+      institute_id: detail.institute_id,
+    });
+    try {
+      return await replaceTemplate(created.id, { ...detail, id: created.id }, { title, status: 'draft' }, true);
+    } catch (error) {
+      try {
+        await this.archiveTemplate(created.id);
+      } catch (archiveError) {
+        logger.error('cc-exam-marker', 'Failed to archive incomplete duplicate template', {
+          templateId: created.id,
+          message: archiveError instanceof Error ? archiveError.message : String(archiveError),
+        });
+      }
+      throw error;
+    }
+  },
+
   async archiveTemplate(templateId: string): Promise<void> {
     const headers = await authHeaders();
     await axios.delete(`${EXAM_BASE}/templates/${templateId}`, { headers });

src/types/exam.types.ts

@@ -31,6 +31,13 @@ export interface CreateTemplatePayload {
   institute_id?: string;
 }
 
+export interface UpdateTemplateMetaPayload {
+  title?: string;
+  subject?: string | null;
+  page_count?: number | null;
+  status?: ExamTemplateStatus;
+}
+
 /** Canvas children (used from S4-9 onward; defined here so the seam is complete). */
 export interface ExamQuestion {
   id: string;
@@ -44,16 +51,27 @@ export interface ExamQuestion {
   mark_scheme: Record<string, unknown>;
   is_container: boolean;
   spec_ref: string | null;
+  bounds?: Record<string, number> | null;
+  page?: number | null;
 }
 
+export type ExamResponseAreaKind =
+  | 'response'
+  | 'context'
+  | 'question_number'
+  | 'mark_area'
+  | 'reference'
+  | 'furniture';
+
 export interface ExamResponseArea {
   id: string;
   question_id: string;
   template_id: string;
   page: number;
   bounds: Record<string, number>;
-  kind: 'response' | 'context';
+  kind: ExamResponseAreaKind;
   response_form: string | null;
+  context_type?: string | null;
   source: 'manual' | 'ai';
   confirmed: boolean;
   confidence: number | null;