Added AI score and Insights

backend/api.py

@@ -12,6 +12,8 @@ from fastapi.middleware.cors import CORSMiddleware
 from supabase_ingest import process_resume
 from src.extraction.job_extractor import process_single_job
 from src.services.ats_service import analyze_ats_compatibility
+from src.services.analysis import identify_missing_skills, generate_ai_analysis
+from typing import Dict, Any, Optional, List
 
 
 app = FastAPI()
@@ -56,8 +58,6 @@ async def process_resume_endpoint(request: ResumeRequest):
 # WEBHOOK ENDPOINT (Called by Supabase)
 # ---------------------------------------------------------------------
 
-from typing import Dict, Any, Optional
-
 class StorageEventRequest(BaseModel):
     type: str
     table: str
@@ -153,5 +153,92 @@ async def analyze_ats_endpoint(
         print(f"❌ ATS Analysis failed: {e}")
         raise HTTPException(status_code=500, detail=str(e))
 
+# ---------------------------------------------------------------------
+# CANDIDATE ANALYSIS ENDPOINT
+# ---------------------------------------------------------------------
+
+class AnalysisRequest(BaseModel):
+    candidate_id: str
+    job_id: Optional[str] = None
+
+@app.post("/analyze-candidate")
+async def analyze_candidate_endpoint(request: AnalysisRequest):
+    """
+    Detailed candidate analysis: Summary + Missing Skills.
+    """
+    print(f"🔬 Analyzing candidate {request.candidate_id} for job {request.job_id}")
+    
+    try:
+        # 1. Fetch Candidate Data
+        prof_resp = client.table("profiles").select("*").eq("id", request.candidate_id).execute()
+        if not prof_resp.data:
+            raise HTTPException(status_code=404, detail="Candidate not found")
+        
+        profile = prof_resp.data[0]
+        
+        # 2. Fetch Job Data
+        job_description = ""
+        job_skills = []
+        
+        if request.job_id:
+            job_resp = client.table("jobs").select("*").eq("id", request.job_id).execute()
+            if job_resp.data:
+                job = job_resp.data[0]
+                job_description = job.get("description") or ""
+                # Assume job.skills is a list or comma-separated string
+                raw_job_skills = job.get("skills") if job.get("skills") else job.get("technical_skills")
+                if isinstance(raw_job_skills, str):
+                    job_skills = [s.strip() for s in raw_job_skills.split(",") if s.strip()]
+                elif isinstance(raw_job_skills, list):
+                    job_skills = raw_job_skills
+                else:
+                    job_skills = []
+
+        # 3. Prepare Profile Skills
+        profile_skills = []
+        raw_skills = profile.get("skills") or []
+        if isinstance(raw_skills, str):
+            profile_skills = [s.strip() for s in raw_skills.split(",") if s.strip()]
+        else:
+            profile_skills = raw_skills
+            
+        raw_tech_skills = profile.get("technical_skills") or []
+        if isinstance(raw_tech_skills, str):
+            profile_skills.extend([s.strip() for s in raw_tech_skills.split(",") if s.strip()])
+        else:
+            profile_skills.extend(raw_tech_skills)
+
+        # 4. Generate AI Insights (Summary, Strengths, Weaknesses)
+        profile_summary = f"""
+        Role: {profile.get('role')}
+        Headline: {profile.get('headline')}
+        Summary: {profile.get('summary')}
+        Experience: {profile.get('experience_years')} years
+        Work Experience: {profile.get('work_experience')}
+        Education: {profile.get('education')}
+        Skills: {", ".join(profile_skills)}
+        """
+        
+        ai_insights = generate_ai_analysis(profile_summary, job_description)
+        
+        # 5. Identify Missing Skills (Semantic)
+        missing = []
+        if job_skills:
+            missing = identify_missing_skills(job_skills, profile_skills)
+
+        return {
+            "status": "success",
+            "data": {
+                "summary": ai_insights.get("summary"),
+                "strengths": ai_insights.get("strengths"),
+                "weaknesses": ai_insights.get("weaknesses"),
+                "score": ai_insights.get("score") or 0,
+                "missing_skills": missing
+            }
+        }
+
+    except Exception as e:
+        print(f"❌ Analysis failed: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
 
 # Run with: uvicorn api:app --reload

backend/get_test_ids.py

@@ -0,0 +1,22 @@
+import os
+from supabase import create_client
+from dotenv import load_dotenv
+
+load_dotenv()
+
+url = os.environ.get("SUPABASE_URL")
+key = os.environ.get("SUPABASE_SERVICE_ROLE_KEY")
+supabase = create_client(url, key)
+
+try:
+    # Get an application with user and job relations
+    res = supabase.table("applications").select("user_id, job_id").limit(1).execute()
+    if res.data:
+        app = res.data[0]
+        # In this project, user_id might be the profile id
+        print(f"Candidate ID (profile): {app['user_id']}")
+        print(f"Job ID: {app['job_id']}")
+    else:
+        print("No applications found.")
+except Exception as e:
+    print(f"Error: {e}")

backend/get_valid_ids.py

@@ -0,0 +1,21 @@
+import os
+from supabase import create_client
+from dotenv import load_dotenv
+
+load_dotenv()
+
+url = os.environ.get("SUPABASE_URL")
+key = os.environ.get("SUPABASE_SERVICE_ROLE_KEY")
+supabase = create_client(url, key)
+
+try:
+    # Get one profile
+    p_res = supabase.table("profiles").select("id").limit(1).execute()
+    # Get one job
+    j_res = supabase.table("jobs").select("id").limit(1).execute()
+    
+    if p_res.data and j_res.data:
+        print(f"CANDIDATE_ID={p_res.data[0]['id']}")
+        print(f"JOB_ID={j_res.data[0]['id']}")
+except Exception as e:
+    print(f"Error: {e}")

backend/list_models.py

@@ -0,0 +1,14 @@
+import os
+from google import genai
+from dotenv import load_dotenv
+
+load_dotenv()
+
+client = genai.Client(api_key=os.getenv("GEMINI_API_KEY"))
+
+try:
+    print("Listing available models:")
+    for m in client.models.list():
+        print(f"Model ID: {m.name}, Display Name: {m.display_name}")
+except Exception as e:
+    print(f"Error listing models: {e}")

backend/src/services/__init__.py

@@ -0,0 +1 @@
+# Init file for services package

backend/src/services/analysis.py

@@ -0,0 +1,80 @@
+
+import os
+import json
+import numpy as np
+from typing import List, Dict, Any
+from google import genai
+import google.genai.types as types
+from src.embeddings.local_embedder import generate_embedding, generate_list_embedding, get_model
+
+# Initialize Gemini Client
+client = genai.Client(api_key="AIzaSyB2Dw-nep3SwQav5S_1qJ2FoVc4I83a2yk")
+
+def cosine_similarity(v1, v2):
+    v1 = np.array(v1)
+    v2 = np.array(v2)
+    return np.dot(v1, v2) / (np.linalg.norm(v1) * np.linalg.norm(v2))
+
+def identify_missing_skills(job_skills: List[str], profile_skills: List[str], threshold: float = 0.7) -> List[str]:
+    """
+    Identifies skills required by the job but missing (semantically) in the profile.
+    """
+    if not job_skills:
+        return []
+    if not profile_skills:
+        return job_skills
+
+    # Generate embeddings for profile skills
+    model = get_model()
+    profile_embeddings = model.encode(profile_skills, normalize_embeddings=True)
+    job_embeddings = model.encode(job_skills, normalize_embeddings=True)
+
+    missing_skills = []
+
+    for i, job_skill in enumerate(job_skills):
+        job_vec = job_embeddings[i]
+        # Find max similarity with any profile skill
+        similarities = [np.dot(job_vec, prof_vec) for prof_vec in profile_embeddings]
+        max_sim = max(similarities) if similarities else 0
+        
+        if max_sim < threshold:
+            missing_skills.append(job_skill)
+    
+    return missing_skills
+
+def generate_ai_analysis(profile_text: str, job_description: str) -> Dict[str, Any]:
+    """
+    Uses Gemini to generate a professional summary and evaluation.
+    """
+    system_prompt = """
+    You are an expert HR Analyst. Analyze the provided candidate resume text against the job description.
+    
+    Return a JSON object with:
+    - "summary": A 2-3 sentence professional summary of why the candidate is or isn't a good fit.
+    - "strengths": A list of top 3 core strengths matching the job.
+    - "weaknesses": A list of top 2-3 areas for improvement or missing qualifications.
+    - "score": An overall suitability score from 0 to 100 based on their experience and skills relative to the job requirements.
+    
+    Be objective, professional, and concise.
+    """
+    
+    user_content = f"JOB DESCRIPTION:\n{job_description}\n\nCANDIDATE RESUME:\n{profile_text}"
+    
+    try:
+        response = client.models.generate_content(
+            model="gemini-2.5-flash-lite",  # Updated to confirmed model name
+            contents=system_prompt + "\n\n" + user_content,
+            config=types.GenerateContentConfig(
+                temperature=0.2,
+                response_mime_type="application/json"
+            )
+        )
+        return json.loads(response.text)
+    except Exception as e:
+        print(f"❌ AI Analysis failed: {e}")
+        return {
+            "summary": "Analysis currently unavailable.",
+            "strengths": [],
+            "weaknesses": [],
+            "score": 0
+        }

backend/test_analysis.py

@@ -0,0 +1,16 @@
+import requests
+import json
+
+url = "http://localhost:8000/analyze-candidate"
+payload = {
+    "candidate_id": "92f155f8-8422-4819-ade1-697624640103",
+    "job_id": "76259020-f560-4927-ba21-4ea671e62c16"
+}
+headers = {"Content-Type": "application/json"}
+
+try:
+    response = requests.post(url, data=json.dumps(payload), headers=headers)
+    print(f"Status: {response.status_code}")
+    print(json.dumps(response.json(), indent=2))
+except Exception as e:
+    print(f"Error: {e}")

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@supabase/supabase-js": "^2.53.0",
         "date-fns": "^4.1.0",
+        "file-saver": "^2.0.5",
         "framer-motion": "^12.23.11",
         "lucide-react": "^0.562.0",
         "react": "^19.1.0",
@@ -324,25 +325,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
@@ -1612,7 +1594,7 @@
       "version": "19.2.7",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1888,7 +1870,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/d3-array": {
@@ -2370,6 +2352,12 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2971,13 +2959,6 @@
         "react": "^19.2.3"
       }
     },
-    "node_modules/react-is": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
-      "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.53.0",
     "date-fns": "^4.1.0",
+    "file-saver": "^2.0.5",
     "framer-motion": "^12.23.11",
     "lucide-react": "^0.562.0",
     "react": "^19.1.0",

src/components/Admin/AdminSortingPage.jsx

@@ -1,14 +1,14 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { supabase } from '../../supabaseClient'; 
-import CandidateDrawer from '../CandidateDrawer'; 
+import { supabase } from '../../supabaseClient';
+import CandidateDrawer from '../CandidateDrawer';
 
 // ✅ IMPORT ICONS FROM YOUR SEPARATE FILE
-import { 
-    FilterIcon, ScoringIcon, ClearIcon, ViewIcon, 
-    ChevronDownIcon, SearchIcon, ChevronLeftIcon, 
-    ChevronRightIcon, CheckSquareIcon, MailIcon, LoaderIcon 
-} from '../../components/Icons'; 
+import {
+    FilterIcon, ScoringIcon, ClearIcon, ViewIcon,
+    ChevronDownIcon, SearchIcon, ChevronLeftIcon,
+    ChevronRightIcon, CheckSquareIcon, MailIcon, LoaderIcon
+} from '../../components/Icons';
 
 // --- REUSABLE BUTTON COMPONENT ---
 const BulkActionButton = ({ Icon, label, color, onClick }) => {
@@ -31,7 +31,7 @@ const BulkActionButton = ({ Icon, label, color, onClick }) => {
             }}
             transition={{ type: 'spring', stiffness: 500, damping: 30 }}
         >
-            <Icon /> 
+            <Icon />
             <AnimatePresence>
                 {hover && (
                     <motion.span
@@ -62,7 +62,7 @@ const FilterPanel = ({ filters, setFilters }) => {
     return (
         <div style={{ padding: '0 1.5rem 1.5rem 1.5rem', color: '#e2e8f0' }}>
             <div style={{ height: '1px', backgroundColor: 'rgba(239, 68, 68, 0.2)', marginBottom: '1.5rem' }}></div>
-            
+
             {/* Status & Score Group */}
             <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem', marginBottom: '2rem' }}>
                 <div>
@@ -103,7 +103,7 @@ const FilterPanel = ({ filters, setFilters }) => {
                 <div>
                     <h4 style={{ fontSize: '0.85rem', color: '#94a3b8', marginBottom: '0.75rem', fontWeight: '600' }}>Job Positions</h4>
                     <div className="hide-scrollbar" style={{ height: '150px', overflowY: 'auto', backgroundColor: 'rgba(0,0,0,0.2)', borderRadius: '8px', padding: '0.5rem', border: '1px solid rgba(255,255,255,0.05)' }}>
-                         <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.5rem' }}>
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.5rem' }}>
                             {positions.map(pos => (
                                 <label key={pos} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.85rem', cursor: 'pointer', padding: '4px', borderRadius: '4px', backgroundColor: (filters.positions || []).includes(pos) ? 'rgba(239, 68, 68, 0.1)' : 'transparent' }}>
                                     <input type="checkbox" checked={(filters.positions || []).includes(pos)} onChange={() => toggleItem('positions', pos)} style={{ accentColor: '#EF4444' }} />
@@ -121,7 +121,7 @@ const FilterPanel = ({ filters, setFilters }) => {
 // --- SCORING PANEL COMPONENT ---
 const ScoringPanel = ({ config, setConfig, onReset, onClose }) => {
     const handleChange = (key, value) => setConfig({ ...config, [key]: parseInt(value) });
-    
+
     // Internal slider for this component
     const ConfigSlider = ({ label, value, min, max, onChangeKey }) => (
         <div style={{ marginBottom: '1rem' }}>
@@ -147,8 +147,8 @@ const ScoringPanel = ({ config, setConfig, onReset, onClose }) => {
                 </div>
             </div>
             <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
-                 <button onClick={onReset} style={{ background: 'transparent', border: '1px solid rgba(255,255,255,0.2)', color: '#94a3b8', padding: '0.4rem 0.8rem', borderRadius: '4px', cursor: 'pointer', fontSize: '0.8rem' }}>Reset Default</button>
-                 <button onClick={onClose} style={{ backgroundColor: '#EF4444', border: 'none', color: 'white', padding: '0.4rem 1.2rem', borderRadius: '4px', cursor: 'pointer', fontSize: '0.8rem', fontWeight: 'bold' }}>Apply</button>
+                <button onClick={onReset} style={{ background: 'transparent', border: '1px solid rgba(255,255,255,0.2)', color: '#94a3b8', padding: '0.4rem 0.8rem', borderRadius: '4px', cursor: 'pointer', fontSize: '0.8rem' }}>Reset Default</button>
+                <button onClick={onClose} style={{ backgroundColor: '#EF4444', border: 'none', color: 'white', padding: '0.4rem 1.2rem', borderRadius: '4px', cursor: 'pointer', fontSize: '0.8rem', fontWeight: 'bold' }}>Apply</button>
             </div>
         </div>
     );
@@ -158,11 +158,11 @@ const ScoringPanel = ({ config, setConfig, onReset, onClose }) => {
 export default function AdminSortingPage() {
     const [applicants, setApplicants] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
-    const [openPanel, setOpenPanel] = useState(null); 
+    const [openPanel, setOpenPanel] = useState(null);
     const [searchQuery, setSearchQuery] = useState('');
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
     const [drawerCandidate, setDrawerCandidate] = useState(null);
-    
+
     // Pagination & Selection
     const [currentPage, setCurrentPage] = useState(1);
     const itemsPerPage = 5;
@@ -195,14 +195,16 @@ export default function AdminSortingPage() {
                     status, 
                     score: match_score, 
                     skills,
-                    profiles ( full_name, email, avatar_url,experience_years ),
-                    jobs ( title )
+                    profiles ( id, full_name, email, avatar_url, experience_years ),
+                    jobs ( id, title )
                     `);
-                
+
                 if (error) throw error;
 
                 const formattedData = data.map(app => ({
                     id: app.id,
+                    userId: app.profiles?.id,
+                    jobId: app.jobs?.id,
                     name: app.profiles?.full_name || 'Unknown Candidate',
                     email: app.profiles?.email || 'No Email',
                     img: app.profiles?.avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(app.profiles?.full_name || 'User')}&background=random`,
@@ -212,7 +214,7 @@ export default function AdminSortingPage() {
                     status: app.status,
                     score: app.score || 0
                 }));
-                
+
                 setApplicants(formattedData);
             } catch (error) {
                 console.error('Error fetching applicants:', error.message);
@@ -227,21 +229,21 @@ export default function AdminSortingPage() {
     const handleBulkReject = async () => {
         if (!confirm(`Are you sure you want to REJECT ${selectedIds.length} candidates?`)) return;
 
-     try {
+        try {
             const { error } = await supabase
                 .from('applications')
                 .update({ status: 'Rejected' }) // Update status to Rejected
                 .in('id', selectedIds);
-        if (error) throw error;
-
-        // Update UI instantly
-        setApplicants(prev => prev.map(app => 
-            selectedIds.includes(app.id) ? { ...app, status: 'Rejected' } : app
-        ));
-        
-        setSelectedIds([]); // Clear selection
-        alert('Candidates Rejected.');
-    } catch (error) {
+            if (error) throw error;
+
+            // Update UI instantly
+            setApplicants(prev => prev.map(app =>
+                selectedIds.includes(app.id) ? { ...app, status: 'Rejected' } : app
+            ));
+
+            setSelectedIds([]); // Clear selection
+            alert('Candidates Rejected.');
+        } catch (error) {
             console.error('Error rejecting:', error.message);
             alert('Failed to reject.');
         }
@@ -259,7 +261,7 @@ export default function AdminSortingPage() {
 
             if (error) throw error;
 
-            setApplicants(prev => prev.map(app => 
+            setApplicants(prev => prev.map(app =>
                 selectedIds.includes(app.id) ? { ...app, status: 'Accepted' } : app
             ));
             setSelectedIds([]);
@@ -281,7 +283,7 @@ export default function AdminSortingPage() {
             const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) || (app.jobTitle || '').toLowerCase().includes(searchQuery.toLowerCase());
             const matchesStatus = filters.status === 'All' || app.status === filters.status;
             const matchesScore = (app.score || 0) >= filters.minScore;
-            
+
             const matchesLang = (filters.languages || []).length === 0 || (filters.languages || []).some(l => (app.skills || []).includes(l));
             const matchesPos = (filters.positions || []).length === 0 || (filters.positions || []).includes(app.jobTitle);
 
@@ -290,12 +292,12 @@ export default function AdminSortingPage() {
             if (filters.sortBy === 'Match Score') return (b.score || 0) - (a.score || 0);
             if (filters.sortBy === 'Experience') return (b.experience || 0) - (a.experience || 0);
             if (filters.sortBy === 'Name') return a.name.localeCompare(b.name);
-            return 0; 
+            return 0;
         });
     }, [searchQuery, filters, applicants]);
 
     // Check if every single selected person is already 'Accepted'
-        const allSelectedAreApproved = selectedIds.length > 0 && selectedIds.every(id => {
+    const allSelectedAreApproved = selectedIds.length > 0 && selectedIds.every(id => {
         const applicant = applicants.find(app => app.id === id);
         return applicant?.status === 'Accepted'; // Make sure this matches your DB value ('Accepted' or 'Approved')
     });
@@ -306,9 +308,9 @@ export default function AdminSortingPage() {
 
     const toggleSelectAll = () => {
         if (selectedIds.length === paginatedApplicants.length && paginatedApplicants.length > 0) {
-            setSelectedIds([]); 
+            setSelectedIds([]);
         } else {
-            setSelectedIds(paginatedApplicants.map(a => a.id)); 
+            setSelectedIds(paginatedApplicants.map(a => a.id));
         }
     };
 
@@ -324,7 +326,7 @@ export default function AdminSortingPage() {
 
     return (
         <div style={{ paddingBottom: '4rem' }}>
-             <style>{`.hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } @keyframes spin { 100% { transform: rotate(360deg); } }`}</style>
+            <style>{`.hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } @keyframes spin { 100% { transform: rotate(360deg); } }`}</style>
 
             <header style={{ marginBottom: '2rem' }}>
                 <h1 style={{ fontSize: '1.875rem', fontWeight: 'bold' }}>CV Sorting</h1>
@@ -343,7 +345,7 @@ export default function AdminSortingPage() {
                     <motion.button onClick={() => togglePanel('scoring')} whileHover={{ scale: 1.02 }} style={{ backgroundColor: openPanel === 'scoring' ? '#EF4444' : 'rgba(255,255,255,0.1)', color: 'white', padding: '0.75rem 1.2rem', borderRadius: '0.5rem', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px', fontWeight: '600' }}>
                         <ScoringIcon /> Scoring <ChevronDownIcon isOpen={openPanel === 'scoring'} />
                     </motion.button>
-                     <motion.button onClick={() => { setSearchQuery(''); setFilters({ sortBy: 'Match Score', status: 'All', minScore: 0, languages: [], positions: [] }); }} whileHover={{ scale: 1.02 }} style={{ backgroundColor: 'rgba(255,255,255,0.1)', color: 'white', padding: '0.75rem 1rem', borderRadius: '0.5rem', border: '1px solid rgba(255,255,255,0.2)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <motion.button onClick={() => { setSearchQuery(''); setFilters({ sortBy: 'Match Score', status: 'All', minScore: 0, languages: [], positions: [] }); }} whileHover={{ scale: 1.02 }} style={{ backgroundColor: 'rgba(255,255,255,0.1)', color: 'white', padding: '0.75rem 1rem', borderRadius: '0.5rem', border: '1px solid rgba(255,255,255,0.2)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px' }}>
                         <ClearIcon /> Clear
                     </motion.button>
                 </div>
@@ -369,13 +371,13 @@ export default function AdminSortingPage() {
                         {selectedIds.length > 0 && (
                             <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 20 }} style={{ display: 'flex', gap: '1rem', alignItems: 'center', backgroundColor: 'rgba(239, 68, 68, 0.1)', padding: '0.5rem 1rem', borderRadius: '12px', border: '1px solid rgba(239, 68, 68, 0.2)' }}>
                                 <span style={{ fontSize: '0.85rem', color: '#fff', fontWeight: 'bold' }}>{selectedIds.length} Selected</span>
-                                <BulkActionButton 
+                                <BulkActionButton
                                     // IF everyone is approved, show 'Reject' icon/label. ELSE show 'Accept'.
                                     // ✅ FIXED: Uses the component names directly
-                                    Icon={allSelectedAreApproved ? ClearIcon : CheckSquareIcon} 
-                                    label={allSelectedAreApproved ? "Reject" : "Accept"} 
+                                    Icon={allSelectedAreApproved ? ClearIcon : CheckSquareIcon}
+                                    label={allSelectedAreApproved ? "Reject" : "Accept"}
                                     color={allSelectedAreApproved ? "#ef4444" : "#10b981"} // Red if rejecting, Green if accepting
-                                    onClick={allSelectedAreApproved ? handleBulkReject : handleBulkApprove} 
+                                    onClick={allSelectedAreApproved ? handleBulkReject : handleBulkApprove}
                                 />
                                 <BulkActionButton Icon={MailIcon} label="Email" color="#3b82f6" onClick={handleBulkEmail} />
                             </motion.div>
@@ -389,70 +391,70 @@ export default function AdminSortingPage() {
                     </div>
                 ) : (
                     <>
-                    <div className="hide-scrollbar" style={{ overflowX: 'auto' }}>
-                        <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: '0 8px', minWidth: '800px' }}>
-                            <thead>
-                                <tr style={{ color: '#9ca3af', textAlign: 'left', fontSize: '0.9rem' }}>
-                                    <th style={{ padding: '0 0 1rem 1rem', width: '40px' }}><input type="checkbox" checked={paginatedApplicants.length > 0 && selectedIds.length === paginatedApplicants.length} onChange={toggleSelectAll} style={{ accentColor: '#EF4444', cursor: 'pointer', width: '16px', height: '16px' }} /></th>
-                                    <th style={{ padding: '0 1rem 1rem 0' }}>Applicant</th>
-                                    <th style={{ padding: '0 1rem 1rem 1rem' }}>Experience</th>
-                                    <th style={{ padding: '0 1rem 1rem 1rem' }}>Job Title</th>
-                                    <th style={{ padding: '0 1rem 1rem 1rem' }}>Score</th>
-                                    <th style={{ padding: '0 1rem 1rem 1rem' }}>Status</th>
-                                    <th style={{ padding: '0 1rem 1rem 1rem', textAlign: 'right' }}>Action</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <AnimatePresence>
-                                    {paginatedApplicants.map((app) => {
-                                        const isSelected = selectedIds.includes(app.id);
-                                        return (
-                                            <motion.tr 
-                                                key={app.id} 
-                                                initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }}
-                                                whileHover={{ scale: 1.005, backgroundColor: 'rgba(255,255,255,0.05)' }}
-                                                style={{ backgroundColor: isSelected ? 'rgba(239, 68, 68, 0.1)' : 'rgba(255,255,255,0.02)', borderRadius: '8px', cursor: 'pointer', border: isSelected ? '1px solid rgba(239, 68, 68, 0.3)' : '1px solid transparent' }}
-                                                onClick={() => toggleSelectRow(app.id)}
-                                            >
-                                                <td style={{ padding: '1rem', borderTopLeftRadius: '8px', borderBottomLeftRadius: '8px' }}>
-                                                    <input type="checkbox" checked={isSelected} onChange={(e) => { e.stopPropagation(); toggleSelectRow(app.id); }} style={{ accentColor: '#EF4444', cursor: 'pointer', width: '16px', height: '16px' }} />
-                                                </td>
-                                                <td style={{ padding: '1rem 1rem 1rem 0' }}>
-                                                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                                                        <img src={app.img} alt={app.name} style={{ width: '40px', height: '40px', borderRadius: '50%', objectFit: 'cover' }} />
-                                                        <div><p style={{ fontWeight: 'bold', color: 'white' }}>{app.name}</p><p style={{ fontSize: '0.8rem', color: '#9ca3af' }}>{app.email}</p></div>
-                                                    </div>
-                                                </td>
-                                                <td style={{ padding: '1rem', color: '#d1d5db' }}>{app.experience} years</td>
-                                                <td style={{ padding: '1rem', color: '#d1d5db' }}>{app.jobTitle}</td>
-                                                <td style={{ padding: '1rem' }}><span style={{ fontWeight: 'bold', color: (app.score || 0) > 80 ? '#34d399' : '#fbbf24' }}>{app.score || 0}</span></td>
-                                                <td style={{ padding: '1rem' }}><span style={{ fontSize: '0.75rem', padding: '4px 8px', borderRadius: '4px', backgroundColor: app.status === 'Accepted' ? 'rgba(52, 211, 153, 0.2)' : app.status === 'Rejected' ? 'rgba(239, 68, 68, 0.2)' : 'rgba(251, 191, 36, 0.2)', color: app.status === 'Accepted' ? '#34d399' : app.status === 'Rejected' ? '#ef4444' : '#fbbf24' }}>{app.status}</span></td>
-                                                <td style={{ padding: '1rem', textAlign: 'right', borderTopRightRadius: '8px', borderBottomRightRadius: '8px' }}>
-                                                    <button 
-                                                        onClick={(e) => { e.stopPropagation(); handleViewCandidate(app); }} 
-                                                        style={{ background: 'none', border: 'none', color: '#6b7280', cursor: 'pointer' }}
-                                                        title="View Details"
-                                                    >
-                                                        <ViewIcon />
-                                                    </button>
-                                                </td>
-                                            </motion.tr>
-                                        );
-                                    })}
-                                </AnimatePresence>
-                            </tbody>
-                        </table>
-                    </div>
-                    {totalPages > 1 && (
-                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '1.5rem', paddingTop: '1rem', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
-                            <span style={{ fontSize: '0.85rem', color: '#94a3b8' }}>Showing {((currentPage - 1) * itemsPerPage) + 1}-{Math.min(currentPage * itemsPerPage, filteredApplicants.length)} of {filteredApplicants.length}</span>
-                            <div style={{ display: 'flex', gap: '0.5rem' }}>
-                                <button disabled={currentPage === 1} onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} style={{ padding: '0.5rem', borderRadius: '6px', background: 'rgba(255,255,255,0.1)', border: 'none', color: currentPage === 1 ? '#525252' : 'white', cursor: currentPage === 1 ? 'not-allowed' : 'pointer' }}><ChevronLeftIcon /></button>
-                                <span style={{ padding: '0.5rem 1rem', background: '#EF4444', borderRadius: '6px', fontSize: '0.85rem', color: 'white', fontWeight: 'bold' }}>{currentPage}</span>
-                                <button disabled={currentPage === totalPages} onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} style={{ padding: '0.5rem', borderRadius: '6px', background: 'rgba(255,255,255,0.1)', border: 'none', color: currentPage === totalPages ? '#525252' : 'white', cursor: currentPage === totalPages ? 'not-allowed' : 'pointer' }}><ChevronRightIcon /></button>
-                            </div>
+                        <div className="hide-scrollbar" style={{ overflowX: 'auto' }}>
+                            <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: '0 8px', minWidth: '800px' }}>
+                                <thead>
+                                    <tr style={{ color: '#9ca3af', textAlign: 'left', fontSize: '0.9rem' }}>
+                                        <th style={{ padding: '0 0 1rem 1rem', width: '40px' }}><input type="checkbox" checked={paginatedApplicants.length > 0 && selectedIds.length === paginatedApplicants.length} onChange={toggleSelectAll} style={{ accentColor: '#EF4444', cursor: 'pointer', width: '16px', height: '16px' }} /></th>
+                                        <th style={{ padding: '0 1rem 1rem 0' }}>Applicant</th>
+                                        <th style={{ padding: '0 1rem 1rem 1rem' }}>Experience</th>
+                                        <th style={{ padding: '0 1rem 1rem 1rem' }}>Job Title</th>
+                                        <th style={{ padding: '0 1rem 1rem 1rem' }}>Score</th>
+                                        <th style={{ padding: '0 1rem 1rem 1rem' }}>Status</th>
+                                        <th style={{ padding: '0 1rem 1rem 1rem', textAlign: 'right' }}>Action</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <AnimatePresence>
+                                        {paginatedApplicants.map((app) => {
+                                            const isSelected = selectedIds.includes(app.id);
+                                            return (
+                                                <motion.tr
+                                                    key={app.id}
+                                                    initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }}
+                                                    whileHover={{ scale: 1.005, backgroundColor: 'rgba(255,255,255,0.05)' }}
+                                                    style={{ backgroundColor: isSelected ? 'rgba(239, 68, 68, 0.1)' : 'rgba(255,255,255,0.02)', borderRadius: '8px', cursor: 'pointer', border: isSelected ? '1px solid rgba(239, 68, 68, 0.3)' : '1px solid transparent' }}
+                                                    onClick={() => toggleSelectRow(app.id)}
+                                                >
+                                                    <td style={{ padding: '1rem', borderTopLeftRadius: '8px', borderBottomLeftRadius: '8px' }}>
+                                                        <input type="checkbox" checked={isSelected} onChange={(e) => { e.stopPropagation(); toggleSelectRow(app.id); }} style={{ accentColor: '#EF4444', cursor: 'pointer', width: '16px', height: '16px' }} />
+                                                    </td>
+                                                    <td style={{ padding: '1rem 1rem 1rem 0' }}>
+                                                        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                                                            <img src={app.img} alt={app.name} style={{ width: '40px', height: '40px', borderRadius: '50%', objectFit: 'cover' }} />
+                                                            <div><p style={{ fontWeight: 'bold', color: 'white' }}>{app.name}</p><p style={{ fontSize: '0.8rem', color: '#9ca3af' }}>{app.email}</p></div>
+                                                        </div>
+                                                    </td>
+                                                    <td style={{ padding: '1rem', color: '#d1d5db' }}>{app.experience} years</td>
+                                                    <td style={{ padding: '1rem', color: '#d1d5db' }}>{app.jobTitle}</td>
+                                                    <td style={{ padding: '1rem' }}><span style={{ fontWeight: 'bold', color: (app.score || 0) > 80 ? '#34d399' : '#fbbf24' }}>{app.score || 0}</span></td>
+                                                    <td style={{ padding: '1rem' }}><span style={{ fontSize: '0.75rem', padding: '4px 8px', borderRadius: '4px', backgroundColor: app.status === 'Accepted' ? 'rgba(52, 211, 153, 0.2)' : app.status === 'Rejected' ? 'rgba(239, 68, 68, 0.2)' : 'rgba(251, 191, 36, 0.2)', color: app.status === 'Accepted' ? '#34d399' : app.status === 'Rejected' ? '#ef4444' : '#fbbf24' }}>{app.status}</span></td>
+                                                    <td style={{ padding: '1rem', textAlign: 'right', borderTopRightRadius: '8px', borderBottomRightRadius: '8px' }}>
+                                                        <button
+                                                            onClick={(e) => { e.stopPropagation(); handleViewCandidate(app); }}
+                                                            style={{ background: 'none', border: 'none', color: '#6b7280', cursor: 'pointer' }}
+                                                            title="View Details"
+                                                        >
+                                                            <ViewIcon />
+                                                        </button>
+                                                    </td>
+                                                </motion.tr>
+                                            );
+                                        })}
+                                    </AnimatePresence>
+                                </tbody>
+                            </table>
                         </div>
-                    )}
+                        {totalPages > 1 && (
+                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '1.5rem', paddingTop: '1rem', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
+                                <span style={{ fontSize: '0.85rem', color: '#94a3b8' }}>Showing {((currentPage - 1) * itemsPerPage) + 1}-{Math.min(currentPage * itemsPerPage, filteredApplicants.length)} of {filteredApplicants.length}</span>
+                                <div style={{ display: 'flex', gap: '0.5rem' }}>
+                                    <button disabled={currentPage === 1} onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} style={{ padding: '0.5rem', borderRadius: '6px', background: 'rgba(255,255,255,0.1)', border: 'none', color: currentPage === 1 ? '#525252' : 'white', cursor: currentPage === 1 ? 'not-allowed' : 'pointer' }}><ChevronLeftIcon /></button>
+                                    <span style={{ padding: '0.5rem 1rem', background: '#EF4444', borderRadius: '6px', fontSize: '0.85rem', color: 'white', fontWeight: 'bold' }}>{currentPage}</span>
+                                    <button disabled={currentPage === totalPages} onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} style={{ padding: '0.5rem', borderRadius: '6px', background: 'rgba(255,255,255,0.1)', border: 'none', color: currentPage === totalPages ? '#525252' : 'white', cursor: currentPage === totalPages ? 'not-allowed' : 'pointer' }}><ChevronRightIcon /></button>
+                                </div>
+                            </div>
+                        )}
                     </>
                 )}
             </div>
@@ -460,10 +462,10 @@ export default function AdminSortingPage() {
             {/* Render the Drawer specifically for the sorting page */}
             <AnimatePresence>
                 {isDrawerOpen && (
-                    <CandidateDrawer 
-                        isOpen={isDrawerOpen} 
-                        onClose={() => setIsDrawerOpen(false)} 
-                        candidate={drawerCandidate} 
+                    <CandidateDrawer
+                        isOpen={isDrawerOpen}
+                        onClose={() => setIsDrawerOpen(false)}
+                        candidate={drawerCandidate}
                     />
                 )}
             </AnimatePresence>

src/components/Adminfront/TopPerformers.jsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { supabase } from '../../supabaseClient'; 
+import { supabase } from '../../supabaseClient';
 import { motion, AnimatePresence } from 'framer-motion';
+import CandidateDrawer from '../CandidateDrawer';
 
 export default function TopPerformers() {
     // --- STATE ---
     const [candidates, setCandidates] = useState([]);
     const [loading, setLoading] = useState(true);
     const [showConfig, setShowConfig] = useState(false);
-    
+    const [selectedCandidate, setSelectedCandidate] = useState(null);
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
     // Slider Config State
     const [config, setConfig] = useState({
         skillsWeight: 2,
@@ -22,30 +25,17 @@ export default function TopPerformers() {
 
     // --- DUMMY DATA (Fallback) ---
     const dummyCandidates = [
-        { 
-            id: 'd1', experience: 8, 
-            profiles: { full_name: 'Elena Martinez', avatar_url: 'https://i.pravatar.cc/150?u=elena' }, 
-            jobs: { title: 'Data Scientist' } 
-        },
-        { 
-            id: 'd2', experience: 5, 
-            profiles: { full_name: 'Sarah Johnson', avatar_url: 'https://i.pravatar.cc/150?u=sarah' }, 
-            jobs: { title: 'UX/UI Designer' } 
-        },
-        { 
-            id: 'd3', experience: 12, 
-            profiles: { full_name: 'Rayyan Ali', avatar_url: 'https://i.pravatar.cc/150?u=rayyan' }, 
-            jobs: { title: 'Senior Developer' } 
+        {
+            id: 'd1', userId: 'u1', name: 'Elena Martinez', avatar: 'https://i.pravatar.cc/150?u=elena',
+            jobTitle: 'Data Scientist', experience: 8, score: 95
         },
-        { 
-            id: 'd4', experience: 3, 
-            profiles: { full_name: 'Iffah Fathima', avatar_url: 'https://i.pravatar.cc/150?u=iffah' }, 
-            jobs: { title: 'Frontend Intern' } 
+        {
+            id: 'd2', userId: 'u2', name: 'Sarah Johnson', avatar: 'https://i.pravatar.cc/150?u=sarah',
+            jobTitle: 'UX/UI Designer', experience: 5, score: 90
         },
-        { 
-            id: 'd5', experience: 6, 
-            profiles: { full_name: 'Varun Nair', avatar_url: null }, // Test no avatar
-            jobs: { title: 'Product Manager' } 
+        {
+            id: 'd3', userId: 'u3', name: 'Rayyan Ali', avatar: 'https://i.pravatar.cc/150?u=rayyan',
+            jobTitle: 'Senior Developer', experience: 12, score: 85
         }
     ];
 
@@ -56,19 +46,32 @@ export default function TopPerformers() {
                 const { data, error } = await supabase
                     .from('applications')
                     .select(`
-                        id, experience,
-                        profiles ( full_name, avatar_url ),
-                        jobs ( title )
+                        id, 
+                        experience,
+                        user_id:profiles(id, full_name, avatar_url, summary),
+                        job_id:jobs(id, title),
+                        match_score
                     `)
-                    .limit(7); 
+                    .limit(7);
 
                 if (error) {
                     console.error("Supabase error, using dummy data:", error);
-                    setCandidates(dummyCandidates); // Fallback on error
+                    setCandidates(dummyCandidates);
                 } else if (data && data.length > 0) {
-                    setCandidates(data);
+                    const normalized = data.map(item => ({
+                        id: item.id,
+                        userId: item.user_id?.id,
+                        jobId: item.job_id?.id,
+                        name: item.user_id?.full_name || 'Candidate',
+                        avatar: item.user_id?.avatar_url,
+                        jobTitle: item.job_id?.title || 'Applicant',
+                        experience: item.experience,
+                        summary: item.user_id?.summary,
+                        score: item.match_score || (90 - data.indexOf(item) * 5)
+                    }));
+                    setCandidates(normalized);
                 } else {
-                    setCandidates(dummyCandidates); // Fallback if empty
+                    setCandidates(dummyCandidates);
                 }
             } catch (error) {
                 console.error('Fetch error, using dummy data:', error);
@@ -80,10 +83,19 @@ export default function TopPerformers() {
         fetchCandidates();
     }, []);
 
+    // --- HANDLERS ---
+    const handleView = (candidate) => {
+        setSelectedCandidate({
+            ...candidate,
+            img: candidate.avatar
+        });
+        setIsDrawerOpen(true);
+    };
+
     // --- STYLES ---
     const containerStyle = {
-        backgroundColor: 'rgba(239, 68, 68, 0.05)', 
-        border: '1px solid rgba(239, 68, 68, 0.2)', 
+        backgroundColor: 'rgba(239, 68, 68, 0.05)',
+        border: '1px solid rgba(239, 68, 68, 0.2)',
         borderRadius: '1rem',
         padding: '1.5rem',
         color: 'white',
@@ -92,7 +104,7 @@ export default function TopPerformers() {
     };
 
     const configBoxStyle = {
-        backgroundColor: 'rgba(0, 0, 0, 0.3)', 
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
         border: '1px solid rgba(255, 255, 255, 0.1)',
         borderRadius: '0.75rem',
         padding: '1.25rem',
@@ -116,16 +128,16 @@ export default function TopPerformers() {
 
     return (
         <div style={containerStyle}>
-            
+
             {/* --- HEADER --- */}
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
                 <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>Top Performers</h2>
-                
-                <button 
+
+                <button
                     onClick={() => setShowConfig(!showConfig)}
-                    style={{ 
-                        background: 'none', border: 'none', 
-                        color: showConfig ? '#EF4444' : '#9CA3AF', 
+                    style={{
+                        background: 'none', border: 'none',
+                        color: showConfig ? '#EF4444' : '#9CA3AF',
                         cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
                         fontSize: '0.9rem', fontWeight: '500'
                     }}
@@ -134,7 +146,7 @@ export default function TopPerformers() {
                     {showConfig ? "Hide" : "Config"}
                 </button>
             </div>
-            
+
             <p style={{ color: '#9CA3AF', fontSize: '0.85rem', marginBottom: '1.5rem', marginTop: '0.25rem' }}>
                 Outstanding candidates by match score
             </p>
@@ -180,23 +192,23 @@ export default function TopPerformers() {
                 {loading ? (
                     <p style={{ color: '#6B7280', textAlign: 'center' }}>Loading...</p>
                 ) : candidates.map((item, index) => {
-                    const name = item.profiles?.full_name || 'Candidate';
-                    const role = item.jobs?.title || 'Applicant';
+                    const name = item.name;
+                    const role = item.jobTitle;
                     const exp = item.experience ? `${item.experience} yrs` : 'N/A';
-                    const score = 90 - (index * 5); 
+                    const score = item.score;
 
                     return (
                         <div key={item.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                             <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
                                 {/* Avatar */}
-                                {item.profiles?.avatar_url ? (
-                                    <img src={item.profiles.avatar_url} alt={name} style={{ width: '45px', height: '45px', borderRadius: '50%', objectFit: 'cover', border: '2px solid #374151' }} />
+                                {item.avatar ? (
+                                    <img src={item.avatar} alt={name} style={{ width: '45px', height: '45px', borderRadius: '50%', objectFit: 'cover', border: '2px solid #374151' }} />
                                 ) : (
                                     <div style={{ width: '45px', height: '45px', borderRadius: '50%', backgroundColor: '#374151', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 'bold' }}>
                                         {name.charAt(0)}
                                     </div>
                                 )}
-                                
+
                                 {/* Text Info */}
                                 <div>
                                     <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
@@ -208,15 +220,24 @@ export default function TopPerformers() {
                                     <div style={{ fontSize: '0.8rem', color: '#9CA3AF', marginTop: '2px' }}>
                                         {role} • {exp} • <span style={{ color: '#34D399' }}>Certified</span>
                                     </div>
+                                    {/* AI Summary Preview */}
+                                    {item.summary && (
+                                        <div style={{ fontSize: '0.75rem', color: '#94a3b8', marginTop: '4px', fontStyle: 'italic', maxWidth: '250px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                            AI: {item.summary}
+                                        </div>
+                                    )}
                                 </div>
                             </div>
-                            
-                            <button style={{ 
-                                padding: '0.4rem 1rem', borderRadius: '2rem', 
-                                border: '1px solid #EF4444', background: 'transparent', 
-                                color: 'white', fontSize: '0.75rem', cursor: 'pointer', fontWeight: '500',
-                                transition: '0.2s'
-                            }}>
+
+                            <button
+                                onClick={() => handleView(item)}
+                                style={{
+                                    padding: '0.4rem 1rem', borderRadius: '2rem',
+                                    border: '1px solid #EF4444', background: 'transparent',
+                                    color: 'white', fontSize: '0.75rem', cursor: 'pointer', fontWeight: '500',
+                                    transition: '0.2s'
+                                }}
+                            >
                                 View
                             </button>
                         </div>
@@ -224,6 +245,13 @@ export default function TopPerformers() {
                 })}
             </div>
 
+            {/* Candidate Drawer Integration */}
+            <CandidateDrawer
+                isOpen={isDrawerOpen}
+                onClose={() => setIsDrawerOpen(false)}
+                candidate={selectedCandidate}
+            />
+
             {/* Slider CSS Injection */}
             <style>{`
                 .custom-range::-webkit-slider-thumb {

src/components/CandidateDrawer.jsx

@@ -2,12 +2,47 @@ import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, ExternalLink, ThumbsUp, ThumbsDown, BrainCircuit } from 'lucide-react';
 import FullProfileOverlay from './FullProfileOverlay';
-
+import { saveAs } from 'file-saver';
 import { supabase } from '../supabaseClient';
 
 
 const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
   const [showFullProfile, setShowFullProfile] = useState(false);
+  const [analysis, setAnalysis] = useState(null);
+  const [loadingAnalysis, setLoadingAnalysis] = useState(false);
+
+  React.useEffect(() => {
+    if (isOpen && candidate?.userId && !analysis) {
+      fetchAnalysis();
+    }
+  }, [isOpen, candidate, analysis]);
+
+  // Reset analysis when candidate changes
+  React.useEffect(() => {
+    setAnalysis(null);
+  }, [candidate?.id]);
+
+  const fetchAnalysis = async () => {
+    setLoadingAnalysis(true);
+    try {
+      const response = await fetch('http://localhost:8000/analyze-candidate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          candidate_id: candidate.userId,
+          job_id: candidate.jobId
+        })
+      });
+      const result = await response.json();
+      if (result.status === 'success') {
+        setAnalysis(result.data);
+      }
+    } catch (error) {
+      console.error("Failed to fetch analysis:", error);
+    } finally {
+      setLoadingAnalysis(false);
+    }
+  };
 
   const handleDownloadCV = async () => {
     if (!candidate.resumeUrl) {
@@ -16,18 +51,15 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
     }
 
     try {
-      // Check if it's a full URL or a storage path
       if (candidate.resumeUrl.startsWith('http')) {
         saveAs(candidate.resumeUrl, `${candidate.name}_Resume.pdf`);
       } else {
-        // Assume it's a Supabase Storage path
         const { data, error } = await supabase
           .storage
-          .from('resume') // Ensure this bucket name matches your setup
+          .from('resume')
           .download(candidate.resumeUrl);
 
         if (error) throw error;
-
         saveAs(data, `${candidate.name}_Resume.pdf`);
       }
     } catch (error) {
@@ -38,11 +70,15 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
 
   if (!candidate) return null;
 
+  const summary = analysis?.summary || candidate.summary || "No summary available.";
+  const strengths = analysis?.strengths || candidate.insights?.strengths || [];
+  const weaknesses = analysis?.weaknesses || candidate.insights?.weaknesses || [];
+  const missingSkills = analysis?.missing_skills || [];
+
   return (
     <AnimatePresence>
       {isOpen && (
         <>
-          {/* Backdrop Overlay */}
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
@@ -57,7 +93,6 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
             }}
           />
 
-          {/* Drawer Panel */}
           <motion.div
             initial={{ x: '100%' }}
             animate={{ x: 0 }}
@@ -70,54 +105,52 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
               height: '100%',
               width: '100%',
               maxWidth: '500px',
-
-              // === 🎨 CSS-ONLY BACKGROUND (No Image Needed) ===
-              backgroundColor: '#0f172a', // Base Dark Slate Color
+              backgroundColor: '#0f172a',
               backgroundImage: `
                 radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.25) 0px, transparent 50%), 
                 radial-gradient(at 100% 100%, rgba(239, 68, 68, 0.25) 0px, transparent 50%),
                 linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%)
               `,
-              // 1. Blue Glow (Top Left)
-              // 2. Red Glow (Bottom Right)
-              // 3. Subtle Diagonal Sheen
-
               borderLeft: '1px solid rgba(255,255,255,0.1)',
               zIndex: 50,
               overflowY: 'auto',
               boxShadow: '-10px 0 25px rgba(0,0,0,0.5)'
             }}
           >
-            {/* Content Container */}
             <div style={{ padding: '2rem' }}>
 
               {/* Header */}
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '2rem' }}>
                 <div>
                   <h2 style={{ fontSize: '1.75rem', fontWeight: 'bold', color: 'white' }}>{candidate.name}</h2>
-                  <p style={{ color: '#94a3b8' }}>{candidate.role} • {candidate.experience}</p>
+                  <p style={{ color: '#94a3b8' }}>{candidate.jobTitle || candidate.role} • {candidate.experience} yrs</p>
                 </div>
                 <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#94a3b8', cursor: 'pointer' }}>
                   <X size={24} />
                 </button>
               </div>
 
-              {/* Match Score Bar */}
               <div style={{ marginBottom: '2rem', padding: '1rem', backgroundColor: 'rgba(239, 68, 68, 0.05)', borderRadius: '0.75rem', border: '1px solid rgba(239, 68, 68, 0.2)' }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-                  <span style={{ fontWeight: 'bold', color: '#EF4444' }}>AI Match Score</span>
-                  <span style={{ fontWeight: 'bold', color: 'white' }}>{candidate.matchScore || 0}%</span>
+                  <span style={{ fontWeight: 'bold', color: '#EF4444' }}>{analysis?.score !== undefined ? 'Gemini AI Score' : 'Semantic Match Score'}</span>
+                  <span style={{ fontWeight: 'bold', color: 'white' }}>{analysis?.score ?? (candidate.score || candidate.matchScore || 0)}%</span>
                 </div>
                 <div style={{ width: '100%', height: '6px', backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: '3px' }}>
                   <motion.div
                     initial={{ width: 0 }}
-                    animate={{ width: `${candidate.matchScore || 0}%` }}
+                    animate={{ width: `${analysis?.score ?? (candidate.score || candidate.matchScore || 0)}%` }}
                     transition={{ delay: 0.2, duration: 1 }}
                     style={{ height: '100%', backgroundColor: '#EF4444', borderRadius: '3px', boxShadow: '0 0 10px rgba(239,68,68,0.5)' }}
                   />
                 </div>
               </div>
 
+              {loadingAnalysis && (
+                <div style={{ padding: '1rem', textAlign: 'center', color: '#EF4444', fontSize: '0.9rem' }}>
+                  Analyzing candidate with AI...
+                </div>
+              )}
+
               {/* AI Insights Section */}
               <div style={{ marginBottom: '2rem' }}>
                 <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '1rem' }}>
@@ -125,13 +158,13 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
                 </h3>
 
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-                  {candidate.insights?.strengths?.map((str, i) => (
+                  {strengths.map((str, i) => (
                     <div key={`str-${i}`} style={{ display: 'flex', gap: '10px', fontSize: '0.9rem', color: '#cbd5e1' }}>
                       <ThumbsUp size={16} color="#34d399" style={{ marginTop: '3px', flexShrink: 0 }} />
                       <span>{str}</span>
                     </div>
                   ))}
-                  {candidate.insights?.weaknesses?.map((wk, i) => (
+                  {weaknesses.map((wk, i) => (
                     <div key={`wk-${i}`} style={{ display: 'flex', gap: '10px', fontSize: '0.9rem', color: '#cbd5e1' }}>
                       <ThumbsDown size={16} color="#fb7185" style={{ marginTop: '3px', flexShrink: 0 }} />
                       <span>{wk}</span>
@@ -140,11 +173,25 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
                 </div>
               </div>
 
+              {/* Missing Skills Section */}
+              {missingSkills.length > 0 && (
+                <div style={{ marginBottom: '2rem' }}>
+                  <h3 style={{ fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '0.75rem' }}>Missing Skills (Gap Analysis)</h3>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                    {missingSkills.map((skill, i) => (
+                      <span key={i} style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', color: '#EF4444', padding: '4px 10px', borderRadius: '4px', fontSize: '0.8rem', border: '1px solid rgba(239, 68, 68, 0.2)' }}>
+                        {skill}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
               {/* Resume Summary */}
               <div style={{ marginBottom: '2rem' }}>
-                <h3 style={{ fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '0.75rem' }}>Resume Summary</h3>
+                <h3 style={{ fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '0.75rem' }}>AI Professional Summary</h3>
                 <p style={{ fontSize: '0.9rem', lineHeight: '1.6', color: '#94a3b8', backgroundColor: 'rgba(255,255,255,0.05)', padding: '1rem', borderRadius: '0.5rem', border: '1px solid rgba(255,255,255,0.05)' }}>
-                  {candidate.summary || "No summary available."}
+                  {summary}
                 </p>
               </div>
 
@@ -179,18 +226,18 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
             </div>
           </motion.div>
 
-          <AnimatePresence>
-            {showFullProfile && (
+          {showFullProfile && (
+            <AnimatePresence>
               <FullProfileOverlay
                 candidate={candidate}
                 onClose={() => setShowFullProfile(false)}
               />
-            )}
-          </AnimatePresence>
+            </AnimatePresence>
+          )}
         </>
       )}
     </AnimatePresence>
   );
 };
 
-export default CandidateDrawer
+export default CandidateDrawer;

src/components/FullProfileOverlay.jsx

@@ -1,10 +1,53 @@
 import React from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X, Mail, Phone, MapPin, Briefcase, GraduationCap, Award, User } from 'lucide-react';
+import { X, Mail, Phone, MapPin, Briefcase, GraduationCap, Award, User, Loader2 } from 'lucide-react';
+import { supabase } from '../supabaseClient';
 
 const FullProfileOverlay = ({ candidate, onClose }) => {
+    const [profile, setProfile] = React.useState(null);
+    const [loading, setLoading] = React.useState(true);
+
+    React.useEffect(() => {
+        const fetchFullProfile = async () => {
+            if (!candidate?.userId && !candidate?.id) return;
+
+            setLoading(true);
+            try {
+                const targetId = candidate.userId || candidate.id;
+
+                const { data, error } = await supabase
+                    .from('profiles')
+                    .select('*')
+                    .eq('id', targetId)
+                    .single();
+
+                if (error) throw error;
+                setProfile(data);
+            } catch (error) {
+                console.error("Error fetching full profile:", error);
+                setProfile(candidate);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchFullProfile();
+    }, [candidate]);
+
     if (!candidate) return null;
 
+    if (loading) {
+        return (
+            <div style={{ position: 'fixed', inset: 0, zIndex: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0, 0, 0, 0.7)', backdropFilter: 'blur(8px)' }}>
+                <motion.div animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 1, ease: 'linear' }}>
+                    <Loader2 size={48} color="#EF4444" />
+                </motion.div>
+            </div>
+        );
+    }
+
+    const displayData = profile || candidate;
+
     // Helper to safely parse skills (array or CSV string)
     const parseSkills = (data) => {
         if (Array.isArray(data)) return data;
@@ -12,50 +55,24 @@ const FullProfileOverlay = ({ candidate, onClose }) => {
         return [];
     };
 
-    // Robustly gather skills from multiple possible sources
-    const rawSkills = parseSkills(candidate.skills);
-    const rawTechSkills = parseSkills(candidate.technical_skills);
-    const profileSkills = parseSkills(candidate.profiles?.skills);
-    const profileTechSkills = parseSkills(candidate.profiles?.technical_skills);
-
-    // Merge unique skills
     const allSkills = [...new Set([
-        ...rawSkills,
-        ...rawTechSkills,
-        ...profileSkills,
-        ...profileTechSkills
+        ...parseSkills(displayData.skills),
+        ...parseSkills(displayData.technical_skills)
     ])];
 
-    // Mapping Real PostgreSQL Data (profiles table) to UI variables
     const fullCandidate = {
-        ...candidate, // Keep any existing IDs or metadata
-
-        // Basic Info from Database
-        name: candidate.full_name || candidate.name || 'No Name Provided',
-        role: candidate.current_position || candidate.role || 'Applicant',
-        email: candidate.email || 'No email available',
-        phone: candidate.phone || 'No phone provided',
-        location: candidate.location || 'Remote',
-        avatar: candidate.avatar_url || candidate.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(candidate.full_name || 'User')}`,
-
-        // Long-form Text
-        about: candidate.summary || candidate.headline || "No summary available for this profile.",
-
-        // Skills (Consolidated)
+        ...displayData,
+        name: displayData.full_name || displayData.name || 'No Name Provided',
+        role: displayData.current_position || displayData.role || 'Applicant',
+        email: displayData.email || 'No email available',
+        phone: displayData.phone || 'No phone provided',
+        location: displayData.location || 'Remote',
+        avatar: displayData.avatar_url || displayData.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(displayData.full_name || 'User')}`,
+        about: displayData.summary || displayData.headline || "No summary available.",
         skills: allSkills,
-
-        // JSONB Mapping (ensures .map() won't crash if data is empty)
-        education: Array.isArray(candidate.education)
-            ? candidate.education
-            : [],
-
-        experience_details: Array.isArray(candidate.work_experience)
-            ? candidate.work_experience
-            : [],
-
-        projects: Array.isArray(candidate.projects)
-            ? candidate.projects
-            : []
+        education: Array.isArray(displayData.education) ? displayData.education : [],
+        experience_details: Array.isArray(displayData.work_experience) ? displayData.work_experience : [],
+        projects: Array.isArray(displayData.projects) ? displayData.projects : []
     };
 
     return (