apps/backend/src/data/sidebarMenus.ts

@@ -14,6 +14,13 @@ const sidebarMenus: SidebarMenu[] = [
 		link: "/users",
 		color: "red",
 	},
+	{
+		label: "Manajemen Aspek",
+		icon: { tb: "TbClipboardText" },
+		allowedPermissions: ["permissions.read"],
+		link: "/aspect",
+		color: "blue",
+	},
 	{
 		label: "Manajemen Pertanyaan",
 		icon: { tb: "TbChecklist" },
@@ -28,13 +35,6 @@ const sidebarMenus: SidebarMenu[] = [
 		link: "/assessmentRequest",
 		color: "green",
 	},
-	{
-		label: "Manajemen Aspek",
-		icon: { tb: "TbClipboardText" },
-		allowedPermissions: ["permissions.read"],
-		link: "/aspect",
-		color: "blue",
-	},
 	{
 		label: "Manajemen Permohonan Asesmen",
 		icon: { tb: "TbReport" },

apps/backend/src/routes/questions/route.ts

@@ -12,13 +12,22 @@ import checkPermission from "../../middlewares/checkPermission";
 import { aspects } from "../../drizzle/schema/aspects";
 import { subAspects } from "../../drizzle/schema/subAspects";
 import { notFound } from "../../errors/DashboardError";
+import { options } from "../../drizzle/schema/options";
 
+// Schema for creating and updating options
+export const optionFormSchema = z.object({
+	text: z.string().min(1).max(255),
+	score: z.number().min(0),
+});
+  
+// Schema for creating and updating questions
 export const questionFormSchema = z.object({
 	subAspectId: z.string().min(1).max(255),
 	question: z.string().min(1).max(255),
 	needFile: z.boolean().default(false),
+	options: z.array(optionFormSchema).optional(), // Allow options to be included
 });
-
+  
 export const questionUpdateSchema = questionFormSchema.extend({
 	question: z.string().min(1).max(255).or(z.literal("")),
 	subAspectId: z.string().min(1).max(255).or(z.literal("")),
@@ -27,6 +36,59 @@ export const questionUpdateSchema = questionFormSchema.extend({
 
 const questionsRoute = new Hono<HonoEnv>()
 	.use(authInfo)
+	/**
+	 * Get All Aspects
+	 */
+	.get("/aspects", 
+		checkPermission("questions.readAll"),
+		async (c) => {
+		const result = await db
+			.select({
+				id: aspects.id,
+				name: aspects.name,
+				createdAt: aspects.createdAt,
+				updatedAt: aspects.updatedAt,
+			})
+			.from(aspects);
+
+		return c.json(result);
+	})
+	/**
+	 * Get All Sub Aspects
+	 *
+	 * Query params:
+	 * - aspectId: string (optional)
+	 */
+	.get("/subAspects", 
+		checkPermission("questions.readAll"),
+		requestValidator(
+			"query",
+			z.object({
+				aspectId: z.string().optional(),
+			})
+		), 
+		async (c) => {
+			const { aspectId } = c.req.valid("query");
+
+			const query = db
+				.select({
+					id: subAspects.id,
+					name: subAspects.name,
+					aspectId: subAspects.aspectId,
+					createdAt: subAspects.createdAt,
+					updatedAt: subAspects.updatedAt,
+				})
+				.from(subAspects);
+
+			if (aspectId) {
+				query.where(eq(subAspects.aspectId, aspectId));
+			}
+
+			const result = await query;
+
+			return c.json(result);
+		}
+	)
 	/**
 	 * Get All Questions (With Metadata)
 	 *
@@ -70,6 +132,12 @@ const questionsRoute = new Hono<HonoEnv>()
 					createdAt: questions.createdAt,
 					updatedAt: questions.updatedAt,
 					...(includeTrashed ? { deletedAt: questions.deletedAt } : {}),
+					averageScore: sql<number | null>`(
+						SELECT ROUND(AVG(${options.score}), 2)
+						FROM ${options}
+						WHERE ${options.questionId} = ${questions.id}
+						AND ${options.deletedAt} IS NULL -- Include only non-deleted options
+					)`,
 					fullCount: totalCountQuery,
 				})
 				.from(questions)
@@ -80,14 +148,15 @@ const questionsRoute = new Hono<HonoEnv>()
 						includeTrashed ? undefined : isNull(questions.deletedAt),
 						q
 							? or(
-									ilike(questions.createdAt, q),
+									ilike(questions.question, `%${q}%`),
-									ilike(questions.updatedAt, q),
+									ilike(aspects.name, `%${q}%`),
-									ilike(questions.deletedAt, q),
+									ilike(subAspects.name, `%${q}%`),
 									eq(questions.id, q)
 								)
 							: undefined
 					)
 				)
+				.orderBy(questions.question)
 				.offset(page * limit)
 				.limit(limit);
 
@@ -123,6 +192,11 @@ const questionsRoute = new Hono<HonoEnv>()
 		async (c) => {
 			const questionId = c.req.param("id");
 
+			if (!questionId)
+				throw notFound({
+					message: "Missing id",
+			});
+
 			const includeTrashed =
 				c.req.query("includeTrashed")?.toLowerCase() === "true";
 
@@ -131,26 +205,53 @@ const questionsRoute = new Hono<HonoEnv>()
 					id: questions.id,
 					question: questions.question,
 					needFile: questions.needFile,
-					aspectId: aspects.id,
+					subAspectId: questions.subAspectId,
-					subAspectId: subAspects.id,
+					subAspectName: subAspects.name,
+					aspectId: subAspects.aspectId,
+					aspectName: aspects.name,
 					createdAt: questions.createdAt,
 					updatedAt: questions.updatedAt,
 					...(includeTrashed ? { deletedAt: questions.deletedAt } : {}),
+					options: {
+						id: options.id,
+						text: options.text,
+						score: options.score,
+					},
 				})
 				.from(questions)
 				.leftJoin(subAspects, eq(questions.subAspectId, subAspects.id))
 				.leftJoin(aspects, eq(subAspects.aspectId, aspects.id))
+				.leftJoin(options, and(eq(questions.id, options.questionId), isNull(options.deletedAt))) // Filter out soft-deleted options
 				.where(
 					and(
 						eq(questions.id, questionId),
 						!includeTrashed ? isNull(questions.deletedAt) : undefined
 					)
-				);
+				)
+				.groupBy(questions.id, questions.question, questions.needFile, subAspects.aspectId, 
+					aspects.name, questions.subAspectId, subAspects.name, questions.createdAt, 
+					questions.updatedAt, options.id, options.text, options.score);
 
 			if (!queryResult[0]) throw notFound();
 
+			const optionsList = queryResult.reduce((prev, curr) => {
+				if (!curr.options) return prev;
+				prev.set(curr.options.id, 
+					{ 
+						text: curr.options.text,
+						score: curr.options.score,
+					}
+				);
+				return prev;
+			}, new Map<string, { text: string; score: number }>());
+			
+			// Convert Map to Array and sort by the score field in ascending order
+			const sortedOptions = Array.from(optionsList, ([id, { text, score }]) => ({ id, text, score }))
+				.sort((a, b) => a.score - b.score); // Sort based on score field in ascending order
+
 			const questionData = {
 				...queryResult[0],
+				options: sortedOptions,
 			};
 
 			return c.json(questionData);
@@ -168,20 +269,44 @@ const questionsRoute = new Hono<HonoEnv>()
 		requestValidator("json", questionFormSchema),
 		async (c) => {
 			const questionData = c.req.valid("json");
-
+		
+			// Check if the sub aspect exists
+			const existingSubAspect = await db
+				.select()
+				.from(subAspects)
+				.where(eq(subAspects.id, questionData.subAspectId));
+		
+			if (existingSubAspect.length === 0) {
+				return c.json({ message: "Sub aspect not found" }, 404);
+			}
+		
+			// Insert question data into the questions table
 			const question = await db
 				.insert(questions)
 				.values({
-					question: questionData.question,
+				question: questionData.question,
-					needFile: questionData.needFile,
+				needFile: questionData.needFile,
-					subAspectId: questionData.subAspectId,
+				subAspectId: questionData.subAspectId,
 				})
 				.returning();
-
+		
+			const questionId = question[0].id;
+		
+			// Insert options data if provided
+			if (questionData.options && questionData.options.length > 0) {
+				const optionsData = questionData.options.map((option) => ({
+				questionId: questionId,
+				text: option.text,
+				score: option.score,
+				}));
+		
+				await db.insert(options).values(optionsData);
+			}
+		
 			return c.json(
 				{
-					message: "Question created successfully",
+				message: "Question and options created successfully",
-					data: question,
+				data: question[0],
 				},
 				201
 			);
@@ -200,14 +325,16 @@ const questionsRoute = new Hono<HonoEnv>()
 		async (c) => {
 			const questionId = c.req.param("id");
 			const questionData = c.req.valid("json");
-
+	
+			// Check if the question exists and is not soft deleted
 			const question = await db
 				.select()
 				.from(questions)
 				.where(and(eq(questions.id, questionId), isNull(questions.deletedAt)));
-
+	
 			if (!question[0]) throw notFound();
-
+	
+			// Update question data
 			await db
 				.update(questions)
 				.set({
@@ -215,9 +342,59 @@ const questionsRoute = new Hono<HonoEnv>()
 					updatedAt: new Date(),
 				})
 				.where(eq(questions.id, questionId));
-
+	
+			// Check if options data is provided
+			if (questionData.options !== undefined) {
+				// Fetch existing options from the database for this question
+				const existingOptions = await db
+					.select()
+					.from(options)
+					.where(and(eq(options.questionId, questionId), isNull(options.deletedAt)));
+	
+				// Prepare new options data for comparison
+				const newOptionsData = questionData.options.map((option) => ({
+					questionId: questionId,
+					text: option.text,
+					score: option.score,
+				}));
+	
+				// Iterate through existing options and perform updates or soft deletes if needed
+				for (const existingOption of existingOptions) {
+					const matchingOption = newOptionsData.find(
+						(newOption) => newOption.text === existingOption.text
+					);
+	
+					if (!matchingOption) {
+						// If the existing option is not in the new options data, soft delete it
+						await db
+							.update(options)
+							.set({ deletedAt: new Date() })
+							.where(eq(options.id, existingOption.id));
+					} else {
+						// If the option is found, update it if the score has changed
+						if (existingOption.score !== matchingOption.score) {
+							await db
+								.update(options)
+								.set({
+									score: matchingOption.score,
+									updatedAt: new Date(),
+								})
+								.where(eq(options.id, existingOption.id));
+						}
+					}
+				}
+	
+				// Insert new options that do not exist in the database
+				const existingOptionTexts = existingOptions.map((opt) => opt.text);
+				const optionsToInsert = newOptionsData.filter((newOption) => !existingOptionTexts.includes(newOption.text));
+	
+				if (optionsToInsert.length > 0) {
+					await db.insert(options).values(optionsToInsert);
+				}
+			}
+	
 			return c.json({
-				message: "Question updated successfully",
+				message: "Question and options updated successfully",
 			});
 		}
 	)

apps/frontend/src/components/DashboardTable.tsx

@@ -48,6 +48,8 @@ export default function DashboardTable<T>({ table }: Props<T>) {
 							className="px-6 py-4 whitespace-nowrap text-sm text-black"
 							style={{
 							maxWidth: `${cell.column.columnDef.maxSize}px`,
+							whiteSpace: "normal",
+							wordWrap: "break-word",
 							}}
 						>
 							{flexRender(cell.column.columnDef.cell, cell.getContext())}

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

@@ -0,0 +1,99 @@
+import client from "@/honoClient";
+import { Button, Flex, Modal, Text } from "@mantine/core";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getRouteApi, useSearch } from "@tanstack/react-router";
+import { deleteQuestion } from "../queries/questionQueries";
+import { notifications } from "@mantine/notifications";
+import fetchRPC from "@/utils/fetchRPC";
+
+const routeApi = getRouteApi("/_dashboardLayout/questions/");
+
+export default function QuestionDeleteModal() {
+	const queryClient = useQueryClient();
+
+	const searchParams = useSearch({ from: "/_dashboardLayout/questions/" }) as {
+		delete: string;
+	};
+
+	const questionId = searchParams.delete;
+	const navigate = routeApi.useNavigate();
+
+	const questionQuery = useQuery({
+		queryKey: ["questions", questionId],
+		queryFn: async () => {
+			if (!questionId) return null;
+			return await fetchRPC(
+				client.questions[":id"].$get({
+					param: {
+						id: questionId,
+					},
+					query: {},
+				})
+			);
+		},
+	});
+
+	const mutation = useMutation({
+		mutationKey: ["deleteQuestionMutation"],
+		mutationFn: async ({ id }: { id: string }) => {
+			return await deleteQuestion(id);
+		},
+		onError: (error: unknown) => {
+			if (error instanceof Error) {
+				notifications.show({
+					message: error.message,
+					color: "red",
+				});
+			}
+		},
+		onSuccess: () => {
+			notifications.show({
+				message: "Question deleted successfully.",
+				color: "green",
+			});
+			queryClient.removeQueries({ queryKey: ["question", questionId] });
+			queryClient.invalidateQueries({ queryKey: ["questions"] });
+			navigate({ search: {} });
+		},
+	});
+
+	const isModalOpen = Boolean(searchParams.delete && questionQuery.data);
+
+	return (
+		<Modal
+			opened={isModalOpen}
+			onClose={() => navigate({ search: {} })}
+			title={`Delete confirmation`}
+		>
+			<Text size="sm">
+				Are you sure you want to delete question{" "}
+				<Text span fw={700}>
+					"{questionQuery.data?.question}"
+				</Text>
+				{" "}? This action is irreversible.
+			</Text>
+
+			{/* {errorMessage && <Alert color="red">{errorMessage}</Alert>} */}
+			{/* Buttons */}
+			<Flex justify="flex-end" align="center" gap="lg" mt="lg">
+				<Button
+					variant="outline"
+					onClick={() => navigate({ search: {} })}
+					disabled={mutation.isPending}
+				>
+					Cancel
+				</Button>
+				<Button
+					variant="subtle"
+					// leftSection={<TbDeviceFloppy size={20} />}
+					type="submit"
+					color="red"
+					loading={mutation.isPending}
+					onClick={() => mutation.mutate({ id: questionId })}
+				>
+					Delete Question
+				</Button>
+			</Flex>
+		</Modal>
+	);
+}

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

@@ -0,0 +1,346 @@
+import { useForm } from "@mantine/form";
+import {
+  Modal,
+  Stack,
+  Button,
+  Flex,
+  ActionIcon,
+  ScrollArea,
+  TextInput,
+  NumberInput,
+  Group,
+} from "@mantine/core";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { getRouteApi } from "@tanstack/react-router";
+import { TbDeviceFloppy, TbPlus, TbTrash } from "react-icons/tb";
+import { useEffect } from "react";
+import { notifications } from "@mantine/notifications";
+import FormResponseError from "@/errors/FormResponseError";
+import createInputComponents from "@/utils/createInputComponents";
+import {
+  createQuestion,
+  getQuestionByIdQueryOptions,
+  updateQuestion,
+  fetchAspects,
+  fetchSubAspects,
+} from "../queries/questionQueries";
+
+const routeApi = getRouteApi("/_dashboardLayout/questions/");
+
+interface Option {
+  questionId: string;
+  text: string;
+  score: number;
+}
+
+interface CreateQuestionPayload {
+  id?: string;
+  subAspectId: string;
+  question: string;
+  needFile: boolean;
+  options: Option[];
+}
+
+interface UpdateQuestionPayload {
+	id: string;
+	subAspectId: string;
+	question: string;
+	needFile: boolean;
+	options?: Option[];
+}
+
+export default function QuestionFormModal() {
+  const queryClient = useQueryClient();
+  const navigate = routeApi.useNavigate();
+  const searchParams = routeApi.useSearch();
+  const dataId = searchParams.detail || searchParams.edit;
+  const isModalOpen = Boolean(dataId || searchParams.create);
+  const detailId = searchParams.detail;
+  const editId = searchParams.edit;
+  const formType = detailId ? "detail" : editId ? "edit" : "create";
+
+  const form = useForm({
+    initialValues: {
+      id: "",
+      question: "",
+      needFile: false,
+      aspectId: "",
+      subAspectId: "",
+      options: [] as { id: string; text: string; score: number; questionId: string }[],
+    },
+    validate: {
+      aspectId: (value) => (value ? null : "Nama Aspek harus dipilih."),
+      subAspectId: (value) => (value ? null : "Nama Sub Aspek harus dipilih."),
+      question: (value) => (value ? null : "Pertanyaan tidak boleh kosong."),
+      options: {
+        text: (value) => (value ? null : "Jawaban tidak boleh kosong."),
+        score: (value) => (value >= 0 ? null : "Skor harus diisi dengan angka."),
+      },
+    },
+  });
+
+  // Fetch aspects and sub-aspects
+  const aspectsQuery = useQuery({
+    queryKey: ["aspects"],
+    queryFn: fetchAspects,
+  });
+  
+  const subAspectsQuery = useQuery({
+    queryKey: ["subAspects"],
+    queryFn: fetchSubAspects,
+  });
+
+  // Check for form initialization and aspectId before filtering
+  const filteredSubAspects = form.values.aspectId
+  ? subAspectsQuery.data?.filter(
+      (subAspect) => subAspect.aspectId === form.values.aspectId
+    ) || []
+  : [];
+
+  const questionQuery = useQuery(getQuestionByIdQueryOptions(dataId));
+  const modalTitle =
+    formType.charAt(0).toUpperCase() + formType.slice(1) + " Pertanyaan";
+
+  useEffect(() => {
+    const data = questionQuery.data;
+
+    if (!data) {
+      form.reset();
+      return;
+    }
+
+    form.setValues({
+      id: data.id,
+      question: data.question ?? "",
+      needFile: data.needFile ?? false,
+      aspectId: data.aspectId ?? "",
+      subAspectId: data.subAspectId ?? "",
+      options: data.options.map((option) => ({
+        ...option,
+        questionId: data.id,
+      })),
+    });
+
+    form.setErrors({});
+  }, [questionQuery.data]);
+
+  // Define possible actions, depending on the action, it can be one or the other
+  interface MutationOptions {
+    action: "edit" | "create";
+    data: CreateQuestionPayload | UpdateQuestionPayload;
+  }
+
+  interface MutationResponse {
+    message: string;
+  }
+  
+  const mutation = useMutation<MutationResponse, Error, MutationOptions>({
+    mutationKey: ["questionsMutation"],
+    mutationFn: async (options) => {
+      if (options.action === "edit") {
+        return await updateQuestion(options.data as UpdateQuestionPayload);
+      } else {
+        return await createQuestion(options.data as CreateQuestionPayload);
+      }
+    },
+  });
+
+  const handleSubmit = async (values: CreateQuestionPayload) => {
+    if (formType === "detail") return;
+  
+    const payload: CreateQuestionPayload = {
+      id: values.id,
+      question: values.question,
+      needFile: values.needFile,
+      subAspectId: values.subAspectId,
+      options: values.options.map((option) => ({
+        questionId: values.id || "",
+        text: option.text,
+        score: option.score,
+      })),
+    };
+  
+    try {
+      if (formType === "create") {
+        await mutation.mutateAsync({ action: "create", data: payload });
+        notifications.show({
+          message: "Data pertanyaan berhasil dibuat!",
+          color: "green",
+        });
+      } else {
+        await mutation.mutateAsync({ action: "edit", data: payload });
+        notifications.show({
+          message: "Data pertanyaan berhasil diperbarui!",
+          color: "green",
+        });
+      }
+  
+      queryClient.invalidateQueries({ queryKey: ["questions"] });
+      navigate({ search: {} });
+    } catch (error) {
+      if (error instanceof FormResponseError) {
+        form.setErrors(error.formErrors);
+      } else if (error instanceof Error) {
+        notifications.show({
+          message: error.message,
+          color: "red",
+        });
+      }
+    }
+  };
+
+  const handleAddOption = () => {
+    form.insertListItem("options", { id: "", text: "", score: 0 });
+  };
+
+  const handleRemoveOption = (index: number) => {
+    form.removeListItem("options", index);
+  };
+
+  return (
+    <Modal
+      opened={isModalOpen}
+      onClose={() => navigate({ search: {} })}
+      title={modalTitle}
+      scrollAreaComponent={ScrollArea.Autosize}
+      size="md"
+    >
+      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+        {createInputComponents({
+          disableAll: mutation.isPending,
+          readonlyAll: formType === "detail",
+          inputs: [
+            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",
+                  placeholder: "Pilih Aspek",
+                  data: aspectsQuery.data?.map((aspect) => ({
+                    value: aspect.id,
+                    label: aspect.name,
+                  })) || [],
+                  disabled: mutation.isPending,
+                  ...form.getInputProps("aspectId"),
+                  required: true,
+                },
+            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",
+                  placeholder: "Pilih Sub Aspek",
+                  data: filteredSubAspects.map((subAspect) => ({
+                    value: subAspect.id,
+                    label: subAspect.name,
+                  })),
+                  disabled: mutation.isPending,
+                  ...form.getInputProps("subAspectId"),
+                  required: true,
+                },
+            {
+              type: "textarea",
+              label: "Pertanyaan",
+              placeholder: "Tulis Pertanyaan",
+              ...form.getInputProps("question"),
+            },
+            formType === "detail"
+              ? {
+                  type: "text",
+                  label: "Dibutuhkan Upload File?",
+                  readOnly: true,
+                  value: form.values.needFile ? "Ya" : "Tidak",
+                }
+              : {
+                  type: "select",
+                  label: "Dibutuhkan Upload File?",
+                  placeholder: "Pilih opsi",
+                  data: [
+                    { value: "true", label: "Ya" },
+                    { value: "false", label: "Tidak" },
+                  ],
+                  value: form.values.needFile ? "true" : "false",
+                  onChange: (value) => form.setFieldValue("needFile", value === "true"),
+                  disabled: mutation.isPending,
+                  required: true,
+                },
+          ],
+        })}
+
+        {/* Options */}
+        <Stack mt="sm">
+          {form.values.options.map((option, index) => (
+            <Group key={index} mb="sm">
+              <TextInput
+                label={`Jawaban ${index + 1}`}
+                placeholder="Jawaban"
+                readOnly={formType === "detail"}
+                {...form.getInputProps(`options.${index}.text`)}
+                required
+              />
+              <NumberInput
+                label="Skor"
+                placeholder="Skor"
+                readOnly={formType === "detail"}
+                min={0}
+                max={999}
+                allowDecimal={false}
+                allowNegative={false}
+                {...form.getInputProps(`options.${index}.score`)}
+                required
+              />
+              {formType !== "detail" && (
+                <ActionIcon
+                  color="red"
+                  onClick={() => handleRemoveOption(index)}
+                >
+                  <TbTrash />
+                </ActionIcon>
+              )}
+            </Group>
+          ))}
+
+          {formType !== "detail" && (
+            <Button
+              onClick={handleAddOption}
+              leftSection={<TbPlus />}
+            >
+              Tambah Jawaban
+            </Button>
+          )}
+        </Stack>
+
+        {/* Buttons */}
+        <Flex justify="flex-end" align="center" gap="lg" mt="lg">
+          <Button
+            variant="outline"
+            onClick={() => navigate({ search: {} })}
+            disabled={mutation.isPending}
+          >
+            Tutup
+          </Button>
+          {formType !== "detail" && (
+            <Button
+              variant="filled"
+              leftSection={<TbDeviceFloppy size={20} />}
+              type="submit"
+              loading={mutation.isPending}
+            >
+              Simpan
+            </Button>
+          )}
+        </Flex>
+      </form>
+    </Modal>
+  );
+}

apps/frontend/src/modules/questionsManagement/queries/questionQueries.ts

@@ -0,0 +1,115 @@
+import client from "@/honoClient";
+import fetchRPC from "@/utils/fetchRPC";
+import { queryOptions } from "@tanstack/react-query";
+import { InferRequestType } from "hono";
+
+interface Option {
+	questionId: string;
+	text: string;
+	score: number;
+}
+  
+interface CreateQuestionPayload {
+	subAspectId: string; // Ensure this matches the correct ID type
+	question: string;
+	needFile: boolean;
+	options: Option[];   // Array of options (text and score)
+}
+
+interface UpdateQuestionPayload {
+	id: string;           // The ID of the question to update
+	subAspectId: string;  // Ensure this matches the correct ID type
+	question: string;
+	needFile: boolean;
+	options?: Option[];   // Optional array of options (text and score)
+}
+
+export const questionQueryOptions = (page: number, limit: number, q?: string) =>
+	queryOptions({
+		queryKey: ["questions", { page, limit, q }],
+		queryFn: () =>
+			fetchRPC(
+				client.questions.$get({
+					query: {
+						limit: String(limit),
+						page: String(page),
+						q,
+					},
+				})
+			),
+	});
+
+export const getQuestionByIdQueryOptions = (questionId: string | undefined) =>
+	queryOptions({
+		queryKey: ["question", questionId],
+		queryFn: () =>
+			fetchRPC(
+				client.questions[":id"].$get({
+					param: {
+						id: questionId!,
+					},
+					query: {},
+				})
+			),
+		enabled: Boolean(questionId),
+	});
+
+export const createQuestion = async (form: CreateQuestionPayload) => {
+	return await fetchRPC(
+		client.questions.$post({
+			json: {
+				question: form.question,
+			  	needFile: form.needFile,
+			  	subAspectId: form.subAspectId,
+			  	options: form.options.map((option) => ({
+					text: option.text,
+					score: option.score,
+				})),
+			},
+		})
+	);
+};
+
+export const updateQuestion = async (form: UpdateQuestionPayload) => {
+	return await fetchRPC(
+	  client.questions[":id"].$patch({
+		param: {
+		  id: form.id,
+		},
+		json: {
+		  question: form.question,
+		  needFile: form.needFile,
+		  subAspectId: form.subAspectId,
+		  options: form.options?.map((option: Option) => ({
+			text: option.text,
+			score: option.score,
+		  })),
+		},
+	  })
+	);
+};
+
+export const deleteQuestion = async (id: string) => {
+	return await fetchRPC(
+		client.questions[":id"].$delete({
+			param: { id },
+			query: {},
+		})
+	);
+};
+
+export const fetchAspects = async () => {
+    return await fetchRPC(
+        client.questions.aspects.$get({
+			query: {} // Provide an empty query if no parameters are needed
+		}) // Adjust this based on your API client structure
+    );
+};
+
+export const fetchSubAspects = async () => {
+    return await fetchRPC(
+        client.questions.subAspects.$get({
+            query: {} // Provide an empty query if no parameters are needed
+        })
+    );
+};

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

@@ -0,0 +1,88 @@
+import { questionQueryOptions } from "@/modules/questionsManagement/queries/questionQueries";
+import PageTemplate from "@/components/PageTemplate";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import ExtractQueryDataType from "@/types/ExtractQueryDataType";
+import { createColumnHelper } from "@tanstack/react-table";
+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";
+import QuestionFormModal from "@/modules/questionsManagement/modals/QuestionFormModal";
+
+export const Route = createLazyFileRoute("/_dashboardLayout/questions/")({
+	component: QuestionsPage,
+});
+
+type DataType = ExtractQueryDataType<typeof questionQueryOptions>;
+
+const columnHelper = createColumnHelper<DataType>();
+
+export default function QuestionsPage() {
+	return (
+		<PageTemplate
+			title="Manajemen Pertanyaan"
+			queryOptions={questionQueryOptions}
+			modals={[<QuestionFormModal />, <QuestionDeleteModal />]}
+			columnDefs={[
+				columnHelper.display({
+					header: "#",
+					cell: (props) => props.row.index + 1,
+				}),
+
+				columnHelper.display({
+					header: "Nama Aspek",
+					cell: (props) => props.row.original.aspectName,
+				}),
+
+				columnHelper.display({
+					header: "Nama Sub Aspek",
+					cell: (props) => props.row.original.subAspectName,
+				}),
+
+				columnHelper.display({
+					header: "Pertanyaan",
+					cell: (props) => props.row.original.question,
+				}),
+
+				columnHelper.display({
+					header: "Hasil Rata Rata",
+					cell: (props) => props.row.original.averageScore !== null 
+						? props.row.original.averageScore 
+						: 0,
+				}),
+
+				columnHelper.display({
+					header: "Aksi",
+					cell: (props) => (
+						<Flex gap="xs">
+							{createActionButtons([
+								{
+									label: "Detail",
+									permission: true,
+									action: `?detail=${props.row.original.id}`,
+									color: "green",
+									icon: <TbEye />,
+								},
+								{
+									label: "Edit",
+									permission: true,
+									action: `?edit=${props.row.original.id}`,
+									color: "orange",
+									icon: <TbPencil />,
+								},
+								{
+									label: "Delete",
+									permission: true,
+									action: `?delete=${props.row.original.id}`,
+									color: "red",
+									icon: <TbTrash />,
+								},
+							])}
+						</Flex>
+					),
+				}),
+
+			]}
+		/>
+	);
+}

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

@@ -0,0 +1,18 @@
+import { questionQueryOptions } from "@/modules/questionsManagement/queries/questionQueries";
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+
+const searchParamSchema = z.object({
+	create: z.boolean().default(false).optional(),
+	edit: z.string().default("").optional(),
+	delete: z.string().default("").optional(),
+	detail: z.string().default("").optional(),
+});
+
+export const Route = createFileRoute("/_dashboardLayout/questions/")({
+	validateSearch: searchParamSchema,
+
+	loader: ({ context: { queryClient } }) => {
+		queryClient.ensureQueryData(questionQueryOptions(0, 10));
+	},
+});