update theme login etc

src/app/api/cv-profile/export/route.ts

@@ -1,147 +1,253 @@
-// FILE: app/api/cv-profile/export/route.ts
-// New dedicated export endpoint
-
 import { PrismaClient } from "@/generated/prisma"
 import { prisma } from "@/lib/prisma"
 import { NextRequest, NextResponse } from "next/server"
 
-const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
-
-/**
- * GET /api/cv-profile/export
- * 
- * Exports ALL matching candidates as CSV file
- * No pagination - returns complete dataset
- * 
- * Query params: Same as /api/cv-profile
- * - search
- * - criteria_id
- * - domicile, yoe
- * - univ_edu_1/2/3, major_edu_1/2/3, gpa_1/2/3
- * - softskills, hardskills, certifications, business_domain
- * - sortBy, sortOrder
- */
+const UUID_REGEX =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+
+// ---------------------------------------------
+// SAFE ARRAY SEARCH (same as main endpoint)
+// ---------------------------------------------
+async function getMatchingArrayValues(
+  column: string,
+  search: string,
+  client: PrismaClient
+): Promise<string[]> {
+  const allowedColumns = [
+    "hardskills",
+    "softskills",
+    "certifications",
+    "business_domain",
+  ]
+
+  if (!allowedColumns.includes(column)) {
+    throw new Error(`Invalid column: ${column}`)
+  }
+
+  const result = await client.$queryRawUnsafe(
+    `SELECT DISTINCT unnest("${column}") as val
+     FROM cv_profile
+     WHERE EXISTS (
+       SELECT 1 FROM unnest("${column}") AS elem
+       WHERE elem ILIKE '%' || $1 || '%'
+     )`,
+    search
+  ) as { val: string }[]
+
+  return result
+    .map((r) => r.val)
+    .filter((v) => v.toLowerCase().includes(search.toLowerCase()))
+}
+
+// ---------------------------------------------
+// Resolve user_id → profile_ids
+// ---------------------------------------------
+// In getProfileIdsByUserId, return null if no profiles found
+// so it doesn't filter to empty set
+async function getProfileIdsByUserId(user_id: string): Promise<string[] | null> {
+  const rows = await prisma.$queryRaw<{ profile_id: string }[]>`
+    SELECT p.profile_id
+    FROM cv_profile p
+    INNER JOIN cv_file f ON f.file_id = p.file_id
+    WHERE f.user_id = ${user_id}::uuid
+  `
+  if (rows.length === 0) return null // <-- treat as "no filter" instead of "match nothing"
+  return rows.map((r) => r.profile_id)
+}
+
+// ---------------------------------------------
+// EXPORT ENDPOINT
+// ---------------------------------------------
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url)
 
-  // --- VALIDATION ---
+  // -------------------------
+  // VALIDATION
+  // -------------------------
   const criteria_id = searchParams.get("criteria_id")
   if (criteria_id && !UUID_REGEX.test(criteria_id)) {
-    return NextResponse.json({ error: "Invalid criteria_id format" }, { status: 400 })
+    return NextResponse.json(
+      { error: "Invalid criteria_id format" },
+      { status: 400 }
+    )
   }
 
-  // --- FILTERS (same as main endpoint) ---
+  const user_id = searchParams.get("user_id")
+  if (user_id && !UUID_REGEX.test(user_id)) {
+    return NextResponse.json(
+      { error: "Invalid user_id format" },
+      { status: 400 }
+    )
+  }
+
+  // -------------------------
+  // SEARCH
+  // -------------------------
   const search = searchParams.get("search")
+
+  // -------------------------
+  // FILTERS
+  // -------------------------
   const domicile = searchParams.get("domicile")
   const yoe = searchParams.get("yoe")
+
   const softskills = searchParams.getAll("softskills")
   const hardskills = searchParams.getAll("hardskills")
   const certifications = searchParams.getAll("certifications")
   const business_domain = searchParams.getAll("business_domain")
 
-  const univ_edu_1 = searchParams.get("univ_edu_1")
-  const univ_edu_2 = searchParams.get("univ_edu_2")
-  const univ_edu_3 = searchParams.get("univ_edu_3")
-  const major_edu_1 = searchParams.get("major_edu_1")
-  const major_edu_2 = searchParams.get("major_edu_2")
-  const major_edu_3 = searchParams.get("major_edu_3")
+  const univ_edu_1 = searchParams.getAll("univ_edu_1")
+  const univ_edu_2 = searchParams.getAll("univ_edu_2")
+  const univ_edu_3 = searchParams.getAll("univ_edu_3")
+
+  const major_edu_1 = searchParams.getAll("major_edu_1")
+  const major_edu_2 = searchParams.getAll("major_edu_2")
+  const major_edu_3 = searchParams.getAll("major_edu_3")
+
   const gpa_1 = searchParams.get("gpa_1")
   const gpa_2 = searchParams.get("gpa_2")
   const gpa_3 = searchParams.get("gpa_3")
 
-  // --- SORT ---
+  // -------------------------
+  // SORT
+  // -------------------------
   const sortBy = searchParams.get("sortBy") ?? "created_at"
-  const sortOrder = searchParams.get("sortOrder") === "asc" ? "asc" : "desc"
+  const sortOrder =
+    searchParams.get("sortOrder") === "asc" ? "asc" : "desc"
 
   const allowedSortFields = [
-    "fullname", "domicile", "yoe", "gpa_edu_1", "gpa_edu_2", "gpa_edu_3",
-    "univ_edu_1", "univ_edu_2", "univ_edu_3", "major_edu_1", "major_edu_2",
-    "major_edu_3", "created_at", "score",
+    "fullname",
+    "domicile",
+    "yoe",
+    "gpa_edu_1",
+    "gpa_edu_2",
+    "gpa_edu_3",
+    "univ_edu_1",
+    "univ_edu_2",
+    "univ_edu_3",
+    "major_edu_1",
+    "major_edu_2",
+    "major_edu_3",
+    "created_at",
+    "score",
   ]
 
   const isScoreSort = sortBy === "score" && !!criteria_id
-  const orderBy = !isScoreSort && allowedSortFields.includes(sortBy)
-    ? { [sortBy]: sortOrder }
-    : { created_at: "desc" as const }
-
-  // --- ARRAY SEARCH ---
-  async function getMatchingArrayValues(
-    column: string,
-    searchTerm: string,
-    client: PrismaClient
-  ): Promise<string[]> {
-    const result = await client.$queryRawUnsafe(
-      `SELECT DISTINCT unnest(${column}) as val
-      FROM cv_profile
-      WHERE EXISTS (
-        SELECT 1 FROM unnest(${column}) AS elem
-        WHERE elem ILIKE '%' || $1 || '%'
-      )`,
-      searchTerm
-    ) as { val: string }[]
-
-    return result
-      .map((r) => r.val)
-      .filter((v) => v.toLowerCase().includes(searchTerm.toLowerCase()))
-  }
 
-  const [matchingHardskills, matchingSoftskills, matchingCertifications, matchingBusinessDomain] =
-    search
-      ? await Promise.all([
-        getMatchingArrayValues("hardskills", search, prisma),
-        getMatchingArrayValues("softskills", search, prisma),
-        getMatchingArrayValues("certifications", search, prisma),
-        getMatchingArrayValues("business_domain", search, prisma),
-      ])
-      : [[], [], [], []]
-
-  // --- BUILD WHERE ---
-  const where: any = {
-    ...(search ? {
-      OR: [
-        { fullname: { contains: search, mode: "insensitive" } },
-        { domicile: { contains: search, mode: "insensitive" } },
-        { univ_edu_1: { contains: search, mode: "insensitive" } },
-        { univ_edu_2: { contains: search, mode: "insensitive" } },
-        { univ_edu_3: { contains: search, mode: "insensitive" } },
-        { major_edu_1: { contains: search, mode: "insensitive" } },
-        { major_edu_2: { contains: search, mode: "insensitive" } },
-        { major_edu_3: { contains: search, mode: "insensitive" } },
-        { filename: { contains: search, mode: "insensitive" } },
-        ...(matchingHardskills.length > 0 ? [{ hardskills: { hasSome: matchingHardskills } }] : []),
-        ...(matchingSoftskills.length > 0 ? [{ softskills: { hasSome: matchingSoftskills } }] : []),
-        ...(matchingCertifications.length > 0 ? [{ certifications: { hasSome: matchingCertifications } }] : []),
-        ...(matchingBusinessDomain.length > 0 ? [{ business_domain: { hasSome: matchingBusinessDomain } }] : []),
-        ...(Number.isNaN(Number.parseFloat(search)) ? [] : [
-          { gpa_edu_1: { equals: Number.parseFloat(search) } },
-          { gpa_edu_2: { equals: Number.parseFloat(search) } },
-          { gpa_edu_3: { equals: Number.parseFloat(search) } },
-        ]),
-        ...(Number.isNaN(Number.parseInt(search)) ? [] : [
-          { yoe: { equals: Number.parseInt(search) } },
-        ]),
-      ],
-    } : {}),
-
-    ...(domicile && { domicile }),
-    ...(yoe && { yoe: { gte: Number.parseInt(yoe) } }),
-    ...(softskills.length > 0 && { softskills: { hasSome: softskills } }),
-    ...(hardskills.length > 0 && { hardskills: { hasSome: hardskills } }),
-    ...(certifications.length > 0 && { certifications: { hasSome: certifications } }),
-    ...(business_domain.length > 0 && { business_domain: { hasSome: business_domain } }),
-    ...(univ_edu_1 && { univ_edu_1 }),
-    ...(major_edu_1 && { major_edu_1 }),
-    ...(gpa_1 && { gpa_edu_1: { gte: Number.parseFloat(gpa_1) } }),
-    ...(univ_edu_2 && { univ_edu_2 }),
-    ...(major_edu_2 && { major_edu_2 }),
-    ...(gpa_2 && { gpa_edu_2: { gte: Number.parseFloat(gpa_2) } }),
-    ...(univ_edu_3 && { univ_edu_3 }),
-    ...(major_edu_3 && { major_edu_3 }),
-    ...(gpa_3 && { gpa_edu_3: { gte: Number.parseFloat(gpa_3) } }),
-  }
+  const orderBy =
+    !isScoreSort && allowedSortFields.includes(sortBy)
+      ? { [sortBy]: sortOrder }
+      : { created_at: "desc" as const }
 
   try {
-    // --- RESOLVE SCORE MAP (if criteria_id provided) ---
+    // -------------------------
+    // PARALLEL RESOLUTION
+    // -------------------------
+    const [
+      matchingHardskills,
+      matchingSoftskills,
+      matchingCertifications,
+      matchingBusinessDomain,
+      userProfileIds,
+    ] = await Promise.all([
+      search
+        ? getMatchingArrayValues("hardskills", search, prisma)
+        : Promise.resolve([]),
+      search
+        ? getMatchingArrayValues("softskills", search, prisma)
+        : Promise.resolve([]),
+      search
+        ? getMatchingArrayValues("certifications", search, prisma)
+        : Promise.resolve([]),
+      search
+        ? getMatchingArrayValues("business_domain", search, prisma)
+        : Promise.resolve([]),
+      user_id
+        ? getProfileIdsByUserId(user_id)
+        : Promise.resolve(null),
+    ])
+
+    // -------------------------
+    // BUILD WHERE
+    // -------------------------
+    const where: any = {
+      ...(userProfileIds !== null && {
+        profile_id: { in: userProfileIds },
+      }),
+
+      ...(search
+        ? {
+            OR: [
+              { fullname: { contains: search, mode: "insensitive" } },
+              { domicile: { contains: search, mode: "insensitive" } },
+              { univ_edu_1: { contains: search, mode: "insensitive" } },
+              { univ_edu_2: { contains: search, mode: "insensitive" } },
+              { univ_edu_3: { contains: search, mode: "insensitive" } },
+              { major_edu_1: { contains: search, mode: "insensitive" } },
+              { major_edu_2: { contains: search, mode: "insensitive" } },
+              { major_edu_3: { contains: search, mode: "insensitive" } },
+              { filename: { contains: search, mode: "insensitive" } },
+
+              ...(matchingHardskills.length > 0
+                ? [{ hardskills: { hasSome: matchingHardskills } }]
+                : []),
+              ...(matchingSoftskills.length > 0
+                ? [{ softskills: { hasSome: matchingSoftskills } }]
+                : []),
+              ...(matchingCertifications.length > 0
+                ? [{ certifications: { hasSome: matchingCertifications } }]
+                : []),
+              ...(matchingBusinessDomain.length > 0
+                ? [{ business_domain: { hasSome: matchingBusinessDomain } }]
+                : []),
+
+              ...(Number.isNaN(Number.parseFloat(search))
+                ? []
+                : [
+                    { gpa_edu_1: { equals: Number.parseFloat(search) } },
+                    { gpa_edu_2: { equals: Number.parseFloat(search) } },
+                    { gpa_edu_3: { equals: Number.parseFloat(search) } },
+                  ]),
+
+              ...(Number.isNaN(Number.parseInt(search))
+                ? []
+                : [{ yoe: { equals: Number.parseInt(search) } }]),
+            ],
+          }
+        : {}),
+
+      ...(domicile && { domicile }),
+      ...(yoe && { yoe: { gte: Number.parseInt(yoe) } }),
+
+      ...(softskills.length > 0 && {
+        softskills: { hasSome: softskills },
+      }),
+      ...(hardskills.length > 0 && {
+        hardskills: { hasSome: hardskills },
+      }),
+      ...(certifications.length > 0 && {
+        certifications: { hasSome: certifications },
+      }),
+      ...(business_domain.length > 0 && {
+        business_domain: { hasSome: business_domain },
+      }),
+
+      ...(univ_edu_1.length > 0 && { univ_edu_1: { in: univ_edu_1 } }),
+      ...(major_edu_1.length > 0 && { major_edu_1: { in: major_edu_1 } }),
+      ...(gpa_1 && { gpa_edu_1: { gte: Number.parseFloat(gpa_1) } }),
+
+      ...(univ_edu_2.length > 0 && { univ_edu_2: { in: univ_edu_2 } }),
+      ...(major_edu_2.length > 0 && { major_edu_2: { in: major_edu_2 } }),
+      ...(gpa_2 && { gpa_edu_2: { gte: Number.parseFloat(gpa_2) } }),
+
+      ...(univ_edu_3.length > 0 && { univ_edu_3: { in: univ_edu_3 } }),
+      ...(major_edu_3.length > 0 && { major_edu_3: { in: major_edu_3 } }),
+      ...(gpa_3 && { gpa_edu_3: { gte: Number.parseFloat(gpa_3) } }),
+    }
+
+    // -------------------------
+    // SCORE MAP
+    // -------------------------
     const scoreMap = new Map<string, number | null>()
 
     if (criteria_id) {
@@ -169,7 +275,9 @@ export async function GET(request: NextRequest) {
           )
 
           for (const s of scores) {
-            const profileId = s.profile_id ?? matchingToProfile.get(s.matching_id ?? "")
+            const profileId =
+              s.profile_id ??
+              matchingToProfile.get(s.matching_id ?? "")
             if (profileId) {
               scoreMap.set(profileId, s.score ?? null)
             }
@@ -178,42 +286,44 @@ export async function GET(request: NextRequest) {
       }
     }
 
-    // --- FETCH ALL PROFILES (NO PAGINATION) ---
+    // -------------------------
+    // FETCH ALL (NO PAGINATION)
+    // -------------------------
     const profiles = await prisma.cv_profile.findMany({
       where,
-      orderBy: isScoreSort ? { created_at: "desc" } : orderBy, // Don't sort by score in DB
+      orderBy: isScoreSort ? { created_at: "desc" } : orderBy,
     })
 
-    // --- SORT BY SCORE IN-MEMORY IF NEEDED ---
+    // In-memory score sort
     if (isScoreSort) {
       profiles.sort((a, b) => {
         const aScore = scoreMap.get(a.profile_id) ?? -Infinity
         const bScore = scoreMap.get(b.profile_id) ?? -Infinity
-        return sortOrder === "asc" ? aScore - bScore : bScore - aScore
+        return sortOrder === "asc"
+          ? aScore - bScore
+          : bScore - aScore
       })
     }
 
-    // --- ATTACH SCORES ---
     const profilesWithScore = profiles.map((profile) => ({
       ...profile,
       score: scoreMap.get(profile.profile_id) ?? null,
     }))
 
-    // --- GENERATE CSV ---
-    const csvContent = generateCSV(profilesWithScore)
+    const csv = generateCSV(profilesWithScore)
 
-    if (!csvContent) {
+    if (!csv) {
       return NextResponse.json(
         { error: "No data to export" },
         { status: 400 }
       )
     }
 
-    // --- RETURN CSV FILE ---
-    const timestamp = new Date().toISOString().slice(0, 10)
-    const filename = `candidates-${timestamp}.csv`
+    const filename = `candidates-${new Date()
+      .toISOString()
+      .slice(0, 10)}.csv`
 
-    return new NextResponse(csvContent, {
+    return new NextResponse(csv, {
       status: 200,
       headers: {
         "Content-Type": "text/csv;charset=utf-8",
@@ -221,7 +331,6 @@ export async function GET(request: NextRequest) {
         "Cache-Control": "no-cache, no-store, must-revalidate",
       },
     })
-
   } catch (error) {
     console.error("Export error:", error)
     return NextResponse.json(
@@ -231,9 +340,9 @@ export async function GET(request: NextRequest) {
   }
 }
 
-/**
- * Generate CSV content from profiles
- */
+// ---------------------------------------------
+// CSV GENERATOR
+// ---------------------------------------------
 function generateCSV(profiles: any[]): string {
   if (profiles.length === 0) return ""
 
@@ -258,29 +367,29 @@ function generateCSV(profiles: any[]): string {
     "score",
   ]
 
-  // CSV Header
   const header = columns.join(",")
 
-  // CSV Rows
   const rows = profiles.map((profile) =>
     columns
       .map((col) => {
         const value = profile[col]
 
-        // Handle arrays
         if (Array.isArray(value)) {
           return `"${value.join("; ")}"`
         }
 
-        // Handle null/undefined
         if (value === null || value === undefined) {
           return ""
         }
 
-        // Handle strings with special characters
         const stringValue = String(value)
-        if (stringValue.includes(",") || stringValue.includes('"') || stringValue.includes("\n")) {
-          return `"${stringValue.replace(/"/g, '""')}"` // Escape quotes
+
+        if (
+          stringValue.includes(",") ||
+          stringValue.includes('"') ||
+          stringValue.includes("\n")
+        ) {
+          return `"${stringValue.replace(/"/g, '""')}"`
         }
 
         return stringValue

src/app/login/page.tsx

@@ -1,21 +1,306 @@
-// pages/login.tsx
-import { LoginForm } from '@/components/LoginForm';
+'use client';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 export default function LoginPage() {
+  const [phase, setPhase] = useState<'landing'|'transitioning'|'login'>('landing');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [focused, setFocused] = useState<string|null>(null);
+  const router = useRouter();
+
+  const handleGetStarted = () => {
+    setPhase('transitioning');
+    setTimeout(() => setPhase('login'), 700);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        setError(data.message || 'Login failed');
+        setIsLoading(false);
+        return;
+      }
+      router.push('/recruitment');
+    } catch {
+      setError('Something went wrong. Please try again.');
+      setIsLoading(false);
+    }
+  };
+
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="w-full max-w-md space-y-8">
-        <div className="text-center">
-          <h2 className="text-3xl font-bold">Candidate Explorer</h2>
-          <p className="mt-2 text-sm text-gray-600">
-            Sign in to your account
-          </p>
-        </div>
-
-        <div className="bg-white py-8 px-6 shadow rounded-lg">
-          <LoginForm />
-        </div>
+    <>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        :root { --blue: #3b82f6; --blue-dark: #1d4ed8; --blue-light: #eff6ff; --blue-mid: #dbeafe; }
+
+        @keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
+        @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+        @keyframes float { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-16px) rotate(2deg);} }
+        @keyframes float2 { 0%,100%{transform:translateY(0) rotate(3deg);} 50%{transform:translateY(-10px) rotate(-3deg);} }
+        @keyframes bobble { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
+        @keyframes spin { to{transform:rotate(360deg);} }
+        @keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-5px);} 40%{transform:translateX(5px);} 60%{transform:translateX(-3px);} 80%{transform:translateX(3px);} }
+        @keyframes slideLeft { from{opacity:1;transform:translateX(0);} to{opacity:0;transform:translateX(-120%);} }
+        @keyframes slideInRight { from{opacity:0;transform:translateX(60px);} to{opacity:1;transform:translateX(0);} }
+        @keyframes scaleIn { from{opacity:0;transform:scale(0.92);} to{opacity:1;transform:scale(1);} }
+        @keyframes blob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;} }
+        @keyframes pulse { 0%,100%{opacity:0.15;transform:scale(1);} 50%{opacity:0.3;transform:scale(1.05);} }
+        @keyframes dotBounce { 0%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-8px);} }
+
+        input::placeholder { color: #93c5fd; }
+        input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #eff6ff inset !important; }
+        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(59,130,246,0.45) !important; }
+        .btn-primary:active { transform: translateY(0); }
+        .input-field:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important; }
+      `}</style>
+
+      <div style={{ minHeight:'100vh', fontFamily:'Plus Jakarta Sans, sans-serif', background:'#f0f7ff', overflow:'hidden', position:'relative' }}>
+
+        {/* === LANDING PHASE === */}
+        {(phase === 'landing' || phase === 'transitioning') && (
+          <div style={{
+            position:'absolute', inset:0, display:'flex', alignItems:'stretch',
+            animation: phase==='transitioning' ? 'slideLeft 0.65s cubic-bezier(0.4,0,0.2,1) forwards' : 'fadeIn 0.5s ease both',
+          }}>
+            {/* Left Panel */}
+            <div style={{ flex:'0 0 45%', background:'#fff', display:'flex', flexDirection:'column', justifyContent:'center', padding:'60px 56px', position:'relative', zIndex:2 }}>
+              {/* Logo */}
+              <div style={{ display:'flex', alignItems:'center', gap:'10px', marginBottom:'56px', animation:'fadeUp 0.6s ease 0.1s both' }}>
+                <div style={{ width:36, height:36, borderRadius:10, background:'linear-gradient(135deg,#3b82f6,#1d4ed8)', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color:'#fff', fontWeight:800, fontSize:16 }}>CE</span>
+                </div>
+                <span style={{ fontWeight:700, fontSize:18, color:'#1e3a8a', letterSpacing:'-0.02em' }}>Candidate Explorer</span>
+              </div>
+
+              <div style={{ animation:'fadeUp 0.6s ease 0.2s both' }}>
+                <p style={{ fontSize:12, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'#3b82f6', marginBottom:12 }}>AI-Powered Recruiting</p>
+                <h1 style={{ fontSize:42, fontWeight:800, lineHeight:1.1, color:'#1e3a8a', letterSpacing:'-0.03em', marginBottom:20 }}>
+                  Find the best<br/>
+                  <span style={{ color:'#3b82f6' }}>candidates</span><br/>
+                  faster.
+                </h1>
+                <p style={{ fontSize:15, color:'#64748b', lineHeight:1.7, maxWidth:340, marginBottom:40 }}>
+                  Our intelligent platform analyzes thousands of profiles in seconds, so your team can focus on what matters — building great teams.
+                </p>
+              </div>
+
+              <div style={{ display:'flex', flexDirection:'column', gap:12, animation:'fadeUp 0.6s ease 0.35s both' }}>
+                <button onClick={handleGetStarted} className="btn-primary" style={{
+                  padding:'16px 32px', background:'linear-gradient(135deg,#3b82f6,#2563eb)',
+                  border:'none', borderRadius:14, color:'#fff', fontSize:15, fontWeight:700,
+                  cursor:'pointer', transition:'all 0.25s ease',
+                  boxShadow:'0 4px 16px rgba(59,130,246,0.35)',
+                  letterSpacing:'-0.01em',
+                }}>
+                  Get Started →
+                </button>
+                {/* <button style={{
+                  padding:'14px 32px', background:'transparent',
+                  border:'2px solid #dbeafe', borderRadius:14, color:'#3b82f6', fontSize:15, fontWeight:600,
+                  cursor:'pointer', transition:'all 0.2s ease',
+                }}>
+                  Learn More
+                </button> */}
+              </div>
+
+              {/* Stats */}
+              {/* <div style={{ display:'flex', gap:32, marginTop:48, animation:'fadeUp 0.6s ease 0.45s both' }}>
+                {[['10k+','Candidates'],['98%','Accuracy'],['3x','Faster Hiring']].map(([val,label]) => (
+                  <div key={label}>
+                    <div style={{ fontSize:20, fontWeight:800, color:'#1e3a8a' }}>{val}</div>
+                    <div style={{ fontSize:11, color:'#94a3b8', fontWeight:500, marginTop:2 }}>{label}</div>
+                  </div>
+                ))}
+              </div> */}
+            </div>
+
+            {/* Right Panel */}
+            <div style={{ flex:1, background:'linear-gradient(135deg,#1d4ed8 0%,#2563eb 40%,#3b82f6 100%)', position:'relative', overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center' }}>
+              {/* Blob shapes */}
+              <div style={{ position:'absolute', top:'-10%', right:'-5%', width:400, height:400, background:'rgba(255,255,255,0.06)', borderRadius:'60% 40% 30% 70%/60% 30% 70% 40%', animation:'blob 8s ease-in-out infinite' }} />
+              <div style={{ position:'absolute', bottom:'-10%', left:'-5%', width:350, height:350, background:'rgba(255,255,255,0.04)', borderRadius:'40% 60% 70% 30%/40% 50% 60% 50%', animation:'blob 10s ease-in-out 2s infinite' }} />
+              {/* Dots grid */}
+              <div style={{ position:'absolute', inset:0, opacity:0.1, backgroundImage:'radial-gradient(circle, #fff 1px, transparent 1px)', backgroundSize:'28px 28px' }} />
+
+              {/* Robot images */}
+              <div style={{ position:'relative', display:'flex', alignItems:'flex-end', gap:24 }}>
+                <img src="/loading2.png" alt="robot" style={{ width:200, height:200, objectFit:'contain', animation:'float 4s ease-in-out infinite', filter:'drop-shadow(0 20px 40px rgba(0,0,0,0.25))' }} />
+                <img src="/loading1.png" alt="robot" style={{ width:180, height:180, objectFit:'contain', animation:'float2 5s ease-in-out 0.8s infinite', filter:'drop-shadow(0 20px 40px rgba(0,0,0,0.2))' }} />
+              </div>
+
+              {/* Feature chips */}
+              <div style={{ position:'absolute', top:60, left:40, animation:'fadeUp 0.8s ease 0.5s both' }}>
+                <div style={{ background:'rgba(255,255,255,0.15)', backdropFilter:'blur(12px)', borderRadius:12, padding:'10px 16px', color:'#fff', fontSize:13, fontWeight:600, border:'1px solid rgba(255,255,255,0.2)' }}>
+                  🤖 AI Resume Analysis
+                </div>
+              </div>
+              <div style={{ position:'absolute', top:120, right:40, animation:'fadeUp 0.8s ease 0.65s both' }}>
+                <div style={{ background:'rgba(255,255,255,0.15)', backdropFilter:'blur(12px)', borderRadius:12, padding:'10px 16px', color:'#fff', fontSize:13, fontWeight:600, border:'1px solid rgba(255,255,255,0.2)' }}>
+                  📊 Smart Rankings
+                </div>
+              </div>
+              <div style={{ position:'absolute', bottom:80, right:48, animation:'fadeUp 0.8s ease 0.8s both' }}>
+                <div style={{ background:'rgba(255,255,255,0.15)', backdropFilter:'blur(12px)', borderRadius:12, padding:'10px 16px', color:'#fff', fontSize:13, fontWeight:600, border:'1px solid rgba(255,255,255,0.2)' }}>
+                  ⚡ Real-time Matching
+                </div>
+              </div>
+              <div style={{ position:'absolute', top:200, right:60, animation:'fadeUp 0.8s ease 0.5s both' }}>
+                <div style={{ background:'rgba(255,255,255,0.15)', backdropFilter:'blur(12px)', borderRadius:12, padding:'10px 16px', color:'#fff', fontSize:13, fontWeight:600, border:'1px solid rgba(255,255,255,0.2)' }}>
+                  🧠 Skill Gap Detection
+                </div>
+              </div>
+              <div style={{ position:'absolute', bottom:160, left:36, animation:'fadeUp 0.8s ease 0.5s both' }}>
+                <div style={{ background:'rgba(255,255,255,0.15)', backdropFilter:'blur(12px)', borderRadius:12, padding:'10px 16px', color:'#fff', fontSize:13, fontWeight:600, border:'1px solid rgba(255,255,255,0.2)' }}>
+                  📋 Automated Shortlisting
+                </div>
+              </div>
+              <div style={{ position:'absolute', bottom:40, left:100, animation:'fadeUp 0.8s ease 0.5s both' }}>
+                <div style={{ background:'rgba(255,255,255,0.15)', backdropFilter:'blur(12px)', borderRadius:12, padding:'10px 16px', color:'#fff', fontSize:13, fontWeight:600, border:'1px solid rgba(255,255,255,0.2)' }}>
+                  🎯 Culture Fit Scoring
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* === LOGIN PHASE === */}
+        {phase === 'login' && (
+          <div style={{
+            position:'absolute', inset:0, display:'flex', alignItems:'stretch',
+            animation:'scaleIn 0.5s cubic-bezier(0.16,1,0.3,1) both',
+          }}>
+            {/* Left: Form */}
+            <div style={{ flex:'0 0 50%', background:'#fff', display:'flex', flexDirection:'column', justifyContent:'center', padding:'60px 64px', position:'relative' }}>
+              {/* Back button */}
+              <button onClick={() => setPhase('landing')} style={{
+                position:'absolute', top:32, left:40,
+                background:'none', border:'none', cursor:'pointer',
+                color:'#64748b', fontSize:13, fontWeight:600,
+                display:'flex', alignItems:'center', gap:6,
+                padding:'6px 10px', borderRadius:8,
+                transition:'color 0.2s',
+              }}>
+                ← Back
+              </button>
+
+              {/* Logo */}
+              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:48, animation:'fadeUp 0.5s ease 0.05s both' }}>
+                <div style={{ width:36, height:36, borderRadius:10, background:'linear-gradient(135deg,#3b82f6,#1d4ed8)', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color:'#fff', fontWeight:800, fontSize:16 }}>CE</span>
+                </div>
+                <span style={{ fontWeight:700, fontSize:18, color:'#1e3a8a', letterSpacing:'-0.02em' }}>Candidate Explorer</span>
+              </div>
+
+              <div style={{ animation:'fadeUp 0.5s ease 0.1s both' }}>
+                <h2 style={{ fontSize:32, fontWeight:800, color:'#1e3a8a', letterSpacing:'-0.03em', marginBottom:8 }}>Welcome back 👋</h2>
+                <p style={{ color:'#64748b', fontSize:14, marginBottom:36 }}>Sign in to your account to continue</p>
+              </div>
+
+              {error && (
+                <div style={{ background:'#fef2f2', border:'1px solid #fecaca', color:'#dc2626', padding:'12px 16px', borderRadius:10, fontSize:13, marginBottom:20, animation:'shake 0.4s ease' }}>
+                  {error}
+                </div>
+              )}
+
+              <form onSubmit={handleSubmit} style={{ display:'flex', flexDirection:'column', gap:18, animation:'fadeUp 0.5s ease 0.2s both' }}>
+                <div>
+                  <label style={{ display:'block', fontSize:12, fontWeight:700, color:'#374151', marginBottom:8, letterSpacing:'0.04em' }}>USERNAME</label>
+                  <input
+                    type="text" value={username}
+                    onChange={e => setUsername(e.target.value)}
+                    onFocus={() => setFocused('user')} onBlur={() => setFocused(null)}
+                    placeholder="Enter your username"
+                    required disabled={isLoading}
+                    className="input-field"
+                    style={{ width:'100%', padding:'14px 16px', border:'2px solid #e2e8f0', borderRadius:12, fontSize:14, color:'#1e293b', outline:'none', transition:'all 0.25s ease', background:'#f8faff' }}
+                  />
+                </div>
+                <div>
+                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
+                    <label style={{ fontSize:12, fontWeight:700, color:'#374151', letterSpacing:'0.04em' }}>PASSWORD</label>
+                    {/* <a href="#" style={{ fontSize:12, color:'#3b82f6', textDecoration:'none', fontWeight:600 }}>Forgot Password?</a> */}
+                  </div>
+                  <input
+                    type="password" value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    onFocus={() => setFocused('pass')} onBlur={() => setFocused(null)}
+                    placeholder="••••••••"
+                    required disabled={isLoading}
+                    className="input-field"
+                    style={{ width:'100%', padding:'14px 16px', border:'2px solid #e2e8f0', borderRadius:12, fontSize:14, color:'#1e293b', outline:'none', transition:'all 0.25s ease', background:'#f8faff' }}
+                  />
+                </div>
+
+                <button type="submit" disabled={isLoading} className="btn-primary" style={{
+                  marginTop:8, padding:'16px',
+                  background:isLoading ? '#93c5fd' : 'linear-gradient(135deg,#3b82f6,#2563eb)',
+                  border:'none', borderRadius:14, color:'#fff', fontSize:15, fontWeight:700,
+                  cursor: isLoading ? 'not-allowed' : 'pointer',
+                  transition:'all 0.25s ease',
+                  boxShadow:'0 4px 16px rgba(59,130,246,0.35)',
+                  letterSpacing:'-0.01em',
+                }}>
+                  {isLoading ? (
+                    <span style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:10 }}>
+                      <span style={{ width:16,height:16,border:'2.5px solid rgba(255,255,255,0.4)',borderTop:'2.5px solid #fff',borderRadius:'50%',display:'inline-block',animation:'spin 0.7s linear infinite' }} />
+                      Signing in...
+                    </span>
+                  ) : 'Sign In'}
+                </button>
+              </form>
+
+              {/* <p style={{ marginTop:28, textAlign:'center', fontSize:13, color:'#94a3b8', animation:'fadeUp 0.5s ease 0.35s both' }}>
+                {"Don't have an account? "}
+                <a href="#" style={{ color:'#3b82f6', fontWeight:700, textDecoration:'none' }}>Sign up</a>
+              </p> */}
+
+              <div style={{ marginTop:'auto', paddingTop:48, display:'flex', justifyContent:'center', gap:24, animation:'fadeUp 0.5s ease 0.4s both' }}>
+                {['FAQ','Features','Support'].map(item => (
+                  <a key={item} href="#" style={{ fontSize:12, color:'#94a3b8', textDecoration:'none', fontWeight:500 }}>{item}</a>
+                ))}
+              </div>
+            </div>
+
+            {/* Right: Illustration */}
+            <div style={{ flex:1, background:'linear-gradient(160deg,#1e40af 0%,#2563eb 50%,#3b82f6 100%)', position:'relative', overflow:'hidden', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:32 }}>
+              <div style={{ position:'absolute', inset:0, opacity:0.08, backgroundImage:'radial-gradient(circle, #fff 1px, transparent 1px)', backgroundSize:'24px 24px' }} />
+              <div style={{ position:'absolute', top:'-15%', right:'-10%', width:450, height:450, background:'rgba(255,255,255,0.05)', borderRadius:'60% 40% 30% 70%/60% 30% 70% 40%', animation:'blob 9s ease-in-out infinite' }} />
+
+              <div style={{ position:'relative', zIndex:1, textAlign:'center', padding:'0 40px', animation:'fadeUp 0.6s ease 0.2s both' }}>
+                <img src="robot-1.png" alt="robot" style={{ width:180, height:180, objectFit:'contain', animation:'bobble 3s ease-in-out infinite', filter:'drop-shadow(0 16px 32px rgba(0,0,0,0.3))' }} />
+                <h3 style={{ color:'#fff', fontSize:26, fontWeight:800, marginTop:24, letterSpacing:'-0.02em' }}>
+                  AI-Powered Recruitment
+                </h3>
+                <p style={{ color:'rgba(255,255,255,0.7)', fontSize:14, lineHeight:1.7, marginTop:12, maxWidth:300 }}>
+                  Let our intelligent assistant help you discover the perfect candidates from thousands of applications.
+                </p>
+              </div>
+
+              {/* Floating feature pills */}
+              <div style={{ position:'relative', zIndex:1, display:'flex', flexWrap:'wrap', gap:10, justifyContent:'center', padding:'0 48px', animation:'fadeUp 0.6s ease 0.4s both' }}>
+                {['✅ Smart Screening','📈 Analytics','🔍 Deep Search','⚡ Auto-Match'].map((feat, i) => (
+                  <div key={feat} style={{ background:'rgba(255,255,255,0.12)', backdropFilter:'blur(12px)', border:'1px solid rgba(255,255,255,0.2)', borderRadius:10, padding:'8px 14px', color:'#fff', fontSize:13, fontWeight:600, animation:`fadeUp 0.5s ease ${0.5+i*0.08}s both` }}>
+                    {feat}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
       </div>
-    </div>
+    </>
   );
 }

src/app/recruitment/upload/page.tsx

@@ -433,7 +433,7 @@ export default function CandidateExplorer() {
     // Upload status
     if (displayFile.uploadStatus === 'uploading') {
       return (
-        <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
+        <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
           <Loader2 className="w-3 h-3 animate-spin" />
           Uploading
         </span>
@@ -470,7 +470,7 @@ export default function CandidateExplorer() {
 
     if (displayFile.extractStatus === 'extracted') {
       return (
-        <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
+        <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
           <CheckCircle2 className="w-3 h-3" />
           Extracted
         </span>
@@ -542,33 +542,33 @@ export default function CandidateExplorer() {
       {/* ============================================================================ */}
       <section className="mb-8">
         <div className="flex items-center gap-2 mb-4">
-          <BarChart3 className="w-5 h-5 text-green-600" />
-          <h2 className="text-lg font-semibold text-green-600">Dashboard Overview</h2>
+          <BarChart3 className="w-5 h-5 text-blue-600" />
+          <h2 className="text-lg font-semibold text-blue-600">Dashboard Overview</h2>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
           {/* Total CV Card */}
           <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
-            <div className="flex items-center gap-2 text-green-600 text-sm font-medium mb-3">
+            <div className="flex items-center gap-2 text-blue-600 text-sm font-medium mb-3">
               <Upload className="w-4 h-4" />
               TOTAL CV
             </div>
-            <div className="text-5xl font-bold text-green-600 mb-1">{totalCVs}</div>
+            <div className="text-5xl font-bold text-blue-600 mb-1">{totalCVs}</div>
             <div className="text-sm text-gray-500">
               files in your workspace
               {uploadingCount > 0 && (
-                <span className="ml-2 text-green-600">({uploadingCount} uploading)</span>
+                <span className="ml-2 text-blue-600">({uploadingCount} uploading)</span>
               )}
             </div>
           </div>
 
           {/* Profiles Extracted Card */}
           <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
-            <div className="flex items-center gap-2 text-green-600 text-sm font-medium mb-3">
+            <div className="flex items-center gap-2 text-blue-600 text-sm font-medium mb-3">
               <CheckSquare className="w-4 h-4" />
               PROFILES EXTRACTED
             </div>
-            <div className="text-5xl font-bold text-green-600 mb-1">{profilesExtracted}</div>
+            <div className="text-5xl font-bold text-blue-600 mb-1">{profilesExtracted}</div>
             <div className="text-sm text-gray-500">
               structured profiles
               {extractingCount > 0 && (
@@ -579,7 +579,7 @@ export default function CandidateExplorer() {
 
           {/* Extraction Rate Card */}
           <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
-            <div className="flex items-center gap-2 text-green-600 text-sm font-medium mb-3">
+            <div className="flex items-center gap-2 text-blue-600 text-sm font-medium mb-3">
               <TrendingUp className="w-4 h-4" />
               EXTRACTION RATE
             </div>
@@ -598,7 +598,7 @@ export default function CandidateExplorer() {
         {/* File Upload Dropzone */}
         <div
           className={`relative border-2 border-dashed rounded-lg p-12 mb-6 transition-colors ${dragActive
-            ? 'border-green-500 bg-green-50'
+            ? 'border-blue-500 bg-blue-50'
             : 'border-gray-300 bg-white'
             } ${uploadingCount > 0 ? 'pointer-events-none opacity-60' : ''}`}
           onDragEnter={handleDrag}
@@ -610,7 +610,7 @@ export default function CandidateExplorer() {
           {uploadingCount > 0 && (
             <div className="absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center rounded-lg z-10">
               <div className="text-center">
-                <Loader2 className="w-12 h-12 text-green-600 animate-spin mx-auto mb-4" />
+                <Loader2 className="w-12 h-12 text-blue-600 animate-spin mx-auto mb-4" />
                 <p className="text-gray-700 font-medium">Uploading files...</p>
                 <p className="text-sm text-gray-500 mt-1">
                   {uploadingCount} file(s) in progress
@@ -634,7 +634,7 @@ export default function CandidateExplorer() {
               Limit 3MB per file • PDF
             </p>
             <label htmlFor="file-upload" className="cursor-pointer">
-              <span className="inline-block bg-green-100 text-green-600 px-6 py-2 rounded-md font-medium hover:bg-green-200 transition-colors">
+              <span className="inline-block bg-blue-100 text-blue-600 px-6 py-2 rounded-md font-medium hover:bg-blue-200 transition-colors">
                 Browse files
               </span>
               <input
@@ -660,7 +660,7 @@ export default function CandidateExplorer() {
           <button
             onClick={() => refetch()}
             disabled={isLoading || isFetching}
-            className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-md font-medium hover:bg-green-700 transition-colors disabled:opacity-50"
+            className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-md font-medium hover:bg-blue-700 transition-colors disabled:opacity-50"
           >
             <RefreshCw className={`w-4 h-4 ${isLoading || isFetching ? 'animate-spin' : ''}`} />
             Refresh List
@@ -686,7 +686,7 @@ export default function CandidateExplorer() {
             <button
               onClick={() => refetch()}
               disabled={isLoading || isFetching}
-              className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-md font-medium hover:bg-green-700 transition-colors disabled:opacity-50"
+              className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-md font-medium hover:bg-blue-700 transition-colors disabled:opacity-50"
             >
               <RefreshCw className={`w-4 h-4 ${isLoading || isFetching ? 'animate-spin' : ''}`} />
               Refresh List
@@ -717,7 +717,7 @@ export default function CandidateExplorer() {
               {isLoading || isFetching ? (
                 <tr>
                   <td colSpan={4} className="px-6 py-8 text-center">
-                    <Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600" />
+                    <Loader2 className="w-6 h-6 animate-spin mx-auto text-blue-600" />
                   </td>
                 </tr>
               ) : error ? (
@@ -773,7 +773,7 @@ export default function CandidateExplorer() {
                             displayFile.extractStatus !== 'extracting' && (
                               <button
                                 onClick={() => extractData(file.id, file.filename)}
-                                className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors"
+                                className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
                               >
                                 <FileText className="w-3 h-3" />
                                 Extract

src/components/dashboard/candidates-table.tsx

@@ -282,7 +282,7 @@ const ColumnSettingsDialog = memo(({
       </div>
       <DialogFooter>
         <Button variant="outline" onClick={onReset}>Reset</Button>
-        <Button onClick={onApply} className="bg-green-600 hover:bg-green-700 text-white">Apply</Button>
+        <Button onClick={onApply} className="bg-blue-600 hover:bg-blue-700 text-white">Apply</Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>
@@ -431,7 +431,7 @@ const FilterDialog = memo(({
                   <Button
                     type="button"
                     variant="link"
-                    className="text-green-600 mt-2 p-0 h-auto"
+                    className="text-blue-600 mt-2 p-0 h-auto"
                     onClick={() => append({ university: "", major: "", gpa: "" })}
                   >
                     + Add Education
@@ -561,7 +561,7 @@ const FilterDialog = memo(({
 
         <DialogFooter>
           <Button variant="outline" onClick={handleReset}>Reset</Button>
-          <Button onClick={handleApply} className="bg-green-600 hover:bg-green-700 text-white">
+          <Button onClick={handleApply} className="bg-blue-600 hover:bg-blue-700 text-white">
             Apply
           </Button>
         </DialogFooter>
@@ -590,7 +590,7 @@ const SliderRow = memo(({
       value={value}
       onChange={(e) => onChange(path, parseInt(e.target.value))}
       disabled={disabled}
-      className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-green-500"
+      className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500"
     />
     <input
       type="number"
@@ -747,7 +747,7 @@ const CriteriaEditDialog = memo(({
                   <Button
                     type="button"
                     variant="link"
-                    className="text-green-600 mt-2 p-0 h-auto"
+                    className="text-blue-600 mt-2 p-0 h-auto"
                     onClick={() => append({ university: "", major: "", gpa: "" })}
                   >
                     + Add Education
@@ -875,7 +875,7 @@ const CriteriaEditDialog = memo(({
 
         <DialogFooter>
           <Button variant="outline" onClick={handleReset}>Reset</Button>
-          <Button onClick={handleApply} className="bg-green-600 hover:bg-green-700 text-white">
+          <Button onClick={handleApply} className="bg-blue-600 hover:bg-blue-700 text-white">
             Apply
           </Button>
         </DialogFooter>
@@ -1179,7 +1179,7 @@ const CalculateScoreDialog = memo(({
           {/* Total */}
           <div className="flex justify-between items-center py-4 border-t sticky bottom-0 bg-white">
             <span className="font-medium">Total Allocated</span>
-            <span className={`text-lg font-bold ${total === 100 ? 'text-green-600' : 'text-red-600'}`}>
+            <span className={`text-lg font-bold ${total === 100 ? 'text-blue-600' : 'text-red-600'}`}>
               {total}/100
             </span>
           </div>
@@ -1191,7 +1191,7 @@ const CalculateScoreDialog = memo(({
             onClick={onCalculate}
             disabled={total !== 100}
             className={`flex-1 px-6 ${total === 100
-              ? 'bg-green-600 hover:bg-green-700'
+              ? 'bg-blue-600 hover:bg-blue-700'
               : 'bg-gray-300 cursor-not-allowed'
               }`}
           >
@@ -1209,7 +1209,7 @@ const LoadingDialog = memo(({ open }: { open: boolean }) => (
   <Dialog open={open}>
     <DialogContent className="max-w-sm">
       <div className="flex flex-col items-center justify-center py-8">
-        <div className="size-16 border-4 border-green-600 border-t-transparent rounded-full animate-spin mb-4" />
+        <div className="size-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mb-4" />
         <p className="text-sm text-muted-foreground">Calculating scores...</p>
       </div>
     </DialogContent>
@@ -1222,12 +1222,12 @@ const SuccessDialog = memo(({ open, onClose }: { open: boolean; onClose: () => v
   <Dialog open={open} onOpenChange={onClose}>
     <DialogContent className="max-w-sm">
       <div className="flex flex-col items-center justify-center py-6 text-center">
-        <div className="size-16 rounded-full bg-green-100 flex items-center justify-center mb-4">
-          <Check className="size-8 text-green-600" />
+        <div className="size-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
+          <Check className="size-8 text-blue-600" />
         </div>
         <h3 className="text-lg font-semibold mb-2">Scoring Complete</h3>
         <p className="text-sm text-muted-foreground mb-6">All candidate scores have been calculated.</p>
-        <Button onClick={onClose} className="bg-green-600 hover:bg-green-700 text-white w-full">Done</Button>
+        <Button onClick={onClose} className="bg-blue-600 hover:bg-blue-700 text-white w-full">Done</Button>
       </div>
     </DialogContent>
   </Dialog>
@@ -1391,7 +1391,8 @@ export default function CandidateTable() {
         debouncedSearch,
         sortConfig,
         appliedFilters,
-        criteriaId
+        criteriaId,
+        user?.user_id
       )
     } catch (error) {
       console.error("Export failed:", error)
@@ -1415,7 +1416,7 @@ export default function CandidateTable() {
         <div className="overflow-x-auto">
           {isLoading || isFetching ? (
             <div className="flex items-center justify-center py-16">
-              <div className="size-8 border-4 border-green-600 border-t-transparent rounded-full animate-spin" />
+              <div className="size-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
             </div>
           ) : candidates.length === 0 ? (
             <div className="flex items-center justify-center py-16 text-sm text-muted-foreground">

src/components/dashboard/charts-section.tsx

@@ -8,13 +8,13 @@ export function ChartsSection() {
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 my-2 mt-4">
       <Card className="p-6 border-2">
-        <h3 className="text-base font-semibold text-gray-900 text-center text-green-500">
+        <h3 className="text-base font-semibold text-center text-blue-500">
           All Major
         </h3>
         <MajorChart />
       </Card>
       <Card className="p-6 border-2">
-        <h3 className="text-base font-semibold text-gray-900 text-center text-green-500">
+        <h3 className="text-base font-semibold text-center text-blue-500">
           All University
         </h3>
         <UniversityBar />

src/components/dashboard/detail-dialog.tsx

@@ -161,7 +161,7 @@ export function DetailDialog({ open, onOpenChange, candidate }: DetailDialogProp
               <div>
                 <h3 className="text-sm text-gray-500">CV</h3>
                 <button
-                  className="mt-1 flex items-center gap-1 text-sm text-green-600 hover:underline"
+                  className="mt-1 flex items-center gap-1 text-sm text-blue-600 hover:underline"
                   onClick={handleDownload}
                 >
                   <Download className="size-4" />

src/components/dashboard/header-menu.tsx

@@ -195,7 +195,7 @@ export function HeaderMenu() {
         <DynamicBreadcrumb />
         <div className="text-sm text-gray-500">{dateStr}</div>
       </header>
-      <header className="h-16 bg-white border-b border-gray-200 px-8 flex items-center justify-between bg-[url(/dashboard/background.png)] bg-cover">
+      <header className="h-16 bg-white border-b border-gray-200 px-8 flex items-center justify-between">
         <h1 className="text-base font-bold text-foreground relative z-10">
           Recruitment AI Dashboard – MT Intake
         </h1>

src/components/dashboard/metrics-row.tsx

@@ -23,43 +23,6 @@ const fallbackScore: ScoreData = {
   }
 }
 
-function CircularProgress({ percentage }: { percentage: number }) {
-  // Format to max 2 decimal places
-  const formattedPercentage = Number(percentage.toFixed(2));
-
-  return (
-    <div className="relative w-24 h-24 flex-shrink-0">
-      <svg className="w-full h-full transform -rotate-90">
-        <circle
-          cx="48"
-          cy="48"
-          r="40"
-          stroke="#E5E7EB"
-          strokeWidth="8"
-          fill="none"
-        />
-        <circle
-          cx="48"
-          cy="48"
-          r="40"
-          stroke="#10B981"
-          strokeWidth="8"
-          fill="none"
-          strokeDasharray={`${2 * Math.PI * 40}`}
-          strokeDashoffset={`${2 * Math.PI * 40 * (1 - percentage / 100)}`}
-          strokeLinecap="round"
-          className="transition-all duration-500"
-        />
-      </svg>
-      <div className="absolute inset-0 flex items-center justify-center">
-        <span className="text-xl font-bold text-gray-700">
-          {formattedPercentage}%
-        </span>
-      </div>
-    </div>
-  );
-}
-
 export function MetricsRow() {
   const router = useRouter()
   const fetchScore = async (): Promise<ScoreData> => {
@@ -68,39 +31,24 @@ export function MetricsRow() {
     return res.json()
   }
 
-  const { data, isLoading: loadingScore, isError } = useQuery({
+  const { data, isLoading, isFetching, isError } = useQuery({
     queryKey: ["score-data"],
-    queryFn: () => fetchScore(),
+    queryFn: fetchScore,
     staleTime: 0,
-    placeholderData: (prev) => prev,
     refetchOnWindowFocus: false,
-    refetchOnMount: false,
+    refetchOnMount: "always", // 👈 force refetch
   })
 
   const scoreData = isError ? fallbackScore : data ?? fallbackScore
 
-  // Format percentage to max 2 decimal places
-  const formattedPercentage = Number(scoreData.data.percent_extracted.toFixed(2));
-
-  const lastProcessed = new Date().toLocaleString('en-US', {
-    weekday: 'short',
-    month: 'short',
-    day: '2-digit',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    hour12: true
-  });
-
   const handleAddData = () => {
     router.push("/recruitment/upload")
   }
 
-  if (loadingScore) {
+  if (isLoading || isFetching) {
     return (
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {[1, 2].map((i) => (
+      <div className="grid grid-cols-1 gap-4">
+        {[1].map((i) => (
           <Card key={i} className="p-6 border bg-white animate-pulse">
             <div className="flex items-start gap-4">
               <div className="w-24 h-24 rounded-full bg-gray-200" />
@@ -124,7 +72,7 @@ export function MetricsRow() {
           <div className="flex items-start gap-4">
             <div className="flex-1">
               <div className="flex items-center gap-3 mb-3">
-                <span className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-green-100 text-green-800">
+                <span className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-blue-100 text-blue-800">
                   Profile Extracted
                 </span>
                 <span className="text-3xl font-bold text-gray-900">
@@ -136,12 +84,12 @@ export function MetricsRow() {
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                 </svg>
                 <span>
-                  <strong>{scoreData.data.total_extracted}</strong> / <strong>{scoreData.data.total_file}</strong>Total Profiles
+                  <strong>{scoreData.data.total_extracted}</strong> / <strong>{scoreData.data.total_file}</strong> Total Profiles
                 </span>
               </div>
             </div>
           </div>
-          <button onClick={handleAddData} className="cursor-pointer w-10 h-10 rounded-full bg-[#22c55e] text-white flex items-center justify-center hover:bg-[#16a34a] transition-colors">
+          <button onClick={handleAddData} className="cursor-pointer w-10 h-10 rounded-full bg-[#3b82f6] text-white flex items-center justify-center hover:bg-[#1d4ed8] transition-colors">
             <Plus className="w-5 h-5" />
           </button>
         </div>
@@ -154,7 +102,7 @@ export function MetricsRow() {
 
           <div className="flex-1">
             <div className="mb-4">
-              <div className="text-3xl font-bold text-green-600 mb-1">
+              <div className="text-3xl font-bold text-blue-600 mb-1">
                 {formattedPercentage}%
               </div>
               <div className="text-lg font-semibold text-gray-900">

src/components/ui/ChartBar.tsx

@@ -69,6 +69,7 @@ export function ChartBar({
     <ResponsiveContainer
       width="100%"
       height={Math.max(250, data.length * 40)}
+      // height={300}
     >
       <BarChart
         data={data}

src/components/ui/ChartPie.tsx

@@ -1,6 +1,6 @@
-'use client';
+  'use client';
 
-import { ChartData } from '@/types/chart';
+  import { ChartData } from '@/types/chart';
 import {
   Cell,
   Legend,
@@ -10,85 +10,88 @@ import {
   Tooltip,
 } from 'recharts';
 
-type ChartPieProps = {
-  loading: boolean
-  data: ChartData[]
-}
+  type ChartPieProps = {
+    loading: boolean
+    data: ChartData[]
+  }
 
-export function ChartPie({ loading, data }: ChartPieProps) {
-  const items = 5;
+  export function ChartPie({ loading, data }: ChartPieProps) {
+    const items = 5;
 
-  // Calculate percentages
-  const dataWithPercentages = data ? (() => {
-    const total = data.reduce((sum, item) => sum + item.value, 0);
-    return data.map(item => ({
-      ...item,
-      percentage: total > 0 ? Number(((item.value / total) * 100).toFixed(1)) : 0
-    }));
-  })() : [];
+    // Calculate percentages
+    const dataWithPercentages = data ? (() => {
+      const total = data.reduce((sum, item) => sum + item.value, 0);
+      return data.map(item => ({
+        ...item,
+        percentage: total > 0 ? Number(((item.value / total) * 100).toFixed(1)) : 0
+      }));
+    })() : [];
 
-  const total = dataWithPercentages.reduce((sum, item) => sum + item.value, 0);
+    const total = dataWithPercentages.reduce((sum, item) => sum + item.value, 0);
 
-  if (loading) {
-    return (
-      <div className="w-full flex items-center justify-center gap-10 animate-pulse">
-        <div className="relative">
-          <div className="w-48 h-48 bg-gray-200 rounded-full" />
-          <div className="absolute inset-6 bg-white rounded-full" />
+    if (loading) {
+      return (
+        <div className="w-full flex items-center justify-center gap-10 animate-pulse">
+          <div className="relative">
+            <div className="w-48 h-48 bg-gray-200 rounded-full" />
+            <div className="absolute inset-6 bg-white rounded-full" />
+          </div>
+          <div className="flex flex-col gap-4">
+            {Array.from({ length: items }).map((_, index) => (
+              <div key={index} className="flex items-center gap-3">
+                <div className="w-4 h-4 bg-gray-200 rounded-sm" />
+                <div className="h-4 bg-gray-200 rounded w-32" />
+              </div>
+            ))}
+          </div>
         </div>
-        <div className="flex flex-col gap-4">
-          {Array.from({ length: items }).map((_, index) => (
-            <div key={index} className="flex items-center gap-3">
-              <div className="w-4 h-4 bg-gray-200 rounded-sm" />
-              <div className="h-4 bg-gray-200 rounded w-32" />
-            </div>
-          ))}
+      );
+    }
+
+    if (!data || data.length === 0) {
+      return (
+        <div className="w-full h-60 flex flex-col items-center justify-center text-gray-400">
+          <div className="w-40 h-40 border-4 border-dashed border-gray-200 rounded-full mb-4" />
+          <p className="text-sm">No data available</p>
         </div>
-      </div>
-    );
-  }
+      );
+    }
 
-  if (!data || data.length === 0) {
     return (
-      <div className="w-full h-60 flex flex-col items-center justify-center text-gray-400">
-        <div className="w-40 h-40 border-4 border-dashed border-gray-200 rounded-full mb-4" />
-        <p className="text-sm">No data available</p>
-      </div>
-    );
-  }
+      <div className="space-y-4">
+        {/* Total Count */}
+        <div className="text-center">
+          <p className="text-sm text-gray-600">Total</p>
+          <p className="text-2xl font-bold text-gray-800">{total}</p>
+        </div>
 
-  return (
-    <div className="space-y-4">
-      {/* Total Count */}
-      <div className="text-center">
-        <p className="text-sm text-gray-600">Total</p>
-        <p className="text-2xl font-bold text-gray-800">{total}</p>
+        <ResponsiveContainer width="100%" 
+        height={Math.max(250, dataWithPercentages.length * 40)}
+        // height={300}
+        >
+          <PieChart>
+            <Pie
+              data={dataWithPercentages}
+              dataKey="value"
+              label={({ percentage }) => `${percentage}%`}
+            >
+              {dataWithPercentages.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Pie>
+            <Tooltip
+              formatter={(value: number, name: string, props: any) => [
+                `${value} (${props.payload.percentage}%)`,
+                name
+              ]}
+            />
+            <Legend
+              formatter={(value: string, entry: any) =>
+                `${value}: ${entry.payload.value} (${entry.payload.percentage}%)`
+              }
+            />
+          </PieChart>
+        </ResponsiveContainer>
       </div>
-
-      <ResponsiveContainer width="100%" height={Math.max(250, dataWithPercentages.length * 40)}>
-        <PieChart>
-          <Pie
-            data={dataWithPercentages}
-            dataKey="value"
-            label={({ percentage }) => `${percentage}%`}
-          >
-            {dataWithPercentages.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={entry.color} />
-            ))}
-          </Pie>
-          <Tooltip
-            formatter={(value: number, name: string, props: any) => [
-              `${value} (${props.payload.percentage}%)`,
-              name
-            ]}
-          />
-          <Legend
-            formatter={(value: string, entry: any) =>
-              `${value}: ${entry.payload.value} (${entry.payload.percentage}%)`
-            }
-          />
-        </PieChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}
+    );
+  }

src/components/ui/breadcrumb.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { ChevronRight, Home, MoreHorizontal } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -72,7 +72,7 @@ function BreadcrumbSeparator({
       data-slot="breadcrumb-separator"
       role="presentation"
       aria-hidden="true"
-      className={cn('[&>svg]:size-3.5 text-green-500', className)}
+      className={cn('[&>svg]:size-3.5 text-blue-500', className)}
       {...props}
     >
       {children ?? <ChevronRight />}
@@ -89,7 +89,7 @@ function BreadcrumbHome({
       data-slot="breadcrumb-home"
       role="presentation"
       aria-hidden="true"
-      className={cn('[&>svg]:size-4 text-green-500', className)}
+      className={cn('[&>svg]:size-4 text-blue-500', className)}
       {...props}
     >
       <Home />
@@ -116,12 +116,8 @@ function BreadcrumbEllipsis({
 }
 
 export {
-  Breadcrumb,
-  BreadcrumbHome,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
+    Breadcrumb, BreadcrumbEllipsis, BreadcrumbHome, BreadcrumbItem,
+    BreadcrumbLink, BreadcrumbList, BreadcrumbPage,
+    BreadcrumbSeparator
 }
+

src/components/ui/button.tsx

@@ -1,24 +1,31 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default:
+          'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-300',
+
         destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-300',
+
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border border-blue-200 text-blue-600 bg-white hover:bg-blue-50',
+
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          'bg-blue-100 text-blue-700 hover:bg-blue-200',
+
         ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+          'text-blue-600 hover:bg-blue-50',
+
+        link:
+          'text-blue-600 underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
@@ -33,7 +40,7 @@ const buttonVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  },
+  }
 )
 
 function Button({
@@ -51,7 +58,7 @@ function Button({
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({ variant, size }), className)}
       {...props}
     />
   )

src/components/ui/metrics-card.tsx

@@ -13,7 +13,7 @@ export function MetricsCard({ children, label, value, loading }: MetricsCardProp
     <Card className="px-6 border-2 bg-white hover:shadow-md transition-shadow gap-3">
       <div className="flex flex-row items-center justify-between">
         <div>
-          <div className="text-base text-gray-600 font-medium text-green-500">{label}</div>
+          <div className="text-base text-gray-600 font-medium text-blue-500">{label}</div>
           {
             loading ? "Loading..." : <div className="text-3xl font-bold text-gray-900">{value}</div>
           }

src/components/ui/pagination.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react'
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   MoreHorizontalIcon,
 } from 'lucide-react'
+import * as React from 'react'
 
+import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
-import { Button, buttonVariants } from '@/components/ui/button'
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
@@ -54,11 +54,14 @@ function PaginationLink({
       data-slot="pagination-link"
       data-active={isActive}
       className={cn(
-        buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
-          size,
-        }),
-        className,
+        'transition-colors',
+        isActive
+          ? 'bg-blue-500 text-white hover:bg-blue-700'
+          : 'text-blue-600 hover:bg-blue-50',
+        'rounded-md',
+        size === 'icon' && 'h-9 w-9 flex items-center justify-center',
+        size === 'default' && 'h-9 px-3 flex items-center justify-center',
+        className
       )}
       {...props}
     />
@@ -118,10 +121,6 @@ function PaginationEllipsis({
 
 export {
   Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
+  PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious
 }
+

src/lib/export-service.ts

@@ -131,7 +131,8 @@ export const exportCandidatesToCSV = async (
   search: string,
   sortConfig: { key: string | null; direction: "asc" | "desc" },
   filters: FilterFormValues,
-  criteriaId: string | null
+  criteriaId: string | null,
+  userId: string
 ): Promise<void> => {
   try {
     const params = new URLSearchParams()
@@ -143,20 +144,22 @@ export const exportCandidatesToCSV = async (
     }
 
     if (filters.domicile) params.set("domicile", filters.domicile)
-    if (filters.yoe) params.set("yoe", filters.yoe)
-    
-    filters.educations.forEach((edu, i) => {
-      const n = i + 1
-      if (edu.university) params.set(`univ_edu_${n}`, edu.university)
-      if (edu.major) params.set(`major_edu_${n}`, edu.major)
-      if (edu.gpa) params.set(`gpa_${n}`, edu.gpa)
-    })
-    
-    if (filters.softskills) params.append("softskills", filters.softskills)
-    if (filters.hardskills) params.append("hardskills", filters.hardskills)
-    if (filters.certifications) params.append("certifications", filters.certifications)
-    if (filters.businessDomain) params.append("business_domain", filters.businessDomain)
-    if (criteriaId) params.append("criteria_id", criteriaId)
+  if (filters.yoe) params.set("yoe", filters.yoe)
+  filters.educations.forEach((edu, i) => {
+    const n = i + 1
+    // Handle arrays for university and major
+    edu.university.forEach((univ) => params.append(`univ_edu_${n}`, univ))
+    edu.major.forEach((maj) => params.append(`major_edu_${n}`, maj))
+    if (edu.gpa) params.set(`gpa_${n}`, edu.gpa)
+  })
+  // Updated to handle arrays
+  filters.softskills.forEach((skill) => params.append("softskills", skill))
+  filters.hardskills.forEach((skill) => params.append("hardskills", skill))
+  filters.certifications.forEach((cert) => params.append("certifications", cert))
+  filters.businessDomain.forEach((domain) => params.append("business_domain", domain))
+  
+  if (criteriaId) params.append("criteria_id", criteriaId)
+  params.append("user_id", userId)
 
     // Call backend export endpoint
     const response = await authFetch(`/api/cv-profile/export?${params}`, {