From 40cc485be4944f339a28952e00195de12af6ad7f Mon Sep 17 00:00:00 2001
From: Vincent <v23zhou@uwaterloo.ca>
Date: Sat, 25 Jul 2026 22:54:03 -0400
Subject: [PATCH 1/3] create subject page

---
 src/pages/subjects/create.tsx | 252 ++++++++++++++++++++++++++++++++--
 1 file changed, 244 insertions(+), 8 deletions(-)

diff --git a/src/pages/subjects/create.tsx b/src/pages/subjects/create.tsx
index ee75db8..e5341a4 100644
--- a/src/pages/subjects/create.tsx
+++ b/src/pages/subjects/create.tsx
@@ -1,16 +1,252 @@
-import React from 'react'
-import { RequireRole } from '@/components/require-role';
+import React from "react";
+import { CreateView } from "@/components/refine-ui/views/create-view";
+import { Breadcrumb } from "@/components/refine-ui/layout/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { useBack, type HttpError } from "@refinedev/core";
+import { useForm } from "@refinedev/react-hook-form";
+import { Separator } from "@/components/ui/separator";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { subjectSchema } from "@/lib/schema";
+import * as z from "zod";
+import { toast } from "sonner";
+import {
+  FieldGroup,
+  FieldLabel,
+  FieldError,
+  FieldDescription,
+  Field,
+} from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupTextarea,
+  InputGroupAddon,
+  InputGroupText,
+} from "@/components/ui/input-group";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { RequireRole } from "@/components/require-role";
+import { DEPARTMENT_OPTIONS } from "@/constants";
+
+type CreateSubjectFormOutput = z.infer<typeof subjectSchema>;
+
+const Create = () => {
+  const back = useBack();
+  const {
+    refineCore: { onFinish, formLoading },
+    ...form
+  } = useForm<CreateSubjectFormOutput, HttpError, CreateSubjectFormOutput>({
+    resolver: zodResolver(subjectSchema),
+    defaultValues: {
+      name: "",
+      code: "",
+      description: "",
+      department: "",
+    },
+    refineCoreProps: {
+      resource: "subjects",
+      action: "create",
+      onMutationSuccess: () => {
+        toast.success("Subject created successfully");
+        back();
+      },
+      onMutationError: (error) => {
+        toast.error(error.message ?? "Failed to create subject");
+      },
+    },
+  });
+
+  function onSubmit(data: CreateSubjectFormOutput) {
+    onFinish(data);
+  }
 
-const SubjectsCreate =()=>{
   return (
-    <div>create</div>
-  )
-}
+    <CreateView className="class-view">
+      <Breadcrumb />
+      <h1 className="page-title">Create Subject</h1>
+      <div className="intro-row flex-col">
+        <p>Provide the details of the subject to be created.</p>
+      </div>
+      <Separator />
+      <div className="my-2 flex items-center">
+        <Card className="class-form-card">
+          <CardHeader className="relative z-10">
+            <CardTitle className="text-2xl pb-0 font-bold">
+              Fill in the details to create a new subject
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="w-full max-w-2xl mx-auto px-4 sm:px-6">
+            <form
+              id="rhf-create-subject-form"
+              className="w-full"
+              onSubmit={form.handleSubmit(onSubmit)}
+            >
+              <FieldGroup className="w-full gap-6">
+                <Controller
+                  name="name"
+                  control={form.control}
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor="rhf-create-subject-form-name">
+                        Subject name
+                        <span className="text-red-500">
+                          {fieldState.error ? "*" : null}
+                        </span>
+                      </FieldLabel>
+                      <Input
+                        {...field}
+                        id="rhf-create-subject-form-name"
+                        className="h-11 w-full text-base"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="Enter the name of the subject"
+                        autoComplete="off"
+                      />
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+
+                <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 mb-3">
+                  <Controller
+                    name="code"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor="rhf-create-subject-form-code">
+                          Code
+                          <span className="text-red-500">
+                            {fieldState.error ? "*" : null}
+                          </span>
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id="rhf-create-subject-form-code"
+                          className="h-11 w-full text-base"
+                          aria-invalid={fieldState.invalid}
+                          placeholder="e.g. MATH101"
+                          autoComplete="off"
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+
+                  <Controller
+                    name="department"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <Field
+                        data-invalid={fieldState.invalid}
+                        className="min-w-0"
+                      >
+                        <FieldLabel htmlFor="rhf-create-subject-form-department">
+                          Department
+                          <span className="text-red-500">
+                            {fieldState.error ? "*" : null}
+                          </span>
+                        </FieldLabel>
+                        <Select
+                          value={field.value ? field.value : undefined}
+                          onValueChange={field.onChange}
+                          onOpenChange={(open) => {
+                            if (!open) field.onBlur();
+                          }}
+                        >
+                          <SelectTrigger
+                            id="rhf-create-subject-form-department"
+                            ref={field.ref}
+                            className="mb-1 h-11 w-full min-w-0 max-w-none justify-between text-base"
+                          >
+                            <SelectValue placeholder="Select a department" />
+                          </SelectTrigger>
+                          <SelectContent className="max-h-72 min-w-[var(--radix-select-trigger-width)]">
+                            {DEPARTMENT_OPTIONS.map((department) => (
+                              <SelectItem
+                                key={department.value}
+                                value={department.value}
+                              >
+                                {department.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+                </div>
+
+                <Controller
+                  name="description"
+                  control={form.control}
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid}>
+                      <FieldLabel htmlFor="rhf-create-subject-form-description">
+                        Description
+                        <span className="text-red-500">
+                          {fieldState.error ? "*" : null}
+                        </span>
+                      </FieldLabel>
+                      <InputGroup>
+                        <InputGroupTextarea
+                          {...field}
+                          id="rhf-create-subject-form-description"
+                          placeholder="Describe what this subject covers."
+                          rows={6}
+                          className="min-h-32 w-full resize-none text-base"
+                          aria-invalid={fieldState.invalid}
+                        />
+                        <InputGroupAddon align="block-end">
+                          <InputGroupText className="tabular-nums">
+                            {field.value.length}/255 characters
+                          </InputGroupText>
+                        </InputGroupAddon>
+                      </InputGroup>
+                      <FieldDescription>
+                        Include topics, level, and how this subject is used in
+                        the curriculum.
+                      </FieldDescription>
+                      {fieldState.invalid && (
+                        <FieldError errors={[fieldState.error]} />
+                      )}
+                    </Field>
+                  )}
+                />
+              </FieldGroup>
+            </form>
+            <Button
+              className="mr-4"
+              type="submit"
+              form="rhf-create-subject-form"
+              disabled={formLoading}
+            >
+              {formLoading ? "Creating..." : "Submit"}
+            </Button>
+            <Button onClick={back}>Back</Button>
+          </CardContent>
+        </Card>
+      </div>
+    </CreateView>
+  );
+};
 
 const SubjectsCreatePage = () => (
   <RequireRole roles={["admin"]}>
-    <SubjectsCreate />
+    <Create />
   </RequireRole>
 );
 
-export default SubjectsCreatePage
\ No newline at end of file
+export default SubjectsCreatePage;

From cc5dc716f74cf961257b64b409dcf52b1d2438b7 Mon Sep 17 00:00:00 2001
From: Vincent <v23zhou@uwaterloo.ca>
Date: Sat, 25 Jul 2026 23:59:41 -0400
Subject: [PATCH 2/3] pass department id to backend

---
 src/App.tsx                   |  4 ++++
 src/lib/schema.ts             | 12 ++++++++----
 src/pages/subjects/create.tsx | 37 +++++++++++++++++++++++++----------
 src/types/index.ts            | 16 ++++++++-------
 4 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ccd76fa..6b94855 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -72,6 +72,10 @@ function App() {
                   create:"/subjects/create",
                   meta:{label:"Subjects", icon:<Book/>}
                 },
+                {
+                  name: "departments",
+                  meta: { hide: true },
+                },
                 {
                   name: "classes",
                   list:"/classes",
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index 0be7ca7..acd6df8 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -16,10 +16,14 @@ export const subjectSchema = z.object({
     code: z.string().min(5, "Subject code must be at least 5 characters"),
     description: z
         .string()
-        .min(5, "Subject description must be at least 5 characters"),
-    department: z
-        .string()
-        .min(2, "Subject department must be at least 2 characters"),
+        .min(5, "Subject description must be at least 5 characters")
+        .max(255, "Subject description must be at most 255 characters"),
+    departmentId: z.coerce
+        .number({
+            required_error: "Department is required",
+            invalid_type_error: "Department is required",
+        })
+        .min(1, "Department is required"),
 });
 
 const scheduleSchema = z.object({
diff --git a/src/pages/subjects/create.tsx b/src/pages/subjects/create.tsx
index e5341a4..6578e23 100644
--- a/src/pages/subjects/create.tsx
+++ b/src/pages/subjects/create.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { CreateView } from "@/components/refine-ui/views/create-view";
 import { Breadcrumb } from "@/components/refine-ui/layout/breadcrumb";
 import { Button } from "@/components/ui/button";
-import { useBack, type HttpError } from "@refinedev/core";
+import { useBack, useList, type HttpError } from "@refinedev/core";
 import { useForm } from "@refinedev/react-hook-form";
 import { Separator } from "@/components/ui/separator";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
@@ -33,7 +33,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { RequireRole } from "@/components/require-role";
-import { DEPARTMENT_OPTIONS } from "@/constants";
+import type { Department } from "@/types";
 
 type CreateSubjectFormOutput = z.infer<typeof subjectSchema>;
 
@@ -48,7 +48,7 @@ const Create = () => {
       name: "",
       code: "",
       description: "",
-      department: "",
+      departmentId: undefined,
     },
     refineCoreProps: {
       resource: "subjects",
@@ -63,6 +63,13 @@ const Create = () => {
     },
   });
 
+  const { query: DepartmentsQuery } = useList({
+    resource: "departments",
+    pagination: { pageSize: 100 },
+  });
+  const departments = (DepartmentsQuery.data?.data ?? []) as Department[];
+  const departmentIsLoading = DepartmentsQuery.isLoading;
+
   function onSubmit(data: CreateSubjectFormOutput) {
     onFinish(data);
   }
@@ -143,8 +150,9 @@ const Create = () => {
                   />
 
                   <Controller
-                    name="department"
+                    name="departmentId"
                     control={form.control}
+                    disabled={departmentIsLoading}
                     render={({ field, fieldState }) => (
                       <Field
                         data-invalid={fieldState.invalid}
@@ -157,8 +165,16 @@ const Create = () => {
                           </span>
                         </FieldLabel>
                         <Select
-                          value={field.value ? field.value : undefined}
-                          onValueChange={field.onChange}
+                          name={field.name}
+                          disabled={field.disabled}
+                          value={
+                            field.value === undefined || field.value === null
+                              ? undefined
+                              : String(field.value)
+                          }
+                          onValueChange={(value) =>
+                            field.onChange(Number(value))
+                          }
                           onOpenChange={(open) => {
                             if (!open) field.onBlur();
                           }}
@@ -171,12 +187,12 @@ const Create = () => {
                             <SelectValue placeholder="Select a department" />
                           </SelectTrigger>
                           <SelectContent className="max-h-72 min-w-[var(--radix-select-trigger-width)]">
-                            {DEPARTMENT_OPTIONS.map((department) => (
+                            {departments.map((department) => (
                               <SelectItem
-                                key={department.value}
-                                value={department.value}
+                                key={department.id}
+                                value={String(department.id)}
                               >
-                                {department.label}
+                                {department.name}
                               </SelectItem>
                             ))}
                           </SelectContent>
@@ -206,6 +222,7 @@ const Create = () => {
                           id="rhf-create-subject-form-description"
                           placeholder="Describe what this subject covers."
                           rows={6}
+                          maxLength={255}
                           className="min-h-32 w-full resize-none text-base"
                           aria-invalid={fieldState.invalid}
                         />
diff --git a/src/types/index.ts b/src/types/index.ts
index 7694584..796e143 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,9 +1,17 @@
+export type Department = {
+    id: number;
+    code: string;
+    name: string;
+    description: string;
+};
+
 export type Subject = {
     id: number;
     name: string;
     code: string;
     description: string;
-    department: string;
+    departmentId: number;
+    department?: Department;
     createdAt?: string;
 };
 
@@ -107,12 +115,6 @@ export function toClassScheduleSlot(schedule: Schedule): ClassScheduleSlot {
     };
 }
 
-export type Department = {
-    id: number;
-    name: string;
-    description: string;
-};
-
 export type ClassDetails = {
     id: number;
     name: string;

From 6a1473cfe0019414682f213da8662af4449d6717 Mon Sep 17 00:00:00 2001
From: Vincent <v23zhou@uwaterloo.ca>
Date: Sun, 26 Jul 2026 00:04:49 -0400
Subject: [PATCH 3/3] remove useless pagination

---
 src/pages/subjects/create.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/subjects/create.tsx b/src/pages/subjects/create.tsx
index 6578e23..61256b4 100644
--- a/src/pages/subjects/create.tsx
+++ b/src/pages/subjects/create.tsx
@@ -65,7 +65,6 @@ const Create = () => {
 
   const { query: DepartmentsQuery } = useList({
     resource: "departments",
-    pagination: { pageSize: 100 },
   });
   const departments = (DepartmentsQuery.data?.data ?? []) as Department[];
   const departmentIsLoading = DepartmentsQuery.isLoading;