Questions Display.

frontend/app/components/assessment-card.tsx

@@ -3,36 +3,22 @@ import { useNavigate } from "react-router";
 import type { Assessment } from "~/services/useGetJobAssessments";
 import { BadgeQuestionMarkIcon, CircleCheckIcon, CircleDotIcon, HourglassIcon, PercentIcon, TextInitialIcon } from "lucide-react";
 
-export function AssessmentCard({ assessment, isStatic = false }: { assessment: Assessment, isStatic?: boolean }) {
+export function AssessmentCard({ jid, assessment, isStatic = false }: { jid: string, assessment: Assessment, isStatic?: boolean }) {
     const Navigate = useNavigate();
 
     return (
         <div
             tabIndex={isStatic ? -1 : 0}
-            className={cn("border p-4 rounded bg-indigo-100 dark:bg-gray-800 flex flex-col gap-4", isStatic ? "" : "[:is(:hover,:focus)]:shadow-lg [:is(:hover,:focus)]:scale-101 transition-all cursor-pointer")}
-            onClick={() => isStatic || Navigate(`/assessments/${assessment.id}`)}
+            className={cn("flex flex-col gap-4", isStatic ? "" : "border p-4 rounded bg-indigo-100 dark:bg-gray-800 [:is(:hover,:focus)]:shadow-lg [:is(:hover,:focus)]:scale-101 transition-all cursor-pointer")}
+            onClick={() => isStatic || Navigate(`/jobs/${jid}/assessments/${assessment.id}`)}
         >
-            <h4 className="font-semibold">{assessment.title}</h4>
+            <h4 className={cn("font-semibold", isStatic ? "text-4xl" : "text-2xl")}>{assessment.title}</h4>
             <footer className="flex flex-col gap-2">
-                <div className="flex flex-wrap gap-2">
-                    <span className="inline-flex gap-2 place-items-center px-3 py-1.5 rounded-xl bg-indigo-50 dark:bg-gray-700">
-                        <HourglassIcon />
-                        <p>{assessment.duration / 60} minutes</p>
-                    </span>
-                    <span className="inline-flex gap-2 place-items-center px-3 py-1.5 rounded-xl bg-indigo-50 dark:bg-gray-700">
-                        <PercentIcon />
-                        <p>{assessment.passing_score} passing score</p>
-                    </span>
-                    <span className="inline-flex gap-2 place-items-center px-3 py-1.5 rounded-xl bg-indigo-50 dark:bg-gray-700">
-                        <BadgeQuestionMarkIcon />
-                        <p>{assessment.questions_count} questions</p>
-                    </span>
-                </div>
                 <div className="grow flex flex-col gap-2 mt-2">
                     <h5 className="font-semibold">Question Types</h5>
                     <div className="grow flex flex-wrap gap-2">
                         {[...new Set(assessment.questions.map(question => question.type))].map((type, i) => (
-                            <span className="inline-flex gap-2 place-items-center px-3 py-1.5 rounded-xl bg-indigo-50 dark:bg-gray-700">
+                            <span key={i} className="inline-flex gap-2 place-items-center px-3 py-1.5 rounded-xl bg-indigo-50 dark:bg-gray-700">
                                 {{
                                     "text_based": <TextInitialIcon />,
                                     "choose_one": <CircleDotIcon />,
@@ -43,6 +29,23 @@ export function AssessmentCard({ assessment, isStatic = false }: { assessment: A
                         ))}
                     </div>
                 </div>
+                <div className="flex flex-col gap-2">
+                    <h5 className="font-semibold">Assessment's Details</h5>
+                    <div className="grow flex flex-wrap gap-2">
+                        <span className="inline-flex gap-2 place-items-center px-3 py-1.5 rounded-xl bg-indigo-50 dark:bg-gray-700">
+                            <HourglassIcon />
+                            <p>{assessment.duration / 60} minutes</p>
+                        </span>
+                        <span className="inline-flex gap-2 place-items-center px-3 py-1.5 rounded-xl bg-indigo-50 dark:bg-gray-700">
+                            <PercentIcon />
+                            <p>{assessment.passing_score} passing score</p>
+                        </span>
+                        <span className="inline-flex gap-2 place-items-center px-3 py-1.5 rounded-xl bg-indigo-50 dark:bg-gray-700">
+                            <BadgeQuestionMarkIcon />
+                            <p>{assessment.questions_count} questions</p>
+                        </span>
+                    </div>
+                </div>
             </footer>
         </div>
     );

frontend/app/components/paginator.tsx

@@ -23,11 +23,11 @@ export function Paginator({ total }: { total: number }) {
                     <ComboboxContent>
                         <ComboboxEmpty>No items found.</ComboboxEmpty>
                         <ComboboxList>
-                        {(item) => (
-                            <ComboboxItem key={item} value={item}>
-                                {item}
-                            </ComboboxItem>
-                        )}
+                            {(item) => (
+                                <ComboboxItem key={item} value={item}>
+                                    {item}
+                                </ComboboxItem>
+                            )}
                         </ComboboxList>
                     </ComboboxContent>
                 </Combobox>

frontend/app/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "~/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

frontend/app/components/ui/radio-group.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { CircleIcon } from "lucide-react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "~/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

frontend/app/routes.ts

@@ -4,4 +4,5 @@ export default [
 	index("routes/home.tsx"),
 	route("jobs", "routes/jobs.tsx"),
 	route("jobs/:id", "routes/jobs.$id.tsx"),
+	route("jobs/:jid/assessments/:id", "routes/jobs.$jid.assessments.$id.tsx"),
 ] satisfies RouteConfig;

frontend/app/routes/jobs.$id.tsx

@@ -1,11 +1,22 @@
 import { useParams } from "react-router";
 import {Loader2Icon, } from "lucide-react";
+import type { Route } from "./+types/jobs.$id";
 import { JobCard } from "~/components/job-card";
 import { Paginator } from "~/components/paginator";
 import { useGetJobByID } from "~/services/useGetJobsByID";
 import { AssessmentCard } from "~/components/assessment-card";
 import { useGetJobAssessments } from "~/services/useGetJobAssessments";
 
+export function meta({}: Route.MetaArgs) {
+    return [
+        { title: "Job Details" },
+        {
+            name: "description",
+            content: "Detailed view of the selected job and its assessments.",
+        },
+    ];
+}
+
 export default function JobDetailRoute() {
     const { id } = useParams();
     const { data: job, isLoading: isJobLoading, isError: isJobError, refetch: refetchJob } = useGetJobByID({ id: id || "" });
@@ -47,7 +58,7 @@ export default function JobDetailRoute() {
             <JobCard job={job} isStatic />
             <section className="flex flex-col gap-4">
                 <h3 className="text-xl font-semibold">Job's Assessments</h3>
-                {assessments?.map(assessment => <AssessmentCard assessment={assessment} />)}
+                {assessments?.map(assessment => <AssessmentCard assessment={assessment} jid={job.id} />)}
                 {total && <Paginator total={total} />}
             </section>
         </main>

frontend/app/routes/jobs.$jid.assessments.$id.tsx

@@ -0,0 +1,97 @@
+import { useParams } from "react-router";
+import { Loader2Icon } from "lucide-react";
+import { Label, RadioGroup } from "radix-ui";
+import { Textarea } from "~/components/ui/textarea";
+import { Checkbox } from "~/components/ui/checkbox";
+import { RadioGroupItem } from "~/components/ui/radio-group";
+import { AssessmentCard } from "~/components/assessment-card";
+import type { Route } from "./+types/jobs.$jid.assessments.$id";
+import { useGetJobAssessmentByID } from "~/services/useGetJobAssessmentByID";
+
+export function meta({}: Route.MetaArgs) {
+    return [
+        { title: "Assessment Details" },
+        {
+            name: "description",
+            content: "Detailed view of the selected assessment.",
+        },
+    ];
+}
+
+export default function AssessmentDetailRoute() {
+    const { jid, id } = useParams();
+    const { data: assessment, isLoading, isError, refetch } = useGetJobAssessmentByID({ jid: jid || "", id: id || "" });
+
+    if (isLoading) {
+        return (
+            <main className="container mx-auto p-4 flex flex-col gap-2 place-items-center">
+                <div className="flex flex-col gap-2 place-items-center">
+                    <Loader2Icon className="animate-spin" />
+                    <p>Loading job...</p>
+                </div>
+            </main>
+        );
+    }
+
+    if (isError) {
+        return (
+            <main className="container mx-auto p-4 flex flex-col gap-2">
+                <div className="bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-100 p-4 rounded flex flex-col gap-2 place-items-center">
+                    <p className="text-center">Failed to load job<br />Please try again</p>
+                    <button
+                        onClick={() => refetch()}
+                        className="ml-4 px-3 py-1 cursor-pointer bg-red-500 text-white dark:bg-red-200 dark:text-red-700 rounded"
+                    >
+                        Retry
+                    </button>
+                </div>
+            </main>
+        );
+    }
+
+    const totalWeights = assessment.questions.reduce((weights, question) => weights + question.weight, 0);
+
+    return (
+        <main className="container mx-auto p-4 flex flex-col gap-8">
+            <AssessmentCard jid={jid || ""} assessment={assessment} isStatic />
+            <section className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Assessment's Questions</h3>
+                <div className="flex flex-col gap-4">
+                    {assessment.questions.map((question) => (
+                        <div key={question.id} className="border p-4 flex flex-col gap-2 rounded bg-indigo-100 dark:bg-gray-800">
+                            <header className="flex place-content-between gap-4 place-items-start">
+                                <h4 className="font-semibold mb-2">{question.text}</h4>
+                                <span className="inline-flex gap-2 place-items-center px-3 py-1.5 rounded-xl bg-indigo-50 dark:bg-gray-700">
+                                    {totalWeights > 0 ? `~${Math.floor((question.weight / totalWeights) * 100) / 100}` : "0"}
+                                </span>
+                            </header>
+                            {{
+                                "text_based": <Textarea className="w-full resize-none" placeholder="Answer goes here..." />,
+                                "choose_one": (
+                                    <RadioGroup.RadioGroup>
+                                        {question.options.map((option, i) => (
+                                            <div key={i} className="flex items-center gap-3">
+                                                <RadioGroupItem value={option.value} id={`${question.id}-option-${i}`} className="cursor-pointer" />
+                                                <Label.Label htmlFor={`${question.id}-option-${i}`} className="cursor-pointer">{option.text}</Label.Label>
+                                            </div>
+                                        ))}
+                                    </RadioGroup.RadioGroup>
+                                ),
+                                "choose_many": (
+                                    <div>
+                                        {question.options.map((option, i) => (
+                                            <div key={i} className="flex items-center gap-3">
+                                                <Checkbox id={`${question.id}-option-${i}`} className="cursor-pointer" />
+                                                <Label.Label htmlFor={`${question.id}-option-${i}`} className="cursor-pointer">{option.text}</Label.Label>
+                                            </div>
+                                        ))}
+                                    </div>
+                                ),
+                            }[question.type]}
+                        </div>
+                    ))}
+                </div>
+            </section>
+        </main>
+    );
+}

frontend/app/services/useGetJobAssessmentByID.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { HTTPManager } from "~/managers/HTTPManager";
+import type { Assessment } from "./useGetJobAssessments";
+
+export const GET_JOB_ASSESSMENT_BY_ID_KEY = "job-assessments-by-id";
+
+export const useGetJobAssessmentByID = ({ jid, id }: { jid: string, id: string }) => {
+    return useQuery({
+        queryKey: [GET_JOB_ASSESSMENT_BY_ID_KEY, jid, id],
+        queryFn: async () => HTTPManager.get<Assessment>(`/assessments/jobs/${jid}/${id}`).then(response => response.data),
+    });
+}

frontend/app/services/useGetJobsByID.ts

@@ -2,11 +2,11 @@ import type { Job } from "./useGetJobs";
 import { useQuery } from "@tanstack/react-query";
 import { HTTPManager } from "~/managers/HTTPManager";
 
-export const GET_JOBS_BY_ID_KEY = "jobs-by-id";
+export const GET_JOB_BY_ID_KEY = "job-by-id";
 
 export const useGetJobByID = ({ id }: { id: string }) => {
     return useQuery({
-        queryKey: [GET_JOBS_BY_ID_KEY, id],
+        queryKey: [GET_JOB_BY_ID_KEY, id],
         queryFn: async () => HTTPManager.get<Job>(`/jobs/${id}`).then(response => response.data),
     });
 }