update login and redirect

src/app/api/agentic/create_weight/route.ts

@@ -1,7 +1,9 @@
-import { NextRequest, NextResponse } from "next/server"
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
-  const token = request.headers.get("Authorization")
+  const cookieStore = await cookies();
+  const token = cookieStore.get('auth_token')?.value;
   const { searchParams } = new URL(request.url)
   const criteria_id = searchParams.get("criteria_id")
 

src/app/api/auth/login/route.ts

@@ -1,97 +1,83 @@
-/**
- * Login API Route
- * POST /api/auth/login
- * 
- * Accepts credentials, exchanges for token with backend,
- * stores token in HTTP-only cookie, returns user data
- */
-
-import { NextRequest, NextResponse } from "next/server";
-import { cookies } from "next/headers";
-
-const BACKEND_URL = process.env.NEXT_PUBLIC_API_URL || "https://byteriot-candidateexplorer.hf.space/CandidateExplorer";
+// app/api/auth/login/route.ts
+import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
     const { username, password } = body;
 
+    console.log('🟢 [API] Login attempt for:', username);
+
     if (!username || !password) {
       return NextResponse.json(
-        { message: "Username and password are required" },
+        { message: 'Username and password are required' },
         { status: 400 }
       );
     }
 
-    // 1. Call backend /admin/login endpoint
-    const loginResponse = await fetch(`${BACKEND_URL}/admin/login`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-      },
-      body: new URLSearchParams({
-        username,
-        password,
-      }).toString(),
-    });
+    const formdata = new FormData()
+    formdata.append("username", username)
+    formdata.append("password", password)
+
+    // Call backend
+    const loginResponse = await fetch(
+      'https://byteriot-candidateexplorer.hf.space/CandidateExplorer/admin/login',
+      {
+        method: 'POST',
+        body: formdata,
+      }
+    );
 
     if (!loginResponse.ok) {
-      const error = await loginResponse.text();
-      console.error("[Login] Backend login failed:", error);
+      console.log('🟢 [API] Backend rejected login');
       return NextResponse.json(
-        { message: "Invalid credentials" },
+        { message: 'Invalid credentials' },
         { status: 401 }
       );
     }
 
-    const loginData = await loginResponse.json();
-    const accessToken = loginData.access_token;
+    const { access_token } = await loginResponse.json();
+    console.log('🟢 [API] Got token from backend');
 
-    if (!accessToken) {
-      console.error("[Login] No access_token in response");
-      return NextResponse.json(
-        { message: "Invalid login response from backend" },
-        { status: 500 }
-      );
-    }
-
-    // 2. Fetch user data from backend /admin/me
-    const meResponse = await fetch(`${BACKEND_URL}/admin/me`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    });
+    // Get user data
+    const userResponse = await fetch(
+      'https://byteriot-candidateexplorer.hf.space/CandidateExplorer/admin/me',
+      {
+        headers: { Authorization: `Bearer ${access_token}` },
+      }
+    );
 
-    if (!meResponse.ok) {
-      console.error("[Login] Failed to fetch user data");
+    if (!userResponse.ok) {
+      console.log('🟢 [API] Failed to get user data');
       return NextResponse.json(
-        { message: "Failed to fetch user data" },
+        { message: 'Failed to get user data' },
         { status: 500 }
       );
     }
 
-    const userData = await meResponse.json();
+    const userData = await userResponse.json();
+    console.log('🟢 [API] Got user data:', userData);
 
-    // 3. Set token in HTTP-only cookie
+    // Set cookie using Next.js cookies API (no 'cookie' package needed!)
     const cookieStore = await cookies();
-    cookieStore.set("auth_token", accessToken, {
+    cookieStore.set('auth_token', access_token, {
       httpOnly: true,
-      secure: process.env.NODE_ENV === "production",
-      sameSite: "lax",
-      path: "/",
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/',
       maxAge: 7 * 24 * 60 * 60, // 7 days
     });
 
-    // 4. Return user data and access token to client
-    // NOTE: access_token is returned so caller may (optionally) persist it.
-    const payload = { ...userData, access_token: accessToken };
-    return NextResponse.json(payload, { status: 200 });
+    console.log('🟢 [API] Cookie set successfully');
+
+    return NextResponse.json(userData, { status: 200 });
+
   } catch (error) {
-    console.error("[Login] Error:", error);
+    console.error('🟢 [API] Login error:', error);
     return NextResponse.json(
-      { message: "Login failed" },
+      { message: 'Login failed' },
       { status: 500 }
     );
   }
-}
+}

src/app/api/auth/logout/route.ts

@@ -1,28 +1,21 @@
-/**
- * Logout API Route
- * POST /api/auth/logout
- * 
- * Clears the HTTP-only auth token cookie
- */
+// app/api/auth/logout/route.ts
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
 
-import { NextRequest, NextResponse } from "next/server";
-import { cookies } from "next/headers";
-
-export async function POST(request: NextRequest) {
+export async function POST() {
   try {
     const cookieStore = await cookies();
-    cookieStore.delete("auth_token");
-    localStorage.removeItem("token")
+    cookieStore.delete('auth_token');
 
     return NextResponse.json(
-      { message: "Logged out successfully" },
+      { message: 'Logged out successfully' },
       { status: 200 }
     );
   } catch (error) {
-    console.error("[Logout] Error:", error);
+    console.error('Logout error:', error);
     return NextResponse.json(
-      { message: "Logout failed" },
+      { message: 'Logout failed' },
       { status: 500 }
     );
   }
-}
+}

src/app/api/auth/me/route.ts

@@ -1,55 +1,40 @@
-/**
- * User Info API Route
- * GET /api/auth/me
- * 
- * Fetches user data from backend /admin/me endpoint
- * Uses token from HTTP-only cookie
- */
+// app/api/auth/me/route.ts
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
 
-import { NextRequest, NextResponse } from "next/server";
-import { cookies } from "next/headers";
-
-const BACKEND_URL = process.env.NEXT_PUBLIC_API_URL || "https://byteriot-candidateexplorer.hf.space/CandidateExplorer";
-
-export async function GET(request: NextRequest) {
+export async function GET() {
   try {
     const cookieStore = await cookies();
-    const token = cookieStore.get("auth_token")?.value;
+    const token = cookieStore.get('auth_token')?.value;
 
     if (!token) {
       return NextResponse.json(
-        { message: "Unauthorized" },
+        { message: 'Not authenticated' },
         { status: 401 }
       );
     }
 
-    // Call backend /admin/me endpoint
-    const response = await fetch(`${BACKEND_URL}/admin/me`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
+    const response = await fetch(
+      'https://byteriot-candidateexplorer.hf.space/CandidateExplorer/admin/me',
+      {
+        headers: { Authorization: `Bearer ${token}` },
+      }
+    );
 
     if (!response.ok) {
-      if (response.status === 401) {
-        return NextResponse.json(
-          { message: "Unauthorized" },
-          { status: 401 }
-        );
-      }
       return NextResponse.json(
-        { message: "Failed to fetch user data" },
-        { status: response.status }
+        { message: 'Invalid token' },
+        { status: 401 }
       );
     }
 
     const userData = await response.json();
     return NextResponse.json(userData, { status: 200 });
+
   } catch (error) {
-    console.error("[Auth/Me] Error:", error);
+    console.error('Get user error:', error);
     return NextResponse.json(
-      { message: "Failed to fetch user data" },
+      { message: 'Failed to get user' },
       { status: 500 }
     );
   }

src/app/api/file/score_card/route.ts

@@ -0,0 +1,41 @@
+// app/api/auth/me/route.ts
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  try {
+    const cookieStore = await cookies();
+    const token = cookieStore.get('auth_token')?.value;
+
+    if (!token) {
+      return NextResponse.json(
+        { message: 'Not authenticated' },
+        { status: 401 }
+      );
+    }
+
+    const response = await fetch(
+      'https://byteriot-candidateexplorer.hf.space/CandidateExplorer/file/score_card',
+      {
+        headers: { Authorization: `Bearer ${token}` },
+      }
+    );
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { message: 'Invalid token' },
+        { status: 401 }
+      );
+    }
+
+    const scoreCardData = await response.json();
+    return NextResponse.json(scoreCardData, { status: 200 });
+
+  } catch (error) {
+    console.error('Get score card error:', error);
+    return NextResponse.json(
+      { message: 'Failed to get score card' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/me/route.ts

@@ -1,22 +0,0 @@
-import { NextRequest, NextResponse } from "next/server"
-
-export async function GET(request: NextRequest) {
-  const token = request.headers.get("Authorization")
-
-  if (!token) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
-  }
-
-  const res = await fetch("https://byteriot-candidateexplorer.hf.space/CandidateExplorer/admin/me", {
-    headers: {
-      Authorization: token,
-    },
-  })
-
-  if (!res.ok) {
-    return NextResponse.json({ error: "Failed to fetch user" }, { status: res.status })
-  }
-
-  const data = await res.json()
-  return NextResponse.json(data)
-}

src/app/login/page.tsx

@@ -1,40 +1,21 @@
-/**
- * Login Page
- * Route: /login
- * Publicly accessible page for user authentication
- */
-
-import { LoginForm } from "@/components/LoginForm";
-
-export const metadata = {
-  title: "Login - Candidate Explorer",
-  description: "Sign in to your account",
-};
+// pages/login.tsx
+import { LoginForm } from '@/components/LoginForm';
 
 export default function LoginPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <div className="w-full max-w-md space-y-8">
-        {/* Header */}
         <div className="text-center">
-          <h2 className="text-3xl font-extrabold text-gray-900">
-            Candidate Explorer
-          </h2>
+          <h2 className="text-3xl font-bold">Candidate Explorer</h2>
           <p className="mt-2 text-sm text-gray-600">
-            Sign in to access the recruitment dashboard
+            Sign in to your account
           </p>
         </div>
 
-        {/* Login Form */}
         <div className="bg-white py-8 px-6 shadow rounded-lg">
           <LoginForm />
         </div>
-
-        {/* Footer */}
-        <p className="text-center text-xs text-gray-500">
-          byteriot - Candidate Explorer &copy; {new Date().getFullYear()} |{" "}
-        </p>
       </div>
     </div>
   );
-}
+}

src/app/providers.tsx

@@ -5,9 +5,8 @@
  * Wraps the entire app with necessary providers
  */
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React from "react";
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { AuthProvider } from "@/lib/auth-context";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -21,7 +20,7 @@ const queryClient = new QueryClient({
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <QueryClientProvider client={queryClient}>
-      <AuthProvider>{children}</AuthProvider>
+        {children}
     </QueryClientProvider>
   );
 }

src/app/recruitment/layout.tsx

@@ -1,16 +1,69 @@
-'use client';
-
+// app/recruitment/layout.tsx
 import { Header } from '@/components/dashboard/header';
 import { HeaderMenu } from '@/components/dashboard/header-menu';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+async function getUser() {
+  console.log('🟡 [Layout] Checking authentication...');
+  
+  const cookieStore = await cookies();
+  const token = cookieStore.get('auth_token')?.value;
+
+  console.log('🟡 [Layout] Token exists:', token ? 'YES' : 'NO');
+  console.log('🟡 [Layout] Token value:', token ? token.substring(0, 20) + '...' : 'none');
+
+  if (!token) {
+    console.log('🟡 [Layout] No token found, returning null');
+    return null;
+  }
+
+  try {
+    console.log('🟡 [Layout] Verifying token with backend...');
+    
+    const response = await fetch(
+      'https://byteriot-candidateexplorer.hf.space/CandidateExplorer/admin/me',
+      {
+        headers: { Authorization: `Bearer ${token}` },
+        cache: 'no-store',
+      }
+    );
+
+    console.log('🟡 [Layout] Backend response status:', response.status);
+
+    if (!response.ok) {
+      console.log('🟡 [Layout] Token invalid, backend returned:', response.status);
+      return null;
+    }
 
-export default function RootLayout({
+    const userData = await response.json();
+    console.log('🟡 [Layout] User authenticated:', userData);
+    return userData;
+    
+  } catch (error) {
+    console.error('🟡 [Layout] Error fetching user:', error);
+    return null;
+  }
+}
+
+export default async function RecruitmentLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  console.log('🟡 [Layout] Layout rendering...');
+  
+  const user = await getUser();
+
+  if (!user) {
+    console.log('🟡 [Layout] No user, redirecting to login');
+    redirect('/login');
+  }
+
+  console.log('🟡 [Layout] User found, rendering layout');
+
   return (
     <div className="flex h-screen bg-background">
-      {/* <Sidebar /> */}
       <div className="flex-1 flex flex-col overflow-hidden">
         <Header />
         <HeaderMenu />
@@ -22,4 +75,4 @@ export default function RootLayout({
       </div>
     </div>
   );
-}
+}

src/components/LoginForm.tsx

@@ -1,145 +1,104 @@
-"use client";
+// components/LoginForm.tsx
+'use client';
 
-/**
- * Login Form Component
- * Handles user authentication with username/password
- * Uses React Hook Form + Zod validation + Radix UI
- */
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
-import React, { useState } from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Spinner } from "@/components/ui/spinner";
-import { useAuth } from "@/lib/auth-context";
-import { AuthError } from "@/types/auth";
-
-// Validation schema
-const loginSchema = z.object({
-  username: z
-    .string()
-    .min(1, "Username is required")
-    .min(3, "Username must be at least 3 characters"),
-  password: z
-    .string()
-    .min(1, "Password is required")
-    .min(6, "Password must be at least 6 characters"),
-});
+export function LoginForm() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
-type LoginFormData = z.infer<typeof loginSchema>;
+  const router = useRouter()
 
-export function LoginForm() {
-  const [apiError, setApiError] = useState<string | null>(null);
-  const { login, isLoading } = useAuth();
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
 
-  const form = useForm<LoginFormData>({
-    resolver: zodResolver(loginSchema),
-    defaultValues: {
-      username: "",
-      password: "",
-    },
-  });
+    console.log('🔵 [Form] Submitting login...');
 
-  const onSubmit = async (data: LoginFormData) => {
-    setApiError(null);
     try {
-      await login(data.username, data.password);
-    } catch (error) {
-      const message =
-        error instanceof AuthError ? error.message : "Login failed. Please try again.";
-      setApiError(message);
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
+      });
+
+      console.log('🔵 [Form] Response status:', response.status);
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        console.log('🔵 [Form] Login failed:', data.message);
+        setError(data.message || 'Login failed');
+        setIsLoading(false);
+        return;
+      }
+
+      console.log('🔵 [Form] Login successful!');
+      console.log('🔵 [Form] User data:', data);
+
+      // Use window.location for a full page reload to ensure cookie is loaded
+      console.log('🔵 [Form] Redirecting to /recruitment...');
+      // window.location.href = '/recruitment';
+      router.push("/recruitment")
+      
+    } catch (err) {
+      console.error('🔵 [Form] Error:', err);
+      setError('Something went wrong. Please try again.');
+      setIsLoading(false);
     }
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 w-full max-w-md">
-      {/* API Error Alert */}
-      {apiError && (
-        <Alert variant="destructive">
-          <AlertDescription>{apiError}</AlertDescription>
-        </Alert>
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm">
+          {error}
+        </div>
       )}
 
-      {/* Username Field */}
-      <FormField
-        control={form.control}
-        name="username"
-        render={({ field, fieldState }) => (
-          <FormItem>
-            <FormLabel>Username</FormLabel>
-            <FormControl>
-              <Input
-                {...field}
-                type="text"
-                placeholder="Enter your username"
-                disabled={isLoading}
-                autoComplete="username"
-              />
-            </FormControl>
-            {fieldState.error && (
-              <FormMessage>{fieldState.error.message}</FormMessage>
-            )}
-          </FormItem>
-        )}
-      />
+      <div>
+        <label htmlFor="username" className="block text-sm font-medium text-gray-700">
+          Username
+        </label>
+        <input
+          id="username"
+          type="text"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          required
+          disabled={isLoading}
+          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+        />
+      </div>
 
-      {/* Password Field */}
-      <FormField
-        control={form.control}
-        name="password"
-        render={({ field, fieldState }) => (
-          <FormItem>
-            <FormLabel>Password</FormLabel>
-            <FormControl>
-              <Input
-                {...field}
-                type="password"
-                placeholder="Enter your password"
-                disabled={isLoading}
-                autoComplete="current-password"
-              />
-            </FormControl>
-            {fieldState.error && (
-              <FormMessage>{fieldState.error.message}</FormMessage>
-            )}
-          </FormItem>
-        )}
-      />
+      <div>
+        <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          disabled={isLoading}
+          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+        />
+      </div>
 
-      {/* Submit Button */}
-      <Button
+      <button
         type="submit"
         disabled={isLoading}
-        className="w-full"
-        size="lg"
+        className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
       >
-        {isLoading ? (
-          <div className="flex items-center gap-2">
-            <Spinner className="w-4 h-4" />
-            <span>Signing in...</span>
-          </div>
-        ) : (
-          "Sign In"
-        )}
-      </Button>
-
-      {/* Info Text */}
-      <p className="text-center text-sm text-gray-500">
-        Use your admin credentials to login
-      </p>
-      </form>
-    </Form>
+        {isLoading ? 'Signing in...' : 'Sign in'}
+      </button>
+    </form>
   );
 }

src/components/button.tsx

@@ -24,7 +24,7 @@ export default function Button({
     <button
       onClick={onClick}
       type={type}
-      className={`rounded-[8px] px-4 py-2 ${buttonStyles} mt-4 hover:cursor-pointer ${className} ${
+      className={`rounded-[8px] px-4 py-2 ${buttonStyles} hover:cursor-pointer ${className} ${
         disabled ? "opacity-50 cursor-not-allowed" : ""
       }`}
     >

src/components/dashboard/candidates-table.tsx

@@ -6,7 +6,7 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import { useUser } from "@/composables/useUser"
+import { useAuth } from "@/composables/useAuth"
 import { authFetch } from "@/lib/api"
 import { exportCandidatesToCSV } from "@/lib/export-service"
 import { createAndCalculateScore } from "@/lib/scoring-service"
@@ -894,7 +894,7 @@ export default function CandidateTable() {
   const [debouncedSearch, setDebouncedSearch] = useState("")
   const [currentPage, setCurrentPage] = useState(1)
   const [sortConfig, setSortConfig] = useState<{ key: string | null; direction: "asc" | "desc" }>({ key: null, direction: "asc" })
-  const { user } = useUser()
+  const { user } = useAuth()
 
   const defaultColumns = allColumns.reduce(
     (acc, col) => ({ ...acc, [col.id]: col.visible }),

src/components/dashboard/header.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { useAuth } from "@/lib/auth-context";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { useAuth } from "@/composables/useAuth";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import { LogOut } from "lucide-react";
 
 function getInitials(name: string) {
@@ -15,7 +14,7 @@ function getInitials(name: string) {
 }
 
 export function Header() {
-  const { user, logout, isLoading } = useAuth();
+  const { user, logout, isLoadingUser } = useAuth();
 
   const initials = user ? getInitials(user.full_name || user.username) : "?";
   const displayName = user?.full_name || user?.username || "Loading...";
@@ -32,9 +31,9 @@ export function Header() {
   return (
     <header className="h-16 bg-white border-b border-gray-200 px-8 flex items-center justify-between">
       <div></div>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger asChild>
-          <Button variant="ghost" className="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <div className="flex items-center gap-2 mt-0 cursor-pointer">
             <div className="w-8 h-8 bg-gradient-to-br from-pink-300 to-orange-300 rounded-full flex items-center justify-center text-white text-sm font-semibold">
               {initials}
             </div>
@@ -42,19 +41,19 @@ export function Header() {
               <span className="text-sm">{displayName}</span>
               <span className="text-xs text-gray-500">{displayRole}</span>
             </div>
-          </Button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content align="end" className="bg-white border border-gray-200 rounded-md shadow-lg">
-          <DropdownMenu.Item
-            disabled={isLoading}
+            </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="bg-white border border-gray-200 rounded-md shadow-lg">
+          <DropdownMenuItem
+            disabled={isLoadingUser}
             onClick={handleLogout}
             className="px-4 py-2 text-sm text-red-600 hover:bg-red-50 flex items-center gap-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <LogOut className="w-4 h-4" />
             Logout
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </header>
   );
 }

src/components/dashboard/metrics-row.tsx

@@ -4,8 +4,6 @@ import { MetricsCard } from "@/components/ui/metrics-card";
 import { authFetch } from "@/lib/api";
 import { useQuery } from "@tanstack/react-query";
 
-const BASE_URL = "https://byteriot-candidateexplorer.hf.space/CandidateExplorer"
-
 type ScoreData = {
   data: {
     total_file: number
@@ -25,7 +23,7 @@ const fallbackScore: ScoreData = {
 export function MetricsRow() {
 
   const fetchScore = async (): Promise<ScoreData> => {
-    const res = await authFetch(`${BASE_URL}/file/score_card`)
+    const res = await authFetch(`/api/file/score_card`)
     if (!res.ok) throw new Error("Failed to fetch score")
     return res.json()
   }

src/composables/useAuth.ts

@@ -0,0 +1,61 @@
+// hooks/useAuth.ts
+import { authFetch } from "@/lib/api";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+interface MeResponse {
+  user_id: string;
+  username: string;
+  email: string;
+  full_name: string;
+  role: string;
+  is_active: boolean;
+  tenant_id: string;
+  created_at: string;
+}
+
+export const useAuth = () => {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  // Get current user
+  const {
+    data: user,
+    isLoading: isLoadingUser,
+    error: userError,
+  } = useQuery<MeResponse>({
+    queryKey: ["me"],
+    queryFn: async () => {
+      const res = await authFetch("/api/auth/me");
+      if (!res.ok) throw new Error("Failed to fetch user");
+      return res.json();
+    },
+    staleTime: 1000 * 60 * 5,
+    retry: false,
+  });
+
+  // Logout mutation
+  const logoutMutation = useMutation({
+    mutationFn: async () => {
+      const res = await fetch("/api/auth/logout", {
+        method: "POST",
+      });
+      if (!res.ok) throw new Error("Logout failed");
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.clear();
+      router.push("/login");
+      router.refresh();
+    },
+  });
+
+  return {
+    user,
+    isLoadingUser,
+    userError,
+    logout: logoutMutation.mutate,
+    isLoggingOut: logoutMutation.isPending,
+    isAuthenticated: !!user,
+  };
+};

src/composables/useUser.ts

@@ -1,30 +0,0 @@
-import { authFetch } from "@/lib/api";
-import { useQuery } from "@tanstack/react-query";
-
-interface MeResponse {
-  user_id: string;
-  username: string;
-  email: string;
-  full_name: string;
-  role: string;
-  is_active: boolean;
-  tenant_id: string;
-  created_at: string;
-}
-
-export const useUser = () => {
-  const { data: user } = useQuery<MeResponse>({
-    queryKey: ["me"],
-    queryFn: async () => {
-      const res = await authFetch("/api/me");
-      if (!res.ok) throw new Error("Failed to fetch user");
-      const json = await res.json();
-      return json;
-    },
-    staleTime: 1000 * 60 * 5, // cache 5 minutes
-  });
-
-  return {
-    user,
-  };
-};

src/lib/api.ts

@@ -1,12 +1,26 @@
-export function authFetch(url: string, options?: RequestInit) {
-  const token = localStorage.getItem("token") // or wherever you store it
+function getCookie(name: string) {
+  if (typeof document === "undefined") return null;
+
+  const match = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith(name + "="));
+
+  return match?.split("=")[1] ?? null;
+}
+
+export async function authFetch(
+  url: string,
+  options?: RequestInit
+) {
+  const token = getCookie("auth_token");
 
   return fetch(url, {
     ...options,
+    credentials: "include",
     headers: {
       "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
+      ...(token && { Authorization: `Bearer ${token}` }),
       ...options?.headers,
     },
-  })
+  });
 }

src/lib/auth-context.tsx

@@ -1,150 +0,0 @@
-"use client";
-
-/**
- * Auth Context & Provider
- * Provides user state and auth methods throughout the app
- * Wraps the entire app at root layout
- */
-
-import React, { createContext, useContext, useEffect, useState, useCallback } from "react";
-import { User, AuthContextType, AuthError } from "@/types/auth";
-import { getUser, logout as logoutAuth } from "@/lib/auth";
-import { useQueryClient } from "@tanstack/react-query";
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const queryClient = useQueryClient();
-
-  // Fetch user data on mount
-  useEffect(() => {
-    const initAuth = async () => {
-      try {
-        setIsLoading(true);
-        const userData = await getUser();
-        setUser(userData);
-        setIsAuthenticated(true);
-      } catch (error) {
-        // User not authenticated
-        setUser(null);
-        setIsAuthenticated(false);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    initAuth();
-  }, []);
-
-  // Login function
-  const login = useCallback(
-    async (username: string, password: string) => {
-      setIsLoading(true);
-
-      const formData = new FormData();
-      formData.append('username', username);
-      formData.append('password', password);
-
-      try {
-        const response = await fetch("https://byteriot-candidateexplorer.hf.space/CandidateExplorer/admin/login", {
-          method: "POST",
-          credentials: "include",
-          body: formData,
-        });
-
-        if (!response.ok) {
-          const error = await response.json().catch(() => ({}));
-          throw new AuthError(error.message || "Login failed", "LOGIN_ERROR", response.status);
-        }
-
-        const userData = await response.json();
-        setUser(userData);
-        // preserve this line as requested (access_token is returned by the API route)
-        try {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (localStorage as any).setItem("token", (userData as any).access_token);
-        } catch (e) {
-          // ignore storage errors
-        }
-        setIsAuthenticated(true);
-
-        // Redirect to recruitment page
-        if (typeof window !== "undefined") {
-          window.location.href = "/recruitment";
-        }
-      } catch (error) {
-        setUser(null);
-        setIsAuthenticated(false);
-        throw error instanceof AuthError ? error : new AuthError("Login failed");
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    []
-  );
-
-  // Logout function
-  const logout = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      await logoutAuth();
-      setUser(null);
-      setIsAuthenticated(false);
-      // Clear and invalidate queries to prevent stale data
-      try {
-        queryClient.clear();
-      } catch (e) {
-        // ignore if not available
-      }
-      await queryClient.invalidateQueries();
-      // Redirect to login
-      if (typeof window !== "undefined") {
-        window.location.href = "/login";
-      }
-    } catch (error) {
-      console.error("Logout error:", error);
-      // Still clear local state even if API call fails
-      setUser(null);
-      setIsAuthenticated(false);
-      if (typeof window !== "undefined") {
-        window.location.href = "/login";
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  }, [queryClient]);
-
-  // Refresh user data
-  const refreshUser = useCallback(async () => {
-    try {
-      const userData = await getUser();
-      setUser(userData);
-      setIsAuthenticated(true);
-    } catch (error) {
-      setUser(null);
-      setIsAuthenticated(false);
-    }
-  }, []);
-
-  const value: AuthContextType = {
-    user,
-    isLoading,
-    isAuthenticated,
-    login,
-    logout,
-    refreshUser,
-  };
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-
-export function useAuth(): AuthContextType {
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error("useAuth must be used within AuthProvider");
-  }
-  return context;
-}

src/lib/auth.ts

@@ -1,96 +0,0 @@
-/**
- * Core Authentication Utilities
- * Handles token management via HTTP-only cookies (server-side)
- * Never exposes token to client-side JavaScript
- */
-
-import { User, AuthError } from "@/types/auth";
-
-const API_URL = process.env.NEXT_PUBLIC_API_URL || "https://byteriot-candidateexplorer.hf.space/CandidateExplorer";
-
-/**
- * Call backend /admin/me endpoint to fetch user data
- * Uses cookies for token storage (set by API route)
- */
-export async function getUser(): Promise<User> {
-  try {
-    const response = await fetch("https://byteriot-candidateexplorer.hf.space/CandidateExplorer/admin/me", {
-      method: "GET",
-      credentials: "include", // Include cookies
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        throw new AuthError("Unauthorized", "INVALID_TOKEN", 401);
-      }
-      const error = await response.json();
-      throw new AuthError(error.message || "Failed to fetch user", "FETCH_USER_ERROR", response.status);
-    }
-
-    return await response.json();
-  } catch (error) {
-    if (error instanceof AuthError) throw error;
-    throw new AuthError("Failed to fetch user data", "FETCH_USER_ERROR");
-  }
-}
-
-/**
- * Logout: Clear auth cookie on server via API route
- */
-export async function logout(): Promise<void> {
-  try {
-    const response = await fetch(`${new URL(window?.location?.href || "").origin}/api/auth/logout`, {
-      method: "POST",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-
-    if (!response.ok) {
-      throw new AuthError("Failed to logout", "LOGOUT_ERROR", response.status);
-    }
-  } catch (error) {
-    if (error instanceof AuthError) throw error;
-    throw new AuthError("Logout failed", "LOGOUT_ERROR");
-  }
-}
-
-/**
- * Check if token exists in HTTP-only cookie (server-side only)
- * Note: Cannot directly check cookies from client-side due to httpOnly flag
- * Use AuthContext.isAuthenticated instead
- */
-export function isAuthenticated(token?: string): boolean {
-  return !!token;
-}
-
-/**
- * Generic fetch wrapper for API calls (not auth endpoints)
- * Automatically includes Bearer token from cookie (set by login route)
- */
-export async function authFetch(
-  url: string,
-  options: RequestInit = {}
-): Promise<Response> {
-  const response = await fetch(`${API_URL}${url}`, {
-    ...options,
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-      ...options.headers,
-    },
-  });
-
-  if (!response.ok) {
-    if (response.status === 401) {
-      throw new AuthError("Unauthorized", "INVALID_TOKEN", 401);
-    }
-    throw new AuthError(`API request failed: ${response.statusText}`, "API_ERROR", response.status);
-  }
-
-  return response;
-}

src/lib/rbac.ts

@@ -1,72 +0,0 @@
-/**
- * Role-Based Access Control (RBAC)
- * Check user permissions based on role from authentication context
- */
-
-import { User } from "@/types/auth";
-
-export const ROLES = {
-  ADMIN: "admin",
-  RECRUITER: "recruiter",
-  VIEWER: "viewer",
-} as const;
-
-export type Role = (typeof ROLES)[keyof typeof ROLES];
-
-/**
- * Check if user has a specific role
- * @param user - User object from auth context
- * @param role - Role to check
- * @returns true if user has the role
- */
-export function hasRole(user: User | null, role: Role): boolean {
-  if (!user) return false;
-  return user.role.toLowerCase() === role.toLowerCase();
-}
-
-/**
- * Check if user has any of the provided roles
- * @param user - User object from auth context
- * @param roles - Array of roles to check
- * @returns true if user has any of the roles
- */
-export function hasAnyRole(user: User | null, roles: Role[]): boolean {
-  if (!user) return false;
-  return roles.some((role) => hasRole(user, role));
-}
-
-/**
- * Check if user has all of the provided roles
- * @param user - User object from auth context
- * @param roles - Array of roles to check
- * @returns true if user has all the roles
- */
-export function hasAllRoles(user: User | null, roles: Role[]): boolean {
-  if (!user) return false;
-  return roles.every((role) => hasRole(user, role));
-}
-
-/**
- * Require a specific role - throw error if user doesn't have it
- * Suitable for server-side authorization checks
- * @param user - User object
- * @param role - Required role
- * @throws Error if user doesn't have the role
- */
-export function requireRole(user: User | null, role: Role): void {
-  if (!hasRole(user, role)) {
-    throw new Error(`User does not have required role: ${role}`);
-  }
-}
-
-/**
- * Require any of the provided roles
- * @param user - User object
- * @param roles - Array of acceptable roles
- * @throws Error if user doesn't have any of the roles
- */
-export function requireAnyRole(user: User | null, roles: Role[]): void {
-  if (!hasAnyRole(user, roles)) {
-    throw new Error(`User does not have any of the required roles: ${roles.join(", ")}`);
-  }
-}

src/middleware.ts

@@ -1,68 +1,68 @@
 import { NextRequest, NextResponse } from "next/server"
 
-// Routes that require authentication
-const protectedRoutes = [
-  "/recruitment",
-  "/dashboard",
-]
-
-// API routes that require authentication
-const protectedApiRoutes = [
-  "/api/cv-profile",
-  "/api/cv-profile/options",
+const publicApiRoutes = [
+  "/api/auth/login",
 ]
 
-// Public routes (can be accessed without auth)
-const publicRoutes = [
+const publicPages = [
   "/login",
-  "/api/auth/login",
-  "/api/auth/logout",
 ]
 
 export function middleware(request: NextRequest) {
-  const pathname = request.nextUrl.pathname
+  const { pathname } = request.nextUrl
   const token = request.cookies.get("auth_token")?.value
 
-  // Check if it's an API route
-  const isApiRoute = pathname.startsWith("/api/")
-  const isProtectedApi = protectedApiRoutes.some((route) => pathname.startsWith(route))
-  const isPublicRoute = publicRoutes.some((route) => pathname.startsWith(route))
+  const isApiRoute = pathname.startsWith("/api")
+  const isPublicApi = publicApiRoutes.some(route =>
+    pathname.startsWith(route)
+  )
 
-  // Handle API routes
-  if (isApiRoute) {
-    // Protected API routes require token
-    if (isProtectedApi && !token) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  // -----------------------
+  // 🔹 ROOT HANDLING
+  // -----------------------
+  if (pathname === "/") {
+    if (token) {
+      return NextResponse.redirect(
+        new URL("/recruitment", request.url)
+      )
     }
-    return NextResponse.next()
+    return NextResponse.redirect(
+      new URL("/login", request.url)
+    )
   }
 
-  // Handle public routes
-  if (isPublicRoute) {
-    // If user is logged in and visiting /login, redirect to /recruitment
-    if (pathname === "/login" && token) {
-      return NextResponse.redirect(new URL("/recruitment", request.url))
+  // -----------------------
+  // 🔹 API PROTECTION
+  // -----------------------
+  if (isApiRoute) {
+    if (isPublicApi) return NextResponse.next()
+
+    if (!token) {
+      return NextResponse.json(
+        { error: "Unauthorized" },
+        { status: 401 }
+      )
     }
+
     return NextResponse.next()
   }
 
-  // Handle protected page routes
-  const isProtected = protectedRoutes.some((route) => pathname.startsWith(route))
-  
-  if (isProtected && !token) {
-    // Redirect to login if no token
-    return NextResponse.redirect(new URL("/login", request.url))
+  // -----------------------
+  // 🔹 PAGE PROTECTION
+  // -----------------------
+
+  // Logged in & accessing login
+  if (token && pathname === "/login") {
+    return NextResponse.redirect(
+      new URL("/recruitment", request.url)
+    )
   }
 
-  // Handle root path
-  if (pathname === "/") {
-    if (token) {
-      // If logged in, redirect to recruitment
-      return NextResponse.redirect(new URL("/recruitment", request.url))
-    } else {
-      // If not logged in, redirect to login
-      return NextResponse.redirect(new URL("/login", request.url))
-    }
+  // Not logged in & accessing protected pages
+  if (!token && !publicPages.includes(pathname)) {
+    return NextResponse.redirect(
+      new URL("/login", request.url)
+    )
   }
 
   return NextResponse.next()
@@ -70,14 +70,9 @@ export function middleware(request: NextRequest) {
 
 export const config = {
   matcher: [
-    // API routes
-    "/api/:path*",
-    // Protected pages
-    "/recruitment/:path*",
-    "/dashboard/:path*",
-    // Auth pages
-    "/login",
-    // Root
     "/",
+    "/login",
+    "/recruitment/:path*",
+    "/api/:path*",
   ],
 }