add filters to show only exams with or without approval

src/pages/assignments/creator/index.tsx

@@ -101,6 +101,14 @@ interface Props {
 
 const SIZE = 9;
 
+type ExamApprovalFilterMap = {
+  writing: boolean;
+  reading: boolean;
+  listening: boolean;
+  speaking: boolean;
+  level: boolean;
+};
+
 export default function AssignmentsPage({
   user,
   users,
@@ -143,6 +151,21 @@ export default function AssignmentsPage({
   const [useRandomExams, setUseRandomExams] = useState(true);
   const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
 
+  const [showExamsThatRequiredApproval, setShowExamsThatRequiredApproval] = useState<ExamApprovalFilterMap>({
+    writing: true,
+    reading: true,
+    listening: true,
+    speaking: true,
+    level: true,
+  });
+  const [showExamsThatDidntRequireApproval, setShowExamsThatDidntRequireApproval] = useState<ExamApprovalFilterMap>({
+    writing: true,
+    reading: true,
+    listening: true,
+    speaking: true,
+    level: true,
+  });
+
   const { exams } = useExams();
   const router = useRouter();
 
@@ -504,10 +527,35 @@ export default function AssignmentsPage({
                 <div className="grid md:grid-cols-2 w-full gap-4">
                   {selectedModules.map((module) => (
                     <div key={module} className="flex flex-col gap-3 w-full">
+                      <div className="flex flex-row gap-6">
                         <label className="font-normal text-base text-mti-gray-dim">
                           {capitalize(module)} Exam
                         </label>
+                        <Checkbox
+                          isChecked={showExamsThatRequiredApproval[module]}
+                          onChange={() => {
+                            setShowExamsThatRequiredApproval(prev => ({
+                              ...prev,
+                              [module]: !prev[module],
+                            }))
+                          }}
+                        >
+                          Show exams that required approval
+                        </Checkbox>
+                        <Checkbox
+                          isChecked={showExamsThatDidntRequireApproval[module]}
+                          onChange={() => {
+                            setShowExamsThatDidntRequireApproval(prev => ({
+                              ...prev,
+                              [module]: !prev[module],
+                            }))
+                          }}
+                        >
+                          Show exams that did not require approval
+                        </Checkbox>
+                      </div>
                       <Select
+                        isClearable
                         value={{
                           value:
                             examIDs.find((e) => e.module === module)?.id ||
@@ -526,7 +574,14 @@ export default function AssignmentsPage({
                             )
                         }
                         options={exams
-                          .filter((x) => !x.isDiagnostic && x.module === module)
+                          .filter((x) => 
+                            !x.isDiagnostic &&
+                            x.module === module &&
+                            (
+                              (x.requiresApproval && showExamsThatRequiredApproval[module]) ||
+                              (!x.requiresApproval && showExamsThatDidntRequireApproval[module])
+                            )
+                          )
                           .map((x) => ({ value: x.id, label: x.id }))}
                       />
                     </div>