function MainComponent() { const [activeTab, setActiveTab] = useState("contacts"); const [search, setSearch] = useState(""); const [page, setPage] = useState(1); const [sortDirection, setSortDirection] = useState("desc"); const [submissions, setSubmissions] = useState({ contacts: [], demos: [], quotes: [], totalCount: 0 }); const [selectedItem, setSelectedItem] = useState(null); const [dateFilter, setDateFilter] = useState({ start: "", end: "" }); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const pageSize = 10; const fetchData = useCallback(async ()=>{ setLoading(true); setError(null); try { const response = await fetch("/api/get-submissions", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: activeTab, search, page, pageSize, sortDirection }) }); if (!response.ok) { throw new Error("Er is een probleem met het ophalen van de gegevens"); } const data = await response.json(); if (data.error) { setError(data.error); return; } setSubmissions({ contacts: data.contacts || [], demos: data.demos || [], quotes: data.quotes || [], totalCount: data.totalCount || 0 }); } catch (error) { console.error("Error:", error); setError("Er is een fout opgetreden bij het laden van de gegevens"); setSubmissions({ contacts: [], demos: [], quotes: [], totalCount: 0 }); } finally{ setLoading(false); } }, [ activeTab, search, page, pageSize, sortDirection ]); useEffect(()=>{ fetchData(); }, [ fetchData ]); const exportToCsv = ()=>{ const items = submissions[activeTab] || []; if (!items.length) return; const headers = [ "Datum", "Naam", "Bedrijf", "Email", "Telefoon", "Type", "Bericht" ]; const csvContent = [ headers.join(","), ...items.map((item)=>[ new Date(item.created_at).toLocaleDateString(), item.data.name, item.data.company, item.data.email, item.data.phone, item.type, `"${item.data.message?.replace(/"/g, '""') || ""}"` ].join(",")) ].join("\n"); const blob = new Blob([ csvContent ], { type: "text/csv;charset=utf-8;" }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.setAttribute("download", `${activeTab}_${new Date().toISOString()}.csv`); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const tabContent = { contacts: "Contacten", demos: "Demo Aanvragen", quotes: "Offertes" }; const handleTabClick = (tab)=>{ setActiveTab(tab); setPage(1); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-lg", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/aef8f980-d5fb-49c2-809d-7aec24d69b25/-/format/auto/", alt: "Roof Cloud Logo", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-500 hover:text-[#6bbd45] px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, "Terug naar Website"))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto p-4 md:p-8", __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg flex items-center justify-between", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, error)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setError(null), className: "text-red-400 hover:text-red-600", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center mb-6", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mb-4 md:mb-0", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold bg-gradient-to-r from-[#6bbd45] to-[#8257b6] text-transparent bg-clip-text", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, "Admin Dashboard"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, "/admindashboard")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 w-full md:w-auto", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Zoeken...", className: "border rounded-lg pl-10 pr-4 py-2 w-full", value: search, onChange: (e)=>setSearch(e.target.value), __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: exportToCsv, disabled: loading || submissions[activeTab]?.length === 0, className: "bg-gradient-to-r from-[#6bbd45] to-[#8257b6] text-white px-4 py-2 rounded-lg hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }), "Exporteer CSV"))), /*#__PURE__*/ React.createElement("div", { className: "flex border-b mb-6", __source: { fileName: "", lineNumber: 186, columnNumber: 11 }, __self: this }, Object.entries(tabContent).map(([key, label])=>/*#__PURE__*/ React.createElement("button", { key: key, onClick: ()=>handleTabClick(key), disabled: loading, className: `px-4 py-2 ${activeTab === key ? "border-b-2 border-[#6bbd45] text-[#6bbd45]" : "text-gray-500 hover:text-gray-700"} disabled:opacity-50 disabled:cursor-not-allowed`, __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, label))), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center py-12", __source: { fileName: "", lineNumber: 204, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 border-4 border-[#6bbd45] border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-gray-600", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, "Gegevens laden...")) : submissions[activeTab]?.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center py-12 text-center", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 210, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-inbox text-gray-400 text-2xl", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 mb-1", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, "Geen gegevens gevonden"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 max-w-sm", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, search ? `Geen resultaten gevonden voor "${search}"` : `Er zijn nog geen ${tabContent[activeTab].toLowerCase()} beschikbaar`), search && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSearch(""), className: "mt-4 text-[#6bbd45] hover:text-[#8257b6]", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, "Zoekopdracht wissen")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 236, columnNumber: 23 }, __self: this }, "Datum"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 237, columnNumber: 23 }, __self: this }, "Naam"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 238, columnNumber: 23 }, __self: this }, "Bedrijf"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 239, columnNumber: 23 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 240, columnNumber: 23 }, __self: this }, "Telefoon"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 241, columnNumber: 23 }, __self: this }, "Bericht"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 244, columnNumber: 19 }, __self: this }, (submissions[activeTab] || []).map((item)=>/*#__PURE__*/ React.createElement("tr", { key: item.id, onClick: ()=>setSelectedItem(item), className: "hover:bg-gray-50 cursor-pointer border-b", __source: { fileName: "", lineNumber: 246, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 251, columnNumber: 25 }, __self: this }, new Date(item.created_at).toLocaleDateString()), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 254, columnNumber: 25 }, __self: this }, item.data.name), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 255, columnNumber: 25 }, __self: this }, item.data.company), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 256, columnNumber: 25 }, __self: this }, item.data.email), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 257, columnNumber: 25 }, __self: this }, item.data.phone), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 truncate max-w-xs", __source: { fileName: "", lineNumber: 258, columnNumber: 25 }, __self: this }, item.data.message)))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this }, "Totaal: ", submissions.totalCount, " resultaten"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage(Math.max(1, page - 1)), disabled: page === 1, className: "px-4 py-2 rounded-lg bg-gray-100 disabled:opacity-50", __source: { fileName: "", lineNumber: 271, columnNumber: 19 }, __self: this }, "Vorige"), /*#__PURE__*/ React.createElement("span", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 278, columnNumber: 19 }, __self: this }, "Pagina ", page, " van", " ", Math.ceil(submissions.totalCount / pageSize)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage(page + 1), disabled: page >= Math.ceil(submissions.totalCount / pageSize), className: "px-4 py-2 rounded-lg bg-gray-100 disabled:opacity-50", __source: { fileName: "", lineNumber: 282, columnNumber: 19 }, __self: this }, "Volgende"))))), selectedItem && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 298, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 max-w-2xl w-full", __source: { fileName: "", lineNumber: 299, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 300, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 301, columnNumber: 17 }, __self: this }, "Details"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedItem(null), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-times", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-bold", __source: { fileName: "", lineNumber: 311, columnNumber: 19 }, __self: this }, "Datum:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 312, columnNumber: 19 }, __self: this }, new Date(selectedItem.created_at).toLocaleString())), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 314, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-bold", __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }, "Naam:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 316, columnNumber: 19 }, __self: this }, selectedItem.data.name)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 318, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-bold", __source: { fileName: "", lineNumber: 319, columnNumber: 19 }, __self: this }, "Bedrijf:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 320, columnNumber: 19 }, __self: this }, selectedItem.data.company)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 322, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-bold", __source: { fileName: "", lineNumber: 323, columnNumber: 19 }, __self: this }, "Email:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }, selectedItem.data.email)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 326, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-bold", __source: { fileName: "", lineNumber: 327, columnNumber: 19 }, __self: this }, "Telefoon:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 328, columnNumber: 19 }, __self: this }, selectedItem.data.phone)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 330, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-bold", __source: { fileName: "", lineNumber: 331, columnNumber: 19 }, __self: this }, "Bericht:"), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, selectedItem.data.message))))))); }