import React, { useRef, useState } from 'react'; import ApplicantLayout from '../components/ApplicantLayout'; import ResumeBuilder from '../components/ResumeBuilder'; import { motion } from 'framer-motion'; import { UploadIcon, SpinnerIcon } from '../components/Icons'; export default function ApplicantATS({ onNavigate }) { const fileInputRef = useRef(null); const [resumeFile, setResumeFile] = useState(null); const [jobDescription, setJobDescription] = useState(''); const [isAnalyzing, setIsAnalyzing] = useState(false); const [analysisResult, setAnalysisResult] = useState(null); const [showBuilder, setShowBuilder] = useState(false); // ------------------------- // Handle Resume Upload // ------------------------- const handleFileChange = (e) => { const file = e.target.files[0]; if ( file && [ 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ].includes(file.type) ) { setResumeFile(file); } else { alert('Please upload a PDF or DOCX file only.'); } }; const clearFile = () => { setResumeFile(null); fileInputRef.current.value = ''; }; // ------------------------- // Simulated ATS Analysis // ------------------------- const handleAnalyze = async () => { if (!resumeFile || !jobDescription.trim()) { alert("Please upload a resume and enter a job description."); return; } setIsAnalyzing(true); setAnalysisResult(null); const formData = new FormData(); formData.append("resume", resumeFile); formData.append("job_description", jobDescription); try { const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000"; const response = await fetch(`${API_URL}/analyze-ats`, { method: "POST", body: formData, }); if (!response.ok) { const errData = await response.json().catch(() => null); throw new Error(errData?.detail || "Analysis failed. Please try again."); } const result = await response.json(); if (result.status === "success" && result.data) { setAnalysisResult(result.data); } else { throw new Error("Invalid response format."); } } catch (error) { console.error("ATS Check Error:", error); alert(`Analysis Error: ${error.message}`); } finally { setIsAnalyzing(false); } }; const isDisabled = !resumeFile || !jobDescription.trim() || isAnalyzing; if (showBuilder) { return ( setShowBuilder(false)} /> ); } return (

ATS Checker

Upload your resume and job description to check ATS compatibility

{/* Left Side - Loading Screen or Results */}
{isAnalyzing ? ( // Loading Screen

Analyzing Resume...

Please wait while we analyze your resume against the job description

) : analysisResult ? ( // Results Section

Analysis Results

{/* Score Card */}
{analysisResult.score}/100

ATS Match Score

{analysisResult.summary}

{/* Keyword Matches */}

Keyword Analysis

{analysisResult.matches.map((match, index) => (
{match.keyword} {match.found ? 'Found' : 'Missing'}
Importance: {match.importance}
))}
{/* Recommendations */}

Recommendations to Make Your Resume ATS-Friendly

{analysisResult.recommendations.map((rec, index) => (

{rec}

))}
) : ( // Empty State

Upload your resume and job description, then click "Analyze Resume" to see results here.

)}
{/* Right Side - Upload Resume (Top) and Job Description (Bottom) */}
{/* Upload Resume Section */}

Upload Resume

{/* Job Description Section */}

Job Description