apps/frontend/src/modules/questionsManagement/modals/QuestionFormModal.tsx

@@ -5,7 +5,6 @@ import {
   Button,
   Flex,
   ActionIcon,
-  Select,
   ScrollArea,
   TextInput,
   NumberInput,
@@ -18,13 +17,12 @@ import { useEffect } from "react";
 import { notifications } from "@mantine/notifications";
 import FormResponseError from "@/errors/FormResponseError";
 import createInputComponents from "@/utils/createInputComponents";
-import stringToColorHex from "@/utils/stringToColorHex";
 import {
   createQuestion,
   getQuestionByIdQueryOptions,
   updateQuestion,
-  fetchAspects,      // Import fetchAspects query
-  fetchSubAspects,   // Import fetchSubAspects query
+  fetchAspects,
+  fetchSubAspects,
 } from "../queries/questionQueries";
 
 /**
@@ -39,8 +37,8 @@ interface Option {
 }
 
 interface CreateQuestionPayload {
-  id?: string;           // Make id optional
-  subAspectId: string;   // Ensure this matches the correct ID type
+  id?: string;
+  subAspectId: string;
   question: string;
   needFile: boolean;
   options: Option[];     // Array of options (text and score)
@@ -48,7 +46,7 @@ interface CreateQuestionPayload {
 
 interface UpdateQuestionPayload {
 	id: string;           // The ID of the question to update
-	subAspectId: string;  // Ensure this matches the correct ID type
+	subAspectId: string;
 	question: string;
 	needFile: boolean;
 	options?: Option[];   // Optional array of options (text and score)
@@ -120,9 +118,10 @@ export default function QuestionFormModal() {
     form.setErrors({});
   }, [questionQuery.data]);
 
+  // Define possible actions, depending on the action, it can be one or the other
   interface MutationOptions {
-    action: "edit" | "create"; // Define possible actions
-    data: CreateQuestionPayload | UpdateQuestionPayload; // Depending on the action, it can be one or the other
+    action: "edit" | "create";
+    data: CreateQuestionPayload | UpdateQuestionPayload;
   }
 
   interface MutationResponse {
@@ -138,26 +137,6 @@ export default function QuestionFormModal() {
         return await createQuestion(options.data as CreateQuestionPayload);
       }
     },
-    onSuccess: (data) => {
-      // You can use data.message here if you want to display success messages
-      notifications.show({
-        message: data.message,
-        color: "green",
-      });
-    },
-    onError: (error) => {
-      if (error instanceof FormResponseError) {
-        form.setErrors(error.formErrors);
-        return;
-      }
-  
-      if (error instanceof Error) {
-        notifications.show({
-          message: error.message,
-          color: "red",
-        });
-      }
-    },
   });
 
   const handleSubmit = async (values: CreateQuestionPayload) => {
@@ -179,13 +158,13 @@ export default function QuestionFormModal() {
       if (formType === "create") {
         await mutation.mutateAsync({ action: "create", data: payload });
         notifications.show({
-          message: "Question created successfully!",
+          message: "Data pertanyaan berhasil dibuat!",
           color: "green",
         });
       } else {
         await mutation.mutateAsync({ action: "edit", data: payload });
         notifications.show({
-          message: "Question updated successfully!",
+          message: "Data pertanyaan berhasil diperbarui!",
           color: "green",
         });
       }
@@ -225,29 +204,43 @@ export default function QuestionFormModal() {
           disableAll: mutation.isPending,
           readonlyAll: formType === "detail",
           inputs: [
-            {
-              type: "select",
-              label: "Nama Aspek",
-              data: aspectsQuery.data?.map((aspect) => ({
-                value: aspect.id,
-                label: aspect.name,
-              })) || [],
-              disabled: mutation.isPending || formType === "detail",
-              ...form.getInputProps("aspectId"),
-            },
-            {
-              type: "select",
-              label: "Nama Sub Aspek",
-              data: filteredSubAspects.map((subAspect) => ({
-                value: subAspect.id,
-                label: subAspect.name,
-              })),
-              disabled: mutation.isPending || formType === "detail",
-              ...form.getInputProps("subAspectId"),
-            },
+            formType === "detail"
+              ? {
+                  type: "text",
+                  label: "Nama Aspek",
+                  readOnly: true,
+                  value: aspectsQuery.data?.find(aspect => aspect.id === form.values.aspectId)?.name || "",
+                }
+              : {
+                  type: "select",
+                  label: "Nama Aspek",
+                  data: aspectsQuery.data?.map((aspect) => ({
+                    value: aspect.id,
+                    label: aspect.name,
+                  })) || [],
+                  disabled: mutation.isPending,
+                  ...form.getInputProps("aspectId"),
+                },
+            formType === "detail"
+              ? {
+                  type: "text",
+                  label: "Nama Sub Aspek",
+                  readOnly: true,
+                  value: filteredSubAspects.find(subAspect => subAspect.id === form.values.subAspectId)?.name || "",
+                }
+              : {
+                  type: "select",
+                  label: "Nama Sub Aspek",
+                  data: filteredSubAspects.map((subAspect) => ({
+                    value: subAspect.id,
+                    label: subAspect.name,
+                  })),
+                  disabled: mutation.isPending,
+                  ...form.getInputProps("subAspectId"),
+                },
             {
               type: "textarea",
-              label: "Teks Pertanyaan",
+              label: "Pertanyaan",
               ...form.getInputProps("question"),
             },
             formType === "detail"
@@ -260,6 +253,7 @@ export default function QuestionFormModal() {
               : {
                   type: "checkbox",
                   label: "Dibutuhkan Upload File?",
+                  checked: form.values.needFile,
                   ...form.getInputProps("needFile"),
                 },
           ],
@@ -271,13 +265,15 @@ export default function QuestionFormModal() {
             <Group key={index} mb="sm">
               <TextInput
                 label={`Jawaban ${index + 1}`}
-                placeholder="Teks Jawaban"
+                placeholder="Jawaban"
+                readOnly={formType === "detail"}
                 {...form.getInputProps(`options.${index}.text`)}
                 required
               />
               <NumberInput
                 label="Skor"
                 placeholder="Skor"
+                readOnly={formType === "detail"}
                 {...form.getInputProps(`options.${index}.score`)}
                 required
               />

apps/frontend/src/routes/_dashboardLayout/questions/index.lazy.tsx

@@ -3,7 +3,7 @@ import PageTemplate from "@/components/PageTemplate";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import ExtractQueryDataType from "@/types/ExtractQueryDataType";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Badge, Flex } from "@mantine/core";
+import { Flex } from "@mantine/core";
 import createActionButtons from "@/utils/createActionButton";
 import { TbEye, TbPencil, TbTrash } from "react-icons/tb";
 import QuestionDeleteModal from "@/modules/questionsManagement/modals/QuestionDeleteModal";