update

src/app/api/agentic/route.ts

@@ -5,21 +5,21 @@ import { NextRequest, NextResponse } from "next/server";
 
 function toFilterBody(filters: FilterFormValues) {
   return {
-    gpa_edu_1:   filters.educations[0]?.gpa       || null,
-    univ_edu_1:  filters.educations[0]?.university || null,
-    major_edu_1: filters.educations[0]?.major      || null,
-    gpa_edu_2:   filters.educations[1]?.gpa        || null,
-    univ_edu_2:  filters.educations[1]?.university || null,
-    major_edu_2: filters.educations[1]?.major      || null,
-    gpa_edu_3:   filters.educations[2]?.gpa        || null,
-    univ_edu_3:  filters.educations[2]?.university || null,
-    major_edu_3: filters.educations[2]?.major      || null,
-    domicile:        filters.domicile      || null,
-    yoe:             filters.yoe           || null,
-    hardskills:      filters.hardskills?.length    ? [filters.hardskills]    : null,
-    softskills:      filters.softskills?.length    ? [filters.softskills]    : null,
-    certifications:  filters.certifications?.length ? [filters.certifications] : null,
-    business_domain: filters.businessDomain?.length ? [filters.businessDomain] : null,
+    gpa_edu_1:   filters.educations[0]?.gpa       || 0,
+    univ_edu_1:  filters.educations[0]?.university || [],
+    major_edu_1: filters.educations[0]?.major      || [],
+    gpa_edu_2:   filters.educations[1]?.gpa        || 0,
+    univ_edu_2:  filters.educations[1]?.university || [],
+    major_edu_2: filters.educations[1]?.major      || [],
+    gpa_edu_3:   filters.educations[2]?.gpa        || 0,
+    univ_edu_3:  filters.educations[2]?.university || [],
+    major_edu_3: filters.educations[2]?.major      || [],
+    domicile:        filters.domicile      || "",
+    yoe:             filters.yoe           || 0,
+    hardskills:      filters.hardskills?.length    ? [filters.hardskills]    : [],
+    softskills:      filters.softskills?.length    ? [filters.softskills]    : [],
+    certifications:  filters.certifications?.length ? [filters.certifications] : [],
+    business_domain: filters.businessDomain?.length ? [filters.businessDomain] : [],
   }
 }
 
@@ -41,46 +41,29 @@ function toWeightBody(value: CalculateWeightPayload): WeightBody {
 export async function POST(request: NextRequest) {
   const cookieStore = await cookies();
   const token = cookieStore.get('auth_token')?.value;
-  const body = await request.json()
-
-  const resCreateFilter = await fetch(
-    `https://byteriot-candidateexplorer.hf.space/CandidateExplorer/agentic/create_filter`,
-    {
-      method: "POST",
-      headers: {
-      Authorization: `Bearer ${token}`,
-      "Content-Type": "application/json",
-    },
-      body: JSON.stringify(toFilterBody(body.filters)),
-    }
-  )
-
-  const dataFilter = await resCreateFilter.json()
-
-  const resCreateWeight = await fetch(
-     `https://byteriot-candidateexplorer.hf.space/CandidateExplorer/agentic/create_weight?criteria_id=${dataFilter.criteria_id}`,
+  const requestJSON = await request.json()
+  const body = {
+        criteria: toFilterBody(requestJSON.filters),
+        criteria_weight: toWeightBody(requestJSON.weights),
+      }
+  const res = await fetch(
+     `https://byteriot-candidateexplorer.hf.space/CandidateExplorer/agentic/v2/calculate_score`,
     {
       method: "POST",
       headers: {
       Authorization: `Bearer ${token}`,
       "Content-Type": "application/json",
     },
-      body: JSON.stringify(toWeightBody(body.weights)),
+      body: JSON.stringify(body),
     }
   )
 
-  const dataWeight = await resCreateWeight.json()
+  const data = await res.json(); // <-- read body
 
-  const resCalculate = await fetch(
-     `https://byteriot-candidateexplorer.hf.space/CandidateExplorer/agentic/calculate_score?weight_id=${dataWeight.data.weight_id}`,
-    {
-      method: "POST",
-      headers: {
-      Authorization: `Bearer ${token}`,
-      "Content-Type": "application/json",
-    }
-    }
-  )
+  if (!res.ok) {
+    console.error("API Error:", data);
+    throw new Error(data?.detail || data?.message || "Something went wrong");
+  }
 
-  return NextResponse.json(dataFilter, { status: resCalculate.status })
+  return NextResponse.json(data, { status: res.status })
 }

src/app/api/cv-profile/charts/major/route.ts

@@ -2,9 +2,12 @@ import { prisma } from "@/lib/prisma";
 import { NextResponse } from "next/server";
 
 function randomColor() {
-  return `#${Math.floor(Math.random() * 16777215)
-    .toString(16)
-    .padStart(6, "0")}`;
+  const hue = Math.floor(Math.random() * 360);
+
+  const saturation = 50 + Math.random() * 20; // 50–70%
+  const lightness = 60 + Math.random() * 10;  // 60–70%
+
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 }
 
 export async function GET(req: Request) {

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

@@ -72,12 +72,14 @@ export async function GET(request: NextRequest) {
   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");
+  
+  // Education filters - now supporting multiple values
+  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");
@@ -153,14 +155,30 @@ export async function GET(request: NextRequest) {
       ...(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 }),
+      
+      // Education filters - using OR for multiple values within same field
+      ...(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 && { univ_edu_2 }),
-      ...(major_edu_2 && { major_edu_2 }),
+      
+      ...(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 && { univ_edu_3 }),
-      ...(major_edu_3 && { major_edu_3 }),
+      
+      ...(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) } }),
     };
 
@@ -266,4 +284,4 @@ export async function GET(request: NextRequest) {
     console.error(error);
     return NextResponse.json({ error: "Failed to fetch profiles" }, { status: 500 });
   }
-}
+}

src/app/recruitment/upload/page.tsx

@@ -116,7 +116,21 @@ export default function CandidateExplorer() {
   // ============================================================================
   // COMBINE SERVER FILES + UPLOADING FILES
   // ============================================================================
-  const allFiles = [...uploadingFiles, ...serverFiles];
+  const allFiles = React.useMemo(() => {
+    const map = new Map<string, UploadedFile>();
+
+    // Put server files first
+    serverFiles.forEach(file => {
+      map.set(file.filename, file);
+    });
+
+    // Uploading files override same filename
+    uploadingFiles.forEach(file => {
+      map.set(file.filename, file);
+    });
+
+    return Array.from(map.values());
+  }, [serverFiles, uploadingFiles]);
 
   // ============================================================================
   // EXTRACT MUTATION
@@ -168,9 +182,38 @@ export default function CandidateExplorer() {
   // DELETE MUTATION
   // ============================================================================
   const deleteMutation = useMutation({
-    mutationFn: (fileId: string) => deleteFileApi(fileId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['userFiles', user?.user_id] });
+    mutationFn: (filename: string) => deleteFileApi(filename),
+
+    onMutate: async (filename) => {
+      await queryClient.cancelQueries({ queryKey: ['userFiles', user?.user_id] });
+
+      const previousFiles = queryClient.getQueryData<UploadedFile[]>([
+        'userFiles',
+        user?.user_id
+      ]);
+
+      // Optimistically remove from cache
+      queryClient.setQueryData<UploadedFile[]>(
+        ['userFiles', user?.user_id],
+        (old = []) => old.filter(file => file.filename !== filename)
+      );
+
+      return { previousFiles };
+    },
+
+    onError: (_err, _filename, context) => {
+      // Rollback if failed
+      if (context?.previousFiles) {
+        queryClient.setQueryData(
+          ['userFiles', user?.user_id],
+          context.previousFiles
+        );
+      }
+    },
+
+    onSettled: () => {
+      // ❌ No invalidateQueries
+      // We trust optimistic update
     },
   });
 
@@ -338,22 +381,29 @@ export default function CandidateExplorer() {
   // DELETE FILE
   // ============================================================================
   const deleteFile = (fileId: string) => {
-    const file = allFiles.find(f => f.id === fileId);
-
-    // If uploading, abort
-    if (file?.uploadStatus === 'uploading') {
-      const abortController = abortControllersRef.current.get(fileId);
-      if (abortController) {
-        abortController.abort();
-        abortControllersRef.current.delete(fileId);
-      }
-      setUploadingFiles(prev => prev.filter(f => f.id !== fileId));
-      return;
+  const file = allFiles.find(f => f.id === fileId);
+  if (!file) return;
+
+  // 1️⃣ If still uploading → abort
+  if (file.uploadStatus === 'uploading') {
+    const abortController = abortControllersRef.current.get(fileId);
+    if (abortController) {
+      abortController.abort();
+      abortControllersRef.current.delete(fileId);
     }
+    setUploadingFiles(prev => prev.filter(f => f.id !== fileId));
+    return;
+  }
 
-    // If uploaded, delete from server
-    deleteMutation.mutate(file?.filename ?? "");
-  };
+  // 2️⃣ If upload failed or cancelled → just remove locally
+  if (file.uploadStatus === 'error' || file.uploadStatus === 'cancelled') {
+    setUploadingFiles(prev => prev.filter(f => f.id !== fileId));
+    return;
+  }
+
+  // 3️⃣ If success → delete from backend (optimistic)
+  deleteMutation.mutate(file.filename);
+};
 
   // ============================================================================
   // CALCULATE STATISTICS

src/components/dashboard/candidates-table.tsx

@@ -17,6 +17,7 @@ import { Check, ChevronDown, ChevronUp, Columns, Eye, Filter, Plus, Search, Tras
 import { memo, useCallback, useEffect, useMemo, useState } from "react"
 import { useFieldArray, useForm } from "react-hook-form"
 import { Combobox, ComboboxOption } from "../ui/combobox"
+import { MultiSelect } from "./multiple-dropdown"
 
 // ============= FETCHER FUNCTIONS (outside component) =============
 const fetchOptions = async (): Promise<OptionsData> => {
@@ -48,14 +49,17 @@ const fetchCandidates = async (
   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)
+    // 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)
   })
-  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)
+  // 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)
 
@@ -313,13 +317,13 @@ const FilterDialog = memo(({
 
   const handleReset = () => {
     filterForm.reset({
-      educations: [{ university: "", major: "", gpa: "" }],
+      educations: [{ university: [], major: [], gpa: "" }],
       domicile: "",
       yoe: "",
-      hardskills: "",
-      softskills: "",
-      certifications: "",
-      businessDomain: "",
+      hardskills: [],
+      softskills: [],
+      certifications: [],
+      businessDomain: [],
     })
   }
 
@@ -330,7 +334,7 @@ const FilterDialog = memo(({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChangeDialog}>
-      <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col" size="4xl">
+      <DialogContent className="flex flex-col" size="5xl">
         <DialogHeader>
           <DialogTitle>Filter</DialogTitle>
         </DialogHeader>
@@ -370,12 +374,11 @@ const FilterDialog = memo(({
                                 University
                               </FormLabel>
                               <FormControl>
-                                <Combobox
+                                <MultiSelect
                                   options={toOptions(options.univ_edu)}
                                   value={field.value}
-                                  onValueChange={field.onChange}
-                                  placeholder="Select university"
-                                  searchPlaceholder="Search..."
+                                  onChange={field.onChange}
+                                  placeholder="Select universities"
                                 />
                               </FormControl>
                             </FormItem>
@@ -390,12 +393,11 @@ const FilterDialog = memo(({
                                 Major
                               </FormLabel>
                               <FormControl>
-                                <Combobox
+                                <MultiSelect
                                   options={toOptions(options.major_edu)}
                                   value={field.value}
-                                  onValueChange={field.onChange}
-                                  placeholder="Select major"
-                                  searchPlaceholder="Search..."
+                                  onChange={field.onChange}
+                                  placeholder="Select majors"
                                 />
                               </FormControl>
                             </FormItem>
@@ -486,20 +488,17 @@ const FilterDialog = memo(({
                       <FormItem>
                         <FormLabel className="text-sm text-muted-foreground">Softskills</FormLabel>
                         <FormControl>
-                          <Combobox
+                          <MultiSelect
                             options={toOptions(options.softskills)}
                             value={field.value}
-                            onValueChange={field.onChange}
-                            placeholder="Select softskill"
-                            searchPlaceholder="Search..."
+                            onChange={field.onChange}
+                            placeholder="Select softskills"
                           />
                         </FormControl>
                       </FormItem>
                     )}
                   />
 
-
-
                   <FormField
                     control={filterForm.control}
                     name="hardskills"
@@ -507,12 +506,11 @@ const FilterDialog = memo(({
                       <FormItem>
                         <FormLabel className="text-sm text-muted-foreground">Hardskills</FormLabel>
                         <FormControl>
-                          <Combobox
+                          <MultiSelect
                             options={toOptions(options.hardskills)}
                             value={field.value}
-                            onValueChange={field.onChange}
-                            placeholder="Select certification"
-                            searchPlaceholder="Search..."
+                            onChange={field.onChange}
+                            placeholder="Select hardskills"
                           />
                         </FormControl>
                       </FormItem>
@@ -526,12 +524,11 @@ const FilterDialog = memo(({
                       <FormItem>
                         <FormLabel className="text-sm text-muted-foreground">Certifications</FormLabel>
                         <FormControl>
-                          <Combobox
+                          <MultiSelect
                             options={toOptions(options.certifications)}
                             value={field.value}
-                            onValueChange={field.onChange}
-                            placeholder="Select certification"
-                            searchPlaceholder="Search..."
+                            onChange={field.onChange}
+                            placeholder="Select certifications"
                           />
                         </FormControl>
                       </FormItem>
@@ -545,12 +542,11 @@ const FilterDialog = memo(({
                       <FormItem>
                         <FormLabel className="text-sm text-muted-foreground">Business Domain</FormLabel>
                         <FormControl>
-                          <Combobox
+                          <MultiSelect
                             options={toOptions(options.business_domain)}
                             value={field.value}
-                            onValueChange={field.onChange}
-                            placeholder="Select domain"
-                            searchPlaceholder="Search..."
+                            onChange={field.onChange}
+                            placeholder="Select domains"
                           />
                         </FormControl>
                       </FormItem>
@@ -609,47 +605,315 @@ const SliderRow = memo(({
 ))
 SliderRow.displayName = "SliderRow"
 
-// ============= FILTER DIALOG =============
-const CalculateDialog = memo(({
-  open, onOpenChange, filter, onApplyCalculation
+// ============= CRITERIA EDIT DIALOG =============
+const CriteriaEditDialog = memo(({
+  open, onOpenChange, criteriaData, options, onApply
 }: {
   open: boolean
   onOpenChange: (open: boolean) => void
-  filter: FilterFormValues
-  onApplyCalculation: (values: CalculateWeightPayload) => void,
+  criteriaData: FilterFormValues
+  options: OptionsData
+  onApply: (values: FilterFormValues) => void
 }) => {
+  const toOptions = (arr: string[]): ComboboxOption[] =>
+    arr.map((v) => ({ value: v, label: v }))
+
+  const criteriaForm = useForm<FilterFormValues>({
+    defaultValues: criteriaData,
+  })
+
+  const { fields, append, remove } = useFieldArray({
+    control: criteriaForm.control,
+    name: "educations",
+  })
+
+  const handleApply = criteriaForm.handleSubmit((values) => {
+    onApply(values)
+  })
+
+  const handleReset = () => {
+    criteriaForm.reset({
+      educations: [{ university: [], major: [], gpa: "" }],
+      domicile: "",
+      yoe: "",
+      hardskills: [],
+      softskills: [],
+      certifications: [],
+      businessDomain: [],
+    })
+  }
+
+  const onOpenChangeDialog = (open: boolean) => {
+    criteriaForm.reset(criteriaData)
+    onOpenChange(open)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChangeDialog}>
+      <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col" size="5xl">
+        <DialogHeader>
+          <DialogTitle>Scoring Criteria</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto pr-1">
+          <Form {...criteriaForm}>
+            <form className="space-y-6">
+
+              {/* EDUCATION */}
+              <div>
+                <h4 className="font-medium mb-3">Education</h4>
+                <div className="space-y-4">
+                  {fields.map((field, index) => (
+                    <div key={field.id} className="border rounded-lg p-4 relative">
+                      <p className="text-xs text-muted-foreground mb-3 font-medium">
+                        Education {index + 1}
+                      </p>
+
+                      {/* Remove button (only show if more than 1) */}
+                      {fields.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => remove(index)}
+                          className="absolute top-3 right-3 text-xs text-red-500 hover:text-red-700"
+                        >
+                          <Trash2 size={16} />
+                        </button>
+                      )}
+
+                      <div className="grid grid-cols-3 gap-4">
+                        <FormField
+                          control={criteriaForm.control}
+                          name={`educations.${index}.university`}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-sm text-muted-foreground">
+                                University
+                              </FormLabel>
+                              <FormControl>
+                                <MultiSelect
+                                  options={toOptions(options.univ_edu)}
+                                  value={field.value}
+                                  onChange={field.onChange}
+                                  placeholder="Select universities"
+                                />
+                              </FormControl>
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={criteriaForm.control}
+                          name={`educations.${index}.major`}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-sm text-muted-foreground">
+                                Major
+                              </FormLabel>
+                              <FormControl>
+                                <MultiSelect
+                                  options={toOptions(options.major_edu)}
+                                  value={field.value}
+                                  onChange={field.onChange}
+                                  placeholder="Select majors"
+                                />
+                              </FormControl>
+                            </FormItem>
+                          )}
+                        />
+                        <div className="space-y-1">
+                          <FormLabel className="text-sm text-muted-foreground">
+                            GPA Range
+                          </FormLabel>
+                          <div className="flex gap-2">
+                            <FormField
+                              control={criteriaForm.control}
+                              name={`educations.${index}.gpa`}
+                              render={({ field }) => (
+                                <FormItem className="flex-1">
+                                  <FormControl>
+                                    <Input type="number" onChange={(e) => field.onChange(e.target.value)} value={field.value} placeholder="Type GPA" />
+                                  </FormControl>
+                                </FormItem>
+                              )}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Add Education Button — max 3 */}
+                {fields.length < 3 && (
+                  <Button
+                    type="button"
+                    variant="link"
+                    className="text-green-600 mt-2 p-0 h-auto"
+                    onClick={() => append({ university: "", major: "", gpa: "" })}
+                  >
+                    + Add Education
+                  </Button>
+                )}
+              </div>
 
-  // ---- Which fields are active based on filter ----
+              {/* OTHERS */}
+              <div>
+                <h4 className="font-medium mb-3">Others</h4>
+                <div className="grid grid-cols-2 gap-4">
+                  <FormField
+                    control={criteriaForm.control}
+                    name="domicile"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-sm text-muted-foreground">Domicile</FormLabel>
+                        <FormControl>
+                          <Combobox
+                            options={toOptions(options.domicile)}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                            placeholder="Select city"
+                            searchPlaceholder="Search city..."
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <div className="space-y-1">
+                    <FormLabel className="text-sm text-muted-foreground">YoE Range</FormLabel>
+                    <div className="flex gap-2">
+                      <FormField
+                        control={criteriaForm.control}
+                        name="yoe"
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormControl>
+                              <Input type="number" onChange={(e) => field.onChange(e.target.value)} value={field.value} placeholder="Type YoE" />
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  </div>
+
+                  <FormField
+                    control={criteriaForm.control}
+                    name="softskills"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-sm text-muted-foreground">Softskills</FormLabel>
+                        <FormControl>
+                          <MultiSelect
+                            options={toOptions(options.softskills)}
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder="Select softskills"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={criteriaForm.control}
+                    name="hardskills"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-sm text-muted-foreground">Hardskills</FormLabel>
+                        <FormControl>
+                          <MultiSelect
+                            options={toOptions(options.hardskills)}
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder="Select hardskills"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={criteriaForm.control}
+                    name="certifications"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-sm text-muted-foreground">Certifications</FormLabel>
+                        <FormControl>
+                          <MultiSelect
+                            options={toOptions(options.certifications)}
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder="Select certifications"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={criteriaForm.control}
+                    name="businessDomain"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-sm text-muted-foreground">Business Domain</FormLabel>
+                        <FormControl>
+                          <MultiSelect
+                            options={toOptions(options.business_domain)}
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder="Select domains"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </div>
+
+            </form>
+          </Form>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleReset}>Reset</Button>
+          <Button onClick={handleApply} className="bg-green-600 hover:bg-green-700 text-white">
+            Apply
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+})
+CriteriaEditDialog.displayName = "CriteriaEditDialog"
+
+// ============= CALCULATE SCORE DIALOG =============
+const CalculateScoreDialog = memo(({
+  open, onOpenChange, targetData, options, onApplyCalculation, onEditCriteria
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  targetData: FilterFormValues
+  options: OptionsData
+  onApplyCalculation: (values: CalculateWeightPayload) => void
+  onEditCriteria: () => void
+}) => {
+
+  // ---- Which fields are active based on targetData ----
   const activeFields = useMemo(() => ({
     // Education — check per index
-    education: filter.educations.map((e) => ({
-      university: !!e.university,
-      major: !!e.major,
+    education: targetData.educations.map((e) => ({
+      university: e.university.length > 0,
+      major: e.major.length > 0,
       gpa: !!(e.gpa),
     })),
     others: {
-      domicile: !!filter.domicile,
-      yearOfExperiences: !!(filter.yoe),
-      hardskills: !!(filter.hardskills),
-      softskills: !!filter.softskills,
-      certifications: !!filter.certifications,
-      businessDomain: !!filter.businessDomain,
+      domicile: !!targetData.domicile,
+      yearOfExperiences: !!(targetData.yoe),
+      hardskills: targetData.hardskills.length > 0,
+      softskills: targetData.softskills.length > 0,
+      certifications: targetData.certifications.length > 0,
+      businessDomain: targetData.businessDomain.length > 0,
     }
-  }), [filter])
-
-  // ---- Reset values for disabled fields to 0 when filter changes ----
-  useEffect(() => {
-    Object.entries(activeFields.others).forEach(([key, active]) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if (!active) setValue(`others.${key}` as any, 0)
-    })
-    activeFields.education.forEach((edu, i) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if (!edu.university) setValue(`education.${i}.university` as any, 0)
-      if (!edu.major) setValue(`education.${i}.major`, 0)
-      if (!edu.gpa) setValue(`education.${i}.gpa`, 0)
-    })
-  }, [activeFields])
+  }), [targetData])
 
   const { control, watch, setValue, reset, handleSubmit } = useForm({
     defaultValues: {
@@ -674,6 +938,20 @@ const CalculateDialog = memo(({
 
   const watchAll = watch();
 
+  // ---- Reset values for disabled fields to 0 when targetData changes ----
+  useEffect(() => {
+    Object.entries(activeFields.others).forEach(([key, active]) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (!active) setValue(`others.${key}` as any, 0)
+    })
+    activeFields.education.forEach((edu, i) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (!edu.university) setValue(`education.${i}.university` as any, 0)
+      if (!edu.major) setValue(`education.${i}.major`, 0)
+      if (!edu.gpa) setValue(`education.${i}.gpa`, 0)
+    })
+  }, [activeFields, setValue])
+
   const calculateTotal = () => {
     let total = 0;
 
@@ -731,13 +1009,84 @@ const CalculateDialog = memo(({
 
   const total = calculateTotal();
 
+  // Check if there's any criteria set
+  const hasCriteria = useMemo(() => {
+    return targetData.educations.some(e => e.university.length > 0 || e.major.length > 0 || e.gpa) ||
+      !!targetData.domicile ||
+      !!targetData.yoe ||
+      targetData.hardskills.length > 0 ||
+      targetData.softskills.length > 0 ||
+      targetData.certifications.length > 0 ||
+      targetData.businessDomain.length > 0
+  }, [targetData])
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col" size="2xl">
+      <DialogContent className="flex flex-col" size="3xl">
         <DialogHeader className="flex-shrink-0">
           <DialogTitle>Calculate Score</DialogTitle>
         </DialogHeader>
         <div className="flex-1 overflow-y-auto px-1">
+          {/* Scoring Criteria Section */}
+          <div className="mb-6 p-4 border border-gray-200 rounded-lg bg-gray-50">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="font-semibold text-sm">Scoring Criteria</h3>
+              <Button 
+                variant="outline" 
+                size="sm" 
+                onClick={onEditCriteria}
+                className="h-8 text-xs"
+              >
+                Edit
+              </Button>
+            </div>
+            
+            {!hasCriteria ? (
+              <p className="text-sm text-muted-foreground italic">
+                No criteria set. Click "Edit" to define scoring criteria.
+              </p>
+            ) : (
+              <div className="space-y-3 text-sm">
+                {/* Education Criteria */}
+                {targetData.educations.some(e => e.university.length > 0 || e.major.length > 0 || e.gpa) && (
+                  <div>
+                    <p className="font-medium text-xs text-gray-500 mb-2">Education</p>
+                    <div className="space-y-2">
+                      {targetData.educations.map((edu, idx) => {
+                        const items = []
+                        if (edu.university.length > 0) items.push(`University: ${edu.university.join(", ")}`)
+                        if (edu.major.length > 0) items.push(`Major: ${edu.major.join(", ")}`)
+                        if (edu.gpa) items.push(`GPA: ${edu.gpa}`)
+                        
+                        return items.length > 0 ? (
+                          <div key={idx} className="pl-3">
+                            <span className="text-xs text-gray-400">#{idx + 1}</span> {items.join(', ')}
+                          </div>
+                        ) : null
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Others Criteria */}
+                {(targetData.domicile || targetData.yoe || targetData.hardskills.length > 0 || 
+                  targetData.softskills.length > 0 || targetData.certifications.length > 0 || targetData.businessDomain.length > 0) && (
+                  <div>
+                    <p className="font-medium text-xs text-gray-500 mb-2">Others</p>
+                    <div className="space-y-1 pl-3">
+                      {targetData.domicile && <div>Domicile: {targetData.domicile}</div>}
+                      {targetData.yoe && <div>Years of Experience: {targetData.yoe}</div>}
+                      {targetData.hardskills.length > 0 && <div>Hardskills: {targetData.hardskills.join(", ")}</div>}
+                      {targetData.softskills.length > 0 && <div>Softskills: {targetData.softskills.join(", ")}</div>}
+                      {targetData.certifications.length > 0 && <div>Certifications: {targetData.certifications.join(", ")}</div>}
+                      {targetData.businessDomain.length > 0 && <div>Business Domain: {targetData.businessDomain.join(", ")}</div>}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
           <p className="text-sm text-gray-600 mb-6">
             Allocate weight to each category. The total must equal exactly 100 points,
             then hit the calculate button if you finish with allocation.
@@ -790,7 +1139,6 @@ const CalculateDialog = memo(({
               </div>
             ))}
 
-
             {
               fields.length < 3 ? <Button
                 type="button"
@@ -854,7 +1202,7 @@ const CalculateDialog = memo(({
     </Dialog>
   )
 })
-CalculateDialog.displayName = "CalculateDialog"
+CalculateScoreDialog.displayName = "CalculateScoreDialog"
 
 // ============= LOADING DIALOGS =============
 const LoadingDialog = memo(({ open }: { open: boolean }) => (
@@ -911,12 +1259,15 @@ export default function CandidateTable() {
   const [tempVisibleColumns, setTempVisibleColumns] = useState(visibleColumns)
 
   const defaultFilters: FilterFormValues = {
-    educations: [{ university: "", major: "", gpa: "" }],
-    domicile: "", yoe: "", hardskills: "",
-    softskills: "", certifications: "", businessDomain: "",
+    educations: [{ university: [], major: [], gpa: "" }],
+    domicile: "", yoe: "", hardskills: [],
+    softskills: [], certifications: [], businessDomain: [],
   }
   const [appliedFilters, setAppliedFilters] = useState<FilterFormValues>(defaultFilters)
+  const [scoringCriteria, setScoringCriteria] = useState<FilterFormValues>(defaultFilters)
+  
   const [showFilter, setShowFilter] = useState(false)
+  const [showCriteriaEdit, setShowCriteriaEdit] = useState(false)
   const [showColumnSettings, setShowColumnSettings] = useState(false)
   const [showCalculateScore, setShowCalculateScore] = useState(false)
   const [isCalculating, setIsCalculating] = useState(false)
@@ -945,7 +1296,7 @@ export default function CandidateTable() {
     staleTime: 0, // always fresh
     placeholderData: (prev) => prev, // keep previous data while loading (no flicker)
     refetchOnWindowFocus: false,
-refetchOnMount: false,
+    refetchOnMount: false,
   })
 
   const candidates: Candidate[] = useMemo(
@@ -995,7 +1346,7 @@ refetchOnMount: false,
 
   const { mutate: createScore } = useMutation({
     mutationFn: ({ value }: { value: CalculateWeightPayload }) =>
-      createAndCalculateScore(appliedFilters, value),
+      createAndCalculateScore(scoringCriteria, value),
     onSuccess: ({ criteriaId }) => {
       setCriteriaId(criteriaId)
       refetch()
@@ -1022,6 +1373,17 @@ refetchOnMount: false,
     setCriteriaId(null)
   }
 
+  const handleCriteriaSubmit = (values: FilterFormValues) => {
+    setScoringCriteria(values)
+    setShowCriteriaEdit(false)
+    setShowCalculateScore(true) // Reopen calculate score dialog
+  }
+
+  const handleEditCriteria = () => {
+    setShowCalculateScore(false)
+    setShowCriteriaEdit(true)
+  }
+
   const handleExport = async () => {
     try {
       setIsExporting(true)
@@ -1029,7 +1391,7 @@ refetchOnMount: false,
         debouncedSearch,
         sortConfig,
         appliedFilters,
-        "7e6e4e8f-7ab9-4fda-8398-b42380b1b834"
+        criteriaId
       )
     } catch (error) {
       console.error("Export failed:", error)
@@ -1111,11 +1473,21 @@ refetchOnMount: false,
         onApply={handleFilterSubmit}
       />
 
-      <CalculateDialog
+      <CriteriaEditDialog
+        open={showCriteriaEdit}
+        onOpenChange={setShowCriteriaEdit}
+        criteriaData={scoringCriteria}
+        options={options}
+        onApply={handleCriteriaSubmit}
+      />
+
+      <CalculateScoreDialog
         open={showCalculateScore}
         onOpenChange={setShowCalculateScore}
-        filter={appliedFilters}
+        targetData={scoringCriteria}
+        options={options}
         onApplyCalculation={onApplyCalculation}
+        onEditCriteria={handleEditCriteria}
       />
 
       <DetailDialog

src/components/dashboard/filter-dialog.tsx

@@ -1,13 +1,13 @@
 'use client';
 
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 
 interface FilterDialogProps {

src/components/dashboard/multiple-dropdown.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import * as React from "react";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 import {
   Command,
   CommandEmpty,
@@ -10,12 +9,14 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import { cn } from "@/lib/utils";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
 
 export function MultiSelect({
   options,
@@ -36,20 +37,34 @@ export function MultiSelect({
     } else {
       onChange([...value, val]);
     }
+    // Don't close the popover - keep it open for multiple selections
   };
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      {/* IMPORTANT FIX: use asChild & replace button with div */}
       <PopoverTrigger asChild>
         <div
           className={cn(
-            "border w-full px-3 py-2 rounded-md flex items-center justify-between cursor-pointer",
+            "border w-full min-h-[40px] px-3 py-2 rounded-md flex items-center justify-between cursor-pointer gap-2",
             value.length === 0 && "text-muted-foreground"
           )}
         >
-          {value.length > 0 ? value.join(", ") : placeholder}
-          <ChevronsUpDown className="h-4 w-4 opacity-50" />
+          <div className="flex flex-wrap gap-1 flex-1">
+            {value.length === 0 ? (
+              <span>{placeholder}</span>
+            ) : (
+              value.map((val) => (
+                <Badge
+                  key={val}
+                  variant="secondary"
+                  className="text-xs px-2 py-0.5 gap-1"
+                >
+                  {val}
+                </Badge>
+              ))
+            )}
+          </div>
+          <ChevronsUpDown className="h-4 w-4 opacity-50 shrink-0" />
         </div>
       </PopoverTrigger>
 
@@ -69,12 +84,14 @@ export function MultiSelect({
                     onSelect={() => toggleValue(option.value)}
                     className="flex items-center gap-2 cursor-pointer"
                   >
-                    <Check
+                    <div
                       className={cn(
-                        "h-4 w-4",
-                        selected ? "opacity-100" : "opacity-0"
+                        "h-4 w-4 border rounded-sm flex items-center justify-center",
+                        selected ? "bg-primary border-primary" : "border-input"
                       )}
-                    />
+                    >
+                      {selected && <Check className="h-3 w-3 text-primary-foreground" />}
+                    </div>
                     {option.label}
                   </CommandItem>
                 );
@@ -85,4 +102,4 @@ export function MultiSelect({
       </PopoverContent>
     </Popover>
   );
-}
+}

src/types/candidate-table.ts

@@ -40,16 +40,16 @@ export interface PaginationProps {
 
 export interface FilterFormValues {
   educations: {
-    university: string
-    major: string
+    university: string[]
+    major: string[]
     gpa: string
   }[]
   domicile: string
   yoe: string
-  softskills: string
-  hardskills: string
-  certifications: string
-  businessDomain: string
+  softskills: string[]
+  hardskills: string[]
+  certifications: string[]
+  businessDomain: string[]
 }
 
 export interface OptionsData {