Displaying Applications.

frontend/app/routes.ts

@@ -5,6 +5,7 @@ export default [
 	route("jobs", "routes/jobs.tsx"),
 	route("jobs/:id", "routes/jobs.$id.tsx"),
 	route("jobs/:jid/assessments/:id", "routes/jobs.$jid.assessments.$id.tsx"),
+	route("jobs/:jid/assessment/:aid/applications", "routes/jobs.$jid.assessment.$aid.applications.tsx"),
 	route("dashboard", "routes/dashboard.tsx"),
 	route("registration", "routes/registration.tsx"),
 ] satisfies RouteConfig;

frontend/app/routes/jobs.$jid.assessment.$aid.applications.tsx

@@ -0,0 +1,93 @@
+import { Avatar } from "radix-ui";
+import { useParams } from "react-router";
+import { Loader2Icon } from "lucide-react";
+import { JobCard } from "~/components/job-card";
+import { Paginator } from "~/components/paginator";
+import { useGetJobByID } from "~/services/useGetJobsByID";
+import { AssessmentCard } from "~/components/assessment-card";
+import { useGetJobAssessmentByID } from "~/services/useGetJobAssessmentByID";
+import type { Route } from "./+types/jobs.$jid.assessment.$aid.applications";
+import { useGetJobAssessmentApplications } from "~/services/useGetJobAssessmentApplications";
+
+export function meta({}: Route.MetaArgs) {
+    return [
+        { title: "Assessments Applications" },
+        {
+            name: "description",
+            content: "View applications for the selected job assessment.",
+        },
+    ];
+}
+
+export default function AssessmentDetailRoute() {
+    const { jid, aid } = useParams();
+    const { data: job, isLoading: isJobLoading, isError: isJobError, refetch: refetchJob } = useGetJobByID({ id: jid || "" });
+    const { data: jobAssessment, isLoading: isJobAssessmentLoading, isError: isJobAssessmentError, refetch: refetchJobAssessment } = useGetJobAssessmentByID({ jid: jid || "", id: aid || "" });
+    const { data: { data: applications, total } = { data: [] }, isLoading: isApplicationsLoading, isError: isApplicationsError, refetch: refetchApplications } = useGetJobAssessmentApplications({ jid: jid || "", aid: aid || "" });
+
+    const isError = isJobError || isJobAssessmentError || isApplicationsError;
+    const isLoading = isJobLoading || isJobAssessmentLoading || isApplicationsLoading;
+    const refetch = () => (refetchJob(), refetchJobAssessment(), refetchApplications());
+
+    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 Applications...</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 applications<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>
+        );
+    }
+
+    return (
+        <main className="container mx-auto p-4 flex flex-col gap-8">
+            <JobCard job={job} isStatic />
+            <AssessmentCard jid={jid || ""} assessment={jobAssessment} isStatic />
+            <section className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Assessment's Applications</h3>
+                <div className="grid grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-4">
+                    {applications.length === 0 ? (
+                        <p>No applications found for this assessment.</p>
+                    ) : applications.map(application => (
+                        <div key={application.id} className="border p-4 rounded bg-indigo-50 dark:bg-gray-700 flex flex-wrap justify-evenly gap-4 place-items-center">
+                            <div className="group-data-[collapsible=icon]:-mx-4 flex gap-2">
+                                <Avatar.Avatar className="shrink-0 cursor-pointer" tabIndex={0}>
+                                    <Avatar.AvatarFallback className="rounded-full bg-gray-200 dark:bg-gray-800 size-10 group-data-[collapsible=icon]:size-8 flex items-center justify-center">
+                                        {application.user ? `${application.user.first_name[0]}${application.user.last_name[0]}` : "U"}
+                                    </Avatar.AvatarFallback>
+                                </Avatar.Avatar>
+                                <div className="overflow-hidden group-data-[collapsible=icon]:hidden">
+                                    <p className="font-bold whitespace-nowrap text-ellipsis overflow-hidden text-start">
+                                        {application.user.first_name} {application.user.last_name}
+                                    </p>
+                                    <p className="whitespace-nowrap text-ellipsis overflow-hidden">
+                                        {application.user.email}
+                                    </p>
+                                </div>
+                            </div>
+                            <p>Score: {application.score}/{application.passing_score}</p>
+                        </div>
+                    ))}
+                </div>
+                {total && <Paginator total={total} />}
+            </section>
+        </main>
+    );
+}

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

@@ -1,17 +1,17 @@
 import { toast } from "react-toastify";
-import { useParams } from "react-router";
-import { Loader2Icon } from "lucide-react";
+import { Link, useParams } from "react-router";
+import { ExternalLinkIcon, Loader2Icon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Label, RadioGroup } from "radix-ui";
 import { Button } from "~/components/ui/button";
 import { Textarea } from "~/components/ui/textarea";
 import { Checkbox } from "~/components/ui/checkbox";
+import { useGetMyUser } from "~/services/useGetMyUser";
 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";
 import { usePostAssessmentApplication } from "~/services/usePostAssessmentApplication";
-import { useGetMyUser } from "~/services/useGetMyUser";
 
 export function meta({}: Route.MetaArgs) {
     return [
@@ -86,6 +86,10 @@ export default function AssessmentDetailRoute() {
     return (
         <main className="container mx-auto p-4 flex flex-col gap-8">
             <AssessmentCard jid={jid || ""} assessment={assessment} isStatic />
+            <Link to={`/jobs/${jid}/assessment/${id}/applications`} className="text-indigo-600 hover:underline">
+                View Applications for this Assessment
+                <ExternalLinkIcon className="inline -translate-y-1 mx-2" />
+            </Link>
             <section className="flex flex-col gap-4">
                 <h3 className="text-xl font-semibold">Assessment's Questions</h3>
                 <div className="flex flex-col gap-4">

frontend/app/services/useGetJobAssessmentApplications.ts

@@ -0,0 +1,23 @@
+import type { User } from "./useGetMyUser";
+import { useQuery } from "@tanstack/react-query";
+import { HTTPManager } from "~/managers/HTTPManager";
+import type { Pagination } from "~/types/pagination";
+import { usePagination } from "~/hooks/use-pagination";
+
+export const GET_JOB_ASSESSMENT_APPLICATION_KEY = "job-assessments-application";
+
+export type Application = {
+    id: string;
+    user: User;
+    score: number;
+    passing_score: number;
+};
+
+export const useGetJobAssessmentApplications = ({ jid, aid }: { jid: string, aid: string }) => {
+    const { page, limit } = usePagination();
+    const searchParams = new URLSearchParams({ page: String(page), limit: String(limit) });
+    return useQuery({
+        queryKey: [GET_JOB_ASSESSMENT_APPLICATION_KEY, page, limit],
+        queryFn: async () => HTTPManager.get<Pagination<Application>>(`/applications/jobs/${jid}/assessments/${aid}?` + searchParams.toString()).then(response => response.data),
+    });
+}

frontend/app/services/useGetMyUser.ts

@@ -4,11 +4,11 @@ import { HTTPManager } from "~/managers/HTTPManager";
 export const GET_MY_USER_KEY = "my-user";
 
 export type User = {
-    "id": string
-    "email": string,
-    "last_name": string,
-    "first_name": string,
-    "role": "hr" | "applicant",
+    "id": string;
+    "email": string;
+    "last_name": string;
+    "first_name": string;
+    "role": "hr" | "applicant";
 }
 
 export const useGetMyUser = () => useQuery({