Inserted ProfileOverlay

src/components/Admin/AdminInterviewManagement.jsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { supabase } from '../../supabaseClient'; 
+import { supabase } from '../../supabaseClient';
 import CandidateDrawer from '../CandidateDrawer';
 import ScheduleInterviewModal from '../ScheduleInterviewModal'; // <--- IMPORT NEW MODAL
 
 // --- ICONS ---
-const SmallCalendarIcon = () => ( <svg style={{ width: '24px', height: '24px', color: 'rgba(255,255,255,0.7)' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" /></svg> );
-const ChevronRightIcon = () => ( <svg style={{ width: '16px', height: '16px', marginLeft: '4px' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" /></svg> );
+const SmallCalendarIcon = () => (<svg style={{ width: '24px', height: '24px', color: 'rgba(255,255,255,0.7)' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" /></svg>);
+const ChevronRightIcon = () => (<svg style={{ width: '16px', height: '16px', marginLeft: '4px' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" /></svg>);
 
 // --- Simple Message Modal (Kept Inline) ---
 const MessageModal = ({ isOpen, onClose, onSend }) => {
@@ -37,7 +37,7 @@ export default function AdminInterviewManagement() {
     const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false); // <--- Updated Name
     const [isMessageModalOpen, setIsMessageModalOpen] = useState(false);
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-    
+
     const [selectedApplicant, setSelectedApplicant] = useState(null);
     const [drawerCandidate, setDrawerCandidate] = useState(null);
 
@@ -47,13 +47,15 @@ export default function AdminInterviewManagement() {
     const fetchData = async () => {
         try {
             setLoading(true);
+
+            // Join applications with profiles, jobs, and CHECK interviews table
             const { data, error } = await supabase
                 .from('applications')
                 .select(`
-                    id, created_at, status, experience, skills, match_score,
-                    profiles ( id, full_name, email, avatar_url ),
+                    id, created_at, status, experience, skills, match_score, resume_url,
+                    profiles ( id, full_name, email, avatar_url, phone, location, summary, headline, current_position, education, work_experience, projects, skills, technical_skills ),
                     jobs ( title ),
-                    interviews ( id, date, time, status )
+                    interviews ( id, date, time, status, created_at )
                 `)
                 .order('created_at', { ascending: false });
 
@@ -62,27 +64,75 @@ export default function AdminInterviewManagement() {
             const categorized = { interviews: [], accepted: [], rejected: [] };
 
             data.forEach(app => {
-                const interviewData = app.interviews && app.interviews.length > 0 ? app.interviews[0] : null;
+                // Check if an interview row exists for this application (Get the LATEST one)
+                const interviews = app.interviews || [];
+                interviews.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+                const interviewData = interviews.length > 0 ? interviews[0] : null;
+
+                // Combine skills and technical_skills
+                const profileSkills = Array.isArray(app.profiles?.skills) ? app.profiles.skills : [];
+                const profileTechSkills = Array.isArray(app.profiles?.technical_skills) ? app.profiles.technical_skills : [];
+                // Handle comma-separated strings if they were stored as text in legacy rows
+                const parsedTechSkills = (typeof app.profiles?.technical_skills === 'string')
+                    ? app.profiles.technical_skills.split(',').map(s => s.trim())
+                    : profileTechSkills;
+
+                const combinedSkills = [...new Set([...profileSkills, ...parsedTechSkills])];
+
+                // Fallback to application skills if profiles skills are empty
+                const finalSkills = combinedSkills.length > 0
+                    ? combinedSkills
+                    : (Array.isArray(app.skills) ? app.skills : (app.skills ? [app.skills] : []));
+
+                // Format the object for UI (Handle '0' values correctly)
                 const formattedApp = {
                     ...app,
+                    // Mapped fields for FullProfileOverlay
+                    full_name: app.profiles?.full_name,
+                    email: app.profiles?.email,
+                    phone: app.profiles?.phone,
+                    location: app.profiles?.location,
+                    summary: app.profiles?.summary,
+                    headline: app.profiles?.headline,
+                    current_position: app.profiles?.current_position,
+                    education: app.profiles?.education,
+                    work_experience: app.profiles?.work_experience,
+                    projects: app.profiles?.projects,
+
                     name: app.profiles?.full_name || 'Unknown User',
-                    email: app.profiles?.email, 
                     role: app.jobs?.title || 'Unknown Role',
                     avatar: app.profiles?.avatar_url,
-                    experience: (app.experience === '0' || app.experience === 0) ? 'Fresher' : (app.experience ? `${app.experience} years` : 'N/A'),
-                    skills: Array.isArray(app.skills) ? app.skills : (app.skills ? [app.skills] : []),
+                    resumeUrl: app.resume_url, // Map resume_url to camelCase
+                    // FIX: Handle 0 experience
+                    experience: (app.experience === '0' || app.experience === 0)
+                        ? 'Fresher'
+                        : (app.experience ? `${app.experience} years` : 'N/A'),
+                    skills: finalSkills,
+                    // Use interview details if available
                     interviewId: interviewData?.id,
                     date: interviewData ? interviewData.date : 'Not Scheduled',
                     time: interviewData ? interviewData.time : '',
                 };
 
-                if (interviewData) categorized.interviews.push(formattedApp);
-                else if (app.status === 'Accepted' || app.status === 'Approved') categorized.accepted.push(formattedApp);
-                else if (app.status === 'Rejected') categorized.rejected.push(formattedApp);
+                // --- SORTING LOGIC ---
+                if (interviewData) {
+                    // HAS interview -> Interviews Tab
+                    categorized.interviews.push(formattedApp);
+                } else if (app.status === 'Accepted' || app.status === 'Approved') {
+                    // Approved but NO interview -> Accepted Tab
+                    categorized.accepted.push(formattedApp);
+                } else if (app.status === 'Rejected') {
+                    // Rejected -> Rejected Tab
+                    categorized.rejected.push(formattedApp);
+                }
             });
+
             setApplicants(categorized);
-        } catch (error) { console.error('Error fetching data:', error); } 
-        finally { setLoading(false); }
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        } finally {
+            setLoading(false);
+        }
     };
 
     // 2. Updated Schedule Handler (Receives Object from Modal)
@@ -94,10 +144,10 @@ export default function AdminInterviewManagement() {
 
         try {
             const scheduledTimeISO = new Date(`${date}T${time}:00`).toISOString();
-            
+
             const interviewPayload = {
                 application_id: selectedApplicant.id,
-                scheduled_time: scheduledTimeISO, 
+                scheduled_time: scheduledTimeISO,
                 date, time,
                 status: 'Scheduled',
                 interview_type: interviewType,
@@ -110,8 +160,21 @@ export default function AdminInterviewManagement() {
                 duration_mins: 45 // Default
             };
 
-            // Database Insert
-            const { error: dbError } = await supabase.from('interviews').insert([interviewPayload]);
+            // Database Operation: Update if exists, otherwise Insert
+            let dbError;
+            if (selectedApplicant.interviewId) {
+                const { error } = await supabase
+                    .from('interviews')
+                    .update(interviewPayload)
+                    .eq('id', selectedApplicant.interviewId);
+                dbError = error;
+            } else {
+                const { error } = await supabase
+                    .from('interviews')
+                    .insert([interviewPayload]);
+                dbError = error;
+            }
+
             if (dbError) throw dbError;
 
             // Email Notification
@@ -148,7 +211,7 @@ export default function AdminInterviewManagement() {
     return (
         <div>
             <header style={{ marginBottom: '2rem' }}><h1 style={{ fontSize: '1.875rem', fontWeight: 'bold' }}>Interview Management</h1></header>
-            
+
             {/* Tabs */}
             <div style={{ display: 'flex', justifyContent: 'center', width: '100%', marginBottom: '2rem' }}>
                 <nav style={{ position: 'relative', display: 'inline-flex', gap: '1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', borderRadius: '1rem', padding: '0.5rem' }}>
@@ -162,20 +225,17 @@ export default function AdminInterviewManagement() {
 
             <AnimatePresence mode="wait">
                 <motion.div key={activeSubTab} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }}>
-                    {loading ? ( <div style={{textAlign: 'center', color: '#888', padding: '2rem'}}>Loading...</div> ) : applicants[activeSubTab].length === 0 ? ( <div style={{textAlign: 'center', color: '#666', padding: '2rem'}}>No candidates found.</div> ) : (
+                    {loading ? (<div style={{ textAlign: 'center', color: '#888', padding: '2rem' }}>Loading...</div>) : applicants[activeSubTab].length === 0 ? (<div style={{ textAlign: 'center', color: '#666', padding: '2rem' }}>No candidates found.</div>) : (
                         <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '1.5rem' }}>
                             {applicants[activeSubTab].map((applicant, index) => (
                                 <div key={applicant.id || index} style={{ backgroundColor: 'rgba(239, 68, 68, 0.05)', border: '1px solid rgba(239, 68, 68, 0.2)', borderRadius: '1rem', padding: '1.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem' }}>
-                                    
+
                                     {/* INFO SECTION */}
-                                    <div style={{display: 'flex', alignItems: 'flex-start', gap: '1rem'}}>
+                                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
                                         <img src={applicant.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(applicant.name)}&background=random`} alt={applicant.name} style={{ width: '48px', height: '48px', borderRadius: '50%', objectFit: 'cover' }} />
                                         <div>
                                             <h3 style={{ fontSize: '1.25rem', fontWeight: 'bold' }}>{applicant.name}</h3>
                                             <p style={{ color: '#d1d5db', fontSize: '0.9rem' }}>{applicant.role} • {applicant.experience}</p>
-                                            <div style={{ display: 'flex', gap: '6px', marginTop: '8px', flexWrap: 'wrap' }}>
-                                                {applicant.skills.map((skill, i) => ( <span key={i} style={{ fontSize: '0.75rem', backgroundColor: 'rgba(255,255,255,0.1)', color: '#e5e7eb', padding: '2px 8px', borderRadius: '4px' }}>{skill}</span> ))}
-                                            </div>
                                             {activeSubTab === 'interviews' && applicant.time && (
                                                 <div style={{ marginTop: '12px', fontSize: '0.85rem', color: '#9ca3af', display: 'flex', alignItems: 'center', gap: '6px' }}>
                                                     <SmallCalendarIcon /> <span>Interview: <span style={{ color: 'white' }}>{applicant.date} at {applicant.time}</span></span>
@@ -186,20 +246,20 @@ export default function AdminInterviewManagement() {
 
                                     {/* BUTTONS SECTION */}
                                     <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', minWidth: '170px' }}>
-                                        {activeSubTab === 'interviews' && ( <>
+                                        {activeSubTab === 'interviews' && (<>
                                             <motion.button onClick={() => openScheduleModal(applicant)} whileHover={{ scale: 1.02 }} style={secondaryButtonStyle}>Reschedule</motion.button>
                                             <motion.button onClick={() => openMessageModal(applicant)} whileHover={{ scale: 1.02 }} style={secondaryButtonStyle}>Message</motion.button>
                                             <motion.button onClick={() => openDrawer(applicant)} whileHover={{ scale: 1.02 }} style={primaryButtonStyle}>View CV <ChevronRightIcon /></motion.button>
-                                        </> )}
-                                        {activeSubTab === 'accepted' && ( <>
+                                        </>)}
+                                        {activeSubTab === 'accepted' && (<>
                                             <motion.button onClick={() => openScheduleModal(applicant)} whileHover={{ scale: 1.02 }} style={secondaryButtonStyle}>Schedule Interview</motion.button>
                                             <motion.button onClick={() => openMessageModal(applicant)} whileHover={{ scale: 1.02 }} style={secondaryButtonStyle}>Send Message</motion.button>
                                             <motion.button onClick={() => openDrawer(applicant)} whileHover={{ scale: 1.02 }} style={primaryButtonStyle}>View CV <ChevronRightIcon /></motion.button>
-                                        </> )}
-                                        {activeSubTab === 'rejected' && ( <>
+                                        </>)}
+                                        {activeSubTab === 'rejected' && (<>
                                             <motion.button onClick={() => openMessageModal(applicant)} whileHover={{ scale: 1.02 }} style={secondaryButtonStyle}>Send Message</motion.button>
                                             <motion.button onClick={() => openDrawer(applicant)} whileHover={{ scale: 1.02 }} style={primaryButtonStyle}>View CV <ChevronRightIcon /></motion.button>
-                                        </> )}
+                                        </>)}
                                     </div>
                                 </div>
                             ))}
@@ -211,11 +271,11 @@ export default function AdminInterviewManagement() {
             {/* --- MOUNT NEW MODAL --- */}
             <AnimatePresence>
                 {isScheduleModalOpen && (
-                    <ScheduleInterviewModal 
-                        isOpen={isScheduleModalOpen} 
-                        onClose={() => setIsScheduleModalOpen(false)} 
-                        onConfirm={handleScheduleConfirm} 
-                        candidateName={selectedApplicant?.name} 
+                    <ScheduleInterviewModal
+                        isOpen={isScheduleModalOpen}
+                        onClose={() => setIsScheduleModalOpen(false)}
+                        onConfirm={handleScheduleConfirm}
+                        candidateName={selectedApplicant?.name}
                     />
                 )}
             </AnimatePresence>

src/components/CandidateDrawer.jsx

@@ -1,8 +1,41 @@
-import React from 'react';
+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 { supabase } from '../supabaseClient';
+
 
 const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
+  const [showFullProfile, setShowFullProfile] = useState(false);
+
+  const handleDownloadCV = async () => {
+    if (!candidate.resumeUrl) {
+      alert("No resume available.");
+      return;
+    }
+
+    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
+          .download(candidate.resumeUrl);
+
+        if (error) throw error;
+
+        saveAs(data, `${candidate.name}_Resume.pdf`);
+      }
+    } catch (error) {
+      console.error("Download failed:", error);
+      alert("Failed to download resume.");
+    }
+  };
+
   if (!candidate) return null;
 
   return (
@@ -37,7 +70,7 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
               height: '100%',
               width: '100%',
               maxWidth: '500px',
-              
+
               // === 🎨 CSS-ONLY BACKGROUND (No Image Needed) ===
               backgroundColor: '#0f172a', // Base Dark Slate Color
               backgroundImage: `
@@ -48,7 +81,7 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
               // 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',
@@ -57,7 +90,7 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
           >
             {/* Content Container */}
             <div style={{ padding: '2rem' }}>
-              
+
               {/* Header */}
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '2rem' }}>
                 <div>
@@ -76,11 +109,11 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
                   <span style={{ fontWeight: 'bold', color: 'white' }}>{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}%` }} 
+                  <motion.div
+                    initial={{ width: 0 }}
+                    animate={{ width: `${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)' }} 
+                    style={{ height: '100%', backgroundColor: '#EF4444', borderRadius: '3px', boxShadow: '0 0 10px rgba(239,68,68,0.5)' }}
                   />
                 </div>
               </div>
@@ -90,20 +123,20 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
                 <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '1rem' }}>
                   <BrainCircuit size={18} color="#EF4444" /> AI Insights
                 </h3>
-                
+
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-                    {candidate.insights?.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) => (
-                        <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>
-                        </div>
-                    ))}
+                  {candidate.insights?.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) => (
+                    <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>
+                    </div>
+                  ))}
                 </div>
               </div>
 
@@ -120,29 +153,44 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
                 <h3 style={{ fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '0.75rem' }}>Portfolio & Projects</h3>
                 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
                   {candidate.projects?.map((project, i) => (
-                    <a key={i} href="#" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.85rem', color: 'white', backgroundColor: 'rgba(255,255,255,0.1)', padding: '0.4rem 0.8rem', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.1)', transition: 'background-color 0.2s' }}>
-                      {project} <ExternalLink size={12} />
-                    </a>
+                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.85rem', color: 'white', backgroundColor: 'rgba(255,255,255,0.1)', padding: '0.4rem 0.8rem', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.1)', cursor: 'default' }}>
+                      {typeof project === 'object' ? (project.title || project.name) : project} <ExternalLink size={12} />
+                    </div>
                   ))}
                 </div>
               </div>
 
-               {/* Footer Actions */}
-               <div style={{ marginTop: '3rem', paddingTop: '1.5rem', borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', gap: '1rem' }}>
-                  <button style={{ flex: 1, padding: '0.75rem', borderRadius: '0.5rem', backgroundColor: '#EF4444', color: 'white', border: 'none', fontWeight: '600', cursor: 'pointer', boxShadow: '0 4px 12px rgba(239, 68, 68, 0.3)' }}>
-                    Full Profile
-                  </button>
-                  <button style={{ flex: 1, padding: '0.75rem', borderRadius: '0.5rem', backgroundColor: 'transparent', color: 'white', border: '1px solid rgba(255,255,255,0.2)', fontWeight: '600', cursor: 'pointer' }}>
-                    Download CV
-                  </button>
-               </div>
+              {/* Footer Actions */}
+              <div style={{ marginTop: '3rem', paddingTop: '1.5rem', borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', gap: '1rem' }}>
+                <button
+                  onClick={() => setShowFullProfile(true)}
+                  style={{ flex: 1, padding: '0.75rem', borderRadius: '0.5rem', backgroundColor: '#EF4444', color: 'white', border: 'none', fontWeight: '600', cursor: 'pointer', boxShadow: '0 4px 12px rgba(239, 68, 68, 0.3)' }}
+                >
+                  Full Profile
+                </button>
+                <button
+                  onClick={handleDownloadCV}
+                  style={{ flex: 1, padding: '0.75rem', borderRadius: '0.5rem', backgroundColor: 'transparent', color: 'white', border: '1px solid rgba(255,255,255,0.2)', fontWeight: '600', cursor: 'pointer' }}
+                >
+                  Download CV
+                </button>
+              </div>
 
             </div>
           </motion.div>
+
+          <AnimatePresence>
+            {showFullProfile && (
+              <FullProfileOverlay
+                candidate={candidate}
+                onClose={() => setShowFullProfile(false)}
+              />
+            )}
+          </AnimatePresence>
         </>
       )}
     </AnimatePresence>
   );
 };
 
-export default CandidateDrawer;
+export default CandidateDrawer

src/components/FullProfileOverlay.jsx

@@ -0,0 +1,297 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Mail, Phone, MapPin, Briefcase, GraduationCap, Award, User } from 'lucide-react';
+
+const FullProfileOverlay = ({ candidate, onClose }) => {
+    if (!candidate) return null;
+
+    // Helper to safely parse skills (array or CSV string)
+    const parseSkills = (data) => {
+        if (Array.isArray(data)) return data;
+        if (typeof data === 'string') return data.split(',').map(s => s.trim()).filter(Boolean);
+        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
+    ])];
+
+    // 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)
+        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
+            : []
+    };
+
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            style={{
+                position: 'fixed',
+                inset: 0,
+                zIndex: 60, // Higher than Drawer (50)
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                backdropFilter: 'blur(8px)',
+                padding: '2rem'
+            }}
+        >
+            <motion.div
+                initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                animate={{ scale: 1, opacity: 1, y: 0 }}
+                exit={{ scale: 0.9, opacity: 0, y: 20 }}
+                transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+                style={{
+                    width: '100%',
+                    maxWidth: '900px',
+                    maxHeight: '90vh',
+                    overflowY: 'auto',
+                    backgroundColor: '#0f172a',
+                    backgroundImage: `
+            radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.15) 0px, transparent 50%), 
+            radial-gradient(at 100% 100%, rgba(239, 68, 68, 0.15) 0px, transparent 50%),
+            linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%)
+          `,
+                    borderRadius: '1.5rem',
+                    border: '1px solid rgba(255,255,255,0.1)',
+                    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
+                    color: 'white',
+                    display: 'flex',
+                    flexDirection: 'column'
+                }}
+            >
+                {/* === Header === */}
+                <div style={{
+                    padding: '2rem',
+                    borderBottom: '1px solid rgba(255,255,255,0.1)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'start',
+                    position: 'sticky',
+                    top: 0,
+                    backgroundColor: 'rgba(15, 23, 42, 0.95)',
+                    backdropFilter: 'blur(4px)',
+                    zIndex: 10
+                }}>
+                    <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}>
+                        <div style={{
+                            width: '80px',
+                            height: '80px',
+                            borderRadius: '50%',
+                            overflow: 'hidden',
+                            border: '3px solid rgba(255,255,255,0.1)',
+                            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
+                        }}>
+                            <img
+                                src={fullCandidate.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(fullCandidate.name)}&background=random`}
+                                alt={fullCandidate.name}
+                                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                            />
+                        </div>
+                        <div>
+                            <h2 style={{ fontSize: '2rem', fontWeight: 'bold', margin: 0, lineHeight: 1.2 }}>{fullCandidate.name}</h2>
+                            <p style={{ color: '#94a3b8', fontSize: '1.1rem', margin: '0.25rem 0 0 0' }}>{fullCandidate.role}</p>
+                            <div style={{ display: 'flex', gap: '1rem', marginTop: '0.75rem', fontSize: '0.9rem', color: '#cbd5e1' }}>
+                                <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}><Mail size={14} /> {fullCandidate.email}</span>
+                                <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}><Phone size={14} /> {fullCandidate.phone}</span>
+                                <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}><MapPin size={14} /> {fullCandidate.location}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button
+                        onClick={onClose}
+                        style={{
+                            padding: '0.75rem',
+                            borderRadius: '0.75rem',
+                            backgroundColor: 'rgba(255,255,255,0.05)',
+                            border: '1px solid rgba(255,255,255,0.1)',
+                            color: '#94a3b8',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s',
+                            display: 'flex', alignItems: 'center', justifyContent: 'center'
+                        }}
+                        onMouseOver={(e) => { e.currentTarget.style.backgroundColor = 'rgba(239, 68, 68, 0.2)'; e.currentTarget.style.color = 'white'; }}
+                        onMouseOut={(e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.05)'; e.currentTarget.style.color = '#94a3b8'; }}
+                    >
+                        <X size={24} />
+                    </button>
+                </div>
+
+                {/* === Content Body === */}
+                <div style={{ padding: '2rem', display: 'grid', gridTemplateColumns: 'minmax(300px, 1fr) 2fr', gap: '3rem' }}>
+
+                    {/* Left Column */}
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+                        {/* About */}
+                        <section>
+                            <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '1rem' }}>
+                                <User size={18} color="#38bdf8" /> About
+                            </h3>
+                            <p style={{ color: '#94a3b8', lineHeight: '1.7', fontSize: '0.95rem' }}>
+                                {fullCandidate.about}
+                            </p>
+                        </section>
+
+                        {/* Skills */}
+                        <section>
+                            <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '1rem' }}>
+                                <Award size={18} color="#c084fc" /> Skills
+                            </h3>
+                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                                {fullCandidate.skills?.map((skill, i) => (
+                                    <span key={i} style={{
+                                        fontSize: '0.85rem',
+                                        backgroundColor: 'rgba(56, 189, 248, 0.1)',
+                                        color: '#38bdf8',
+                                        padding: '0.4rem 0.8rem',
+                                        borderRadius: '6px',
+                                        border: '1px solid rgba(56, 189, 248, 0.2)'
+                                    }}>
+                                        {skill}
+                                    </span>
+                                ))}
+                            </div>
+                        </section>
+
+                        {/* Projects Pointers */}
+                        <section>
+                            <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '1rem' }}>
+                                <Briefcase size={18} color="#34d399" /> Key Projects
+                            </h3>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                                {fullCandidate.projects?.map((project, i) => (
+                                    <div key={i} style={{ padding: '0.75rem', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: '0.5rem', border: '1px solid rgba(255,255,255,0.05)' }}>
+                                        <div style={{ color: '#e2e8f0', fontSize: '0.95rem', fontWeight: '600' }}>
+                                            {typeof project === 'object' ? (project.title || project.name) : project}
+                                        </div>
+                                        {typeof project === 'object' && project.description && (
+                                            <div style={{ color: '#94a3b8', fontSize: '0.85rem', marginTop: '0.25rem' }}>
+                                                {project.description}
+                                            </div>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        </section>
+                    </div>
+
+                    {/* Right Column */}
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+
+                        {/* Experience Timeline */}
+                        <section>
+                            <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '1.5rem' }}>
+                                <Briefcase size={18} color="#fcd34d" /> Experience
+                            </h3>
+
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', position: 'relative', paddingLeft: '1rem' }}>
+                                {/* Vertical Line */}
+                                <div style={{ position: 'absolute', left: 0, top: '10px', bottom: '10px', width: '2px', backgroundColor: 'rgba(255,255,255,0.1)' }} />
+
+                                {fullCandidate.experience_details.map((exp, i) => (
+                                    <div key={i} style={{ position: 'relative', paddingLeft: '1.5rem' }}>
+                                        {/* Dot */}
+                                        <div style={{ position: 'absolute', left: '-5px', top: '6px', width: '12px', height: '12px', borderRadius: '50%', backgroundColor: '#fcd34d', boxShadow: '0 0 10px rgba(252, 211, 77, 0.5)' }} />
+
+                                        <h4 style={{ color: 'white', fontWeight: '600', fontSize: '1.05rem', marginBottom: '0.25rem' }}>{exp.role || exp.job_title}</h4>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: '#94a3b8', marginBottom: '0.5rem' }}>
+                                            <span>{exp.company}</span>
+                                            <span>{exp.duration || exp.years}</span>
+                                        </div>
+                                        <p style={{ color: '#cbd5e1', fontSize: '0.95rem', lineHeight: '1.6' }}>{exp.description}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        </section>
+
+                        {/* Education */}
+                        <section>
+                            <h3 style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '1.1rem', fontWeight: '600', color: 'white', marginBottom: '1rem' }}>
+                                <GraduationCap size={18} color="#f472b6" /> Education
+                            </h3>
+                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                                {fullCandidate.education.map((edu, i) => (
+                                    <div key={i} style={{ padding: '1rem', backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: '0.75rem', border: '1px solid rgba(255,255,255,0.05)' }}>
+                                        <h4 style={{ color: 'white', fontWeight: '600', fontSize: '1rem', marginBottom: '0.25rem' }}>{edu.degree || edu.course}</h4>
+                                        <p style={{ color: '#94a3b8', fontSize: '0.9rem' }}>{edu.school || edu.institution}</p>
+                                        <p style={{ color: '#64748b', fontSize: '0.85rem', marginTop: '0.5rem' }}>{edu.year}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        </section>
+
+                    </div>
+                </div>
+
+                {/* === Footer === */}
+                <div style={{
+                    padding: '1.5rem 2rem',
+                    borderTop: '1px solid rgba(255,255,255,0.1)',
+                    backgroundColor: 'rgba(15, 23, 42, 0.5)',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: '1rem'
+                }}>
+                    <button
+                        onClick={onClose}
+                        style={{
+                            padding: '0.75rem 1.5rem',
+                            borderRadius: '0.5rem',
+                            border: '1px solid rgba(255,255,255,0.2)',
+                            backgroundColor: 'transparent',
+                            color: 'white',
+                            fontWeight: '600',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Close
+                    </button>
+
+                </div>
+
+            </motion.div>
+        </motion.div>
+    );
+};
+
+export default FullProfileOverlay;