function MainComponent() { const [formData, setFormData] = useState({ template: "", brandName: "", creatorName: "", projectScope: "", deliverables: "", deadline: "", compensation: "", revisions: "", rights: "", terms: "" }); const [generatedContract, setGeneratedContract] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [validationErrors, setValidationErrors] = useState({}); const [creator, setCreator] = useState(null); useEffect(()=>{ const fetchCreator = async ()=>{ try { const response = await fetch("/api/db/creators", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM creators LIMIT 1" }) }); const data = await response.json(); if (data.length > 0) { setCreator(data[0]); } } catch (error) { console.error("Error fetching creator:", error); } }; fetchCreator(); }, []); const templates = { standard: { revisions: "Up to 2 rounds of revisions included", rights: "Non-exclusive rights to use content across all platforms", terms: "30-day payment terms\nContent to be approved before publishing" }, rush: { revisions: "1 round of revisions, 24-hour turnaround", rights: "Non-exclusive rights with 48-hour exclusivity window", terms: "Rush fee applies\nPayment due immediately upon delivery" }, exclusive: { revisions: "Up to 3 rounds of revisions included", rights: "Exclusive worldwide rights in perpetuity", terms: "90-day content exclusivity\nFull buyout of rights" } }; const handleChange = (e)=>{ if (e.target.name === "template" && e.target.value) { const template = templates[e.target.value]; setFormData({ ...formData, template: e.target.value, revisions: template.revisions, rights: template.rights, terms: template.terms }); } else { setFormData({ ...formData, [e.target.name]: e.target.value }); } if (validationErrors[e.target.name]) { setValidationErrors({ ...validationErrors, [e.target.name]: "" }); } }; const validateForm = ()=>{ const errors = {}; if (!formData.brandName) errors.brandName = "Brand name is required"; if (!formData.creatorName) errors.creatorName = "Creator name is required"; if (!formData.projectScope) errors.projectScope = "Project scope is required"; if (!formData.deliverables) errors.deliverables = "Deliverables are required"; if (!formData.deadline) errors.deadline = "Deadline is required"; if (!formData.compensation) errors.compensation = "Compensation is required"; return errors; }; const generateContract = async ()=>{ const errors = validateForm(); if (Object.keys(errors).length > 0) { setValidationErrors(errors); return; } setLoading(true); setError(""); try { if (creator) { const compensation = parseFloat(formData.compensation.replace(/[^0-9.-]+/g, "")); if (!isNaN(compensation)) { await fetch("/api/db/creators", { method: "POST", body: JSON.stringify({ query: "UPDATE creators SET total_revenue = COALESCE(total_revenue, 0) + ? WHERE id = ?", values: [ compensation, creator.id ] }) }); } } await new Promise((resolve)=>setTimeout(resolve, 2000)); setGeneratedContract(`CONTENT CREATOR AGREEMENT Between ${formData.brandName} ("Brand") and ${formData.creatorName} ("Creator") 1. PROJECT SCOPE ${formData.projectScope} 2. DELIVERABLES ${formData.deliverables} 3. TIMELINE Deadline: ${formData.deadline} 4. COMPENSATION ${formData.compensation} 5. REVISIONS ${formData.revisions} 6. RIGHTS AND OWNERSHIP ${formData.rights} 7. ADDITIONAL TERMS ${formData.terms} Signed by: _______________ (Brand) _______________ (Creator) Date: ${new Date().toLocaleDateString()}`); } catch (err) { setError("Failed to generate contract. Please try again."); } finally{ setLoading(false); } }; const exportToPDF = ()=>{ window.print(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white px-4", __source: { fileName: "", lineNumber: 162, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center py-6 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-bold text-2xl bg-[#00ff00] px-4 py-1 rounded-lg", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, "CreatorConnect")), /*#__PURE__*/ React.createElement("main", { className: "max-w-6xl mx-auto py-8 md:py-12", __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold mb-6 md:mb-8", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, "Contract Management"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:grid lg:grid-cols-2 gap-6 md:gap-8", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4 md:space-y-6 order-2 lg:order-1", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "space-y-3 md:space-y-4", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "template", value: formData.template, onChange: handleChange, className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] bg-white hover:border-[#00ff00] transition-colors", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, "Select Template"), /*#__PURE__*/ React.createElement("option", { value: "standard", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, "Standard Agreement"), /*#__PURE__*/ React.createElement("option", { value: "rush", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }, "Rush Delivery"), /*#__PURE__*/ React.createElement("option", { value: "exclusive", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, "Exclusive Rights")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "brandName", placeholder: "Brand Name", value: formData.brandName, onChange: handleChange, className: `w-full px-4 py-3 rounded-lg border ${validationErrors.brandName ? "border-red-500" : "border-gray-300"} focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] hover:border-[#00ff00] transition-colors`, __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }), validationErrors.brandName && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 210, columnNumber: 17 }, __self: this }, validationErrors.brandName), /*#__PURE__*/ React.createElement("input", { type: "text", name: "creatorName", placeholder: "Creator Name", value: formData.creatorName, onChange: handleChange, className: `w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base rounded-lg border ${validationErrors.creatorName ? "border-red-500" : "border-gray-300"} focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] hover:border-[#00ff00] transition-colors`, __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }), validationErrors.creatorName && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, validationErrors.creatorName), /*#__PURE__*/ React.createElement("textarea", { name: "projectScope", placeholder: "Project Scope", value: formData.projectScope, onChange: handleChange, rows: 4, className: `w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base rounded-lg border ${validationErrors.projectScope ? "border-red-500" : "border-gray-300"} focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] hover:border-[#00ff00] transition-colors`, __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }), validationErrors.projectScope && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, validationErrors.projectScope), /*#__PURE__*/ React.createElement("textarea", { name: "deliverables", placeholder: "Deliverables", value: formData.deliverables, onChange: handleChange, rows: 4, className: `w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base rounded-lg border ${validationErrors.deliverables ? "border-red-500" : "border-gray-300"} focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] hover:border-[#00ff00] transition-colors`, __source: { fileName: "", lineNumber: 251, columnNumber: 15 }, __self: this }), validationErrors.deliverables && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, validationErrors.deliverables), /*#__PURE__*/ React.createElement("input", { type: "date", name: "deadline", value: formData.deadline, onChange: handleChange, className: `w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base rounded-lg border ${validationErrors.deadline ? "border-red-500" : "border-gray-300"} focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] hover:border-[#00ff00] transition-colors`, __source: { fileName: "", lineNumber: 269, columnNumber: 15 }, __self: this }), validationErrors.deadline && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, validationErrors.deadline), /*#__PURE__*/ React.createElement("input", { type: "text", name: "compensation", placeholder: "Compensation", value: formData.compensation, onChange: handleChange, className: `w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base rounded-lg border ${validationErrors.compensation ? "border-red-500" : "border-gray-300"} focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] hover:border-[#00ff00] transition-colors`, __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }), validationErrors.compensation && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, validationErrors.compensation), /*#__PURE__*/ React.createElement("input", { type: "text", name: "revisions", placeholder: "Revision Policy", value: formData.revisions, onChange: handleChange, className: "w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] hover:border-[#00ff00] transition-colors", __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "rights", placeholder: "Rights and Ownership Terms", value: formData.rights, onChange: handleChange, rows: 4, className: "w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] hover:border-[#00ff00] transition-colors", __source: { fileName: "", lineNumber: 313, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "terms", placeholder: "Additional Terms", value: formData.terms, onChange: handleChange, rows: 4, className: "w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#00ff00] focus:border-[#00ff00] hover:border-[#00ff00] transition-colors", __source: { fileName: "", lineNumber: 322, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-3 md:gap-4", __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateContract, disabled: loading, className: "w-full md:w-auto bg-[#00ff00] text-black px-4 md:px-6 py-2 md:py-3 rounded-lg font-bold hover:opacity-90 disabled:opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 333, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 340, columnNumber: 21 }, __self: this }), "Generating...") : "Generate Contract"), /*#__PURE__*/ React.createElement("button", { onClick: exportToPDF, disabled: !generatedContract, className: "w-full md:w-auto bg-gray-200 text-gray-800 px-4 md:px-6 py-2 md:py-3 rounded-lg font-bold hover:opacity-90 disabled:opacity-50", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, "Export to PDF"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 md:p-6 rounded-xl order-1 lg:order-2", __source: { fileName: "", lineNumber: 357, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-bold mb-3 md:mb-4", __source: { fileName: "", lineNumber: 358, columnNumber: 13 }, __self: this }, "Contract Preview"), /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap font-mono bg-white p-4 md:p-6 rounded-lg min-h-[300px] md:min-h-[500px] border border-gray-200 text-sm md:text-base", __source: { fileName: "", lineNumber: 361, columnNumber: 13 }, __self: this }, generatedContract || "Contract preview will appear here..."))))); }