Create New Job Page.

frontend/app/components/sidebar-provider.tsx

@@ -38,7 +38,7 @@ export function SidebarProvider({ children }: { children: React.ReactNode }) {
                             key={i}
                             to={to}
                             title={title}
-                            className={`flex place-items-center group-data-[collapsible=icon]:place-content-center gap-2 px-4 py-2 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:-mx-2 hover:bg-indigo-200 dark:hover:bg-slate-800 rounded-md ${pathname === to ? "bg-indigo-300 dark:bg-slate-700" : ""}`}
+                            className={`flex place-items-center group-data-[collapsible=icon]:place-content-center gap-2 px-4 py-2 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:-mx-2 hover:bg-indigo-200 dark:hover:bg-slate-800 rounded-md ${pathname.startsWith(to) ? "bg-indigo-300 dark:bg-slate-700" : ""}`}
                         >
                             <Icon />{" "}
                             <span className="group-data-[collapsible=icon]:hidden">{title}</span>

frontend/app/routes.ts

@@ -3,6 +3,7 @@ import { type RouteConfig, index, route } from "@react-router/dev/routes";
 export default [
 	index("routes/home.tsx"),
 	route("jobs", "routes/jobs.tsx"),
+	route("jobs/create", "routes/jobs.create.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"),

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

@@ -58,8 +58,11 @@ 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.length === 0 && (
+                    <p className="text-center text-gray-600 dark:text-gray-300">No assessments found for this job.</p>
+                )}
                 {assessments?.map(assessment => <AssessmentCard assessment={assessment} jid={job.id} />)}
-                {total && <Paginator total={total} />}
+                {total != null && total > 0 && <Paginator total={total} />}
             </section>
         </main>
     );

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

@@ -86,7 +86,7 @@ export default function AssessmentDetailRoute() {
                         </div>
                     ))}
                 </div>
-                {total && <Paginator total={total} />}
+                {total != null && total > 0 && <Paginator total={total} />}
             </section>
         </main>
     );

frontend/app/routes/jobs.create.tsx

@@ -0,0 +1,182 @@
+import { XIcon } from "lucide-react";
+import { toast } from "react-toastify";
+import React, { useState } from "react";
+import { useNavigate } from "react-router";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+import type { Route } from "./+types/jobs.create";
+import { Textarea } from "~/components/ui/textarea";
+import { usePostJob, type PostJobPayload } from "~/services/usePostJob";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "~/components/ui/combobox";
+
+export function meta({}: Route.MetaArgs) {
+    return [
+        { title: "Create New Job" },
+        {
+            name: "description",
+            content: "Create a new job listing and find the perfect candidate!",
+        },
+    ];
+}
+
+export default function JobsCreateRoute() {
+    const navigate = useNavigate();
+    const mutation = usePostJob();
+
+    const [form, setForm] = useState<PostJobPayload & { skill_categories_raw: string }>({
+        title: "",
+        description: "",
+        seniority: "intern",
+        skill_categories: [],
+        skill_categories_raw: "",
+    } as any);
+
+    function update<K extends keyof typeof form>(k: K, v: typeof form[K]) {
+        setForm((s) => ({ ...s, [k]: v }));
+    }
+
+    async function handleSubmit(e: React.SubmitEvent) {
+        e.preventDefault();
+
+        if (!form.title.trim()) {
+            toast.error("Title is required");
+            return;
+        }
+        if (!form.description.trim()) {
+            toast.error("Description is required");
+            return;
+        }
+
+        const payload: PostJobPayload = {
+            title: form.title.trim(),
+            description: form.description.trim(),
+            seniority: form.seniority,
+            skill_categories: form.skill_categories_raw
+                .split(",")
+                .map((s) => s.trim())
+                .filter(Boolean),
+        };
+
+        try {
+            await mutation.mutateAsync(payload);
+            toast.success("Job created");
+            navigate("/jobs");
+        } catch (err: any) {
+            const message = err?.response?.data?.detail || err?.message || "Failed to create job";
+            toast.error(message);
+        }
+    }
+
+    return (
+        <div className="max-w-3xl mx-auto p-6">
+            <h1 className="text-2xl font-semibold mb-4">Create New Job</h1>
+
+            <form onSubmit={handleSubmit} className="space-y-4 bg-white dark:bg-gray-800 p-6 rounded shadow">
+                <div className="flex flex-col gap-2">
+                    <label className="text-gray-700 dark:text-gray-300">Title</label>
+                    <Input value={form.title} onChange={(e) => update("title", e.target.value)} placeholder="Senior Frontend Engineer" />
+                </div>
+
+                <div className="flex flex-col gap-2">
+                    <label className="text-gray-700 dark:text-gray-300">Description</label>
+                    <Textarea value={form.description} onChange={(e) => update("description", e.target.value)} placeholder="Describe the role, responsibilities and expectations" />
+                </div>
+
+                <div className="flex flex-col gap-2">
+                    <label className="text-gray-700 dark:text-gray-300">Seniority</label>
+                    <Combobox items={["intern", "junior", "mid", "senior"]} value={form.seniority} onValueChange={(value) => update("seniority", value as any)}>
+                        <ComboboxInput placeholder="Choose value" />
+                        <ComboboxContent>
+                            <ComboboxEmpty>No items found.</ComboboxEmpty>
+                            <ComboboxList>
+                                {(item) => (
+                                    <ComboboxItem key={item} value={item}>
+                                        {item}
+                                    </ComboboxItem>
+                                )}
+                            </ComboboxList>
+                        </ComboboxContent>
+                    </Combobox>
+                </div>
+
+                <div className="flex flex-col gap-2">
+                    <label className="text-gray-700 dark:text-gray-300">Skill categories (comma separated)</label>
+                    <div className="flex flex-wrap gap-2">
+                        {form.skill_categories.map((skill) => (
+                            <span
+                                key={skill}
+                                className="inline-flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 text-sm rounded-full"
+                            >
+                                <span>{skill}</span>
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    className="text-xs h-6 w-6 text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-500"
+                                    onClick={() => {
+                                        const next = form.skill_categories.filter((s) => s !== skill);
+                                        update("skill_categories", next as any);
+                                        update("skill_categories_raw", next.join(", ") as any);
+                                    }}
+                                >
+                                    <XIcon className="size-4" />
+                                </Button>
+                            </span>
+                        ))}
+                    </div>
+                    <SkillInput form={form} update={update} />
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Enter skills separated by commas; they will be saved as an array.</p>
+                </div>
+
+                <div className="flex items-center gap-3 place-content-end">
+                    <Button variant="outline" type="button" onClick={() => {
+                        setForm({ title: "", description: "", seniority: "junior", skill_categories: [], skill_categories_raw: "" } as any);
+                    }}>
+                        Clear
+                    </Button>
+                    <Button type="submit" disabled={mutation.isPending}>
+                        {mutation.isPending ? "Creating…" : "Create Job"}
+                    </Button>
+                </div>
+
+                {mutation.isError && <div className="text-sm text-red-500">Error: {(mutation.error as any)?.message ?? "An error occurred"}</div>}
+            </form>
+        </div>
+    );
+}
+
+function SkillInput({ form, update } : { form: PostJobPayload & { skill_categories_raw: string; }, update: <K extends keyof PostJobPayload | "skill_categories_raw">(k: K, v: (PostJobPayload & { skill_categories_raw: string; })[K]) => void }) {
+    const [skillInput, setSkillInput] = useState("");
+
+    function addFromInput(raw: string) {
+        const parts = raw
+            .split(",")
+            .map((s) => s.trim())
+            .filter(Boolean);
+        if (parts.length === 0) return;
+        const next = Array.from(new Set([...form.skill_categories, ...parts]));
+        update("skill_categories", next as any);
+        update("skill_categories_raw", next.join(", ") as any);
+        setSkillInput("");
+    }
+
+    return (
+        <Input
+            className="w-full border rounded px-3 py-2 bg-white dark:bg-gray-800"
+            placeholder="Add a skill and press Enter (or type comma)"
+            value={skillInput}
+            onChange={(e) => setSkillInput(e.target.value)}
+            onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === ",") {
+                    e.preventDefault();
+                    addFromInput(skillInput);
+                } else if (e.key === "Backspace" && !skillInput && form.skill_categories.length) {
+                    const next = form.skill_categories.slice(0, -1);
+                    update("skill_categories", next as any);
+                    update("skill_categories_raw", next.join(", ") as any);
+                }
+            } }
+            onBlur={() => {
+                if (skillInput.trim()) addFromInput(skillInput);
+            } } />
+    );
+}

frontend/app/routes/jobs.tsx

@@ -1,8 +1,10 @@
-import { Loader2Icon } from "lucide-react";
 import type { Route } from "./+types/jobs";
+import { useNavigate } from "react-router";
 import { JobCard } from "~/components/job-card";
+import { Button } from "~/components/ui/button";
 import { useGetJobs } from "~/services/useGetJobs";
 import { Paginator } from "~/components/paginator";
+import { Loader2Icon, PlusIcon } from "lucide-react";
 
 export function meta({}: Route.MetaArgs) {
     return [
@@ -16,12 +18,19 @@ export function meta({}: Route.MetaArgs) {
 
 export default function JobsRoute() {
     const { data: { data: jobs, total } = { data: [] }, isLoading, isError, refetch } = useGetJobs();
+    const Navigate = useNavigate();
 
     return (
         <main className="container mx-auto p-4 flex flex-col gap-4">
             <header className="flex place-content-between gap-4 flex-wrap">
                 <h1 className="font-bold text-4xl">Active Jobs</h1>
-                <p>{total} jobs in total</p>
+                <div className="flex flex-col gap-2 place-content-center">
+                    <Button className="mb-2 sm:mb-0" onClick={() => Navigate("/jobs/create")}>
+                        <PlusIcon />
+                        Create New Job
+                    </Button>
+                    <p className="text-center">{total} jobs in total</p>
+                </div>
             </header>
 
             <section className="grid grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-4">
@@ -43,7 +52,7 @@ export default function JobsRoute() {
                     </div>
                 )}
                 {jobs?.map(job => <JobCard key={job.id} job={job} />)}
-                {total && <Paginator total={total} />}
+                {total != null && total > 0 && <Paginator total={total} />}
             </section>
         </main>
     );

frontend/app/services/usePostJob.ts

@@ -0,0 +1,17 @@
+import { useMutation } from "@tanstack/react-query";
+import { HTTPManager } from "~/managers/HTTPManager";
+
+export const POST_JOB_KEY = "post-job"
+
+export type PostJobPayload = {
+    title: string;
+    description: string;
+    seniority: "internship" | "junior" | "mid" | "senior";
+    skill_categories: Array<string>;
+};
+
+export const usePostJob = () => useMutation({
+    mutationKey: [POST_JOB_KEY],
+    mutationFn: async (payload: PostJobPayload) =>
+        HTTPManager.post("/jobs", payload).then(response => response.data),
+});