new feature implemented

src/components/Admin/AdminInterviewManagement.jsx

@@ -1,28 +1,173 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { supabase } from '../../supabaseClient';
 import CandidateDrawer from '../CandidateDrawer';
-import ScheduleInterviewModal from '../ScheduleInterviewModal'; // <--- IMPORT NEW MODAL
+import ScheduleInterviewModal from '../ScheduleInterviewModal'; 
 
 // --- 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 CloseIcon = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>;
+const SendIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>;
+
+// --- NEW FULL CHAT UI MODAL ---
+const AdminChatModal = ({ isOpen, onClose, applicant }) => {
+    const [messages, setMessages] = useState([]);
+    const [text, setText] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [adminId, setAdminId] = useState(null);
+    const messagesEndRef = useRef(null);
+
+    // Fetch chat history
+    useEffect(() => {
+        if (!isOpen || !applicant?.userId) return;
+
+        const fetchMessages = async () => {
+            setLoading(true);
+            try {
+                const { data: { user } } = await supabase.auth.getUser();
+                if (!user) return;
+                setAdminId(user.id);
+
+                // Fetch conversation strictly between this Admin and this Applicant
+                const { data, error } = await supabase
+                    .from('messages')
+                    .select('*')
+                    .or(`and(sender_id.eq.${user.id},receiver_id.eq.${applicant.userId}),and(sender_id.eq.${applicant.userId},receiver_id.eq.${user.id})`)
+                    .order('created_at', { ascending: true });
+
+                if (!error && data) {
+                    setMessages(data);
+                }
+            } catch (err) {
+                console.error("Error fetching chat:", err);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchMessages();
+    }, [isOpen, applicant]);
+
+    // Auto-scroll to bottom of chat
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+
+    const sendMsg = async () => {
+        if (!text.trim() || !adminId || !applicant?.userId) return;
+
+        const newMsg = {
+            id: Date.now(), // Temporary ID for optimistic UI update
+            sender_id: adminId,
+            receiver_id: applicant.userId,
+            content: text.trim(),
+            created_at: new Date().toISOString()
+        };
+
+        // Update UI instantly
+        setMessages(prev => [...prev, newMsg]);
+        setText('');
+
+        // Send to database
+        const { error } = await supabase.from('messages').insert([{
+            sender_id: adminId,
+            receiver_id: applicant.userId,
+            content: newMsg.content
+        }]);
+
+        if (error) console.error("Error sending message:", error);
+    };
+
+    if (!isOpen || !applicant) return null;
 
-// --- Simple Message Modal (Kept Inline) ---
-const MessageModal = ({ isOpen, onClose, onSend }) => {
-    const [message, setMessage] = useState('');
-    const handleSend = () => { if (message.trim()) { onSend(message); onClose(); } else { alert('Message cannot be empty.'); } };
-    if (!isOpen) return null;
     return (
-        <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 60 }}>
-            <div style={{ width: '100%', maxWidth: '500px', backgroundColor: '#1f2937', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '1rem', padding: '2rem', color: 'white' }}>
-                <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1.5rem' }}>Compose Message</h2>
-                <textarea value={message} onChange={e => setMessage(e.target.value)} placeholder="Type here..." rows="6" style={{ width: '100%', padding: '0.75rem', borderRadius: '0.5rem', border: '1px solid rgba(255,255,255,0.2)', backgroundColor: 'rgba(255,255,255,0.05)', color: 'white', outline: 'none' }}></textarea>
-                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem', marginTop: '2rem' }}>
-                    <button onClick={onClose} style={{ background: 'transparent', color: 'white', border: 'none', cursor: 'pointer' }}>Cancel</button>
-                    <button onClick={handleSend} style={{ backgroundColor: '#EF4444', color: 'white', padding: '0.5rem 1.5rem', borderRadius: '0.5rem', border: 'none', cursor: 'pointer' }}>Send</button>
+        <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(5px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100 }}>
+            <style>{`.chat-scroll::-webkit-scrollbar { width: 6px; } .chat-scroll::-webkit-scrollbar-track { background: transparent; } .chat-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }`}</style>
+            
+            <motion.div 
+                initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                style={{ 
+                    width: '100%', maxWidth: '600px', height: '75vh', 
+                    background: 'rgba(15, 23, 42, 0.95)', border: '1px solid rgba(255,255,255,0.1)', 
+                    borderRadius: '1.25rem', display: 'flex', flexDirection: 'column', 
+                    overflow: 'hidden', boxShadow: '0 25px 50px rgba(0,0,0,0.5)'
+                }}
+            >
+                {/* Chat Header */}
+                <div style={{ padding: '1.25rem', borderBottom: '1px solid rgba(255,255,255,0.08)', background: 'rgba(0,0,0,0.2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                        <img src={applicant.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(applicant.name)}&background=random`} alt={applicant.name} style={{ width: '40px', height: '40px', borderRadius: '50%', objectFit: 'cover', border: '2px solid rgba(255,255,255,0.1)' }} />
+                        <div>
+                            <h3 style={{ margin: 0, color: 'white', fontSize: '1.1rem', fontWeight: 'bold' }}>{applicant.name}</h3>
+                            <p style={{ margin: 0, fontSize: '0.8rem', color: '#94a3b8' }}>{applicant.role}</p>
+                        </div>
+                    </div>
+                    <button onClick={onClose} style={{ background: 'rgba(255,255,255,0.05)', border: 'none', color: '#94a3b8', cursor: 'pointer', padding: '0.5rem', borderRadius: '50%', display: 'flex' }}>
+                        <CloseIcon />
+                    </button>
                 </div>
-            </div>
+
+                {/* Chat History */}
+                <div className="chat-scroll" style={{ flex: 1, padding: '1.5rem', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                    {loading ? (
+                        <div style={{ textAlign: 'center', color: '#64748b', marginTop: '2rem' }}>Loading conversation...</div>
+                    ) : messages.length === 0 ? (
+                        <div style={{ textAlign: 'center', color: '#64748b', marginTop: '2rem', fontSize: '0.9rem' }}>
+                            No previous messages. Start the conversation!
+                        </div>
+                    ) : (
+                        messages.map(m => {
+                            const isMe = m.sender_id === adminId;
+                            return (
+                                <motion.div key={m.id} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} style={{ alignSelf: isMe ? 'flex-end' : 'flex-start', maxWidth: '75%' }}>
+                                    <div style={{ 
+                                        // Use Admin's Red Theme for outgoing bubbles
+                                        background: isMe ? 'linear-gradient(135deg, #EF4444 0%, #DC2626 100%)' : 'rgba(255,255,255,0.08)', 
+                                        color: 'white', padding: '0.85rem 1.25rem', borderRadius: '1.25rem', 
+                                        borderBottomRightRadius: isMe ? 4 : '1.25rem', borderBottomLeftRadius: isMe ? '1.25rem' : 4,
+                                        fontSize: '0.95rem', lineHeight: '1.5',
+                                        boxShadow: isMe ? '0 4px 15px rgba(239, 68, 68, 0.3)' : 'none'
+                                    }}>
+                                        {m.content}
+                                    </div>
+                                    <div style={{ fontSize: '0.7rem', color: '#64748b', marginTop: 4, textAlign: isMe ? 'right' : 'left', padding: '0 0.5rem' }}>
+                                        {new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                                    </div>
+                                </motion.div>
+                            );
+                        })
+                    )}
+                    <div ref={messagesEndRef} />
+                </div>
+
+                {/* Input Area */}
+                <div style={{ padding: '1.25rem', background: 'rgba(0,0,0,0.3)', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+                    <div style={{ display: 'flex', gap: '0.75rem', background: 'rgba(255,255,255,0.03)', borderRadius: '1rem', padding: '0.5rem', border: '1px solid rgba(255,255,255,0.1)' }}>
+                        <textarea 
+                            value={text} 
+                            onChange={e => setText(e.target.value)} 
+                            onKeyDown={e => { if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); sendMsg(); }}} 
+                            placeholder="Type a message..." 
+                            style={{ flex: 1, padding: '0.75rem', border: 'none', background: 'transparent', color: 'white', outline: 'none', resize: 'none', height: '45px', fontFamily: 'inherit' }} 
+                        />
+                        <button 
+                            onClick={sendMsg} 
+                            disabled={!text.trim()} 
+                            style={{ 
+                                background: text.trim() ? '#EF4444' : 'rgba(255,255,255,0.05)', 
+                                color: text.trim() ? 'white' : '#64748b', border: 'none', borderRadius: '50%', 
+                                width: '45px', height: '45px', cursor: text.trim() ? 'pointer' : 'not-allowed',
+                                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+                                transition: 'all 0.2s ease'
+                            }}
+                        >
+                            <SendIcon />
+                        </button>
+                    </div>
+                </div>
+            </motion.div>
         </div>
     );
 };
@@ -34,7 +179,7 @@ export default function AdminInterviewManagement() {
     const [applicants, setApplicants] = useState({ interviews: [], accepted: [], rejected: [] });
 
     // Modals State
-    const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false); // <--- Updated Name
+    const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false); 
     const [isMessageModalOpen, setIsMessageModalOpen] = useState(false);
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
@@ -72,22 +217,17 @@ export default function AdminInterviewManagement() {
                 // 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,
@@ -105,12 +245,10 @@ export default function AdminInterviewManagement() {
                     resumeUrl: app.resume_url || app.profiles?.resume_url,
                     userId: app.profiles?.id || app.user_id,
                     jobId: app.job_id,
-                    // 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 : '',
@@ -118,13 +256,10 @@ export default function AdminInterviewManagement() {
 
                 // --- 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);
                 }
             });
@@ -137,11 +272,10 @@ export default function AdminInterviewManagement() {
         }
     };
 
-    // 2. Updated Schedule Handler (Receives Object from Modal)
+    // 2. Updated Schedule Handler
     const handleScheduleConfirm = async (scheduleData) => {
         if (!selectedApplicant) return;
 
-        // Destructure data from modal
         const { date, time, interviewType, mode, details, interviewerName, interviewerRole } = scheduleData;
 
         try {
@@ -154,15 +288,13 @@ export default function AdminInterviewManagement() {
                 status: 'Scheduled',
                 interview_type: interviewType,
                 mode: mode,
-                // Conditionally save link or location
                 meeting_link: mode === 'Online' ? details : null,
                 location: mode === 'Offline' ? details : null,
                 interviewer_name: interviewerName,
                 interviewer_role: interviewerRole,
-                duration_mins: 45 // Default
+                duration_mins: 45 
             };
 
-            // Database Operation: Update if exists, otherwise Insert
             let dbError;
             if (selectedApplicant.interviewId) {
                 const { error } = await supabase
@@ -179,7 +311,6 @@ export default function AdminInterviewManagement() {
 
             if (dbError) throw dbError;
 
-            // Email Notification
             if (selectedApplicant.email) {
                 await supabase.functions.invoke('send-interview-email', {
                     body: {
@@ -201,12 +332,10 @@ export default function AdminInterviewManagement() {
         }
     };
 
-    const handleSendMessage = (message) => { alert(`Message sent to ${selectedApplicant?.name}: "${message}"`); };
     const openScheduleModal = (applicant) => { setSelectedApplicant(applicant); setIsScheduleModalOpen(true); };
     const openMessageModal = (applicant) => { setSelectedApplicant(applicant); setIsMessageModalOpen(true); };
     const openDrawer = (applicant) => { setDrawerCandidate(applicant); setIsDrawerOpen(true); };
 
-    // Styles
     const primaryButtonStyle = { backgroundColor: '#EF4444', color: 'white', padding: '0.5rem 1rem', borderRadius: '9999px', fontWeight: '500', cursor: 'pointer', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' };
     const secondaryButtonStyle = { backgroundColor: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.2)', color: 'white', padding: '0.5rem 1rem', borderRadius: '9999px', fontWeight: '500', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' };
 
@@ -270,7 +399,7 @@ export default function AdminInterviewManagement() {
                 </motion.div>
             </AnimatePresence>
 
-            {/* --- MOUNT NEW MODAL --- */}
+            {/* --- MODALS --- */}
             <AnimatePresence>
                 {isScheduleModalOpen && (
                     <ScheduleInterviewModal
@@ -282,8 +411,26 @@ export default function AdminInterviewManagement() {
                 )}
             </AnimatePresence>
 
-            <AnimatePresence>{isMessageModalOpen && <MessageModal isOpen={isMessageModalOpen} onClose={() => setIsMessageModalOpen(false)} onSend={handleSendMessage} />}</AnimatePresence>
-            <AnimatePresence>{isDrawerOpen && <CandidateDrawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} candidate={drawerCandidate} />}</AnimatePresence>
+            {/* ✅ NEW FULL CHAT MODAL */}
+            <AnimatePresence>
+                {isMessageModalOpen && (
+                    <AdminChatModal 
+                        isOpen={isMessageModalOpen} 
+                        onClose={() => setIsMessageModalOpen(false)} 
+                        applicant={selectedApplicant} 
+                    />
+                )}
+            </AnimatePresence>
+            
+            <AnimatePresence>
+                {isDrawerOpen && (
+                    <CandidateDrawer 
+                        isOpen={isDrawerOpen} 
+                        onClose={() => setIsDrawerOpen(false)} 
+                        candidate={drawerCandidate} 
+                    />
+                )}
+            </AnimatePresence>
         </div>
     );
 }

src/components/ApplicantLayout.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react'; // ✅ ADDED useRef
 import { motion, AnimatePresence } from 'framer-motion';
 import { supabase } from '../supabaseClient';
 import {
@@ -6,12 +6,36 @@ import {
     CalendarIcon, AtsCheckerIcon
 } from './Icons'; 
 
+// ✅ ADDED: Bell Icon SVG
+const BellIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+    </svg>
+);
+
 export default function ApplicantLayout({ children, activePage, onNavigate }) {
 
     // ✅ FIX: Initialize state directly from LocalStorage. 
     // This removes the "flicker" because it grabs the name instantly before the page paints.
     const [userName, setUserName] = useState(() => localStorage.getItem('applicant_name') || '');
 
+    // ✅ ADDED: Notification States
+    const [notifications, setNotifications] = useState([]);
+    const [showNotifications, setShowNotifications] = useState(false);
+    const notifRef = useRef(null);
+
+    // ✅ ADDED: Close dropdown when clicking outside
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (notifRef.current && !notifRef.current.contains(event.target)) {
+                setShowNotifications(false);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [notifRef]);
+
     useEffect(() => {
         const fetchUserName = async () => {
             try {
@@ -40,6 +64,40 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
         fetchUserName();
     }, []);
 
+    // ✅ ADDED: Fetch notifications exclusively for the profile page
+    useEffect(() => {
+        const fetchNotifications = async () => {
+            if (activePage === 'applicant-profile') {
+                try {
+                    const { data: { user } } = await supabase.auth.getUser();
+                    if (user) {
+                        const { data: apps } = await supabase
+                            .from('applications')
+                            .select('id, status, jobs(title), updated_at')
+                            .eq('user_id', user.id)
+                            .in('status', ['Accepted', 'Rejected', 'Interviewing'])
+                            .order('updated_at', { ascending: false })
+                            .limit(5);
+
+                        if (apps) {
+                            const notifs = apps.map(app => ({
+                                id: app.id,
+                                title: `Application ${app.status}`,
+                                text: `Your application for ${app.jobs?.title} is now ${app.status}.`,
+                                time: app.updated_at,
+                                color: app.status === 'Accepted' ? '#10b981' : app.status === 'Rejected' ? '#ef4444' : '#FBBF24'
+                            }));
+                            setNotifications(notifs);
+                        }
+                    }
+                } catch (error) {
+                    console.error("Error fetching notifications:", error);
+                }
+            }
+        };
+        fetchNotifications();
+    }, [activePage]); // Runs when activePage changes
+
     const handleLogout = async () => {
         await supabase.auth.signOut();
         localStorage.removeItem('applicant_name'); // ✅ Clear cache so next user doesn't see your name
@@ -74,15 +132,86 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                     {userName ? `Hi, ${userName} 👋` : 'Welcome 👋'}
                 </h1>
 
-                <motion.button 
-                    onClick={handleLogout} 
-                    whileHover={{ scale: 1.03 }} 
-                    whileTap={{ scale: 0.98 }} 
-                    style={{ backgroundColor: '#FBBF24', color: '#1a202c', display: 'flex', alignItems: 'center', padding: '0.75rem', borderRadius: '0.5rem', fontWeight: 'bold', cursor: 'pointer', border: 'none' }}
-                >
-                    <LogoutIcon />
-                    Logout
-                </motion.button>
+                {/* ✅ ADDED: Group wrapper to place Bell and Logout together */}
+                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                    
+                    {/* ✅ ADDED: Conditionally render Bell ONLY on profile page */}
+                    {activePage === 'applicant-profile' && (
+                        <div style={{ position: 'relative' }} ref={notifRef}>
+                            <motion.button 
+                                whileHover={{ scale: 1.05 }}
+                                whileTap={{ scale: 0.95 }}
+                                onClick={() => setShowNotifications(!showNotifications)}
+                                style={{
+                                    background: 'rgba(255,255,255,0.05)',
+                                    border: '1px solid rgba(255,255,255,0.1)',
+                                    borderRadius: '50%',
+                                    width: '45px', height: '45px',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                    color: '#FCD34D', cursor: 'pointer', position: 'relative',
+                                    padding: 0
+                                }}
+                            >
+                                <BellIcon />
+                                {notifications.length > 0 && (
+                                    <span style={{
+                                        position: 'absolute', top: '0px', right: '0px',
+                                        width: '12px', height: '12px',
+                                        backgroundColor: '#FBBF24', // Yellow dot
+                                        borderRadius: '50%',
+                                        border: '2px solid #020617'
+                                    }}></span>
+                                )}
+                            </motion.button>
+
+                            {/* Dropdown */}
+                            <AnimatePresence>
+                                {showNotifications && (
+                                    <motion.div
+                                        initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                                        exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                                        style={{
+                                            position: 'absolute', top: '55px', right: '0', width: '320px',
+                                            backgroundColor: '#1e293b', border: '1px solid rgba(255,255,255,0.1)',
+                                            borderRadius: '12px', boxShadow: '0 10px 25px rgba(0,0,0,0.5)', zIndex: 50, overflow: 'hidden'
+                                        }}
+                                    >
+                                        <div style={{ padding: '1rem', borderBottom: '1px solid rgba(255,255,255,0.1)', fontWeight: 'bold', fontSize: '0.9rem' }}>
+                                            Notifications
+                                        </div>
+                                        <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
+                                            {notifications.length > 0 ? (
+                                                notifications.map(notif => (
+                                                    <div key={notif.id} style={{ padding: '1rem', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'flex', gap: '0.75rem', alignItems: 'start' }}>
+                                                        <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: notif.color, marginTop: '6px', flexShrink: 0 }}></div>
+                                                        <div>
+                                                            <p style={{ fontSize: '0.85rem', color: '#e2e8f0', margin: '0 0 0.25rem 0', fontWeight: 'bold' }}>{notif.title}</p>
+                                                            <p style={{ fontSize: '0.8rem', color: '#cbd5e1', margin: '0 0 0.25rem 0' }}>{notif.text}</p>
+                                                            <p style={{ fontSize: '0.7rem', color: '#94a3b8', margin: 0 }}>{new Date(notif.time).toLocaleDateString()}</p>
+                                                        </div>
+                                                    </div>
+                                                ))
+                                            ) : (
+                                                <div style={{ padding: '2rem', textAlign: 'center', color: '#64748b', fontSize: '0.85rem' }}>No new notifications</div>
+                                            )}
+                                        </div>
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+                        </div>
+                    )}
+
+                    <motion.button 
+                        onClick={handleLogout} 
+                        whileHover={{ scale: 1.03 }} 
+                        whileTap={{ scale: 0.98 }} 
+                        style={{ backgroundColor: '#FBBF24', color: '#1a202c', display: 'flex', alignItems: 'center', padding: '0.75rem', borderRadius: '0.5rem', fontWeight: 'bold', cursor: 'pointer', border: 'none' }}
+                    >
+                        <LogoutIcon />
+                        Logout
+                    </motion.button>
+                </div>
             </header>
 
             {/* Navigation Bar */}

src/pages/ApplicantMessages.jsx

@@ -1,16 +1,122 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { supabase } from '../supabaseClient';
 import ApplicantLayout from '../components/ApplicantLayout';
 import PlaceholderContent from '../components/PlaceholderContent';
-import { ChatIcon } from '../components/Icons';
+import { ChatIcon, SearchIcon } from '../components/Icons'; 
+
+const SendIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>;
+const Avatar = ({ name }) => <div style={{ width: 45, height: 45, borderRadius: '50%', background: 'linear-gradient(135deg, #374151, #1f2937)', border: '2px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', color: 'white', flexShrink: 0 }}>{name ? name[0].toUpperCase() : 'U'}</div>;
+
+// Shared Styles to save lines
+const glassStyle = { background: 'rgba(15, 23, 42, 0.6)', backdropFilter: 'blur(16px)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: '1.25rem', display: 'flex', flexDirection: 'column', overflow: 'hidden' };
+const inputStyle = { width: '100%', padding: '0.8rem', background: 'transparent', border: 'none', color: 'white', outline: 'none', fontSize: '0.95rem' };
 
 export default function ApplicantMessages({ onNavigate }) {
+    const [threads, setThreads] = useState([]);
+    const [selected, setSelected] = useState(null);
+    const [text, setText] = useState('');
+    const [search, setSearch] = useState('');
+
+    useEffect(() => {
+        supabase.auth.getUser().then(({ data: { user } }) => {
+            // Precise Mock Data (Replace with real DB fetch later)
+            setThreads([{
+                id: '1', name: 'HR Team - Iris', subj: 'Application Update: Software Engineer', 
+                last: 'Please let us know your availability.', unread: true, time: new Date().toISOString(),
+                msgs: [
+                    { id: 1, text: 'Hi, your profile looks impressive!', time: '2 days ago', isMe: false },
+                    { id: 2, text: 'Thank you! Excited for the opportunity.', time: '1 day ago', isMe: true },
+                    { id: 3, text: 'Please let us know your availability for an interview.', time: '1 hour ago', isMe: false }
+                ]
+            }]);
+        });
+    }, []);
+
+    const sendMsg = () => {
+        if (!text.trim() || !selected) return;
+        const upd = { ...selected, msgs: [...selected.msgs, { id: Date.now(), text, time: 'Just now', isMe: true }], last: text };
+        setSelected(upd);
+        setThreads(threads.map(t => t.id === upd.id ? upd : t));
+        setText('');
+    };
+
+    const filtered = threads.filter(t => t.name.toLowerCase().includes(search.toLowerCase()) || t.subj.toLowerCase().includes(search.toLowerCase()));
+
     return (
         <ApplicantLayout activePage="applicant-messages" onNavigate={onNavigate}>
-            <PlaceholderContent 
-                title="No messages yet" 
-                message="You'll see notifications here when you receive updates." 
-                icon={<ChatIcon />} 
-            />
+            <style>{`.hide-scroll::-webkit-scrollbar { width: 0px; }`}</style>
+            
+            <div style={{ display: 'flex', height: 'calc(100vh - 140px)', gap: '1.5rem', paddingBottom: '1rem' }}>
+                
+                {/* LEFT PANE: THREAD LIST */}
+                <div style={{ ...glassStyle, width: '350px', flexShrink: 0 }}>
+                    <div style={{ padding: '1.5rem' }}>
+                        <h2 style={{ fontSize: '1.4rem', fontWeight: 'bold', marginBottom: '1rem' }}>Inbox</h2>
+                        <div style={{ position: 'relative', background: 'rgba(0,0,0,0.3)', borderRadius: '0.75rem', border: '1px solid rgba(255,255,255,0.05)' }}>
+                            <div style={{ position: 'absolute', left: 14, top: 12, color: '#64748b' }}><SearchIcon /></div>
+                            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search..." style={{ ...inputStyle, paddingLeft: '2.5rem' }} />
+                        </div>
+                    </div>
+
+                    <div className="hide-scroll" style={{ flex: 1, overflowY: 'auto', padding: '0 0.75rem 1rem' }}>
+                        {filtered.map(t => {
+                            const isAct = selected?.id === t.id;
+                            return (
+                                <motion.div 
+                                    key={t.id} onClick={() => { setSelected(t); setThreads(threads.map(x => x.id === t.id ? { ...x, unread: false } : x)); }}
+                                    whileHover={{ scale: 0.98 }} style={{ padding: '1.25rem', marginBottom: '0.5rem', borderRadius: '1rem', cursor: 'pointer', background: isAct ? 'rgba(251, 191, 36, 0.08)' : 'transparent', border: isAct ? '1px solid rgba(251,191,36,0.3)' : '1px solid transparent' }}
+                                >
+                                    <div style={{ display: 'flex', justifyContent: 'space-between', color: isAct ? '#FCD34D' : 'white', fontWeight: 'bold' }}>
+                                        {t.name} <span style={{ fontSize: '0.75rem', color: t.unread ? '#FCD34D' : '#64748b' }}>{new Date(t.time).toLocaleDateString([],{month:'short', day:'numeric'})}</span>
+                                    </div>
+                                    <div style={{ fontSize: '0.85rem', color: '#e2e8f0', margin: '0.2rem 0', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.subj}</div>
+                                    <div style={{ fontSize: '0.8rem', color: '#94a3b8', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.last}</div>
+                                </motion.div>
+                            );
+                        })}
+                    </div>
+                </div>
+
+                {/* RIGHT PANE: ACTIVE CHAT */}
+                <div style={{ ...glassStyle, flex: 1 }}>
+                    {selected ? (
+                        <>
+                            {/* Chat Header */}
+                            <div style={{ padding: '1.25rem 2rem', background: 'rgba(0,0,0,0.2)', borderBottom: '1px solid rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                                <Avatar name={selected.name} />
+                                <div><h3 style={{ margin: 0, color: 'white' }}>{selected.name}</h3><p style={{ margin: 0, fontSize: '0.85rem', color: '#10b981' }}>Active Now</p></div>
+                            </div>
+
+                            {/* Chat History */}
+                            <div className="hide-scroll" style={{ flex: 1, padding: '2rem', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+                                {selected.msgs.map(m => (
+                                    <motion.div key={m.id} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} style={{ alignSelf: m.isMe ? 'flex-end' : 'flex-start', maxWidth: '70%' }}>
+                                        <div style={{ background: m.isMe ? 'linear-gradient(135deg, #FBBF24, #F59E0B)' : 'rgba(255,255,255,0.06)', color: m.isMe ? '#020617' : 'white', padding: '1rem 1.25rem', borderRadius: '1.25rem', borderBottomRightRadius: m.isMe ? 4 : '1.25rem', borderBottomLeftRadius: m.isMe ? '1.25rem' : 4 }}>
+                                            {m.text}
+                                        </div>
+                                        <div style={{ fontSize: '0.7rem', color: '#64748b', marginTop: 4, textAlign: m.isMe ? 'right' : 'left' }}>{m.time}</div>
+                                    </motion.div>
+                                ))}
+                            </div>
+
+                            {/* Input Area */}
+                            <div style={{ padding: '1.5rem', background: 'rgba(0,0,0,0.3)', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+                                <div style={{ display: 'flex', gap: '1rem', background: 'rgba(255,255,255,0.03)', borderRadius: '1rem', padding: '0.5rem', border: '1px solid rgba(255,255,255,0.1)' }}>
+                                    <textarea value={text} onChange={e => setText(e.target.value)} onKeyDown={e => { if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); sendMsg(); }}} placeholder="Write a message..." style={{ ...inputStyle, resize: 'none', height: '45px' }} />
+                                    <button onClick={sendMsg} disabled={!text.trim()} style={{ background: text.trim() ? '#FBBF24' : 'rgba(255,255,255,0.05)', color: text.trim() ? '#020617' : '#64748b', border: 'none', borderRadius: '50%', width: 45, height: 45, cursor: text.trim() ? 'pointer' : 'not-allowed' }}>
+                                        <SendIcon />
+                                    </button>
+                                </div>
+                            </div>
+                        </>
+                    ) : (
+                        <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+                            <PlaceholderContent title="Your Messages" message="Select a conversation to start chatting." icon={<ChatIcon />} />
+                        </div>
+                    )}
+                </div>
+            </div>
         </ApplicantLayout>
     );
 }