function MainComponent() { const [companies, setCompanies] = React.useState([]); const [selectedCompany, setSelectedCompany] = React.useState(null); React.useEffect(()=>{ fetchCompanies(); }, []); const fetchCompanies = async ()=>{ try { const response = await fetch("/api/db/ferousia", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `companies`" }) }); const data = await response.json(); setCompanies(data); } catch (error) { console.error("Error fetching companies:", error); } }; const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const newCompany = Object.fromEntries(formData.entries()); try { await fetch("/api/db/ferousia", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `companies` (email, company_name, contact_person, resources, waste, skills, services, needs) VALUES (?, ?, ?, ?, ?, ?, ?, ?)", values: [ newCompany.email, newCompany.companyName, newCompany.contactPerson, newCompany.availableResources, newCompany.wasteToRecover, newCompany.skillsToShare, newCompany.commercialServices, newCompany.needs ] }) }); await fetchCompanies(); event.target.reset(); checkMatchesAndNotify(newCompany); } catch (error) { console.error("Error adding company:", error); } }; const checkMatchesAndNotify = (newCompany)=>{ const matches = companies.filter((company)=>{ return company.resources.includes(newCompany.needs) || company.waste.includes(newCompany.needs) || company.skills.includes(newCompany.needs) || company.services.includes(newCompany.needs) || company.needs.includes(newCompany.availableResources) || company.needs.includes(newCompany.wasteToRecover) || company.needs.includes(newCompany.skillsToShare) || company.needs.includes(newCompany.commercialServices); }); if (matches.length > 0) { matches.forEach((match)=>{ const matchDetails = { resources: match.resources.includes(newCompany.needs) ? { offered: match.resources, needed: newCompany.needs } : null, waste: match.waste.includes(newCompany.needs) ? { offered: match.waste, needed: newCompany.needs } : null, skills: match.skills.includes(newCompany.needs) ? { offered: match.skills, needed: newCompany.needs } : null, services: match.services.includes(newCompany.needs) ? { offered: match.services, needed: newCompany.needs } : null, needs: { resources: match.needs.includes(newCompany.availableResources) ? { needed: match.needs, offered: newCompany.availableResources } : null, waste: match.needs.includes(newCompany.wasteToRecover) ? { needed: match.needs, offered: newCompany.wasteToRecover } : null, skills: match.needs.includes(newCompany.skillsToShare) ? { needed: match.needs, offered: newCompany.skillsToShare } : null, services: match.needs.includes(newCompany.commercialServices) ? { needed: match.needs, offered: newCompany.commercialServices } : null } }; sendMatchNotificationEmail(newCompany, match, matchDetails); }); } }; const sendMatchNotificationEmail = (newCompany, matchedCompany, matchDetails)=>{ let emailContent = ` Bonjour, Un nouveau match a été identifié entre ${newCompany.companyName} et ${matchedCompany.company_name} ! Détails des correspondances : `; if (matchDetails.resources) { emailContent += ` 📦 Ressources : ${matchedCompany.company_name} offre : ${matchDetails.resources.offered} ${newCompany.companyName} recherche : ${matchDetails.resources.needed} `; } if (matchDetails.waste) { emailContent += ` ♻️ Déchets à valoriser : ${matchedCompany.company_name} propose : ${matchDetails.waste.offered} ${newCompany.companyName} recherche : ${matchDetails.waste.needed} `; } if (matchDetails.skills) { emailContent += ` 🧠 Compétences : ${matchedCompany.company_name} propose : ${matchDetails.skills.offered} ${newCompany.companyName} recherche : ${matchDetails.skills.needed} `; } if (matchDetails.services) { emailContent += ` 🛠️ Services : ${matchedCompany.company_name} propose : ${matchDetails.services.offered} ${newCompany.companyName} recherche : ${matchDetails.services.needed} `; } if (matchDetails.needs.resources) { emailContent += ` 📦 Ressources recherchées par ${matchedCompany.company_name} : Besoin : ${matchDetails.needs.resources.needed} ${newCompany.companyName} propose : ${matchDetails.needs.resources.offered} `; } if (matchDetails.needs.waste) { emailContent += ` ♻️ Déchets recherchés par ${matchedCompany.company_name} : Besoin : ${matchDetails.needs.waste.needed} ${newCompany.companyName} propose : ${matchDetails.needs.waste.offered} `; } if (matchDetails.needs.skills) { emailContent += ` 🧠 Compétences recherchées par ${matchedCompany.company_name} : Besoin : ${matchDetails.needs.skills.needed} ${newCompany.companyName} propose : ${matchDetails.needs.skills.offered} `; } if (matchDetails.needs.services) { emailContent += ` 🛠️ Services recherchés par ${matchedCompany.company_name} : Besoin : ${matchDetails.needs.services.needed} ${newCompany.companyName} propose : ${matchDetails.needs.services.offered} `; } emailContent += ` Contacts : ${newCompany.companyName} : ${newCompany.email} (${newCompany.contactPerson}) ${matchedCompany.company_name} : ${matchedCompany.email} (${matchedCompany.contact_person}) Nous vous invitons à prendre contact pour explorer ces opportunités de collaboration ! Cordialement, L'équipe Re(ge)nère `; fetch("/api/send-email", { method: "POST", body: JSON.stringify({ to: [ newCompany.email, matchedCompany.email ], subject: "Nouveau match identifié sur Re(ge)nère !", content: emailContent }) }).catch((error)=>console.error("Error sending email:", error)); }; const updateDashboard = ()=>{ return companies.map((company, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-4 rounded shadow bg-[#FFF5E6]", __source: { fileName: "", lineNumber: 238, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2 text-[#FF9966]", __source: { fileName: "", lineNumber: 239, columnNumber: 9 }, __self: this }, company.company_name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 242, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 243, columnNumber: 11 }, __self: this }, "Email:"), " ", company.email), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 245, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 246, columnNumber: 11 }, __self: this }, "Contact:"), " ", company.contact_person), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 249, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 250, columnNumber: 11 }, __self: this }, "Ressources:"), " ", company.resources), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 253, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 254, columnNumber: 11 }, __self: this }, "Déchets:"), " ", company.waste), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 256, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, "Compétences:"), " ", company.skills), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 260, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 261, columnNumber: 11 }, __self: this }, "Services:"), " ", company.services), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 264, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, "Besoins:"), " ", company.needs), /*#__PURE__*/ React.createElement("canvas", { id: `chart-${index}`, className: "mt-4", __source: { fileName: "", lineNumber: 267, columnNumber: 9 }, __self: this }))); }; const updateCompanyDropdown = ()=>{ return companies.map((company, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: index, __source: { fileName: "", lineNumber: 274, columnNumber: 7 }, __self: this }, company.company_name)); }; const handleCompanySelect = (event)=>{ const index = event.target.value; setSelectedCompany(companies[index]); }; const displayMatches = ()=>{ if (!selectedCompany) return null; const matches = companies.filter((company)=>{ return company.id !== selectedCompany.id && (company.resources.includes(selectedCompany.needs) || company.waste.includes(selectedCompany.needs) || company.skills.includes(selectedCompany.needs) || company.services.includes(selectedCompany.needs) || company.needs.includes(selectedCompany.resources) || company.needs.includes(selectedCompany.waste) || company.needs.includes(selectedCompany.skills) || company.needs.includes(selectedCompany.services)); }); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 303, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2 text-[#FF9966]", __source: { fileName: "", lineNumber: 304, columnNumber: 9 }, __self: this }, selectedCompany.company_name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 307, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 308, columnNumber: 11 }, __self: this }, "Email:"), " ", selectedCompany.email), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 311, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 312, columnNumber: 11 }, __self: this }, "Contact:"), " ", selectedCompany.contact_person), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 315, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 316, columnNumber: 11 }, __self: this }, "Ressources:"), " ", selectedCompany.resources), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 319, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 320, columnNumber: 11 }, __self: this }, "Déchets:"), " ", selectedCompany.waste), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 323, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 324, columnNumber: 11 }, __self: this }, "Compétences:"), " ", selectedCompany.skills), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 327, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 328, columnNumber: 11 }, __self: this }, "Services:"), " ", selectedCompany.services), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 331, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#66CCCC]", __source: { fileName: "", lineNumber: 332, columnNumber: 11 }, __self: this }, "Besoins:"), " ", selectedCompany.needs), /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-semibold mt-4 mb-2 text-[#FF9966]", __source: { fileName: "", lineNumber: 335, columnNumber: 9 }, __self: this }, "Correspondances et Matchs:"), matches.map((match, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-2 rounded mt-2 bg-[#E6FFF5]", __source: { fileName: "", lineNumber: 339, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 340, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-[#FF9966]", __source: { fileName: "", lineNumber: 341, columnNumber: 15 }, __self: this }, match.company_name)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 343, columnNumber: 13 }, __self: this }, match.resources.includes(selectedCompany.needs) && /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 345, columnNumber: 17 }, __self: this }, "📦 Ressources"), match.waste.includes(selectedCompany.needs) && /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 348, columnNumber: 17 }, __self: this }, "♻️ Déchets"), match.skills.includes(selectedCompany.needs) && /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 351, columnNumber: 17 }, __self: this }, "🧠 Compétences"), match.services.includes(selectedCompany.needs) && /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 354, columnNumber: 17 }, __self: this }, "🛠️ Services"), match.needs.includes(selectedCompany.resources) || match.needs.includes(selectedCompany.waste) || match.needs.includes(selectedCompany.skills) || match.needs.includes(selectedCompany.services) ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 360, columnNumber: 17 }, __self: this }, "🔍 Besoins") : null)))); }; React.useEffect(()=>{ companies.forEach((company, index)=>{ const ctx = document.getElementById(`chart-${index}`); if (ctx) { new Chart(ctx, { type: "bar", data: { labels: [ "Ressources", "Déchets", "Compétences", "Services", "Besoins" ], datasets: [ { label: "Données de l'entreprise", data: [ company.resources.split(",").length, company.waste.split(",").length, company.skills.split(",").length, company.services.split(",").length, company.needs.split(",").length ], backgroundColor: [ "rgba(255, 153, 102, 0.2)", "rgba(102, 204, 204, 0.2)", "rgba(255, 204, 153, 0.2)", "rgba(204, 153, 255, 0.2)", "rgba(153, 255, 204, 0.2)" ], borderColor: [ "rgba(255, 153, 102, 1)", "rgba(102, 204, 204, 1)", "rgba(255, 204, 153, 1)", "rgba(204, 153, 255, 1)", "rgba(153, 255, 204, 1)" ], borderWidth: 1 } ] }, options: { scales: { y: { beginAtZero: true } } } }); } }); }, [ companies ]); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-roboto bg-[#FFFAF0]", __source: { fileName: "", lineNumber: 424, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center text-[#FF9966]", __source: { fileName: "", lineNumber: 425, columnNumber: 7 }, __self: this }, "Re(ge)nère - Plateforme d'Économie Circulaire"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 429, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-[#66CCCC]", __source: { fileName: "", lineNumber: 430, columnNumber: 9 }, __self: this }, "Enregistrez votre entreprise"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 433, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", className: "w-full p-2 border rounded bg-[#FFF5E6]", required: true, __source: { fileName: "", lineNumber: 434, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", placeholder: "Nom de l'entreprise", className: "w-full p-2 border rounded bg-[#FFF5E6]", required: true, __source: { fileName: "", lineNumber: 441, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "contactPerson", placeholder: "Personne de contact", className: "w-full p-2 border rounded bg-[#FFF5E6]", required: true, __source: { fileName: "", lineNumber: 448, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "availableResources", placeholder: "Ressources disponibles", className: "w-full p-2 border rounded bg-[#FFF5E6]", required: true, __source: { fileName: "", lineNumber: 455, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "wasteToRecover", placeholder: "Déchets à valoriser", className: "w-full p-2 border rounded bg-[#FFF5E6]", required: true, __source: { fileName: "", lineNumber: 461, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "skillsToShare", placeholder: "Compétences à partager", className: "w-full p-2 border rounded bg-[#FFF5E6]", required: true, __source: { fileName: "", lineNumber: 467, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "commercialServices", placeholder: "Services commerciaux proposés", className: "w-full p-2 border rounded bg-[#FFF5E6]", required: true, __source: { fileName: "", lineNumber: 473, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "needs", placeholder: "Besoins recherchés", className: "w-full p-2 border rounded bg-[#FFF5E6]", required: true, __source: { fileName: "", lineNumber: 479, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#FF9966] text-white px-4 py-2 rounded hover:bg-[#FF8C52]", __source: { fileName: "", lineNumber: 485, columnNumber: 11 }, __self: this }, "Enregistrer"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 494, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-[#66CCCC]", __source: { fileName: "", lineNumber: 495, columnNumber: 9 }, __self: this }, "Tableau de bord des entreprises"), /*#__PURE__*/ React.createElement("div", { id: "companyDashboard", className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 498, columnNumber: 9 }, __self: this }, updateDashboard())), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 506, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-[#66CCCC]", __source: { fileName: "", lineNumber: 507, columnNumber: 9 }, __self: this }, "Sélectionner une entreprise"), /*#__PURE__*/ React.createElement("select", { id: "companyDropdown", className: "w-full p-2 border rounded bg-[#FFF5E6]", onChange: handleCompanySelect, __source: { fileName: "", lineNumber: 510, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 515, columnNumber: 11 }, __self: this }, "Choisir une entreprise"), updateCompanyDropdown())), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 520, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-[#66CCCC]", __source: { fileName: "", lineNumber: 521, columnNumber: 9 }, __self: this }, "Espace Collectif - Correspondances et Matchs"), /*#__PURE__*/ React.createElement("div", { id: "matchesDisplay", className: "border p-4 rounded bg-[#FFF5E6]", __source: { fileName: "", lineNumber: 524, columnNumber: 9 }, __self: this }, displayMatches()))); }