feat: complete exam lifecycle — AI generation, submission, student session, and results

- Backend: AI generation fallbacks when OpenAI not configured, full exam
  submission saving all params (difficulty, rubric, entity, grading system,
  approval workflow) and creating linked question records per section
- Backend: new exam session controller with get_session, autosave, submit,
  status, and results endpoints; student attempt/answer/score models
- Backend: new controllers for entities, approval workflows, exam schedules
- Frontend: exam session split-layout with passage panel, question types
  (MCQ, T/F/NG, gap-fill, writing, speaking), timer, and review dialog
- Frontend: results page with percentage score, per-answer breakdown table
- Frontend: generation page dynamic dropdowns, full payload submission
- Frontend: updated types for ExamSessionSection, ExamQuestion options

Made-with: Cursor

src/components/StudentLayout.tsx

@@ -1,4 +1,5 @@
 import RoleLayout, { NavGroup } from "./RoleLayout";
+import ExamPopup from "./student/ExamPopup";
 import {
   LayoutDashboard, BookOpen, ClipboardList, BarChart3,
   CalendarCheck, Calendar, User, Target, GraduationCap, ListChecks,
@@ -47,5 +48,10 @@ const navGroups: NavGroup[] = [
 ];
 
 export default function StudentLayout() {
-  return <RoleLayout navGroups={navGroups} role="student" />;
+  return (
+    <>
+      <RoleLayout navGroups={navGroups} role="student" />
+      <ExamPopup />
+    </>
+  );
 }

src/components/student/ExamPopup.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Clock, Calendar, PlayCircle, AlertCircle } from "lucide-react";
+import { assignmentsService } from "@/services/assignments.service";
+import type { StudentExamAssignment } from "@/types";
+
+export default function ExamPopup() {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [dismissed, setDismissed] = useState<Set<number>>(new Set());
+
+  const { data } = useQuery({
+    queryKey: ["student-my-exams"],
+    queryFn: () => assignmentsService.getStudentExams(),
+    refetchInterval: 30000,
+  });
+
+  const exams = (data?.items ?? []) as StudentExamAssignment[];
+  const pendingExams = exams.filter((e) => !dismissed.has(e.id));
+
+  useEffect(() => {
+    if (pendingExams.length > 0 && !open) {
+      setOpen(true);
+    }
+  }, [pendingExams.length]);
+
+  if (pendingExams.length === 0) return null;
+
+  const formatDate = (iso: string | null) => {
+    if (!iso) return "—";
+    const d = new Date(iso);
+    return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) +
+      " " + d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+  };
+
+  const handleStart = (exam: StudentExamAssignment) => {
+    setOpen(false);
+    navigate(`/student/exam/${exam.exam_id}/session`);
+  };
+
+  const handleDismiss = (id: number) => {
+    setDismissed((prev) => new Set([...prev, id]));
+    const remaining = pendingExams.filter((e) => e.id !== id);
+    if (remaining.length === 0) setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertCircle className="h-5 w-5 text-primary" />
+            Upcoming Exams ({pendingExams.length})
+          </DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
+          {pendingExams.map((exam) => (
+            <div key={exam.id} className="border rounded-lg p-4 space-y-3">
+              <div className="flex items-center justify-between">
+                <h3 className="font-semibold text-sm">{exam.exam_title || exam.schedule_name}</h3>
+                <Badge
+                  variant={exam.schedule_state === "active" ? "default" : "secondary"}
+                  className="capitalize text-xs"
+                >
+                  {exam.schedule_state === "active" ? "Active Now" : exam.schedule_state}
+                </Badge>
+              </div>
+
+              {exam.schedule_name && exam.exam_title && (
+                <p className="text-xs text-muted-foreground">{exam.schedule_name}</p>
+              )}
+
+              <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <Calendar className="h-3 w-3" />
+                  From: {formatDate(exam.start_date)}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Clock className="h-3 w-3" />
+                  To: {formatDate(exam.end_date)}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Button
+                  size="sm"
+                  disabled={!exam.can_start}
+                  onClick={() => handleStart(exam)}
+                  className="gap-1.5"
+                >
+                  <PlayCircle className="h-3.5 w-3.5" />
+                  {exam.can_start ? "Start Exam" : "Not Available Yet"}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => handleDismiss(exam.id)}
+                >
+                  Dismiss
+                </Button>
+                {!exam.can_start && (
+                  <span className="text-[11px] text-muted-foreground italic ml-auto">
+                    {exam.schedule_state === "planned"
+                      ? "Exam will be available once it becomes active"
+                      : "Exam is not currently active"}
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/pages/ApprovalWorkflowsPage.tsx

@@ -1,119 +1,556 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
-import { Plus, CheckCircle, XCircle, Clock } from "lucide-react";
+import {
-import AiGradingAssistant from "@/components/ai/AiGradingAssistant";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Plus,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Loader2,
+  Trash2,
+  ChevronRight,
+  ShieldCheck,
+  FileText,
+} from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
+import { api } from "@/lib/api-client";
 
-const workflows = [
+interface WorkflowStep {
-  {
+  id: number;
-    id: 1, name: "Exam Content Review", status: "In Progress",
+  sequence: number;
-    steps: [
+  approver_id: number | null;
-      { name: "Initial Review", assignee: "Dr. Smith", status: "Approved" },
+  approver_name: string;
-      { name: "Quality Check", assignee: "Prof. Lee", status: "Pending" },
+  status: string;
-      { name: "Final Approval", assignee: "Admin", status: "Waiting" },
+  comment: string;
-    ],
+  auto_escalate: boolean;
-  },
+  max_days: number;
-  {
+  acted_at: string | null;
-    id: 2, name: "Rubric Approval", status: "Completed",
+}
-    steps: [
+
-      { name: "Draft Review", assignee: "Mr. Kim", status: "Approved" },
+interface Workflow {
-      { name: "Academic Board", assignee: "Dr. Smith", status: "Approved" },
+  id: number;
-    ],
+  name: string;
-  },
+  type: string;
-  {
+  entity_id: number | null;
-    id: 3, name: "New Exam Structure", status: "Rejected",
+  entity_name: string | null;
-    steps: [
+  allow_bypass: boolean;
-      { name: "Content Review", assignee: "Prof. Lee", status: "Approved" },
+  active: boolean;
-      { name: "Standards Check", assignee: "Dr. Smith", status: "Rejected" },
+  steps: WorkflowStep[];
-    ],
+  created: string;
-  },
+}
-];
+
+interface ApprovalRequest {
+  id: number;
+  workflow_id: number | null;
+  workflow_name: string;
+  res_model: string;
+  res_id: number;
+  state: string;
+  requester_id: number | null;
+  requester_name: string;
+  current_stage_id: number | null;
+  current_stage_sequence: number | null;
+  bypass_reason: string;
+  created_at: string | null;
+}
+
+interface UserItem {
+  id: number;
+  name: string;
+  login: string;
+}
 
 const statusIcon = (s: string) => {
-  if (s === "Approved") return <CheckCircle className="h-4 w-4 text-success" />;
+  if (s === "approved") return <CheckCircle className="h-4 w-4 text-green-600" />;
-  if (s === "Rejected") return <XCircle className="h-4 w-4 text-destructive" />;
+  if (s === "rejected") return <XCircle className="h-4 w-4 text-destructive" />;
-  return <Clock className="h-4 w-4 text-warning" />;
+  return <Clock className="h-4 w-4 text-amber-500" />;
+};
+
+const stateBadge = (state: string) => {
+  const map: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
+    approved: "default",
+    in_progress: "secondary",
+    rejected: "destructive",
+    draft: "outline",
+  };
+  return (
+    <Badge variant={map[state] || "outline"} className="capitalize">
+      {state.replace(/_/g, " ")}
+    </Badge>
+  );
 };
 
 export default function ApprovalWorkflowsPage() {
   const { toast } = useToast();
+  const qc = useQueryClient();
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [formName, setFormName] = useState("");
+  const [formType, setFormType] = useState("custom");
+  const [formSteps, setFormSteps] = useState<{ approver_id: string }[]>([
+    { approver_id: "" },
+    { approver_id: "" },
+  ]);
+
+  const [rejectDialog, setRejectDialog] = useState<number | null>(null);
+  const [rejectComment, setRejectComment] = useState("");
+
+  const workflowsQ = useQuery({
+    queryKey: ["approval-workflows"],
+    queryFn: () => api.get<{ items: Workflow[]; total: number }>("/approval-workflows"),
+  });
+
+  const requestsQ = useQuery({
+    queryKey: ["approval-requests"],
+    queryFn: () => api.get<{ items: ApprovalRequest[]; total: number }>("/approval-requests"),
+  });
+
+  const usersQ = useQuery({
+    queryKey: ["approval-users"],
+    queryFn: () => api.get<{ items: UserItem[] }>("/approval-users"),
+  });
+
+  const workflows = workflowsQ.data?.items ?? [];
+  const requests = requestsQ.data?.items ?? [];
+  const users = usersQ.data?.items ?? [];
+
+  const createMut = useMutation({
+    mutationFn: (data: Record<string, unknown>) => api.post("/approval-workflows", data),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["approval-workflows"] });
+      setCreateOpen(false);
+      resetForm();
+      toast({ title: "Workflow created" });
+    },
+    onError: (e: Error) => toast({ variant: "destructive", title: "Create failed", description: e.message }),
+  });
+
+  const deleteMut = useMutation({
+    mutationFn: (id: number) => api.delete(`/approval-workflows/${id}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["approval-workflows"] });
+      toast({ title: "Workflow deleted" });
+    },
+  });
+
+  const approveMut = useMutation({
+    mutationFn: (id: number) => api.post(`/approval-requests/${id}/approve`, {}),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["approval-requests"] });
+      qc.invalidateQueries({ queryKey: ["approval-workflows"] });
+      toast({ title: "Request approved" });
+    },
+    onError: (e: Error) => toast({ variant: "destructive", title: "Approve failed", description: e.message }),
+  });
+
+  const rejectMut = useMutation({
+    mutationFn: ({ id, comment }: { id: number; comment: string }) =>
+      api.post(`/approval-requests/${id}/reject`, { comment }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["approval-requests"] });
+      qc.invalidateQueries({ queryKey: ["approval-workflows"] });
+      setRejectDialog(null);
+      setRejectComment("");
+      toast({ title: "Request rejected" });
+    },
+    onError: (e: Error) => toast({ variant: "destructive", title: "Reject failed", description: e.message }),
+  });
+
+  const resetForm = () => {
+    setFormName("");
+    setFormType("custom");
+    setFormSteps([{ approver_id: "" }, { approver_id: "" }]);
+  };
+
+  const handleCreate = () => {
+    createMut.mutate({
+      name: formName.trim(),
+      type: formType,
+      steps: formSteps
+        .filter((s) => s.approver_id)
+        .map((s) => ({ approver_id: Number(s.approver_id) })),
+    });
+  };
+
+  const pendingRequests = requests.filter((r) => r.state === "in_progress");
+  const completedRequests = requests.filter((r) => r.state !== "in_progress");
+
   return (
     <div className="space-y-6">
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold tracking-tight">Approval Workflows</h1>
-          <p className="text-muted-foreground">Manage multi-step approval processes for exam content.</p>
+          <p className="text-muted-foreground">
+            Manage multi-step approval processes for exam content.
+          </p>
         </div>
-        <Dialog>
+        <Dialog
+          open={createOpen}
+          onOpenChange={(open) => {
+            setCreateOpen(open);
+            if (!open) resetForm();
+          }}
+        >
           <DialogTrigger asChild>
-            <Button size="sm"><Plus className="h-4 w-4 mr-1" /> Create Workflow</Button>
+            <Button size="sm">
+              <Plus className="h-4 w-4 mr-1" /> Create Workflow
+            </Button>
           </DialogTrigger>
           <DialogContent>
-            <DialogHeader><DialogTitle>Create Workflow</DialogTitle></DialogHeader>
+            <DialogHeader>
+              <DialogTitle>Create Workflow</DialogTitle>
+              <DialogDescription>Define a multi-step approval process.</DialogDescription>
+            </DialogHeader>
             <div className="space-y-4">
-              <div className="space-y-2"><Label>Workflow Name</Label><Input placeholder="e.g. Exam Content Review" /></div>
               <div className="space-y-2">
-                <Label>Step 1 — Assignee</Label>
+                <Label>
-                <Select><SelectTrigger><SelectValue placeholder="Select assignee" /></SelectTrigger>
+                  Workflow Name <span className="text-destructive">*</span>
-                  <SelectContent><SelectItem value="smith">Dr. Smith</SelectItem><SelectItem value="lee">Prof. Lee</SelectItem><SelectItem value="kim">Mr. Kim</SelectItem></SelectContent>
+                </Label>
-                </Select>
+                <Input
+                  value={formName}
+                  onChange={(e) => setFormName(e.target.value)}
+                  placeholder="e.g. Exam Content Review"
+                />
               </div>
               <div className="space-y-2">
-                <Label>Step 2 — Assignee</Label>
+                <Label>Type</Label>
-                <Select><SelectTrigger><SelectValue placeholder="Select assignee" /></SelectTrigger>
+                <Select value={formType} onValueChange={setFormType}>
-                  <SelectContent><SelectItem value="smith">Dr. Smith</SelectItem><SelectItem value="lee">Prof. Lee</SelectItem><SelectItem value="admin">Admin</SelectItem></SelectContent>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="custom">Custom</SelectItem>
+                    <SelectItem value="exam_publish">Exam Publication</SelectItem>
+                    <SelectItem value="assignment_publish">Assignment Publication</SelectItem>
+                    <SelectItem value="content_publish">Content Publication</SelectItem>
+                  </SelectContent>
                 </Select>
               </div>
-              <Button className="w-full">Create</Button>
+
+              {formSteps.map((step, i) => (
+                <div key={i} className="space-y-1">
+                  <div className="flex items-center justify-between">
+                    <Label>Step {i + 1} — Approver</Label>
+                    {formSteps.length > 1 && (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6 text-muted-foreground hover:text-destructive"
+                        onClick={() =>
+                          setFormSteps((s) => s.filter((_, idx) => idx !== i))
+                        }
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    )}
+                  </div>
+                  <Select
+                    value={step.approver_id}
+                    onValueChange={(v) =>
+                      setFormSteps((s) =>
+                        s.map((st, idx) => (idx === i ? { ...st, approver_id: v } : st))
+                      )
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select approver" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {users.map((u) => (
+                        <SelectItem key={u.id} value={String(u.id)}>
+                          {u.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ))}
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="w-full"
+                onClick={() => setFormSteps((s) => [...s, { approver_id: "" }])}
+              >
+                <Plus className="h-3 w-3 mr-1" /> Add Step
+              </Button>
             </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setCreateOpen(false)}>
+                Cancel
+              </Button>
+              <Button
+                disabled={!formName.trim() || createMut.isPending}
+                onClick={handleCreate}
+              >
+                {createMut.isPending ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                    Creating...
+                  </>
+                ) : (
+                  "Create"
+                )}
+              </Button>
+            </DialogFooter>
           </DialogContent>
         </Dialog>
       </div>
 
-      <div className="space-y-4">
+      {/* Loading */}
+      {(workflowsQ.isLoading || requestsQ.isLoading) && (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {/* Pending Requests */}
+      {pendingRequests.length > 0 && (
+        <div className="space-y-3">
+          <h2 className="text-lg font-semibold flex items-center gap-2">
+            <Clock className="h-5 w-5 text-amber-500" />
+            Pending Approval ({pendingRequests.length})
+          </h2>
+          {pendingRequests.map((req) => {
+            const wf = workflows.find((w) => w.id === req.workflow_id);
+            return (
+              <Card key={req.id} className="border-amber-200 bg-amber-50/30">
+                <CardContent className="p-4">
+                  <div className="flex items-center justify-between mb-3">
+                    <div>
+                      <p className="font-semibold">{req.workflow_name}</p>
+                      <p className="text-xs text-muted-foreground">
+                        Requested by {req.requester_name} &middot;{" "}
+                        {req.res_model.replace("encoach.", "")} #{req.res_id}
+                      </p>
+                    </div>
+                    {stateBadge(req.state)}
+                  </div>
+
+                  {wf && (
+                    <div className="flex items-center gap-2 flex-wrap mb-3">
+                      {wf.steps.map((step, i) => {
+                        const isActive = step.id === req.current_stage_id;
+                        return (
+                          <div key={step.id} className="flex items-center gap-2">
+                            <div
+                              className={`flex items-center gap-2 rounded-lg border p-3 min-w-[160px] transition-all ${
+                                isActive
+                                  ? "border-amber-400 bg-amber-50 ring-2 ring-amber-200"
+                                  : step.status === "approved"
+                                    ? "border-green-200 bg-green-50/50"
+                                    : step.status === "rejected"
+                                      ? "border-red-200 bg-red-50/50"
+                                      : "bg-muted/30"
+                              }`}
+                            >
+                              {statusIcon(step.status)}
+                              <div>
+                                <p className="text-sm font-medium">Step {i + 1}</p>
+                                <p className="text-xs text-muted-foreground">
+                                  {step.approver_name}
+                                </p>
+                              </div>
+                            </div>
+                            {i < wf.steps.length - 1 && (
+                              <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  <div className="flex gap-2">
+                    <Button
+                      size="sm"
+                      disabled={approveMut.isPending}
+                      onClick={() => approveMut.mutate(req.id)}
+                    >
+                      {approveMut.isPending ? (
+                        <Loader2 className="h-3.5 w-3.5 animate-spin mr-1" />
+                      ) : (
+                        <CheckCircle className="h-3.5 w-3.5 mr-1" />
+                      )}
+                      Approve
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => setRejectDialog(req.id)}
+                    >
+                      <XCircle className="h-3.5 w-3.5 mr-1" />
+                      Reject
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Workflow Templates */}
+      <div className="space-y-3">
+        <h2 className="text-lg font-semibold flex items-center gap-2">
+          <ShieldCheck className="h-5 w-5" />
+          Workflow Templates ({workflows.length})
+        </h2>
+        {workflows.length === 0 && !workflowsQ.isLoading && (
+          <Card className="border-dashed">
+            <CardContent className="p-8 text-center text-muted-foreground">
+              No workflows defined yet. Create one to get started.
+            </CardContent>
+          </Card>
+        )}
         {workflows.map((wf) => (
           <Card key={wf.id} className="border-0 shadow-sm">
             <CardHeader className="pb-3">
               <div className="flex items-center justify-between">
-                <CardTitle className="text-base font-semibold">{wf.name}</CardTitle>
+                <div className="flex items-center gap-3">
-                <Badge variant={wf.status === "Completed" ? "default" : wf.status === "Rejected" ? "destructive" : "secondary"}>{wf.status}</Badge>
+                  <CardTitle className="text-base font-semibold">{wf.name}</CardTitle>
+                  <Badge variant="outline" className="text-xs capitalize">
+                    {wf.type.replace(/_/g, " ")}
+                  </Badge>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                  onClick={() => {
+                    if (confirm(`Delete workflow "${wf.name}"?`)) deleteMut.mutate(wf.id);
+                  }}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
               </div>
             </CardHeader>
             <CardContent>
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 flex-wrap">
                 {wf.steps.map((step, i) => (
-                  <div key={i} className="flex items-center gap-2">
+                  <div key={step.id} className="flex items-center gap-2">
                     <div className="flex items-center gap-2 rounded-lg border p-3 bg-muted/30 min-w-[160px]">
-                      {statusIcon(step.status)}
+                      <div className="h-6 w-6 rounded-full bg-primary/10 flex items-center justify-center text-xs font-semibold text-primary">
+                        {i + 1}
+                      </div>
                       <div>
-                        <p className="text-sm font-medium">{step.name}</p>
+                        <p className="text-sm font-medium">{step.approver_name}</p>
-                        <p className="text-xs text-muted-foreground">{step.assignee}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {step.max_days}d limit
+                          {step.auto_escalate ? " · auto-escalate" : ""}
+                        </p>
                       </div>
                     </div>
-                    {i < wf.steps.length - 1 && <div className="w-8 h-0.5 bg-border" />}
+                    {i < wf.steps.length - 1 && (
+                      <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+                    )}
                   </div>
                 ))}
               </div>
-              {wf.status === "In Progress" && (
-                <div className="space-y-4 mt-4">
-                  <AiGradingAssistant onAccept={(marks, feedback) => {
-                    toast({ title: "AI Grade Accepted", description: `Marks: ${marks}/100 applied with AI feedback.` });
-                  }} />
-                  <div className="flex gap-2">
-                    <Button size="sm" variant="default">Approve</Button>
-                    <Button size="sm" variant="outline">Reject</Button>
-                  </div>
-                </div>
-              )}
             </CardContent>
           </Card>
         ))}
       </div>
+
+      {/* Completed Requests */}
+      {completedRequests.length > 0 && (
+        <div className="space-y-3">
+          <h2 className="text-lg font-semibold flex items-center gap-2">
+            <FileText className="h-5 w-5" />
+            Recent Decisions ({completedRequests.length})
+          </h2>
+          {completedRequests.map((req) => (
+            <Card key={req.id} className="border-0 shadow-sm">
+              <CardContent className="p-4 flex items-center justify-between">
+                <div>
+                  <p className="font-medium">{req.workflow_name}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {req.requester_name} &middot; {req.res_model.replace("encoach.", "")} #
+                    {req.res_id}
+                    {req.created_at && (
+                      <>
+                        {" "}
+                        &middot; {new Date(req.created_at).toLocaleDateString()}
+                      </>
+                    )}
+                  </p>
+                </div>
+                {stateBadge(req.state)}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Reject Dialog */}
+      <Dialog
+        open={rejectDialog !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setRejectDialog(null);
+            setRejectComment("");
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Reject Request</DialogTitle>
+            <DialogDescription>Provide a reason for rejection.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            <Label>Comment</Label>
+            <Textarea
+              value={rejectComment}
+              onChange={(e) => setRejectComment(e.target.value)}
+              placeholder="Reason for rejection..."
+              rows={3}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRejectDialog(null)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              disabled={rejectMut.isPending}
+              onClick={() => {
+                if (rejectDialog !== null) {
+                  rejectMut.mutate({ id: rejectDialog, comment: rejectComment });
+                }
+              }}
+            >
+              {rejectMut.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+              ) : null}
+              Reject
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/pages/AssignmentsPage.tsx

@@ -1,91 +1,320 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Search, Plus, Trash2 } from "lucide-react";
+import {
-import { useAssignments, useCreateAssignment } from "@/hooks/queries";
+  Search, Plus, Trash2, Loader2, Calendar, Users, Clock,
+  CheckCircle2, Archive, AlertTriangle, PlayCircle, Eye
+} from "lucide-react";
+import { assignmentsService } from "@/services/assignments.service";
+import { api } from "@/lib/api-client";
+import { useBatches, useStudents } from "@/hooks/queries";
 import { useToast } from "@/hooks/use-toast";
+import type { ExamSchedule, ScheduleState, ExamScheduleCreateRequest } from "@/types";
+
+interface CustomExam {
+  id: number;
+  title: string;
+  status: string;
+}
+
+interface Entity {
+  id: number;
+  name: string;
+}
+
+const STATE_TABS: { key: ScheduleState | "all"; label: string; icon: React.ReactNode }[] = [
+  { key: "all", label: "All", icon: <Eye className="h-3.5 w-3.5" /> },
+  { key: "active", label: "Active", icon: <PlayCircle className="h-3.5 w-3.5" /> },
+  { key: "planned", label: "Planned", icon: <Clock className="h-3.5 w-3.5" /> },
+  { key: "past", label: "Past", icon: <CheckCircle2 className="h-3.5 w-3.5" /> },
+  { key: "start_expired", label: "Start Expired", icon: <AlertTriangle className="h-3.5 w-3.5" /> },
+  { key: "archived", label: "Archived", icon: <Archive className="h-3.5 w-3.5" /> },
+];
+
+const OPTION_FIELDS: { key: keyof ExamScheduleCreateRequest; label: string }[] = [
+  { key: "full_length", label: "Full length exams" },
+  { key: "generate_different", label: "Generate different exams" },
+  { key: "auto_release_results", label: "Auto release results" },
+  { key: "auto_start", label: "Auto start exam" },
+  { key: "official_exam", label: "Official Exam" },
+  { key: "hide_assignee_details", label: "Hide Assignees Details from Teachers" },
+];
+
+const stateBadgeVariant = (s: ScheduleState): "default" | "secondary" | "outline" | "destructive" => {
+  switch (s) {
+    case "active": return "default";
+    case "planned": return "secondary";
+    case "past": return "outline";
+    case "start_expired": return "destructive";
+    case "archived": return "outline";
+    default: return "secondary";
+  }
+};
+
+type FormState = {
+  name: string;
+  exam_id: string;
+  entity_id: string;
+  start_date: string;
+  start_time: string;
+  end_date: string;
+  end_time: string;
+  assign_mode: "entity" | "batch" | "individual";
+  batch_ids: Set<number>;
+  student_ids: Set<number>;
+  full_length: boolean;
+  generate_different: boolean;
+  auto_release_results: boolean;
+  auto_start: boolean;
+  official_exam: boolean;
+  hide_assignee_details: boolean;
+};
+
+const emptyForm = (): FormState => ({
+  name: "",
+  exam_id: "",
+  entity_id: "",
+  start_date: "",
+  start_time: "09:00",
+  end_date: "",
+  end_time: "17:00",
+  assign_mode: "batch",
+  batch_ids: new Set(),
+  student_ids: new Set(),
+  full_length: true,
+  generate_different: false,
+  auto_release_results: false,
+  auto_start: false,
+  official_exam: false,
+  hide_assignee_details: false,
+});
 
 export default function AssignmentsPage() {
   const [search, setSearch] = useState("");
+  const [stateFilter, setStateFilter] = useState<ScheduleState | "all">("all");
   const [createOpen, setCreateOpen] = useState(false);
-  const [form, setForm] = useState({ title: "", entity_id: "", start_date: "", end_date: "" });
+  const [form, setForm] = useState<FormState>(emptyForm());
   const { toast } = useToast();
+  const qc = useQueryClient();
 
-  const assignmentsQ = useAssignments({ size: 200 });
+  const schedulesQ = useQuery({
-  const createMut = useCreateAssignment();
+    queryKey: ["exam-schedules", stateFilter],
+    queryFn: () => assignmentsService.listSchedules(
+      stateFilter === "all" ? {} : { state: stateFilter }
+    ),
+  });
+  const schedules = schedulesQ.data?.items ?? [];
 
-  const items = assignmentsQ.data?.items ?? assignmentsQ.data?.data ?? [];
+  const customExamsQ = useQuery({
-  const assignments = Array.isArray(items) ? items : [];
+    queryKey: ["custom-exams-for-assign"],
-
+    queryFn: () => api.get<{ items: CustomExam[]; total: number }>("/exam/custom/list?per_page=200"),
-  const q = search.toLowerCase();
+  });
-  const filtered = assignments.filter(a =>
+  const publishedExams = (customExamsQ.data?.items ?? []).filter(
-    a.title?.toLowerCase().includes(q) || a.entity_name?.toLowerCase().includes(q),
+    (e) => e.status === "published" || e.status === "draft"
   );
 
-  const loading = assignmentsQ.isLoading;
+  const entitiesQ = useQuery({
+    queryKey: ["entities-for-assign"],
+    queryFn: () => api.get<{ items: Entity[] }>("/entities"),
+  });
+  const entities = entitiesQ.data?.items ?? [];
+
+  const batchesQ = useBatches({ size: 200 });
+  const batches = batchesQ.data?.items ?? [];
+
+  const studentsQ = useStudents({ size: 200 });
+  const students = studentsQ.data?.items ?? [];
+
+  const stateCounts = useMemo(() => {
+    const all = schedulesQ.data?.items ?? [];
+    const counts: Record<string, number> = { all: all.length };
+    for (const s of all) {
+      counts[s.state] = (counts[s.state] || 0) + 1;
+    }
+    return counts;
+  }, [schedulesQ.data]);
+
+  const allSchedulesQ = useQuery({
+    queryKey: ["exam-schedules", "all"],
+    queryFn: () => assignmentsService.listSchedules({}),
+    enabled: stateFilter !== "all",
+  });
+
+  const totalCounts = useMemo(() => {
+    const items = stateFilter === "all" ? schedules : (allSchedulesQ.data?.items ?? []);
+    const counts: Record<string, number> = { all: items.length };
+    for (const s of items) {
+      counts[s.state] = (counts[s.state] || 0) + 1;
+    }
+    return counts;
+  }, [stateFilter, schedules, allSchedulesQ.data]);
+
+  const createMut = useMutation({
+    mutationFn: (data: ExamScheduleCreateRequest) => assignmentsService.createSchedule(data),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["exam-schedules"] });
+      setCreateOpen(false);
+      setForm(emptyForm());
+      toast({ title: "Exam scheduled successfully" });
+    },
+    onError: (err: Error) => toast({ variant: "destructive", title: "Error", description: err.message }),
+  });
+
+  const deleteMut = useMutation({
+    mutationFn: (id: number) => assignmentsService.deleteSchedule(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["exam-schedules"] });
+      toast({ title: "Schedule deleted" });
+    },
+    onError: (err: Error) => toast({ variant: "destructive", title: "Error", description: err.message }),
+  });
+
+  const archiveMut = useMutation({
+    mutationFn: (id: number) => assignmentsService.archiveSchedule(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["exam-schedules"] });
+      toast({ title: "Schedule archived" });
+    },
+  });
+
+  const q = search.toLowerCase();
+  const filtered = schedules.filter(
+    (s) => s.name.toLowerCase().includes(q) || s.exam_title.toLowerCase().includes(q)
+  );
 
   function handleCreate() {
-    createMut.mutate(
+    const startDt = form.start_date && form.start_time ? `${form.start_date}T${form.start_time}:00` : "";
-      { title: form.title, entity_id: Number(form.entity_id) || 0, start_date: form.start_date, end_date: form.end_date },
+    const endDt = form.end_date && form.end_time ? `${form.end_date}T${form.end_time}:00` : "";
-      {
+
-        onSuccess: () => { setCreateOpen(false); setForm({ title: "", entity_id: "", start_date: "", end_date: "" }); toast({ title: "Assignment created" }); },
+    if (!form.name || !form.exam_id || !startDt || !endDt) {
-        onError: (err: Error) => toast({ title: "Error", description: err.message, variant: "destructive" }),
+      toast({ variant: "destructive", title: "Missing fields", description: "Please fill in name, exam, start date/time, and end date/time." });
-      },
+      return;
-    );
+    }
+
+    createMut.mutate({
+      name: form.name,
+      exam_id: Number(form.exam_id),
+      entity_id: form.entity_id ? Number(form.entity_id) : undefined,
+      start_date: startDt,
+      end_date: endDt,
+      assign_mode: form.assign_mode,
+      batch_ids: [...form.batch_ids],
+      student_ids: [...form.student_ids],
+      full_length: form.full_length,
+      generate_different: form.generate_different,
+      auto_release_results: form.auto_release_results,
+      auto_start: form.auto_start,
+      official_exam: form.official_exam,
+      hide_assignee_details: form.hide_assignee_details,
+    });
   }
 
+  const updateF = (patch: Partial<FormState>) => setForm((p) => ({ ...p, ...patch }));
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">Assignments</h1>
+          <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
-          <p className="text-muted-foreground">Create and manage assignments.</p>
+            <Calendar className="h-6 w-6 text-primary" /> Assignments
+          </h1>
+          <p className="text-muted-foreground">Schedule exams and assign them to entities, classes, or students.</p>
         </div>
-        <Button size="sm" onClick={() => setCreateOpen(true)}>
+        <Button onClick={() => { setForm(emptyForm()); setCreateOpen(true); }}>
-          <Plus className="h-4 w-4 mr-1" /> Create Assignment
+          <Plus className="h-4 w-4 mr-1" /> Schedule Exam
         </Button>
       </div>
 
+      {/* State tabs */}
+      <div className="inline-flex items-center rounded-full border-2 border-primary bg-primary/5 p-1 gap-0">
+        {STATE_TABS.map((tab) => (
+          <button
+            key={tab.key}
+            className={`flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition-all ${
+              stateFilter === tab.key
+                ? "bg-white text-primary shadow-sm"
+                : "text-primary/70 hover:text-primary"
+            }`}
+            onClick={() => setStateFilter(tab.key)}
+          >
+            {tab.icon}
+            {tab.label}
+            <span className={`text-xs ml-0.5 ${stateFilter === tab.key ? "text-primary" : "text-primary/50"}`}>
+              ({totalCounts[tab.key] ?? 0})
+            </span>
+          </button>
+        ))}
+      </div>
+
       <div className="relative max-w-sm">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-        <Input placeholder="Search assignments..." className="pl-9" value={search} onChange={(e) => setSearch(e.target.value)} />
+        <Input placeholder="Search schedules..." className="pl-9" value={search} onChange={(e) => setSearch(e.target.value)} />
       </div>
 
-      {loading ? (
+      {schedulesQ.isLoading ? (
-        <div className="flex items-center justify-center min-h-[300px]"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" /></div>
+        <div className="flex justify-center py-12"><Loader2 className="h-8 w-8 animate-spin text-muted-foreground" /></div>
+      ) : filtered.length === 0 ? (
+        <Card className="border-dashed">
+          <CardContent className="p-12 text-center text-muted-foreground">
+            <Calendar className="h-10 w-10 mx-auto mb-3 opacity-40" />
+            <p className="font-medium">No exam schedules found</p>
+            <p className="text-sm mt-1">Create a new schedule to assign exams to students.</p>
+          </CardContent>
+        </Card>
       ) : (
         <Card className="border-0 shadow-sm">
           <CardContent className="p-0">
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>Title</TableHead>
+                  <TableHead>Schedule Name</TableHead>
+                  <TableHead>Exam</TableHead>
                   <TableHead>Entity</TableHead>
                   <TableHead>Start</TableHead>
                   <TableHead>End</TableHead>
                   <TableHead>State</TableHead>
                   <TableHead>Assignees</TableHead>
                   <TableHead>Completed</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {filtered.length === 0 && (
+                {filtered.map((s) => (
-                  <TableRow><TableCell colSpan={7} className="text-center text-muted-foreground py-8">No assignments found.</TableCell></TableRow>
+                  <TableRow key={s.id}>
-                )}
+                    <TableCell className="font-medium">{s.name}</TableCell>
-                {filtered.map((a) => (
+                    <TableCell>{s.exam_title}</TableCell>
-                  <TableRow key={a.id}>
+                    <TableCell>{s.entity_name || "—"}</TableCell>
-                    <TableCell className="font-medium">{a.title}</TableCell>
+                    <TableCell className="text-xs">{s.start_date ? new Date(s.start_date).toLocaleString() : "—"}</TableCell>
-                    <TableCell>{a.entity_name || "—"}</TableCell>
+                    <TableCell className="text-xs">{s.end_date ? new Date(s.end_date).toLocaleString() : "—"}</TableCell>
-                    <TableCell>{a.start_date || "—"}</TableCell>
+                    <TableCell>
-                    <TableCell>{a.end_date || "—"}</TableCell>
+                      <Badge variant={stateBadgeVariant(s.state)} className="capitalize">{s.state.replace("_", " ")}</Badge>
-                    <TableCell><Badge variant={a.state === "active" ? "default" : "secondary"} className="capitalize">{a.state}</Badge></TableCell>
+                    </TableCell>
-                    <TableCell>{a.assignee_count ?? 0}</TableCell>
+                    <TableCell>
-                    <TableCell>{a.completed_count ?? 0}</TableCell>
+                      <div className="flex items-center gap-1"><Users className="h-3.5 w-3.5 text-muted-foreground" />{s.assignee_count}</div>
+                    </TableCell>
+                    <TableCell>{s.completed_count}</TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-1">
+                        {s.state !== "archived" && (
+                          <Button variant="ghost" size="icon" className="h-7 w-7" title="Archive"
+                            onClick={() => archiveMut.mutate(s.id)}>
+                            <Archive className="h-3.5 w-3.5" />
+                          </Button>
+                        )}
+                        <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive" title="Delete"
+                          onClick={() => { if (confirm(`Delete schedule "${s.name}"?`)) deleteMut.mutate(s.id); }}>
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>
@@ -94,21 +323,169 @@ export default function AssignmentsPage() {
         </Card>
       )}
 
+      {/* Create Schedule Dialog */}
       <Dialog open={createOpen} onOpenChange={setCreateOpen}>
-        <DialogContent>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader><DialogTitle>Create Assignment</DialogTitle></DialogHeader>
+          <DialogHeader>
-          <div className="space-y-4">
+            <DialogTitle>Schedule Exam</DialogTitle>
-            <div className="space-y-2"><Label>Title</Label><Input value={form.title} onChange={(e) => setForm(f => ({ ...f, title: e.target.value }))} placeholder="e.g. IELTS Prep Q2" /></div>
+            <DialogDescription>Select an exam, assign it to students, and set scheduling options.</DialogDescription>
-            <div className="space-y-2"><Label>Entity ID</Label><Input type="number" value={form.entity_id} onChange={(e) => setForm(f => ({ ...f, entity_id: e.target.value }))} /></div>
+          </DialogHeader>
-            <div className="grid grid-cols-2 gap-3">
+
-              <div className="space-y-2"><Label>Start Date</Label><Input type="date" value={form.start_date} onChange={(e) => setForm(f => ({ ...f, start_date: e.target.value }))} /></div>
+          <div className="space-y-5 py-2">
-              <div className="space-y-2"><Label>End Date</Label><Input type="date" value={form.end_date} onChange={(e) => setForm(f => ({ ...f, end_date: e.target.value }))} /></div>
+            {/* Basic info */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-1">
+                <Label>Schedule Name <span className="text-destructive">*</span></Label>
+                <Input value={form.name} onChange={(e) => updateF({ name: e.target.value })} placeholder="e.g. Q2 IELTS Exam" />
+              </div>
+              <div className="space-y-1">
+                <Label>Select Exam <span className="text-destructive">*</span></Label>
+                <Select value={form.exam_id} onValueChange={(v) => updateF({ exam_id: v })}>
+                  <SelectTrigger><SelectValue placeholder="Choose exam..." /></SelectTrigger>
+                  <SelectContent>
+                    {publishedExams.map((e) => (
+                      <SelectItem key={e.id} value={String(e.id)}>
+                        {e.title} <span className="text-xs text-muted-foreground ml-1">({e.status})</span>
+                      </SelectItem>
+                    ))}
+                    {publishedExams.length === 0 && (
+                      <SelectItem value="_none" disabled>No exams available</SelectItem>
+                    )}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {/* Date/Time */}
+            <div className="space-y-2">
+              <Label className="text-sm font-semibold">Schedule Date & Time</Label>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                <div className="space-y-1">
+                  <Label className="text-xs">Start Date <span className="text-destructive">*</span></Label>
+                  <Input type="date" value={form.start_date} onChange={(e) => updateF({ start_date: e.target.value })} />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs">Start Time</Label>
+                  <Input type="time" value={form.start_time} onChange={(e) => updateF({ start_time: e.target.value })} />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs">End Date <span className="text-destructive">*</span></Label>
+                  <Input type="date" value={form.end_date} onChange={(e) => updateF({ end_date: e.target.value })} />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs">End Time</Label>
+                  <Input type="time" value={form.end_time} onChange={(e) => updateF({ end_time: e.target.value })} />
+                </div>
+              </div>
+            </div>
+
+            {/* Options checkboxes */}
+            <div className="space-y-2">
+              <Label className="text-sm font-semibold">Exam Options</Label>
+              <div className="flex flex-wrap gap-x-6 gap-y-2">
+                {OPTION_FIELDS.map((opt) => (
+                  <label key={opt.key} className="flex items-center gap-2 text-sm cursor-pointer">
+                    <Checkbox
+                      checked={form[opt.key] as boolean}
+                      onCheckedChange={(checked) => updateF({ [opt.key]: !!checked } as Partial<FormState>)}
+                      className="h-4 w-4"
+                    />
+                    {opt.label}
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* Assignment target */}
+            <div className="space-y-3">
+              <Label className="text-sm font-semibold">Assign To</Label>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs">Assignment Mode</Label>
+                  <Select value={form.assign_mode} onValueChange={(v) => updateF({ assign_mode: v as FormState["assign_mode"] })}>
+                    <SelectTrigger><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="entity">Entire Entity</SelectItem>
+                      <SelectItem value="batch">Class / Batch</SelectItem>
+                      <SelectItem value="individual">Individual Students</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs">Entity</Label>
+                  <Select value={form.entity_id} onValueChange={(v) => updateF({ entity_id: v })}>
+                    <SelectTrigger><SelectValue placeholder="Select entity..." /></SelectTrigger>
+                    <SelectContent>
+                      {entities.map((e) => (
+                        <SelectItem key={e.id} value={String(e.id)}>{e.name}</SelectItem>
+                      ))}
+                      {entities.length === 0 && (
+                        <SelectItem value="_none" disabled>No entities</SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {/* Batch selection */}
+              {form.assign_mode === "batch" && (
+                <div className="space-y-1">
+                  <Label className="text-xs">Select Classes</Label>
+                  <div className="max-h-36 overflow-y-auto border rounded-md p-2 space-y-1">
+                    {batches.map((b) => (
+                      <label key={b.id} className="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5">
+                        <Checkbox
+                          checked={form.batch_ids.has(b.id)}
+                          onCheckedChange={(checked) => {
+                            setForm((p) => {
+                              const next = new Set(p.batch_ids);
+                              checked ? next.add(b.id) : next.delete(b.id);
+                              return { ...p, batch_ids: next };
+                            });
+                          }}
+                          className="h-3.5 w-3.5"
+                        />
+                        {b.name}
+                      </label>
+                    ))}
+                    {batches.length === 0 && <p className="text-xs text-muted-foreground italic text-center py-2">No classes available</p>}
+                  </div>
+                </div>
+              )}
+
+              {/* Individual student selection */}
+              {form.assign_mode === "individual" && (
+                <div className="space-y-1">
+                  <Label className="text-xs">Select Students</Label>
+                  <div className="max-h-48 overflow-y-auto border rounded-md p-2 space-y-1">
+                    {students.map((s) => (
+                      <label key={s.id} className="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5">
+                        <Checkbox
+                          checked={form.student_ids.has(s.id)}
+                          onCheckedChange={(checked) => {
+                            setForm((p) => {
+                              const next = new Set(p.student_ids);
+                              checked ? next.add(s.id) : next.delete(s.id);
+                              return { ...p, student_ids: next };
+                            });
+                          }}
+                          className="h-3.5 w-3.5"
+                        />
+                        {s.name}
+                        {s.email && <span className="text-xs text-muted-foreground ml-auto">{s.email}</span>}
+                      </label>
+                    ))}
+                    {students.length === 0 && <p className="text-xs text-muted-foreground italic text-center py-2">No students available</p>}
+                  </div>
+                </div>
+              )}
             </div>
           </div>
+
           <DialogFooter>
             <Button variant="outline" onClick={() => setCreateOpen(false)}>Cancel</Button>
-            <Button disabled={createMut.isPending || !form.title} onClick={handleCreate}>
+            <Button disabled={createMut.isPending || !form.name || !form.exam_id || !form.start_date || !form.end_date} onClick={handleCreate}>
-              {createMut.isPending ? "Creating..." : "Create"}
+              {createMut.isPending ? <><Loader2 className="h-4 w-4 animate-spin mr-2" />Creating...</> : "Schedule Exam"}
             </Button>
           </DialogFooter>
         </DialogContent>

src/pages/GenerationPage.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -52,12 +53,17 @@ import {
   Sparkles,
   Settings2,
   ListChecks,
+  GraduationCap,
+  Dumbbell,
+  Lock,
 } from "lucide-react";
 import AiTipBanner from "@/components/ai/AiTipBanner";
 import { generationService } from "@/services/generation.service";
 import { mediaService, type Avatar } from "@/services/media.service";
 import { examsService } from "@/services/exams.service";
+import { api } from "@/lib/api-client";
 import { useToast } from "@/hooks/use-toast";
+import type { ExamStructureConfig } from "@/types";
 
 type ModuleKey = "reading" | "listening" | "writing" | "speaking" | "level" | "industry";
 
@@ -222,6 +228,7 @@ interface ModuleState {
   approvalWorkflow: string;
   rubricGroup: string;
   rubricCriteria: string;
+  rubricId: string;
   totalMarks: number;
   gradingSystem: string;
   shuffling: boolean;
@@ -273,6 +280,7 @@ function defaultModuleState(mod: ModuleKey): ModuleState {
     approvalWorkflow: "",
     rubricGroup: "",
     rubricCriteria: "",
+    rubricId: "",
     totalMarks: 0,
     gradingSystem: "",
     shuffling: false,
@@ -288,9 +296,17 @@ function defaultModuleState(mod: ModuleKey): ModuleState {
 
 export default function GenerationPage() {
   const { toast } = useToast();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [examMode, setExamMode] = useState<"official" | "practice">("official");
   const [title, setTitle] = useState("");
   const [examLabel, setExamLabel] = useState("");
   const [examStructure, setExamStructure] = useState("");
+  const [newStructureDialog, setNewStructureDialog] = useState<{
+    open: boolean;
+    name: string;
+    modules: Set<ModuleKey>;
+  }>({ open: false, name: "", modules: new Set() });
   const [selectedModules, setSelectedModules] = useState<Set<ModuleKey>>(new Set());
   const [activeModule, setActiveModule] = useState<ModuleKey | null>(null);
   const [moduleStates, setModuleStates] = useState<Record<string, ModuleState>>({});
@@ -352,6 +368,47 @@ export default function GenerationPage() {
   });
   const structures = structuresQ.data?.items ?? [];
 
+  const rubricsQ = useQuery({
+    queryKey: ["rubrics"],
+    queryFn: () => examsService.listRubrics({}),
+  });
+  const rubrics = rubricsQ.data?.items ?? [];
+
+  const rubricGroupsQ = useQuery({
+    queryKey: ["rubric-groups"],
+    queryFn: () => examsService.listRubricGroups({}),
+  });
+  const rubricGroups = rubricGroupsQ.data?.items ?? [];
+
+  const entitiesQ = useQuery({
+    queryKey: ["entities"],
+    queryFn: () => api.get<{ items: { id: number; name: string; code: string; type: string }[] }>("/entities"),
+  });
+  const entities = entitiesQ.data?.items ?? [];
+
+  const workflowsQ = useQuery({
+    queryKey: ["approval-workflows"],
+    queryFn: () => api.get<{ items: { id: number; name: string; type: string }[] }>("/approval-workflows"),
+  });
+  const approvalWorkflows = workflowsQ.data?.items ?? [];
+
+  const selectedStructure = structures.find((s) => String(s.id) === examStructure);
+  const selectedStructureConfig = (selectedStructure?.config && typeof selectedStructure.config === "object" ? selectedStructure.config : null) as ExamStructureConfig | null;
+  const isOfficialLocked = examMode === "official" && !!selectedStructure;
+
+  const createStructureMut = useMutation({
+    mutationFn: (data: { name: string; modules: string[] }) =>
+      examsService.createStructure(data),
+    onSuccess: (created) => {
+      queryClient.invalidateQueries({ queryKey: ["exam-structures"] });
+      setExamStructure(String(created.id));
+      setNewStructureDialog({ open: false, name: "", modules: new Set() });
+      toast({ title: "Structure created", description: `"${created.name}" has been added.` });
+    },
+    onError: (err: Error) =>
+      toast({ variant: "destructive", title: "Failed to create structure", description: err.message }),
+  });
+
   const getModuleState = useCallback((mod: ModuleKey): ModuleState => {
     return moduleStates[mod] ?? defaultModuleState(mod);
   }, [moduleStates]);
@@ -579,13 +636,44 @@ export default function GenerationPage() {
           accessType: st.accessType,
           shuffling: st.shuffling,
           gradingSystem: st.gradingSystem,
-          passages: mod === "reading" ? st.passages.map((p) => ({ text: p.text, category: p.category, type: p.type, exercises: p.exercises })) : undefined,
+          rubricId: st.rubricId,
-          sections: mod === "listening" ? st.listeningSections.map((s) => ({ type: s.type, context: s.context, audioUrl: s.audioUrl })) : undefined,
+          entity: st.entity,
-          tasks: mod === "writing" ? st.writingTasks.map((t) => ({ instructions: t.instructions, wordLimit: t.wordLimit, marks: t.marks })) : undefined,
+          approvalWorkflow: st.approvalWorkflow,
-          parts: mod === "speaking" ? st.speakingParts.map((p) => ({ type: p.type, script: p.script, videoUrl: p.videoUrl, marks: p.marks })) : undefined,
+          totalMarks: st.totalMarks,
+          passages: mod === "reading" ? st.passages.map((p) => ({
+            text: p.text, category: p.category, type: p.type,
+            exercises: p.exercises?.map((ex: Record<string, unknown>) => ({
+              type: ex.type, prompt: ex.prompt, options: ex.options,
+              correct_answer: ex.correct_answer, explanation: ex.explanation,
+              instructions: ex.instructions, marks: ex.marks || 1,
+              difficulty: ex.difficulty || st.difficulty?.[0] || "B2",
+            })),
+          })) : undefined,
+          sections: mod === "listening" ? st.listeningSections.map((s) => ({
+            type: s.type, context: s.context, audioUrl: s.audioUrl,
+            exercises: s.exercises?.map((ex: Record<string, unknown>) => ({
+              type: ex.type, prompt: ex.prompt, options: ex.options,
+              correct_answer: ex.correct_answer, explanation: ex.explanation,
+              instructions: ex.instructions, marks: ex.marks || 1,
+              difficulty: ex.difficulty || st.difficulty?.[0] || "B2",
+            })),
+          })) : undefined,
+          tasks: mod === "writing" ? st.writingTasks.map((t) => ({
+            instructions: t.instructions, wordLimit: t.wordLimit,
+            marks: t.marks, category: t.category, type: t.type,
+          })) : undefined,
+          parts: mod === "speaking" ? st.speakingParts.map((p) => ({
+            type: p.type, script: p.script, videoUrl: p.videoUrl, marks: p.marks,
+          })) : undefined,
         };
       }
-      return generationService.submitExam({ title, label: examLabel, modules: modulesPayload, skip_approval: skipApproval });
+      return generationService.submitExam({
+        title, label: examLabel,
+        exam_mode: examMode,
+        structure_id: examStructure ? Number(examStructure) : undefined,
+        modules: modulesPayload,
+        skip_approval: skipApproval,
+      });
     },
     onSuccess: (res) => toast({
       title: "Exam submitted successfully",
@@ -599,27 +687,6 @@ export default function GenerationPage() {
     generateAudioMut.isPending || generateWritingMut.isPending ||
     generateSpeakingMut.isPending || generateVideoMut.isPending || submitMut.isPending;
 
-  const renderDifficultyTags = (mod: ModuleKey) => {
-    const st = getModuleState(mod);
-    return (
-      <div className="space-y-1">
-        <Label className="text-xs">Difficulty</Label>
-        <div className="flex flex-wrap gap-1">
-          {st.difficulty.map((d) => (
-            <Badge key={d} variant="secondary" className="text-xs gap-1">
-              {d}
-              <button onClick={() => updateModuleState(mod, { difficulty: st.difficulty.filter((x) => x !== d) })} className="ml-0.5 hover:text-destructive"><X className="h-3 w-3" /></button>
-            </Badge>
-          ))}
-          <Select onValueChange={(v) => { if (!st.difficulty.includes(v)) updateModuleState(mod, { difficulty: [...st.difficulty, v] }); }}>
-            <SelectTrigger className="h-6 w-16 text-xs"><Plus className="h-3 w-3" /></SelectTrigger>
-            <SelectContent>{CEFR_LEVELS.filter((l) => !st.difficulty.includes(l)).map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}</SelectContent>
-          </Select>
-        </div>
-      </div>
-    );
-  };
-
   const renderCommonConfig = (mod: ModuleKey) => {
     const st = getModuleState(mod);
     return (
@@ -628,7 +695,34 @@ export default function GenerationPage() {
           <Label className="text-xs">Timer (minutes)</Label>
           <Input type="number" value={st.timer} min={1} onChange={(e) => updateModuleState(mod, { timer: Number(e.target.value) || 1 })} className="h-8 text-xs" />
         </div>
-        {renderDifficultyTags(mod)}
+        {examMode === "official" && (
+          <div className="space-y-1">
+            <Label className="text-xs">Rubric</Label>
+            <Select value={st.rubricId} onValueChange={(v) => updateModuleState(mod, { rubricId: v })}>
+              <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select rubric..." /></SelectTrigger>
+              <SelectContent>
+                {rubrics.length > 0 && (
+                  <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">Rubrics</div>
+                )}
+                {rubrics.map((r) => (
+                  <SelectItem key={`r-${r.id}`} value={`rubric-${r.id}`}>{r.name}</SelectItem>
+                ))}
+                {rubricGroups.length > 0 && (
+                  <>
+                    <div className="border-t my-1" />
+                    <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">Groups</div>
+                  </>
+                )}
+                {rubricGroups.map((g) => (
+                  <SelectItem key={`g-${g.id}`} value={`group-${g.id}`}>{g.name}</SelectItem>
+                ))}
+                {rubrics.length === 0 && rubricGroups.length === 0 && (
+                  <SelectItem value="_none" disabled>No rubrics available</SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
         <div className="space-y-1">
           <Label className="text-xs">Access Type</Label>
           <Select value={st.accessType} onValueChange={(v) => updateModuleState(mod, { accessType: v })}>
@@ -643,21 +737,36 @@ export default function GenerationPage() {
           <Label className="text-xs">Entities</Label>
           <Select value={st.entity} onValueChange={(v) => updateModuleState(mod, { entity: v })}>
             <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select..." /></SelectTrigger>
-            <SelectContent><SelectItem value="none">None</SelectItem></SelectContent>
+            <SelectContent>
+              <SelectItem value="none">None</SelectItem>
+              {entities.map((e) => (
+                <SelectItem key={e.id} value={String(e.id)}>{e.name}</SelectItem>
+              ))}
+            </SelectContent>
           </Select>
         </div>
         <div className="space-y-1">
           <Label className="text-xs">Approval Workflow</Label>
           <Select value={st.approvalWorkflow} onValueChange={(v) => updateModuleState(mod, { approvalWorkflow: v })}>
             <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select..." /></SelectTrigger>
-            <SelectContent><SelectItem value="default">Default</SelectItem><SelectItem value="none">None</SelectItem></SelectContent>
+            <SelectContent>
+              <SelectItem value="none">None</SelectItem>
+              {approvalWorkflows.map((w) => (
+                <SelectItem key={w.id} value={String(w.id)}>{w.name}</SelectItem>
+              ))}
+            </SelectContent>
           </Select>
         </div>
         <div className="space-y-1">
           <Label className="text-xs">Grading System</Label>
           <Select value={st.gradingSystem} onValueChange={(v) => updateModuleState(mod, { gradingSystem: v })}>
             <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="System Select" /></SelectTrigger>
-            <SelectContent><SelectItem value="ielts">IELTS Band</SelectItem><SelectItem value="percentage">Percentage</SelectItem></SelectContent>
+            <SelectContent>
+              <SelectItem value="ielts">IELTS Band (1-9)</SelectItem>
+              <SelectItem value="percentage">Percentage (0-100%)</SelectItem>
+              <SelectItem value="pass_fail">Pass / Fail</SelectItem>
+              <SelectItem value="cefr">CEFR Level (A1-C2)</SelectItem>
+            </SelectContent>
           </Select>
         </div>
         <div className="space-y-1">
@@ -1589,23 +1698,6 @@ export default function GenerationPage() {
   const renderLevelModule = () => {
     if (activeModule !== "level") return null;
     const st = getModuleState("level");
-    const renderLevelDifficulty = () => (
-      <div className="space-y-1">
-        <Label className="text-xs">Difficulty</Label>
-        <div className="flex flex-wrap gap-1">
-          {st.difficulty.map((d) => (
-            <Badge key={d} variant="secondary" className="text-xs gap-1">
-              {d}
-              <button onClick={() => updateModuleState("level", { difficulty: st.difficulty.filter((x) => x !== d) })} className="ml-0.5 hover:text-destructive"><X className="h-3 w-3" /></button>
-            </Badge>
-          ))}
-          <Select onValueChange={(v) => { if (!st.difficulty.includes(v)) updateModuleState("level", { difficulty: [...st.difficulty, v] }); }}>
-            <SelectTrigger className="h-6 w-16 text-xs"><Plus className="h-3 w-3" /></SelectTrigger>
-            <SelectContent>{CEFR_LEVELS.filter((l) => !st.difficulty.includes(l)).map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}</SelectContent>
-          </Select>
-        </div>
-      </div>
-    );
     return (
       <div className="space-y-4">
         <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
@@ -1613,7 +1705,34 @@ export default function GenerationPage() {
             <Label className="text-xs">Timer (minutes)</Label>
             <Input type="number" value={st.timer} min={1} onChange={(e) => updateModuleState("level", { timer: Number(e.target.value) || 1 })} className="h-8 text-xs" />
           </div>
-          {renderLevelDifficulty()}
+          {examMode === "official" && (
+            <div className="space-y-1">
+              <Label className="text-xs">Rubric</Label>
+              <Select value={st.rubricId} onValueChange={(v) => updateModuleState("level", { rubricId: v })}>
+                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select rubric..." /></SelectTrigger>
+                <SelectContent>
+                  {rubrics.length > 0 && (
+                    <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">Rubrics</div>
+                  )}
+                  {rubrics.map((r) => (
+                    <SelectItem key={`r-${r.id}`} value={`rubric-${r.id}`}>{r.name}</SelectItem>
+                  ))}
+                  {rubricGroups.length > 0 && (
+                    <>
+                      <div className="border-t my-1" />
+                      <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">Groups</div>
+                    </>
+                  )}
+                  {rubricGroups.map((g) => (
+                    <SelectItem key={`g-${g.id}`} value={`group-${g.id}`}>{g.name}</SelectItem>
+                  ))}
+                  {rubrics.length === 0 && rubricGroups.length === 0 && (
+                    <SelectItem value="_none" disabled>No rubrics available</SelectItem>
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
           <div className="space-y-1">
             <Label className="text-xs">Number of Parts</Label>
             <Input type="number" value={st.numberOfParts} min={1} max={5} className="h-8 text-xs"
@@ -1638,7 +1757,12 @@ export default function GenerationPage() {
             <Label className="text-xs">Entities</Label>
             <Select value={st.entity} onValueChange={(v) => updateModuleState("level", { entity: v })}>
               <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select..." /></SelectTrigger>
-              <SelectContent><SelectItem value="none">None</SelectItem></SelectContent>
+              <SelectContent>
+                <SelectItem value="none">None</SelectItem>
+                {entities.map((e) => (
+                  <SelectItem key={e.id} value={String(e.id)}>{e.name}</SelectItem>
+                ))}
+              </SelectContent>
             </Select>
           </div>
           <div className="flex items-center gap-2 col-span-2 md:col-span-1">
@@ -1797,21 +1921,34 @@ export default function GenerationPage() {
             <Label className="text-xs">Timer (minutes)</Label>
             <Input type="number" value={st.timer} min={1} onChange={(e) => updateModuleState("industry", { timer: Number(e.target.value) || 1 })} className="h-8 text-xs" />
           </div>
-          <div className="space-y-1">
+          {examMode === "official" && (
-            <Label className="text-xs">Difficulty</Label>
+            <div className="space-y-1">
-            <div className="flex flex-wrap gap-1">
+              <Label className="text-xs">Rubric</Label>
-              {st.difficulty.map((d) => (
+              <Select value={st.rubricId} onValueChange={(v) => updateModuleState("industry", { rubricId: v })}>
-                <Badge key={d} variant="secondary" className="text-xs gap-1">
+                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select rubric..." /></SelectTrigger>
-                  {d}
+                <SelectContent>
-                  <button onClick={() => updateModuleState("industry", { difficulty: st.difficulty.filter((x) => x !== d) })} className="ml-0.5 hover:text-destructive"><X className="h-3 w-3" /></button>
+                  {rubrics.length > 0 && (
-                </Badge>
+                    <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">Rubrics</div>
-              ))}
+                  )}
-              <Select onValueChange={(v) => { if (!st.difficulty.includes(v)) updateModuleState("industry", { difficulty: [...st.difficulty, v] }); }}>
+                  {rubrics.map((r) => (
-                <SelectTrigger className="h-6 w-16 text-xs"><Plus className="h-3 w-3" /></SelectTrigger>
+                    <SelectItem key={`r-${r.id}`} value={`rubric-${r.id}`}>{r.name}</SelectItem>
-                <SelectContent>{INDUSTRY_DIFFICULTY_LEVELS.filter((l) => !st.difficulty.includes(l)).map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}</SelectContent>
+                  ))}
+                  {rubricGroups.length > 0 && (
+                    <>
+                      <div className="border-t my-1" />
+                      <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">Groups</div>
+                    </>
+                  )}
+                  {rubricGroups.map((g) => (
+                    <SelectItem key={`g-${g.id}`} value={`group-${g.id}`}>{g.name}</SelectItem>
+                  ))}
+                  {rubrics.length === 0 && rubricGroups.length === 0 && (
+                    <SelectItem value="_none" disabled>No rubrics available</SelectItem>
+                  )}
+                </SelectContent>
               </Select>
             </div>
-          </div>
+          )}
           <div className="space-y-1">
             <Label className="text-xs">Number of Parts</Label>
             <Input type="number" value={st.numberOfParts} min={1} max={5} className="h-8 text-xs"
@@ -1836,7 +1973,12 @@ export default function GenerationPage() {
             <Label className="text-xs">Entities</Label>
             <Select value={st.entity} onValueChange={(v) => updateModuleState("industry", { entity: v })}>
               <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select..." /></SelectTrigger>
-              <SelectContent><SelectItem value="none">None</SelectItem></SelectContent>
+              <SelectContent>
+                <SelectItem value="none">None</SelectItem>
+                {entities.map((e) => (
+                  <SelectItem key={e.id} value={String(e.id)}>{e.name}</SelectItem>
+                ))}
+              </SelectContent>
             </Select>
           </div>
           <div className="flex items-center gap-2 col-span-2 md:col-span-1">
@@ -1946,6 +2088,110 @@ export default function GenerationPage() {
     );
   };
 
+  const handleStructureSelect = (val: string) => {
+    setExamStructure(val);
+    const s = structures.find((st) => String(st.id) === val);
+    if (s) {
+      const mods = (Array.isArray(s.modules) ? s.modules : []) as string[];
+      if (mods.length) {
+        const next = new Set<ModuleKey>();
+        mods.forEach((m) => { if (MODULE_KEYS.includes(m as ModuleKey)) next.add(m as ModuleKey); });
+        setSelectedModules(next);
+        if (next.size > 0) setActiveModule([...next][0]);
+      }
+    }
+  };
+
+  const handleModeSwitch = (mode: "official" | "practice") => {
+    setExamMode(mode);
+    if (mode === "practice") {
+      setExamStructure("");
+    }
+    setSelectedModules(new Set());
+    setActiveModule(null);
+  };
+
+  const renderOfficialStructurePreview = () => {
+    if (!selectedStructure || !selectedStructureConfig) return null;
+    const cfg = selectedStructureConfig;
+    const mods = (Array.isArray(selectedStructure.modules) ? selectedStructure.modules : []) as string[];
+    return (
+      <Card className="border bg-muted/30">
+        <CardContent className="p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Lock className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">{selectedStructure.name}</span>
+              {cfg.exam_type && <Badge variant="outline" className="capitalize text-xs">{cfg.exam_type}</Badge>}
+              {selectedStructure.industry && <Badge variant="secondary" className="text-xs">{selectedStructure.industry}</Badge>}
+            </div>
+            <span className="text-xs text-muted-foreground">Read-only structure</span>
+          </div>
+
+          <div className="flex gap-1.5 flex-wrap">
+            {mods.map((m) => (
+              <Badge key={m} variant="secondary" className="capitalize text-xs">{m}</Badge>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 pt-1">
+            {cfg.listening && mods.includes("listening") && (
+              <div className="rounded-md border bg-background p-3 space-y-1.5">
+                <div className="flex items-center gap-1.5 text-sm font-medium"><Headphones className="h-3.5 w-3.5 text-teal-600" /> Listening</div>
+                <p className="text-xs text-muted-foreground">{cfg.listening.parts?.length ?? 0} parts &middot; {cfg.listening.total_questions ?? 0} questions</p>
+                {cfg.listening.parts?.map((p, i) => (
+                  <p key={i} className="text-xs text-muted-foreground">P{i + 1}: {p.label}</p>
+                ))}
+              </div>
+            )}
+            {cfg.reading && mods.includes("reading") && (
+              <div className="rounded-md border bg-background p-3 space-y-1.5">
+                <div className="flex items-center gap-1.5 text-sm font-medium"><BookOpen className="h-3.5 w-3.5 text-blue-600" /> Reading</div>
+                <p className="text-xs text-muted-foreground">{cfg.reading.passages?.length ?? 0} passages &middot; {cfg.reading.total_questions ?? 0} questions</p>
+                {cfg.reading.passages?.map((p, i) => (
+                  <p key={i} className="text-xs text-muted-foreground">{cfg.exam_type === "academic" ? "Passage" : "Section"} {i + 1}: {p.style}</p>
+                ))}
+              </div>
+            )}
+            {cfg.writing && mods.includes("writing") && (
+              <div className="rounded-md border bg-background p-3 space-y-1.5">
+                <div className="flex items-center gap-1.5 text-sm font-medium"><PenTool className="h-3.5 w-3.5 text-orange-600" /> Writing</div>
+                {cfg.writing.tasks?.map((t, i) => (
+                  <p key={i} className="text-xs text-muted-foreground">{t.label || `Task ${i + 1}`}: {t.type} (min {t.min_words} words)</p>
+                ))}
+                {!cfg.writing.tasks?.length && cfg.writing.task1 && (
+                  <p className="text-xs text-muted-foreground">Task 1: {cfg.writing.task1.type} &middot; Task 2: {cfg.writing.task2?.type}</p>
+                )}
+              </div>
+            )}
+            {cfg.speaking && mods.includes("speaking") && (
+              <div className="rounded-md border bg-background p-3 space-y-1.5">
+                <div className="flex items-center gap-1.5 text-sm font-medium"><Mic className="h-3.5 w-3.5 text-purple-600" /> Speaking</div>
+                {cfg.speaking.parts?.map((p, i) => (
+                  <p key={i} className="text-xs text-muted-foreground">Part {i + 1}: {p.label} ({p.duration_min}-{p.duration_max} min)</p>
+                ))}
+              </div>
+            )}
+            {cfg.level && mods.includes("level") && (
+              <div className="rounded-md border bg-background p-3 space-y-1.5">
+                <div className="flex items-center gap-1.5 text-sm font-medium"><Layers className="h-3.5 w-3.5 text-indigo-600" /> Level</div>
+                <p className="text-xs text-muted-foreground">
+                  {Object.values(cfg.level.exercise_types || {}).reduce((s, v) => s + v, 0)} total questions
+                </p>
+              </div>
+            )}
+            {cfg.industry && mods.includes("industry") && (
+              <div className="rounded-md border bg-background p-3 space-y-1.5">
+                <div className="flex items-center gap-1.5 text-sm font-medium"><Briefcase className="h-3.5 w-3.5 text-amber-700" /> Industry</div>
+                <p className="text-xs text-muted-foreground">Difficulty: {cfg.industry.difficulty}</p>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -1956,9 +2202,34 @@ export default function GenerationPage() {
         </div>
       </div>
 
+      {/* Mode tabs */}
+      <div className="flex gap-2 border-b pb-0">
+        <button
+          className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px ${
+            examMode === "official"
+              ? "border-primary text-primary"
+              : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/30"
+          }`}
+          onClick={() => handleModeSwitch("official")}
+        >
+          <GraduationCap className="h-4 w-4" /> Official Exam
+        </button>
+        <button
+          className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px ${
+            examMode === "practice"
+              ? "border-primary text-primary"
+              : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/30"
+          }`}
+          onClick={() => handleModeSwitch("practice")}
+        >
+          <Dumbbell className="h-4 w-4" /> Practice Exam
+        </button>
+      </div>
+
       <AiTipBanner context="generation" variant="recommendation" />
 
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      {/* Title, Label, Structure row */}
+      <div className={`grid grid-cols-1 gap-4 ${examMode === "official" ? "md:grid-cols-3" : "md:grid-cols-2"}`}>
         <div className="space-y-1">
           <Label>Title <span className="text-destructive">*</span></Label>
           <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Insert title" />
@@ -1967,52 +2238,87 @@ export default function GenerationPage() {
           <Label>Exam Label</Label>
           <Input value={examLabel} onChange={(e) => setExamLabel(e.target.value)} placeholder="Exam Label" />
         </div>
-        <div className="space-y-1">
+        {examMode === "official" && (
-          <Label>Exam Structure</Label>
+          <div className="space-y-1">
-          <Select value={examStructure} onValueChange={(val) => {
+            <Label>Exam Structure <span className="text-destructive">*</span></Label>
-            setExamStructure(val);
+            <Select value={examStructure} onValueChange={(val) => {
-            const s = structures.find((st) => String(st.id) === val);
+              if (val === "__add_new__") {
-            if (s) {
+                navigate("/admin/exam-structures");
-              const mods = (s as Record<string, unknown>).modules as string[] | undefined;
+                return;
-              if (Array.isArray(mods) && mods.length) {
-                const next = new Set<ModuleKey>();
-                mods.forEach((m) => { if (MODULE_KEYS.includes(m as ModuleKey)) next.add(m as ModuleKey); });
-                setSelectedModules(next);
-                if (next.size > 0) setActiveModule([...next][0]);
               }
-            }
+              handleStructureSelect(val);
-          }}>
+            }}>
-            <SelectTrigger><SelectValue placeholder="Select an exam structure" /></SelectTrigger>
+              <SelectTrigger><SelectValue placeholder="Select an exam structure" /></SelectTrigger>
-            <SelectContent>
+              <SelectContent>
-              {structures.map((s) => (
+                {structures.map((s) => (
-                <SelectItem key={s.id} value={String(s.id)}>{s.name}</SelectItem>
+                  <SelectItem key={s.id} value={String(s.id)}>{s.name}</SelectItem>
-              ))}
+                ))}
-              {structures.length === 0 && (
+                {structures.length === 0 && (
-                <SelectItem value="_none" disabled>No structures available</SelectItem>
+                  <SelectItem value="_none" disabled>No structures available</SelectItem>
-              )}
+                )}
-            </SelectContent>
+                <div className="border-t my-1" />
-          </Select>
+                <SelectItem value="__add_new__" className="text-primary font-medium">
-        </div>
+                  <span className="flex items-center gap-1.5"><Plus className="h-3.5 w-3.5" /> Add New</span>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
       </div>
 
-      <div>
+      {/* Official mode: read-only structure preview */}
-        <p className="text-sm text-muted-foreground mb-3">Please select which subjects the exam is about</p>
+      {examMode === "official" && selectedStructure && renderOfficialStructurePreview()}
-        <div className="flex flex-wrap gap-3">
+      {examMode === "official" && !selectedStructure && (
-          {MODULES.map((m) => (
+        <Card className="border-dashed">
-            <button key={m.key}
+          <CardContent className="p-8 text-center text-muted-foreground">
-              className={`flex items-center gap-2 rounded-lg border-2 px-4 py-3 transition-all ${
+            <GraduationCap className="h-8 w-8 mx-auto mb-2 opacity-50" />
-                selectedModules.has(m.key) ? `${m.bgColor} border-current ${m.color} shadow-sm` : "border-muted bg-background hover:bg-muted/50"
+            <p className="text-sm">Select an Exam Structure above to view its configuration and start generating.</p>
-              }`}
+          </CardContent>
-              onClick={() => toggleModule(m.key)}>
+        </Card>
-              <span className={m.color}>{m.icon}</span>
+      )}
-              <span className="text-sm font-medium">{m.label}</span>
+
-              {selectedModules.has(m.key) && (
+      {/* Practice mode: free module selection */}
-                <Badge variant="default" className="ml-1 h-5 text-[10px]">Select</Badge>
+      {examMode === "practice" && (
-              )}
+        <div>
-            </button>
+          <p className="text-sm text-muted-foreground mb-3">Select which modules you want to practice</p>
-          ))}
+          <div className="flex flex-wrap gap-3">
+            {MODULES.map((m) => (
+              <button key={m.key}
+                className={`flex items-center gap-2 rounded-lg border-2 px-4 py-3 transition-all ${
+                  selectedModules.has(m.key) ? `${m.bgColor} border-current ${m.color} shadow-sm` : "border-muted bg-background hover:bg-muted/50"
+                }`}
+                onClick={() => toggleModule(m.key)}>
+                <span className={m.color}>{m.icon}</span>
+                <span className="text-sm font-medium">{m.label}</span>
+                {selectedModules.has(m.key) && (
+                  <Badge variant="default" className="ml-1 h-5 text-[10px]">Select</Badge>
+                )}
+              </button>
+            ))}
+          </div>
         </div>
-      </div>
+      )}
+
+      {/* Official mode: module selector from structure's modules (locked, non-toggleable) */}
+      {examMode === "official" && isOfficialLocked && selectedModules.size > 0 && (
+        <div>
+          <p className="text-sm text-muted-foreground mb-3 flex items-center gap-1.5">
+            <Lock className="h-3.5 w-3.5" /> Modules defined by structure &mdash; select one to configure
+          </p>
+          <div className="flex flex-wrap gap-3">
+            {MODULES.filter((m) => selectedModules.has(m.key)).map((m) => (
+              <button key={m.key}
+                className={`flex items-center gap-2 rounded-lg border-2 px-4 py-3 transition-all ${
+                  activeModule === m.key ? `${m.bgColor} border-current ${m.color} shadow-sm` : "border-muted bg-background hover:bg-muted/50"
+                }`}
+                onClick={() => setActiveModule(m.key)}>
+                <span className={m.color}>{m.icon}</span>
+                <span className="text-sm font-medium">{m.label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
 
       {activeModule && selectedModules.has(activeModule) && (
         <div className="flex gap-3">
@@ -2530,6 +2836,67 @@ export default function GenerationPage() {
           )}
         </DialogContent>
       </Dialog>
+
+      <Dialog open={newStructureDialog.open} onOpenChange={(open) => {
+        if (!open) setNewStructureDialog({ open: false, name: "", modules: new Set() });
+      }}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>New Exam Structure</DialogTitle>
+            <DialogDescription>Create a new exam structure with selected modules.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-1">
+              <Label>Name <span className="text-destructive">*</span></Label>
+              <Input
+                value={newStructureDialog.name}
+                onChange={(e) => setNewStructureDialog((prev) => ({ ...prev, name: e.target.value }))}
+                placeholder="e.g. Business English Assessment"
+                autoFocus
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Modules</Label>
+              <div className="grid grid-cols-2 gap-2">
+                {MODULES.map((m) => (
+                  <label key={m.key} className={`flex items-center gap-2 rounded-lg border px-3 py-2 cursor-pointer transition-all ${
+                    newStructureDialog.modules.has(m.key) ? `${m.bgColor} ${m.color}` : "hover:bg-muted/50"
+                  }`}>
+                    <Checkbox
+                      checked={newStructureDialog.modules.has(m.key)}
+                      onCheckedChange={(checked) => {
+                        setNewStructureDialog((prev) => {
+                          const next = new Set(prev.modules);
+                          if (checked) next.add(m.key); else next.delete(m.key);
+                          return { ...prev, modules: next };
+                        });
+                      }}
+                    />
+                    {m.icon}
+                    <span className="text-sm font-medium">{m.label}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setNewStructureDialog({ open: false, name: "", modules: new Set() })}>
+              Cancel
+            </Button>
+            <Button
+              disabled={!newStructureDialog.name.trim() || newStructureDialog.modules.size === 0 || createStructureMut.isPending}
+              onClick={() => {
+                createStructureMut.mutate({
+                  name: newStructureDialog.name.trim(),
+                  modules: [...newStructureDialog.modules],
+                });
+              }}
+            >
+              {createStructureMut.isPending ? <><Loader2 className="h-4 w-4 animate-spin mr-2" /> Creating...</> : "Create"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/pages/RubricsPage.tsx

@@ -1,48 +1,527 @@
 import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
-import { Search, Plus, Loader2 } from "lucide-react";
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Search, Plus, Loader2, Pencil, Trash2, X, Sparkles, ChevronDown } from "lucide-react";
 import AiTipBanner from "@/components/ai/AiTipBanner";
 import AiCreationAssistant from "@/components/ai/AiCreationAssistant";
 import { examsService } from "@/services/exams.service";
+import { useToast } from "@/hooks/use-toast";
 
 interface RubricItem {
   id: number;
   name: string;
-  levels: string[];
+  skill: string;
+  exam_type: string;
   criteria: number;
+  criteria_text: string;
+  levels: string[];
   created: string;
-  skill?: string;
 }
 
-const FALLBACK_RUBRICS: RubricItem[] = [
+interface CriterionEntry {
-  { id: 1, name: "IELTS Writing Task 2", levels: ["A1","A2","B1","B2","C1","C2"], criteria: 4, created: "2025-01-05" },
+  name: string;
-  { id: 2, name: "Speaking Fluency", levels: ["A1","A2","B1","B2","C1","C2"], criteria: 3, created: "2025-01-10" },
+  weight: number;
-  { id: 3, name: "Reading Comprehension", levels: ["A1","A2","B1","B2","C1"], criteria: 5, created: "2025-02-01" },
+  descriptors: Record<string, string>;
+}
+
+const SKILL_OPTIONS = [
+  { value: "writing", label: "Writing" },
+  { value: "speaking", label: "Speaking" },
 ];
 
-const rubricGroups = [
+const EXAM_TYPE_OPTIONS = [
-  { id: 1, name: "Academic IELTS Full", rubrics: ["IELTS Writing Task 2", "Speaking Fluency", "Reading Comprehension"], created: "2025-02-15" },
+  { value: "academic", label: "Academic" },
-  { id: 2, name: "Business English", rubrics: ["Speaking Fluency"], created: "2025-03-01" },
+  { value: "general_training", label: "General Training" },
+  { value: "general_english", label: "General English" },
 ];
 
+const ALL_CEFR_LEVELS = ["A1", "A2", "B1", "B2", "C1", "C2"];
+
+interface RubricFormState {
+  name: string;
+  skill: string;
+  exam_type: string;
+  criteria: CriterionEntry[];
+  levels: Set<string>;
+}
+
+const emptyCriterion = (levels: Set<string>): CriterionEntry => ({
+  name: "",
+  weight: 0,
+  descriptors: Object.fromEntries([...levels].map((l) => [l, ""])),
+});
+
+const emptyForm = (): RubricFormState => ({
+  name: "",
+  skill: "writing",
+  exam_type: "academic",
+  criteria: [],
+  levels: new Set(ALL_CEFR_LEVELS),
+});
+
+function parseCriteriaText(text: string, levels: string[]): CriterionEntry[] {
+  if (!text) return [];
+
+  const mapStructured = (arr: unknown[]): CriterionEntry[] =>
+    arr.map((c) => {
+      const obj = c as Record<string, unknown>;
+      return {
+        name: String(obj.name || ""),
+        weight: Number(obj.weight || 0),
+        descriptors:
+          typeof obj.descriptors === "object" && obj.descriptors !== null
+            ? Object.fromEntries(levels.map((l) => [l, String((obj.descriptors as Record<string, unknown>)[l] || "")]))
+            : Object.fromEntries(levels.map((l) => [l, ""])),
+      };
+    });
+
+  try {
+    const parsed = JSON.parse(text);
+    // Handle {"criteria": [...]} wrapper (from AI or previous saves)
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed) && Array.isArray(parsed.criteria)) {
+      return mapStructured(parsed.criteria);
+    }
+    if (Array.isArray(parsed)) {
+      if (parsed.length > 0 && typeof parsed[0] === "object" && parsed[0] !== null && "name" in parsed[0]) {
+        return mapStructured(parsed);
+      }
+      return parsed.filter(Boolean).map((name) => ({
+        name: String(name),
+        weight: Math.round(100 / parsed.length),
+        descriptors: Object.fromEntries(levels.map((l) => [l, ""])),
+      }));
+    }
+  } catch { /* not JSON */ }
+
+  const lines = text.split("\n").map((l) => l.trim()).filter(Boolean);
+  if (lines.length === 0) return [];
+  return lines.map((name) => ({
+    name,
+    weight: Math.round(100 / lines.length),
+    descriptors: Object.fromEntries(levels.map((l) => [l, ""])),
+  }));
+}
+
+interface GroupFormState {
+  name: string;
+  rubric_ids: Set<number>;
+}
+
+const emptyGroupForm = (): GroupFormState => ({ name: "", rubric_ids: new Set() });
+
 export default function RubricsPage() {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
   const [search, setSearch] = useState("");
 
+  const [createOpen, setCreateOpen] = useState(false);
+  const [createForm, setCreateForm] = useState<RubricFormState>(emptyForm());
+
+  const [editTarget, setEditTarget] = useState<RubricItem | null>(null);
+  const [editForm, setEditForm] = useState<RubricFormState>(emptyForm());
+
+  const [groupCreateOpen, setGroupCreateOpen] = useState(false);
+  const [groupCreateForm, setGroupCreateForm] = useState<GroupFormState>(emptyGroupForm());
+  const [groupEditTarget, setGroupEditTarget] = useState<{ id: number; name: string; rubric_ids: number[] } | null>(null);
+  const [groupEditForm, setGroupEditForm] = useState<GroupFormState>(emptyGroupForm());
+
   const rubricsQ = useQuery({
     queryKey: ["rubrics"],
     queryFn: () => examsService.listRubrics({}),
   });
-  const backendRubrics = (rubricsQ.data?.items ?? []) as RubricItem[];
+  const rubrics = (rubricsQ.data?.items ?? []) as RubricItem[];
-  const rubrics = backendRubrics.length > 0 ? backendRubrics : FALLBACK_RUBRICS;
+
+  const rubricGroupsQ = useQuery({
+    queryKey: ["rubric-groups"],
+    queryFn: () => examsService.listRubricGroups({}),
+  });
+  const rubricGroups = rubricGroupsQ.data?.items ?? [];
+
+  const createMut = useMutation({
+    mutationFn: (data: Record<string, unknown>) => examsService.createRubric(data as never),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["rubrics"] });
+      setCreateOpen(false);
+      setCreateForm(emptyForm());
+      toast({ title: "Rubric created" });
+    },
+    onError: (err: Error) => toast({ variant: "destructive", title: "Create failed", description: err.message }),
+  });
+
+  const updateMut = useMutation({
+    mutationFn: ({ id, data }: { id: number; data: Record<string, unknown> }) =>
+      examsService.updateRubric(id, data as never),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["rubrics"] });
+      setEditTarget(null);
+      toast({ title: "Rubric updated" });
+    },
+    onError: (err: Error) => toast({ variant: "destructive", title: "Update failed", description: err.message }),
+  });
+
+  const deleteMut = useMutation({
+    mutationFn: (id: number) => examsService.deleteRubric(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["rubrics"] });
+      toast({ title: "Rubric deleted" });
+    },
+    onError: (err: Error) => toast({ variant: "destructive", title: "Delete failed", description: err.message }),
+  });
+
+  const createGroupMut = useMutation({
+    mutationFn: (data: { name: string; rubric_ids: number[] }) => examsService.createRubricGroup(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["rubric-groups"] });
+      setGroupCreateOpen(false);
+      setGroupCreateForm(emptyGroupForm());
+      toast({ title: "Rubric group created" });
+    },
+    onError: (err: Error) => toast({ variant: "destructive", title: "Create group failed", description: err.message }),
+  });
+
+  const updateGroupMut = useMutation({
+    mutationFn: ({ id, data }: { id: number; data: { name?: string; rubric_ids?: number[] } }) =>
+      examsService.updateRubricGroup(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["rubric-groups"] });
+      setGroupEditTarget(null);
+      toast({ title: "Rubric group updated" });
+    },
+    onError: (err: Error) => toast({ variant: "destructive", title: "Update group failed", description: err.message }),
+  });
+
+  const deleteGroupMut = useMutation({
+    mutationFn: (id: number) => examsService.deleteRubricGroup(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["rubric-groups"] });
+      toast({ title: "Rubric group deleted" });
+    },
+    onError: (err: Error) => toast({ variant: "destructive", title: "Delete group failed", description: err.message }),
+  });
+
+  const [suggesting, setSuggesting] = useState(false);
+
+  const suggestCriteria = async (
+    form: RubricFormState,
+    setForm: React.Dispatch<React.SetStateAction<RubricFormState>>,
+  ) => {
+    setSuggesting(true);
+    try {
+      const result = await examsService.suggestRubricCriteria({
+        name: form.name,
+        skill: form.skill,
+        exam_type: form.exam_type,
+        levels: [...form.levels],
+      });
+      if (result.criteria && Array.isArray(result.criteria) && result.criteria.length > 0) {
+        const levelsArr = [...form.levels];
+        const entries: CriterionEntry[] = result.criteria.map((c: unknown) => {
+          if (typeof c === "object" && c !== null) {
+            const obj = c as Record<string, unknown>;
+            return {
+              name: String(obj.name || ""),
+              weight: Number(obj.weight || 0),
+              descriptors: typeof obj.descriptors === "object" && obj.descriptors !== null
+                ? Object.fromEntries(
+                    levelsArr.map((l) => [l, String((obj.descriptors as Record<string, unknown>)[l] || "")])
+                  )
+                : Object.fromEntries(levelsArr.map((l) => [l, ""])),
+            };
+          }
+          return { name: String(c), weight: 0, descriptors: Object.fromEntries(levelsArr.map((l) => [l, ""])) };
+        });
+        setForm((f) => ({ ...f, criteria: entries }));
+        toast({ title: "Criteria generated", description: `${entries.length} criteria with band descriptors created by AI.` });
+      }
+    } catch (err) {
+      toast({ variant: "destructive", title: "AI suggestion failed", description: (err as Error).message });
+    } finally {
+      setSuggesting(false);
+    }
+  };
+
+  const openEdit = (r: RubricItem) => {
+    const levelsArr = Array.isArray(r.levels) && r.levels.length > 0 ? r.levels : ALL_CEFR_LEVELS;
+    setEditTarget(r);
+    setEditForm({
+      name: r.name,
+      skill: r.skill || "writing",
+      exam_type: r.exam_type || "academic",
+      criteria: parseCriteriaText(r.criteria_text, levelsArr),
+      levels: new Set(levelsArr),
+    });
+  };
+
+  const formToPayload = (form: RubricFormState) => ({
+    name: form.name.trim(),
+    skill: form.skill,
+    exam_type: form.exam_type,
+    criteria: JSON.stringify(form.criteria.filter((c) => c.name.trim())),
+    levels: [...form.levels],
+  });
+
+  const filtered = rubrics.filter((r) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return r.name?.toLowerCase().includes(q) || r.skill?.toLowerCase().includes(q);
+  });
+
+  const updateCriterion = (
+    setForm: React.Dispatch<React.SetStateAction<RubricFormState>>,
+    index: number,
+    patch: Partial<CriterionEntry>,
+  ) => {
+    setForm((f) => {
+      const criteria = [...f.criteria];
+      criteria[index] = { ...criteria[index], ...patch };
+      return { ...f, criteria };
+    });
+  };
+
+  const updateDescriptor = (
+    setForm: React.Dispatch<React.SetStateAction<RubricFormState>>,
+    cIndex: number,
+    level: string,
+    value: string,
+  ) => {
+    setForm((f) => {
+      const criteria = [...f.criteria];
+      criteria[cIndex] = {
+        ...criteria[cIndex],
+        descriptors: { ...criteria[cIndex].descriptors, [level]: value },
+      };
+      return { ...f, criteria };
+    });
+  };
+
+  const renderForm = (
+    form: RubricFormState,
+    setForm: React.Dispatch<React.SetStateAction<RubricFormState>>,
+  ) => {
+    const levelsArr = [...form.levels].sort(
+      (a, b) => ALL_CEFR_LEVELS.indexOf(a) - ALL_CEFR_LEVELS.indexOf(b)
+    );
+    const totalWeight = form.criteria.reduce((s, c) => s + (c.weight || 0), 0);
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Label>Rubric Name <span className="text-destructive">*</span></Label>
+          <Input
+            value={form.name}
+            onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+            placeholder="e.g. IELTS Writing Task 1"
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label>Skill</Label>
+            <Select value={form.skill} onValueChange={(v) => setForm((f) => ({ ...f, skill: v }))}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {SKILL_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label>Exam Type</Label>
+            <Select value={form.exam_type} onValueChange={(v) => setForm((f) => ({ ...f, exam_type: v }))}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {EXAM_TYPE_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label>CEFR Levels</Label>
+          <div className="flex flex-wrap gap-2">
+            {ALL_CEFR_LEVELS.map((level) => {
+              const checked = form.levels.has(level);
+              return (
+                <label
+                  key={level}
+                  className={`flex items-center gap-1.5 rounded-md border px-3 py-1.5 cursor-pointer transition-all text-sm font-medium ${
+                    checked ? "bg-primary/10 border-primary text-primary" : "hover:bg-muted/50"
+                  }`}
+                >
+                  <Checkbox
+                    checked={checked}
+                    onCheckedChange={(val) => {
+                      setForm((f) => {
+                        const next = new Set(f.levels);
+                        if (val) next.add(level); else next.delete(level);
+                        return { ...f, levels: next };
+                      });
+                    }}
+                  />
+                  {level}
+                </label>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <Label>Criteria</Label>
+              {form.criteria.length > 0 && (
+                <span className={`ml-2 text-xs ${totalWeight === 100 ? "text-green-600" : "text-amber-600"}`}>
+                  (Total weight: {totalWeight}%)
+                </span>
+              )}
+            </div>
+            <Button
+              type="button"
+              size="sm"
+              className="h-8 bg-gradient-to-r from-violet-500 to-indigo-500 text-white hover:from-violet-600 hover:to-indigo-600"
+              disabled={suggesting}
+              onClick={() => suggestCriteria(form, setForm)}
+            >
+              {suggesting
+                ? <><Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" /> Generating...</>
+                : <><Sparkles className="h-3.5 w-3.5 mr-1.5" /> Generate with AI</>
+              }
+            </Button>
+          </div>
+
+          {suggesting ? (
+            <div className="flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground rounded-lg border border-dashed border-violet-300 bg-violet-50/50">
+              <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
+              <p className="text-sm font-medium">AI is generating criteria with band descriptors...</p>
+              <p className="text-xs">Based on {form.skill} / {form.exam_type.replace(/_/g, " ")}</p>
+            </div>
+          ) : form.criteria.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground rounded-lg border border-dashed">
+              <Sparkles className="h-5 w-5 text-violet-400" />
+              <p className="text-sm">No criteria yet.</p>
+              <p className="text-xs">Click <strong>Generate with AI</strong> to create criteria automatically, or add manually.</p>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="mt-1"
+                onClick={() => setForm((f) => ({ ...f, criteria: [...f.criteria, emptyCriterion(f.levels)] }))}
+              >
+                <Plus className="h-3 w-3 mr-1" /> Add Manually
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {form.criteria.map((c, ci) => (
+                <Collapsible key={ci} defaultOpen={form.criteria.length <= 3}>
+                  <div className="rounded-lg border bg-card">
+                    <div className="flex items-center gap-2 p-3">
+                      <CollapsibleTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0">
+                          <ChevronDown className="h-4 w-4" />
+                        </Button>
+                      </CollapsibleTrigger>
+                      <Input
+                        value={c.name}
+                        onChange={(e) => updateCriterion(setForm, ci, { name: e.target.value })}
+                        placeholder="Criterion name"
+                        className="flex-1 h-8 font-medium"
+                      />
+                      <div className="flex items-center gap-1 shrink-0">
+                        <Input
+                          type="number"
+                          min={0}
+                          max={100}
+                          value={c.weight}
+                          onChange={(e) => updateCriterion(setForm, ci, { weight: Number(e.target.value) })}
+                          className="w-16 h-8 text-center text-sm"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
+                        onClick={() => setForm((f) => ({ ...f, criteria: f.criteria.filter((_, i) => i !== ci) }))}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    <CollapsibleContent>
+                      <div className="px-3 pb-3 pt-0 border-t">
+                        <p className="text-xs text-muted-foreground my-2">Band level descriptors:</p>
+                        <div className="space-y-2">
+                          {levelsArr.map((level) => (
+                            <div key={level} className="flex gap-2 items-start">
+                              <Badge variant="outline" className="mt-1.5 shrink-0 w-9 justify-center text-xs">{level}</Badge>
+                              <Textarea
+                                value={c.descriptors[level] || ""}
+                                onChange={(e) => updateDescriptor(setForm, ci, level, e.target.value)}
+                                placeholder={`Performance descriptor for ${level}...`}
+                                className="min-h-[40px] h-10 text-sm resize-none"
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </div>
+                </Collapsible>
+              ))}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="w-full"
+                onClick={() => setForm((f) => ({ ...f, criteria: [...f.criteria, emptyCriterion(f.levels)] }))}
+              >
+                <Plus className="h-3 w-3 mr-1" /> Add Criterion
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
 
   return (
     <div className="space-y-6">
@@ -53,25 +532,25 @@ export default function RubricsPage() {
         </div>
         <div className="flex gap-2">
           <AiCreationAssistant type="rubric" />
-          <Dialog>
+          <Dialog open={createOpen} onOpenChange={(open) => { setCreateOpen(open); if (!open) setCreateForm(emptyForm()); }}>
             <DialogTrigger asChild>
               <Button size="sm"><Plus className="h-4 w-4 mr-1" /> Create Rubric</Button>
             </DialogTrigger>
-            <DialogContent className="max-w-2xl">
+            <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
-              <DialogHeader><DialogTitle>Create Rubric</DialogTitle></DialogHeader>
+              <DialogHeader>
-              <div className="space-y-4">
+                <DialogTitle>Create Rubric</DialogTitle>
-                <div className="space-y-2"><Label>Rubric Name</Label><Input placeholder="e.g. IELTS Writing Task 1" /></div>
+                <DialogDescription>Define a scoring rubric. Use AI to generate criteria or add them manually.</DialogDescription>
-                <div className="space-y-3">
+              </DialogHeader>
-                  <Label>Level Descriptors</Label>
+              {renderForm(createForm, setCreateForm)}
-                  {["A1","A2","B1","B2","C1","C2"].map(level => (
+              <DialogFooter>
-                    <div key={level} className="space-y-1">
+                <Button variant="outline" onClick={() => setCreateOpen(false)}>Cancel</Button>
-                      <Label className="text-xs text-muted-foreground">{level}</Label>
+                <Button
-                      <Textarea placeholder={`Descriptor for level ${level}...`} className="h-16" />
+                  disabled={!createForm.name.trim() || createForm.criteria.filter((c) => c.name.trim()).length === 0 || createMut.isPending}
-                    </div>
+                  onClick={() => createMut.mutate(formToPayload(createForm))}
-                  ))}
+                >
-                </div>
+                  {createMut.isPending ? <><Loader2 className="h-4 w-4 animate-spin mr-2" />Creating...</> : "Create"}
-                <Button className="w-full">Create Rubric</Button>
+                </Button>
-              </div>
+              </DialogFooter>
             </DialogContent>
           </Dialog>
         </div>
@@ -90,51 +569,248 @@ export default function RubricsPage() {
           <TabsTrigger value="groups">Rubric Groups</TabsTrigger>
         </TabsList>
         <TabsContent value="rubrics" className="mt-4">
-          <Card className="border-0 shadow-sm">
+          {rubricsQ.isLoading && (
-            <CardContent className="p-0">
+            <div className="flex items-center justify-center py-12">
-              <Table>
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                <TableHeader>
+            </div>
-                  <TableRow>
+          )}
-                    <TableHead>Name</TableHead><TableHead>Levels</TableHead><TableHead>Criteria</TableHead><TableHead>Created</TableHead>
+          {rubricsQ.error && (
-                  </TableRow>
+            <Card className="border-destructive">
-                </TableHeader>
+              <CardContent className="p-4 text-sm text-destructive">
-                <TableBody>
+                Failed to load rubrics. The backend endpoint may not be available yet.
-                  {rubrics.map((r) => (
+              </CardContent>
-                    <TableRow key={r.id}>
+            </Card>
-                      <TableCell className="font-medium">{r.name}</TableCell>
+          )}
-                      <TableCell><div className="flex gap-1">{r.levels.map(l => <Badge key={l} variant="outline" className="text-xs">{l}</Badge>)}</div></TableCell>
+          {!rubricsQ.isLoading && !rubricsQ.error && filtered.length === 0 && (
-                      <TableCell>{r.criteria}</TableCell>
+            <Card className="border-dashed">
-                      <TableCell>{r.created}</TableCell>
+              <CardContent className="p-8 text-center text-muted-foreground">
+                No rubrics found. Create one to get started.
+              </CardContent>
+            </Card>
+          )}
+          {!rubricsQ.isLoading && filtered.length > 0 && (
+            <Card className="border-0 shadow-sm">
+              <CardContent className="p-0">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Name</TableHead>
+                      <TableHead>Skill</TableHead>
+                      <TableHead>Exam Type</TableHead>
+                      <TableHead>Levels</TableHead>
+                      <TableHead>Criteria</TableHead>
+                      <TableHead>Created</TableHead>
+                      <TableHead className="w-[90px]">Actions</TableHead>
                     </TableRow>
-                  ))}
+                  </TableHeader>
-                </TableBody>
+                  <TableBody>
-              </Table>
+                    {filtered.map((r) => (
-            </CardContent>
+                      <TableRow key={r.id} className="cursor-pointer hover:bg-muted/50" onClick={() => openEdit(r)}>
-          </Card>
+                        <TableCell className="font-medium">{r.name}</TableCell>
+                        <TableCell><Badge variant="secondary" className="capitalize">{r.skill || "—"}</Badge></TableCell>
+                        <TableCell className="capitalize text-sm">{r.exam_type?.replace(/_/g, " ") || "—"}</TableCell>
+                        <TableCell>
+                          <div className="flex gap-1">
+                            {(r.levels || ALL_CEFR_LEVELS).map((l) => (
+                              <Badge key={l} variant="outline" className="text-xs">{l}</Badge>
+                            ))}
+                          </div>
+                        </TableCell>
+                        <TableCell>{r.criteria}</TableCell>
+                        <TableCell className="text-sm text-muted-foreground">{r.created}</TableCell>
+                        <TableCell>
+                          <div className="flex gap-1">
+                            <Button variant="ghost" size="icon" className="h-8 w-8"
+                              onClick={(e) => { e.stopPropagation(); openEdit(r); }}>
+                              <Pencil className="h-4 w-4" />
+                            </Button>
+                            <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive"
+                              onClick={(e) => { e.stopPropagation(); deleteMut.mutate(r.id); }}
+                              disabled={deleteMut.isPending}>
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+          )}
         </TabsContent>
         <TabsContent value="groups" className="mt-4">
-          <Card className="border-0 shadow-sm">
+          <div className="flex justify-end mb-3">
-            <CardContent className="p-0">
+            <Button size="sm" onClick={() => { setGroupCreateForm(emptyGroupForm()); setGroupCreateOpen(true); }}>
-              <Table>
+              <Plus className="h-4 w-4 mr-1" /> Create Group
-                <TableHeader>
+            </Button>
-                  <TableRow>
+          </div>
-                    <TableHead>Group Name</TableHead><TableHead>Rubrics</TableHead><TableHead>Created</TableHead>
+          {rubricGroupsQ.isLoading && (
-                  </TableRow>
+            <div className="flex justify-center py-8"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
-                </TableHeader>
+          )}
-                <TableBody>
+          {!rubricGroupsQ.isLoading && rubricGroups.length === 0 && (
-                  {rubricGroups.map((g) => (
+            <Card className="border-dashed"><CardContent className="p-8 text-center text-muted-foreground text-sm">No rubric groups yet. Create one to bundle rubrics together.</CardContent></Card>
-                    <TableRow key={g.id}>
+          )}
-                      <TableCell className="font-medium">{g.name}</TableCell>
+          {!rubricGroupsQ.isLoading && rubricGroups.length > 0 && (
-                      <TableCell><div className="flex gap-1 flex-wrap">{g.rubrics.map(r => <Badge key={r} variant="secondary" className="text-xs">{r}</Badge>)}</div></TableCell>
+            <Card className="border-0 shadow-sm">
-                      <TableCell>{g.created}</TableCell>
+              <CardContent className="p-0">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Group Name</TableHead>
+                      <TableHead>Rubrics</TableHead>
+                      <TableHead>Created</TableHead>
+                      <TableHead className="w-24 text-right">Actions</TableHead>
                     </TableRow>
-                  ))}
+                  </TableHeader>
-                </TableBody>
+                  <TableBody>
-              </Table>
+                    {rubricGroups.map((g) => (
-            </CardContent>
+                      <TableRow key={g.id}>
-          </Card>
+                        <TableCell className="font-medium">{g.name}</TableCell>
+                        <TableCell>
+                          <div className="flex gap-1 flex-wrap">
+                            {(g.rubric_names ?? []).map((rb) => (
+                              <Badge key={rb} variant="secondary" className="text-xs">{rb}</Badge>
+                            ))}
+                            {(!g.rubric_names || g.rubric_names.length === 0) && (
+                              <span className="text-xs text-muted-foreground italic">No rubrics</span>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell>{g.created}</TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end gap-1">
+                            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => {
+                              setGroupEditTarget({ id: g.id, name: g.name, rubric_ids: g.rubric_ids });
+                              setGroupEditForm({ name: g.name, rubric_ids: new Set(g.rubric_ids) });
+                            }}>
+                              <Pencil className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive"
+                              onClick={() => { if (confirm(`Delete group "${g.name}"?`)) deleteGroupMut.mutate(g.id); }}>
+                              <Trash2 className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Create Group Dialog */}
+          <Dialog open={groupCreateOpen} onOpenChange={setGroupCreateOpen}>
+            <DialogContent className="max-w-md">
+              <DialogHeader>
+                <DialogTitle>Create Rubric Group</DialogTitle>
+                <DialogDescription>Bundle multiple rubrics into a group for easy selection.</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4 py-2">
+                <div className="space-y-1">
+                  <Label>Group Name <span className="text-destructive">*</span></Label>
+                  <Input value={groupCreateForm.name} onChange={(e) => setGroupCreateForm((p) => ({ ...p, name: e.target.value }))} placeholder="e.g. Academic IELTS Full" />
+                </div>
+                <div className="space-y-1">
+                  <Label>Select Rubrics</Label>
+                  <div className="max-h-48 overflow-y-auto border rounded-md p-2 space-y-1">
+                    {rubrics.map((r) => (
+                      <label key={r.id} className="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5">
+                        <Checkbox checked={groupCreateForm.rubric_ids.has(r.id)}
+                          onCheckedChange={(checked) => {
+                            setGroupCreateForm((p) => {
+                              const next = new Set(p.rubric_ids);
+                              checked ? next.add(r.id) : next.delete(r.id);
+                              return { ...p, rubric_ids: next };
+                            });
+                          }} className="h-3.5 w-3.5" />
+                        {r.name}
+                        <Badge variant="outline" className="text-[10px] ml-auto">{r.skill}</Badge>
+                      </label>
+                    ))}
+                    {rubrics.length === 0 && <p className="text-xs text-muted-foreground italic py-2 text-center">No rubrics available</p>}
+                  </div>
+                </div>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setGroupCreateOpen(false)}>Cancel</Button>
+                <Button disabled={!groupCreateForm.name.trim() || createGroupMut.isPending}
+                  onClick={() => createGroupMut.mutate({ name: groupCreateForm.name.trim(), rubric_ids: [...groupCreateForm.rubric_ids] })}>
+                  {createGroupMut.isPending ? <><Loader2 className="h-4 w-4 animate-spin mr-2" />Creating...</> : "Create Group"}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+
+          {/* Edit Group Dialog */}
+          <Dialog open={!!groupEditTarget} onOpenChange={(open) => { if (!open) setGroupEditTarget(null); }}>
+            <DialogContent className="max-w-md">
+              <DialogHeader>
+                <DialogTitle>Edit Rubric Group</DialogTitle>
+                <DialogDescription>Update the group name and selected rubrics.</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4 py-2">
+                <div className="space-y-1">
+                  <Label>Group Name <span className="text-destructive">*</span></Label>
+                  <Input value={groupEditForm.name} onChange={(e) => setGroupEditForm((p) => ({ ...p, name: e.target.value }))} />
+                </div>
+                <div className="space-y-1">
+                  <Label>Select Rubrics</Label>
+                  <div className="max-h-48 overflow-y-auto border rounded-md p-2 space-y-1">
+                    {rubrics.map((r) => (
+                      <label key={r.id} className="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5">
+                        <Checkbox checked={groupEditForm.rubric_ids.has(r.id)}
+                          onCheckedChange={(checked) => {
+                            setGroupEditForm((p) => {
+                              const next = new Set(p.rubric_ids);
+                              checked ? next.add(r.id) : next.delete(r.id);
+                              return { ...p, rubric_ids: next };
+                            });
+                          }} className="h-3.5 w-3.5" />
+                        {r.name}
+                        <Badge variant="outline" className="text-[10px] ml-auto">{r.skill}</Badge>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setGroupEditTarget(null)}>Cancel</Button>
+                <Button disabled={!groupEditForm.name.trim() || updateGroupMut.isPending}
+                  onClick={() => {
+                    if (!groupEditTarget) return;
+                    updateGroupMut.mutate({ id: groupEditTarget.id, data: { name: groupEditForm.name.trim(), rubric_ids: [...groupEditForm.rubric_ids] } });
+                  }}>
+                  {updateGroupMut.isPending ? <><Loader2 className="h-4 w-4 animate-spin mr-2" />Saving...</> : "Save Changes"}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         </TabsContent>
       </Tabs>
+
+      <Dialog open={!!editTarget} onOpenChange={(open) => { if (!open) setEditTarget(null); }}>
+        <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Edit Rubric</DialogTitle>
+            <DialogDescription>Update the rubric details below. Use AI to regenerate criteria.</DialogDescription>
+          </DialogHeader>
+          {renderForm(editForm, setEditForm)}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditTarget(null)}>Cancel</Button>
+            <Button
+              disabled={!editForm.name.trim() || editForm.criteria.filter((c) => c.name.trim()).length === 0 || updateMut.isPending}
+              onClick={() => {
+                if (!editTarget) return;
+                updateMut.mutate({ id: editTarget.id, data: formToPayload(editForm) });
+              }}
+            >
+              {updateMut.isPending ? <><Loader2 className="h-4 w-4 animate-spin mr-2" />Saving...</> : "Save Changes"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/pages/student/ExamResults.tsx

@@ -39,20 +39,35 @@ interface FeedbackEntry {
   source: string;
 }
 
+interface AnswerEntry {
+  question_id: number;
+  answer: string;
+  score: number;
+  is_correct: boolean;
+  feedback: string;
+}
+
 interface ExamResultsData {
   attempt_id: number;
   exam_id: number | null;
+  exam_title?: string;
   status: string;
-  completed_at: string;
+  completed_at?: string;
-  released_at: string;
+  released_at?: string;
-  listening_band: number;
+  started_at?: string | null;
-  reading_band: number;
+  finished_at?: string | null;
-  writing_band: number;
+  total_score?: number;
-  speaking_band: number;
+  max_score?: number;
-  overall_band: number;
+  percentage?: number;
-  cefr_level: string;
+  listening_band?: number;
-  scores: ScoreEntry[];
+  reading_band?: number;
-  feedback: FeedbackEntry[];
+  writing_band?: number;
+  speaking_band?: number;
+  overall_band?: number;
+  cefr_level?: string;
+  scores?: ScoreEntry[];
+  feedback?: FeedbackEntry[];
+  answers?: AnswerEntry[];
 }
 
 export default function ExamResults() {
@@ -99,11 +114,13 @@ export default function ExamResults() {
     );
   }
 
-  const overall = results.overall_band;
+  const hasDetailedScores = Array.isArray(results.scores) && results.scores.length > 0;
+  const overall = results.overall_band ?? 0;
+  const pct = results.percentage ?? (results.max_score ? Math.round((results.total_score ?? 0) / results.max_score * 100) : 0);
   const cefr = results.cefr_level?.toUpperCase() || "N/A";
-  const passed = overall >= 7;
+  const passed = hasDetailedScores ? overall >= 7 : pct >= 70;
 
-  const skillScores = results.scores.filter((s) => s.skill !== "overall");
+  const skillScores = hasDetailedScores ? results.scores!.filter((s) => s.skill !== "overall") : [];
   const SKILLS = skillScores.map((s) => ({
     skill: s.skill.charAt(0).toUpperCase() + s.skill.slice(1),
     band: s.band_score,
@@ -114,25 +131,39 @@ export default function ExamResults() {
 
   const RADAR_DATA = SKILLS.map((s) => ({ skill: s.skill, band: s.band }));
 
+  const feedbackList = results.feedback ?? [];
   const feedbackBySkill: Record<string, FeedbackEntry[]> = {};
-  for (const fb of results.feedback) {
+  for (const fb of feedbackList) {
     const key = "General";
     if (!feedbackBySkill[key]) feedbackBySkill[key] = [];
     feedbackBySkill[key].push(fb);
   }
 
+  const answerEntries = results.answers ?? [];
+
   return (
     <div className="mx-auto max-w-5xl space-y-8 p-6">
       <div className="text-center">
+        {results.exam_title && (
+          <h1 className="text-xl font-semibold mb-1">{results.exam_title}</h1>
+        )}
         <p className="text-sm text-muted-foreground">Your overall result</p>
-        <div className="mt-2 flex items-center justify-center gap-3">
+        {hasDetailedScores ? (
-          <Award className="h-12 w-12 text-primary" />
+          <div className="mt-2 flex items-center justify-center gap-3">
-          <span className="text-5xl font-bold tabular-nums">{overall}</span>
+            <Award className="h-12 w-12 text-primary" />
-          <Badge variant="secondary" className="text-lg">
+            <span className="text-5xl font-bold tabular-nums">{overall}</span>
-            Band
+            <Badge variant="secondary" className="text-lg">Band</Badge>
-          </Badge>
+          </div>
-        </div>
+        ) : (
-        <p className="mt-2 text-lg text-muted-foreground">CEFR equivalent: {cefr}</p>
+          <div className="mt-2 flex items-center justify-center gap-3">
+            <Award className="h-12 w-12 text-primary" />
+            <span className="text-5xl font-bold tabular-nums">{pct}%</span>
+          </div>
+        )}
+        <p className="mt-1 text-sm text-muted-foreground">
+          {results.total_score ?? 0} / {results.max_score ?? 0} marks
+        </p>
+        {hasDetailedScores && <p className="mt-1 text-lg text-muted-foreground">CEFR equivalent: {cefr}</p>}
         {practice ? <Badge className="mt-2">Practice mode</Badge> : null}
       </div>
 
@@ -185,11 +216,48 @@ export default function ExamResults() {
         </CardContent>
       </Card>
 
-      {results.feedback.length > 0 && (
+      {answerEntries.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Your Answers</CardTitle>
+            <CardDescription>
+              {answerEntries.filter((a) => a.is_correct).length} correct out of {answerEntries.length}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>#</TableHead>
+                  <TableHead>Your Answer</TableHead>
+                  <TableHead>Score</TableHead>
+                  <TableHead>Result</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {answerEntries.map((a, i) => (
+                  <TableRow key={a.question_id}>
+                    <TableCell>{i + 1}</TableCell>
+                    <TableCell className="max-w-[200px] truncate">{a.answer || "—"}</TableCell>
+                    <TableCell>{a.score}</TableCell>
+                    <TableCell>
+                      <Badge variant={a.is_correct ? "default" : "destructive"}>
+                        {a.is_correct ? "Correct" : "Incorrect"}
+                      </Badge>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      )}
+
+      {feedbackList.length > 0 && (
         <div>
           <h2 className="mb-3 text-lg font-semibold">Feedback</h2>
           <Accordion type="multiple" className="w-full">
-            {results.feedback.map((fb, i) => (
+            {feedbackList.map((fb, i) => (
               <AccordionItem key={i} value={`fb-${i}`}>
                 <AccordionTrigger>
                   {fb.source === "ai" ? "AI Feedback" : fb.source === "teacher" ? "Teacher Feedback" : "Feedback"}{" "}

src/pages/student/ExamSession.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useExamSession, useExamAutoSave, useExamSubmit } from "@/hooks/queries/useExamSession";
-import type { ExamAnswer, ExamQuestion, ExamSessionSection } from "@/types";
+import type { ExamAnswer, ExamOptionItem, ExamQuestion, ExamSessionSection } from "@/types";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
@@ -27,6 +27,11 @@ function normalizeType(t: string | null | undefined) {
   return (t ?? "").toLowerCase().replace(/\s+/g, "_");
 }
 
+function normalizeOption(o: ExamOptionItem): { label: string; text: string } {
+  if (typeof o === "string") return { label: o, text: o };
+  return { label: o.label ?? o.text ?? "", text: o.text ?? o.label ?? "" };
+}
+
 function countWords(s: string) {
   return s.trim() ? s.trim().split(/\s+/).length : 0;
 }
@@ -222,18 +227,19 @@ export default function ExamSession() {
     const a = answers.get(q.id);
     if (!a) return null;
     const nt = normalizeType(q.type);
+    const opts = (q.options ?? []).map(normalizeOption);
 
     if (nt.includes("listen") || q.audio_url) {
       return (
         <div className="space-y-4">
           <ListeningPlayer audioUrl={q.audio_url} audioBase64={q.audio_base64} />
-          {q.options?.length ? (
+          {opts.length ? (
             <RadioGroup
               value={typeof a.answer === "string" ? a.answer : ""}
               onValueChange={(v) => updateAnswer(q.id, { answer: v })}
               className="space-y-2"
             >
-              {q.options.map((o) => (
+              {opts.map((o) => (
                 <div key={o.label} className="flex items-center space-x-2">
                   <RadioGroupItem value={o.label} id={`${q.id}-${o.label}`} />
                   <Label htmlFor={`${q.id}-${o.label}`}>{o.text}</Label>
@@ -249,7 +255,7 @@ export default function ExamSession() {
       const selected = Array.isArray(a.answer) ? a.answer : [];
       return (
         <div className="space-y-3">
-          {q.options?.map((o) => (
+          {opts.map((o) => (
             <div key={o.label} className="flex items-center space-x-2">
               <Checkbox
                 id={`${q.id}-${o.label}`}
@@ -267,7 +273,7 @@ export default function ExamSession() {
       );
     }
 
-    if (nt.includes("gap")) {
+    if (nt.includes("gap") || nt.includes("fill") || nt.includes("short_answer") || nt.includes("summary")) {
       return (
         <Input
           value={typeof a.answer === "string" ? a.answer : ""}
@@ -279,12 +285,12 @@ export default function ExamSession() {
     }
 
     if (nt.includes("true") || nt.includes("tfng") || nt === "yes_no_not_given") {
-      const opts = q.options?.length
+      const tfOpts = opts.length
-        ? q.options
+        ? opts
         : [
-            { label: "T", text: "True" },
+            { label: "TRUE", text: "TRUE" },
-            { label: "F", text: "False" },
+            { label: "FALSE", text: "FALSE" },
-            { label: "NG", text: "Not Given" },
+            { label: "NOT GIVEN", text: "NOT GIVEN" },
           ];
       return (
         <RadioGroup
@@ -292,7 +298,7 @@ export default function ExamSession() {
           onValueChange={(v) => updateAnswer(q.id, { answer: v })}
           className="space-y-2"
         >
-          {opts.map((o) => (
+          {tfOpts.map((o) => (
             <div key={o.label} className="flex items-center space-x-2">
               <RadioGroupItem value={o.label} id={`${q.id}-${o.label}`} />
               <Label htmlFor={`${q.id}-${o.label}`}>{o.text}</Label>
@@ -338,7 +344,7 @@ export default function ExamSession() {
         onValueChange={(v) => updateAnswer(q.id, { answer: v })}
         className="space-y-2"
       >
-        {q.options?.map((o) => (
+        {opts.map((o) => (
           <div key={o.label} className="flex items-center space-x-2">
             <RadioGroupItem value={o.label} id={`${q.id}-${o.label}`} />
             <Label htmlFor={`${q.id}-${o.label}`}>{o.text}</Label>
@@ -389,13 +395,39 @@ export default function ExamSession() {
       </header>
 
       <div className="flex flex-1 min-h-0 flex-col md:flex-row">
-        <ScrollArea className="flex-1 p-6">
+        {section?.passage_text ? (
+          <ScrollArea className="w-full md:w-1/2 border-r p-6">
+            <div className="prose prose-sm dark:prose-invert max-w-none">
+              <h3 className="text-base font-semibold mb-2">{section.title}</h3>
+              {section.difficulty && (
+                <span className="inline-block text-xs font-medium bg-primary/10 text-primary px-2 py-0.5 rounded mb-3">
+                  Level: {section.difficulty}
+                </span>
+              )}
+              <div className="rounded-lg bg-muted/50 p-4 text-sm leading-relaxed whitespace-pre-line">
+                {section.passage_text}
+              </div>
+            </div>
+          </ScrollArea>
+        ) : null}
+        <ScrollArea className={cn("flex-1 p-6", section?.passage_text && "md:w-1/2")}>
           {question ? (
             <Card className="border-none shadow-none">
               <CardContent className="space-y-6 p-0">
-                {question.passage_text ? (
+                {section?.instructions_text ? (
-                  <div className="rounded-lg bg-muted/50 p-4 text-sm leading-relaxed">{question.passage_text}</div>
+                  <div className="rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4 text-sm leading-relaxed border border-blue-200 dark:border-blue-800">
+                    <p className="font-medium text-blue-800 dark:text-blue-200 mb-1">Instructions</p>
+                    {section.instructions_text}
+                  </div>
                 ) : null}
+                <div className="flex items-center gap-3">
+                  <span className="inline-flex items-center justify-center h-7 w-7 rounded-full bg-primary text-primary-foreground text-xs font-bold">
+                    {questionIdx + 1}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    of {section?.questions.length ?? 0} · {question.marks} mark{question.marks !== 1 ? "s" : ""}
+                  </span>
+                </div>
                 <div className="prose prose-sm dark:prose-invert max-w-none">
                   <p className="font-medium">{question.stem}</p>
                 </div>

src/services/assignments.service.ts

@@ -1,11 +1,26 @@
 import { api } from "@/lib/api-client";
-import type { Assignment, AssignmentState, AssignmentCreateRequest, PaginatedResponse, PaginationParams, ApiSuccessResponse } from "@/types";
+import type {
+  Assignment,
+  AssignmentState,
+  AssignmentCreateRequest,
+  ExamSchedule,
+  ExamScheduleCreateRequest,
+  ScheduleState,
+  StudentExamAssignment,
+  PaginatedResponse,
+  PaginationParams,
+  ApiSuccessResponse,
+} from "@/types";
 
 export interface AssignmentListParams extends PaginationParams {
   state?: AssignmentState;
   entity_id?: number;
 }
 
+export interface ScheduleListParams extends PaginationParams {
+  state?: ScheduleState;
+}
+
 export const assignmentsService = {
   async list(params?: AssignmentListParams): Promise<PaginatedResponse<Assignment>> {
     return api.get<PaginatedResponse<Assignment>>("/assignments", params as Record<string, string | number | boolean | undefined>);
@@ -34,4 +49,28 @@ export const assignmentsService = {
   async start(id: number): Promise<Assignment> {
     return api.post<Assignment>(`/assignments/${id}/start`);
   },
+
+  async listSchedules(params?: ScheduleListParams): Promise<PaginatedResponse<ExamSchedule>> {
+    return api.get<PaginatedResponse<ExamSchedule>>("/exam-schedules", params as Record<string, string | number | boolean | undefined>);
+  },
+
+  async createSchedule(data: ExamScheduleCreateRequest): Promise<ExamSchedule> {
+    return api.post<ExamSchedule>("/exam-schedules", data);
+  },
+
+  async updateSchedule(id: number, data: Partial<ExamScheduleCreateRequest & { state: ScheduleState }>): Promise<ExamSchedule> {
+    return api.put<ExamSchedule>(`/exam-schedules/${id}`, data);
+  },
+
+  async deleteSchedule(id: number): Promise<ApiSuccessResponse> {
+    return api.delete<ApiSuccessResponse>(`/exam-schedules/${id}`);
+  },
+
+  async archiveSchedule(id: number): Promise<ExamSchedule> {
+    return api.post<ExamSchedule>(`/exam-schedules/${id}/archive`);
+  },
+
+  async getStudentExams(): Promise<{ items: StudentExamAssignment[] }> {
+    return api.get<{ items: StudentExamAssignment[] }>("/student/my-exams");
+  },
 };

src/services/exams.service.ts

@@ -40,10 +40,30 @@ export const examsService = {
     return api.post<Rubric>("/rubrics", data);
   },
 
+  async updateRubric(id: number, data: Partial<Rubric>): Promise<Rubric> {
+    return api.put<Rubric>(`/rubrics/${id}`, data);
+  },
+
+  async deleteRubric(id: number): Promise<ApiSuccessResponse> {
+    return api.delete<ApiSuccessResponse>(`/rubrics/${id}`);
+  },
+
   async listRubricGroups(params?: PaginationParams): Promise<PaginatedResponse<RubricGroup>> {
     return api.get<PaginatedResponse<RubricGroup>>("/rubric-groups", params as Record<string, string | number | boolean | undefined>);
   },
 
+  async createRubricGroup(data: { name: string; rubric_ids: number[] }): Promise<RubricGroup> {
+    return api.post<RubricGroup>("/rubric-groups", data);
+  },
+
+  async updateRubricGroup(id: number, data: { name?: string; rubric_ids?: number[] }): Promise<RubricGroup> {
+    return api.put<RubricGroup>(`/rubric-groups/${id}`, data);
+  },
+
+  async deleteRubricGroup(id: number): Promise<ApiSuccessResponse> {
+    return api.delete<ApiSuccessResponse>(`/rubric-groups/${id}`);
+  },
+
   async listStructures(params?: PaginationParams & { entity_id?: number }): Promise<PaginatedResponse<ExamStructure>> {
     return api.get<PaginatedResponse<ExamStructure>>("/exam-structures", params as Record<string, string | number | boolean | undefined>);
   },
@@ -52,10 +72,23 @@ export const examsService = {
     return api.post<ExamStructure>("/exam-structures", data);
   },
 
+  async updateStructure(id: number, data: Partial<ExamStructure>): Promise<ExamStructure> {
+    return api.put<ExamStructure>(`/exam-structures/${id}`, data);
+  },
+
   async deleteStructure(id: number): Promise<ApiSuccessResponse> {
     return api.delete<ApiSuccessResponse>(`/exam-structures/${id}`);
   },
 
+  async suggestRubricCriteria(data: {
+    name?: string;
+    skill: string;
+    exam_type: string;
+    levels: string[];
+  }): Promise<{ criteria: string[]; suggested_levels?: string[] }> {
+    return api.post("/ai/suggest-rubric-criteria", data);
+  },
+
   async getAvatars(): Promise<{ id: number; name: string; thumbnail: string }[]> {
     return api.get("/exam/avatars");
   },

src/services/generation.service.ts

@@ -137,9 +137,11 @@ export const generationService = {
   submitExam(data: {
     title: string;
     label: string;
+    exam_mode?: string;
+    structure_id?: number;
     modules: Record<string, unknown>;
     skip_approval?: boolean;
-  }): Promise<{ exam_id: number; status: string; template_id?: number }> {
+  }): Promise<{ exam_id: number; status: string; template_id?: number; total_questions?: number }> {
     return api.post("/exam/generation/submit", data);
   },
 };

src/types/assignment.ts

@@ -35,3 +35,60 @@ export interface AssignmentCreateRequest {
   exam_ids: number[];
   assignee_ids?: number[];
 }
+
+export type ScheduleState = "planned" | "active" | "past" | "start_expired" | "archived";
+
+export interface ExamSchedule {
+  id: number;
+  name: string;
+  exam_id: number | null;
+  exam_title: string;
+  entity_id: number | null;
+  entity_name: string;
+  start_date: string | null;
+  end_date: string | null;
+  state: ScheduleState;
+  assign_mode: "entity" | "batch" | "individual";
+  full_length: boolean;
+  generate_different: boolean;
+  auto_release_results: boolean;
+  auto_start: boolean;
+  official_exam: boolean;
+  hide_assignee_details: boolean;
+  batch_ids: number[];
+  batch_names: string[];
+  student_ids: number[];
+  assignee_count: number;
+  completed_count: number;
+  created: string;
+}
+
+export interface ExamScheduleCreateRequest {
+  name: string;
+  exam_id: number;
+  entity_id?: number;
+  start_date: string;
+  end_date: string;
+  assign_mode: "entity" | "batch" | "individual";
+  batch_ids?: number[];
+  student_ids?: number[];
+  full_length?: boolean;
+  generate_different?: boolean;
+  auto_release_results?: boolean;
+  auto_start?: boolean;
+  official_exam?: boolean;
+  hide_assignee_details?: boolean;
+}
+
+export interface StudentExamAssignment {
+  id: number;
+  exam_id: number;
+  exam_title: string;
+  schedule_name: string;
+  start_date: string | null;
+  end_date: string | null;
+  status: string;
+  schedule_state: ScheduleState;
+  auto_start: boolean;
+  can_start: boolean;
+}

src/types/exam-session.ts

@@ -10,20 +10,33 @@ export interface ExamSessionSection {
   id: number;
   title: string;
   skill: string;
+  difficulty?: string;
   time_limit_sec: number;
+  time_limit_min?: number;
+  total_marks?: number;
+  scoring_method?: string;
+  sequence?: number;
+  passage_text?: string;
+  instructions_text?: string;
   questions: ExamQuestion[];
 }
 
+export type ExamOptionItem = { label: string; text: string } | string;
+
 export interface ExamQuestion {
   id: number;
   type: string;
+  question_type?: string;
   stem: string;
-  options?: { label: string; text: string }[];
+  options?: ExamOptionItem[];
   passage_text?: string;
   audio_url?: string;
+  audio_base64?: string;
   visual_url?: string;
   min_words?: number;
   marks: number;
+  difficulty?: string;
+  source_type?: string;
 }
 
 export interface ExamAnswer {

src/types/exam.ts

@@ -37,6 +37,8 @@ export interface RubricGroup {
   id: number;
   name: string;
   rubric_ids: number[];
+  rubric_names?: string[];
+  created?: string;
 }
 
 export interface ExamStructure {
@@ -44,6 +46,77 @@ export interface ExamStructure {
   name: string;
   entity_id: number;
   entity_name: string;
+  industry: string;
   modules: ExamModule[];
+  config: ExamStructureConfig;
   created_at: string;
 }
+
+export interface ListeningPartConfig {
+  key: string;
+  label: string;
+  questions: number;
+  question_types: Record<string, number>;
+}
+
+export interface ReadingPassageConfig {
+  style: string;
+  questions: number;
+  question_types: Record<string, number>;
+}
+
+export interface SpeakingPartConfig {
+  key: string;
+  label: string;
+  duration_min: number;
+  duration_max: number;
+}
+
+export interface WritingTaskConfig {
+  type: string;
+  min_words: number;
+  label?: string;
+}
+
+export interface LevelExerciseEntry {
+  type: string;
+  quantity: number;
+}
+
+export interface IndustryExerciseEntry {
+  type: string;
+  quantity: number;
+}
+
+export interface ExamStructureConfig {
+  exam_type: "academic" | "general";
+  listening?: {
+    parts: ListeningPartConfig[];
+    total_questions: number;
+  };
+  reading?: {
+    passages: ReadingPassageConfig[];
+    total_questions: number;
+  };
+  writing?: {
+    tasks: WritingTaskConfig[];
+    /** @deprecated kept for backward compat reads */
+    task1?: { type: string; min_words: number };
+    /** @deprecated kept for backward compat reads */
+    task2?: { type: string; min_words: number };
+    rubric_id: number | null;
+  };
+  speaking?: {
+    parts: SpeakingPartConfig[];
+    rubric_id: number | null;
+  };
+  level?: {
+    exercise_types: Record<string, number>;
+    entries?: LevelExerciseEntry[];
+  };
+  industry?: {
+    exercise_types: Record<string, number>;
+    entries?: IndustryExerciseEntry[];
+    difficulty: string;
+  };
+}