function MainComponent() { const [linkDuration, setLinkDuration] = React.useState(20); const [selectedFormType, setSelectedFormType] = React.useState('laser'); const [isLinkGenerating, setIsLinkGenerating] = React.useState(false); const [generatedLink, setGeneratedLink] = React.useState(''); const [formFields, setFormFields] = React.useState({ laser: [ { type: 'text', question: 'Do you have any skin conditions?' } ], eyelashes: [ { type: 'radio', question: 'Have you had eyelash extensions before?', options: [ 'Yes', 'No' ] } ], sculpt: [ { type: 'textarea', question: 'Please describe your hair care routine.' } ] }); const [formData, setFormData] = React.useState({}); const [isFormCompleted, setIsFormCompleted] = React.useState(false); const [clientData, setClientData] = React.useState({ email: '', name: '', phone: '' }); const handleDurationChange = (e)=>{ setLinkDuration(e.target.value); }; const handleFormTypeChange = (e)=>{ setSelectedFormType(e.target.value); }; const handleLinkGeneration = async ()=>{ setIsLinkGenerating(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: `Generate a link for the ${selectedFormType} form with a duration of ${linkDuration} minutes.` } ], system_prompt: 'Generate a temporary link for customer form.' }) }).then((res)=>res.json()); if (response.status) { setGeneratedLink(response.result); navigator.clipboard.writeText(response.result); } setIsLinkGenerating(false); }; const handleFieldChange = (e, formType)=>{ const updatedFields = formFields[formType].map((field)=>{ if (field.question === e.target.name) { return { ...field, answer: e.target.value }; } return field; }); setFormFields({ ...formFields, [formType]: updatedFields }); }; const handleClientDataChange = (e)=>{ setClientData({ ...clientData, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); const dataToConvert = { ...formData, client: { ...clientData } }; setIsFormCompleted(true); // Logic to convert data to PDF and send email will be implemented here }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-center my-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "Admin Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "module-container", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl my-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Module 1: Link Generator"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "duration", className: "mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Link Duration (minutes):"), /*#__PURE__*/ React.createElement("input", { className: "border rounded p-2", type: "number", name: "duration", min: "1", value: linkDuration, onChange: handleDurationChange, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center my-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "formType", className: "mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Select Form Type:"), /*#__PURE__*/ React.createElement("select", { className: "border rounded p-2", name: "formType", value: selectedFormType, onChange: handleFormTypeChange, __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, Object.keys(formFields).map((formType)=>/*#__PURE__*/ React.createElement("option", { key: formType, value: formType, __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, formType.charAt(0).toUpperCase() + formType.slice(1), " Form")))), /*#__PURE__*/ React.createElement("button", { className: "rounded px-4 py-2 text-white bg-[#010101]", onClick: handleLinkGeneration, disabled: isLinkGenerating, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, isLinkGenerating ? 'Generating...' : 'Generate Link'), generatedLink && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "Link: ", /*#__PURE__*/ React.createElement("a", { href: generatedLink, className: "text-blue-500", rel: "noopener noreferrer", target: "_blank", __source: { fileName: "", lineNumber: 98, columnNumber: 24 }, __self: this }, generatedLink))))), /*#__PURE__*/ React.createElement("div", { className: "module-container my-8", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl my-4", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "Module 2: Consent Forms"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, formFields[selectedFormType].map((field)=>{ if (field.type === 'text') { return /*#__PURE__*/ React.createElement("input", { key: field.question, className: "my-2 p-2 border rounded", type: "text", name: field.question, value: field.answer || '', onChange: (e)=>handleFieldChange(e, selectedFormType), placeholder: field.question, __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }); } else if (field.type === 'radio') { return /*#__PURE__*/ React.createElement("div", { key: field.question, className: "my-2", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }, field.question), field.options.map((option)=>/*#__PURE__*/ React.createElement("label", { key: option, className: "inline-flex items-center mx-2", __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: field.question, value: option, onChange: (e)=>handleFieldChange(e, selectedFormType), checked: field.answer === option, __source: { fileName: "", lineNumber: 125, columnNumber: 23 }, __self: this }), option))); } else if (field.type === 'textarea') { return /*#__PURE__*/ React.createElement("textarea", { key: field.question, className: "my-2 p-2 border rounded", name: field.question, value: field.answer || '', onChange: (e)=>handleFieldChange(e, selectedFormType), placeholder: field.question, __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }); } return null; }), /*#__PURE__*/ React.createElement("div", { className: "client-info my-4", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "my-2 p-2 border rounded", type: "email", name: "email", value: clientData.email, onChange: handleClientDataChange, placeholder: "Client's Email", required: true, __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "my-2 p-2 border rounded", type: "text", name: "name", value: clientData.name, onChange: handleClientDataChange, placeholder: "Client's Name", required: true, __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "my-2 p-2 border rounded", type: "tel", name: "phone", value: clientData.phone, onChange: handleClientDataChange, placeholder: "Client's Phone Number", required: true, __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "signature-area my-4", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, "Please sign below using your finger or stylus:")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "rounded px-4 py-2 bg-[#010101] text-white", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, "Submit")))); }