import { supabase } from '../supabaseClient'; // Adjust the path if your file is in a different folder import React, { useState, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; // --- IMPORT YOUR PAGE COMPONENTS --- import JobPosting from './JobPosting'; // 👈 IMPORT THE NEW PAGE import SettingsPage from './settingsPage'; // 👈 IMPORT THE NEW PAGE // --- Icon Components --- const HomeIcon = () => ( ); const UsersIcon = () => ( ); const BriefcaseIcon = () => ( ); const MessageSquareIcon = () => ( ); const SettingsIcon = () => ( ); const LogoutIcon = () => ( ); const PlusIcon = () => ; const EditIcon = () => ; const ViewIcon = () => ; const TrashIcon = () => ; const UploadIcon = () => ; const SpinnerIcon = () => ; const CheckCircleIcon = () => ( ); const SmallCalendarIcon = () => ( ); const ChevronRightIcon = () => ( ); const BriefcasePlusIcon = () => ( ); // --- New Icons for CV Sorting Page --- const FiltersIcon = () => ( ); const ScoringIcon = () => ( ); const ClearIcon = () => ( ); const ArrowRightOnRectangleIcon = () => (); // --- Stat Card Component --- const StatCard = ({ icon, value, label, tint }) => (
{icon}

{value}

{label}

); // --- Placeholder for other pages --- const PlaceholderContent = ({ title }) => (

{title}

); // --- Job Posting Modal --- const JobPostingModal = ({ isOpen, onClose, onPostSuccess }) => { const handlePost = () => { onPostSuccess(); onClose(); }; if (!isOpen) return null; return (

Create New Job Posting

Cancel Post Job
); }; // --- Date/Time Picker Modal --- const DateTimeModal = ({ isOpen, onClose, onSchedule }) => { const [selectedDate, setSelectedDate] = useState(''); const [selectedTime, setSelectedTime] = useState(''); const handleSchedule = () => { if (selectedDate && selectedTime) { onSchedule(selectedDate, selectedTime); onClose(); } else { alert('Please select both date and time.'); } }; if (!isOpen) return null; // Dynamically generate time slots for 15-minute intervals const generateTimeSlots = () => { const slots = []; for (let i = 0; i < 24; i++) { for (let j = 0; j < 4; j++) { const hour = String(i).padStart(2, '0'); const minute = String(j * 15).padStart(2, '0'); slots.push(`${hour}:${minute}`); } } return slots; }; const timeSlots = generateTimeSlots(); return (

Schedule Interview

setSelectedDate(e.target.value)} style={{ padding: '0.75rem', borderRadius: '0.5rem', border: '1px solid rgba(239, 68, 68, 0.3)', backgroundColor: 'rgba(255,255,255,0.1)', color: 'white' }} /> setSelectedTime(e.target.value)} style={{ padding: '0.75rem', borderRadius: '0.5rem', border: '1px solid rgba(239, 68, 68, 0.3)', backgroundColor: 'rgba(255,255,255,0.1)', color: 'white' }} />
Cancel Schedule
); }; // --- Message Modal --- const MessageModal = ({ isOpen, onClose, onSend }) => { const [message, setMessage] = useState(''); const handleSend = () => { if (message.trim()) { onSend(message); onClose(); } else { alert('Message cannot be empty.'); } }; if (!isOpen) return null; return (

Compose Message

Cancel Send Message
); }; // --- Interview Management Page --- const InterviewManagementPage = () => { const [activeSubTab, setActiveSubTab] = useState('interviews'); const applicants = { interviews: [ { name: 'Varun', role: 'UI Designer', experience: '8 years', skills: ['game'], date: 'April 15th, 2025', time: '10:30 AM', status: 'Awaiting Response' }, ], accepted: [ { name: 'Jane Smith', role: 'UI Designer', experience: '3 years', skills: ['Figma', 'Sketch'], date: 'N/A', time: '', status: 'Accepted' }, ], rejected: [ { name: 'Peter Jones', role: 'Backend Developer', experience: '7 years', skills: ['Python', 'Django'], date: 'N/A', time: '', status: 'Rejected' }, ] }; const [isDateTimeModalOpen, setIsDateTimeModalOpen] = useState(false); const [isMessageModalOpen, setIsMessageModalOpen] = useState(false); const [selectedApplicant, setSelectedApplicant] = useState(null); const handleSchedule = (date, time) => { console.log(`Scheduled for ${selectedApplicant?.name} on ${date} at ${time}`); // Here you would typically update your backend/state for the scheduled interview alert(`Interview scheduled for ${selectedApplicant?.name} on ${date} at ${time}`); }; const handleSendMessage = (message) => { console.log(`Message to ${selectedApplicant?.name}: ${message}`); // Here you would typically send the message via an API alert(`Message sent to ${selectedApplicant?.name}: "${message}"`); }; const openDateTimeModal = (applicant) => { setSelectedApplicant(applicant); setIsDateTimeModalOpen(true); }; const openMessageModal = (applicant) => { setSelectedApplicant(applicant); setIsMessageModalOpen(true); }; const ApplicantCard = ({ data, tab }) => { const statusColors = { 'Accepted': '#34D399', 'Awaiting Response': '#FBBF24', 'Rejected': '#EF4444' }; return (

{data.name}

{data.status}

{data.role} • {data.experience}

{data.skills.map(skill => ({skill}))}
{data.date !== 'N/A' &&

Interview: {data.date} at {data.time}

}
{tab === 'interviews' && ( openDateTimeModal(data)} whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} style={{ backgroundColor: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)', color: 'white', padding: '0.5rem 1rem', borderRadius: '9999px', fontWeight: '500', cursor: 'pointer' }}>Reschedule )} {tab === 'accepted' && ( openDateTimeModal(data)} whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} style={{ backgroundColor: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)', color: 'white', padding: '0.5rem 1rem', borderRadius: '9999px', fontWeight: '500', cursor: 'pointer' }}>Schedule )} {(tab === 'interviews' || tab === 'accepted' || tab === 'rejected') && ( openMessageModal(data)} whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} style={{ backgroundColor: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)', color: 'white', padding: '0.5rem 1rem', borderRadius: '9999px', fontWeight: '500', cursor: 'pointer' }}>Send Message )} View CV
); }; const tabItems = [ { key: 'interviews', label: 'Interviews' }, { key: 'accepted', label: 'Accepted CVs' }, { key: 'rejected', label: 'Rejected CVs' }, ]; return (

Interview Management

{applicants[activeSubTab].map((applicant, index) => ( ))}
{isDateTimeModalOpen && ( setIsDateTimeModalOpen(false)} onSchedule={handleSchedule} /> )} {isMessageModalOpen && ( setIsMessageModalOpen(false)} onSend={handleSendMessage} /> )}
); }; // --- CV Sorting Page Component --- const CVSortingPage = () => { const [searchQuery, setSearchQuery] = useState(''); const [sortBy, setSortBy] = useState('Match Score'); const [jobPositionFilter, setJobPositionFilter] = useState('All Positions'); const [applicationStatusFilter, setApplicationStatusFilter] = useState('All Statuses'); const applicants = [ { name: 'Elena Martinez', email: 'elena.martinez@example.com', experience: 10, skills: ['Python', 'TensorFlow', 'Pandas'], jobTitle: 'N/A', status: 'Pending', score: 90, img: 'https://i.pravatar.cc/150?u=elena' }, { name: 'Sarah Johnson', email: 'sarah.johnson@example.com', experience: 8, skills: ['Figma', 'Adobe XD', 'Sketch'], jobTitle: 'Programmer', status: 'Accepted', score: 82, img: 'https://i.pravatar.cc/150?u=sarah' }, { name: 'Varun', email: 'vaaran@gmail.com', experience: 8, skills: ['game'], jobTitle: 'N/A', status: 'Accepted', score: 59, img: 'https://i.pravatar.cc/150?u=varun' }, { name: 'Rey Misterio', email: 'rey@gm.com', experience: 3, skills: ['JavaScript', 'TypeScript', 'React'], jobTitle: 'UI Designer', status: 'Accepted', score: 56, img: 'https://i.pravatar.cc/150?u=rey' }, ]; const filteredAndSortedApplicants = useMemo(() => { return applicants .filter(a => (jobPositionFilter === 'All Positions' || a.jobTitle === jobPositionFilter) && (applicationStatusFilter === 'All Statuses' || a.status === applicationStatusFilter) && ( a.name.toLowerCase().includes(searchQuery.toLowerCase()) || a.skills.some(s => s.toLowerCase().includes(searchQuery.toLowerCase())) || a.jobTitle.toLowerCase().includes(searchQuery.toLowerCase()) ) ) .sort((a, b) => { switch (sortBy) { case 'Experience': return b.experience - a.experience; case 'Name': return a.name.localeCompare(b.name); case 'Date': return 0; // Assuming date is not available yet case 'Match Score': return b.score - a.score; // Match Score default: return b.score - a.score; // Match Score } }); }, [searchQuery, sortBy, jobPositionFilter, applicationStatusFilter]); const StatusBadge = ({ status }) => { const style = { padding: '0.25rem 0.75rem', borderRadius: '9999px', fontSize: '0.75rem', fontWeight: 'bold', color: 'white', }; if (status === 'Accepted') style.backgroundColor = 'rgba(16, 185, 129, 0.2)'; else if (status === 'Rejected') style.backgroundColor = 'rgba(239, 68, 68, 0.2)'; else style.backgroundColor = 'rgba(251, 191, 36, 0.2)'; return {status}; }; return (

CV Sorting

setSearchQuery(e.target.value)} style={{ flexGrow: 1, padding: '0.75rem', borderRadius: '0.5rem', border: '1px solid rgba(239, 68, 68, 0.3)', backgroundColor: 'rgba(255,255,255,0.1)', color: 'white' }} /> Filters Scoring Clear
Sort by: {['Match Score', 'Experience', 'Name', 'Date'].map(sortKey => ( ))}
{/* Filter Applications Panel */}

Filter Applications

Filters
{/* Job Position Dropdown */}
{/* Application Status Dropdown */}
{/* Only show pending toggle */}
Only show pending

Applications

{['Applicant', 'Experience', 'Skills', 'Job Title', 'Status', 'Score', 'Actions'].map(header => ( ))} {filteredAndSortedApplicants.map((app, index) => ( ))}
{header}
{app.name}

{app.name}

{app.email}

 {app.experience} years
{app.skills.map(skill => {skill})}
{app.jobTitle} {app.score}
); }; // --- Chart Components --- const BarChart = () => { const generateRandomData = () => { const data = []; const today = new Date(); for (let i = 0; i < 30; i++) { const date = new Date(today); date.setDate(today.getDate() - (29 - i)); const month = date.toLocaleString('en-us', { month: 'short' }); const day = date.getDate(); data.push({ name: `${month} ${day < 10 ? '0' : ''}${day}`, value: Math.floor(Math.random() * 5) + 1 }); } return data; }; const data = generateRandomData(); const maxValue = Math.max(...data.map(d => d.value)); return (
{data.map(d => ( ))}
{data.map(d => {d.name})}
); }; const DoughnutChart = () => { const generateRandomExperienceData = () => { const total = 100; const val1 = Math.floor(Math.random() * (total / 2)); const val2 = Math.floor(Math.random() * (total - val1)); const val3 = total - val1 - val2; const p1 = (val1 / total) * 100; const p2 = (val2 / total) * 100; const p3 = (val3 / total) * 100; const start2 = p1; const start3 = p1 + p2; return { gradient: `conic-gradient(#EF4444 0% ${p1}%, #DC2626 ${start2}% ${start3}%, #B91C1C ${start3}% 100%)`, avgExp: (Math.random() * 10).toFixed(1) // Random average experience }; }; const { gradient, avgExp } = generateRandomExperienceData(); return (

{avgExp}

Avg. Exp

Showing experience distribution across all candidates

); }; // --- Dashboard Content Component --- const DashboardContent = ({ onNavigate, setIsModalOpen }) => { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1 } } }; const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }; return (

Hello, Roman Reigns!

onNavigate('login')} whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} style={{ backgroundColor: '#EF4444', color: 'white', display: 'flex', alignItems: 'center', padding: '0.75rem 1.5rem', borderRadius: '0.5rem', fontWeight: 'bold', cursor: 'pointer', border: 'none' }}> Logout } value={Math.floor(Math.random() * 50) + 10} label="Total applicants" tint="239, 68, 68" /> } value={Math.floor(Math.random() * 10) + 1} label="Pending review" tint="239, 68, 68" /> } value={Math.floor(Math.random() * 15) + 5} label="Accepted applications" tint="239, 68, 68" /> } value={Math.floor(Math.random() * 8) + 1} label="Rejected applications" tint="239, 68, 68" />

Application Trends

Top Performers

Config
{[...Array(5)].map((_, index) => (
performer

{['Elena Martinez', 'Sarah Johnson', 'Iffathfatimakp', 'Rayaaan', 'Varun'][index]}

{['Data Scientist', 'UX/UI Designer', 'Studing', 'Senior developer', 'UI Designer'][index]} • {Math.floor(Math.random() * 10) + 1} yrs • {Math.floor(Math.random() * 5) + 3} skills • Certified

Score: {Math.floor(Math.random() * 40) + 60} View
))}
View all candidates

Experience Distribution

Upcoming Interviews

{[...Array(3)].map((_, index) => { const names = ['Varun', 'Sarah Johnson', 'dhanoon kp']; const roles = ['UI Designer', 'Data Scientist', 'Software Engineer']; const statuses = ['Awaiting Response', 'Accepted']; const dates = ['April 15, 2025', 'April 15, 2025', 'April 21, 2025']; const times = ['10:30 AM', '1:30 PM', '1:30 PM']; const status = statuses[Math.floor(Math.random() * statuses.length)]; const statusColor = status === 'Accepted' ? '#34D399' : '#FBBF24'; const bgColor = status === 'Accepted' ? 'rgba(16, 185, 129, 0.2)' : 'rgba(251, 191, 36, 0.2)'; return (
interviewer

{names[index]}

{dates[index]} at {times[index]}

{status} View
); })}
Manage all interviews

Recent Applications

{[...Array(4)].map((_, index) => { const names = ['sameer s', 'iffahfathimakp', 'Raayaaan', 'Raayaaan']; const roles = ['ui developer', 'Studing', 'Senior developer', 'Senior developer']; const dates = ['4/11/2025', '4/10/2025', '4/3/2025', '4/3/2025']; const statuses = ['pending', 'rejected', 'pending', 'pending']; const status = statuses[index]; const statusColor = status === 'pending' ? '#FBBF24' : (status === 'rejected' ? '#EF4444' : '#34D399'); const bgColor = status === 'pending' ? 'rgba(251, 191, 36, 0.2)' : (status === 'rejected' ? 'rgba(239, 68, 68, 0.2)' : 'rgba(16, 185, 129, 0.2)'); return (
applicant

{names[index]}

{roles[index]} • {Math.floor(Math.random() * 10) + 1} years

{dates[index]}

{status}
); })}
View all applications
); }; // --- Main Admin Dashboard Component --- export default function Admindash({ onNavigate }) { const [activeTab, setActiveTab] = useState('dashboard'); const [isModalOpen, setIsModalOpen] = useState(false); const [showSuccessToast, setShowSuccessToast] = useState(false); const handlePostSuccess = () => { setShowSuccessToast(true); setTimeout(() => { setShowSuccessToast(false); }, 3000); }; const contentVariants = { hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 } }; const renderContent = () => { switch (activeTab) { case 'dashboard': return ; case 'jobs': return ; case 'messages': return ; case 'job-management': return ; case 'settings': return ; default: return null; } }; return (
{renderContent()}
{isModalOpen && setIsModalOpen(false)} onPostSuccess={handlePostSuccess} />} {showSuccessToast && ( Job Posted Successfully! )}
); }