add filters to show only exams with or without approval

src/pages/assignments/creator/index.tsx

@@ -63,26 +63,26 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
   const [users, groups] = await Promise.all([
     isAdmin(user)
       ? getUsers(
-          {},
+        {},
-          0,
+        0,
-          {},
+        {},
-          {
+        {
-            _id: 0,
-            id: 1,
-            type: 1,
-            name: 1,
-            email: 1,
-            levels: 1,
-          }
-        )
-      : getEntitiesUsers(mapBy(allowedEntities, "id"), {}, 0, {
           _id: 0,
           id: 1,
           type: 1,
           name: 1,
           email: 1,
           levels: 1,
-        }),
+        }
+      )
+      : getEntitiesUsers(mapBy(allowedEntities, "id"), {}, 0, {
+        _id: 0,
+        id: 1,
+        type: 1,
+        name: 1,
+        email: 1,
+        levels: 1,
+      }),
     isAdmin(user)
       ? getGroups()
       : getGroupsByEntities(mapBy(allowedEntities, "id")),
@@ -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();
 
@@ -326,7 +349,7 @@ export default function AssignmentsPage({
               onClick={
                 (!selectedModules.includes("level") &&
                   selectedModules.length === 0) ||
-                selectedModules.includes("level")
+                  selectedModules.includes("level")
                   ? () => toggleModule("level")
                   : undefined
               }
@@ -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">
-                      <label className="font-normal text-base text-mti-gray-dim">
+                      <div className="flex flex-row gap-6">
-                        {capitalize(module)} Exam
+                        <label className="font-normal text-base text-mti-gray-dim">
-                      </label>
+                          {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 ||
@@ -518,15 +566,22 @@ export default function AssignmentsPage({
                         onChange={(value) =>
                           value
                             ? setExamIDs((prev) => [
-                                ...prev.filter((x) => x.module !== module),
+                              ...prev.filter((x) => x.module !== module),
-                                { id: value.value!, module },
+                              { id: value.value!, module },
-                              ])
+                            ])
                             : setExamIDs((prev) =>
-                                prev.filter((x) => x.module !== module)
+                              prev.filter((x) => x.module !== module)
-                              )
+                            )
                         }
                         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>
@@ -568,7 +623,7 @@ export default function AssignmentsPage({
                     users
                       .filter((u) => g.participants.includes(u.id))
                       .every((u) => assignees.includes(u.id)) &&
-                      "!bg-mti-purple-light !text-white"
+                    "!bg-mti-purple-light !text-white"
                   )}
                 >
                   {g.name}
@@ -653,7 +708,7 @@ export default function AssignmentsPage({
                       users
                         .filter((u) => g.participants.includes(u.id))
                         .every((u) => teachers.includes(u.id)) &&
-                        "!bg-mti-purple-light !text-white"
+                      "!bg-mti-purple-light !text-white"
                     )}
                   >
                     {g.name}