apps/frontend/src/modules/assessmentsManagement/queries/assessmentsQueries.ts

@@ -0,0 +1,72 @@
+import client from "@/honoClient";
+import fetchRPC from "@/utils/fetchRPC";
+import { queryOptions } from "@tanstack/react-query";
+import { InferRequestType } from "hono";
+
+export const questionsQueryOptions = (page: number, limit: number, q?: string) =>
+	queryOptions({
+        queryKey: ["questions", { page, limit, q }],
+        queryFn: async () => {
+            const result = await fetchRPC(
+                client.assessments.getAllQuestions.$get({
+                    query: {
+                        limit: String(limit),
+                        page: String(page),
+                        q,
+                    },
+                })
+            );
+            console.log('Result from fetchRPC:', result);
+            return result;
+        },
+    });
+
+
+export const getUserByIdQueryOptions = (userId: string | undefined) =>
+	queryOptions({
+		queryKey: ["user", userId],
+		queryFn: () =>
+			fetchRPC(
+				client.users[":id"].$get({
+					param: {
+						id: userId!,
+					},
+					query: {},
+				})
+			),
+		enabled: Boolean(userId),
+	});
+
+export const createUser = async (
+	form: InferRequestType<typeof client.users.$post>["form"]
+) => {
+	return await fetchRPC(
+		client.users.$post({
+			form,
+		})
+	);
+};
+
+export const updateUser = async (
+	form: InferRequestType<(typeof client.users)[":id"]["$patch"]>["form"] & {
+		id: string;
+	}
+) => {
+	return await fetchRPC(
+		client.users[":id"].$patch({
+			param: {
+				id: form.id,
+			},
+			form,
+		})
+	);
+};
+
+export const deleteUser = async (id: string) => {
+	return await fetchRPC(
+		client.users[":id"].$delete({
+			param: { id },
+			form: {},
+		})
+	);
+};

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

@@ -0,0 +1,131 @@
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+import { Button } from "@/shadcn/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/shadcn/components/ui/card"
+import { Label } from "@/shadcn/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group"
+// import ExtractQueryDataType from '@/types/ExtractQueryDataType'
+// import { createColumnHelper } from '@tanstack/react-table'
+import { questionsQueryOptions } from "@/modules/assessmentsManagement/queries/assessmentsQueries";
+// import { useForm } from '@mantine/form'
+import { useQuery } from '@tanstack/react-query'
+
+// type DataType = ExtractQueryDataType<typeof getAllAssessmentsQueryOptions>;
+// const columnHelper = useForm<DataType>();
+
+export function CardWithAssessment() {
+    // const { handleSubmit, form } = useForm<DataType>();
+
+    const { page = 1, limit = 10, q = '' } = {}
+
+    const { data, isLoading, isError } = useQuery(questionsQueryOptions(page, limit, q));
+
+    console.log(data)
+  
+    if (isLoading) return <div>Loading...</div>;
+    if (isError) return <div>Error fetching data</div>;
+
+    // const groupedQuestions = data?.reduce((acc, item) => {
+    //     const { subAspectId, subAspectName } = item;
+    //     if (!acc[subAspectId]) {
+    //         acc[subAspectId] = {
+    //             subAspectName,
+    //             questions: [],
+    //         };
+    //     }
+    //     acc[subAspectId].questions.push(item);
+    //     return acc;
+    // }, {} as Record<string, { subAspectName: string, questions: DataType[] }>);
+    
+
+    const renderQuestions = () => {
+      return data?.data.map((subAspect) => (
+          <div key={subAspect.subAspectId}>
+              <h2 className="text-lg font-bold mb-4">{subAspect.subAspectName}</h2>
+              {data?.data.map((question) => (
+                  <div key={question.questionId} className="mb-6">
+                      <Label className='text-base font-semibold' htmlFor={`question-${question.questionId}`}>
+                          {question.questionText}
+                      </Label>
+                      <RadioGroup className='gap-y-3 mt-2' defaultValue="">
+                          {data?.data.map((option) => (
+                              <div key={option.optionId} className="flex items-center space-x-2">
+                                  <RadioGroupItem value={option.optionText} id={`option-${option.optionId}`} />
+                                  <Label htmlFor={`option-${option.optionId}`}>{option.questionText}</Label>
+                              </div>
+                          ))}
+                      </RadioGroup>
+                  </div>
+              ))}
+          </div>
+      ));
+    };
+    
+    const renderQuestionNumbers = () => {
+      const questionNumbers: number[] = [];
+      data?.data.forEach((subAspect) => {
+          data?.data.forEach((question, index) => {
+              questionNumbers.push(index + 1);
+          });
+      });
+    
+      return questionNumbers.map((num) => (
+          <Button key={num} className='w-12 h-12' variant="outline">
+              {num}
+          </Button>
+      ));
+    };
+
+    return (
+        <Card className="w-full flex">
+            <div className='flex-none w-3/5 border-r-2'>
+                <CardHeader className='border-b-2'>
+                    <CardTitle className='text-xl'>Pertanyaan</CardTitle>
+                    <CardDescription className='text-sm italic'>
+                        Bacalah pertanyaan dengan hati-hati dan jawablah dengan teliti!
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className='flex'>
+                    <div className="w-full mt-5">
+                        <form>
+                            {renderQuestions()}
+                        </form>
+                    </div>
+                </CardContent>
+                <CardFooter className="flex gap-3">
+                    <Button variant="outline">Back</Button>
+                    <Button>Next</Button>
+                </CardFooter>
+            </div>
+            <div className='flex-1'>
+                <CardHeader>
+                    <CardTitle className='text-xl ml-7'>Daftar Nomor</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div className="w-full">
+                        <div className="flex flex-wrap gap-3 p-1 justify-center">
+                            {renderQuestionNumbers()}
+                        </div>
+                    </div>
+                </CardContent>
+            </div>
+        </Card>
+    );
+}
+
+export const Route = createLazyFileRoute('/_dashboardLayout/assessments/')({
+  component: () => 
+    <div>
+      <h1 className="font-semibold text-2xl text-gray-800 dark:text-white leading-tight mb-5">
+        Halaman Assessments
+      </h1>
+      <CardWithAssessment />
+    </div>
+})

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

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_dashboardLayout/assessments/')({
+  component: () => <div>Hello /_dashboardLayout/assessments/!</div>
+})