View My Applications.

frontend/app/components/application-card.tsx

@@ -1,18 +1,22 @@
 import { cn } from "~/lib/utils";
 import { Avatar } from "radix-ui";
 import { useNavigate } from "react-router";
+import type { MyApplication } from "~/services/useGetMyApplications";
 import type { Application } from "~/services/useGetJobAssessmentApplications";
 
-export function ApplicationCard({ application, aid, jid, isStatic = false } : { application: Application, jid: string, aid: string, isStatic?: boolean }) {
+export function ApplicationCard({ application, aid, jid, isStatic = false, safeRoute = false } : { application: Application & { job?: MyApplication["job"] }, jid: string, aid: string, isStatic?: boolean, safeRoute?: boolean }) {
     const Navigate = useNavigate();
 
     return (
         <div
             tabIndex={isStatic ? -1 : 0}
             className={cn("p-4 flex flex-wrap justify-between gap-4 place-items-center", isStatic ? "" : "border rounded bg-indigo-100 dark:bg-gray-700  [:is(:hover,:focus)]:shadow-lg [:is(:hover,:focus)]:scale-101 transition-all cursor-pointer")}
-            onClick={() => isStatic || Navigate(`/jobs/${jid}/assessments/${aid}/applications/${application.id}`)}
+            onClick={() => isStatic || Navigate(safeRoute ? `/my-applications/${application.id}` : `/jobs/${jid}/assessments/${aid}/applications/${application.id}`)}
         >
-            <h1 className={cn("grow font-bold w-full", isStatic ? "text-3xl" : "text-xl")}>{application.assessment_details.title}</h1>
+            <header className="flex flex-col gap-2 w-full grow">
+                <h1 className={cn("font-bold", isStatic ? "text-3xl" : "text-xl")}>{application.assessment_details.title}</h1>
+                {application.job && <p className="text-gray-500 dark:text-gray-200">{application.job.title}</p>}
+            </header>
             <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-indigo-200 dark:bg-gray-800 size-10 group-data-[collapsible=icon]:size-8 flex items-center justify-center">

frontend/app/components/sidebar-provider.tsx

@@ -4,13 +4,14 @@ import { toast } from "react-toastify";
 import { Link, useLocation } from "react-router";
 import { HTTPManager } from "~/managers/HTTPManager";
 import { useGetMyUser } from "~/services/useGetMyUser";
-import { Building2Icon, LayoutDashboardIcon } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { Building2Icon, FilesIcon, LayoutDashboardIcon } from "lucide-react";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarProvider as SidebarProvider_ } from "./ui/sidebar";
 
 const LINKS = [
     { title: "Jobs", to: "/jobs", icon: Building2Icon },
     { title: "Dashboard", to: "/dashboard", icon: LayoutDashboardIcon, role: "hr" },
+    { title: "My Applications", to: "/my-applications", icon: FilesIcon, role: "applicant" },
 ]
 
 export function SidebarProvider({ children }: { children: React.ReactNode }) {

frontend/app/routes.ts

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

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

@@ -75,5 +75,5 @@ export default function ApplicationDetailsRoute() {
                 />
             ))}
         </main>
-    )
+    );
 }

frontend/app/routes/my-applications.$id.tsx

@@ -0,0 +1,80 @@
+import { useParams } from "react-router";
+import { Loader2Icon } from "lucide-react";
+import type { Route } from "./+types/my-applications";
+import { QuestionCard } from "~/components/question-card";
+import { ApplicationCard } from "~/components/application-card";
+import { useGetMyApplicationByID } from "~/services/useGetMyApplicationByID";
+import type { DetailedApplication } from "~/services/useGetJobAssessmentApplicationByID";
+
+export function meta({}: Route.MetaArgs) {
+    return [
+        { title: "My Application Details" },
+        {
+            name: "description",
+            content: "Detailed view of the selected application, including candidate information and assessment results.",
+        },
+    ];
+}
+
+export default function MyApplicationDetailsRoute() {
+    const { id } = useParams();
+    const { data: application, isLoading, isError, refetch } = useGetMyApplicationByID({ 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 application...</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 application<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 = application.answers.reduce((weights, answer) => weights + answer.weight, 0);
+
+    return (
+        <main className="container mx-auto p-4 flex flex-col gap-4">
+            <ApplicationCard application={application} aid={application.assessment.id || ""} jid={application.job.id || ""} isStatic />
+            {application.answers.map((answer: DetailedApplication["answers"][number]) => (
+                <QuestionCard
+                    key={answer.question_id}
+                    isStatic
+                    displayCheckboxMessage
+                    question={{
+                        type: answer.type,
+                        weight: answer.weight,
+                        id: answer.question_id,
+                        text: answer.question_text,
+                        options: answer.question_options,
+                        correct_options: answer.correct_options,
+                        skill_categories: answer.skill_categories,
+                    }}
+                    answers={application.answers.reduce((accumulator, current) => ({
+                        ...accumulator,
+                        [current.question_id]: current.type == "text_based" ? current.text : current.type == "choose_one" ? current.options : current.options,
+                    }), {})}
+                    setAnswers={() => {}}
+                    totalWeights={totalWeights}
+                    rationale={answer.rationale}
+                />
+            ))}
+        </main>
+    );
+}

frontend/app/routes/my-applications.tsx

@@ -0,0 +1,69 @@
+import { Loader2Icon } from "lucide-react";
+import { Paginator } from "~/components/paginator";
+import type { Route } from "./+types/my-applications";
+import { useGetMyUser } from "~/services/useGetMyUser";
+import { ApplicationCard } from "~/components/application-card";
+import { useGetMyApplications } from "~/services/useGetMyApplications";
+
+export function meta({}: Route.MetaArgs) {
+    return [
+        { title: "My Applications" },
+        {
+            name: "description",
+            content: "View and manage your job applications, track their status, and review feedback from assessments.",
+        },
+    ];
+}
+
+export default function MyApplicationsRoute() {
+    const { data: myUser, isLoading: isMyUserLoading, isError: isMyUserError, refetch: refetchMyUser } = useGetMyUser();
+    const { data: { data: applications, total } = { data: [] }, isLoading: isApplicationsLoading, isError: isApplicationsError, refetch: refetchApplications } = useGetMyApplications();
+
+    const isError = isMyUserError || isApplicationsError;
+    const isLoading = isMyUserLoading || isApplicationsLoading;
+    const refetch = () => (refetchMyUser(), 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">
+            <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.<br/>Start applying now!</p>
+                    ) : applications.map(application => (
+                        <ApplicationCard key={application.id} application={{...application, user: myUser, passing_score: application.assessment.passing_score, assessment_details: application.assessment}} jid={application.job.id || ""} aid={application.assessment.id || ""} safeRoute />
+                    ))}
+                </div>
+                {total != null && total > 0 && <Paginator total={total} />}
+            </section>
+        </main>
+    );
+}

frontend/app/services/useGetJobAssessmentApplicationByID.ts

@@ -32,7 +32,7 @@ export type DetailedApplication = {
 };
 
 export const useGetJobAssessmentApplicationByID = ({ jid, aid, id }: { jid: string, aid: string, id: string }) => useQuery({
-    queryKey: [GET_JOB_ASSESSMENT_APPLICATION_BY_ID_KEY, jid, id],
+    queryKey: [GET_JOB_ASSESSMENT_APPLICATION_BY_ID_KEY, jid, aid, id],
     queryFn: async () =>
         HTTPManager.get<DetailedApplication>(
             `/applications/jobs/${jid}/assessment_id/${aid}/applications/${id}`,

frontend/app/services/useGetJobAssessmentApplications.ts

@@ -4,7 +4,7 @@ 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 const GET_JOB_ASSESSMENT_APPLICATION_KEY = "job-assessments-applications";
 
 export type Application = {
     id: string;

frontend/app/services/useGetMyApplicationByID.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { HTTPManager } from "~/managers/HTTPManager";
+import type { MyApplication } from "./useGetMyApplications";
+import type { DetailedApplication } from "./useGetJobAssessmentApplicationByID";
+
+export const GET_JOB_ASSESSMENT_APPLICATION_BY_ID_KEY = "job-assessment-application-by-id";
+
+export type DetailedMyApplication = MyApplication & DetailedApplication;
+
+export const useGetMyApplicationByID = ({ id }: { id: string }) => useQuery({
+    queryKey: [GET_JOB_ASSESSMENT_APPLICATION_BY_ID_KEY, id],
+    queryFn: async () =>
+        HTTPManager.get<DetailedMyApplication>(`/applications/my-applications/${id}`).then((response) => response.data),
+});

frontend/app/services/useGetMyApplications.ts

@@ -0,0 +1,31 @@
+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_MY_APPLICATIONS_KEY = "job-my-applications";
+
+export type MyApplication = {
+    id: string;
+    score: number;
+    job: {
+        id: string;
+        title: string;
+        description: string;
+        seniority: "intern" | "junior" | "mid" | "senior";
+    };
+    assessment: {
+        id: string;
+        title: string;
+        passing_score: number;
+    };
+}
+
+export const useGetMyApplications = () => {
+    const { page, limit } = usePagination();
+    const searchParams = new URLSearchParams({ page: String(page), limit: String(limit) });
+    return useQuery({
+        queryKey: [GET_MY_APPLICATIONS_KEY, page, limit],
+        queryFn: async () => HTTPManager.get<Pagination<MyApplication>>(`/applications/my-applications?` + searchParams.toString()).then(response => response.data),
+    });
+}