Dashboard Initiated.

frontend/app/components/overview-charts.tsx

@@ -0,0 +1,72 @@
+import {
+    Legend,
+    Tooltip,
+    BarElement,
+    ArcElement,
+    LinearScale,
+    LineElement,
+    PointElement,
+    CategoryScale,
+    Chart as ChartJS,
+} from "chart.js";
+import { Bar, Doughnut } from "react-chartjs-2";
+import type { Job } from "~/services/useGetJobs";
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    PointElement,
+    LineElement,
+    Tooltip,
+    Legend,
+    ArcElement
+);
+
+export default function OverviewCharts({ jobs, loading }: { jobs: Job[]; loading?: boolean }) {
+    const labels = jobs.map(j => (j.title.length > 20 ? j.title.slice(0, 20) + "…" : j.title));
+    const applicantsData = jobs.map(j => j.applicants_count ?? 0);
+
+    const seniorities = ["intern", "junior", "mid", "senior"];
+    const seniorityCounts = seniorities.map(s => jobs.filter(j => j.seniority === s).length);
+
+    const barData = {
+        labels,
+        datasets: [
+            {
+                label: "Applicants",
+                data: applicantsData,
+                backgroundColor: "rgba(34,197,94,0.8)",
+            },
+        ],
+    };
+
+    const doughnutData = {
+        labels: seniorities,
+        datasets: [
+            {
+                data: seniorityCounts,
+                backgroundColor: ["#60A5FA", "#F59E0B", "#A78BFA", "#FB7185"],
+            },
+        ],
+    };
+
+    if (loading) {
+        return <div className="h-64 flex items-center justify-center text-gray-500">Loading charts…</div>;
+    }
+
+    if (jobs.length === 0) {
+        return <div className="h-64 flex items-center justify-center text-gray-500">No data to display.</div>;
+    }
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="h-64">
+                <Bar data={barData} options={{ responsive: true, maintainAspectRatio: false }} />
+            </div>
+            <div className="h-64">
+                <Doughnut data={doughnutData} options={{ responsive: true, maintainAspectRatio: false }} />
+            </div>
+        </div>
+    );
+}

frontend/app/routes.ts

@@ -5,4 +5,5 @@ 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("dashboard", "routes/dashboard.tsx"),
 ] satisfies RouteConfig;

frontend/app/routes/dashboard.tsx

@@ -0,0 +1,90 @@
+import { useMemo } from "react";
+import type { Route } from "./+types/dashboard";
+import { useGetJobs } from "~/services/useGetJobs";
+import OverviewCharts from "~/components/overview-charts";
+
+export function meta({}: Route.MetaArgs) {
+    return [
+        { title: "Dashboard" },
+        {
+            name: "description",
+            content: "Overview of platform metrics and insights to track your hiring process.",
+        },
+    ];
+}
+
+export default function Dashboard() {
+    const { data, isLoading, isError } = useGetJobs();
+    const jobs = data?.data ?? [];
+
+    const totals = useMemo(() => {
+        const totalJobs = jobs.length;
+        const totalApplicants = jobs.reduce((s, j) => s + (j.applicants_count ?? 0), 0);
+        const activeJobs = jobs.filter(j => j.active).length;
+        return { totalJobs, totalApplicants, activeJobs };
+    }, [jobs]);
+
+    return (
+        <div className="p-6 space-y-6">
+            <header className="flex items-center justify-between">
+                <h1 className="text-2xl font-semibold">Dashboard</h1>
+                <p className="text-sm text-muted-foreground">Overview and quick insights</p>
+            </header>
+
+            <section className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <div className="p-4 bg-white dark:bg-gray-800 shadow rounded">
+                    <div className="text-sm text-gray-500 dark:text-gray-200">Total Jobs</div>
+                    <div className="mt-2 text-3xl font-bold">{isLoading ? "…" : totals.totalJobs}</div>
+                </div>
+                <div className="p-4 bg-white dark:bg-gray-800 shadow rounded">
+                    <div className="text-sm text-gray-500 dark:text-gray-200">Total Applicants</div>
+                    <div className="mt-2 text-3xl font-bold">{isLoading ? "…" : totals.totalApplicants}</div>
+                </div>
+                <div className="p-4 bg-white dark:bg-gray-800 shadow rounded">
+                    <div className="text-sm text-gray-500 dark:text-gray-200">Active Jobs</div>
+                    <div className="mt-2 text-3xl font-bold">{isLoading ? "…" : totals.activeJobs}</div>
+                </div>
+            </section>
+
+            <section className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="p-4 bg-white dark:bg-gray-800 shadow rounded">
+                    <h2 className="text-lg font-medium mb-4">Applicants Per Job</h2>
+                    <OverviewCharts jobs={jobs} loading={isLoading} />
+                </div>
+                <div className="p-4 bg-white dark:bg-gray-800 shadow rounded">
+                    <h2 className="text-lg font-medium mb-4">Quick Insights</h2>
+                    {isError && <div className="text-red-500">Error loading data</div>}
+                    {!isLoading && jobs.length === 0 && <div className="text-sm text-gray-600 dark:text-gray-200">No jobs yet.</div>}
+                    {!isLoading && jobs.length > 0 && (
+                        <ul className="space-y-3">
+                            <li className="flex justify-between">
+                                <span className="text-sm text-gray-700 dark:text-gray-200">Top job (by applicants)</span>
+                                <span className="font-medium">
+                                    {jobs.slice().sort((a,b) => (b.applicants_count||0)-(a.applicants_count||0))[0]?.title ?? "—"}
+                                </span>
+                            </li>
+                            <li className="flex justify-between">
+                                <span className="text-sm text-gray-700 dark:text-gray-200">Most common seniority</span>
+                                <span className="font-medium">
+                                    {(() => {
+                                        const counts = jobs.reduce<Record<string,number>>((acc, j) => {
+                                            acc[j.seniority] = (acc[j.seniority] || 0) + 1;
+                                            return acc;
+                                        }, {});
+                                        const entries = Object.entries(counts);
+                                        if (!entries.length) return "—";
+                                        return entries.sort((a,b) => b[1]-a[1])[0][0];
+                                    })()}
+                                </span>
+                            </li>
+                            <li className="flex justify-between">
+                                <span className="text-sm text-gray-700 dark:text-gray-200">Jobs with no applicants</span>
+                                <span className="font-medium">{jobs.filter(j => !j.applicants_count).length}</span>
+                            </li>
+                        </ul>
+                    )}
+                </div>
+            </section>
+        </div>
+    );
+}

frontend/package-lock.json

@@ -11,12 +11,14 @@
         "@react-router/serve": "7.12.0",
         "@tanstack/react-query": "^4.43.0",
         "axios": "^1.13.4",
+        "chart.js": "^4.5.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "isbot": "^5.1.31",
         "lucide-react": "^0.563.0",
         "radix-ui": "^1.4.3",
         "react": "^19.2.4",
+        "react-chartjs-2": "^5.3.1",
         "react-dom": "^19.2.4",
         "react-router": "7.12.0",
         "react-toastify": "^11.0.5",
@@ -1091,6 +1093,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@mjackson/node-fetch-server": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@mjackson/node-fetch-server/-/node-fetch-server-0.2.0.tgz",
@@ -3688,6 +3696,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -5282,6 +5302,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.1.tgz",
+      "integrity": "sha512-h5IPXKg9EXpjoBzUfyWJvllMjG2mQ4EiuHQFhms/AjUm0XSZHhyRy2xVmLXHKrtcdrPO4mnGqRtYoD0vp95A0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",

frontend/package.json

@@ -14,12 +14,14 @@
     "@react-router/serve": "7.12.0",
     "@tanstack/react-query": "^4.43.0",
     "axios": "^1.13.4",
+    "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "isbot": "^5.1.31",
     "lucide-react": "^0.563.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
+    "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.2.4",
     "react-router": "7.12.0",
     "react-toastify": "^11.0.5",