Initial commit for hosting

backend/src/services/ats_service.py

@@ -145,6 +145,7 @@ def calculate_ats_score(resume_data: dict, job_data: dict) -> dict:
         "matches": matches,
         "summary": summary,
         "recommendations": recommendations,
+        "resume_data": resume_data, # Added to pre-fill the Resume Builder
         "debug_resume_skills": list(resume_skills), # Helpful for debugging
         "debug_job_skills": list(job_skills)
     }

src/components/ApplicantLayout.jsx

@@ -4,7 +4,7 @@ import { supabase } from '../supabaseClient';
 import {
     LogoutIcon, BriefcaseIcon, UserCircleIcon, ChatIcon,
     CalendarIcon, AtsCheckerIcon
-} from './Icons'; 
+} from './Icons';
 
 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">
@@ -19,12 +19,23 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
 
     const [notifications, setNotifications] = useState([]);
     const [showNotifications, setShowNotifications] = useState(false);
+    const [hasSeenNotifs, setHasSeenNotifs] = useState(false);
     const notifRef = useRef(null);
 
-    // ⭐ NEW: unread message badge state
     const [unreadMessages, setUnreadMessages] = useState(0);
     const [unreadMessagesList, setUnreadMessagesList] = useState([]);
 
+    // ⭐ NEW: recent jobs notifications
+    const [newJobs, setNewJobs] = useState([]);
+
+    // ⭐ NEW: toast notification state
+    const [toastNotif, setToastNotif] = useState(null);
+
+    const triggerToast = (title, message, icon) => {
+        setToastNotif({ id: Date.now(), title, message, icon });
+        setTimeout(() => setToastNotif(null), 5000); // Hide after 5 seconds
+    };
+
     useEffect(() => {
         function handleClickOutside(event) {
             if (notifRef.current && !notifRef.current.contains(event.target)) {
@@ -45,7 +56,7 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                         .select('full_name')
                         .eq('id', user.id)
                         .maybeSingle();
-                    
+
                     if (profile && profile.full_name) {
                         const firstName = profile.full_name.split(' ')[0];
                         setUserName(firstName);
@@ -89,6 +100,30 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
 
         fetchUnreadMessages();
 
+        const fetchRecentJobs = async () => {
+            const oneDayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString();
+            const { data: recentJobs } = await supabase
+                .from('jobs')
+                .select('id, title, company_id, created_at, companies ( name )')
+                .eq('status', 'Active')
+                .gte('created_at', oneDayAgo)
+                .order('created_at', { ascending: false })
+                .limit(3);
+
+            if (recentJobs) {
+                const jobNotifs = recentJobs.map(job => ({
+                    id: `job-${job.id}`,
+                    title: 'New Job Posted',
+                    text: `${job.companies?.name || 'A company'} is hiring: ${job.title}`,
+                    time: new Date(job.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+                    color: '#8b5cf6' // Purple color for jobs
+                }));
+                setNewJobs(jobNotifs);
+            }
+        };
+
+        fetchRecentJobs();
+
     }, []);
 
     // ⭐ NEW: realtime update for new messages
@@ -100,6 +135,8 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                 "postgres_changes",
                 { event: "INSERT", schema: "public", table: "messages" },
                 async (payload) => {
+                    console.log("=== MESSAGES PAYLOAD ===", payload);
+
                     // Fetch the sender's name and add to the list
                     const { data: senderProfile } = await supabase
                         .from("profiles")
@@ -116,12 +153,129 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
 
                     setUnreadMessagesList(prev => [newMsg, ...prev]);
                     setUnreadMessages(prev => prev + 1);
+
+                    // Trigger realtime toast popup
+                    triggerToast(
+                        'New Message Received',
+                        `${senderProfile?.full_name || 'Someone'} sent you a message`,
+                        '📨'
+                    );
+                }
+            )
+            .subscribe();
+
+        const jobsChannel = supabase
+            .channel("jobs-badge")
+            .on(
+                "postgres_changes",
+                { event: "INSERT", schema: "public", table: "jobs", filter: "status=eq.Active" },
+                async (payload) => {
+                    console.log("=== JOBS PAYLOAD ===", payload);
+
+                    let companyName = 'A company';
+                    if (payload.new.company_id) {
+                        const { data: comp } = await supabase
+                            .from("companies")
+                            .select("name")
+                            .eq("id", payload.new.company_id)
+                            .maybeSingle();
+                        if (comp) companyName = comp.name;
+                    }
+
+                    const newJobNotif = {
+                        id: `job-${payload.new.id}`,
+                        title: 'New Job Posted',
+                        text: `${companyName} is hiring: ${payload.new.title}`,
+                        time: new Date(payload.new.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+                        color: '#8b5cf6'
+                    };
+
+                    setNewJobs(prev => [newJobNotif, ...prev]);
+
+                    // Trigger realtime toast popup
+                    triggerToast(
+                        'New Job Posted',
+                        `${companyName} is hiring: ${payload.new.title}`,
+                        '💼'
+                    );
+                }
+            )
+            .subscribe();
+
+        const appsChannel = supabase
+            .channel("interviews-badge-applicant") // unique channel name
+            .on(
+                "postgres_changes",
+                { event: "*", schema: "public", table: "interviews" },
+                async (payload) => {
+                    console.log("=== INTERVIEWS PAYLOAD ===", payload);
+
+                    const { data: { user } } = await supabase.auth.getUser();
+                    if (!user || !payload.new) return;
+
+                    // Interviews don't have user_id on them directly. They have application_id.
+                    // We must fetch the application to verify if it belongs to this user.
+                    const { data: appData } = await supabase
+                        .from('applications')
+                        .select('user_id, job_id')
+                        .eq('id', payload.new.application_id)
+                        .maybeSingle();
+
+                    if (!appData || appData.user_id !== user.id) {
+                        return; // Not this user's interview
+                    }
+
+                    // For an insert OR an update where status is Scheduled
+                    if (payload.new.status === 'Scheduled') {
+
+                        // If it's an UPDATE, optionally ensure it actually CHANGED to Scheduled
+                        if (payload.eventType === 'UPDATE') {
+                            if (payload.old && payload.old.status === 'Scheduled') {
+                                return;
+                            }
+                        }
+
+                        console.log(">>> TRIGGERING INTERVIEW NOTIFICATION! <<<");
+
+                        const { data: job } = await supabase
+                            .from('jobs')
+                            .select('title')
+                            .eq('id', appData.job_id)
+                            .maybeSingle();
+
+                        const jobTitle = job?.title || 'a job';
+
+                        let timeLabel = '';
+                        if (payload.new.scheduled_time) {
+                            const dateObj = new Date(payload.new.scheduled_time);
+                            timeLabel = ` on ${dateObj.toLocaleDateString()} at ${dateObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+                        }
+
+                        triggerToast(
+                            'Interview Scheduled! 📅',
+                            `You have been invited to interview for ${jobTitle}${timeLabel}`,
+                            '🎉'
+                        );
+
+                        setHasSeenNotifs(false);
+
+                        const newNotif = {
+                            id: Date.now(),
+                            title: `Interview Scheduled`,
+                            text: `You have an upcoming interview for ${jobTitle}.`,
+                            time: new Date().toISOString(),
+                            color: '#3B82F6'
+                        };
+                        setNotifications(prev => [newNotif, ...prev]);
+                    }
                 }
             )
             .subscribe();
 
         return () => {
             supabase.removeChannel(channel);
+            supabase.removeChannel(jobsChannel);
+            supabase.removeChannel(appsChannel);
         };
 
     }, []);
@@ -159,6 +313,91 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
         fetchNotifications();
     }, [activePage]);
 
+    // ⭐ NEW: specific timing interview notifications
+    useEffect(() => {
+        let interviewInterval;
+
+        const checkInterviews = async () => {
+            try {
+                const { data: { user } } = await supabase.auth.getUser();
+                if (!user) return;
+
+                const { data: ints } = await supabase
+                    .from('interviews')
+                    .select('id, scheduled_time, created_at, applications!inner( jobs(title) )')
+                    .eq('applications.user_id', user.id)
+                    .eq('status', 'Scheduled');
+
+                if (ints && ints.length > 0) {
+                    const now = new Date();
+
+                    ints.forEach(intObj => {
+                        if (!intObj.scheduled_time) return;
+
+                        const interviewDate = new Date(intObj.scheduled_time);
+                        if (isNaN(interviewDate.getTime())) return;
+
+                        const diffMs = interviewDate - now;
+                        const diffHours = diffMs / (1000 * 60 * 60);
+
+                        const ONE_WEEK = 7 * 24;
+                        const TWO_DAYS = 2 * 24;
+                        const TWENTY_FOUR_HOURS = 24;
+                        const FIVE_HOURS = 5;
+
+                        const windowHours = 0.5;
+
+                        let triggered = false;
+                        let timeLabel = '';
+
+                        if (diffHours > 0) {
+                            if (Math.abs(diffHours - ONE_WEEK) <= windowHours) {
+                                triggered = true;
+                                timeLabel = 'in 1 week';
+                            } else if (Math.abs(diffHours - TWO_DAYS) <= windowHours) {
+                                triggered = true;
+                                timeLabel = 'in 2 days';
+                            } else if (Math.abs(diffHours - TWENTY_FOUR_HOURS) <= windowHours) {
+                                triggered = true;
+                                timeLabel = 'in 24 hours';
+                            } else if (Math.abs(diffHours - FIVE_HOURS) <= windowHours) {
+                                triggered = true;
+                                timeLabel = 'in 5 hours';
+                            }
+                        }
+
+                        // Just scheduled within last 30 minutes
+                        const updatedDate = new Date(intObj.created_at);
+                        const updatedDiffHours = (now - updatedDate) / (1000 * 60 * 60);
+                        if (updatedDiffHours <= windowHours) {
+                            triggered = true;
+                            timeLabel = 'recently scheduled';
+                        }
+
+                        if (triggered) {
+                            const jobTitle = intObj.applications?.jobs?.title || 'a job';
+                            triggerToast(
+                                'Interview Reminder! 📅',
+                                `You have an interview ${timeLabel} for: ${jobTitle}`,
+                                '⏰'
+                            );
+                        }
+                    });
+                }
+            } catch (error) {
+                console.error("Error checking interviews:", error);
+            }
+        };
+
+        // Check immediately on load
+        checkInterviews();
+
+        // Check every 30 minutes (30 * 60 * 1000 ms)
+        interviewInterval = setInterval(checkInterviews, 1800000);
+
+        return () => clearInterval(interviewInterval);
+    }, []);
+
     // ⭐ NEW: mark messages read when user opens messages page
     useEffect(() => {
 
@@ -180,6 +419,10 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
 
         markMessagesRead();
 
+        if (activePage === "applicant-jobs") {
+            setNewJobs([]); // Clear job notifications when jobs page is opened
+        }
+
     }, [activePage]);
 
     const handleLogout = async () => {
@@ -200,20 +443,23 @@ 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' }}>
-            
+
             <header style={{ position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem', flexShrink: 0 }}>
                 <h1 style={{ fontSize: '1.875rem', fontWeight: 'bold' }}>
                     {userName ? `Hi, ${userName} 👋` : 'Welcome 👋'}
                 </h1>
 
                 <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                    
+
                     {activePage === 'applicant-profile' && (
                         <div style={{ position: 'relative' }} ref={notifRef}>
-                            <motion.button 
+                            <motion.button
                                 whileHover={{ scale: 1.05 }}
                                 whileTap={{ scale: 0.95 }}
-                                onClick={() => setShowNotifications(!showNotifications)}
+                                onClick={() => {
+                                    setShowNotifications(!showNotifications);
+                                    if (!showNotifications) setHasSeenNotifs(true);
+                                }}
                                 style={{
                                     background: 'rgba(255,255,255,0.05)',
                                     border: '1px solid rgba(255,255,255,0.1)',
@@ -225,7 +471,7 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                                 }}
                             >
                                 <BellIcon />
-                                {(notifications.length + unreadMessages) > 0 && (
+                                {!hasSeenNotifs && (notifications.length + unreadMessages + newJobs.length) > 0 && (
                                     <span style={{
                                         position: 'absolute',
                                         top: '-5px',
@@ -242,7 +488,7 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                                         fontSize: '0.75rem',
                                         fontWeight: 'bold'
                                     }}>
-                                        {notifications.length + unreadMessages}
+                                        {notifications.length + unreadMessages + newJobs.length}
                                     </span>
                                 )}
                             </motion.button>
@@ -267,10 +513,10 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                                         }}
                                     >
                                         <div style={{ padding: '1rem', fontWeight: 'bold', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
-                                            Recent Notification ({notifications.length + unreadMessages})
+                                            Recent Notification ({notifications.length + unreadMessages + newJobs.length})
                                         </div>
                                         <div style={{ padding: '0.75rem' }}>
-                                            {notifications.length + unreadMessages === 0 ? (
+                                            {notifications.length + unreadMessages + newJobs.length === 0 ? (
                                                 <div style={{ padding: '1rem', textAlign: 'center', color: '#94a3b8', fontSize: '0.85rem' }}>
                                                     No new notifications
                                                 </div>
@@ -305,6 +551,22 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                                                             </div>
                                                         </div>
                                                     ))}
+                                                    {newJobs.map(jobNotif => (
+                                                        <div key={jobNotif.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: jobNotif.color, fontSize: '1rem' }}>💼</span>
+                                                            <div style={{ flex: 1 }}>
+                                                                <p style={{ margin: 0, fontSize: '0.85rem', color: '#e2e8f0', fontWeight: 500 }}>
+                                                                    {jobNotif.title}
+                                                                </p>
+                                                                <p style={{ margin: '0.25rem 0 0 0', fontSize: '0.75rem', color: '#cbd5e1' }}>
+                                                                    {jobNotif.text}
+                                                                </p>
+                                                                <p style={{ margin: '0.25rem 0 0 0', fontSize: '0.7rem', color: '#64748b' }}>
+                                                                    {jobNotif.time}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    ))}
                                                 </>
                                             )}
                                         </div>
@@ -314,10 +576,10 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                         </div>
                     )}
 
-                    <motion.button 
-                        onClick={handleLogout} 
-                        whileHover={{ scale: 1.03 }} 
-                        whileTap={{ scale: 0.98 }} 
+                    <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 />
@@ -331,9 +593,9 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                     {navItems.map(({ key, icon, label }) => {
                         const active = isActive(key);
                         return (
-                            <div 
-                                key={key} 
-                                onClick={() => onNavigate(key)} 
+                            <div
+                                key={key}
+                                onClick={() => onNavigate(key)}
                                 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}
@@ -357,9 +619,44 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                 </nav>
             </div>
 
-            <main style={{ position: 'relative', zIndex: 1, flex: 1, overflowY: 'auto' }}>
+            <main style={{ position: 'relative', zIndex: 1, flex: 1, overflowY: 'auto' }} className="hide-scrollbar">
                 {children}
             </main>
+
+            {/* ⭐ NEW: Realtime Toast Notification Popup */}
+            <AnimatePresence>
+                {toastNotif && (
+                    <motion.div
+                        key={toastNotif.id}
+                        initial={{ opacity: 0, y: -20, scale: 0.9 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: -20, scale: 0.9 }}
+                        style={{
+                            position: 'absolute',
+                            top: '60px', // Below the header
+                            right: '2rem', // Aligned near the bell icon
+                            backgroundColor: '#1e293b',
+                            border: '1px solid rgba(255,255,255,0.1)',
+                            borderLeft: '4px solid #FBBF24',
+                            borderRadius: '12px',
+                            padding: '1rem 1.5rem',
+                            display: 'flex',
+                            alignItems: 'flex-start',
+                            gap: '1rem',
+                            boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3)',
+                            zIndex: 9999,
+                            width: '320px',
+                            maxWidth: '90vw'
+                        }}
+                    >
+                        <span style={{ fontSize: '1.8rem' }}>{toastNotif.icon}</span>
+                        <div>
+                            <h4 style={{ margin: 0, color: 'white', fontWeight: 'bold', fontSize: '1rem' }}>{toastNotif.title}</h4>
+                            <p style={{ margin: '0.25rem 0 0 0', color: '#cbd5e1', fontSize: '0.9rem' }}>{toastNotif.message}</p>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
         </div>
     );
 }

src/components/Icons.jsx

@@ -20,6 +20,11 @@ export const ChevronRightIcon = () => (<svg style={{ width: '16px', height: '16p
 export const CheckSquareIcon = () => (<svg style={{ width: '18px', height: '18px' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>);
 export const MailIcon = () => (<svg style={{ width: '18px', height: '18px' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>);
 export const LoaderIcon = () => (<svg style={{ width: '24px', height: '24px', animation: 'spin 1s linear infinite' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>);
+
+export const ArrowLeftIcon = () => (<svg style={{ width: '16px', height: '16px' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>);
+export const PlusIcon = ({ size = 16 }) => (<svg style={{ width: `${size}px`, height: `${size}px` }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>);
+export const TrashIcon = ({ size = 16 }) => (<svg style={{ width: `${size}px`, height: `${size}px` }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>);
+export const DownloadIcon = () => (<svg style={{ width: '16px', height: '16px' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>);
 // --- Add this to src/components/Icons.js ---
 
 export const RoundCheckbox = ({ checked, onChange, style }) => (

src/components/JobCard.jsx

@@ -56,6 +56,16 @@ const JobCard = ({
     isApplying,
     matchPercentage
 }) => {
+    // Determine if the job is expired based on the deadline string
+    const isExpired = React.useMemo(() => {
+        if (!deadline || deadline === 'Open') return false;
+        const deadlineDate = new Date(deadline);
+        // Normalize today to start of day for fair comparison
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return deadlineDate < today;
+    }, [deadline]);
+
     return (
         <div
             style={{
@@ -163,7 +173,7 @@ const JobCard = ({
                 >
                     {type}
                 </span>
-                <span style={{ fontSize: '0.75rem', color: '#9ca3af', fontWeight: '500' }}>
+                <span style={{ fontSize: '0.75rem', color: isExpired ? '#EF4444' : '#9ca3af', fontWeight: '500' }}>
                     Deadline: {deadline}
                 </span>
             </div>
@@ -222,19 +232,19 @@ const JobCard = ({
                 ) : (
                     <button
                         onClick={() => onApply(id)}
-                        disabled={isApplying}
+                        disabled={isApplying || isExpired}
                         style={{
                             flex: 1,
                             padding: '0.5rem',
-                            backgroundColor: isApplying ? '#4b5563' : '#FBBF24',
+                            backgroundColor: (isApplying || isExpired) ? '#4b5563' : '#FBBF24',
                             border: 'none',
-                            color: isApplying ? '#d1d5db' : '#1a202c',
+                            color: (isApplying || isExpired) ? '#d1d5db' : '#1a202c',
                             borderRadius: '0.5rem',
                             fontWeight: 'bold',
-                            cursor: isApplying ? 'not-allowed' : 'pointer'
+                            cursor: (isApplying || isExpired) ? 'not-allowed' : 'pointer'
                         }}
                     >
-                        {isApplying ? '...' : 'Apply'}
+                        {isApplying ? '...' : (isExpired ? 'Expired' : 'Apply')}
                     </button>
                 )}
             </div>

src/components/JobDetail.jsx

@@ -10,6 +10,15 @@ const CloseIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="24" heig
 const CheckIcon = () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>);
 
 const JobDetail = ({ job, onClose, onApply, isApplied, isApplying }) => {
+    // Determine if the job is expired based on the deadline string
+    const isExpired = React.useMemo(() => {
+        if (!job || !job.deadline || job.deadline === 'Open') return false;
+        const deadlineDate = new Date(job.deadline);
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return deadlineDate < today;
+    }, [job]);
+
     // Portal renders this outside the main app flow
     return ReactDOM.createPortal(
         <AnimatePresence>
@@ -74,7 +83,7 @@ const JobDetail = ({ job, onClose, onApply, isApplied, isApplying }) => {
                             )}
 
                             <div style={{ fontSize: '0.9rem', color: '#6b7280', marginTop: '1rem', borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '1rem' }}>
-                                Posted: {job.postedAt} • Deadline: <span style={{ color: '#ef4444' }}>{job.deadline}</span>
+                                Posted: {job.postedAt} • Deadline: <span style={{ color: isExpired ? '#ef4444' : '#d1d5db' }}>{job.deadline}</span>
                             </div>
                         </div>
 
@@ -90,15 +99,15 @@ const JobDetail = ({ job, onClose, onApply, isApplied, isApplying }) => {
                             ) : (
                                 <button 
                                     onClick={() => onApply && onApply(job.id)}
-                                    disabled={isApplying}
+                                    disabled={isApplying || isExpired}
                                     style={{ 
                                         padding: '0.75rem 2rem', 
-                                        backgroundColor: isApplying ? '#4b5563' : '#FBBF24', 
-                                        color: isApplying ? '#d1d5db' : '#1a202c', 
-                                        border: 'none', borderRadius: '0.5rem', fontWeight: 'bold', cursor: isApplying ? 'not-allowed' : 'pointer' 
+                                        backgroundColor: (isApplying || isExpired) ? '#4b5563' : '#FBBF24', 
+                                        color: (isApplying || isExpired) ? '#d1d5db' : '#1a202c', 
+                                        border: 'none', borderRadius: '0.5rem', fontWeight: 'bold', cursor: (isApplying || isExpired) ? 'not-allowed' : 'pointer' 
                                     }}
                                 >
-                                    {isApplying ? 'Applying...' : 'Apply Now'}
+                                    {isApplying ? 'Applying...' : (isExpired ? 'Expired' : 'Apply Now')}
                                 </button>
                             )}
                         </div>

src/components/ResumeBuilder.jsx

@@ -0,0 +1,437 @@
+import React, { useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { DownloadIcon, ArrowLeftIcon, PlusIcon, TrashIcon } from './Icons';
+
+export default function ResumeBuilder({ analysisResult, onBack }) {
+    const printRef = useRef(null);
+    const missingKeywords = analysisResult?.matches?.filter(m => !m.found) || [];
+
+    const resumeData = analysisResult?.resume_data || {};
+
+    // Form State - Auto-fill from resume_data if available
+    const [personalInfo, setPersonalInfo] = useState({
+        fullName: resumeData.name || '',
+        email: resumeData.email || '',
+        phone: resumeData.phone || '',
+        location: resumeData.location || '',
+        linkedin: resumeData.linkedin || '',
+        portfolio: resumeData.portfolio || ''
+    });
+
+    const [summary, setSummary] = useState(resumeData.summary || '');
+
+    const [experience, setExperience] = useState(
+        resumeData.work_experience?.length > 0
+            ? resumeData.work_experience.map((exp, idx) => ({
+                id: Date.now() + idx,
+                company: exp.company || '',
+                role: exp.role || '',
+                startDate: exp.start_date || '',
+                endDate: exp.end_date || '',
+                description: Array.isArray(exp.responsibilities) ? exp.responsibilities.map(r => `• ${r}`).join('\n') : (exp.responsibilities || '')
+            }))
+            : [{ id: 1, company: '', role: '', startDate: '', endDate: '', description: '' }]
+    );
+
+    const [education, setEducation] = useState(
+        resumeData.education?.length > 0
+            ? resumeData.education.map((edu, idx) => ({
+                id: Date.now() + idx,
+                institution: edu.institution || '',
+                degree: edu.degree || '',
+                startDate: edu.start_date || '',
+                endDate: edu.end_date || ''
+            }))
+            : [{ id: 1, institution: '', degree: '', startDate: '', endDate: '' }]
+    );
+
+    const initialSkills = [];
+    if (resumeData.technical_skills) initialSkills.push(...resumeData.technical_skills);
+    if (resumeData.skills) initialSkills.push(...resumeData.skills);
+
+    const [skills, setSkills] = useState(initialSkills.join(', '));
+
+    // Drag and Drop Handlers
+    const handleDragStart = (e, keyword) => {
+        e.dataTransfer.setData("text/plain", keyword);
+    };
+
+    const handleDrop = (e, setter, currentValue) => {
+        e.preventDefault();
+        const draggedText = e.dataTransfer.getData("text/plain");
+        if (draggedText) {
+            // Append the dropped text
+            // Determine if we need a comma or space based on context (hacky but functional for this scope)
+            const separator = currentValue ? (setter === setSkills ? ', ' : ' ') : '';
+            setter(`${currentValue}${separator}${draggedText}`);
+        }
+    };
+
+    const handleExperienceDrop = (e, id, currentValue) => {
+        e.preventDefault();
+        const draggedText = e.dataTransfer.getData("text/plain");
+        if (draggedText) {
+            const separator = currentValue ? ' ' : '';
+            updateExperience(id, 'description', `${currentValue}${separator}${draggedText}`);
+        }
+    };
+
+    const handleDragOver = (e) => {
+        e.preventDefault(); // Necessary to allow dropping
+    };
+
+    // Handlers
+    const handlePersonalInfoChange = (e) => {
+        const { name, value } = e.target;
+        setPersonalInfo(prev => ({ ...prev, [name]: value }));
+    };
+
+    const addExperience = () => {
+        setExperience(prev => [...prev, { id: Date.now(), company: '', role: '', startDate: '', endDate: '', description: '' }]);
+    };
+
+    const updateExperience = (id, field, value) => {
+        setExperience(prev => prev.map(exp => exp.id === id ? { ...exp, [field]: value } : exp));
+    };
+
+    const removeExperience = (id) => {
+        setExperience(prev => prev.filter(exp => exp.id !== id));
+    };
+
+    const addEducation = () => {
+        setEducation(prev => [...prev, { id: Date.now(), institution: '', degree: '', startDate: '', endDate: '' }]);
+    };
+
+    const updateEducation = (id, field, value) => {
+        setEducation(prev => prev.map(edu => edu.id === id ? { ...edu, [field]: value } : edu));
+    };
+
+    const removeEducation = (id) => {
+        setEducation(prev => prev.filter(edu => edu.id !== id));
+    };
+
+    const handlePrint = () => {
+        window.print();
+    };
+
+    const inputStyle = {
+        width: '100%',
+        padding: '0.75rem',
+        borderRadius: '0.5rem',
+        border: '1px solid rgba(236, 183, 26, 0.46)',
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        color: 'white',
+        marginBottom: '1rem',
+        fontFamily: 'inherit',
+    };
+
+    const labelStyle = {
+        display: 'block',
+        marginBottom: '0.5rem',
+        color: '#d1d5db',
+        fontSize: '0.875rem'
+    };
+
+    const sectionHeaderStyle = {
+        fontSize: '1.25rem',
+        fontWeight: 'bold',
+        color: '#FBBF24',
+        marginBottom: '1rem',
+        borderBottom: '1px solid rgba(236, 183, 26, 0.3)',
+        paddingBottom: '0.5rem'
+    };
+
+    return (
+        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(300px, 1fr) 1.5fr', gap: '2rem', height: 'calc(100vh - 150px)' }}>
+
+            {/* Left Panel: Form & Gaps */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', overflowY: 'auto', paddingRight: '1rem' }} className="no-print hide-scrollbar">
+
+                {/* Header Actions */}
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <button
+                        onClick={onBack}
+                        style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'none', border: 'none', color: '#d1d5db', cursor: 'pointer', padding: '0.5rem 0' }}
+                    >
+                        <ArrowLeftIcon /> Back to Analysis
+                    </button>
+                    <button
+                        onClick={handlePrint}
+                        style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', backgroundColor: '#FBBF24', color: 'black', border: 'none', padding: '0.5rem 1rem', borderRadius: '0.5rem', fontWeight: 'bold', cursor: 'pointer' }}
+                    >
+                        <DownloadIcon /> Export PDF
+                    </button>
+                </div>
+
+                {/* Fix Your Gaps Panel */}
+                {missingKeywords.length > 0 && (
+                    <div style={{
+                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                        border: '1px solid rgba(239, 68, 68, 0.3)',
+                        borderRadius: '1rem',
+                        padding: '1.5rem',
+                        position: 'sticky',
+                        top: 0,
+                        zIndex: 10,
+                        backdropFilter: 'blur(8px)', // Optional: makes it look better when scrolling over text
+                        boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.5)'
+                    }}>
+                        <h3 style={{ fontSize: '1.125rem', fontWeight: 'bold', color: '#EF4444', marginBottom: '1rem' }}>Fix Your ATS Gaps</h3>
+                        <p style={{ color: '#d1d5db', fontSize: '0.875rem', marginBottom: '1rem' }}>Drag and drop these keywords into your text fields below.</p>
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                            {missingKeywords.map((match, idx) => (
+                                <span
+                                    key={idx}
+                                    draggable
+                                    onDragStart={(e) => handleDragStart(e, match.keyword)}
+                                    style={{
+                                        backgroundColor: 'rgba(239, 68, 68, 0.2)',
+                                        color: '#FCA5A5',
+                                        padding: '0.25rem 0.5rem',
+                                        borderRadius: '0.25rem',
+                                        fontSize: '0.75rem',
+                                        border: '1px solid rgba(239, 68, 68, 0.4)',
+                                        cursor: 'grab'
+                                    }}
+                                >
+                                    {match.keyword}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {/* Builder Form */}
+                <div style={{ backgroundColor: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '1rem', padding: '1.5rem' }}>
+
+                    {/* Personal Info */}
+                    <div style={{ marginBottom: '2rem' }}>
+                        <h3 style={sectionHeaderStyle}>Personal Information</h3>
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                            <div><label style={labelStyle}>Full Name</label><input style={inputStyle} name="fullName" value={personalInfo.fullName} onChange={handlePersonalInfoChange} placeholder="John Doe" /></div>
+                            <div><label style={labelStyle}>Email</label><input style={inputStyle} name="email" value={personalInfo.email} onChange={handlePersonalInfoChange} placeholder="john@example.com" /></div>
+                            <div><label style={labelStyle}>Phone</label><input style={inputStyle} name="phone" value={personalInfo.phone} onChange={handlePersonalInfoChange} placeholder="(555) 123-4567" /></div>
+                            <div><label style={labelStyle}>Location</label><input style={inputStyle} name="location" value={personalInfo.location} onChange={handlePersonalInfoChange} placeholder="City, State" /></div>
+                            <div><label style={labelStyle}>LinkedIn (Optional)</label><input style={inputStyle} name="linkedin" value={personalInfo.linkedin} onChange={handlePersonalInfoChange} placeholder="linkedin.com/in/johndoe" /></div>
+                            <div><label style={labelStyle}>Portfolio (Optional)</label><input style={inputStyle} name="portfolio" value={personalInfo.portfolio} onChange={handlePersonalInfoChange} placeholder="johndoe.com" /></div>
+                        </div>
+                    </div>
+
+                    {/* Summary */}
+                    <div style={{ marginBottom: '2rem' }}>
+                        <h3 style={sectionHeaderStyle}>Professional Summary</h3>
+                        <textarea
+                            style={{ ...inputStyle, minHeight: '100px', resize: 'vertical' }}
+                            value={summary}
+                            onChange={e => setSummary(e.target.value)}
+                            onDrop={(e) => handleDrop(e, setSummary, summary)}
+                            onDragOver={handleDragOver}
+                            placeholder="Brief overview of your professional background and goals..."
+                        />
+                    </div>
+
+                    {/* Experience */}
+                    <div style={{ marginBottom: '2rem' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                            <h3 style={{ ...sectionHeaderStyle, borderBottom: 'none', marginBottom: 0 }}>Experience</h3>
+                            <button onClick={addExperience} style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', background: 'none', border: '1px solid #FBBF24', color: '#FBBF24', padding: '0.25rem 0.5rem', borderRadius: '0.25rem', cursor: 'pointer', fontSize: '0.75rem' }}>
+                                <PlusIcon size={14} /> Add Role
+                            </button>
+                        </div>
+                        {experience.map((exp, index) => (
+                            <div key={exp.id} style={{ backgroundColor: 'rgba(0,0,0,0.2)', padding: '1rem', borderRadius: '0.5rem', marginBottom: '1rem', position: 'relative' }}>
+                                {index > 0 && (
+                                    <button onClick={() => removeExperience(exp.id)} style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'none', border: 'none', color: '#EF4444', cursor: 'pointer' }} title="Remove Role">
+                                        <TrashIcon size={16} />
+                                    </button>
+                                )}
+                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                                    <div><label style={labelStyle}>Company</label><input style={inputStyle} value={exp.company} onChange={e => updateExperience(exp.id, 'company', e.target.value)} placeholder="Acme Corp" /></div>
+                                    <div><label style={labelStyle}>Job Title</label><input style={inputStyle} value={exp.role} onChange={e => updateExperience(exp.id, 'role', e.target.value)} placeholder="Software Engineer" /></div>
+                                    <div><label style={labelStyle}>Start Date</label><input style={inputStyle} value={exp.startDate} onChange={e => updateExperience(exp.id, 'startDate', e.target.value)} placeholder="MMM YYYY" /></div>
+                                    <div><label style={labelStyle}>End Date</label><input style={inputStyle} value={exp.endDate} onChange={e => updateExperience(exp.id, 'endDate', e.target.value)} placeholder="MMM YYYY or Present" /></div>
+                                </div>
+                                <label style={labelStyle}>Description (Bullet points recommended)</label>
+                                <textarea
+                                    style={{ ...inputStyle, minHeight: '80px', resize: 'vertical', marginBottom: 0 }}
+                                    value={exp.description}
+                                    onChange={e => updateExperience(exp.id, 'description', e.target.value)}
+                                    onDrop={(e) => handleExperienceDrop(e, exp.id, exp.description)}
+                                    onDragOver={handleDragOver}
+                                    placeholder="• Achieved X by doing Y..."
+                                />
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Education */}
+                    <div style={{ marginBottom: '2rem' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                            <h3 style={{ ...sectionHeaderStyle, borderBottom: 'none', marginBottom: 0 }}>Education</h3>
+                            <button onClick={addEducation} style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', background: 'none', border: '1px solid #FBBF24', color: '#FBBF24', padding: '0.25rem 0.5rem', borderRadius: '0.25rem', cursor: 'pointer', fontSize: '0.75rem' }}>
+                                <PlusIcon size={14} /> Add Degree
+                            </button>
+                        </div>
+                        {education.map((edu, index) => (
+                            <div key={edu.id} style={{ backgroundColor: 'rgba(0,0,0,0.2)', padding: '1rem', borderRadius: '0.5rem', marginBottom: '1rem', position: 'relative' }}>
+                                {index > 0 && (
+                                    <button onClick={() => removeEducation(edu.id)} style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'none', border: 'none', color: '#EF4444', cursor: 'pointer' }} title="Remove Degree">
+                                        <TrashIcon size={16} />
+                                    </button>
+                                )}
+                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                                    <div><label style={labelStyle}>Institution</label><input style={{ ...inputStyle, marginBottom: 0 }} value={edu.institution} onChange={e => updateEducation(edu.id, 'institution', e.target.value)} placeholder="University of State" /></div>
+                                    <div><label style={labelStyle}>Degree / Major</label><input style={{ ...inputStyle, marginBottom: 0 }} value={edu.degree} onChange={e => updateEducation(edu.id, 'degree', e.target.value)} placeholder="B.S. Computer Science" /></div>
+                                    <div><label style={labelStyle}>Start Date</label><input style={{ ...inputStyle, marginBottom: 0 }} value={edu.startDate} onChange={e => updateEducation(edu.id, 'startDate', e.target.value)} placeholder="YYYY" /></div>
+                                    <div><label style={labelStyle}>End Date</label><input style={{ ...inputStyle, marginBottom: 0 }} value={edu.endDate} onChange={e => updateEducation(edu.id, 'endDate', e.target.value)} placeholder="YYYY" /></div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Skills */}
+                    <div>
+                        <h3 style={sectionHeaderStyle}>Skills</h3>
+                        <label style={labelStyle}>Comma separated list of skills</label>
+                        <textarea
+                            style={{ ...inputStyle, minHeight: '80px', resize: 'vertical' }}
+                            value={skills}
+                            onChange={e => setSkills(e.target.value)}
+                            onDrop={(e) => handleDrop(e, setSkills, skills)}
+                            onDragOver={handleDragOver}
+                            placeholder="React, Python, SQL, Project Management..."
+                        />
+                    </div>
+
+                </div>
+            </div>
+
+            {/* Right Panel: Live Preview (Printable Area) */}
+            <div
+                style={{
+                    backgroundColor: '#52525B', // Darker backdrop for contrast
+                    padding: '2rem',
+                    overflowY: 'auto',
+                    borderRadius: '1rem',
+                    display: 'flex',
+                    justifyContent: 'center'
+                }}
+                className="print-container no-print hide-scrollbar" // Wrapper won't print, only content below
+            >
+                {/* Actual Paper Element */}
+                <div
+                    ref={printRef}
+                    className="resume-print-area"
+                    style={{
+                        backgroundColor: 'white',
+                        color: '#333333',
+                        width: '100%',
+                        maxWidth: '800px',
+                        minHeight: '1056px', // ~8.5x11 aspect ratio
+                        padding: '40px 50px',
+                        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5)',
+                        fontFamily: "'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+                        lineHeight: '1.5',
+                        boxSizing: 'border-box'
+                    }}
+                >
+                    {/* Header */}
+                    <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+                        <h1 style={{ fontSize: '36px', fontWeight: '800', margin: '0 0 5px 0', color: '#1e3a8a', letterSpacing: '-0.5px' }}>
+                            {personalInfo.fullName || 'Your Name'}
+                        </h1>
+                        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '10px', fontSize: '14px', color: '#555555' }}>
+                            {personalInfo.location && <span>{personalInfo.location}</span>}
+                            {personalInfo.location && (personalInfo.phone || personalInfo.email) && <span style={{ color: '#ccc' }}>•</span>}
+                            {personalInfo.phone && <span>{personalInfo.phone}</span>}
+                            {personalInfo.phone && personalInfo.email && <span style={{ color: '#ccc' }}>•</span>}
+                            {personalInfo.email && <span style={{ color: '#1e3a8a' }}>{personalInfo.email}</span>}
+                            {personalInfo.linkedin && <><span style={{ color: '#ccc' }}>•</span><span style={{ color: '#1e3a8a' }}>{personalInfo.linkedin}</span></>}
+                            {personalInfo.portfolio && <><span style={{ color: '#ccc' }}>•</span><span style={{ color: '#1e3a8a' }}>{personalInfo.portfolio}</span></>}
+                        </div>
+                    </div>
+
+                    {/* Summary Preview */}
+                    {summary && (
+                        <div style={{ marginBottom: '20px' }}>
+                            <p style={{ fontSize: '15px', color: '#444444', margin: 0, textAlign: 'justify' }}>
+                                {summary}
+                            </p>
+                        </div>
+                    )}
+
+                    {/* Skills Preview */}
+                    {skills && (
+                        <div style={{ marginBottom: '20px' }}>
+                            <h2 style={{ fontSize: '16px', fontWeight: '700', color: '#1e3a8a', textTransform: 'uppercase', borderBottom: '2px solid #1e3a8a', paddingBottom: '4px', marginBottom: '12px', letterSpacing: '0.5px' }}>
+                                Technical Skills
+                            </h2>
+                            <p style={{ fontSize: '15px', color: '#333333', margin: 0, lineHeight: '1.6' }}>
+                                {skills}
+                            </p>
+                        </div>
+                    )}
+
+                    {/* Experience Preview */}
+                    {experience.some(exp => exp.company || exp.role) && (
+                        <div style={{ marginBottom: '20px' }}>
+                            <h2 style={{ fontSize: '16px', fontWeight: '700', color: '#1e3a8a', textTransform: 'uppercase', borderBottom: '2px solid #1e3a8a', paddingBottom: '4px', marginBottom: '12px', letterSpacing: '0.5px' }}>
+                                Professional Experience
+                            </h2>
+                            {experience.map(exp => (
+                                (exp.company || exp.role) ? (
+                                    <div key={exp.id} style={{ marginBottom: '16px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '2px' }}>
+                                            <div style={{ fontWeight: '700', fontSize: '16px', color: '#222222' }}>{exp.role || 'Role'}</div>
+                                            <div style={{ fontSize: '14px', color: '#666666', fontStyle: 'italic', whiteSpace: 'nowrap' }}>
+                                                {exp.startDate} {exp.startDate && exp.endDate && '–'} {exp.endDate}
+                                            </div>
+                                        </div>
+                                        <div style={{ fontSize: '15px', color: '#1e3a8a', fontWeight: '600', marginBottom: '8px' }}>{exp.company}</div>
+                                        {exp.description && (
+                                            <div style={{ fontSize: '14px', color: '#444444' }}>
+                                                {exp.description.split('\n').map((line, i) => (
+                                                    <div style={{ display: 'flex', marginBottom: '4px' }} key={i}>
+                                                        {line.trim().startsWith('•') || line.trim().startsWith('-') ? (
+                                                            <span style={{ marginRight: '8px', color: '#1e3a8a' }}>•</span>
+                                                        ) : line.trim() ? (
+                                                            <span style={{ marginRight: '8px', color: '#1e3a8a' }}>•</span>
+                                                        ) : null}
+                                                        <span style={{ flex: 1 }}>{line.replace(/^[•-]\s*/, '')}</span>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </div>
+                                ) : null
+                            ))}
+                        </div>
+                    )}
+
+                    {/* Education Preview */}
+                    {education.some(edu => edu.institution || edu.degree) && (
+                        <div style={{ marginBottom: '20px' }}>
+                            <h2 style={{ fontSize: '16px', fontWeight: '700', color: '#1e3a8a', textTransform: 'uppercase', borderBottom: '2px solid #1e3a8a', paddingBottom: '4px', marginBottom: '12px', letterSpacing: '0.5px' }}>
+                                Education
+                            </h2>
+                            {education.map(edu => (
+                                (edu.institution || edu.degree) ? (
+                                    <div key={edu.id} style={{ marginBottom: '12px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '2px' }}>
+                                            <div style={{ fontWeight: '700', fontSize: '15px', color: '#222222' }}>{edu.institution || 'Institution'}</div>
+                                            <div style={{ fontSize: '14px', color: '#666666', fontStyle: 'italic', whiteSpace: 'nowrap' }}>
+                                                {edu.startDate} {edu.startDate && edu.endDate && '–'} {edu.endDate}
+                                            </div>
+                                        </div>
+                                        <div style={{ fontSize: '15px', color: '#444444' }}>{edu.degree}</div>
+                                    </div>
+                                ) : null
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+        </div>
+    );
+}

src/index.css

@@ -25,4 +25,54 @@ body {
 .dark-select option {
   background-color: #111827;
   color: rgb(4, 42, 31);
+}
+
+/* ===============================
+   Scrollbar Utilities
+   =============================== */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+/* ===============================
+   Print Styles for Resume Builder
+   =============================== */
+@media print {
+  body * {
+    visibility: hidden;
+  }
+  
+  .print-container, .print-container * {
+    visibility: visible;
+  }
+  
+  .print-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+    background: white !important;
+  }
+
+  .no-print {
+    display: none !important;
+  }
+  
+  .resume-print-area {
+    width: 100% !important;
+    max-width: none !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+  }
+  
+  @page {
+    margin: 1cm;
+  }
 }

src/pages/ApplicantATS.jsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react';
 import ApplicantLayout from '../components/ApplicantLayout';
+import ResumeBuilder from '../components/ResumeBuilder';
 import { motion } from 'framer-motion';
 import {
     UploadIcon,
@@ -13,6 +14,7 @@ export default function ApplicantATS({ onNavigate }) {
     const [jobDescription, setJobDescription] = useState('');
     const [isAnalyzing, setIsAnalyzing] = useState(false);
     const [analysisResult, setAnalysisResult] = useState(null);
+    const [showBuilder, setShowBuilder] = useState(false);
 
     // -------------------------
     // Handle Resume Upload
@@ -82,6 +84,14 @@ export default function ApplicantATS({ onNavigate }) {
 
     const isDisabled = !resumeFile || !jobDescription.trim() || isAnalyzing;
 
+    if (showBuilder) {
+        return (
+            <ApplicantLayout activePage="applicant-ats" onNavigate={onNavigate}>
+                <ResumeBuilder analysisResult={analysisResult} onBack={() => setShowBuilder(false)} />
+            </ApplicantLayout>
+        );
+    }
+
     return (
         <ApplicantLayout activePage="applicant-ats" onNavigate={onNavigate}>
             <div>
@@ -142,7 +152,24 @@ export default function ApplicantATS({ onNavigate }) {
                                         {analysisResult.score}/100
                                     </div>
                                     <p style={{ fontSize: '1.25rem', color: '#d1d5db' }}>ATS Match Score</p>
-                                    <p style={{ color: '#d1d5db', marginTop: '0.5rem' }}>{analysisResult.summary}</p>
+                                    <p style={{ color: '#d1d5db', marginTop: '0.5rem', marginBottom: '1.5rem' }}>{analysisResult.summary}</p>
+                                    
+                                    <button 
+                                        onClick={() => setShowBuilder(true)}
+                                        style={{
+                                            backgroundColor: '#FBBF24',
+                                            color: '#111827',
+                                            padding: '0.75rem 1.5rem',
+                                            borderRadius: '0.5rem',
+                                            fontWeight: 'bold',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            fontSize: '1rem',
+                                            boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
+                                        }}
+                                    >
+                                        Create Optimized Resume
+                                    </button>
                                 </div>
 
                                 {/* Keyword Matches */}
@@ -257,6 +284,7 @@ export default function ApplicantATS({ onNavigate }) {
                                     resize: 'vertical',
                                     fontFamily: 'inherit',
                                 }}
+                                className="hide-scrollbar"
                             />
                         </div>
 

src/pages/ApplicantJobPage.jsx

@@ -157,12 +157,12 @@ 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, showAllJobs]);
 
@@ -203,18 +203,18 @@ export default function ApplicantJobPage({ onNavigate }) {
                     ) : (
                         <>
                             <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', 
+                                    <button
+                                        onClick={() => setShowAllJobs(true)}
+                                        style={{
+                                            padding: '0.75rem 2rem',
+                                            backgroundColor: '#FBBF24',
+                                            color: '#1a202c',
+                                            border: 'none',
+                                            borderRadius: '0.5rem',
                                             cursor: 'pointer',
                                             fontWeight: 'bold',
                                             fontSize: '1rem',