function MainComponent() { const [listings, setListings] = useState([]); const [showForm, setShowForm] = useState(false); const [selectedListing, setSelectedListing] = useState(null); const [showPopup, setShowPopup] = useState(false); const [utmParams, setUtmParams] = useState({ source: "", medium: "", campaign: "" }); const [formData, setFormData] = useState({ companyName: "", paymentRate: "", companyLink: "", email: "", logo: null }); const [error, setError] = useState(""); const [uploading, setUploading] = useState(false); const [upload] = useUpload(); const [showToast, setShowToast] = useState(false); useEffect(()=>{ fetchListings(); autoFillEmail(); }, []); const fetchListings = async ()=>{ try { const response = await fetch("/api/db/business", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM job_listings ORDER BY created_at DESC" }) }); const data = await response.json(); setListings(data); } catch (error) { setError("Failed to fetch listings"); } }; const autoFillEmail = async ()=>{ try { const response = await fetch("/api/db/business", { method: "POST", body: JSON.stringify({ query: "SELECT email FROM brands LIMIT 1" }) }); const data = await response.json(); if (data.length > 0) { setFormData((prev)=>({ ...prev, email: data[0].email })); } } catch (error) { console.error("Failed to auto-fill email"); } }; const handleSubmit = async (e)=>{ e.preventDefault(); setUploading(true); try { let logoUrl = ""; if (formData.logo) { const { url, error } = await upload({ file: formData.logo }); if (error) throw new Error("Logo upload failed"); logoUrl = url; } await fetch("/api/db/business", { method: "POST", body: JSON.stringify({ query: `INSERT INTO job_listings (company_name, payment_rate, company_link, email, logo_url) VALUES (?, ?, ?, ?, ?)`, values: [ formData.companyName, formData.paymentRate, formData.companyLink, formData.email, logoUrl ] }) }); fetchListings(); setShowForm(false); setFormData({ companyName: "", paymentRate: "", companyLink: "", email: formData.email, logo: null }); } catch (error) { setError("Failed to create listing"); } setUploading(false); }; const generateUTMLink = ()=>{ if (!selectedListing) return ""; const baseUrl = selectedListing.company_link; const params = new URLSearchParams({ utm_source: utmParams.source, utm_medium: utmParams.medium, utm_campaign: utmParams.campaign }); return `${baseUrl}${baseUrl.includes("?") ? "&" : "?"}${params.toString()}`; }; const saveUTMLink = async ()=>{ try { const generatedLink = generateUTMLink(); await fetch("/api/db/utm-parameters-link", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `utm_links` (url, source, medium, campaign, listing_id) VALUES (?, ?, ?, ?, ?)", values: [ generatedLink, utmParams.source, utmParams.medium, utmParams.campaign, selectedListing.id ] }) }); setShowToast(true); setTimeout(()=>setShowToast(false), 3000); } catch (error) { setError("Failed to save UTM link"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white px-4 py-8", __source: { fileName: "", lineNumber: 133, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, "Job Listings"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowForm(!showForm), className: "bg-[#00ff00] px-6 py-2 rounded-lg font-bold hover:opacity-90", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, showForm ? "Cancel" : "Create Listing")), showForm && /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-6 rounded-xl shadow-lg mb-8", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Company Name", value: formData.companyName, onChange: (e)=>setFormData({ ...formData, companyName: e.target.value }), className: "px-4 py-2 rounded-lg border focus:outline-none focus:border-[#00ff00]", required: true, __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Payment Rate", value: formData.paymentRate, onChange: (e)=>setFormData({ ...formData, paymentRate: e.target.value }), className: "px-4 py-2 rounded-lg border focus:outline-none focus:border-[#00ff00]", required: true, __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "url", placeholder: "Company Link", value: formData.companyLink, onChange: (e)=>setFormData({ ...formData, companyLink: e.target.value }), className: "px-4 py-2 rounded-lg border focus:outline-none focus:border-[#00ff00]", required: true, __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", placeholder: "Email", value: formData.email, onChange: (e)=>setFormData({ ...formData, email: e.target.value }), className: "px-4 py-2 rounded-lg border focus:outline-none focus:border-[#00ff00]", required: true, __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>setFormData({ ...formData, logo: e.target.files[0] }), className: "px-4 py-2 rounded-lg border focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: uploading, className: "bg-[#00ff00] px-6 py-2 rounded-lg font-bold hover:opacity-90 disabled:opacity-50", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, uploading ? "Creating..." : "Create Listing"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 210, columnNumber: 9 }, __self: this }, listings.map((listing)=>/*#__PURE__*/ React.createElement("div", { key: listing.id, onClick: ()=>{ setSelectedListing(listing); setShowPopup(true); }, className: "bg-white p-6 rounded-xl shadow-lg cursor-pointer hover:shadow-xl transition-shadow", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, listing.logo_url && /*#__PURE__*/ React.createElement("img", { src: listing.logo_url, alt: `${listing.company_name} logo`, className: "w-16 h-16 object-contain mb-4", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, listing.company_name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, listing.payment_rate), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, "Posted by: ", listing.email)))), showPopup && selectedListing && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, selectedListing.company_name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowPopup(false); setSelectedListing(null); }, className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 255, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 256, columnNumber: 19 }, __self: this }, "UTM Link Generator"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Source", value: utmParams.source, onChange: (e)=>setUtmParams({ ...utmParams, source: e.target.value }), className: "px-4 py-2 rounded-lg border focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 258, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Medium", value: utmParams.medium, onChange: (e)=>setUtmParams({ ...utmParams, medium: e.target.value }), className: "px-4 py-2 rounded-lg border focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 267, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Campaign", value: utmParams.campaign, onChange: (e)=>setUtmParams({ ...utmParams, campaign: e.target.value }), className: "px-4 py-2 rounded-lg border focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 276, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 286, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }, "Generated Link:"), /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-100 p-4 rounded-lg overflow-x-auto", __source: { fileName: "", lineNumber: 288, columnNumber: 21 }, __self: this }, generateUTMLink()), /*#__PURE__*/ React.createElement("button", { onClick: saveUTMLink, className: "mt-4 bg-[#00ff00] px-6 py-2 rounded-lg font-bold hover:opacity-90", __source: { fileName: "", lineNumber: 291, columnNumber: 21 }, __self: this }, "Save Link"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 301, columnNumber: 19 }, __self: this }, "Tracking Stats"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 302, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 303, columnNumber: 21 }, __self: this }, "Clicks: ", selectedListing.clicks || 0), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 304, columnNumber: 21 }, __self: this }, "Conversions: ", selectedListing.conversions || 0))))))), showToast && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-[#00ff00] text-black px-6 py-3 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 313, columnNumber: 9 }, __self: this }, "Link saved successfully!")); }