Logout and Submit.

frontend/app/components/sidebar-provider.tsx

@@ -1,15 +1,31 @@
 import { Avatar } from "radix-ui";
+import { Button } from "./ui/button";
+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 { 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 },
+    { title: "Dashboard", to: "/dashboard", icon: LayoutDashboardIcon, role: "hr" },
 ]
 
 export function SidebarProvider({ children }: { children: React.ReactNode }) {
     const { pathname } = useLocation();
+    const { data: myUser } = useGetMyUser();
+
+    function handleLogout() {
+        HTTPManager.post("/users/registration/logout", {}).then(() => {
+            localStorage.removeItem("token");
+            if (typeof window !== "undefined") {
+                window.location.replace("/registration");
+            }
+        }).catch(error => toast.error("Logout failed: " + error?.message || "Unknown error"));
+    }
+
     return (
         <SidebarProvider_>
             <Sidebar collapsible="icon" className="p-4  bg-indigo-100 dark:bg-slate-950">
@@ -17,7 +33,7 @@ export function SidebarProvider({ children }: { children: React.ReactNode }) {
                     <h1 className="font-bold text-ellipsis overflow-hidden whitespace-nowrap">Talent Technical Evaluation</h1>
                 </SidebarHeader>
                 <SidebarContent>
-                    {LINKS.map(({title,to,icon: Icon}, i) => (
+                    {LINKS.filter(link => !link.role || link.role === myUser?.role).map(({title,to,icon: Icon}, i) => (
                         <Link
                             key={i}
                             to={to}
@@ -30,26 +46,37 @@ export function SidebarProvider({ children }: { children: React.ReactNode }) {
                     ))}
                 </SidebarContent>
                 <SidebarFooter>
-                    <div className="group-data-[collapsible=icon]:-mx-4 flex gap-2">
-                        <Avatar.Avatar className="shrink-0">
-                            <Avatar.AvatarImage
-                                src="https://github.com/ashamethedestroyer.png"
-                                alt="@ashamethedestroyer"
-                                className="size-10 rounded-full group-data-[collapsible=icon]:size-8"
-                            />
-                            <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">
-                                A
-                            </Avatar.AvatarFallback>
-                        </Avatar.Avatar>
-                        <div className="overflow-hidden group-data-[collapsible=icon]:hidden">
-                            <p className="font-bold whitespace-nowrap text-ellipsis overflow-hidden">
-                                Hashem Wannous
-                            </p>
-                            <p className="whitespace-nowrap text-ellipsis overflow-hidden">
-                                @ashamethedestroyer
-                            </p>
+                    {myUser && (
+                        <div className="group-data-[collapsible=icon]:-mx-4 flex gap-2">
+                            <Popover>
+                                <PopoverTrigger>
+                                    <Avatar.Avatar className="shrink-0 cursor-pointer" tabIndex={0}>
+                                        {/* <Avatar.AvatarImage
+                                            src="https://github.com/ashamethedestroyer.png"
+                                            alt="@ashamethedestroyer"
+                                            className="size-10 rounded-full group-data-[collapsible=icon]:size-8"
+                                        /> */}
+                                        <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">
+                                            {myUser ? `${myUser.first_name[0]}${myUser.last_name[0]}` : "U"}
+                                        </Avatar.AvatarFallback>
+                                    </Avatar.Avatar>
+                                </PopoverTrigger>
+                                <PopoverContent className="w-min p-0">
+                                    <Button variant="ghost" className="w-full text-left" onClick={handleLogout}>
+                                        Logout
+                                    </Button>
+                                </PopoverContent>
+                            </Popover>
+                            <div className="overflow-hidden group-data-[collapsible=icon]:hidden">
+                                <p className="font-bold whitespace-nowrap text-ellipsis overflow-hidden text-start">
+                                    {myUser.first_name} {myUser.last_name}
+                                </p>
+                                <p className="whitespace-nowrap text-ellipsis overflow-hidden">
+                                    {myUser.email}
+                                </p>
+                            </div>
                         </div>
-                    </div>
+                    )}
                 </SidebarFooter>
             </Sidebar>
             <SidebarInset className="flex flex-col h-screen">

frontend/app/components/ui/popover.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "~/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}

frontend/app/root.tsx

@@ -21,6 +21,10 @@ export const queryClient = new QueryClient();
 export function Layout({ children }: { children: React.ReactNode }) {
     const { pathname } = useLocation();
 
+    if (!pathname.startsWith("/registration") && typeof window !== "undefined" && localStorage.getItem("token") === null) {
+        window.location.replace("/registration");
+    }
+
     return (
         <html lang="en">
             <head>

frontend/app/routes/dashboard.tsx

@@ -1,6 +1,7 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import type { Route } from "./+types/dashboard";
 import { useGetJobs } from "~/services/useGetJobs";
+import { useGetMyUser } from "~/services/useGetMyUser";
 import OverviewCharts from "~/components/overview-charts";
 
 export function meta({}: Route.MetaArgs) {
@@ -17,6 +18,8 @@ export default function Dashboard() {
     const { data, isLoading, isError } = useGetJobs();
     const jobs = data?.data ?? [];
 
+    const { data: myUser, isLoading: isMyUserLoading } = useGetMyUser();
+
     const totals = useMemo(() => {
         const totalJobs = jobs.length;
         const totalApplicants = jobs.reduce((s, j) => s + (j.applicants_count ?? 0), 0);
@@ -24,6 +27,15 @@ export default function Dashboard() {
         return { totalJobs, totalApplicants, activeJobs };
     }, [jobs]);
 
+
+    useEffect(() => {
+        if (myUser && myUser.role != "hr") {
+            if (typeof window !== "undefined") {
+                window.location.replace("/");
+            }
+        }
+    }, [myUser]);
+
     return (
         <div className="p-6 space-y-6">
             <header className="flex items-center justify-between">

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

@@ -11,6 +11,7 @@ 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 [
@@ -28,8 +29,18 @@ export default function AssessmentDetailRoute() {
     const [answers, setAnswers] = useState({} as Record<string, any>);
 
     const { mutateAsync: submitAnswers, isPending: isSubmittingLoading } = usePostAssessmentApplication();
+    const { data: myUser, isLoading: isMyUserLoading, isError: isMyUserError } = useGetMyUser();
 
-    if (isLoading) {
+    useEffect(() => {
+        if (assessment == null) { return }
+
+        setAnswers(assessment.questions.reduce((accumulator, question) => {
+            accumulator[question.id] = question.type === "choose_many" ? [] : "";
+            return accumulator;
+        }, {} as Record<string, any>));
+    }, [assessment]);
+
+    if (isLoading || isMyUserLoading) {
         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">
@@ -40,7 +51,7 @@ export default function AssessmentDetailRoute() {
         );
     }
 
-    if (isError) {
+    if (isError || isMyUserError) {
         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">
@@ -56,22 +67,13 @@ export default function AssessmentDetailRoute() {
         );
     }
 
-    useEffect(() => {
-        if (assessment == null) { return }
-
-        setAnswers(assessment.questions.reduce((accumulator, question) => {
-            accumulator[question.id] = question.type === "choose_many" ? [] : "";
-            return accumulator;
-        }, {} as Record<string, any>));
-    }, [assessment]);
-
     const totalWeights = assessment.questions.reduce((weights, question) => weights + question.weight, 0);
 
     function handleSubmit() {
         submitAnswers({
             job_id: jid || "",
             assessment_id: id || "",
-            user_id: "",
+            user_id: myUser!.id,
             answers: Object.entries(answers).map(([question_id, answer]) => ({
                 question_id,
                 [typeof answer == "string" ? "text" : "options"]: typeof answer == "string" ? answer : Array.isArray(answer) ? answer : [answer],
@@ -141,13 +143,15 @@ export default function AssessmentDetailRoute() {
                 </div>
             </section>
             <footer className="mx-auto py-4">
-                <Button
-                    disabled={isSubmittingLoading}
-                    className="bg-indigo-600 text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 disabled:opacity-50"
-                    onClick={handleSubmit}
-                >
-                    Submit Answers
-                </Button>
+                {myUser.role === "applicant" && (
+                    <Button
+                        disabled={isSubmittingLoading}
+                        className="bg-indigo-600 text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 disabled:opacity-50"
+                        onClick={handleSubmit}
+                    >
+                        Submit Answers
+                    </Button>
+                )}
             </footer>
         </main>
     );

frontend/app/routes/registration.tsx

@@ -1,14 +1,154 @@
 import type { Route } from "./+types/registration";
+import React, { useState } from "react";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+import { HTTPManager } from "~/managers/HTTPManager";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "~/components/ui/combobox";
 
 export function meta({}: Route.MetaArgs) {
-    return [
-        { title: "Registration" },
-        {
-            name: "description",
-            content: "Login to access your account or create a new one.",
-        },
-    ];
+  return [
+    { title: "Registration" },
+    {
+      name: "description",
+      content: "Login to access your account or create a new one.",
+    },
+  ];
 }
 
 export default function Registration() {
+  const [mode, setMode] = useState<"login" | "signup">("login");
+  const [loading, setLoading] = useState(false);
+  const [form, setForm] = useState({
+    first_name: "",
+    last_name: "",
+    email: "",
+    role: "hr",
+    password: "",
+  });
+
+  const navigate = useNavigate();
+
+  function update<K extends keyof typeof form>(k: K, v: typeof form[K]) {
+    setForm((s) => ({ ...s, [k]: v }));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      if (mode === "login") {
+        const resp = await HTTPManager.post("/users/registration/login", {
+          email: form.email,
+          password: form.password,
+        });
+        const token = resp?.data?.token;
+        if (token) {
+          localStorage.setItem("token", token);
+          toast.success("Logged in");
+          navigate("/dashboard");
+        } else {
+          toast.error("Login succeeded but no token returned");
+        }
+      } else {
+        const payload = {
+          first_name: form.first_name,
+          last_name: form.last_name,
+          email: form.email,
+          role: form.role,
+          password: form.password,
+        };
+        const resp = await HTTPManager.post("/users/registration/signup", payload);
+        const token = resp?.data?.token;
+        if (token) {
+          localStorage.setItem("token", token);
+          toast.success("Account created");
+          navigate("/dashboard");
+        } else {
+          toast.error("Signup succeeded but no token returned");
+        }
+      }
+    } catch (err: any) {
+      const message =
+        err?.response?.data?.detail || err?.message || "Request failed";
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="max-w-xl mx-auto p-6">
+      <h1 className="text-2xl font-semibold mb-4">Welcome</h1>
+
+      <div className="flex gap-2 mb-6">
+        <Button variant={mode === "login" ? "default" : "outline"} onClick={() => setMode("login")}>Login</Button>
+        <Button variant={mode === "signup" ? "default" : "outline"} onClick={() => setMode("signup")}>Sign up</Button>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4 bg-white dark:bg-gray-800 p-6 rounded shadow">
+        {mode === "signup" && (
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-sm text-gray-700 dark:text-gray-300">First name</label>
+              <Input value={form.first_name} onChange={(e) => update("first_name", e.target.value)} />
+            </div>
+            <div>
+              <label className="text-sm text-gray-700 dark:text-gray-300">Last name</label>
+              <Input value={form.last_name} onChange={(e) => update("last_name", e.target.value)} />
+            </div>
+          </div>
+        )}
+
+        <div>
+          <label className="text-sm text-gray-700 dark:text-gray-300">Email</label>
+          <Input type="email" value={form.email} onChange={(e) => update("email", e.target.value)} />
+        </div>
+
+        <div>
+          <label className="text-sm text-gray-700 dark:text-gray-300">Password</label>
+          <Input type="password" value={form.password} onChange={(e) => update("password", e.target.value)} />
+        </div>
+
+        {mode === "signup" && (
+          <div>
+            <label className="text-sm text-gray-700 dark:text-gray-300">Role</label>
+            <Combobox items={["hr", "applicant"]} value={form.role} onValueChange={(value) => setForm((s) => ({ ...s, role: value as "hr" | "applicant" }))}>
+                <ComboboxInput placeholder="Choose value" />
+                <ComboboxContent>
+                    <ComboboxEmpty>No items found.</ComboboxEmpty>
+                    <ComboboxList>
+                        {(item) => (
+                            <ComboboxItem key={item} value={item}>
+                                {item}
+                            </ComboboxItem>
+                        )}
+                    </ComboboxList>
+                </ComboboxContent>
+            </Combobox>
+            <select
+              value={form.role}
+              onChange={(e) => update("role", e.target.value as "hr" | "applicant")}
+              className="mt-1 block w-full rounded-md border px-3 py-2"
+            >
+              <option value="hr">HR</option>
+              <option value="applicant">Candidate</option>
+            </select>
+          </div>
+        )}
+
+        <div className="flex items-center justify-between gap-4">
+          <Button variant="ghost" type="button" onClick={() => {
+            setForm({ first_name: "", last_name: "", email: "", role: "hr", password: "" });
+          }}>
+            Clear
+          </Button>
+          <Button type="submit" disabled={loading}>
+            {loading ? "Working…" : mode === "login" ? "Login" : "Create account"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
 }

frontend/app/services/useGetMyUser.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+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",
+}
+
+export const useGetMyUser = () => useQuery({
+    queryKey: [GET_MY_USER_KEY],
+    queryFn: async () => HTTPManager.get<User>("/users/me").then(response => response.data),
+})