function MainComponent() { const [jobsData, setJobsData] = React.useState([]); const [showPostJob, setShowPostJob] = React.useState(false); const [showSignIn, setShowSignIn] = React.useState(false); const [searchTerm, setSearchTerm] = React.useState(""); const [selectedLocation, setSelectedLocation] = React.useState(""); const [editingJob, setEditingJob] = React.useState(null); const [salaryRange, setSalaryRange] = React.useState(130000); const [showSubscribe, setShowSubscribe] = React.useState(false); const [email, setEmail] = React.useState(""); const [subscribeStatus, setSubscribeStatus] = React.useState(""); const [user, setUser] = React.useState(null); const [employerJobs, setEmployerJobs] = React.useState([]); const [formData, setFormData] = React.useState({ title: "", company: "", location: "", salary: "", type: "Full-time", description: "" }); const filteredJobs = jobsData.filter((job)=>{ const matchesSearch = job.title?.toLowerCase().includes(searchTerm.toLowerCase()) || job.company?.toLowerCase().includes(searchTerm.toLowerCase()); const matchesLocation = !selectedLocation || job.location === selectedLocation; const matchesSalary = job.salary ? parseInt(job.salary.replace(/[^0-9]/g, "")) >= salaryRange : true; return matchesSearch && matchesLocation && matchesSalary; }); const uniqueLocations = [ ...new Set(jobsData.map((job)=>job.location).filter(Boolean)) ]; const handleSubscribe = async (e)=>{ e.preventDefault(); try { await fetch("/api/db/subscribercosjobs", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `subscribers` (`email`, `created_at`) VALUES (?, NOW())", values: [ email ] }) }); setSubscribeStatus("Thanks for subscribing!"); setEmail(""); setTimeout(()=>{ setShowSubscribe(false); setSubscribeStatus(""); }, 2000); } catch (error) { setSubscribeStatus("Something went wrong. Please try again."); } }; const handlePostJob = async (e)=>{ e.preventDefault(); if (!user) { setShowSignIn(true); return; } try { const date = new Date().toISOString().split("T")[0]; if (editingJob) { await fetch("/api/db/cosjobs", { method: "POST", body: JSON.stringify({ query: "UPDATE `jobs` SET `title` = ?, `company` = ?, `location` = ?, `salary` = ?, `type` = ?, `description` = ?, `posted_date` = ? WHERE `id` = ? AND `user_id` = ?", values: [ formData.title, formData.company, formData.location, formData.salary, formData.type, formData.description, date, editingJob.id, user.id ] }) }); await fetchJobs(); await fetchEmployerJobs(); } else { const response = await fetch("/api/db/cosjobs", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `jobs` (`title`, `company`, `location`, `salary`, `type`, `description`, `user_id`, `posted_date`) VALUES (?, ?, ?, ?, ?, ?, ?, ?)", values: [ formData.title, formData.company, formData.location, formData.salary, formData.type, formData.description, user.id, date ] }) }); await fetchJobs(); await fetchEmployerJobs(); } setShowPostJob(false); setEditingJob(null); setFormData({ title: "", company: "", location: "", salary: "", type: "Full-time", description: "" }); } catch (error) { console.error("Error posting job:", error); alert("Failed to save job. Please try again."); } }; const handleDeleteJob = async (jobId)=>{ if (!user) return; if (window.confirm("Are you sure you want to delete this job posting?")) { try { await fetch("/api/db/cosjobs", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `jobs` WHERE `id` = ? AND `user_id` = ?", values: [ jobId, user.id ] }) }); fetchJobs(); } catch (error) { console.error("Error deleting job:", error); } } }; const handleEditJob = (job)=>{ if (user && user.id === job.user_id) { setEditingJob(job); setFormData({ title: job.title, company: job.company, location: job.location, salary: job.salary, type: job.type || "Full-time", description: job.description }); setShowPostJob(true); } }; const fetchJobs = async ()=>{ try { const response = await fetch("/api/db/cosjobs", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `jobs` ORDER BY `posted_date` DESC", values: [] }) }); const data = await response.json(); if (Array.isArray(data)) { setJobsData(data); } else { console.error("Unexpected data format:", data); setJobsData([]); } } catch (error) { console.error("Error fetching jobs:", error); setJobsData([]); } }; const fetchEmployerJobs = async ()=>{ if (!user) return; try { const response = await fetch("/api/db/cosjobs", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `jobs` WHERE `user_id` = ? ORDER BY `posted_date` DESC", values: [ user.id ] }) }); const data = await response.json(); if (Array.isArray(data)) { setEmployerJobs(data); } } catch (error) { console.error("Error fetching employer jobs:", error); } }; React.useEffect(()=>{ if (user) { fetchEmployerJobs(); } else { fetchJobs(); } }, [ user ]); React.useEffect(()=>{ const script = document.createElement("script"); script.src = "https://js.stripe.com/v3/buy-button.js"; script.async = true; document.body.appendChild(script); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 215, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm", __source: { fileName: "", lineNumber: 216, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text font-bold text-gray-900", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, "Chief of Staff Jobs"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, "Find your next strategic leadership role")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, !user ? /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSignIn(true), className: "border border-gray-300 px-6 py-2 rounded-lg hover:bg-gray-50 transition-colors", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, "Employer Sign In") : /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("stripe-buy-button", { "buy-button-id": "buy_btn_1QFIjbKSKZgicLf0TiR08Hs3", "publishable-key": "pk_live_51Q9SHkKSKZgicLf0vbGv1ZCYQZkoMkMqkcWhXMumVpjl8C6jFGat18e0ZmMb5c4H4cMoLtwtR5UHLgebwzN88rXA001SI4CbwB", __source: { fileName: "", lineNumber: 237, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setUser(null), className: "border border-gray-300 px-6 py-2 rounded-lg hover:bg-gray-50 transition-colors", __source: { fileName: "", lineNumber: 241, columnNumber: 19 }, __self: this }, "Sign Out")))))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", __source: { fileName: "", lineNumber: 254, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search jobs...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedLocation, onChange: (e)=>setSelectedLocation(e.target.value), className: "w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 266, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, "All Locations"), uniqueLocations.map((location)=>/*#__PURE__*/ React.createElement("option", { key: location, value: location, __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }, location)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 279, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, "Minimum Salary: $", salaryRange.toLocaleString()), /*#__PURE__*/ React.createElement("input", { type: "range", min: "100000", max: "300000", step: "10000", value: salaryRange, onChange: (e)=>setSalaryRange(parseInt(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 283, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 295, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-6", __source: { fileName: "", lineNumber: 296, columnNumber: 11 }, __self: this }, !user && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSubscribe(true), className: "bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-colors", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope mr-2", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }), "Subscribe to Job Alerts")), (user ? employerJobs : jobsData).map((job)=>/*#__PURE__*/ React.createElement("div", { key: job.id, className: "border-b border-gray-200 last:border-0 pb-6 last:pb-0", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between", __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 314, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900", __source: { fileName: "", lineNumber: 315, columnNumber: 21 }, __self: this }, job.title), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-4 text-gray-500", __source: { fileName: "", lineNumber: 318, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 319, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-building mr-2", __source: { fileName: "", lineNumber: 320, columnNumber: 25 }, __self: this }), job.company), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 323, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 324, columnNumber: 25 }, __self: this }), job.location), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 327, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dollar-sign mr-2", __source: { fileName: "", lineNumber: 328, columnNumber: 25 }, __self: this }), job.salary))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 md:mt-0 flex gap-2", __source: { fileName: "", lineNumber: 333, columnNumber: 19 }, __self: this }, user && user.id === job.user_id && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditJob(job), className: "bg-yellow-600 text-white px-4 py-2 rounded-lg hover:bg-yellow-700 transition-colors", __source: { fileName: "", lineNumber: 336, columnNumber: 25 }, __self: this }, "Edit"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteJob(job.id), className: "bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors", __source: { fileName: "", lineNumber: 342, columnNumber: 25 }, __self: this }, "Delete")), !user && /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 351, columnNumber: 23 }, __self: this }, "Apply Now"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex flex-wrap items-center gap-4 text-sm text-gray-500", __source: { fileName: "", lineNumber: 357, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 358, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-2", __source: { fileName: "", lineNumber: 359, columnNumber: 21 }, __self: this }), "Posted", " ", job.posted_date), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 362, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-briefcase mr-2", __source: { fileName: "", lineNumber: 363, columnNumber: 21 }, __self: this }), job.type)), job.description && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-gray-600", __source: { fileName: "", lineNumber: 368, columnNumber: 19 }, __self: this }, job.description)))))), showSignIn && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 377, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 378, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 379, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 380, columnNumber: 15 }, __self: this }, "Employer Account"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSignIn(false), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 381, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 385, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: async (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const email = formData.get("email"); const password = formData.get("password"); const isSignUp = formData.get("isSignUp") === "true"; try { const checkQuery = await fetch("/api/db/cosaccounts", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `employers` WHERE `email` = ?", values: [ email ] }) }); const existingUser = await checkQuery.json(); if (isSignUp && existingUser.length > 0) { alert("Email already exists. Please sign in instead."); return; } if (!isSignUp && existingUser.length === 0) { alert("Account not found. Please sign up first."); return; } if (!isSignUp && existingUser[0].password !== password) { alert("Invalid password"); return; } if (isSignUp) { const response = await fetch("/api/db/cosaccounts", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `employers` (`email`, `password`, `created_at`) VALUES (?, ?, NOW())", values: [ email, password ] }) }); const data = await response.json(); setUser({ id: data.insertId, email }); } else { setUser({ id: existingUser[0].id, email }); } setShowSignIn(false); } catch (error) { console.error("Error with authentication:", error); alert("An error occurred. Please try again."); } }, className: "space-y-4", __source: { fileName: "", lineNumber: 388, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 443, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 444, columnNumber: 17 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", required: true, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", __source: { fileName: "", lineNumber: 447, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 454, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 455, columnNumber: 17 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", required: true, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", __source: { fileName: "", lineNumber: 458, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 465, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 466, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "isSignUp", value: "false", defaultChecked: true, className: "mr-2", __source: { fileName: "", lineNumber: 467, columnNumber: 19 }, __self: this }), "Sign In"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 476, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "isSignUp", value: "true", className: "mr-2", __source: { fileName: "", lineNumber: 477, columnNumber: 19 }, __self: this }), "Sign Up")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 486, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 487, columnNumber: 17 }, __self: this }, "Submit")))))); }