new feature implemented

src/App.jsx

@@ -13,6 +13,7 @@ import ApplicantProfile from './pages/ApplicantProfile';    // Make sure this fi
 import ApplicantATS from './pages/ApplicantATS';            // Make sure this file exists
 import ApplicantInterviews from './pages/ApplicantInterviews'; // Make sure this file exists
 import ApplicantMessages from './pages/ApplicantMessages';    // Make sure this file exists
+import ResetPassword from './pages/ResetPassword';
 
 import { supabase } from './supabaseClient'; // Import at top
 
@@ -67,7 +68,7 @@ export default function App() {
       case 'login': return <LoginPage onNavigate={handleNavigate} />;
       case 'admin': return <AdminLogin onNavigate={handleNavigate} />;
       case 'applicant': return <AppliLogin onNavigate={handleNavigate} />;
-
+      case 'reset-password': return <ResetPassword onNavigate={handleNavigate} />;
       // --- APPLICANT ROUTES ---
       case 'applicant-jobs':
         return <ApplicantJobPage onNavigate={handleNavigate} />;

src/components/Admin/AdminInterviewManagement.jsx

@@ -186,9 +186,7 @@ export default function AdminInterviewManagement() {
     const [selectedApplicant, setSelectedApplicant] = useState(null);
     const [drawerCandidate, setDrawerCandidate] = useState(null);
 
-    // 1. Fetch Data
-    useEffect(() => { fetchData(); }, []);
-
+    // ✅ FIXED: Marked this function as 'async' to resolve the Syntax Error
     const fetchData = async () => {
         try {
             setLoading(true);
@@ -198,7 +196,7 @@ export default function AdminInterviewManagement() {
                 .from('applications')
                 .select(`
                     id, user_id, job_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, resume_url ),
+                    profiles ( id, full_name, email, avatar_url, phone, location, summary, headline, current_position, education, work_experience, experience_years, projects, skills, technical_skills, resume_url ),
                     jobs ( id, title ),
                     interviews ( id, date, time, status, created_at )
                 `)
@@ -272,7 +270,31 @@ export default function AdminInterviewManagement() {
         }
     };
 
+    // 1. Fetch Data on Component Mount
+    useEffect(() => { 
+        fetchData(); 
+    }, []);
+
     // 2. Updated Schedule Handler
+    // ✅ Helper: Send message to candidate
+    const sendMessageToCandidate = async (candidateUserId, message) => {
+        try {
+            const { data: { user: adminUser } } = await supabase.auth.getUser();
+            if (!adminUser) return;
+
+            const { error } = await supabase.from('messages').insert([{
+                sender_id: adminUser.id,
+                receiver_id: candidateUserId,
+                content: message,
+                is_read: false
+            }]);
+
+            if (error) console.error('Error sending message:', error);
+        } catch (err) {
+            console.error('Failed to send message:', err);
+        }
+    };
+
     const handleScheduleConfirm = async (scheduleData) => {
         if (!selectedApplicant) return;
 
@@ -311,6 +333,15 @@ export default function AdminInterviewManagement() {
 
             if (dbError) throw dbError;
 
+            // ✅ Send interview scheduled message to candidate
+            const interviewDatesTime = `${date} at ${time}`;
+            const modeInfo = mode === 'Online' ? `via ${details}` : `at ${details}`;
+            const jobContext = selectedApplicant.role ? ` for ${selectedApplicant.role}` : '';
+            await sendMessageToCandidate(
+                selectedApplicant.userId,
+                `📅 Great news! Your interview${jobContext} has been scheduled for ${interviewDatesTime} (${interviewType}) ${modeInfo}. Interviewer: ${interviewerName} (${interviewerRole}). Please confirm your availability.`
+            );
+
             if (selectedApplicant.email) {
                 await supabase.functions.invoke('send-interview-email', {
                     body: {
@@ -322,7 +353,7 @@ export default function AdminInterviewManagement() {
                 });
             }
 
-            alert("Interview Scheduled Successfully!");
+            alert("Interview Scheduled Successfully and candidate notified!");
             setIsScheduleModalOpen(false);
             fetchData();
 
@@ -411,7 +442,6 @@ export default function AdminInterviewManagement() {
                 )}
             </AnimatePresence>
 
-            {/* ✅ NEW FULL CHAT MODAL */}
             <AnimatePresence>
                 {isMessageModalOpen && (
                     <AdminChatModal 

src/components/Admin/AdminSortingPage.jsx

@@ -262,6 +262,25 @@ export default function AdminSortingPage() {
         fetchApplicants();
     }, []);
 
+    // --- HELPER: Send message to candidate ---
+    const sendMessageToCandidate = async (candidateUserId, message) => {
+        try {
+            const { data: { user: adminUser } } = await supabase.auth.getUser();
+            if (!adminUser) return;
+
+            const { error } = await supabase.from('messages').insert([{
+                sender_id: adminUser.id,
+                receiver_id: candidateUserId,
+                content: message,
+                is_read: false
+            }]);
+
+            if (error) console.error('Error sending message:', error);
+        } catch (err) {
+            console.error('Failed to send message:', err);
+        }
+    };
+
     // --- BULK ACTIONS ---
     const handleBulkReject = async () => {
         if (!confirm(`Are you sure you want to REJECT ${selectedIds.length} candidates?`)) return;
@@ -269,17 +288,27 @@ export default function AdminSortingPage() {
         try {
             const { error } = await supabase
                 .from('applications')
-                .update({ status: 'Rejected' }) // Update status to Rejected
+                .update({ status: 'Rejected' })
                 .in('id', selectedIds);
             if (error) throw error;
 
+            // ✅ Send rejection message to each candidate
+            const rejectedApplicants = applicants.filter(a => selectedIds.includes(a.id));
+            for (const applicant of rejectedApplicants) {
+                const jobContext = applicant.jobTitle ? ` for ${applicant.jobTitle}` : '';
+                await sendMessageToCandidate(
+                    applicant.userId,
+                    `📧 We regret to inform you that your application${jobContext} has been rejected. We appreciate your interest and wish you the best of luck in your career. Feel free to apply again in the future!`
+                );
+            }
+
             // Update UI instantly
             setApplicants(prev => prev.map(app =>
                 selectedIds.includes(app.id) ? { ...app, status: 'Rejected' } : app
             ));
 
-            setSelectedIds([]); // Clear selection
-            alert('Candidates Rejected.');
+            setSelectedIds([]);
+            alert('Candidates Rejected and notified.');
         } catch (error) {
             console.error('Error rejecting:', error.message);
             alert('Failed to reject.');
@@ -298,11 +327,21 @@ export default function AdminSortingPage() {
 
             if (error) throw error;
 
+            // ✅ Send acceptance message to each candidate
+            const approvedApplicants = applicants.filter(a => selectedIds.includes(a.id));
+            for (const applicant of approvedApplicants) {
+                const jobContext = applicant.jobTitle ? ` for ${applicant.jobTitle}` : '';
+                await sendMessageToCandidate(
+                    applicant.userId,
+                    `🎉 Congratulations! Your application${jobContext} has been accepted. We are excited about the possibility of working with you. Our team will be in touch soon to schedule an interview.`
+                );
+            }
+
             setApplicants(prev => prev.map(app =>
                 selectedIds.includes(app.id) ? { ...app, status: 'Accepted' } : app
             ));
             setSelectedIds([]);
-            alert('Approved Successfully!');
+            alert('Approved Successfully and candidates notified!');
         } catch (error) {
             console.error('Error approving:', error.message);
             alert('Failed to update.');

src/components/Admin/AdminSummary.jsx

@@ -23,7 +23,7 @@ const BellIcon = () => (
     </svg>
 );
 
-export default function AdminSummary({ onNavigate }) {
+export default function AdminSummary({ onNavigate, setActiveTab, selectedChatUserId, setSelectedChatUserId }) {
     const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1 } } };
     const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };
 
@@ -36,6 +36,7 @@ export default function AdminSummary({ onNavigate }) {
     // ✅ Notification State
     const [notifications, setNotifications] = useState([]);
     const [showNotifications, setShowNotifications] = useState(false);
+    const [latestPopup, setLatestPopup] = useState(null); // ✅ Show only latest popup
     const notifRef = useRef(null);
 
     // ✅ CLICK OUTSIDE LISTENER
@@ -54,6 +55,85 @@ export default function AdminSummary({ onNavigate }) {
         fetchDashboardData();
     }, []);
 
+    // ✅ HELPER: Show popup notification (only latest)
+    const showPopup = (notif) => {
+        setLatestPopup(notif);
+        
+        // Auto-dismiss after 4 seconds
+        setTimeout(() => {
+            setLatestPopup(null);
+        }, 4000);
+    };
+
+    // ✅ MESSAGE POLLING - Check for new messages every 5 seconds
+    useEffect(() => {
+        let pollInterval;
+        const startPolling = async () => {
+            const { data: { user } } = await supabase.auth.getUser();
+            console.log('📱 Polling started for user:', user?.id);
+            if (!user) return;
+
+            let lastMessageId = null;
+
+            pollInterval = setInterval(async () => {
+                try {
+                    const { data: newMessages } = await supabase
+                        .from('messages')
+                        .select('id, sender_id, content, created_at')
+                        .eq('receiver_id', user.id)
+                        .order('id', { ascending: false })
+                        .limit(1);
+
+                    if (newMessages && newMessages.length > 0) {
+                        const msg = newMessages[0];
+                        console.log('📬 Checking messages:', msg.id, 'last:', lastMessageId);
+                        
+                        // Only process if it's a new message
+                        if (!lastMessageId || msg.id > lastMessageId) {
+                            lastMessageId = msg.id;
+                            
+                            // Get sender profile
+                            const { data: senderProfile } = await supabase
+                                .from('profiles')
+                                .select('full_name')
+                                .eq('id', msg.sender_id)
+                                .single();
+
+                            const senderName = senderProfile?.full_name || 'Candidate';
+
+                            // Create and add notification
+                            const newNotif = {
+                                id: `msg-${msg.id}`,
+                                type: 'New Message',
+                                text: `📨 New message from ${senderName}`,
+                                time: msg.created_at,
+                                color: '#10b981',
+                                preview: msg.content,
+                                senderId: msg.sender_id  // ✅ Store sender ID for navigation
+                            };
+
+                            console.log('🔔 Message notification:', newNotif);
+
+                            setNotifications(prev => {
+                                const exists = prev.some(n => n.id === newNotif.id);
+                                if (exists) return prev;
+                                return [newNotif, ...prev];
+                            });
+
+                            // ✅ SHOW POPUP
+                            showPopup(newNotif);
+                        }
+                    }
+                } catch (err) {
+                    console.error("Poll error:", err);
+                }
+            }, 3000); // Check every 3 seconds
+        };
+
+        startPolling();
+        return () => { if (pollInterval) clearInterval(pollInterval); };
+    }, [showPopup]);
+
     const fetchDashboardData = async () => {
         try {
             setLoading(true);
@@ -103,6 +183,53 @@ export default function AdminSummary({ onNavigate }) {
 
     return (
         <motion.div variants={containerVariants} initial="hidden" animate="visible">
+            
+            {/* ✅ SINGLE SMALL POPUP NOTIFICATION */}
+            <AnimatePresence>
+                {latestPopup && (
+                    <motion.div
+                        key="popup"
+                        initial={{ opacity: 0, y: -15, x: 20 }}
+                        animate={{ opacity: 1, y: 0, x: 0 }}
+                        exit={{ opacity: 0, y: -15, x: 20 }}
+                        style={{
+                            position: 'fixed',
+                            top: '20px',
+                            right: '20px',
+                            background: 'rgba(15, 23, 42, 0.98)',
+                            border: `2px solid ${latestPopup.color}`,
+                            borderRadius: '10px',
+                            padding: '0.75rem 1rem',
+                            width: '280px',
+                            zIndex: 9999,
+                            backdropFilter: 'blur(10px)',
+                            boxShadow: '0 8px 24px rgba(0,0,0,0.6)',
+                            fontFamily: 'inherit'
+                        }}
+                    >
+                        <p style={{ 
+                            color: '#e2e8f0', 
+                            margin: '0 0 0.3rem 0',
+                            fontWeight: '600',
+                            fontSize: '0.88rem'
+                        }}>
+                            {latestPopup.text}
+                        </p>
+                        {latestPopup.preview && (
+                            <p style={{ 
+                                color: '#cbd5e1', 
+                                margin: '0', 
+                                fontSize: '0.78rem',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis'
+                            }}>
+                                {latestPopup.preview}
+                            </p>
+                        )}
+                    </motion.div>
+                )}
+            </AnimatePresence>
 
             {/* ✅ HEADER SECTION */}
             <motion.header
@@ -172,11 +299,42 @@ export default function AdminSummary({ onNavigate }) {
                                 <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 
+                                                key={notif.id} 
+                                                onClick={() => {
+                                                    console.log('Notification clicked:', notif.type);
+                                                    
+                                                    // ✅ Navigate based on notification type
+                                                    if (notif.type === 'New Message' && notif.senderId) {
+                                                        // For messages, set the selected chat user and go to messages tab
+                                                        setSelectedChatUserId(notif.senderId);
+                                                    }
+                                                    
+                                                    setActiveTab('messages');
+                                                    setShowNotifications(false);
+                                                    // ✅ Remove notification after clicking
+                                                    setNotifications(prev => prev.filter(n => n.id !== notif.id));
+                                                }}
+                                                style={{ 
+                                                    padding: '1rem', 
+                                                    borderBottom: '1px solid rgba(255,255,255,0.05)', 
+                                                    display: 'flex', 
+                                                    gap: '0.75rem', 
+                                                    alignItems: 'start',
+                                                    cursor: 'pointer',
+                                                    transition: 'background 0.2s',
+                                                    ':hover': { background: 'rgba(255,255,255,0.05)' }
+                                                }}
+                                                onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
+                                                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+                                            >
                                                 <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' }}>{notif.text}</p>
-                                                    <p style={{ fontSize: '0.75rem', color: '#94a3b8', margin: 0 }}>
+                                                <div style={{ flex: 1 }}>
+                                                    <p style={{ fontSize: '0.85rem', color: '#e2e8f0', margin: '0 0 0.25rem 0', fontWeight: '500' }}>{notif.text}</p>
+                                                    {notif.preview && (
+                                                        <p style={{ fontSize: '0.75rem', color: '#cbd5e1', margin: '0.25rem 0 0 0', fontStyle: 'italic' }}>{notif.preview}</p>
+                                                    )}
+                                                    <p style={{ fontSize: '0.75rem', color: '#94a3b8', margin: '0.25rem 0 0 0' }}>
                                                         {new Date(notif.time).toLocaleDateString()} • {new Date(notif.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                                     </p>
                                                 </div>

src/components/ApplicantLayout.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'; // ✅ ADDED useRef
+import React, { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { supabase } from '../supabaseClient';
 import {
@@ -6,7 +6,6 @@ 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>
@@ -16,16 +15,16 @@ const BellIcon = () => (
 
 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
+    // ⭐ NEW: unread message badge state
+    const [unreadMessages, setUnreadMessages] = useState(0);
+    const [unreadMessagesList, setUnreadMessagesList] = useState([]);
+
     useEffect(() => {
         function handleClickOutside(event) {
             if (notifRef.current && !notifRef.current.contains(event.target)) {
@@ -49,11 +48,7 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                     
                     if (profile && profile.full_name) {
                         const firstName = profile.full_name.split(' ')[0];
-                        
-                        // Update state
                         setUserName(firstName);
-                        
-                        // ✅ Save to LocalStorage for next time (Instant load on refresh)
                         localStorage.setItem('applicant_name', firstName);
                     }
                 }
@@ -64,7 +59,73 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
         fetchUserName();
     }, []);
 
-    // ✅ ADDED: Fetch notifications exclusively for the profile page
+    // ⭐ NEW: fetch unread messages count and details
+    useEffect(() => {
+
+        const fetchUnreadMessages = async () => {
+
+            const { data: { user } } = await supabase.auth.getUser();
+            if (!user) return;
+
+            const { data: messages } = await supabase
+                .from("messages")
+                .select("id, sender_id, content, created_at, profiles(full_name)")
+                .eq("receiver_id", user.id)
+                .eq("is_read", false)
+                .order("created_at", { ascending: false });
+
+            if (messages) {
+                setUnreadMessages(messages.length);
+                // Format messages with sender names and timestamps
+                const formattedMessages = messages.map(msg => ({
+                    id: msg.id,
+                    senderName: msg.profiles?.full_name || 'Someone',
+                    content: msg.content,
+                    timestamp: new Date(msg.created_at).toLocaleDateString() + ' • ' + new Date(msg.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+                }));
+                setUnreadMessagesList(formattedMessages);
+            }
+        };
+
+        fetchUnreadMessages();
+
+    }, []);
+
+    // ⭐ NEW: realtime update for new messages
+    useEffect(() => {
+
+        const channel = supabase
+            .channel("messages-badge")
+            .on(
+                "postgres_changes",
+                { event: "INSERT", schema: "public", table: "messages" },
+                async (payload) => {
+                    // Fetch the sender's name and add to the list
+                    const { data: senderProfile } = await supabase
+                        .from("profiles")
+                        .select("full_name")
+                        .eq("id", payload.new.sender_id)
+                        .single();
+
+                    const newMsg = {
+                        id: payload.new.id,
+                        senderName: senderProfile?.full_name || 'Someone',
+                        content: payload.new.content,
+                        timestamp: new Date(payload.new.created_at).toLocaleDateString() + ' • ' + new Date(payload.new.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+                    };
+
+                    setUnreadMessagesList(prev => [newMsg, ...prev]);
+                    setUnreadMessages(prev => prev + 1);
+                }
+            )
+            .subscribe();
+
+        return () => {
+            supabase.removeChannel(channel);
+        };
+
+    }, []);
+
     useEffect(() => {
         const fetchNotifications = async () => {
             if (activePage === 'applicant-profile') {
@@ -96,15 +157,37 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
             }
         };
         fetchNotifications();
-    }, [activePage]); // Runs when activePage changes
+    }, [activePage]);
+
+    // ⭐ NEW: mark messages read when user opens messages page
+    useEffect(() => {
+
+        const markMessagesRead = async () => {
+
+            if (activePage !== "applicant-messages") return;
+
+            const { data: { user } } = await supabase.auth.getUser();
+            if (!user) return;
+
+            await supabase
+                .from("messages")
+                .update({ is_read: true })
+                .eq("receiver_id", user.id);
+
+            setUnreadMessages(0);
+            setUnreadMessagesList([]);
+        };
+
+        markMessagesRead();
+
+    }, [activePage]);
 
     const handleLogout = async () => {
         await supabase.auth.signOut();
-        localStorage.removeItem('applicant_name'); // ✅ Clear cache so next user doesn't see your name
+        localStorage.removeItem('applicant_name');
         onNavigate('login');
     };
 
-    // Helper to check if a tab is active
     const isActive = (key) => activePage === key;
 
     const navItems = [
@@ -117,25 +200,14 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
 
     return (
         <div style={{ height: '100vh', width: '100%', backgroundColor: '#020617', color: 'white', fontFamily: "'Montserrat', sans-serif", padding: '2rem', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', position: 'relative' }}>
-            <style>{` main::-webkit-scrollbar { width: 8px; } main::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } main::-webkit-scrollbar-thumb { background: #FBBF24; border-radius: 10px; } main::-webkit-scrollbar-thumb:hover { background: #FCD34D; } `}</style>
             
-            {/* Background Blobs */}
-            <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 0, overflow: 'hidden', pointerEvents: 'none' }}>
-                <div style={{ position: 'absolute', borderRadius: '50%', filter: 'blur(80px)', opacity: 0.3, width: '400px', height: '400px', backgroundColor: '#FBBF24', top: '-50px', left: '-100px' }}></div>
-                <div style={{ position: 'absolute', borderRadius: '50%', filter: 'blur(80px)', opacity: 0.3, width: '400px', height: '400px', backgroundColor: '#F59E0B', bottom: '-80px', right: '-120px' }}></div>
-            </div>
-            
-            {/* Header */}
             <header style={{ position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem', flexShrink: 0 }}>
-                {/* Name appears instantly now if cached */}
                 <h1 style={{ fontSize: '1.875rem', fontWeight: 'bold' }}>
                     {userName ? `Hi, ${userName} 👋` : 'Welcome 👋'}
                 </h1>
 
-                {/* ✅ 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 
@@ -153,47 +225,87 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                                 }}
                             >
                                 <BellIcon />
-                                {notifications.length > 0 && (
+                                {(notifications.length + unreadMessages) > 0 && (
                                     <span style={{
-                                        position: 'absolute', top: '0px', right: '0px',
-                                        width: '12px', height: '12px',
-                                        backgroundColor: '#FBBF24', // Yellow dot
+                                        position: 'absolute',
+                                        top: '-5px',
+                                        right: '-5px',
+                                        width: '24px',
+                                        height: '24px',
+                                        backgroundColor: '#FBBF24',
                                         borderRadius: '50%',
-                                        border: '2px solid #020617'
-                                    }}></span>
+                                        border: '2px solid #020617',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        color: '#1a202c',
+                                        fontSize: '0.75rem',
+                                        fontWeight: 'bold'
+                                    }}>
+                                        {notifications.length + unreadMessages}
+                                    </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 }}
+                                        initial={{ opacity: 0, y: 10 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, y: 10 }}
                                         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'
+                                            position: 'absolute',
+                                            top: '55px',
+                                            right: '0',
+                                            width: '320px',
+                                            backgroundColor: '#1e293b',
+                                            border: '1px solid rgba(255,255,255,0.1)',
+                                            borderRadius: '12px',
+                                            zIndex: 50,
+                                            maxHeight: '300px',
+                                            overflowY: 'auto'
                                         }}
                                     >
-                                        <div style={{ padding: '1rem', borderBottom: '1px solid rgba(255,255,255,0.1)', fontWeight: 'bold', fontSize: '0.9rem' }}>
-                                            Notifications
+                                        <div style={{ padding: '1rem', fontWeight: 'bold', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
+                                            Recent Notification ({notifications.length + unreadMessages})
                                         </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: '0.75rem' }}>
+                                            {notifications.length + unreadMessages === 0 ? (
+                                                <div style={{ padding: '1rem', textAlign: 'center', color: '#94a3b8', fontSize: '0.85rem' }}>
+                                                    No new notifications
+                                                </div>
                                             ) : (
-                                                <div style={{ padding: '2rem', textAlign: 'center', color: '#64748b', fontSize: '0.85rem' }}>No new notifications</div>
+                                                <>
+                                                    {unreadMessagesList.map(msg => (
+                                                        <div key={msg.id} style={{ padding: '0.75rem', borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'flex', gap: '0.5rem', alignItems: 'flex-start' }}>
+                                                            <span style={{ color: '#3b82f6', fontSize: '1rem' }}>📨</span>
+                                                            <div style={{ flex: 1 }}>
+                                                                <p style={{ margin: 0, fontSize: '0.85rem', color: '#e2e8f0', fontWeight: 500 }}>
+                                                                    {msg.senderName}
+                                                                </p>
+                                                                <p style={{ margin: '0.25rem 0 0 0', fontSize: '0.75rem', color: '#cbd5e1' }}>
+                                                                    {msg.timestamp}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                                    {notifications.map(notif => (
+                                                        <div key={notif.id} style={{ padding: '0.75rem', borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'flex', gap: '0.5rem', alignItems: 'flex-start' }}>
+                                                            <span style={{ color: notif.color, fontSize: '1rem' }}>•</span>
+                                                            <div style={{ flex: 1 }}>
+                                                                <p style={{ margin: 0, fontSize: '0.85rem', color: '#e2e8f0', fontWeight: 500 }}>
+                                                                    {notif.title}
+                                                                </p>
+                                                                <p style={{ margin: '0.25rem 0 0 0', fontSize: '0.75rem', color: '#cbd5e1' }}>
+                                                                    {notif.text}
+                                                                </p>
+                                                                <p style={{ margin: '0.25rem 0 0 0', fontSize: '0.7rem', color: '#64748b' }}>
+                                                                    {notif.time}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                                </>
                                             )}
                                         </div>
                                     </motion.div>
@@ -214,9 +326,8 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                 </div>
             </header>
 
-            {/* Navigation Bar */}
             <div style={{ display: 'flex', justifyContent: 'center', width: '100%', flexShrink: 0, marginBottom: '2rem' }}>
-                <nav style={{ position: 'relative', zIndex: 1, display: 'inline-flex', gap: '1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', borderRadius: '1rem', padding: '0.5rem', overflowX: 'auto' }}>
+                <nav style={{ position: 'relative', zIndex: 1, display: 'inline-flex', gap: '1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', borderRadius: '1rem', padding: '0.5rem' }}>
                     {navItems.map(({ key, icon, label }) => {
                         const active = isActive(key);
                         return (
@@ -226,9 +337,19 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                                 style={{ position: 'relative', padding: '0.75rem 1.5rem', borderRadius: '0.5rem', cursor: 'pointer', display: 'flex', alignItems: 'center', color: active ? '#FCD34D' : '#d1d5db', fontWeight: active ? 'bold' : 'normal', zIndex: 1 }}
                             >
                                 {icon}
-                                <span style={{ marginLeft: '0.5rem', textTransform: 'capitalize' }}>{label}</span>
+                                <span style={{ marginLeft: '0.5rem' }}>{label}</span>
+
                                 {active && (
-                                    <motion.div layoutId="active-pill" style={{ position: 'absolute', inset: 0, backgroundColor: 'rgba(251, 191, 36, 0.2)', borderRadius: '0.5rem', zIndex: -1 }} transition={{ duration: 0.2 }} />
+                                    <motion.div
+                                        layoutId="active-pill"
+                                        style={{
+                                            position: 'absolute',
+                                            inset: 0,
+                                            backgroundColor: 'rgba(251, 191, 36, 0.2)',
+                                            borderRadius: '0.5rem',
+                                            zIndex: -1
+                                        }}
+                                    />
                                 )}
                             </div>
                         );
@@ -236,20 +357,9 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                 </nav>
             </div>
 
-            {/* Main Content */}
-            <main style={{ position: 'relative', zIndex: 1, flex: 1, overflowY: 'auto', paddingRight: '1rem' }}>
-                <AnimatePresence mode="wait">
-                    <motion.div 
-                        key={activePage} 
-                        initial={{ opacity: 0, y: 10 }} 
-                        animate={{ opacity: 1, y: 0 }} 
-                        exit={{ opacity: 0, y: -10 }} 
-                        transition={{ duration: 0.2 }}
-                    >
-                        {children}
-                    </motion.div>
-                </AnimatePresence>
+            <main style={{ position: 'relative', zIndex: 1, flex: 1, overflowY: 'auto' }}>
+                {children}
             </main>
         </div>
     );
-};
+}

src/components/ExperienceChart.jsx

@@ -1,61 +1,77 @@
+
 import React, { useMemo } from 'react';
 import { motion } from 'framer-motion';
 
 const ExperienceChart = ({ applicants = [] }) => {
 
     const avgExperience = useMemo(() => {
-        if (!applicants || applicants.length === 0) return "0.0";
-
-        const totalExp = applicants.reduce((acc, curr) => {
-            // ✅ FIX: Check all possible locations for the data
-            // 1. 'curr.experience': If formatted by a parent component
-            // 2. 'curr.profiles.experience_years': The actual DB column name
-            // 3. 'curr.profiles.experience': A fallback
-            const rawValue =
-                curr.experience ??
-                curr.profiles?.experience_years ??
-                curr.profiles?.experience;
-
-            // Handle null/undefined explicitly
-            if (rawValue === null || rawValue === undefined) return acc;
-
-            const strVal = String(rawValue).toLowerCase();
-
-            // Filter out text that clearly indicates no experience
-            if (strVal.includes('fresher') || strVal.includes('none') || strVal === '') {
-                return acc;
-            }
 
-            // ✅ BETTER PARSING: 
-            // Matches "1.5", "2", "3.2 years", etc.
-            const match = strVal.match(/(\d+(\.\d+)?)/);
+        console.log("📊 Applications received:", applicants);
+
+        if (!applicants || applicants.length === 0) {
+            return "0.0";
+        }
+
+        let totalExp = 0;
+
+        applicants.forEach((app, index) => {
+
+            const rawExp = app?.experience;
+
+            console.log(`🔍 Applicant [${index}] experience:`, rawExp);
+
+            
+
+            const exp = parseFloat(rawExp);
+
+            if (!isNaN(exp)) {
+                totalExp += exp;
+            }
 
-            // If match found, parse as Float (to keep the 1.5), otherwise 0
-            const extractedNum = match ? parseFloat(match[0]) : 0;
+        });
 
-            return acc + extractedNum;
-        }, 0);
+        console.log("📈 Total Experience:", totalExp);
+        console.log("👥 Total Candidates:", applicants.length);
 
-        // Calculate Average
-        const avg = totalExp / applicants.length;
+        const avg = applicants.length > 0 ? totalExp / applicants.length : 0;
 
-        // Return with 1 decimal place (e.g., "1.5")
-        return isNaN(avg) ? "0.0" : avg.toFixed(1);
+        return avg.toFixed(1);
 
     }, [applicants]);
 
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-            <div style={{ position: 'relative', width: '160px', height: '160px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                {/* Background Circle */}
-                <svg viewBox="0 0 36 36" style={{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }}>
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%'
+        }}>
+            <div style={{
+                position: 'relative',
+                width: '160px',
+                height: '160px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            }}>
+
+                <svg
+                    viewBox="0 0 36 36"
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        transform: 'rotate(-90deg)'
+                    }}
+                >
+
                     <path
                         d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                         fill="none"
-                        stroke="rgba(255, 255, 255, 0.1)"
+                        stroke="rgba(255,255,255,0.1)"
                         strokeWidth="3"
                     />
-                    {/* Animated Progress Circle */}
+
                     <motion.path
                         d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                         fill="none"
@@ -63,31 +79,60 @@ const ExperienceChart = ({ applicants = [] }) => {
                         strokeWidth="3"
                         strokeLinecap="round"
                         initial={{ pathLength: 0 }}
-                        // Cap the visual meter at 10 years (dividing by 10)
-                        animate={{ pathLength: Math.min(parseFloat(avgExperience) / 10, 1) }}
+                        animate={{
+                            pathLength: Math.min(parseFloat(avgExperience) / 10, 1)
+                        }}
                         transition={{ duration: 1.5, ease: "easeOut" }}
                     />
+
                 </svg>
 
-                {/* Center Text */}
-                <div style={{ position: 'absolute', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                <div style={{
+                    position: 'absolute',
+                    textAlign: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center'
+                }}>
+
                     <motion.span
                         initial={{ opacity: 0, scale: 0.5 }}
                         animate={{ opacity: 1, scale: 1 }}
                         transition={{ delay: 0.2 }}
-                        style={{ fontSize: '2.5rem', fontWeight: 'bold', color: 'white', lineHeight: '1' }}
+                        style={{
+                            fontSize: '2.5rem',
+                            fontWeight: 'bold',
+                            color: 'white',
+                            lineHeight: '1'
+                        }}
                     >
                         {avgExperience}
                     </motion.span>
-                    <span style={{ fontSize: '0.875rem', color: '#9ca3af', marginTop: '0.25rem' }}>Avg. Years</span>
+
+                    <span style={{
+                        fontSize: '0.875rem',
+                        color: '#9ca3af',
+                        marginTop: '0.25rem'
+                    }}>
+                        Avg. Years
+                    </span>
+
                 </div>
+
             </div>
 
-            <p style={{ textAlign: 'center', fontSize: '0.85rem', color: '#6b7280', marginTop: '1rem' }}>
-                Based on {applicants.length} candidate profiles
+            <p style={{
+                textAlign: 'center',
+                fontSize: '0.85rem',
+                color: '#6b7280',
+                marginTop: '1rem'
+            }}>
+                Based on application data
             </p>
+
         </div>
     );
 };
 
-export default ExperienceChart;
+export default ExperienceChart;
+

src/components/JobListings.jsx

@@ -45,6 +45,26 @@ export default function JobListings({ searchQuery, setSearchQuery, isSearching,
         }
     };
 
+    // ✅ Helper: Send welcome message to applicant
+    const sendApplicationConfirmationMessage = async (userId, jobTitle) => {
+        try {
+            const { data: { user: adminUser } } = await supabase.auth.getUser();
+            if (!adminUser) return;
+
+            const message = `Hello, Thank you for applying for the **${jobTitle}** position. We have received your application and our team is currently reviewing your profile. If your qualifications match our requirements, we will contact you shortly regarding the next steps in the selection process. We appreciate your interest in this opportunity.`;
+
+            const { error } = await supabase.from('messages').insert([{
+                sender_id: adminUser.id,
+                receiver_id: userId,
+                content: message
+            }]);
+
+            if (error) console.error('Error sending confirmation message:', error);
+        } catch (err) {
+            console.error('Failed to send confirmation message:', err);
+        }
+    };
+
     // 3. Submit Application (With Verification Gatekeeper)
     const handleFinalSubmit = async (formData) => {
         if (!jobToApply) return;
@@ -62,7 +82,7 @@ export default function JobListings({ searchQuery, setSearchQuery, isSearching,
             // --- 🔒 GATEKEEPER CHECK: Verify Phone Status ---
             const { data: profile, error: profileError } = await supabase
                 .from('profiles')
-                .select('is_phone_verified')
+                .select('is_phone_verified, experience_years')
                 .eq('id', user.id)
                 .single();
 
@@ -84,11 +104,15 @@ export default function JobListings({ searchQuery, setSearchQuery, isSearching,
                     user_id: user.id,
                     status: 'Pending',
                     resume_url: formData.resume_url,
-                    cover_letter: formData.cover_letter
+                    cover_letter: formData.cover_letter,
+                    experience: profile.experience // Include experience from profile
                 }]);
 
             if (error) throw error;
 
+            // ✅ Send confirmation message to applicant
+            await sendApplicationConfirmationMessage(user.id, jobToApply.title);
+
             setAppliedJobIds(prev => new Set(prev).add(jobToApply.id));
             alert("Application submitted successfully!");
 

src/pages/Admindashboard.jsx

@@ -14,15 +14,16 @@ import TalentClusters from '../components/Admin/TalentClusters';
 export default function AdminDashboard({ onNavigate }) {
     const [activeTab, setActiveTab] = useState('dashboard');
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [selectedChatUserId, setSelectedChatUserId] = useState(null); // ✅ Track selected chat user
 
     const renderContent = () => {
         switch (activeTab) {
             case 'dashboard':
-                return <AdminSummary onNavigate={onNavigate} setIsModalOpen={setIsModalOpen} />;
+                return <AdminSummary onNavigate={onNavigate} setIsModalOpen={setIsModalOpen} setActiveTab={setActiveTab} selectedChatUserId={selectedChatUserId} setSelectedChatUserId={setSelectedChatUserId} />;
             case 'jobs':
                 return <AdminSortingPage />;
             case 'messages':
-                return <AdminInterviewManagement />;
+                return <AdminInterviewManagement selectedChatUserId={selectedChatUserId} setSelectedChatUserId={setSelectedChatUserId} />;
             case 'job-management':
                 return <JobPosting />;
             case 'clusters':

src/pages/AppliLogin.jsx

@@ -68,11 +68,11 @@ export default function AppliLogin({ onNavigate }) {
           options: { data: { role: 'applicant' } }
         });
         if (error) throw error;
-        setNotification({ type: 'success', message: 'Registration successful! Please login.' });
+        setNotification({ type: 'success', message: 'Registration successful! Please confirm your Email and login.' });
         setMode('login');
       } else if (mode === 'forgot') {
         const { error } = await supabase.auth.resetPasswordForEmail(email, {
-          redirectTo: window.location.origin,
+          redirectTo: `${window.location.origin}/reset-password`,
         });
         if (error) throw error;
         setNotification({ type: 'success', message: 'Password reset link sent! Check your email.' });

src/pages/ApplicantJobPage.jsx

@@ -33,6 +33,7 @@ export default function ApplicantJobPage({ onNavigate }) {
     const [searchQuery, setSearchQuery] = useState('');
     const [activeTab, setActiveTab] = useState('all');
     const [loading, setLoading] = useState(true);
+    const [showAllJobs, setShowAllJobs] = useState(false); // ✅ Track if showing all jobs
 
     useEffect(() => {
         const fetchData = async () => {
@@ -156,8 +157,14 @@ export default function ApplicantJobPage({ onNavigate }) {
                 job.company.toLowerCase().includes(lowerQuery)
             );
         }
+        
+        // ✅ Limit to 4 jobs unless "See All" is clicked
+        if (!showAllJobs && !searchQuery) {
+            result = result.slice(0, 4);
+        }
+        
         setFilteredJobs(result);
-    }, [searchQuery, activeTab, allJobs, userProfile]);
+    }, [searchQuery, activeTab, allJobs, userProfile, showAllJobs]);
 
     return (
         <ApplicantLayout activePage="applicant-jobs" onNavigate={onNavigate}>
@@ -167,8 +174,8 @@ export default function ApplicantJobPage({ onNavigate }) {
                     {activeTab === 'recommended' ? 'Jobs For You' : 'All Opportunities'}
                 </h2>
                 <div style={{ backgroundColor: 'rgba(255,255,255,0.1)', padding: '0.25rem', borderRadius: '0.5rem', display: 'flex', gap: '0.5rem' }}>
-                    <button onClick={() => setActiveTab('all')} style={{ padding: '0.5rem 1rem', borderRadius: '0.3rem', border: 'none', cursor: 'pointer', fontWeight: 'bold', backgroundColor: activeTab === 'all' ? '#FBBF24' : 'transparent', color: activeTab === 'all' ? '#1a202c' : '#9ca3af' }}>All Jobs</button>
-                    <button onClick={() => setActiveTab('recommended')} style={{ padding: '0.5rem 1rem', borderRadius: '0.3rem', border: 'none', cursor: 'pointer', fontWeight: 'bold', backgroundColor: activeTab === 'recommended' ? '#FBBF24' : 'transparent', color: activeTab === 'recommended' ? '#1a202c' : '#9ca3af' }}>Recommended ✨</button>
+                    <button onClick={() => { setActiveTab('all'); setShowAllJobs(false); }} style={{ padding: '0.5rem 1rem', borderRadius: '0.3rem', border: 'none', cursor: 'pointer', fontWeight: 'bold', backgroundColor: activeTab === 'all' ? '#FBBF24' : 'transparent', color: activeTab === 'all' ? '#1a202c' : '#9ca3af' }}>All Jobs</button>
+                    <button onClick={() => { setActiveTab('recommended'); setShowAllJobs(false); }} style={{ padding: '0.5rem 1rem', borderRadius: '0.3rem', border: 'none', cursor: 'pointer', fontWeight: 'bold', backgroundColor: activeTab === 'recommended' ? '#FBBF24' : 'transparent', color: activeTab === 'recommended' ? '#1a202c' : '#9ca3af' }}>Recommended ✨</button>
                 </div>
             </div>
 
@@ -194,7 +201,31 @@ export default function ApplicantJobPage({ onNavigate }) {
                             <button onClick={() => onNavigate('applicant-profile')} style={{ marginTop: '1rem', padding: '0.5rem 1rem', backgroundColor: '#374151', color: 'white', border: 'none', borderRadius: '0.5rem', cursor: 'pointer' }}>Update Profile</button>
                         </div>
                     ) : (
-                        <JobListings searchQuery={searchQuery} setSearchQuery={setSearchQuery} isSearching={searchQuery.length > 0} filteredJobListings={filteredJobs} />
+                        <>
+                            <JobListings searchQuery={searchQuery} setSearchQuery={setSearchQuery} isSearching={searchQuery.length > 0} filteredJobListings={filteredJobs} />
+                            
+                            {/* ✅ See All Button */}
+                            {!showAllJobs && !searchQuery && (
+                                <div style={{ display: 'flex', justifyContent: 'center', marginTop: '2rem' }}>
+                                    <button 
+                                        onClick={() => setShowAllJobs(true)} 
+                                        style={{ 
+                                            padding: '0.75rem 2rem', 
+                                            backgroundColor: '#FBBF24', 
+                                            color: '#1a202c', 
+                                            border: 'none', 
+                                            borderRadius: '0.5rem', 
+                                            cursor: 'pointer',
+                                            fontWeight: 'bold',
+                                            fontSize: '1rem',
+                                            transition: 'all 0.2s'
+                                        }}
+                                    >
+                                        See All Jobs
+                                    </button>
+                                </div>
+                            )}
+                        </>
                     )}
                 </>
             )}

src/pages/ApplicantMessages.jsx

@@ -1,15 +1,30 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { supabase } from '../supabaseClient';
 import ApplicantLayout from '../components/ApplicantLayout';
 import PlaceholderContent from '../components/PlaceholderContent';
 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>;
+// --- Inline UI Components for Chat ---
+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>
+);
 
-// 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 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>
+);
+
+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 }) {
@@ -17,31 +32,183 @@ export default function ApplicantMessages({ onNavigate }) {
     const [selected, setSelected] = useState(null);
     const [text, setText] = useState('');
     const [search, setSearch] = useState('');
+    const [userId, setUserId] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const scrollRef = useRef(null);
 
+    // Auto-scroll to bottom of conversation
     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 }
-                ]
-            }]);
-        });
+        scrollRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [selected?.msgs]);
+
+    // ✅ FETCH MESSAGES AND NAMES
+    const fetchMsgs = async (uid) => {
+        try {
+            console.log("Fetching messages for user:", uid);
+            const { data: messages, error } = await supabase
+                .from('messages')
+                .select('*')
+                .or(`receiver_id.eq.${uid},sender_id.eq.${uid}`)
+                .order('created_at', { ascending: true });
+
+            if (error) throw error;
+
+            const threadMap = {};
+            messages.forEach(m => {
+                const isMe = m.sender_id === uid;
+                const otherId = isMe ? m.receiver_id : m.sender_id;
+
+                if (!threadMap[otherId]) {
+                    threadMap[otherId] = { 
+                        id: otherId, 
+                        name: 'Admin / HR', 
+                        subj: 'Application Update', 
+                        last: '', 
+                        unread: false, 
+                        time: m.created_at, 
+                        msgs: [],
+                        companyName: '',
+                        companyLogo: '',
+                        companyId: null
+                    };
+                }
+
+                threadMap[otherId].msgs.push({ 
+                    id: m.id, 
+                    text: m.content, 
+                    time: new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), 
+                    isMe 
+                });
+                threadMap[otherId].last = m.content;
+                threadMap[otherId].time = m.created_at;
+                if (!isMe && !m.is_read) threadMap[otherId].unread = true;
+            });
+
+            const threadList = Object.values(threadMap).sort((a, b) => new Date(b.time) - new Date(a.time));
+
+            // ✅ Fetch Admin Names and Company Info from 'user_roles' table
+            const otherUserIds = threadList.map(t => t.id);
+            if (otherUserIds.length > 0) {
+                const { data: rolesData } = await supabase
+                    .from('user_roles')
+                    .select('user_id, name, company_id') 
+                    .in('user_id', otherUserIds);
+
+                console.log("Roles Data:", rolesData);
+
+                if (rolesData && rolesData.length > 0) {
+                    rolesData.forEach(role => {
+                        const thread = threadList.find(t => t.id === role.user_id);
+                        if (thread && role.name) thread.name = role.name;
+                        if (thread) thread.companyId = role.company_id;
+                    });
+
+                    // ✅ Fetch Company Details including logo from storage
+                    const companyIds = [...new Set(rolesData.map(r => r.company_id).filter(Boolean))];
+                    console.log("Company IDs to fetch:", companyIds);
+                    
+                    if (companyIds.length > 0) {
+                        const { data: companiesData } = await supabase
+                            .from('companies')
+                            .select('id, name, logo_url')
+                            .in('id', companyIds);
+
+                        console.log("Companies Data:", companiesData);
+
+                        if (companiesData) {
+                            companiesData.forEach(company => {
+                                threadList.forEach(thread => {
+                                    if (thread.companyId === company.id) {
+                                        thread.companyName = company.name;
+                                        thread.companyLogo = company.logo_url;
+                                        console.log(`Set company for thread ${thread.id}:`, company.name, company.logo_url);
+                                    }
+                                });
+                            });
+                        }
+                    }
+                } else {
+                    console.log("No roles data found or rolesData is empty");
+                }
+            }
+
+            console.log("Final Thread List:", threadList);
+            setThreads(threadList);
+            
+            // Refresh currently open chat window if data changed
+            if (selected) {
+                const updated = threadList.find(t => t.id === selected.id);
+                if (updated) setSelected(updated);
+            }
+        } catch (err) {
+            console.error("Message Fetch Error:", err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // ✅ REAL-TIME LISTENER
+    useEffect(() => {
+        let channel;
+        const init = async () => {
+            const { data: { user } } = await supabase.auth.getUser();
+            if (!user) return;
+            setUserId(user.id);
+            await fetchMsgs(user.id);
+
+            // Create a channel to listen for any new messages where THIS user is the receiver
+            channel = supabase.channel('applicant_inbox')
+                .on('postgres_changes', { 
+                    event: 'INSERT', 
+                    schema: 'public', 
+                    table: 'messages',
+                    filter: `receiver_id=eq.${user.id}` 
+                }, () => {
+                    console.log("New message received from Admin!");
+                    fetchMsgs(user.id);
+                })
+                .subscribe();
+        };
+
+        init();
+        return () => { if (channel) supabase.removeChannel(channel); };
     }, []);
 
-    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));
+    const markAsRead = async (t) => {
+        setSelected(t);
+        if (t.unread && userId) {
+            // Optimistic UI Update
+            setThreads(threads.map(x => x.id === t.id ? { ...x, unread: false } : x));
+            // Database Update
+            await supabase.from('messages')
+                .update({ is_read: true })
+                .eq('receiver_id', userId)
+                .eq('sender_id', t.id)
+                .eq('is_read', false);
+        }
+    };
+
+    const sendMsg = async () => {
+        if (!text.trim() || !selected || !userId) return;
+        const messageText = text.trim();
         setText('');
+
+        // Send to Supabase
+        const { error } = await supabase.from('messages').insert([{ 
+            sender_id: userId, 
+            receiver_id: selected.id, 
+            content: messageText, 
+            is_read: false 
+        }]);
+
+        if (error) {
+            console.error("Send Error:", error);
+        } else {
+            fetchMsgs(userId); // Refresh to show my sent message
+        }
     };
 
-    const filtered = threads.filter(t => t.name.toLowerCase().includes(search.toLowerCase()) || t.subj.toLowerCase().includes(search.toLowerCase()));
+    const filtered = threads.filter(t => t.name.toLowerCase().includes(search.toLowerCase()));
 
     return (
         <ApplicantLayout activePage="applicant-messages" onNavigate={onNavigate}>
@@ -49,7 +216,7 @@ export default function ApplicantMessages({ onNavigate }) {
             
             <div style={{ display: 'flex', height: 'calc(100vh - 140px)', gap: '1.5rem', paddingBottom: '1rem' }}>
                 
-                {/* LEFT PANE: THREAD LIST */}
+                {/* --- CONVERSATIONS LIST --- */}
                 <div style={{ ...glassStyle, width: '350px', flexShrink: 0 }}>
                     <div style={{ padding: '1.5rem' }}>
                         <h2 style={{ fontSize: '1.4rem', fontWeight: 'bold', marginBottom: '1rem' }}>Inbox</h2>
@@ -60,51 +227,105 @@ export default function ApplicantMessages({ onNavigate }) {
                     </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>
-                            );
-                        })}
+                        {loading ? (
+                            <div style={{ padding: '2rem', textAlign: 'center', color: '#64748b' }}>Loading...</div>
+                        ) : filtered.length === 0 ? (
+                            <div style={{ padding: '2rem', textAlign: 'center', color: '#64748b' }}>No messages found.</div>
+                        ) : (
+                            filtered.map(t => {
+                                const isAct = selected?.id === t.id;
+                                return (
+                                    <motion.div 
+                                        key={t.id} onClick={() => markAsRead(t)}
+                                        whileHover={{ scale: 0.98 }} 
+                                        style={{ 
+                                            padding: '1.25rem', marginBottom: '0.5rem', borderRadius: '1rem', 
+                                            cursor: 'pointer', position: 'relative',
+                                            background: isAct ? 'rgba(251, 191, 36, 0.08)' : 'transparent', 
+                                            border: isAct ? '1px solid rgba(251,191,36,0.3)' : '1px solid transparent',
+                                            display: 'flex', gap: '1rem'
+                                        }}
+                                    >
+                                        {t.unread && !isAct && <div style={{ position: 'absolute', top: '1.5rem', right: '1.25rem', width: '10px', height: '10px', backgroundColor: '#FBBF24', borderRadius: '50%' }}></div>}
+                                        
+                                        {/* Company Logo */}
+                                        {t.companyLogo ? (
+                                            <img 
+                                                src={t.companyLogo} 
+                                                alt={t.companyName} 
+                                                style={{ width: 48, height: 48, borderRadius: '0.5rem', objectFit: 'cover', flexShrink: 0, border: '1px solid rgba(255,255,255,0.2)' }}
+                                            />
+                                        ) : (
+                                            <Avatar name={t.companyName || t.name} />
+                                        )}
+                                        
+                                        {/* Message Info */}
+                                        <div style={{ flex: 1, minWidth: 0 }}>
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
+                                                <span style={{ fontWeight: 'bold', color: isAct ? '#FCD34D' : 'white', fontSize: '0.95rem' }}>{t.companyName || t.name}</span>
+                                                <span style={{ background: 'rgba(34, 197, 94, 0.2)', color: '#22c55e', padding: '0.15rem 0.5rem', borderRadius: '0.25rem', fontSize: '0.65rem', fontWeight: '600', flexShrink: 0 }}>HR</span>
+                                                <span style={{ fontSize: '0.7rem', color: t.unread ? '#FCD34D' : '#64748b', marginLeft: 'auto', flexShrink: 0 }}>{new Date(t.time).toLocaleDateString([],{month:'short', day:'numeric'})}</span>
+                                            </div>
+                                            <div style={{ fontSize: '0.8rem', color: '#e2e8f0', margin: '0.2rem 0', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.subj}</div>
+                                            <div style={{ fontSize: '0.75rem', color: '#94a3b8', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.last}</div>
+                                        </div>
+                                    </motion.div>
+                                );
+                            })
+                        )}
                     </div>
                 </div>
 
-                {/* RIGHT PANE: ACTIVE CHAT */}
+                {/* --- ACTIVE CONVERSATION --- */}
                 <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>
+                                {selected.companyLogo ? (
+                                    <img 
+                                        src={selected.companyLogo} 
+                                        alt={selected.companyName} 
+                                        style={{ width: 45, height: 45, borderRadius: '0.5rem', objectFit: 'cover', border: '2px solid rgba(255,255,255,0.2)', flexShrink: 0 }}
+                                    />
+                                ) : (
+                                    <Avatar name={selected.companyName || selected.name} />
+                                )}
+                                <div style={{ flex: 1 }}>
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                                        <h3 style={{ margin: 0, color: 'white' }}>{selected.companyName || selected.name}</h3>
+                                        <span style={{ background: 'rgba(34, 197, 94, 0.2)', color: '#22c55e', padding: '0.25rem 0.75rem', borderRadius: '0.5rem', fontSize: '0.75rem', fontWeight: '600' }}>HR</span>
+                                    </div>
+                                    <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 }}>
+                                        <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 ref={scrollRef} />
                             </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' }}>
+                                    <textarea 
+                                        value={text} 
+                                        onChange={e => setText(e.target.value)} 
+                                        onKeyDown={e => { if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); sendMsg(); }}} 
+                                        placeholder="Type your reply..." 
+                                        style={{ ...inputStyle, resize: 'none', height: '45px', fontFamily: 'inherit' }} 
+                                    />
+                                    <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', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                         <SendIcon />
                                     </button>
                                 </div>
@@ -112,7 +333,7 @@ export default function ApplicantMessages({ onNavigate }) {
                         </>
                     ) : (
                         <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-                            <PlaceholderContent title="Your Messages" message="Select a conversation to start chatting." icon={<ChatIcon />} />
+                            <PlaceholderContent title="Your Messages" message="Select an Admin to start chatting." icon={<ChatIcon />} />
                         </div>
                     )}
                 </div>

src/pages/ResetPassword.jsx

@@ -0,0 +1,51 @@
+
+import React, { useState } from "react";
+import { supabase } from "../supabaseClient";
+
+export default function ResetPassword() {
+
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleUpdate = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    const { error } = await supabase.auth.updateUser({
+      password: password
+    });
+
+    if (error) {
+      alert(error.message);
+    } else {
+      alert("Password updated successfully!");
+      window.location.href = "/";
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div style={{padding:"40px", color:"white"}}>
+
+      <h2>Reset Your Password</h2>
+
+      <form onSubmit={handleUpdate}>
+        <input
+          type="password"
+          placeholder="Enter new password"
+          value={password}
+          onChange={(e)=>setPassword(e.target.value)}
+          style={{padding:"10px", margin:"10px"}}
+        />
+
+        <button type="submit">
+          {loading ? "Updating..." : "Update Password"}
+        </button>
+
+      </form>
+
+    </div>
+  );
+}
+