From 7da4b1d72ecd0ab1a63e836e12c77faa9762e084 Mon Sep 17 00:00:00 2001
From: Adel Obaji <adelobaji23@gmail.com>
Date: Tue, 22 Sep 2026 01:54:23 +0300
Subject: [PATCH 1/8] edit import type

---
 src/service/src/teacher/api/teacher.controller.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/service/src/teacher/api/teacher.controller.ts b/src/service/src/teacher/api/teacher.controller.ts
index 670b4aa1..7ecf5151 100644
--- a/src/service/src/teacher/api/teacher.controller.ts
+++ b/src/service/src/teacher/api/teacher.controller.ts
@@ -10,12 +10,8 @@ import {
   Delete,
 } from '@nestjs/common';
 import { TeacherService } from '../services/teacher.service';
-import type {
-  CreateTeacherDto,
-  TeacherDetailsDto,
-  TeacherDto,
-  UpdateTeacherDto,
-} from 'dtos';
+import type { TeacherDetailsDto, TeacherDto } from 'dtos';
+import { CreateTeacherDto, UpdateTeacherDto } from 'dtos';
 import { JwtAuthGuard } from '../../auth/guards/jwt-auth.guard';
 
 @UseGuards(JwtAuthGuard)

From b2bb7f0153011041a80c9a21f0dd03a87c3efd6d Mon Sep 17 00:00:00 2001
From: Adel Obaji <adelobaji23@gmail.com>
Date: Tue, 22 Sep 2026 01:59:46 +0300
Subject: [PATCH 2/8] feature : build create and update form for teachers pages

---
 src/dashboard/src/components/teacher-form.tsx | 219 ++++++++++++++++++
 .../src/components/teacher-modal.tsx          |  38 +++
 .../pages/teacher/teachers-details-page.tsx   |  20 +-
 .../src/pages/teacher/teachers-page.tsx       |  64 ++++-
 4 files changed, 339 insertions(+), 2 deletions(-)
 create mode 100644 src/dashboard/src/components/teacher-form.tsx
 create mode 100644 src/dashboard/src/components/teacher-modal.tsx

diff --git a/src/dashboard/src/components/teacher-form.tsx b/src/dashboard/src/components/teacher-form.tsx
new file mode 100644
index 00000000..9f487e67
--- /dev/null
+++ b/src/dashboard/src/components/teacher-form.tsx
@@ -0,0 +1,219 @@
+import { Field, FieldDescription, FieldGroup, FieldLabel } from './ui/field';
+import type { TeacherDetailsDto, TeacherDto } from 'dtos';
+import { teacherService } from '@/services/teacher.service';
+import { useState } from 'react';
+import { Input } from './ui/input';
+import { Button } from './ui/button';
+import axios from 'axios';
+
+type TeacherFormProps = {
+  onCancel: () => void;
+  teacher?: TeacherDetailsDto;
+  onUpdateSuccess: (updatedTeacher: TeacherDetailsDto) => void;
+  onCreateSuccess: (createdTeacher: TeacherDto) => void;
+};
+
+export function TeacherForm({
+  onCancel,
+  teacher,
+  onUpdateSuccess,
+  onCreateSuccess,
+}: TeacherFormProps) {
+  const [teacherData, setTeacherData] = useState({
+    firstName: teacher?.firstName ?? '',
+    lastName: teacher?.lastName ?? '',
+    email: teacher?.email ?? '',
+    phoneNumber: teacher?.phoneNumber ?? '',
+    degree: teacher?.degree ?? '',
+    password: '',
+  });
+
+  const [formError, setFormError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+
+        setFormError(null);
+        setIsSubmitting(true);
+
+        if (teacher) {
+          teacherService
+            .updateTeacherById(teacher.userId, teacherData)
+            .then((updatedTeacher) => {
+              setIsSubmitting(false);
+              onUpdateSuccess(updatedTeacher);
+              onCancel();
+            })
+            .catch((error) => {
+              setIsSubmitting(false);
+              console.log('Failed to update teacher:', error);
+
+              if (axios.isAxiosError(error)) {
+                const message = error.response?.data?.message;
+
+                if (Array.isArray(message)) {
+                  setFormError(message.join(', '));
+                  return;
+                }
+
+                if (typeof message === 'string') {
+                  setFormError(message);
+                  return;
+                }
+              }
+
+              setFormError('Failed to update teacher. Please try again later.');
+            });
+
+          return;
+        }
+
+        teacherService
+          .createTeacher({
+            firstName: teacherData.firstName,
+            lastName: teacherData.lastName,
+            email: teacherData.email,
+            phoneNumber: teacherData.phoneNumber,
+            hashedPassword: teacherData.password,
+            degree: teacherData.degree,
+          })
+          .then((createdTeacher) => {
+            setIsSubmitting(false);
+            onCreateSuccess(createdTeacher);
+            onCancel();
+          })
+          .catch((error) => {
+            setIsSubmitting(false);
+            console.log('Failed to create teacher:', error);
+
+            if (axios.isAxiosError(error)) {
+              const message = error.response?.data?.message;
+
+              if (Array.isArray(message)) {
+                setFormError(message.join(', '));
+                return;
+              }
+
+              if (typeof message === 'string') {
+                setFormError(message);
+                return;
+              }
+            }
+
+            setFormError('Failed to create teacher. Please try again later.');
+          });
+      }}
+    >
+      <FieldGroup className="max-w-md">
+        <Field>
+          <FieldLabel>
+            First Name
+            <Input
+              className="firstName"
+              placeholder="Adel"
+              value={teacherData.firstName}
+              onChange={(data) =>
+                setTeacherData({ ...teacherData, firstName: data.target.value })
+              }
+            />
+          </FieldLabel>
+        </Field>
+
+        <Field>
+          <FieldLabel>
+            Last Name
+            <Input
+              className="lastName"
+              placeholder="Obaji"
+              value={teacherData.lastName}
+              onChange={(data) =>
+                setTeacherData({ ...teacherData, lastName: data.target.value })
+              }
+            />
+          </FieldLabel>
+        </Field>
+
+        <Field>
+          <FieldLabel>
+            Email
+            <Input
+              className="email"
+              placeholder="adelobaji@gmail.com"
+              value={teacherData.email}
+              onChange={(data) =>
+                setTeacherData({ ...teacherData, email: data.target.value })
+              }
+            />
+            <FieldDescription>
+              The primary email used for academic notifications.
+            </FieldDescription>
+          </FieldLabel>
+        </Field>
+
+        <Field>
+          <FieldLabel>Phone Number</FieldLabel>
+          <FieldDescription>
+            Include country code if applicable.
+          </FieldDescription>
+          <Input
+            type="tel"
+            name="phoneNumber"
+            placeholder="+963 123 456 789"
+            value={teacherData.phoneNumber}
+            onChange={(data) =>
+              setTeacherData({ ...teacherData, phoneNumber: data.target.value })
+            }
+          />
+        </Field>
+
+        <Field>
+          <FieldLabel>
+            Degree
+            <Input
+              className="degree"
+              placeholder="Bachelor's in Computer Science"
+              value={teacherData.degree}
+              onChange={(data) =>
+                setTeacherData({ ...teacherData, degree: data.target.value })
+              }
+            />
+            <FieldDescription>
+              The degree or qualification of the teacher.
+            </FieldDescription>
+          </FieldLabel>
+        </Field>
+
+        {!teacher && (
+          <Field>
+            <FieldLabel>
+              Password
+              <Input
+                type="password"
+                placeholder="Enter password"
+                value={teacherData.password}
+                onChange={(data) =>
+                  setTeacherData({
+                    ...teacherData,
+                    password: data.target.value,
+                  })
+                }
+              />
+            </FieldLabel>
+          </Field>
+        )}
+
+        {formError && <p className="text-sm text-red-600">{formError}</p>}
+        <div className="pt-4 flex justify-end gap-3">
+          <Button type="button" variant="secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? 'Submitting...' : 'Submit'}
+          </Button>
+        </div>
+      </FieldGroup>
+    </form>
+  );
+}
diff --git a/src/dashboard/src/components/teacher-modal.tsx b/src/dashboard/src/components/teacher-modal.tsx
new file mode 100644
index 00000000..f083709a
--- /dev/null
+++ b/src/dashboard/src/components/teacher-modal.tsx
@@ -0,0 +1,38 @@
+import type { TeacherDetailsDto, TeacherDto } from 'dtos';
+import { TeacherForm } from './teacher-form';
+
+type TeacherModalProps = {
+  open: boolean;
+  teacher?: TeacherDetailsDto;
+  onUpdateSuccess: (updatedTeacher: TeacherDetailsDto) => void;
+  onCreateSuccess: (createdTeacher: TeacherDto) => void;
+  onClose: () => void;
+};
+
+export default function TeacherModal({
+  open,
+  teacher,
+  onUpdateSuccess,
+  onCreateSuccess,
+  onClose,
+}: TeacherModalProps) {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="w-[450px] rounded-xl bg-white p-6 shadow-lg">
+        <h2 className="mb-6 text-2xl font-semibold">
+          {teacher ? 'Update Teacher' : 'Create Teacher'}
+        </h2>
+        <TeacherForm
+          onCancel={onClose}
+          teacher={teacher}
+          onUpdateSuccess={onUpdateSuccess}
+          onCreateSuccess={onCreateSuccess}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/dashboard/src/pages/teacher/teachers-details-page.tsx b/src/dashboard/src/pages/teacher/teachers-details-page.tsx
index f1e4b161..fdcc5b09 100644
--- a/src/dashboard/src/pages/teacher/teachers-details-page.tsx
+++ b/src/dashboard/src/pages/teacher/teachers-details-page.tsx
@@ -12,6 +12,7 @@ import {
 import { teacherService } from '@/services/teacher.service';
 import { useNumericParam } from '@/hooks/use-numeric-param';
 import type { TeacherDetailsDto } from 'dtos';
+import TeacherModal from '@/components/teacher-modal';
 
 export default function TeachersDetailsPage() {
   const teacherId = useNumericParam('id');
@@ -19,6 +20,7 @@ export default function TeachersDetailsPage() {
   const [teacher, setTeacher] = useState<TeacherDetailsDto | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [fetchError, setFetchError] = useState<string | null>(null);
+  const [isTeacherModalOpen, setIsTeacherModalOpen] = useState(false);
 
   useEffect(() => {
     const fetchTeacher = async () => {
@@ -105,12 +107,28 @@ export default function TeachersDetailsPage() {
 
         <CardFooter className="flex justify-end gap-3 border-t bg-gray-50/50 pt-6">
           {/* TODO: Use update form here */}
-          <Button variant="secondary">Edit</Button>
+          <Button
+            variant="secondary"
+            onClick={() => setIsTeacherModalOpen(true)}
+          >
+            Edit
+          </Button>
 
           {/* TODO: Use Generic Delete Modal */}
           <Button variant="secondary">Delete</Button>
         </CardFooter>
       </Card>
+
+      <TeacherModal
+        open={isTeacherModalOpen}
+        teacher={teacher}
+        onUpdateSuccess={(updatedTeacher) => {
+          setTeacher(updatedTeacher);
+          setIsTeacherModalOpen(false);
+        }}
+        onCreateSuccess={() => {}}
+        onClose={() => setIsTeacherModalOpen(false)}
+      />
     </div>
   );
 }
diff --git a/src/dashboard/src/pages/teacher/teachers-page.tsx b/src/dashboard/src/pages/teacher/teachers-page.tsx
index c757f931..f7c82aee 100644
--- a/src/dashboard/src/pages/teacher/teachers-page.tsx
+++ b/src/dashboard/src/pages/teacher/teachers-page.tsx
@@ -13,7 +13,9 @@ import {
 
 import DeleteModal from '@/components/ui/delete-modal';
 import { teacherService } from '@/services/teacher.service';
-import type { TeacherDto } from 'dtos';
+import type { TeacherDetailsDto, TeacherDto } from 'dtos';
+import { Button } from '@/components/ui/button';
+import TeacherModal from '@/components/teacher-modal';
 
 export default function TeachersPage() {
   const navigate = useNavigate();
@@ -28,6 +30,9 @@ export default function TeachersPage() {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [teacherToEditData, setTeacherToEditData] =
+    useState<TeacherDetailsDto | null>(null);
+  const [isTeacherModalOpen, setIsTeacherModalOpen] = useState(false);
 
   useEffect(() => {
     const fetchTeachers = async () => {
@@ -89,9 +94,32 @@ export default function TeachersPage() {
     }
   };
 
+  const handleUpdateSuccess = (updatedTeacher: TeacherDetailsDto) => {
+    setTeachers((previousTeachers) =>
+      previousTeachers.map((teacher) =>
+        teacher.userId === updatedTeacher.userId ? updatedTeacher : teacher,
+      ),
+    );
+  };
+
+  const handleCreateSuccess = (createdTeacher: TeacherDto) => {
+    setTeachers((previousTeachers) => [...previousTeachers, createdTeacher]);
+  };
+
   return (
     <div className="w-full min-h-screen bg-white p-8">
       <div className="overflow-x-auto">
+        <div className="mb-4 flex justify-end">
+          <Button
+            variant="secondary"
+            onClick={() => {
+              setTeacherToEditData(null);
+              setIsTeacherModalOpen(true);
+            }}
+          >
+            Add Teacher
+          </Button>
+        </div>
         <Table>
           <TableCaption className="pb-4">
             A list of registered teachers.
@@ -144,6 +172,29 @@ export default function TeachersPage() {
                   <TableCell>{teacher.degree}</TableCell>
 
                   <TableCell>
+                    <Button
+                      variant="secondary"
+                      className="h-9 px-4 text-sm"
+                      onClick={async (event) => {
+                        event.stopPropagation();
+
+                        try {
+                          const teacherDetails =
+                            await teacherService.getTeacherById(teacher.userId);
+
+                          setTeacherToEditData(teacherDetails);
+                          setIsTeacherModalOpen(true);
+                        } catch (error) {
+                          console.error(
+                            'Failed to fetch teacher details:',
+                            error,
+                          );
+                        }
+                      }}
+                    >
+                      Edit
+                    </Button>
+
                     <button
                       type="button"
                       onClick={(event) => {
@@ -178,6 +229,17 @@ export default function TeachersPage() {
           isLoading={isDeleting}
           error={deleteError ?? undefined}
         />
+
+        <TeacherModal
+          open={isTeacherModalOpen}
+          teacher={teacherToEditData ?? undefined}
+          onUpdateSuccess={handleUpdateSuccess}
+          onCreateSuccess={handleCreateSuccess}
+          onClose={() => {
+            setIsTeacherModalOpen(false);
+            setTeacherToEditData(null);
+          }}
+        />
       </div>
     </div>
   );

From 74babebccee36fd7e3ca963e7e8ba451175f8f5e Mon Sep 17 00:00:00 2001
From: Adel Obaji <adelobaji23@gmail.com>
Date: Tue, 22 Sep 2026 02:00:59 +0300
Subject: [PATCH 3/8] feature : add create and update function

---
 src/dashboard/src/services/teacher.service.ts | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/dashboard/src/services/teacher.service.ts b/src/dashboard/src/services/teacher.service.ts
index f6ef5434..e656365d 100644
--- a/src/dashboard/src/services/teacher.service.ts
+++ b/src/dashboard/src/services/teacher.service.ts
@@ -1,6 +1,11 @@
 import { api } from '@/lib/api-client';
 
-import type { TeacherDetailsDto, TeacherDto } from 'dtos';
+import type {
+  CreateTeacherDto,
+  TeacherDetailsDto,
+  TeacherDto,
+  UpdateTeacherDto,
+} from 'dtos';
 
 class TeacherService {
   private readonly baseUrl = '/api/teacher';
@@ -20,6 +25,22 @@ class TeacherService {
   async deleteTeacher(userId: number): Promise<void> {
     await api.delete(`${this.baseUrl}/${userId}`);
   }
+
+  async updateTeacherById(
+    id: number | string,
+    updateTeacher: UpdateTeacherDto,
+  ): Promise<TeacherDetailsDto> {
+    const response = await api.put<TeacherDetailsDto>(
+      `${this.baseUrl}/${id}`,
+      updateTeacher,
+    );
+    return response.data;
+  }
+
+  async createTeacher(teacher: CreateTeacherDto): Promise<TeacherDto> {
+    const response = await api.post<TeacherDto>(this.baseUrl, teacher);
+    return response.data;
+  }
 }
 
 export const teacherService = new TeacherService();

From db8dbc602d199fe64f276cc4d5e30b4d69069d25 Mon Sep 17 00:00:00 2001
From: Adel Obaji <adelobaji23@gmail.com>
Date: Tue, 22 Sep 2026 02:05:13 +0300
Subject: [PATCH 4/8] delete file

---
 .../src/components/StudentUpdateForm.tsx      | 140 ------------------
 1 file changed, 140 deletions(-)
 delete mode 100644 src/dashboard/src/components/StudentUpdateForm.tsx

diff --git a/src/dashboard/src/components/StudentUpdateForm.tsx b/src/dashboard/src/components/StudentUpdateForm.tsx
deleted file mode 100644
index 120cf6bf..00000000
--- a/src/dashboard/src/components/StudentUpdateForm.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { Field, FieldDescription, FieldGroup, FieldLabel } from './ui/field';
-import { Input } from './ui/input';
-import { Button } from './ui/button';
-import { useState } from 'react';
-import { studentService } from '@/services/student.service';
-import type { StudentDetailsDto } from 'dtos';
-import axios from 'axios';
-
-type StudentUpdateFormProps = {
-  onCancel: () => void;
-  student?: StudentDetailsDto;
-  onUpdateSuccess: (updatedStudent: StudentDetailsDto) => void;
-};
-
-export function StudentUpdateForm({
-  onCancel,
-  student,
-  onUpdateSuccess,
-}: StudentUpdateFormProps) {
-  const [studentData, setStudentData] = useState({
-    firstName: student?.firstName ?? '',
-    lastName: student?.lastName ?? '',
-    email: student?.email ?? '',
-    phoneNumber: student?.phoneNumber ?? '',
-  });
-
-  const [updateError, setUpdateError] = useState<string | null>(null);
-  const [isUpdating, setIsUpdating] = useState(false);
-
-  return (
-    <form
-      onSubmit={(event) => {
-        event.preventDefault();
-        if (!student) {
-          return;
-        }
-
-        setUpdateError(null);
-        setIsUpdating(true);
-        studentService
-          .updateStudentById(student.id, studentData)
-          .then((updatedStudent) => {
-            setIsUpdating(false);
-            onUpdateSuccess(updatedStudent);
-            onCancel();
-          })
-          .catch((error) => {
-            setIsUpdating(false);
-            console.log('Failed to update student:', error);
-            if (axios.isAxiosError(error)) {
-              const message = error.response?.data?.message;
-              if (Array.isArray(message)) {
-                setUpdateError(message.join(', '));
-                return;
-              }
-
-              if (typeof message === 'string') {
-                setUpdateError(message);
-                return;
-              }
-            }
-            setUpdateError('Failed to update student. Please try again later.');
-          });
-      }}
-    >
-      <FieldGroup className="max-w-md">
-        <Field>
-          <FieldLabel>
-            First Name
-            <Input
-              className="firstName"
-              placeholder="Mohammad"
-              value={studentData.firstName}
-              onChange={(data) =>
-                setStudentData({ ...studentData, firstName: data.target.value })
-              }
-            />
-          </FieldLabel>
-        </Field>
-
-        <Field>
-          <FieldLabel>
-            Last Name
-            <Input
-              className="lastName"
-              placeholder="Arrata"
-              value={studentData.lastName}
-              onChange={(data) =>
-                setStudentData({ ...studentData, lastName: data.target.value })
-              }
-            />
-          </FieldLabel>
-        </Field>
-
-        <Field>
-          <FieldLabel>
-            Email
-            <Input
-              className="email"
-              placeholder="mohammadarrata@gmail.com"
-              value={studentData.email}
-              onChange={(data) =>
-                setStudentData({ ...studentData, email: data.target.value })
-              }
-            />
-            <FieldDescription>
-              The primary email used for academic notifications.
-            </FieldDescription>
-          </FieldLabel>
-        </Field>
-
-        <Field>
-          <FieldLabel>Phone Number</FieldLabel>
-          <FieldDescription>
-            Include country code if appilcable.
-          </FieldDescription>
-          <Input
-            type="tel"
-            name="phoneNumber"
-            placeholder="+963 954 220 986"
-            value={studentData.phoneNumber}
-            onChange={(data) =>
-              setStudentData({ ...studentData, phoneNumber: data.target.value })
-            }
-          />
-        </Field>
-
-        {updateError && <p className="text-sm text-red-600">{updateError}</p>}
-        <div className="pt-4 flex justify-end gap-3">
-          <Button type="button" variant="secondary" onClick={onCancel}>
-            Cancel
-          </Button>
-          <Button type="submit" disabled={isUpdating}>
-            {isUpdating ? 'Saving...' : 'Save Changes'}
-          </Button>
-        </div>
-      </FieldGroup>
-    </form>
-  );
-}

From d5f150c250c33b449b52637bdbba1f092e591ba2 Mon Sep 17 00:00:00 2001
From: Adel Obaji <adelobaji23@gmail.com>
Date: Wed, 23 Sep 2026 01:13:01 +0300
Subject: [PATCH 5/8] chore: add cn dependency for dialog

---
 pnpm-lock.yaml             | 37 ++++++++++++++-----------------------
 src/dashboard/package.json |  1 +
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d33cffb..91d922c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,6 +37,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cn:
+        specifier: ^0.4.0
+        version: 0.4.0
       dtos:
         specifier: workspace:*
         version: link:../dtos
@@ -2927,7 +2930,6 @@ packages:
     engines: { node: ^20.19.0 || >=22.12.0 }
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.2':
     resolution:
@@ -2937,7 +2939,6 @@ packages:
     engines: { node: ^20.19.0 || >=22.12.0 }
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-linux-ppc64-gnu@1.0.2':
     resolution:
@@ -2947,7 +2948,6 @@ packages:
     engines: { node: ^20.19.0 || >=22.12.0 }
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-s390x-gnu@1.0.2':
     resolution:
@@ -2957,7 +2957,6 @@ packages:
     engines: { node: ^20.19.0 || >=22.12.0 }
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-gnu@1.0.2':
     resolution:
@@ -2967,7 +2966,6 @@ packages:
     engines: { node: ^20.19.0 || >=22.12.0 }
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.2':
     resolution:
@@ -2977,7 +2975,6 @@ packages:
     engines: { node: ^20.19.0 || >=22.12.0 }
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.2':
     resolution:
@@ -3116,7 +3113,6 @@ packages:
     engines: { node: '>= 20' }
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
     resolution:
@@ -3126,7 +3122,6 @@ packages:
     engines: { node: '>= 20' }
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     resolution:
@@ -3136,7 +3131,6 @@ packages:
     engines: { node: '>= 20' }
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.3.0':
     resolution:
@@ -3146,7 +3140,6 @@ packages:
     engines: { node: '>= 20' }
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.3.0':
     resolution:
@@ -3665,7 +3658,6 @@ packages:
       }
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution:
@@ -3674,7 +3666,6 @@ packages:
       }
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution:
@@ -3683,7 +3674,6 @@ packages:
       }
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution:
@@ -3692,7 +3682,6 @@ packages:
       }
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution:
@@ -3701,7 +3690,6 @@ packages:
       }
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution:
@@ -3710,7 +3698,6 @@ packages:
       }
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution:
@@ -3719,7 +3706,6 @@ packages:
       }
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution:
@@ -3728,7 +3714,6 @@ packages:
       }
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution:
@@ -4493,6 +4478,14 @@ packages:
       }
     engines: { node: '>=6' }
 
+  cn@0.4.0:
+    resolution:
+      {
+        integrity: sha512-qOAeUhPwPzBxx6jaeQdo646XIKliKHc2j1ZF7Ngb1o0pJZKH5gq8FkA0aVdUdPFUDXNXyUCXpCtoJISo6dhizg==,
+      }
+    engines: { node: '>=20' }
+    hasBin: true
+
   co@4.6.0:
     resolution:
       {
@@ -5706,7 +5699,7 @@ packages:
       {
         integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==,
       }
-    deprecated: Glob versions prior to v9 are no longer supported
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   globals@14.0.0:
     resolution:
@@ -6575,7 +6568,6 @@ packages:
     engines: { node: '>= 12.0.0' }
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution:
@@ -6585,7 +6577,6 @@ packages:
     engines: { node: '>= 12.0.0' }
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution:
@@ -6595,7 +6586,6 @@ packages:
     engines: { node: '>= 12.0.0' }
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution:
@@ -6605,7 +6595,6 @@ packages:
     engines: { node: '>= 12.0.0' }
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution:
@@ -11987,6 +11976,8 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cn@0.4.0: {}
+
   co@4.6.0: {}
 
   code-block-writer@13.0.3: {}
diff --git a/src/dashboard/package.json b/src/dashboard/package.json
index 3ca097c5..35d30a7a 100644
--- a/src/dashboard/package.json
+++ b/src/dashboard/package.json
@@ -15,6 +15,7 @@
     "axios": "^1.19.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cn": "^0.4.0",
     "dtos": "workspace:*",
     "lucide-react": "^1.16.0",
     "radix-ui": "^1.4.3",

From 3545cd5762b2763188c721057d76cee761dac0ce Mon Sep 17 00:00:00 2001
From: Adel Obaji <adelobaji23@gmail.com>
Date: Wed, 23 Sep 2026 01:15:02 +0300
Subject: [PATCH 6/8] refactor: replace teacher modal with dialog

---
 .../src/components/teacher-modal.tsx          |   9 +-
 src/dashboard/src/components/ui/dialog.tsx    | 165 ++++++++++++++++++
 2 files changed, 170 insertions(+), 4 deletions(-)
 create mode 100644 src/dashboard/src/components/ui/dialog.tsx

diff --git a/src/dashboard/src/components/teacher-modal.tsx b/src/dashboard/src/components/teacher-modal.tsx
index f083709a..b2f4f4c5 100644
--- a/src/dashboard/src/components/teacher-modal.tsx
+++ b/src/dashboard/src/components/teacher-modal.tsx
@@ -1,5 +1,6 @@
 import type { TeacherDetailsDto, TeacherDto } from 'dtos';
 import { TeacherForm } from './teacher-form';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 
 type TeacherModalProps = {
   open: boolean;
@@ -21,8 +22,8 @@ export default function TeacherModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="w-[450px] rounded-xl bg-white p-6 shadow-lg">
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="w-[450px]">
         <h2 className="mb-6 text-2xl font-semibold">
           {teacher ? 'Update Teacher' : 'Create Teacher'}
         </h2>
@@ -32,7 +33,7 @@ export default function TeacherModal({
           onUpdateSuccess={onUpdateSuccess}
           onCreateSuccess={onCreateSuccess}
         />
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/dashboard/src/components/ui/dialog.tsx b/src/dashboard/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..6d79fcc4
--- /dev/null
+++ b/src/dashboard/src/components/ui/dialog.tsx
@@ -0,0 +1,165 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="secondary"
+              className="absolute top-2 right-2"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="secondary">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

From 87d570fcb61b80d27bfd3e45730ae244b7876676 Mon Sep 17 00:00:00 2001
From: Adel Obaji <adelobaji23@gmail.com>
Date: Wed, 23 Sep 2026 01:16:58 +0300
Subject: [PATCH 7/8] refactor: add reusable API error utility

---
 src/dashboard/src/components/teacher-form.tsx | 42 ++++---------------
 src/dashboard/src/lib/api-error.util.ts       | 17 ++++++++
 2 files changed, 26 insertions(+), 33 deletions(-)
 create mode 100644 src/dashboard/src/lib/api-error.util.ts

diff --git a/src/dashboard/src/components/teacher-form.tsx b/src/dashboard/src/components/teacher-form.tsx
index 9f487e67..daaa01e7 100644
--- a/src/dashboard/src/components/teacher-form.tsx
+++ b/src/dashboard/src/components/teacher-form.tsx
@@ -4,7 +4,7 @@ import { teacherService } from '@/services/teacher.service';
 import { useState } from 'react';
 import { Input } from './ui/input';
 import { Button } from './ui/button';
-import axios from 'axios';
+import { getApiErrorMessage } from '@/lib/api-error.util';
 
 type TeacherFormProps = {
   onCancel: () => void;
@@ -49,22 +49,10 @@ export function TeacherForm({
             .catch((error) => {
               setIsSubmitting(false);
               console.log('Failed to update teacher:', error);
-
-              if (axios.isAxiosError(error)) {
-                const message = error.response?.data?.message;
-
-                if (Array.isArray(message)) {
-                  setFormError(message.join(', '));
-                  return;
-                }
-
-                if (typeof message === 'string') {
-                  setFormError(message);
-                  return;
-                }
-              }
-
-              setFormError('Failed to update teacher. Please try again later.');
+              const message = getApiErrorMessage(error);
+              setFormError(
+                message ?? 'Failed to update teacher. Please try again later.',
+              );
             });
 
           return;
@@ -87,22 +75,10 @@ export function TeacherForm({
           .catch((error) => {
             setIsSubmitting(false);
             console.log('Failed to create teacher:', error);
-
-            if (axios.isAxiosError(error)) {
-              const message = error.response?.data?.message;
-
-              if (Array.isArray(message)) {
-                setFormError(message.join(', '));
-                return;
-              }
-
-              if (typeof message === 'string') {
-                setFormError(message);
-                return;
-              }
-            }
-
-            setFormError('Failed to create teacher. Please try again later.');
+            const message = getApiErrorMessage(error);
+            setFormError(
+              message ?? 'Failed to create teacher. Please try again later.',
+            );
           });
       }}
     >
diff --git a/src/dashboard/src/lib/api-error.util.ts b/src/dashboard/src/lib/api-error.util.ts
new file mode 100644
index 00000000..d2bb23e8
--- /dev/null
+++ b/src/dashboard/src/lib/api-error.util.ts
@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+export function getApiErrorMessage(error: unknown): string | null {
+  if (!axios.isAxiosError(error)) {
+    return null;
+  }
+
+  const message = error.response?.data?.message;
+
+  if (Array.isArray(message)) {
+    return message.join(', ');
+  }
+  if (typeof message === 'string') {
+    return message;
+  }
+  return null;
+}

From 4d4394491f062060093f3d22fbc3c517609190a0 Mon Sep 17 00:00:00 2001
From: Adel Obaji <adelobaji23@gmail.com>
Date: Wed, 23 Sep 2026 01:23:04 +0300
Subject: [PATCH 8/8] format dialog.tsx file

---
 src/dashboard/src/components/ui/dialog.tsx | 70 ++++++++++------------
 1 file changed, 33 insertions(+), 37 deletions(-)

diff --git a/src/dashboard/src/components/ui/dialog.tsx b/src/dashboard/src/components/ui/dialog.tsx
index 6d79fcc4..c838cb70 100644
--- a/src/dashboard/src/components/ui/dialog.tsx
+++ b/src/dashboard/src/components/ui/dialog.tsx
@@ -1,32 +1,32 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Dialog as DialogPrimitive } from "radix-ui"
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Dialog as DialogPrimitive } from 'radix-ui';
 
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { Button } from '@/components/ui/button';
+import { XIcon } from 'lucide-react';
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -37,12 +37,12 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
+        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -51,7 +51,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal>
@@ -59,37 +59,33 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
+          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          className,
         )}
         {...props}
       >
         {children}
         {showCloseButton && (
           <DialogPrimitive.Close data-slot="dialog-close" asChild>
-            <Button
-              variant="secondary"
-              className="absolute top-2 right-2"
-            >
-              <XIcon
-              />
+            <Button variant="secondary" className="absolute top-2 right-2">
+              <XIcon />
               <span className="sr-only">Close</span>
             </Button>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2", className)}
+      className={cn('flex flex-col gap-2', className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogFooter({
@@ -97,15 +93,15 @@ function DialogFooter({
   showCloseButton = false,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean;
 }) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-        className
+        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+        className,
       )}
       {...props}
     >
@@ -116,7 +112,7 @@ function DialogFooter({
         </DialogPrimitive.Close>
       )}
     </div>
-  )
+  );
 }
 
 function DialogTitle({
@@ -127,12 +123,12 @@ function DialogTitle({
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn(
-        "font-heading text-base leading-none font-medium",
-        className
+        'font-heading text-base leading-none font-medium',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -143,12 +139,12 @@ function DialogDescription({
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
-        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
+        'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -162,4 +158,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};